@cakejp/design-system 0.22.0 → 0.23.0

package/dist/components/foundations/data-table.js

@@ -1,66 +1,66 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import * as b from "react";
+import * as f from "react";
 import { cva as p } from "class-variance-authority";
-import f from "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
-import x from "iconsax-reactjs/dist/esm/ArrowUp.js";
+import x from "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
+import g from "iconsax-reactjs/dist/esm/ArrowUp.js";
 import v from "iconsax-reactjs/dist/esm/ArrowDown.js";
-import g from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import w from "iconsax-reactjs/dist/esm/More.js";
-import y from "iconsax-reactjs/dist/esm/Add.js";
-import N from "iconsax-reactjs/dist/esm/ExportSquare.js";
-import { cn as n } from "../../lib/utils.js";
-import { FOCUS_RING as T } from "../../lib/focus-ring.js";
+import w from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import y from "iconsax-reactjs/dist/esm/More.js";
+import N from "iconsax-reactjs/dist/esm/Add.js";
+import T from "iconsax-reactjs/dist/esm/ExportSquare.js";
+import { cn as i } from "../../lib/utils.js";
+import { FOCUS_RING as E } from "../../lib/focus-ring.js";
 import { Checkbox as C } from "./checkbox.js";
-import { Button as E } from "./button.js";
-import { Avatar as S, AvatarImage as k, AvatarFallback as D } from "./avatar.js";
-import { Select as A, SelectTrigger as L, SelectValue as _, SelectContent as B, SelectItem as H } from "./select.js";
-import { DropdownMenu as z, DropdownMenuTrigger as M, DropdownMenuContent as P, DropdownMenuSeparator as I, DropdownMenuItem as R } from "./dropdown-menu.js";
-function te({ className: r, ...a }) {
+import { Button as k } from "./button.js";
+import { Avatar as S, AvatarImage as D, AvatarFallback as A } from "./avatar.js";
+import { Select as L, SelectTrigger as _, SelectValue as B, SelectContent as H, SelectItem as z } from "./select.js";
+import { DropdownMenu as P, DropdownMenuTrigger as I, DropdownMenuContent as M, DropdownMenuSeparator as R, DropdownMenuItem as V } from "./dropdown-menu.js";
+function oe({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "data-table",
-      className: n("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", r),
+      className: i("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", t),
       ...a
     }
   );
 }
