welcome-ui 0.0.0-dev.1738087585148

package/dist/Popover.js

@@ -0,0 +1,31 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o=require("@xstyled/styled-components"),u=require("./QYJ6MIDR-CRK3satR.js"),a=require("./BYC7LY2E-BkAEL2VD.js"),l=require("./System.js");require("./Icon.js");const f=require("./index-C1FV1q-F.js"),g=require("./Box.js"),P=require("./Button.js"),h=o(u.PopoverArrow)`
+  color: ${o.th("popovers.default.backgroundColor")};
+`,w=o.svgBox(({$transform:t})=>o.css`
+    transform: ${t};
+  `),v=o.div`
+  ${o.th("popovers.content")};
+`,p=o.h6`
+  margin: 0;
+  ${o.th("popovers.title")};
+`,m=o(a.Popover)(({$withCloseButton:t})=>o.css`
+    ${o.th("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${o.system};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t&&o.css`
+      ${p} {
+        padding-right: 50;
+      }
+    `}
+  `);o(u.PopoverDisclosure)`
+  ${o.system};
+`;const C=o(a.HovercardAnchor)`
+  ${o.system};
+`,$=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(u.PopoverDisclosure,{ref:s,render:t?c=>n.createElement(t,{...c}):void 0,store:r,...e})),E=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(C,{store:r,...e,forwardedAs:t,ref:s})),H={top:"rotateZ(180deg)",right:"rotateZ(-90deg)",bottom:"rotateZ(360deg)",left:"rotateZ(90deg)"},y=({store:t})=>{const r=t.useState("currentPlacement"),[e]=r.split("-"),s=H[e];return n.createElement(h,{store:t},n.createElement(w,{$transform:s,h:30,w:30,xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M7 30L15 22L23 30H7Z",fill:"currentColor",fillRule:"nonzero",id:"stroke"}),n.createElement("path",{d:"M8 30L15 23L22 30H8Z",fill:"currentColor",fillRule:"nonzero"})))},d=({children:t,onClose:r,store:e})=>{const s=()=>{r&&r(),e==null||e.hide()},{withCloseButton:c}=e;return n.createElement(g.Box,{position:"relative"},n.createElement(y,{store:e}),t,c&&n.createElement(P.Button,{flex:"0 0 auto",ml:"md",onClick:s,position:"absolute",right:1,shape:"square",size:"xs",top:1,variant:"secondary"},n.createElement(f.CrossIcon,null)))},B=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{$withCloseButton:i,ref:c,store:e,...s},n.createElement(d,{onClose:r,store:e},t))}),q=Object.assign(B,{Content:v,Title:p,Trigger:$}),T=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{as:a.Hovercard,store:e,...s,$withCloseButton:i,ref:c},n.createElement(d,{onClose:r,store:e},t))}),R=Object.assign(T,{Content:v,Title:p,Trigger:E}),b=({animated:t=150,withCloseButton:r=!1,...e}={})=>({...a.usePopoverStore({animated:t,...e}),withCloseButton:r}),x=({animated:t=150,hideTimeout:r=300,showTimeout:e=500,withCloseButton:s=!1,...c}={})=>({...a.useHovercardStore({animated:t,hideTimeout:r,showTimeout:e,...c}),withCloseButton:s});exports.Popover=q;exports.PopoverHover=R;exports.usePopover=b;exports.usePopoverHover=x;

package/dist/Popover.mjs

@@ -0,0 +1,144 @@
+"use client";
+import r from "react";
+import a, { th as l, css as p, system as m } from "@xstyled/styled-components";
+import { P as h, a as v } from "./QYJ6MIDR-BLLqyXdd.mjs";
+import { P, H as $, a as C, u as w, b as E } from "./BYC7LY2E-CVjUW1dr.mjs";
+import { forwardRef as i } from "./System.mjs";
+import "./Icon.mjs";
+import { C as H } from "./index-C7zM96J_.mjs";
+import { Box as B } from "./Box.mjs";
+import { Button as T } from "./Button.mjs";
+const b = a(h)`
+  color: ${l("popovers.default.backgroundColor")};
+`, x = a.svgBox(
+  ({ $transform: t }) => p`
+    transform: ${t};
+  `
+), d = a.div`
+  ${l("popovers.content")};
+`, u = a.h6`
+  margin: 0;
+  ${l("popovers.title")};
+`, f = a(P)(
+  ({ $withCloseButton: t }) => p`
+    ${l("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${m};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t && p`
+      ${u} {
+        padding-right: 50;
+      }
+    `}
+  `
+);
+a(v)`
+  ${m};
+`;
+const y = a($)`
+  ${m};
+`, Z = i(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
+    v,
+    {
+      ref: n,
+      render: t ? (s) => /* @__PURE__ */ r.createElement(t, { ...s }) : void 0,
+      store: o,
+      ...e
+    }
+  )
+), A = i(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(y, { store: o, ...e, forwardedAs: t, ref: n })
+), L = {
+  top: "rotateZ(180deg)",
+  right: "rotateZ(-90deg)",
+  bottom: "rotateZ(360deg)",
+  left: "rotateZ(90deg)"
+}, R = ({ store: t }) => {
+  const o = t.useState("currentPlacement"), [e] = o.split("-"), n = L[e];
+  return /* @__PURE__ */ r.createElement(b, { store: t }, /* @__PURE__ */ r.createElement(x, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ r.createElement("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }), /* @__PURE__ */ r.createElement("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })));
+}, g = ({ children: t, onClose: o, store: e }) => {
+  const n = () => {
+    o && o(), e == null || e.hide();
+  }, { withCloseButton: s } = e;
+  return /* @__PURE__ */ r.createElement(B, { position: "relative" }, /* @__PURE__ */ r.createElement(R, { store: e }), t, s && /* @__PURE__ */ r.createElement(
+    T,
+    {
+      flex: "0 0 auto",
+      ml: "md",
+      onClick: n,
+      position: "absolute",
+      right: 1,
+      shape: "square",
+      size: "xs",
+      top: 1,
+      variant: "secondary"
+    },
+    /* @__PURE__ */ r.createElement(H, null)
+  ));
+}, _ = i(
+  ({ children: t, onClose: o, store: e, ...n }, s) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(f, { $withCloseButton: c, ref: s, store: e, ...n }, /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t));
+  }
+), G = Object.assign(_, {
+  Content: d,
+  Title: u,
+  Trigger: Z
+}), k = i(
+  ({ children: t, onClose: o, store: e, ...n }, s) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(
+      f,
+      {
+        as: C,
+        store: e,
+        ...n,
+        $withCloseButton: c,
+        ref: s
+      },
+      /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
+    );
+  }
+), J = Object.assign(k, {
+  Content: d,
+  Title: u,
+  Trigger: A
+}), K = ({
+  animated: t = 150,
+  withCloseButton: o = !1,
+  ...e
+} = {}) => ({
+  ...w({
+    animated: t,
+    ...e
+  }),
+  withCloseButton: o
+}), N = ({
+  animated: t = 150,
+  hideTimeout: o = 300,
+  showTimeout: e = 500,
+  withCloseButton: n = !1,
+  ...s
+} = {}) => ({
+  ...E({
+    animated: t,
+    hideTimeout: o,
+    showTimeout: e,
+    ...s
+  }),
+  withCloseButton: n
+});
+export {
+  G as Popover,
+  J as PopoverHover,
+  K as usePopover,
+  N as usePopoverHover
+};

