import { jsx as v } from "react/jsx-runtime";
import { forwardRef as R, Children as g } from "react";
import { cx as j } from "../../utils/classNames.js";
import { useArrowTheme as C } from "../../hooks/useArrowTheme.js";
const I = R(
  ({
    children: b,
    inverse: c,
    buttonSpan: x = "hug",
    arrangement: t,
    smallButtonSpan: i,
    smallButtonArrangement: s,
    mediumButtonSpan: u,
    mediumButtonArrangement: r,
    largeButtonSpan: o,
    largeButtonArrangement: d,
    alignment: h,
    primaryActionOnRight: O,
    className: f,
    ...l
  }, m) => {
    const y = C(), w = c ?? y.inverse, p = g.toArray(b);
    return p.length === 0 ? null : /* @__PURE__ */ v(
      "ul",
      {
        ref: m,
        role: "list",
        className: j(
          "tdds-button-group",
          "tdds-button-group--" + x,
          {
            ["tdds-button-group--" + t]: t !== void 0,
            ["tdds:sm:button-group--" + i]: i !== void 0,
            ["tdds:sm:button-group--" + s]: s !== void 0,
            ["tdds:md:button-group--" + u]: u !== void 0,
            ["tdds:md:button-group--" + r]: r !== void 0,
            ["tdds:lg:button-group--" + o]: o !== void 0,
            ["tdds:lg:button-group--" + d]: d !== void 0,
            ["tdds:xl:button-group--" + o]: o !== void 0,
            ["tdds:xl:button-group--" + d]: d !== void 0,
            ["tdds:xxl:button-group--" + o]: o !== void 0,
            ["tdds:xxl:button-group--" + d]: d !== void 0
          },
          f
        ),
        ...w ? { "data-inverse": "true" } : {},
        ...l,
        children: p.map((G, N) => /* @__PURE__ */ v(
          "li",
          {
            role: "listitem",
            "data-alignment": h,
            children: G
          },
          N
        ))
      }
    );
  }
);
I.displayName = "ButtonGroup";
export {
  I as ButtonGroup
};
//# sourceMappingURL=ButtonGroup.js.map
