welcome-ui/dist/Picker.mjs

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

"use client";
import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
import { Box as u } from "./Box.mjs";
import { FieldGroup as x } from "./FieldGroup.mjs";
import { Label as R } from "./Label.mjs";
import { shouldForwardProp as $, forwardRef as j } from "./System.mjs";
import h, { system as k } from "@xstyled/styled-components";
import { R as y } from "./NLEBE274-oSxMftGy.mjs";
import { u as b, R as w } from "./radio-group-C0fUHvam.mjs";
const P = h(y).withConfig({ shouldForwardProp: $ })`
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;

  ${k};
`, F = j(
  ({ dataTestId: e, label: m, name: s, onChange: t, options: p, required: a, value: l, ...c }, d) => {
    const f = b({ defaultValue: l }), n = (r) => {
      r.stopPropagation(), t && t(r);
    };
    return /* @__PURE__ */ o.jsx(
      x,
      {
        ...c,
        as: w,
        dataTestId: e,
        mb: 0,
        ref: d,
        required: a,
        store: f,
        children: /* @__PURE__ */ o.jsx(u, { display: "flex", flexWrap: "wrap", children: p.map(({ element: r, value: i }) => /* @__PURE__ */ o.jsxs(
          R,
          {
            checkableField: !0,
            dataTestId: e ? `${e}-item-${s}-${i}` : null,
            onClick: n,
            children: [
              /* @__PURE__ */ o.jsx(P, { name: s, value: i }),
              /* @__PURE__ */ o.jsx(r, { selected: l === i })
            ]
          },
          `${m}-${s}-${i}`
        )) })
      }
    );
  }
);
F.displayName = "Picker";
export {
  F as Picker
};