package/dist/QYJ6MIDR-BLLqyXdd.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { u as E, b as C, P as N } from "./MTZPJQMC-C0Xe_WK4.mjs";
+import { c as v, _ as f, d as m, e as x, g as c, f as P, h, i as w, t as l, z as V, F as j, G as z, b as R, E as O } from "./LVA2YJMS-qFC9J-lt.mjs";
+import { useMemo as T, useState as W } from "react";
+import { u as M } from "./AXB53BZF-CGoc4K3d.mjs";
+var H = "div", _ = v(
+  function(t) {
+    var r = t, { store: e } = r, o = f(r, ["store"]);
+    const n = E();
+    return e = e || n, o = m(c({}, o), {
+      ref: x(e == null ? void 0 : e.setAnchorElement, o.ref)
+    }), o;
+  }
+);
+P(function(t) {
+  const r = _(t);
+  return h(H, r);
+});
+var g = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z", L = "div", d = 30, a = d / 2, B = {
+  top: `rotate(180 ${a} ${a})`,
+  right: `rotate(-90 ${a} ${a})`,
+  bottom: `rotate(0 ${a} ${a})`,
+  left: `rotate(90 ${a} ${a})`
+};
+function F(u) {
+  const [t, r] = W(), e = u.useState("contentElement");
+  return j(() => {
+    if (!e) return;
+    const n = z(e).getComputedStyle(e);
+    r(n);
+  }, [e]), t;
+}
+var G = v(
+  function(t) {
+    var r = t, { store: e, size: o = d } = r, n = f(r, ["store", "size"]);
+    const p = C();
+    e = e || p, w(
+      e,
+      process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
+    );
+    const i = e.useState(
+      (k) => k.currentPlacement.split("-")[0]
+    ), s = F(e), y = (s == null ? void 0 : s.getPropertyValue("background-color")) || "none", A = (s == null ? void 0 : s.getPropertyValue(`border-${i}-color`)) || "none", S = (s == null ? void 0 : s.getPropertyValue(`border-${i}-width`)) || "0px", $ = Number.parseInt(S) * 2 * (d / o), b = B[i], D = T(
+      () => /* @__PURE__ */ l.jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ l.jsxs("g", { transform: b, children: [
+        /* @__PURE__ */ l.jsx("path", { fill: "none", d: g }),
+        /* @__PURE__ */ l.jsx("path", { stroke: "none", d: g })
+      ] }) }),
+      [b]
+    );
+    return n = m(c({
+      children: D,
+      "aria-hidden": !0
+    }, n), {
+      ref: x(e.setArrowElement, n.ref),
+      style: c({
+        // server side rendering
+        position: "absolute",
+        fontSize: o,
+        width: "1em",
+        height: "1em",
+        pointerEvents: "none",
+        fill: y,
+        stroke: A,
+        strokeWidth: $
+      }, n.style)
+    }), V(n);
+  }
+), X = P(function(t) {
+  const r = G(t);
+  return h(L, r);
+}), I = "button", U = v(function(t) {
+  var r = t, { store: e } = r, o = f(r, ["store"]);
+  const n = E();
+  e = e || n, w(
+    e,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
+  );
+  const p = o.onClick, i = R((s) => {
+    e == null || e.setAnchorElement(s.currentTarget), p == null || p(s);
+  });
+  return o = O(
+    o,
+    (s) => /* @__PURE__ */ l.jsx(N, { value: e, children: s }),
+    [e]
+  ), o = m(c({}, o), {
+    onClick: i
+  }), o = _(c({ store: e }, o)), o = M(c({ store: e }, o)), o;
+}), Y = P(function(t) {
+  const r = U(t);
+  return h(I, r);
+});
+export {
+  X as P,
+  Y as a,
+  U as b,
+  G as u
+};

