@serendie/ui 0.3.0 → 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/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/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>>;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,195 @@
+import { jsx as e, jsxs as T, Fragment as g } from "react/jsx-runtime";
+import { SerendieSymbolChevronLeft as S, SerendieSymbolChevronRight as _ } from "@serendie/symbols";
+import C, { useState as I } from "react";
+import { IconButton as m } from "../IconButton/IconButton.js";
+import "../../styled-system/css/css.js";
+import { cx as N } from "../../styled-system/css/cx.js";
+import "../../styled-system/helpers.js";
+import { sva as j } from "../../styled-system/css/sva.js";
+import { PaginationRoot as z } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
+import { PaginationContext as R } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
+import { PaginationPrevTrigger as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
+import { PaginationItem as O } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
+import { PaginationEllipsis as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
+import { PaginationNextTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
+const L = j({
+  slots: ["root", "item", "ellipsis", "prevTrigger", "nextTrigger"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.none"
+    },
+    item: {
+      height: 32,
+      minWidth: 32,
+      margin: 0,
+      "& button": {
+        color: "sd.system.color.impression.primary"
+      },
+      "&[data-selected]": {
+        "& button": {
+          color: "sd.system.color.interaction.disabledOnSurface",
+          fontWeight: "bold"
+        }
+      }
+    },
+    ellipsis: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: 32,
+      width: 32,
+      textStyle: "sd.system.typography.body.medium_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      }
+    },
+    prevTrigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      _disabled: {
+        "& svg": {
+          color: "sd.system.color.interaction.disabledOnSurface"
+        }
+      }
+    },
+    nextTrigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      _disabled: {
+        "& svg": {
+          color: "sd.system.color.interaction.disabledOnSurface"
+        }
+      }
+    }
+  },
+  variants: {
+    size: {
+      medium: {
+        root: {
+          gap: "sd.system.dimension.spacing.none"
+        },
+        item: {
+          height: 32,
+          minWidth: 32
+        },
+        ellipsis: {
+          height: 32,
+          width: 32
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), X = C.forwardRef(
+  ({
+    count: d,
+    pageSize: c = 1,
+    page: o,
+    onPageChange: n,
+    siblingCount: p = 2,
+    className: y,
+    size: h = "medium",
+    ...f
+  }, u) => {
+    const [b, P] = I(1), i = L({ size: h }), v = {
+      count: d,
+      pageSize: c,
+      siblingCount: p,
+      ...o ? { page: o } : { page: b },
+      onPageChange: (t) => {
+        o || P(t.page), n == null || n(t);
+      }
+    };
+    return /* @__PURE__ */ e(
+      z,
+      {
+        ref: u,
+        className: N(i.root, y),
+        ...v,
+        ...f,
+        children: /* @__PURE__ */ e(R, { children: (t) => {
+          const r = t.page <= 1, x = Math.ceil(d / c), a = t.page >= x;
+          return /* @__PURE__ */ T(g, { children: [
+            /* @__PURE__ */ e(
+              w,
+              {
+                className: i.prevTrigger,
+                disabled: r,
+                children: /* @__PURE__ */ e(
+                  m,
+                  {
+                    icon: /* @__PURE__ */ e(S, {}),
+                    shape: "rectangle",
+                    styleType: "ghost",
+                    size: "small",
+                    "aria-label": r ? "最初のページです" : "前のページへ",
+                    disabled: r,
+                    title: r ? "最初のページです" : "前のページへ"
+                  }
+                )
+              }
+            ),
+            t.pages.map(
+              (s, l) => s.type === "page" ? /* @__PURE__ */ e(
+                O,
+                {
+                  ...s,
+                  className: i.item,
+                  children: /* @__PURE__ */ e(
+                    m,
+                    {
+                      icon: /* @__PURE__ */ e(g, { children: s.value }),
+                      shape: "rectangle",
+                      styleType: "ghost",
+                      size: "small",
+                      "aria-label": `ページ${s.value}へ移動`,
+                      title: `ページ${s.value}へ移動`
+                    }
+                  )
+                },
+                l
+              ) : /* @__PURE__ */ e(
+                W,
+                {
+                  index: l,
+                  className: i.ellipsis,
+                  children: "…"
+                },
+                l
+              )
+            ),
+            /* @__PURE__ */ e(
+              F,
+              {
+                className: i.nextTrigger,
+                disabled: a,
+                children: /* @__PURE__ */ e(
+                  m,
+                  {
+                    icon: /* @__PURE__ */ e(_, {}),
+                    shape: "rectangle",
+                    styleType: "ghost",
+                    size: "small",
+                    "aria-label": a ? "最後のページです" : "次のページへ",
+                    disabled: a,
+                    title: a ? "最後のページです" : "次のページへ"
+                  }
+                )
+              }
+            )
+          ] });
+        } })
+      }
+    );
+  }
+);
+export {
+  X as Pagination,
+  L as PaginationStyle
+};

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

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

package/dist/components/Pagination/index.js

@@ -0,0 +1,5 @@
+import { Pagination as n, PaginationStyle as o } from "./Pagination.js";
+export {
+  n as Pagination,
+  o as PaginationStyle
+};

package/dist/components/PasswordField/PasswordField.js

@@ -1,44 +1,38 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as n, useState as d } from "react";
 import { TextField as m } from "../TextField/TextField.js";
-import { SerendieSymbol as p } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
-import { IconButton as w } from "../IconButton/IconButton.js";
-const g = n(
-  ({ disableToggle: s = !1, disabled: e, ...i }, r) => {
-    const [o, a] = d(!1);
-    return /* @__PURE__ */ t(
+import { SerendieSymbolEyeHidden as p, SerendieSymbolEye as y } from "@serendie/symbols";
+import { IconButton as g } from "../IconButton/IconButton.js";
+const w = n(
+  ({ disableToggle: s = !1, disabled: e, ...r }, i) => {
+    const [t, l] = d(!1);
+    return /* @__PURE__ */ o(
       m,
       {
-        type: o ? "text" : "password",
-        rightContent: s ? void 0 : /* @__PURE__ */ t(
-          w,
+        type: t ? "text" : "password",
+        rightContent: s ? void 0 : /* @__PURE__ */ o(
+          g,
           {
             type: "button",
             onClick: () => {
-              a((l) => !l);
+              l((a) => !a);
             },
             styleType: "ghost",
             size: "small",
             shape: "circle",
-            "aria-label": o ? "パスワードを隠す" : "パスワードを表示",
+            "aria-label": t ? "パスワードを隠す" : "パスワードを表示",
             disabled: e,
-            icon: /* @__PURE__ */ t(
-              p,
-              {
-                name: o ? "eye-hidden" : "eye",
-                size: 20
-              }
-            )
+            icon: t ? /* @__PURE__ */ o(p, {}) : /* @__PURE__ */ o(y, {})
           }
         ),
         disabled: e,
-        ...i,
-        ref: r
+        ...r,
+        ref: i
       }
     );
   }
 );
-g.displayName = "PasswordField";
+w.displayName = "PasswordField";
 export {
-  g as PasswordField
+  w as PasswordField
 };