welcome-ui/dist/ButtonGroup.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as l } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { Children as d, cloneElement as m } from "react";
import { forwardRef as u } from "./System.mjs";
import f from "@xstyled/styled-components";
const b = f.divBox`
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: -3px;

  > * {
    margin-top: 3px;

    &:not(:only-child) {
      &:not(:last-child) {
        border-right-color: rgba(255, 255, 255, 0.4);
      }

      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child):not(:first-child) {
        border-radius: 0;
      }
    }
  }
`, y = u(
  ({ children: t, dataTestId: o, disabled: i, size: e, variant: s }, a) => {
    function n(p) {
      return d.toArray(p).filter(Boolean).map((r) => m(r, {
        ...r.props,
        disabled: i || r.props.disabled,
        size: e || r.props.size,
        variant: s || r.props.variant
      }));
    }
    return /* @__PURE__ */ l.jsx(b, { "data-testid": o, ref: a, children: n(t) });
  }
);
export {
  y as ButtonGroup
};