package/dist/QYJ6MIDR-CRK3satR.js

@@ -0,0 +1 @@
+"use client";"use strict";const l=require("./MTZPJQMC-5Xg78Uyy.js"),e=require("./LVA2YJMS-B2HZjIhJ.js"),f=require("react"),R=require("./AXB53BZF-KWM2jKTz.js");var V="div",m=e.createHook(function(s){var t=s,{store:o}=t,r=e.__objRest(t,["store"]);const n=l.usePopoverProviderContext();return o=o||n,r=e.__spreadProps(e.__spreadValues({},r),{ref:e.useMergeRefs(o==null?void 0:o.setAnchorElement,r.ref)}),r});e.forwardRef2(function(s){const t=m(s);return e.createElement(V,t)});var P="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z",j="div",d=30,a=d/2,y={top:`rotate(180 ${a} ${a})`,right:`rotate(-90 ${a} ${a})`,bottom:`rotate(0 ${a} ${a})`,left:`rotate(90 ${a} ${a})`};function S(c){const[s,t]=f.useState(),o=c.useState("contentElement");return e.useSafeLayoutEffect(()=>{if(!o)return;const n=e.getWindow(o).getComputedStyle(o);t(n)},[o]),s}var _=e.createHook(function(s){var t=s,{store:o,size:r=d}=t,n=e.__objRest(t,["store","size"]);const p=l.usePopoverContext();o=o||p,e.invariant(o,process.env.NODE_ENV!=="production"&&"PopoverArrow must be wrapped in a Popover component.");const i=o.useState(A=>A.currentPlacement.split("-")[0]),u=S(o),x=(u==null?void 0:u.getPropertyValue("background-color"))||"none",E=(u==null?void 0:u.getPropertyValue(`border-${i}-color`))||"none",w=(u==null?void 0:u.getPropertyValue(`border-${i}-width`))||"0px",b=Number.parseInt(w)*2*(d/r),v=y[i],g=f.useMemo(()=>e.jsxRuntimeExports.jsx("svg",{display:"block",viewBox:"0 0 30 30",children:e.jsxRuntimeExports.jsxs("g",{transform:v,children:[e.jsxRuntimeExports.jsx("path",{fill:"none",d:P}),e.jsxRuntimeExports.jsx("path",{stroke:"none",d:P})]})}),[v]);return n=e.__spreadProps(e.__spreadValues({children:g,"aria-hidden":!0},n),{ref:e.useMergeRefs(o.setArrowElement,n.ref),style:e.__spreadValues({position:"absolute",fontSize:r,width:"1em",height:"1em",pointerEvents:"none",fill:x,stroke:E,strokeWidth:b},n.style)}),e.removeUndefinedValues(n)}),D=e.forwardRef2(function(s){const t=_(s);return e.createElement(j,t)}),$="button",h=e.createHook(function(s){var t=s,{store:o}=t,r=e.__objRest(t,["store"]);const n=l.usePopoverProviderContext();o=o||n,e.invariant(o,process.env.NODE_ENV!=="production"&&"PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component.");const p=r.onClick,i=e.useEvent(u=>{o==null||o.setAnchorElement(u.currentTarget),p==null||p(u)});return r=e.useWrapElement(r,u=>e.jsxRuntimeExports.jsx(l.PopoverScopedContextProvider,{value:o,children:u}),[o]),r=e.__spreadProps(e.__spreadValues({},r),{onClick:i}),r=m(e.__spreadValues({store:o},r)),r=R.useDialogDisclosure(e.__spreadValues({store:o},r)),r}),k=e.forwardRef2(function(s){const t=h(s);return e.createElement($,t)});exports.PopoverArrow=D;exports.PopoverDisclosure=k;exports.usePopoverArrow=_;exports.usePopoverDisclosure=h;

