@dotss/ui 0.0.8 → 0.0.11

package/{dist/Menu → Menu}/MenuBlock/MenuBlock.es.js

@@ -1,9 +1,9 @@
 import { jsxs as x, jsx as l } from "@emotion/react/jsx-runtime";
 import { forwardRef as w } from "react";
 import y from "../../Icon/Icon.es.js";
-import k from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import a from "@emotion/styled";
-const v = a.li`
+import $ from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import c from "@emotion/styled";
+const k = c.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
@@ -14,17 +14,18 @@ const v = a.li`
   }
 }) => e.white};
   cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+  border: 2px solid transparent;
 
   & svg {
     width: 20px;
     height: 20px;
     color: ${({
   theme: {
-    palette: { brand: e, grey: i }
+    palette: { brand: e, grey: o }
   },
   selected: t,
   disabled: r
-}) => t ? e.primary.main : r ? i[30] : "inherit"};
+}) => t ? e.primary.main : r ? o[30] : "inherit"};
   }
 
   ${({ ellipsis: e }) => e ? {
@@ -33,16 +34,26 @@ const v = a.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: i }
+    palette: { brand: e, grey: o }
   },
   selected: t,
   isHoverPossible: r
 }) => r ? {
   "&:hover:not([disabled])": {
-    backgroundColor: t ? e.primary.bg : i[10]
+    backgroundColor: t ? e.primary.bg : o[10]
   }
 } : {}}
-`, $ = a.div`
+
+  &:focus {
+    outline: none;
+    border: 2px solid
+      ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[100]};
+  }
+`, v = c.div`
   flex-grow: 1;
 
   ${({ ellipsis: e }) => e ? {
@@ -53,64 +64,65 @@ const v = a.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: i },
+    palette: { brand: e, grey: o },
     typography: { h5B: t, b4R: r }
   },
-  selected: c,
+  selected: p,
   disabled: n
 }) => {
-  let o = {
+  let i = {
     fontSize: r.size,
     fontWeight: r.weight,
     letterSpacing: r.letterSpacing,
     lineHeight: r.lineHeight
   };
-  return c && (o = {
+  return p && (i = {
     fontSize: t.size,
     fontWeight: t.weight,
     letterSpacing: t.letterSpacing,
     lineHeight: t.lineHeight,
     color: e.primary.text
-  }), n && (o.color = i[30]), o;
+  }), n && (i.color = o[30]), i;
 }}}
-`, p = a.div`
+`, a = c.div`
   white-space: nowrap;