-function le({ className: r, ...a }) {
+function ne({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     "table",
     {
       "data-slot": "data-table-table",
-      className: n("w-full caption-bottom typo-body-md border-collapse", r),
+      className: i("w-full caption-bottom typo-body-md border-collapse", t),
       ...a
     }
   );
 }
-function oe({ className: r, ...a }) {
+function ie({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     "thead",
     {
       "data-slot": "data-table-header",
-      className: n("bg-[var(--Surface-Secondary)] [&_tr]:border-b [&_tr]:border-[var(--Border-Low-Emphasis)]", r),
+      className: i("bg-[var(--Surface-Secondary)] [&_tr]:border-b [&_tr]:border-[var(--Border-Low-Emphasis)]", t),
       ...a
     }
   );
 }
-function ie({ className: r, ...a }) {
+function se({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     "tbody",
     {
       "data-slot": "data-table-body",
-      className: n("[&_tr:last-child]:border-b-0", r),
+      className: i("[&_tr:last-child]:border-b-0", t),
       ...a
     }
   );
 }
-const V = p(
+const j = p(
   "group/row border-b border-[var(--Border-Low-Emphasis)] transition-colors",
   {
     variants: {
       state: {
-        default: "hover:bg-[var(--Surface-Tertiary)]",
+        default: "hover:bg-[var(--Surface-Neutral-Tertiary)]",
         selected: "bg-[var(--Surface-Accent-Primary-Light)] hover:bg-[var(--Surface-Accent-Primary-Light)] border-l-[3px] border-l-[var(--Brand-Cake-Orange)]"
       }
     },
@@ -68,45 +68,80 @@ const V = p(
       state: "default"
     }
   }
-);
-function ne({
-  className: r,
+), F = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "[contenteditable]:not([contenteditable='false'])",
+  "[role='button']",
+  "[role='link']",
+  "[role='menuitem']",
+  "[role='checkbox']",
+  "[role='radio']",
+  "[role='switch']",
+  "[role='combobox']",
+  "[role='option']",
+  "[role='listbox']",
+  "[role='dialog']",
+  "[data-table-ignore-row-click]"
+].join(",");
+function u(t) {
+  const a = t.target, r = t.currentTarget;
+  if (!(a instanceof Node) || a === r) return !1;
+  if (!r.contains(a)) return !0;
+  if (!(a instanceof Element)) return !1;
+  const l = a.closest(F);
+  return !!(l && l !== r && r.contains(l));
+}
+function ce({
+  className: t,
   state: a,
-  ...t
+  onClick: r,
+  onKeyDown: l,
+  ...o
 }) {
   return /* @__PURE__ */ e(
     "tr",
     {
       "data-slot": "data-table-row",
-      className: n(V({ state: a }), r),
-      ...t
+      className: i(j({ state: a }), t),
+      onClick: r ? (n) => {
+        n.defaultPrevented || u(n) || r(n);
+      } : void 0,
+      onKeyDown: l ? (n) => {
+        n.defaultPrevented || (n.key === "Enter" || n.key === " ") && u(n) || l(n);
+      } : void 0,
+      ...o
     }
   );
 }
-function se({
-  className: r,
+function de({
+  className: t,
   sortable: a,
-  sortDirection: t,
-  onSort: o,
-  width: l,
-  srLabel: i,
+  sortDirection: r,
+  onSort: l,
+  width: o,
+  srLabel: n,
   children: c,
   ...d
 }) {
-  const h = t === "asc" ? x : t === "desc" ? v : f, u = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+  const h = r === "asc" ? g : r === "desc" ? v : x, b = r === "asc" ? "ascending" : r === "desc" ? "descending" : "none";
   return /* @__PURE__ */ s(
     "th",
     {
       "data-slot": "data-table-head",
-      className: n(
+      className: i(
         "h-16 px-4 text-left align-middle typo-label-sm whitespace-nowrap text-[var(--Text-Medium-Emphasis)]",
         "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
-        a && "hover:bg-[var(--Surface-Tertiary)]",
-        l === "max" && "min-w-[320px] max-w-[360px]",
-        l === "hug" && "min-w-0 w-0",
-        r
+        a && "hover:bg-[var(--Surface-Neutral-Tertiary)]",
+        o === "max" && "min-w-[320px] max-w-[360px]",
+        o === "hug" && "min-w-0 w-0",
+        t
       ),
-      "aria-sort": a ? u : void 0,
+      "aria-sort": a ? b : void 0,
       ...d,
       children: [
         a ? (
@@ -116,12 +151,12 @@ function se({
             "button",
             {
               type: "button",
-              onClick: o,
-              className: n(
+              onClick: l,
+              className: i(
                 "inline-flex items-center gap-1 rounded-sm outline-none",
                 "cursor-pointer select-none",
-                T,
-                t && "typo-label-sm font-bold text-[var(--Text-High-Emphasis)]"
+                E,
+                r && "typo-label-sm font-bold text-[var(--Text-High-Emphasis)]"
               ),
               children: [
                 c,
@@ -130,19 +165,19 @@ function se({
                   {
                     size: 14,
                     "aria-hidden": "true",
-                    className: n(t ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")
+                    className: i(r ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")
                   }
                 )
               ]
             }
           )
         ) : c,
-        i && /* @__PURE__ */ e("span", { className: "sr-only", children: i })
+        n && /* @__PURE__ */ e("span", { className: "sr-only", children: n })
       ]
     }
   );
 }
-const j = p(
+const O = p(
   "px-4 py-4 align-middle whitespace-nowrap typo-body-md text-[var(--Text-High-Emphasis)] [&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
   {
     variants: {
@@ -164,237 +199,237 @@ const j = p(
   }
 );
 function m({
-  className: r,
+  className: t,
   width: a,
-  align: t,
-  ...o
+  align: r,
+  ...l
 }) {
   return /* @__PURE__ */ e(
     "td",
     {
       "data-slot": "data-table-cell",
-      className: n(j({ width: a, align: t }), r),
-      ...o
+      className: i(O({ width: a, align: r }), t),
+      ...l
     }
   );
 }
-function ce({
-  className: r,
+function me({
+  className: t,
   src: a,
-  fallback: t,
-  title: o,
-  caption: l,
-  ...i
+  fallback: r,
+  title: l,
+  caption: o,
+  ...n
 }) {
-  return /* @__PURE__ */ e(m, { className: n("min-w-[200px]", r), ...i, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ e(m, { className: i("min-w-[200px]", t), ...n, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ s(S, { children: [
-      a && /* @__PURE__ */ e(k, { src: a, alt: o }),
-      /* @__PURE__ */ e(D, { children: t || o.charAt(0) })
+      a && /* @__PURE__ */ e(D, { src: a, alt: l }),
+      /* @__PURE__ */ e(A, { children: r || l.charAt(0) })
     ] }),
     /* @__PURE__ */ s("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)] truncate", children: o }),
-      l && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: l })
+      /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)] truncate", children: l }),
+      o && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: o })
     ] })
   ] }) });
 }
-function de({
-  className: r,
+function ue({
+  className: t,
   checked: a,
-  onCheckedChange: t,
-  indeterminate: o,
-  "aria-label": l,
-  ...i
+  onCheckedChange: r,
+  indeterminate: l,
+  "aria-label": o,
+  ...n
 }) {
   return /* @__PURE__ */ e(
     "td",
     {
       "data-slot": "data-table-checkbox-cell",
-      className: n("w-16 px-4 py-4 align-middle cursor-pointer", r),
+      className: i("w-16 px-4 py-4 align-middle cursor-pointer", t),
       onClick: (c) => {
-        c.stopPropagation(), t?.(!(!o && a));
+        c.stopPropagation(), r?.(!(!l && a));
       },
-      ...i,
+      ...n,
       children: /* @__PURE__ */ e(
         C,
         {
-          checked: o ? "indeterminate" : a,
-          onCheckedChange: (c) => t?.(c === !0),
+          checked: l ? "indeterminate" : a,
+          onCheckedChange: (c) => r?.(c === !0),
           onClick: (c) => c.stopPropagation(),
-          "aria-label": l || "行を選択",
+          "aria-label": o || "行を選択",
           className: "pointer-events-none"
         }
       )
     }
   );
 }
-function me({
-  className: r,
+function pe({
+  className: t,
   actions: a,
-  onClick: t,
-  ...o
+  onClick: r,
+  ...l
 }) {
   return /* @__PURE__ */ e(
     m,
     {
-      className: n("w-10", r),
-      onClick: (l) => {
-        l.stopPropagation(), t?.(l);
+      className: i("w-10", t),
+      onClick: (o) => {
+        o.stopPropagation(), r?.(o);
       },
-      ...o,
-      children: /* @__PURE__ */ s(z, { children: [
-        /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "ghost", size: "sm", className: "size-8 p-0", "aria-label": "アクションメニュー", children: /* @__PURE__ */ e(w, { size: 16 }) }) }),
-        /* @__PURE__ */ e(P, { align: "end", children: a.map((l, i) => /* @__PURE__ */ s(b.Fragment, { children: [
-          l.separator && /* @__PURE__ */ e(I, {}),
+      ...l,
+      children: /* @__PURE__ */ s(P, { children: [
+        /* @__PURE__ */ e(I, { asChild: !0, children: /* @__PURE__ */ e(k, { variant: "ghost", size: "sm", className: "size-8 p-0", "aria-label": "アクションメニュー", children: /* @__PURE__ */ e(y, { size: 16 }) }) }),
+        /* @__PURE__ */ e(M, { align: "end", children: a.map((o, n) => /* @__PURE__ */ s(f.Fragment, { children: [
+          o.separator && /* @__PURE__ */ e(R, {}),
           /* @__PURE__ */ e(
-            R,
+            V,
             {
-              onClick: l.onClick,
-              variant: l.destructive ? "destructive" : "default",
-              children: l.label
+              onClick: o.onClick,
+              variant: o.destructive ? "destructive" : "default",
+              children: o.label
             }
           )
-        ] }, i)) })
+        ] }, n)) })
       ] })
     }
   );
 }
-function pe({
-  className: r,
+function he({
+  className: t,
   selectedCount: a,
-  children: t,
-  ...o
+  children: r,
+  ...l
 }) {
   return a === 0 ? null : /* @__PURE__ */ s(
     "div",
     {
       "data-slot": "data-table-bulk-actions",
-      className: n(
+      className: i(
         "flex items-center gap-3 px-4 py-3 bg-[var(--Surface-Accent-Primary-Light)] border-b border-[var(--Border-Low-Emphasis)]",
-        r
+        t
       ),
-      ...o,
+      ...l,
       children: [
         /* @__PURE__ */ s("span", { className: "typo-label-sm text-[var(--Text-High-Emphasis)]", children: [
           a,
           "件を選択中"
         ] }),
-        /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: t })
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: r })
       ]
     }
   );
 }
-function he({
-  className: r,
+function be({
+  className: t,
   title: a,
-  colSpan: t,
-  expanded: o,
-  onToggle: l,
-  actions: i,
+  colSpan: r,
+  expanded: l,
+  onToggle: o,
+  actions: n,
   ...c
 }) {
   return /* @__PURE__ */ e(
     "tr",
     {
       "data-slot": "data-table-section-row",
-      className: n("border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]", r),
+      className: i("border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]", t),
       ...c,
-      children: /* @__PURE__ */ e("td", { colSpan: t, className: "px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+      children: /* @__PURE__ */ e("td", { colSpan: r, className: "px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ s(
           "button",
           {
             type: "button",
             className: "flex items-center gap-1.5 typo-label-md text-[var(--Text-High-Emphasis)] cursor-pointer",
-            onClick: l,
-            "aria-expanded": o,
+            onClick: o,
+            "aria-expanded": l,
             children: [
-              /* @__PURE__ */ e(g, { size: 16, className: n("transition-transform", o ? "" : "-rotate-90") }),
+              /* @__PURE__ */ e(w, { size: 16, className: i("transition-transform", l ? "" : "-rotate-90") }),
               a
             ]
           }
         ),
-        i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: i })
+        n && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n })
       ] }) })
     }
   );
 }
-function ue({
-  className: r,
+function fe({
+  className: t,
   colSpan: a,
-  label: t = "新しく追加",
-  onClick: o,
-  ...l
+  label: r = "新しく追加",
+  onClick: l,
+  ...o
 }) {
   return /* @__PURE__ */ e(
     "tr",
     {
       "data-slot": "data-table-add-row",
-      className: n("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Tertiary)] cursor-pointer transition-colors", r),
-      onClick: o,
-      ...l,
+      className: i("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] cursor-pointer transition-colors", t),
+      onClick: l,
+      ...o,
       children: /* @__PURE__ */ e("td", { colSpan: a, className: "px-4 py-4", children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-2 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: [
-        /* @__PURE__ */ e(y, { size: 16 }),
-        t
+        /* @__PURE__ */ e(N, { size: 16 }),
+        r
       ] }) })
     }
   );
 }
-function be({
-  className: r,
+function xe({
+  className: t,
   colSpan: a,
-  message: t = "対象のデータはありません",
-  icon: o,
-  description: l,
-  action: i,
+  message: r = "対象のデータはありません",
+  icon: l,
+  description: o,
+  action: n,
   ...c
 }) {
   return /* @__PURE__ */ e(
     "tr",
     {
       "data-slot": "data-table-empty-state",
-      className: n("", r),
+      className: i("", t),
       ...c,
-      children: /* @__PURE__ */ e("td", { colSpan: a, children: o ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-4 py-16", children: [
-        /* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children: o }),
-        /* @__PURE__ */ e("p", { className: "mt-4 typo-heading-md text-[var(--Text-High-Emphasis)]", children: t }),
-        l && /* @__PURE__ */ e("div", { className: "mt-1 text-center typo-body-md text-[var(--Text-Medium-Emphasis)]", children: l }),
-        i && /* @__PURE__ */ e("div", { className: "mt-6", children: i })
-      ] }) : /* @__PURE__ */ e("p", { className: "py-12 text-center typo-body-md text-[var(--Text-Low-Emphasis)]", children: t }) })
+      children: /* @__PURE__ */ e("td", { colSpan: a, children: l ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-4 py-16", children: [
+        /* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children: l }),
+        /* @__PURE__ */ e("p", { className: "mt-4 typo-heading-md text-[var(--Text-High-Emphasis)]", children: r }),
+        o && /* @__PURE__ */ e("div", { className: "mt-1 text-center typo-body-md text-[var(--Text-Medium-Emphasis)]", children: o }),
+        n && /* @__PURE__ */ e("div", { className: "mt-6", children: n })
+      ] }) : /* @__PURE__ */ e("p", { className: "py-12 text-center typo-body-md text-[var(--Text-Low-Emphasis)]", children: r }) })
     }
   );
 }
