@serendie/ui 0.2.3 → 1.0.0

package/dist/components/ChoiceBox/index.js

@@ -0,0 +1,5 @@
+import { ChoiceBox as x, ChoiceBoxStyle as c } from "./ChoiceBox.js";
+export {
+  x as ChoiceBox,
+  c as ChoiceBoxStyle
+};

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

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as c } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as y } from "../styled-system/css/sva.js";
-import { SerendieSymbol as u } from "../node_modules/@serendie/symbols/dist/symbols2.js";
-const g = y({
+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";
+import { sva as u } from "../../styled-system/css/sva.js";
+const g = u({
   slots: [
     "root",
     "labelContainer",
@@ -120,36 +120,36 @@ const g = y({
   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: c(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(u, { 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/DashboardWidget/index.d.ts

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

package/dist/components/DashboardWidget/index.js

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

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../styled-system/css';
-export declare const DividerStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const DividerStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     color: {
         light: {
             borderColor: "sd.reference.color.scale.gray.200";

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

@@ -1,8 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as n } from "../styled-system/css/cx.js";
-import { cva as a } from "../styled-system/css/cva.js";
-import "../styled-system/helpers.js";
+import "../../styled-system/css/css.js";
+import { cx as n } from "../../styled-system/css/cx.js";
+import { cva as a } from "../../styled-system/css/cva.js";
+import "../../styled-system/helpers.js";
 const r = a({
   base: {
     border: "none"

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

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

package/dist/components/Divider/index.js

@@ -0,0 +1,5 @@
+import { Divider as r, DividerStyle as d } from "./Divider.js";
+export {
+  r as Divider,
+  d as DividerStyle
+};

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

@@ -1,6 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
-import { RecipeVariantProps } from '../../styled-system/css';
-declare const DrawerStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "backdrop" | "contentInner" | "closeTrigger", {
+import { RecipeVariantProps } from '../../../styled-system/css';
+declare const DrawerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "backdrop" | "contentInner" | "closeTrigger", {
     type: {
         left: {
             content: {

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

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as s } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as p } from "../styled-system/css/sva.js";
-import { IconButton as g } from "./IconButton.js";
-import { SerendieSymbol as f } from "../node_modules/@serendie/symbols/dist/symbols2.js";
-import { Portal as h } from "../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-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";
-const r = p({
+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";
+import { sva as g } from "../../styled-system/css/sva.js";
+import { IconButton as f } from "../IconButton/IconButton.js";
+import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+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 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: {
     backdrop: {
@@ -80,11 +80,11 @@ const r = p({
   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(
-        g,
+    /* @__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(f, { name: "close" }),
+          icon: /* @__PURE__ */ e(p, {}),
           shape: "rectangle",
           styleType: "ghost"
         }

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

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

package/dist/components/Drawer/index.js

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

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

@@ -1,5 +1,5 @@
 import { MenuRootProps } from '@ark-ui/react';
-export declare const DropdownMenuStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
+export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
 export type MenuItemProps = {
     value: string;
     label: string;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,145 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { SerendieSymbolMenu as l, 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";
+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: {
+      bgColor: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.medium",
+      bg: "sd.system.color.component.surface",
+      boxShadow: "sd.system.elevation.shadow.level1",
+      outline: "none"
+    },
+    itemGroup: {
+      width: 240
+    },
+    item: {
+      display: "flex",
+      height: "48px",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.small",
+      paddingX: "sd.system.dimension.spacing.medium",
+      paddingY: "sd.system.dimension.spacing.extraSmall",
+      cursor: "pointer",
+      textStyle: "sd.system.typography.body.medium_compact",
+      expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      },
+      _hover: {
+        bgColor: "sd.system.color.interaction.hoveredVariant"
+      },
+      _highlighted: {
+        bgColor: "sd.system.color.interaction.hoveredVariant"
+      }
+    },
+    itemIcon: {
+      "& svg": {
+        width: "sd.reference.dimension.scale.8",
+        height: "sd.reference.dimension.scale.8"
+      }
+    },
+    button: {
+      paddingY: "sd.system.dimension.spacing.small",
+      paddingInlineStart: "sd.system.dimension.spacing.medium",
+      paddingRight: "sd.system.dimension.spacing.small",
+      color: "sd.system.color.component.onSurfaceVariant",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      textStyle: "sd.system.typography.body.medium_compact",
+      expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      },
+      _disabled: {
+        outline: "solid",
+        outlineOffset: "0px",
+        outlineColor: "sd.system.color.component.outline",
+        outlineWidth: "sd.system.dimension.border.medium"
+      },
+      _expanded: {
+        textStyle: "sd.system.typography.body.medium_compact",
+        expanded: {
+          textStyle: "sd.system.typography.body.medium_expanded"
+        },
+        // Note: leftIcon が _open を受け取れないため button 側で制御
+        "& svg": {
+          transform: "rotate(180deg)"
+        }
+      }
+    },
+    buttonIcon: {
+      color: "sd.system.color.component.onSurface",
+      marginLeft: "2px",
+      transition: "transform 0.2s"
+    }
+  }
+}), Y = ({
+  styleType: m = "default",
+  title: s,
+  items: r,
+  disabled: n,
+  icon: d,
+  ...a
+}) => {
+  const o = I();
+  return /* @__PURE__ */ i(
+    h,
+    {
+      positioning: {
+        offset: {
+          mainAxis: 1,
+          crossAxis: 0
+        }
+      },
+      ...a,
+      children: [
+        /* @__PURE__ */ e(f, { asChild: !0, children: m === "iconButton" ? /* @__PURE__ */ e(
+          u,
+          {
+            icon: d || /* @__PURE__ */ e(l, { className: o.buttonIcon }),
+            shape: "rectangle",
+            disabled: n,
+            styleType: "outlined",
+            title: s
+          }
+        ) : /* @__PURE__ */ e(
+          y,
+          {
+            styleType: "rectangle",
+            size: "medium",
+            disabled: n,
+            rightIcon: /* @__PURE__ */ e(c, { className: o.buttonIcon }),
+            className: o.button,
+            children: 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,
+            children: [
+              t.icon && /* @__PURE__ */ e("div", { className: o.itemIcon, children: t.icon }),
+              t.label
+            ]
+          },
+          t.value
+        )) }) }) }) })
+      ]
+    }
+  );
+};
+export {
+  Y as DropdownMenu,
+  I as DropdownMenuStyle
+};

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

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

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,5 @@
+import { DropdownMenu as n, DropdownMenuStyle as r } from "./DropdownMenu.js";
+export {
+  n as DropdownMenu,
+  r as DropdownMenuStyle
+};

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const IconButtonStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+export declare const IconButtonStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     shape: {
         rectangle: {
             borderRadius: "sd.system.dimension.radius.medium";

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

@@ -1,9 +1,9 @@
 import { jsx as d } from "react/jsx-runtime";
 import a from "react";
-import "../styled-system/css/css.js";
-import { cx as c } from "../styled-system/css/cx.js";
-import { cva as m } from "../styled-system/css/cva.js";
-import "../styled-system/helpers.js";
+import "../../styled-system/css/css.js";
+import { cx as c } from "../../styled-system/css/cx.js";
+import { cva as m } from "../../styled-system/css/cva.js";
+import "../../styled-system/helpers.js";
 const e = m({
   base: {
     position: "relative",

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

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

package/dist/components/IconButton/index.js

@@ -0,0 +1,5 @@
+import { IconButton as n, IconButtonStyle as c } from "./IconButton.js";
+export {
+  n as IconButton,
+  c as IconButtonStyle
+};

package/dist/components/{ListItem.d.ts → List/ListItem.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-export declare const ListItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
+export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
     isLargeLeftIcon: {
         true: {
             leftIcon: {

package/dist/components/{ListItem.js → List/ListItem.js}

@@ -1,9 +1,9 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { css as c } from "../styled-system/css/css.js";
-import { cx as o } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as b } from "../styled-system/css/sva.js";
-import { NotificationBadge as v } from "./NotificationBadge.js";
+import { css as c } from "../../styled-system/css/css.js";
+import { cx as o } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as b } from "../../styled-system/css/sva.js";
+import { NotificationBadge as v } from "../NotificationBadge/NotificationBadge.js";
 const p = b({
   slots: [
     "root",

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

@@ -0,0 +1,2 @@
+export * from './List.tsx';
+export * from './ListItem.tsx';

package/dist/components/List/index.js

@@ -0,0 +1,7 @@
+import { List as m } from "./List.js";
+import { ListItem as r, ListItemStyle as i } from "./ListItem.js";
+export {
+  m as List,
+  r as ListItem,
+  i as ListItemStyle
+};

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

@@ -1,6 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
-import { RecipeVariantProps } from '../../styled-system/css';
-declare const ModalDialogStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../styled-system/types').SlotRecipeVariantRecord<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
+import { RecipeVariantProps } from '../../../styled-system/css';
+declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
 type Props = {
     isOpen: boolean;
     title: string;

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

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as c } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as g } from "../styled-system/css/sva.js";
-import { Button as i } from "./Button.js";
-import { Portal as y } from "../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { DialogRoot as x } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
-import { DialogBackdrop as f } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
-import { DialogPositioner as h } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
-import { DialogContent as u } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
-import { DialogTitle as b } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
-import { DialogDescription as D } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
-import { DialogCloseTrigger as v } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
+import "../../styled-system/css/css.js";
+import { cx as c } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as g } from "../../styled-system/css/sva.js";
+import { Button as i } from "../Button/Button.js";
+import { Portal as y } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { DialogRoot as x } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
+import { DialogBackdrop as f } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
+import { DialogPositioner as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
+import { DialogContent as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
+import { DialogTitle as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
+import { DialogDescription as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
+import { DialogCloseTrigger as v } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
 const I = g({
   slots: [
     "backdrop",

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

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

package/dist/components/ModalDialog/index.js

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

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../styled-system/css';
-declare const NotificationBadgeStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root", {
+import { RecipeVariantProps } from '../../../styled-system/css';
+declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root", {
     size: {
         small: {
             root: {

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

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../styled-system/css/css.js";
-import { cx as a } from "../styled-system/css/cx.js";
-import "../styled-system/helpers.js";
-import { sva as l } from "../styled-system/css/sva.js";
+import "../../styled-system/css/css.js";
+import { cx as a } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as l } from "../../styled-system/css/sva.js";
 const n = l({
   slots: ["root", "text"],
   base: {

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

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

package/dist/components/NotificationBadge/index.js

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

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>>;