-`, P = w(function({
-  children: i,
+`, M = w(function({
+  children: o,
   startAdornment: t,
   endAdornment: r,
-  inlineCSS: c,
+  inlineCSS: p,
   selected: n,
-  disabled: o,
-  value: s,
+  disabled: i,
+  value: u,
   onClick: h,
   ellipsis: f = !0,
-  ...u
-}, m) {
-  const { isHoverPossible: d } = k();
+  ...m
+}, g) {
+  const { isHoverPossible: d } = $();
   return /* @__PURE__ */ x(
-    v,
+    k,
     {
-      ref: m,
+      ref: g,
       selected: n,
-      disabled: o,
-      "data-value": s,
+      disabled: i,
+      "data-value": u,
       isHoverPossible: d,
-      onClick: (g) => {
-        g.stopPropagation(), !o && typeof h == "function" && h(g);
+      onClick: (s) => {
+        s.stopPropagation(), !i && typeof h == "function" && h(s);
       },
       ellipsis: f,
-      ...u,
-      css: c,
+      role: "menuitem",
+      ...m,
+      css: p,
       children: [
-        t && /* @__PURE__ */ l(p, { children: t }),
-        /* @__PURE__ */ l($, { selected: n, disabled: o, ellipsis: f, children: i }),
-        !n && r && /* @__PURE__ */ l(p, { children: r }),
-        n && /* @__PURE__ */ l(p, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
+        t && /* @__PURE__ */ l(a, { children: t }),
+        /* @__PURE__ */ l(v, { selected: n, disabled: i, ellipsis: f, children: o }),
+        !n && r && /* @__PURE__ */ l(a, { children: r }),
+        n && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
       ]
     }
   );
 });
 export {
-  P as default
+  M as default
 };

package/Menu/MenuButton/MenuButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),u=require("react"),l=require("../../Button/Button.cjs"),m=u.forwardRef(function({isMenuOpen:n,menuId:a,onClick:o,...i},s){const t=u.useRef(),c=()=>{t.current&&cancelAnimationFrame(t.current),t.current=requestAnimationFrame(()=>{t.current=requestAnimationFrame(()=>{const e=document.getElementById(a);if(e){const r=e.querySelector('[role="menuitem"]');r==null||r.setAttribute("tabindex","0"),r==null||r.focus()}t.current=void 0})})},f=e=>{if(e.stopPropagation(),e.key==="ArrowDown"&&!n){o(e),c();return}if((e.key==="Enter"||e.key===" ")&&!n){o(e),c();return}};return u.useEffect(()=>()=>{t.current&&cancelAnimationFrame(t.current)},[]),d.jsx(l.default,{ref:s,type:"button","aria-haspopup":!0,"aria-expanded":n,"aria-controls":a,onKeyDown:f,onClick:o,...i})});exports.default=m;

package/Menu/MenuButton/MenuButton.d.ts

@@ -0,0 +1,10 @@
+import { SyntheticEvent } from 'react';
+import { ButtonProps } from '../Button/Button';
+
+export interface MenuButtonProps extends ButtonProps {
+    isMenuOpen: boolean;
+    menuId: string;
+    onClick: (e: SyntheticEvent) => void;
+}
+declare const MenuButton: import('react').ForwardRefExoticComponent<MenuButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default MenuButton;

package/Menu/MenuButton/MenuButton.es.js

@@ -0,0 +1,44 @@
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { forwardRef as s, useRef as d, useEffect as p } from "react";
+import y from "../../Button/Button.es.js";
+const F = s(function({ isMenuOpen: n, menuId: a, onClick: o, ...c }, i) {
+  const t = d(), u = () => {
+    t.current && cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
+      t.current = requestAnimationFrame(() => {
+        const r = document.getElementById(a);
+        if (r) {
+          const e = r.querySelector('[role="menuitem"]');
+          e == null || e.setAttribute("tabindex", "0"), e == null || e.focus();
+        }
+        t.current = void 0;
+      });
+    });
+  }, f = (r) => {
+    if (r.stopPropagation(), r.key === "ArrowDown" && !n) {
+      o(r), u();
+      return;
+    }
+    if ((r.key === "Enter" || r.key === " ") && !n) {
+      o(r), u();
+      return;
+    }
+  };
+  return p(() => () => {
+    t.current && cancelAnimationFrame(t.current);
+  }, []), /* @__PURE__ */ m(
+    y,
+    {
+      ref: i,
+      type: "button",
+      "aria-haspopup": !0,
+      "aria-expanded": n,
+      "aria-controls": a,
+      onKeyDown: f,
+      onClick: o,
+      ...c
+    }
+  );
+});
+export {
+  F as default
+};

package/{dist/Menu → Menu/MenuButton}/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Menu.cjs"),u=require("./MenuBlock/MenuBlock.cjs");exports.default=e.default;exports.MenuBlock=u.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./MenuButton.cjs");exports.default=e.default;

package/Menu/MenuButton/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MenuButton } from './MenuButton';
+
+export default MenuButton;

package/Menu/MenuButton/index.es.js

@@ -0,0 +1,4 @@
+import o from "./MenuButton.es.js";
+export {
+  o as default
+};