-function fe({
-  className: r,
+function ge({
+  className: t,
   src: a,
-  alt: t,
-  title: o,
-  caption: l,
-  ...i
+  alt: r,
+  title: l,
+  caption: o,
+  ...n
 }) {
-  return /* @__PURE__ */ e(m, { className: n("min-w-[200px]", r), ...i, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ e("div", { className: "size-10 rounded-lg bg-[var(--Surface-Tertiary)] overflow-hidden shrink-0", children: a && /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(m, { className: i("min-w-[200px]", t), ...n, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "size-10 rounded-lg bg-[var(--Surface-Neutral-Tertiary)] overflow-hidden shrink-0", children: a && /* @__PURE__ */ e(
       "img",
       {
         src: a,
-        alt: t || o,
+        alt: r || l,
         className: "size-full object-cover",
         loading: "lazy"
       }
     ) }),
     /* @__PURE__ */ s("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ e("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)] line-clamp-2", children: o }),
-      l && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: l })
+      /* @__PURE__ */ e("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)] line-clamp-2", children: l }),
+      o && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: o })
     ] })
   ] }) });
 }
-function xe({
-  className: r,
+function ve({
+  className: t,
   ...a
 }) {
   return /* @__PURE__ */ e(
     "td",
     {
       "data-slot": "data-table-drag-handle-cell",
-      className: n("w-10 px-2 py-4 align-middle cursor-grab active:cursor-grabbing", r),
+      className: i("w-10 px-2 py-4 align-middle cursor-grab active:cursor-grabbing", t),
       ...a,
       children: /* @__PURE__ */ s(
         "svg",
@@ -419,118 +454,118 @@ function xe({
     }
   );
 }
-function ve({
-  className: r,
+function we({
+  className: t,
   href: a = "#",
-  external: t,
-  linkComponent: o,
-  children: l,
-  ...i
+  external: r,
+  linkComponent: l,
+  children: o,
+  ...n
 }) {
-  return /* @__PURE__ */ e(m, { className: r, ...i, children: /* @__PURE__ */ s(
-    t ? "a" : o ?? "a",
+  return /* @__PURE__ */ e(m, { className: t, ...n, children: /* @__PURE__ */ s(
+    r ? "a" : l ?? "a",
     {
       href: a,
       className: "inline-flex items-center gap-1 typo-body-md text-[var(--Text-Accent-Primary)] hover:underline",
-      ...t ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      ...r ? { target: "_blank", rel: "noopener noreferrer" } : {},
       children: [
-        l,
-        t && /* @__PURE__ */ e(N, { size: 14 })
+        o,
+        r && /* @__PURE__ */ e(T, { size: 14 })
       ]
     }
   ) });
 }
-function ge({
-  className: r,
+function ye({
+  className: t,
   value: a,
-  onChange: t,
-  placeholder: o,
-  type: l = "text",
-  name: i,
+  onChange: r,
+  placeholder: l,
+  type: o = "text",
+  name: n,
   ...c
 }) {
   return /* @__PURE__ */ e(
     "td",
     {
       "data-slot": "data-table-input-cell",
-      className: n(
+      className: i(
         "px-4 py-4 align-middle whitespace-nowrap",
         "hover:shadow-[inset_0_0_0_2px_var(--Border-Accent-Primary)] hover:rounded",
         "has-[input:focus]:shadow-[inset_0_0_0_2px_var(--Border-Accent-Primary)] has-[input:focus]:rounded",
         // forced-colors では影が描かれず、input は outline-none なので、セル全体に内側の輪郭線を出す
         "forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-2 forced-colors:has-[input:focus]:-outline-offset-2 forced-colors:has-[input:focus]:outline-[Highlight]",
-        r
+        t
       ),
       ...c,
       children: /* @__PURE__ */ e(
         "input",
         {
-          type: l,
-          name: i,
+          type: o,
+          name: n,
           value: a,
-          onChange: (d) => t?.(d.target.value),
-          placeholder: o,
+          onChange: (d) => r?.(d.target.value),
+          placeholder: l,
           className: "w-full bg-transparent outline-none typo-body-md text-[var(--Text-High-Emphasis)] placeholder:text-[var(--Text-Low-Emphasis)]"
         }
       )
     }
   );
 }
-function we({
-  className: r,
+function Ne({
+  className: t,
   value: a,
-  onValueChange: t,
-  options: o,
-  placeholder: l = "選択してください",
-  "aria-label": i,
+  onValueChange: r,
+  options: l,
+  placeholder: o = "選択してください",
+  "aria-label": n,
   ...c
 }) {
   return /* @__PURE__ */ e(
     m,
     {
-      className: n("hover:bg-[var(--Surface-Tertiary)] cursor-pointer p-0", r),
+      className: i("hover:bg-[var(--Surface-Neutral-Tertiary)] cursor-pointer p-0", t),
       ...c,
-      children: /* @__PURE__ */ s(A, { value: a, onValueChange: t, children: [
+      children: /* @__PURE__ */ s(L, { value: a, onValueChange: r, children: [
         /* @__PURE__ */ e(
-          L,
+          _,
           {
             size: "sm",
-            "aria-label": i ?? l,
+            "aria-label": n ?? o,
             className: "w-full min-w-[160px] border-0 bg-transparent rounded-none px-4 py-4 h-auto hover:bg-transparent focus-visible:ring-0 focus-visible:border-0",
-            children: /* @__PURE__ */ e(_, { placeholder: l })
+            children: /* @__PURE__ */ e(B, { placeholder: o })
           }
         ),
-        /* @__PURE__ */ e(B, { children: o.map((d) => /* @__PURE__ */ e(H, { value: d.value, children: d.label }, d.value)) })
+        /* @__PURE__ */ e(H, { children: l.map((d) => /* @__PURE__ */ e(z, { value: d.value, children: d.label }, d.value)) })
       ] })
     }
   );
 }
-function ye({
-  className: r,
+function Te({
+  className: t,
   children: a,
-  ...t
+  ...r
 }) {
-  return /* @__PURE__ */ e(m, { align: "right", className: r, ...t, children: a });
+  return /* @__PURE__ */ e(m, { align: "right", className: t, ...r, children: a });
 }
 export {
-  te as DataTable,
-  me as DataTableActionCell,
-  ue as DataTableAddRow,
-  ce as DataTableAvatarCell,
-  ie as DataTableBody,
-  pe as DataTableBulkActions,
+  oe as DataTable,
+  pe as DataTableActionCell,
+  fe as DataTableAddRow,
+  me as DataTableAvatarCell,
+  se as DataTableBody,
+  he as DataTableBulkActions,
   m as DataTableCell,
-  de as DataTableCheckboxCell,
-  xe as DataTableDragHandleCell,
-  be as DataTableEmptyState,
-  se as DataTableHead,
-  oe as DataTableHeader,
-  fe as DataTableImageCell,
-  ge as DataTableInputCell,
-  ve as DataTableLinkCell,
-  ye as DataTableNumberCell,
-  ne as DataTableRow,
-  he as DataTableSectionRow,
-  we as DataTableSelectCell,
-  le as DataTableTable
+  ue as DataTableCheckboxCell,
+  ve as DataTableDragHandleCell,
+  xe as DataTableEmptyState,
+  de as DataTableHead,
+  ie as DataTableHeader,
+  ge as DataTableImageCell,
+  ye as DataTableInputCell,
+  we as DataTableLinkCell,
+  Te as DataTableNumberCell,
+  ce as DataTableRow,
+  be as DataTableSectionRow,
+  Ne as DataTableSelectCell,
+  ne as DataTableTable
 };