package/dist/Radio.js

@@ -0,0 +1,60 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),e=require("@xstyled/styled-components"),x=require("./field-styles-D_gf6ypV.js"),y=require("./Box.js"),u=require("./System.js"),$=require("./Label.js"),k=require("./NLEBE274-DvH3XTTw.js"),E=require("./Hint.js"),q=e(k.Radio).withConfig({shouldForwardProp:u.shouldForwardProp})(({order:t="-1",size:o,variant:i})=>e.css`
+    ${x.defaultFieldStyles({size:o,variant:i})};
+    ${e.th("radios.default")}
+    position: relative;
+    padding: 0;
+    order: ${t};
+    cursor: pointer;
+    border-radius: 50%;
+    transition: medium;
+    ${e.system};
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8;
+      height: 8;
+      border-radius: 8;
+      top: 3;
+      left: 3;
+      background-color: transparent;
+      transition: medium;
+    }
+
+    &[aria-checked='true'] {
+      &:not([disabled]) {
+        ${e.th("radios.checked")};
+      }
+
+      &[disabled] {
+        &::after {
+          background-color: ${e.th("radios.checkedCenteredColor.disabled")};
+        }
+      }
+
+      &::after {
+        background-color: ${e.th("radios.checkedCenteredColor.default")};
+      }
+    }
+  `),w=e($.Label)`
+  max-width: 100%;
+  /** we need to reset margin-bottom from Label component */
+  margin-bottom: 0 !important;
+  ${e.system};
+`,R=e.div`
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  display: flex;
+`,L=e(y.Box)`
+  display: flex;
+  align-items: flex-start;
+  gap: sm;
+
+  input {
+    margin-top: xs;
+  }
+`,C=e.div`
+  display: flex;
+  flex-direction: column;
+`,m=u.forwardRef(({dataTestId:t,disabled:o,disabledIcon:i,flexDirection:f,hint:a,label:l,maxWidth:p,onChange:s,onClick:d,variant:c,...b},h)=>{const g=n=>{n.stopPropagation(),d&&d(n),s&&s(n)};return r.createElement(w,{alignItems:"flex-start",checkableField:!0,disabled:o,disabledIcon:i,flexDirection:"column",maxWidth:p,onClick:g,variant:c,withDisabledIcon:!1},r.createElement(L,{flexDirection:f},r.createElement(R,null,r.createElement(q,{"data-testid":t,disabled:o,label:l,ref:h,variant:c,...b})),r.createElement(C,null,r.createElement("div",{"data-testid":t?`${t}-label`:void 0},l),a&&r.createElement(E.Hint,{"data-testid":t?`${t}-hint`:void 0,mt:"0"},a))))});m.displayName="Radio";exports.Radio=m;