package/Menu/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Menu.cjs"),u=require("./MenuBlock/MenuBlock.cjs"),t=require("./MenuButton/MenuButton.cjs");exports.default=e.default;exports.MenuBlock=u.default;exports.MenuButton=t.default;

package/{dist/Menu → Menu}/index.d.ts

@@ -1,4 +1,5 @@
 import { default as Menu } from './Menu';
 
 export { default as MenuBlock } from './MenuBlock';
+export { default as MenuButton } from './MenuButton';
 export default Menu;

package/Menu/index.es.js

@@ -0,0 +1,8 @@
+import o from "./Menu.es.js";
+import { default as u } from "./MenuBlock/MenuBlock.es.js";
+import { default as f } from "./MenuButton/MenuButton.es.js";
+export {
+  u as MenuBlock,
+  f as MenuButton,
+  o as default
+};

package/NumberKeypad/NumberKeypad.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),n=require("react"),b=require("@emotion/styled"),m=e=>e&&e.__esModule?e:{default:e},_=m(b),g=_.default.div`
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: ${({theme:{spacing:e}})=>e.content(3)}px;
+
+  ${({maxWidth:e})=>({maxWidth:e})}
+`,x=n.forwardRef(function({children:u,maxWidth:s,size:o="small",onChange:a,disabled:i,inlineCSS:c,...d},p){const f=(t,r)=>l=>{l.stopPropagation(),typeof a=="function"&&a(t,r)};return y.jsx(g,{ref:p,maxWidth:s||(o==="large"?264:228),role:"group","aria-label":"가상 숫자 키패드",...d,css:c,children:n.Children.map(u,t=>{var r,l;return n.isValidElement(t)?n.cloneElement(t,{disabled:i,size:o,onClick:f((r=t.props)==null?void 0:r.value,(l=t.props)==null?void 0:l.children),...t.props}):null})})});exports.default=x;

package/NumberKeypad/NumberKeypad.es.js

@@ -0,0 +1,39 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as m, Children as y, isValidElement as x, cloneElement as b } from "react";
+import h from "@emotion/styled";
+const g = h.div`
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: ${({ theme: { spacing: e } }) => e.content(3)}px;
+
+  ${({ maxWidth: e }) => ({ maxWidth: e })}
+`, j = m(function({ children: n, maxWidth: l, size: p = "small", onChange: a, disabled: i, inlineCSS: c, ...s }, d) {
+  const f = (r, t) => (o) => {
+    o.stopPropagation(), typeof a == "function" && a(r, t);
+  };
+  return /* @__PURE__ */ u(
+    g,
+    {
+      ref: d,
+      maxWidth: l || (p === "large" ? 264 : 228),
+      role: "group",
+      "aria-label": "가상 숫자 키패드",
+      ...s,
+      css: c,
+      children: y.map(n, (r) => {
+        var t, o;
+        return x(r) ? b(r, {
+          disabled: i,
+          size: p,
+          onClick: f((t = r.props) == null ? void 0 : t.value, (o = r.props) == null ? void 0 : o.children),
+          ...r.props
+        }) : null;
+      })
+    }
+  );
+});
+export {
+  j as default
+};

package/{dist/NumberKeypad → NumberKeypad}/NumberKeypadBlock/NumberKeypadBlock.cjs

@@ -31,4 +31,4 @@
     color: ${({theme:{palette:{grey:e}}})=>e[30]};
     cursor: not-allowed;
   }
