@serendie/ui 0.3.0 → 1.0.1

package/dist/assets/checkboxIndeterminate.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M3.25 6C3.25 4.48122 4.48122 3.25 6 3.25H18C19.5188 3.25 20.75 4.48122 20.75 6V18C20.75 19.5188 19.5188 20.75 18 20.75H6C4.48122 20.75 3.25 19.5188 3.25 18V6Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17 12.75H7V11.25H17V12.75Z", fill: "currentColor", className: "checkmark" }));
+export {
+  l as default
+};

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/Avatar/Avatar.js

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { SerendieSymbol as f } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+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";
@@ -7,7 +7,7 @@ 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 s = C({
+const c = C({
   slots: ["root", "fallback", "image"],
   base: {
     root: {
@@ -66,16 +66,16 @@ const s = C({
   }
 }), _ = ({
   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: g(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(f, { 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 = C({
 ] });
 export {
   _ as Avatar,
-  s as AvatarStyle
+  c as AvatarStyle
 };

package/dist/components/Badge/Badge.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { SerendieSymbol as i } 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";
@@ -100,9 +100,9 @@ const o = l({
 }), S = ({
   children: e,
   closeButton: s,
-  ...c
+  ...t
 }) => {
-  const [t, { className: n, ...a }] = o.splitVariantProps(c), d = o(t);
+  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(i, { 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/Banner/Banner.js

@@ -1,10 +1,10 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { SerendieSymbol as p } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+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 y } from "../../styled-system/css/cx.js";
+import { cx as b } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
-import { sva as b } from "../../styled-system/css/sva.js";
-const t = b({
+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 = b({
     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: y(e.container, a), ...l, children: [
-    /* @__PURE__ */ o("div", { className: e.icon, children: r || /* @__PURE__ */ o(
-      p,
-      {
-        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/ChoiceBox/ChoiceBox.d.ts

@@ -3,6 +3,8 @@ export declare const ChoiceBoxStyle: import('../../../styled-system/types').Slot
 type ChoiceBoxBaseProps = {
     type: "radio" | "checkbox";
 };
-export type ChoiceBoxProps = ChoiceBoxBaseProps & RadioGroupItemProps & CheckboxRootProps;
+export type ChoiceBoxProps = ChoiceBoxBaseProps & RadioGroupItemProps & CheckboxRootProps & {
+    indeterminate?: boolean;
+};
 export declare const ChoiceBox: React.FC<ChoiceBoxProps>;
 export {};

package/dist/components/ChoiceBox/ChoiceBox.js

@@ -1,23 +1,25 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { jsxs as k, jsx as o } from "react/jsx-runtime";
 import "../../styled-system/css/css.js";
-import { cx as n } from "../../styled-system/css/cx.js";
+import { cx as s } 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({
+import { sva as C } from "../../styled-system/css/sva.js";
+import I from "../../assets/checkboxChecked.svg.js";
+import l from "../../assets/checkboxUnchecked.svg.js";
+import p from "../../assets/checkboxIndeterminate.svg.js";
+import x from "../../assets/radioChecked.svg.js";
+import b from "../../assets/radioUnchecked.svg.js";
+import { checkboxUncheckedIconCss as u, checkboxCheckedIconCss as U, checkboxIconCss as R } from "../CheckBox/CheckBox.js";
+import { radioUncheckedIconCss as N, radioCheckedIconCss as g, radioIconCss as v } from "../RadioButton/RadioButton.js";
+import { useRef as S, useEffect as y } from "react";
+import { RadioGroupItem as G } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
+import { RadioGroupItemContext as P } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
+import { RadioGroupItemControl as j } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
+import { RadioGroupItemHiddenInput as B } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
+import { CheckboxRoot as H } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as D } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as E } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxHiddenInput as V } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const a = C({
   slots: [
     "root",
     "radioItem",
@@ -31,53 +33,70 @@ const h = a({
     root: {
       display: "flex"
     },
-    radioItem: N,
-    radioCheckedIcon: U,
-    radioUncheckedIcon: u,
-    checkboxItem: f,
-    checkboxCheckedIcon: b,
-    checkboxUncheckedIcon: l
+    radioItem: v,
+    radioCheckedIcon: g,
+    radioUncheckedIcon: N,
+    checkboxItem: R,
+    checkboxCheckedIcon: U,
+    checkboxUncheckedIcon: u
   }
-}), Y = ({
-  type: r,
-  value: t,
-  className: i,
-  ...s
+}), ro = ({
+  type: n,
+  value: m,
+  indeterminate: i,
+  className: d,
+  ...e
 }) => {
-  const [k, m] = h.splitVariantProps(s), c = h(k);
-  if (r === "radio")
-    return /* @__PURE__ */ d(
-      R,
+  const [f, h] = a.splitVariantProps(e), c = a(f);
+  if (n === "radio")
+    return /* @__PURE__ */ k(
+      G,
       {
-        value: t,
-        className: n("group", c.root, i),
-        ...m,
+        value: m,
+        className: s("group", c.root, d),
+        ...h,
         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, {})
+          /* @__PURE__ */ o(P, { children: (r) => /* @__PURE__ */ o(j, { className: c.radioItem, asChild: !0, children: r.checked ? /* @__PURE__ */ o(x, { className: c.radioCheckedIcon }) : /* @__PURE__ */ o(b, { className: c.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ o(B, {})
         ]
       }
     );
-  if (r === "checkbox")
-    return /* @__PURE__ */ d(
-      G,
+  if (n === "checkbox") {
+    const r = S(null);
+    return y(() => {
+      r.current && (r.current.indeterminate = !!i);
+    }, [i]), /* @__PURE__ */ k(
+      H,
       {
-        value: t,
-        className: n("group", c.root, i),
-        ...m,
+        value: m,
+        className: s("group", c.root, d),
+        ...h,
+        onClick: (t) => {
+          if (i) {
+            t.preventDefault(), typeof e.onClick == "function" && e.onClick(t);
+            return;
+          }
+          typeof e.onClick == "function" && e.onClick(t);
+        },
         children: [
-          /* @__PURE__ */ o(P, { children: (e) => /* @__PURE__ */ o(j, { className: c.checkboxItem, children: e.checked ? /* @__PURE__ */ o(p, { className: c.checkboxCheckedIcon }) : /* @__PURE__ */ o(
-            I,
+          /* @__PURE__ */ o(D, { children: (t) => /* @__PURE__ */ o(E, { className: c.checkboxItem, children: t.checked ? /* @__PURE__ */ o(I, { className: c.checkboxCheckedIcon }) : i ? /* @__PURE__ */ o(
+            p,
+            {
+              className: c.checkboxCheckedIcon
+            }
+          ) : /* @__PURE__ */ o(
+            l,
             {
               className: c.checkboxUncheckedIcon
             }
           ) }) }),
-          /* @__PURE__ */ o(y, {})
+          /* @__PURE__ */ o(V, { ref: r })
         ]
       }
     );
+  }
 };
 export {
-  Y as ChoiceBox,
-  h as ChoiceBoxStyle
+  ro as ChoiceBox,
+  a as ChoiceBoxStyle
 };

package/dist/components/DashboardWidget/DashboardWidget.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { SerendieSymbol as c } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+import { SerendieSymbolChevronRight as c } from "@serendie/symbols";
 import "../../styled-system/css/css.js";
 import { cx as y } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
@@ -120,36 +120,36 @@ const g = u({
   defaultVariants: {
     values: "singleValue"
   }
-}), S = ({
+}), N = ({
   values: t,
   children: n,
   linkTo: i,
   className: o,
-  ...m
+  ...d
 }) => {
   const e = g({
     values: t === void 0 ? "noValue" : t.length === 1 ? "singleValue" : "doubleValue"
-  }), d = ({ label: s, value: r, unit: p }) => /* @__PURE__ */ l("div", { className: e.areaValue, children: [
+  }), m = ({ label: s, value: r, unit: p }) => /* @__PURE__ */ l("div", { className: e.areaValue, children: [
     /* @__PURE__ */ a("h3", { className: e.areaValueLabel, children: s }),
     /* @__PURE__ */ l("div", { className: e.areaValueContainer, children: [
       /* @__PURE__ */ a("p", { className: e.areaValueNumber, children: r }),
       /* @__PURE__ */ a("p", { className: e.areaValueNumberUnit, children: p })
     ] })
   ] });
-  return /* @__PURE__ */ l("div", { className: y(e.root, o), ...m, children: [
+  return /* @__PURE__ */ l("div", { className: y(e.root, o), ...d, children: [
     /* @__PURE__ */ l("a", { href: i, className: e.labelContainer, children: [
       /* @__PURE__ */ l("div", { className: e.label, children: [
         /* @__PURE__ */ a("h2", { className: e.labelTitle, children: "title" }),
         /* @__PURE__ */ a("p", { className: e.labelText, children: "icon" })
       ] }),
-      /* @__PURE__ */ a(c, { name: "chevron-right" })
+      /* @__PURE__ */ a(c, {})
     ] }),
     /* @__PURE__ */ l("div", { className: e.area, children: [
-      t == null ? void 0 : t.map((s, r) => /* @__PURE__ */ a(d, { ...s }, r)),
+      t == null ? void 0 : t.map((s, r) => /* @__PURE__ */ a(m, { ...s }, r)),
       /* @__PURE__ */ a("div", { className: e.areaContainer, children: n })
     ] })
   ] });
 };
 export {
-  S as DashboardWidget
+  N as DashboardWidget
 };

package/dist/components/Drawer/Drawer.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { SerendieSymbol as p } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+import { SerendieSymbolClose as p } from "@serendie/symbols";
 import "../../styled-system/css/css.js";
 import { cx as s } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
@@ -9,8 +9,8 @@ import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/po
 import { DialogRoot as x } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
 import { DialogBackdrop as y } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
 import { DialogPositioner as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
-import { DialogContent as w } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
-import { DialogCloseTrigger as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
+import { DialogContent as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
+import { DialogCloseTrigger as v } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
 const r = g({
   slots: ["backdrop", "content", "contentInner", "closeTrigger"],
   base: {
@@ -80,11 +80,11 @@ const r = g({
   const [d, c] = r.splitVariantProps(m), t = r(d);
   return /* @__PURE__ */ e(x, { open: n, ...c, children: /* @__PURE__ */ o(h, { children: [
     /* @__PURE__ */ e(y, { className: s(t.backdrop, l) }),
-    /* @__PURE__ */ e(u, { children: /* @__PURE__ */ o(w, { className: s(t.content, a), children: [
-      /* @__PURE__ */ e("header", { className: t.closeTrigger, children: /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(u, { children: /* @__PURE__ */ o(b, { className: s(t.content, a), children: [
+      /* @__PURE__ */ e("header", { className: t.closeTrigger, children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
         f,
         {
-          icon: /* @__PURE__ */ e(p, { name: "close" }),
+          icon: /* @__PURE__ */ e(p, {}),
           shape: "rectangle",
           styleType: "ghost"
         }

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,18 +1,18 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbol as m } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+import { SerendieSymbolMenu as l, SerendieSymbolChevronDown as c } from "@serendie/symbols";
 import "../../styled-system/css/css.js";
 import "../../styled-system/helpers.js";
-import { sva as l } from "../../styled-system/css/sva.js";
-import { Button as p } from "../Button/Button.js";
-import { IconButton as y } from "../IconButton/IconButton.js";
-import { Portal as u } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { MenuRoot as g } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
-import { MenuTrigger as h } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
-import { MenuPositioner as f } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
-import { MenuContent as x } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
-import { MenuItemGroup as b } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
-import { MenuItem as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
-const v = l({
+import { sva as p } from "../../styled-system/css/sva.js";
+import { Button as y } from "../Button/Button.js";
+import { IconButton as u } from "../IconButton/IconButton.js";
+import { Portal as g } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { MenuRoot as h } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
+import { MenuTrigger as f } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
+import { MenuPositioner as x } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
+import { MenuContent as b } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
+import { MenuItemGroup as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
+import { MenuItem as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
+const I = p({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
@@ -83,17 +83,17 @@ const v = l({
       transition: "transform 0.2s"
     }
   }
-}), D = ({
-  styleType: d = "default",
+}), Y = ({
+  styleType: m = "default",
   title: s,
   items: r,
   disabled: n,
-  icon: a,
-  ...c
+  icon: d,
+  ...a
 }) => {
-  const o = v();
+  const o = I();
   return /* @__PURE__ */ i(
-    g,
+    h,
     {
       positioning: {
         offset: {
@@ -101,44 +101,30 @@ const v = l({
           crossAxis: 0
         }
       },
-      ...c,
+      ...a,
       children: [
-        /* @__PURE__ */ e(h, { asChild: !0, children: d === "iconButton" ? /* @__PURE__ */ e(
-          y,
+        /* @__PURE__ */ e(f, { asChild: !0, children: m === "iconButton" ? /* @__PURE__ */ e(
+          u,
           {
-            icon: a || /* @__PURE__ */ e(
-              m,
-              {
-                name: "menu",
-                size: 24,
-                className: o.buttonIcon
-              }
-            ),
+            icon: d || /* @__PURE__ */ e(l, { className: o.buttonIcon }),
             shape: "rectangle",
             disabled: n,
             styleType: "outlined",
             title: s
           }
         ) : /* @__PURE__ */ e(
-          p,
+          y,
           {
             styleType: "rectangle",
             size: "medium",
             disabled: n,
-            rightIcon: /* @__PURE__ */ e(
-              m,
-              {
-                name: "chevron-down",
-                size: 24,
-                className: o.buttonIcon
-              }
-            ),
+            rightIcon: /* @__PURE__ */ e(c, { className: o.buttonIcon }),
             className: o.button,
             children: s
           }
         ) }),
-        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(x, { className: o.content, children: /* @__PURE__ */ e(b, { className: o.itemGroup, children: r.map((t) => /* @__PURE__ */ i(
-          S,
+        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(b, { className: o.content, children: /* @__PURE__ */ e(S, { className: o.itemGroup, children: r.map((t) => /* @__PURE__ */ i(
+          v,
           {
             value: t.value,
             className: o.item,
@@ -154,6 +140,6 @@ const v = l({
   );
 };
 export {
-  D as DropdownMenu,
-  v as DropdownMenuStyle
+  Y as DropdownMenu,
+  I as DropdownMenuStyle
 };

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,30 @@
+import { default as React, ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "root" | "ellipsis" | "prevTrigger" | "nextTrigger", {
+    size: {
+        medium: {
+            root: {
+                gap: "sd.system.dimension.spacing.none";
+            };
+            item: {
+                height: number;
+                minWidth: number;
+            };
+            ellipsis: {
+                height: number;
+                width: number;
+            };
+        };
+    };
+}>;
+export type PaginationProps = ComponentProps<"div"> & RecipeVariantProps<typeof PaginationStyle> & {
+    count: number;
+    pageSize?: number;
+    page?: number;
+    onPageChange?: (details: {
+        page: number;
+    }) => void;
+    siblingCount?: number;
+    className?: string;
+};
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;