package/dist/Radio.mjs

@@ -0,0 +1,118 @@
+"use client";
+import t from "react";
+import o, { css as $, th as i, system as f } from "@xstyled/styled-components";
+import { d as x } from "./field-styles-CeV7pnOp.mjs";
+import { Box as k } from "./Box.mjs";
+import { shouldForwardProp as w, forwardRef as y } from "./System.mjs";
+import { Label as E } from "./Label.mjs";
+import { R } from "./NLEBE274-C94QU78N.mjs";
+import { Hint as C } from "./Hint.mjs";
+const L = o(R).withConfig({ shouldForwardProp: w })(
+  ({ order: e = "-1", size: r, variant: a }) => $`
+    ${x({ size: r, variant: a })};
+    ${i("radios.default")}
+    position: relative;
+    padding: 0;
+    order: ${e};
+    cursor: pointer;
+    border-radius: 50%;
+    transition: medium;
+    ${f};
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8;
+      height: 8;
+      border-radius: 8;
+      top: 3;
+      left: 3;
+      background-color: transparent;
+      transition: medium;
+    }
+
+    &[aria-checked='true'] {
+      &:not([disabled]) {
+        ${i("radios.checked")};
+      }
+
+      &[disabled] {
+        &::after {
+          background-color: ${i("radios.checkedCenteredColor.disabled")};
+        }
+      }
+
+      &::after {
+        background-color: ${i("radios.checkedCenteredColor.default")};
+      }
+    }
+  `
+), _ = o(E)`
+  max-width: 100%;
+  /** we need to reset margin-bottom from Label component */
+  margin-bottom: 0 !important;
+  ${f};
+`, F = o.div`
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  display: flex;
+`, v = o(k)`
+  display: flex;
+  align-items: flex-start;
+  gap: sm;
+
+  input {
+    margin-top: xs;
+  }
+`, D = o.div`
+  display: flex;
+  flex-direction: column;
+`, H = y(
+  ({
+    dataTestId: e,
+    disabled: r,
+    disabledIcon: a,
+    flexDirection: p,
+    hint: n,
+    label: d,
+    maxWidth: u,
+    onChange: s,
+    onClick: m,
+    variant: c,
+    ...b
+  }, h) => {
+    const g = (l) => {
+      l.stopPropagation(), m && m(l), s && s(l);
+    };
+    return /* @__PURE__ */ t.createElement(
+      _,
+      {
+        alignItems: "flex-start",
+        checkableField: !0,
+        disabled: r,
+        disabledIcon: a,
+        flexDirection: "column",
+        maxWidth: u,
+        onClick: g,
+        variant: c,
+        withDisabledIcon: !1
+      },
+      /* @__PURE__ */ t.createElement(v, { flexDirection: p }, /* @__PURE__ */ t.createElement(F, null, /* @__PURE__ */ t.createElement(
+        L,
+        {
+          "data-testid": e,
+          disabled: r,
+          label: d,
+          ref: h,
+          variant: c,
+          ...b
+        }
+      )), /* @__PURE__ */ t.createElement(D, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), n && /* @__PURE__ */ t.createElement(C, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, n)))
+    );
+  }
+);
+H.displayName = "Radio";
+export {
+  H as Radio
+};

package/dist/RadioGroup.js

@@ -0,0 +1,8 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),t=require("@xstyled/styled-components"),$=require("./FieldGroup.js"),x=require("./Radio.js"),S=require("./System.js"),d=require("./radio-group-BpImAAmy.js"),w=t.divBox(({flexDirection:r})=>t.css`
+    display: flex;
+    flex-direction: ${r};
+    flex-wrap: wrap;
+    gap: md;
+
+    ${t.system};
+  `),c=S.forwardRef(({dataTestId:r,flexDirection:o,id:n,label:v,maxWidth:R,name:i,onChange:a,options:f=[],renderOption:m=x.Radio,required:p,value:y,...s},G)=>{const u=d.useRadioStore({defaultValue:y}),b=u.useState("value"),q=e=>{s.disabled||(u.setValue(e),a==null||a(e))};return l.createElement($.FieldGroup,{as:d.RadioGroup,dataTestId:r,label:v,mb:0,ref:G,required:p,store:u},l.createElement(w,{flexDirection:o},f.map(e=>l.createElement(m,{checked:e.value===b,dataTestId:r?`${r}-${e.value}`:void 0,hint:e.hint,id:`${n||i}.${e.value}`,key:e.value,label:e.label,maxWidth:R,name:i,onChange:()=>q(e.value),value:e.value,...s}))))});c.displayName="RadioGroup";exports.RadioGroup=c;