-`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;
+`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{type:"button",size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;

package/{dist/NumberKeypad → NumberKeypad}/NumberKeypadBlock/NumberKeypadBlock.es.js

@@ -98,7 +98,16 @@ const m = n.div`
 `, v = p(
   function({ children: t, size: r, disabled: i, inlineCSS: l, ...a }, s) {
     const { isHoverPossible: c } = d();
-    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(g, { size: r, disabled: i, isHoverPossible: c, children: t }) });
+    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(
+      g,
+      {
+        type: "button",
+        size: r,
+        disabled: i,
+        isHoverPossible: c,
+        children: t
+      }
+    ) });
   }
 );
 export {

package/PageControl/PageControl.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),n=require("react"),j=require("../Flexbox/Flexbox.cjs"),q=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),A=require("@emotion/styled"),D=e=>e&&e.__esModule?e:{default:e},d=D(A),L=d.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({theme:e})=>e.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({focusWithin:e,theme:r})=>e?{outline:`${r.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
+  }
+`,S=d.default.button`
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${({theme:{palette:{grey:e}},color:r})=>r==="primary"?e[10]:e[30]};
+  cursor: pointer;
+  transition: all 150ms ease;
+  transition-property: width, border-radius, background-color, cursor;
+
+  ${({theme:{palette:{brand:e}},color:r,isActive:o})=>o?{width:24,borderRadius:8,backgroundColor:r==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
+`,F=n.forwardRef(function({totalCount:r=1,page:o=1,onChange:l,color:p="primary",inlineCSS:y,tabIdPrefix:b,controlIdPrefix:m,tabProps:x,...h},$){const k=n.useRef(null),R=$??k,f=n.useRef(null),{hasFocus:w}=q.default({ref:f}),P=n.useId(),v=n.useId(),a=`${b??P}-`,I=`${m??v}-`,_=i=>t=>{t.preventDefault(),typeof l=="function"&&l(i)},g=i=>{let t=o;if(i.key==="ArrowLeft"?o>1?t=o-1:o===1&&(t=r):i.key==="ArrowRight"?o<r?t=o+1:o===r&&(t=1):i.key==="Home"?t=1:i.key==="End"&&(t=r),t!==o){const s=document.getElementById(`${a}${t}`);s==null||s.focus(),l==null||l(t)}};return c.jsx(L,{ref:R,role:"tablist",...h,css:y,focusWithin:w,children:c.jsx(j.default,{ref:f,gap:2,children:Array.from({length:r},(i,t)=>{const s=t+1,u=s===o;return c.jsx(S,{id:`${a}${s}`,"aria-controls":`${I}${s}`,isActive:u,"data-page":s,onClick:_(s),role:"tab",type:"button","aria-selected":u,onKeyDown:g,tabIndex:u?0:-1,...x,color:p},t)})})})});exports.default=F;

package/{dist/PageControl → PageControl}/PageControl.d.ts

@@ -6,6 +6,9 @@ export interface PageControlProps extends GeneralComponentProps<Omit<HTMLAttribu
     totalCount?: number;
     page?: number;
     color?: Extract<BrandColorKey, 'primary' | 'secondary'>;
+    tabIdPrefix?: string;
+    controlIdPrefix?: string;
+    tabProps?: GeneralComponentProps<HTMLAttributes<HTMLButtonElement>>;
     onChange?: (page: number) => void;
 }
 declare const PageControl: import('react').ForwardRefExoticComponent<PageControlProps & import('react').RefAttributes<HTMLDivElement>>;

package/PageControl/PageControl.es.js

