@serendie/ui 0.2.3 → 1.0.0

package/dist/components/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { SerendieSymbol as c } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+import { SerendieSymbolChevronDown as c } from "@serendie/symbols";
 import "../../styled-system/css/css.js";
 import "../../styled-system/helpers.js";
 import { sva as p } from "../../styled-system/css/sva.js";
@@ -65,7 +65,7 @@ const i = p({
       }
     }
   }
-}), w = ({
+}), N = ({
   title: t,
   value: r,
   description: n,
@@ -75,18 +75,11 @@ const i = p({
   return /* @__PURE__ */ s(l, { value: t || r, ...a, children: [
     /* @__PURE__ */ s(y, { className: e.item, children: [
       /* @__PURE__ */ o("span", { className: e.title, children: t }),
-      /* @__PURE__ */ o(g, { className: e.itemIndicator, children: /* @__PURE__ */ o(
-        c,
-        {
-          name: "chevron-down",
-          className: e.icon,
-          width: 24
-        }
-      ) })
+      /* @__PURE__ */ o(g, { className: e.itemIndicator, children: /* @__PURE__ */ o(c, { className: e.icon }) })
     ] }),
     /* @__PURE__ */ o(f, { className: e.description, children: n })
   ] }, t);
 };
 export {
-  w as Accordion
+  N as Accordion
 };

package/dist/components/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,2 @@
+import { Accordion } from '@ark-ui/react';
+export declare const AccordionGroup: import('../../../styled-system/types').StyledComponent<import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>>, {}>;

package/dist/components/Accordion/AccordionGroup.js

@@ -0,0 +1,15 @@
+import { styled as o } from "../../styled-system/jsx/factory.js";
+import "../../styled-system/jsx/is-valid-prop.js";
+import "react";
+import "../../styled-system/helpers.js";
+import "../../styled-system/css/css.js";
+import { AccordionRoot as r } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-root.js";
+const l = o(r, {
+  base: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+export {
+  l as AccordionGroup
+};

package/dist/components/Accordion/index.d.ts

@@ -1 +1,2 @@
 export * from './Accordion.tsx';
+export * from './AccordionGroup.tsx';

package/dist/components/Accordion/index.js

@@ -1,4 +1,6 @@
 import { Accordion as c } from "./Accordion.js";
+import { AccordionGroup as d } from "./AccordionGroup.js";
 export {
-  c as Accordion
+  c as Accordion,
+  d as AccordionGroup
 };

package/dist/components/{Avatar.d.ts → Avatar/Avatar.d.ts}

@@ -1,6 +1,6 @@
 import { AvatarRootProps } from '@ark-ui/react';
-import { RecipeVariantProps } from '../../styled-system/css';
-export declare const AvatarStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"image" | "root" | "fallback", {
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const AvatarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"image" | "root" | "fallback", {
     size: {
         small: {
             root: {

package/dist/components/{Avatar.js → Avatar/Avatar.js}

@@ -1,13 +1,13 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as f } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as g } from "../styled-system/css/sva.js";
-import { SerendieSymbol as C } from "../node_modules/@serendie/symbols/dist/symbols2.js";
-import { AvatarRoot as u } from "../node_modules/@ark-ui/react/dist/components/avatar/avatar-root.js";
-import { AvatarImage as b } from "../node_modules/@ark-ui/react/dist/components/avatar/avatar-image.js";
-import { AvatarFallback as y } from "../node_modules/@ark-ui/react/dist/components/avatar/avatar-fallback.js";
-const s = g({
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { SerendieSymbolUserCircle as f } from "@serendie/symbols";
+import "../../styled-system/css/css.js";
+import { cx as g } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as C } from "../../styled-system/css/sva.js";
+import { AvatarRoot as u } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-root.js";
+import { AvatarImage as b } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-image.js";
+import { AvatarFallback as y } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-fallback.js";
+const c = C({
   slots: ["root", "fallback", "image"],
   base: {
     root: {
@@ -66,16 +66,16 @@ const s = g({
   }
 }), _ = ({
   src: i,
-  alt: c,
+  alt: d,
   text: r,
-  placeholder: d = "filled",
-  className: n,
-  ...m
+  placeholder: n = "filled",
+  className: m,
+  ...h
 }) => {
-  const [o, h] = s.splitVariantProps(m), { size: l } = o, t = s({ size: l, ...o }), p = l === "small" ? 24 : l === "large" ? 80 : 40;
-  return /* @__PURE__ */ e(u, { className: f(t.root, n), ...h, children: i ? /* @__PURE__ */ e(b, { className: t.image, src: i, alt: c }) : r ? /* @__PURE__ */ e(y, { className: t.fallback, children: r.slice(0, 2) }) : d === "outlined" ? /* @__PURE__ */ e(C, { name: "user-circle", size: p }) : /* @__PURE__ */ e(w, {}) });
-}, w = () => /* @__PURE__ */ a("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ a("g", { "clip-path": "url(#clip0_3661_24550)", children: [
+  const [o, p] = c.splitVariantProps(h), { size: l } = o, t = c({ size: l, ...o }), a = l === "small" ? 24 : l === "large" ? 80 : 40;
+  return /* @__PURE__ */ e(u, { className: g(t.root, m), ...p, children: i ? /* @__PURE__ */ e(b, { className: t.image, src: i, alt: d }) : r ? /* @__PURE__ */ e(y, { className: t.fallback, children: r.slice(0, 2) }) : n === "outlined" ? /* @__PURE__ */ e(f, { width: a, height: a }) : /* @__PURE__ */ e(w, {}) });
+}, w = () => /* @__PURE__ */ s("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ s("g", { "clip-path": "url(#clip0_3661_24550)", children: [
     /* @__PURE__ */ e("rect", { width: "80", height: "80", rx: "40", fill: "#EFF2FC" }),
     /* @__PURE__ */ e(
       "g",
@@ -129,5 +129,5 @@ const s = g({
 ] });
 export {
   _ as Avatar,
-  s as AvatarStyle
+  c as AvatarStyle
 };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './Avatar.tsx';

package/dist/components/Avatar/index.js

@@ -0,0 +1,5 @@
+import { Avatar as t, AvatarStyle as e } from "./Avatar.js";
+export {
+  t as Avatar,
+  e as AvatarStyle
+};

package/dist/components/{Badge.d.ts → Badge/Badge.d.ts}

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../styled-system/types';
-export declare const BadgeStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+import { RecipeVariantProps } from '../../../styled-system/types';
+export declare const BadgeStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     size: {
         small: {
             height: "16px";

package/dist/components/{Badge.js → Badge/Badge.js}

@@ -1,9 +1,9 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as i } from "../styled-system/css/cx.js";
-import { cva as l } from "../styled-system/css/cva.js";
-import "../styled-system/helpers.js";
-import { SerendieSymbol as p } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+import { SerendieSymbolClose as i } from "@serendie/symbols";
+import "../../styled-system/css/css.js";
+import { cx as p } from "../../styled-system/css/cx.js";
+import { cva as l } from "../../styled-system/css/cva.js";
+import "../../styled-system/helpers.js";
 const o = l({
   base: {
     display: "inline-flex",
@@ -100,10 +100,10 @@ const o = l({
 }), S = ({
   children: e,
   closeButton: s,
-  ...c
+  ...t
 }) => {
-  const [t, { className: n, ...a }] = o.splitVariantProps(c), d = o(t);
-  return /* @__PURE__ */ m("span", { className: i(d, n), ...a, children: [
+  const [c, { className: n, ...a }] = o.splitVariantProps(t), d = o(c);
+  return /* @__PURE__ */ m("span", { className: p(d, n), ...a, children: [
     e,
     s
   ] });
@@ -113,7 +113,7 @@ const o = l({
   }
 }), v = (e) => {
   const s = y();
-  return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(p, { name: "close", color: "currentColor", size: 12 }) });
+  return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(i, { width: 12, height: 12 }) });
 };
 export {
   S as Badge,

package/dist/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge.tsx';

package/dist/components/Badge/index.js

@@ -0,0 +1,6 @@
+import { Badge as t, BadgeCloseButton as B, BadgeStyle as a } from "./Badge.js";
+export {
+  t as Badge,
+  B as BadgeCloseButton,
+  a as BadgeStyle
+};

package/dist/components/{Banner.d.ts → Banner/Banner.d.ts}

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../styled-system/css';
-declare const BannerStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "icon" | "description", {
+import { RecipeVariantProps } from '../../../styled-system/css';
+declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "icon" | "description", {
     type: {
         information: {
             container: {

package/dist/components/{Banner.js → Banner/Banner.js}

@@ -1,10 +1,10 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as p } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as y } from "../styled-system/css/sva.js";
-import { SerendieSymbol as b } from "../node_modules/@serendie/symbols/dist/symbols2.js";
-const t = y({
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { SerendieSymbolAlertCircleFilled as p, SerendieSymbolAlertCircle as y } from "@serendie/symbols";
+import "../../styled-system/css/css.js";
+import { cx as b } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as g } from "../../styled-system/css/sva.js";
+const t = g({
   slots: ["container", "icon", "title", "description"],
   base: {
     container: {
@@ -67,18 +67,11 @@ const t = y({
     type: "information"
   }
 }), v = (n) => {
-  const [s, { title: d, icon: r, description: m, className: a, ...l }] = t.splitVariantProps(n), e = t(s), i = s.type || "alert-circle";
-  return /* @__PURE__ */ c("div", { className: p(e.container, a), ...l, children: [
-    /* @__PURE__ */ o("div", { className: e.icon, children: r || /* @__PURE__ */ o(
-      b,
-      {
-        name: "alert-circle",
-        size: 24,
-        variant: i === "error" || i === "warning" ? "filled" : "outlined"
-      }
-    ) }),
-    /* @__PURE__ */ o("h2", { className: e.title, children: d }),
-    /* @__PURE__ */ o("p", { className: e.description, children: m })
+  const [s, { title: d, icon: r, description: m, className: a, ...l }] = t.splitVariantProps(n), o = t(s), i = s.type || "alert-circle";
+  return /* @__PURE__ */ c("div", { className: b(o.container, a), ...l, children: [
+    /* @__PURE__ */ e("div", { className: o.icon, children: r || (i === "error" || i === "warning" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(y, {})) }),
+    /* @__PURE__ */ e("h2", { className: o.title, children: d }),
+    /* @__PURE__ */ e("p", { className: o.description, children: m })
   ] });
 };
 export {

package/dist/components/Banner/index.d.ts

@@ -0,0 +1 @@
+export * from './Banner.tsx';

package/dist/components/Banner/index.js

@@ -0,0 +1,4 @@
+import { Banner as n } from "./Banner.js";
+export {
+  n as Banner
+};

package/dist/components/{BottomNavigation.js → BottomNavigation/BottomNavigation.js}

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { css as r } from "../styled-system/css/css.js";
-import { cx as i } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
+import { css as r } from "../../styled-system/css/css.js";
+import { cx as i } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
 const d = ({
   children: o,
   className: t,

package/dist/components/{BottomNavigationItem.d.ts → BottomNavigation/BottomNavigationItem.d.ts}

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../styled-system/css';
-export declare const BottomNavigationItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
     isActive: {
         true: {
             label: {

package/dist/components/{BottomNavigationItem.js → BottomNavigation/BottomNavigationItem.js}

@@ -1,9 +1,9 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as p } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as d } from "../styled-system/css/sva.js";
-import { NotificationBadge as y } from "./NotificationBadge.js";
+import "../../styled-system/css/css.js";
+import { cx as p } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as d } from "../../styled-system/css/sva.js";
+import { NotificationBadge as y } from "../NotificationBadge/NotificationBadge.js";
 const i = d({
   slots: ["root", "iconGroup", "icon", "label", "badge"],
   base: {

package/dist/components/BottomNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BottomNavigation.tsx';
+export * from './BottomNavigationItem.tsx';

package/dist/components/BottomNavigation/index.js

@@ -0,0 +1,7 @@
+import { BottomNavigation as m } from "./BottomNavigation.js";
+import { BottomNavigationItem as i, BottomNavigationItemStyle as e } from "./BottomNavigationItem.js";
+export {
+  m as BottomNavigation,
+  i as BottomNavigationItem,
+  e as BottomNavigationItemStyle
+};

package/dist/components/{Button.d.ts → Button/Button.d.ts}

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const ButtonStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+export declare const ButtonStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     styleType: {
         filled: {
             bg: "sd.system.color.impression.primaryContainer";

package/dist/components/{Button.js → Button/Button.js}

@@ -1,40 +1,12 @@
 import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import b from "react";
-import { css as f } from "../styled-system/css/css.js";
-import { cx as h } from "../styled-system/css/cx.js";
-import { cva as x } from "../styled-system/css/cva.js";
-import "../styled-system/helpers.js";
-import { styled as _ } from "../styled-system/jsx/factory.js";
-import "../styled-system/jsx/is-valid-prop.js";
-import "../preset.js";
-import "./Accordion/Accordion.js";
-import "./AccordionGroup.js";
-import "./Avatar.js";
-import "./Badge.js";
-import "./Banner.js";
-import "./BottomNavigationItem.js";
-import "./CheckBox.js";
-import "./ChoiceBox.js";
-import "./DashboardWidget.js";
-import "./Divider.js";
-import "./Drawer.js";
-import "./DropdownMenu.js";
-import "./IconButton.js";
-import "./ListItem.js";
-import "./ModalDialog.js";
-import "./NotificationBadge.js";
-import "./PasswordField.js";
-import { ProgressIndicator as v } from "./ProgressIndicator.js";
-import "./RadioButton.js";
-import "./Search.js";
-import "./Select.js";
-import "./Switch.js";
-import "./TabItem.js";
-import "./Tabs.js";
-import "./TextArea.js";
-import "./TextField.js";
-import "./Toast.js";
-import "./TopAppBar.js";
+import { ProgressIndicator as f } from "../ProgressIndicator/ProgressIndicator.js";
+import { css as h } from "../../styled-system/css/css.js";
+import { cx as x } from "../../styled-system/css/cx.js";
+import { cva as _ } from "../../styled-system/css/cva.js";
+import "../../styled-system/helpers.js";
+import { styled as v } from "../../styled-system/jsx/factory.js";
+import "../../styled-system/jsx/is-valid-prop.js";
 const d = {
   color: "sd.system.color.component.onSurface",
   outlineWidth: "sd.system.dimension.border.medium",
@@ -55,7 +27,7 @@ const d = {
     color: "sd.system.color.interaction.disabledOnSurface",
     outline: "none"
   }
-}, m = x({
+}, l = _({
   base: {
     borderRadius: "sd.system.dimension.radius.full",
     position: "relative",
@@ -148,50 +120,50 @@ const d = {
     styleType: "filled",
     size: "medium"
   }
-}), r = _("span", {
+}), n = v("span", {
   base: {
     position: "relative",
     zIndex: "sd.system.elevation.zIndex.base"
   }
-}), re = b.forwardRef(
-  (s, l) => {
+}), T = b.forwardRef(
+  (o, a) => {
     const [
-      n,
-      { children: a, leftIcon: e, rightIcon: o, isLoading: t, className: p, ...c }
-    ] = m.splitVariantProps(s), y = m(n), u = f(
-      e || o ? s.size === "medium" ? {
+      r,
+      { children: m, leftIcon: e, rightIcon: s, isLoading: t, className: c, ...y }
+    ] = l.splitVariantProps(o), p = l(r), u = h(
+      e || s ? o.size === "medium" ? {
         //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
         paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
-        paddingRight: o ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge"
+        paddingRight: s ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge"
       } : {
         //アイコンがある側 `spacing.extraSmall`、無い側は`spacing.medium`
         paddingLeft: e ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium",
-        paddingRight: o ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium"
+        paddingRight: s ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium"
       } : {}
     );
     return /* @__PURE__ */ g(
       "button",
       {
-        ref: l,
-        className: h(y, u, p),
-        ...c,
+        ref: a,
+        className: x(p, u, c),
+        ...y,
         children: [
           t && /* @__PURE__ */ i(
-            v,
+            f,
             {
-              size: n.size,
-              color: s.styleType === void 0 || s.styleType === "filled" ? "white" : "gray"
+              size: r.size,
+              color: o.styleType === void 0 || o.styleType === "filled" ? "white" : "gray"
             }
           ),
-          !t && e && /* @__PURE__ */ i(r, { p: "2px", children: e }),
-          /* @__PURE__ */ i(r, { children: a }),
-          !t && o && /* @__PURE__ */ i(r, { p: "2px", children: o })
+          !t && e && /* @__PURE__ */ i(n, { p: "2px", children: e }),
+          /* @__PURE__ */ i(n, { children: m }),
+          !t && s && /* @__PURE__ */ i(n, { p: "2px", children: s })
         ]
       }
     );
   }
 );
 export {
-  re as Button,
-  m as ButtonStyle
+  T as Button,
+  l as ButtonStyle
 };

package/dist/components/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button.tsx';

package/dist/components/Button/index.js

@@ -0,0 +1,5 @@
+import { Button as e, ButtonStyle as n } from "./Button.js";
+export {
+  e as Button,
+  n as ButtonStyle
+};

package/dist/components/{CheckBox.d.ts → CheckBox/CheckBox.d.ts}

@@ -1,5 +1,5 @@
 import { CheckboxRootProps } from '@ark-ui/react';
-import { RecipeVariantProps } from '../../styled-system/css';
+import { RecipeVariantProps } from '../../../styled-system/css';
 export declare const checkboxIconCss: {
     flexShrink: number;
     cursor: string;
@@ -37,7 +37,7 @@ export declare const checkboxUncheckedIconCss: {
         color: string;
     };
 };
-export declare const CheckBoxStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "itemControl" | "checkedIcon" | "uncheckedIcon" | "itemTextGroup" | "itemText" | "helperText", import('../../styled-system/types').SlotRecipeVariantRecord<"root" | "itemControl" | "checkedIcon" | "uncheckedIcon" | "itemTextGroup" | "itemText" | "helperText">>;
+export declare const CheckBoxStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "itemControl" | "checkedIcon" | "uncheckedIcon" | "itemTextGroup" | "itemText" | "helperText", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "itemControl" | "checkedIcon" | "uncheckedIcon" | "itemTextGroup" | "itemText" | "helperText">>;
 type CheckBoxItemProps = {
     label: string;
     helperText?: string;

package/dist/components/{CheckBox.js → CheckBox/CheckBox.js}

@@ -1,15 +1,15 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { css as x } from "../styled-system/css/css.js";
-import { cx as t } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as u } from "../styled-system/css/sva.js";
-import k from "../assets/checkboxChecked.svg.js";
-import b from "../assets/checkboxUnchecked.svg.js";
-import { CheckboxRoot as g } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-import { CheckboxContext as f } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
-import { CheckboxControl as C } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
-import { CheckboxLabel as c } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
-import { CheckboxHiddenInput as S } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+import { css as x } from "../../styled-system/css/css.js";
+import { cx as t } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as u } from "../../styled-system/css/sva.js";
+import k from "../../assets/checkboxChecked.svg.js";
+import b from "../../assets/checkboxUnchecked.svg.js";
+import { CheckboxRoot as g } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as f } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as C } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxLabel as c } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
+import { CheckboxHiddenInput as S } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
 const I = {
   flexShrink: 0,
   cursor: "pointer",

package/dist/components/CheckBox/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckBox.tsx';

package/dist/components/CheckBox/index.js

@@ -0,0 +1,8 @@
+import { CheckBox as o, CheckBoxStyle as h, checkboxCheckedIconCss as k, checkboxIconCss as s, checkboxUncheckedIconCss as x } from "./CheckBox.js";
+export {
+  o as CheckBox,
+  h as CheckBoxStyle,
+  k as checkboxCheckedIconCss,
+  s as checkboxIconCss,
+  x as checkboxUncheckedIconCss
+};

package/dist/components/ChoiceBox/ChoiceBox.d.ts

@@ -0,0 +1,8 @@
+import { CheckboxRootProps, RadioGroupItemProps } from '@ark-ui/react';
+export declare const ChoiceBoxStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "radioItem" | "radioCheckedIcon" | "radioUncheckedIcon" | "checkboxItem" | "checkboxCheckedIcon" | "checkboxUncheckedIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "radioItem" | "radioCheckedIcon" | "radioUncheckedIcon" | "checkboxItem" | "checkboxCheckedIcon" | "checkboxUncheckedIcon">>;
+type ChoiceBoxBaseProps = {
+    type: "radio" | "checkbox";
+};
+export type ChoiceBoxProps = ChoiceBoxBaseProps & RadioGroupItemProps & CheckboxRootProps;
+export declare const ChoiceBox: React.FC<ChoiceBoxProps>;
+export {};

package/dist/components/ChoiceBox/ChoiceBox.js

@@ -0,0 +1,83 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import "../../styled-system/css/css.js";
+import { cx as n } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as a } from "../../styled-system/css/sva.js";
+import p from "../../assets/checkboxChecked.svg.js";
+import I from "../../assets/checkboxUnchecked.svg.js";
+import C from "../../assets/radioChecked.svg.js";
+import x from "../../assets/radioUnchecked.svg.js";
+import { checkboxUncheckedIconCss as l, checkboxCheckedIconCss as b, checkboxIconCss as f } from "../CheckBox/CheckBox.js";
+import { radioUncheckedIconCss as u, radioCheckedIconCss as U, radioIconCss as N } from "../RadioButton/RadioButton.js";
+import { RadioGroupItem as R } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
+import { RadioGroupItemContext as g } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
+import { RadioGroupItemControl as v } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
+import { RadioGroupItemHiddenInput as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
+import { CheckboxRoot as G } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as P } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as j } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxHiddenInput as y } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const h = a({
+  slots: [
+    "root",
+    "radioItem",
+    "radioCheckedIcon",
+    "radioUncheckedIcon",
+    "checkboxItem",
+    "checkboxCheckedIcon",
+    "checkboxUncheckedIcon"
+  ],
+  base: {
+    root: {
+      display: "flex"
+    },
+    radioItem: N,
+    radioCheckedIcon: U,
+    radioUncheckedIcon: u,
+    checkboxItem: f,
+    checkboxCheckedIcon: b,
+    checkboxUncheckedIcon: l
+  }
+}), Y = ({
+  type: r,
+  value: t,
+  className: i,
+  ...s
+}) => {
+  const [k, m] = h.splitVariantProps(s), c = h(k);
+  if (r === "radio")
+    return /* @__PURE__ */ d(
+      R,
+      {
+        value: t,
+        className: n("group", c.root, i),
+        ...m,
+        children: [
+          /* @__PURE__ */ o(g, { children: (e) => /* @__PURE__ */ o(v, { className: c.radioItem, asChild: !0, children: e.checked ? /* @__PURE__ */ o(C, { className: c.radioCheckedIcon }) : /* @__PURE__ */ o(x, { className: c.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ o(S, {})
+        ]
+      }
+    );
+  if (r === "checkbox")
+    return /* @__PURE__ */ d(
+      G,
+      {
+        value: t,
+        className: n("group", c.root, i),
+        ...m,
+        children: [
+          /* @__PURE__ */ o(P, { children: (e) => /* @__PURE__ */ o(j, { className: c.checkboxItem, children: e.checked ? /* @__PURE__ */ o(p, { className: c.checkboxCheckedIcon }) : /* @__PURE__ */ o(
+            I,
+            {
+              className: c.checkboxUncheckedIcon
+            }
+          ) }) }),
+          /* @__PURE__ */ o(y, {})
+        ]
+      }
+    );
+};
+export {
+  Y as ChoiceBox,
+  h as ChoiceBoxStyle
+};

package/dist/components/ChoiceBox/index.d.ts

@@ -0,0 +1 @@
+export * from './ChoiceBox.tsx';