package/dist/RadioGroup.mjs

@@ -0,0 +1,68 @@
+"use client";
+import t from "react";
+import x, { css as y, system as b } from "@xstyled/styled-components";
+import { FieldGroup as G } from "./FieldGroup.mjs";
+import { Radio as _ } from "./Radio.mjs";
+import { forwardRef as w } from "./System.mjs";
+import { u as E, R as V } from "./radio-group-CGC6DTFJ.mjs";
+const h = x.divBox(
+  ({ flexDirection: a }) => y`
+    display: flex;
+    flex-direction: ${a};
+    flex-wrap: wrap;
+    gap: md;
+
+    ${b};
+  `
+), k = w(
+  ({
+    dataTestId: a,
+    flexDirection: i,
+    id: s,
+    label: m,
+    maxWidth: o,
+    name: u,
+    onChange: r,
+    options: f = [],
+    renderOption: c = _,
+    required: p,
+    value: v,
+    ...d
+  }, R) => {
+    const l = E({ defaultValue: v }), $ = l.useState("value"), n = (e) => {
+      d.disabled || (l.setValue(e), r == null || r(e));
+    };
+    return /* @__PURE__ */ t.createElement(
+      G,
+      {
+        as: V,
+        dataTestId: a,
+        label: m,
+        mb: 0,
+        ref: R,
+        required: p,
+        store: l
+      },
+      /* @__PURE__ */ t.createElement(h, { flexDirection: i }, f.map((e) => /* @__PURE__ */ t.createElement(
+        c,
+        {
+          checked: e.value === $,
+          dataTestId: a ? `${a}-${e.value}` : void 0,
+          hint: e.hint,
+          id: `${s || u}.${e.value}`,
+          key: e.value,
+          label: e.label,
+          maxWidth: o,
+          name: u,
+          onChange: () => n(e.value),
+          value: e.value,
+          ...d
+        }
+      )))
+    );
+  }
+);
+k.displayName = "RadioGroup";
+export {
+  k as RadioGroup
+};

package/dist/RadioTab.js

@@ -0,0 +1,61 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),t=require("@xstyled/styled-components"),m=require("./field-styles-D_gf6ypV.js"),p=require("./overflow-ellipsis-C2ESrF8C.js"),a=require("./System.js"),b=require("./NLEBE274-DvH3XTTw.js"),f=require("./Button.js"),h=t(b.Radio).withConfig({shouldForwardProp:a.shouldForwardProp})`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`,y=t.css`
+  margin-top: -${t.th.borderWidth("sm")};
+
+  &:first-of-type {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+`,g=t.css`
+  margin-left: -${t.th.borderWidth("sm")};
+
+  &:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;t.label(({checked:r,flexDirection:e,size:o,variant:i})=>t.css`
+    ${t.th("radioTabs.default")};
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: ${t.th(`defaultFields.sizes.${o}.height`)};
+    max-width: 100%;
+    margin: 0;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: medium;
+
+    ${m.defaultFieldStyles({size:o,variant:i})};
+    ${r&&t.css`
+      ${t.th("radioTabs.checked")};
+      z-index: 2;
+    `};
+    ${e==="column"&&y};
+    ${e==="row"&&g};
+    ${t.system};
+    padding-top: 0;
+    padding-bottom: 0;
+  `);t.div`
+  flex-shrink: 0;
+  position: relative;
+`;t.div`
+  ${p.overflowEllipsis};
+  max-width: 100%;
+`;const d=a.forwardRef(({checked:r,dataTestId:e,disabled:o,id:i,label:l,onChange:n,value:u},c)=>s.createElement(f.Button,{as:"label",borderColor:!r&&"neutral-30",className:"label",dataTestId:e,disabled:o,ref:c,variant:r?"primary":"ghost"},s.createElement(h,{checked:r,"data-testid":e?`${e}-input`:void 0,disabled:o,id:i,onChange:n,value:u}),l));d.displayName="RadioTab";exports.RadioTab=d;