@@ -0,0 +1,104 @@
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { forwardRef as D, useRef as u, useId as d } from "react";
+import F from "../Flexbox/Flexbox.es.js";
+import E from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+import p from "@emotion/styled";
+const H = p.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: t }) => t.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: t, theme: r }) => t ? {
+  outline: `${r.palette.grey[100]} solid 2px`,
+  outlineOffset: 2
+} : {}}
+  }
+`, K = p.button`
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  },
+  color: r
+}) => r === "primary" ? t[10] : t[30]};
+  cursor: pointer;
+  transition: all 150ms ease;
+  transition-property: width, border-radius, background-color, cursor;
+
+  ${({
+  theme: {
+    palette: { brand: t }
+  },
+  color: r,
+  isActive: o
+}) => o ? {
+  width: 24,
+  borderRadius: 8,
+  backgroundColor: r === "primary" ? t.primary.pageControl : t.primary.tooltip,
+  cursor: "default"
+} : null}
+`, O = D(function({
+  totalCount: r = 1,
+  page: o = 1,
+  onChange: l,
+  color: m = "primary",
+  inlineCSS: y,
+  tabIdPrefix: b,
+  controlIdPrefix: x,
+  tabProps: h,
+  ...$
+}, k) {
+  const w = u(null), P = k ?? w, c = u(null), { hasFocus: I } = E({ ref: c }), R = d(), v = d(), a = `${b ?? R}-`, g = `${x ?? v}-`, A = (s) => (e) => {
+    e.preventDefault(), typeof l == "function" && l(s);
+  }, L = (s) => {
+    let e = o;
+    if (s.key === "ArrowLeft" ? o > 1 ? e = o - 1 : o === 1 && (e = r) : s.key === "ArrowRight" ? o < r ? e = o + 1 : o === r && (e = 1) : s.key === "Home" ? e = 1 : s.key === "End" && (e = r), e !== o) {
+      const i = document.getElementById(`${a}${e}`);
+      i == null || i.focus(), l == null || l(e);
+    }
+  };
+  return /* @__PURE__ */ f(
+    H,
+    {
+      ref: P,
+      role: "tablist",
+      ...$,
+      css: y,
+      focusWithin: I,
+      children: /* @__PURE__ */ f(F, { ref: c, gap: 2, children: Array.from({ length: r }, (s, e) => {
+        const i = e + 1, n = i === o;
+        return /* @__PURE__ */ f(
+          K,
+          {
+            id: `${a}${i}`,
+            "aria-controls": `${g}${i}`,
+            isActive: n,
+            "data-page": i,
+            onClick: A(i),
+            role: "tab",
+            type: "button",
+            "aria-selected": n,
+            onKeyDown: L,
+            tabIndex: n ? 0 : -1,
+            ...h,
+            color: m
+          },
+          e
+        );
+      }) })
+    }
+  );
+});
+export {
+  O as default
+};

package/{dist/PageControl → PageControl}/PageControl.stories.d.ts

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithScreenReaderSupport: Story;

package/Radio/Radio.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),f=require("react"),m=require("@emotion/styled"),y=require("../core/useTheme.cjs"),c=t=>t&&t.__esModule?t:{default:t},p=c(m),C=p.default.span`
+  position: relative;
+  display: inline-flex;
+`,x=p.default.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  appearance: none;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;function h({size:t,color:i="primary",checked:n,disabled:s}){const{palette:{brand:r,grey:e,background:d}}=y.default();let l=e.white,u=e[50],o=e[10];return n&&(l=i==="primary"?r.primary.main:r[i],u=i==="primary"?r.primary.main:r[i],o=i==="primary"?e.white:e[10]),!n&&s&&(l=d.primary,u=e[30],o=e[20]),n&&s&&(l=i==="primary"?r.primary.disable:e[30],u=i==="primary"?r.primary.disable:e[30],o=i==="primary"?e.white:e[10]),a.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none","aria-hidden":!0,focusable:"false",children:[a.jsx("path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",fill:l}),a.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",fill:u}),a.jsx("circle",{cx:"12",cy:"12",r:"4",fill:o})]})}const g=f.forwardRef(function({size:i="medium",color:n="primary",checked:s,disabled:r,inlineCSS:e,...d},l){return a.jsxs(C,{ref:l,css:e,children:[a.jsx(x,{type:"radio",checked:s,disabled:r,...d}),a.jsx(h,{size:i,color:n,checked:s,disabled:r})]})});exports.default=g;

package/Radio/Radio.es.js

@@ -0,0 +1,71 @@
+import { jsxs as s, jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as u } from "react";
+import f from "@emotion/styled";
+import y from "../core/useTheme.es.js";
+const C = f.span`
+  position: relative;
+  display: inline-flex;
+`, h = f.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  appearance: none;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+function w({
+  size: m,
+  color: i = "primary",
+  checked: t,
+  disabled: n
+}) {
+  const {
+    palette: { brand: e, grey: r, background: d }
+  } = y();
+  let a = r.white, l = r[50], o = r[10];
+  return t && (a = i === "primary" ? e.primary.main : e[i], l = i === "primary" ? e.primary.main : e[i], o = i === "primary" ? r.white : r[10]), !t && n && (a = d.primary, l = r[30], o = r[20]), t && n && (a = i === "primary" ? e.primary.disable : r[30], l = i === "primary" ? e.primary.disable : r[30], o = i === "primary" ? r.white : r[10]), /* @__PURE__ */ s(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: m === "2xLarge" ? 48 : 24,
+      height: m === "2xLarge" ? 48 : 24,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": !0,
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ p(
+          "path",
+          {
+            d: "M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
+            fill: a
+          }
+        ),
+        /* @__PURE__ */ p(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+            fill: l
+          }
+        ),
+        /* @__PURE__ */ p("circle", { cx: "12", cy: "12", r: "4", fill: o })
+      ]
+    }
+  );
+}
+const R = u(function({ size: i = "medium", color: t = "primary", checked: n, disabled: e, inlineCSS: r, ...d }, a) {
+  return /* @__PURE__ */ s(C, { ref: a, css: r, children: [
+    /* @__PURE__ */ p(h, { type: "radio", checked: n, disabled: e, ...d }),
+    /* @__PURE__ */ p(w, { size: i, color: t, checked: n, disabled: e })
+  ] });
+});
+export {
+  R as default
+};

package/RadioGroup/RadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@emotion/react/jsx-runtime"),e=require("react"),c=require("../Flexbox/Flexbox.cjs"),d=require("../FormControlText/FormControlText.cjs"),p=require("../Radio/Radio.cjs"),f=e.forwardRef(function({children:n,name:u,inlineCSS:l,...a},s){const i=e.useId(),r=u||i;return m.jsx(c.default,{tag:"div",role:"radiogroup",ref:s,css:l,...a,children:e.Children.map(n,t=>{if(e.isValidElement(t)&&t.type===p.default)return e.cloneElement(t,{name:r});if(e.isValidElement(t)&&t.type===d.default){const o=t.props.control;if(e.isValidElement(o))return e.cloneElement(t,{...t.props,control:e.cloneElement(o,{...o.props,name:r})})}return null})})});exports.default=f;

package/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface RadioGroupProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    name?: string;
+}
+declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/RadioGroup/RadioGroup.es.js

@@ -0,0 +1,28 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as l, useId as d, Children as x, isValidElement as t, cloneElement as e } from "react";
+import c from "../Flexbox/Flexbox.es.js";
+import R from "../FormControlText/FormControlText.es.js";
+import E from "../Radio/Radio.es.js";
+const b = l(function({ children: m, name: p, inlineCSS: a, ...f }, s) {
+  const i = d(), n = p || i;
+  return /* @__PURE__ */ u(c, { tag: "div", role: "radiogroup", ref: s, css: a, ...f, children: x.map(m, (o) => {
+    if (t(o) && o.type === E)
+      return e(o, { name: n });
+    if (t(o) && o.type === R) {
+      const r = o.props.control;
+      if (t(r))
+        return e(o, {
+          ...o.props,
+          // @ts-expect-error - add name to control element
+          control: e(r, {
+            ...r.props,
+            name: n
+          })
+        });
+    }
+    return null;
+  }) });
+});
+export {
+  b as default
+};

package/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./RadioGroup').RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Standalone: Story;

package/RadioGroup/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./RadioGroup.cjs");exports.default=e.default;

package/RadioGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as RadioGroup } from './RadioGroup';
+
+export default RadioGroup;

package/RadioGroup/index.es.js

@@ -0,0 +1,4 @@
+import r from "./RadioGroup.es.js";
+export {
+  r as default
+};