@serendie/ui 2.0.0 → 2.1.0

package/dist/components/CheckBox/CheckBox.js

@@ -1,16 +1,17 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { css as x } from "../../styled-system/css/css.js";
-import { cx as t } from "../../styled-system/css/cx.js";
+import { cx as c } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
 import { sva as u } from "../../styled-system/css/sva.js";
 import k from "../../assets/checkboxChecked.svg.js";
 import b from "../../assets/checkboxUnchecked.svg.js";
-import { CheckboxRoot as g } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-import { CheckboxContext as f } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
-import { CheckboxControl as C } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
-import { CheckboxLabel as c } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
-import { CheckboxHiddenInput as S } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
-const I = {
+import g from "../../assets/checkboxIndeterminate.svg.js";
+import { CheckboxRoot as f } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as C } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as S } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxLabel as i } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
+import { CheckboxHiddenInput as I } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const _ = {
   flexShrink: 0,
   cursor: "pointer",
   ".group:has(:focus-visible) &": {
@@ -30,21 +31,21 @@ const I = {
       }
     }
   }
-}, _ = {
+}, v = {
   width: 24,
   height: 24,
   color: "sd.system.color.impression.primary",
   "& .checkmark": {
     color: "sd.system.color.impression.onPrimaryContainer"
   }
-}, v = {
+}, N = {
   width: 24,
   height: 24,
   color: "sd.system.color.component.outline",
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, i = u({
+}, n = u({
   slots: [
     "root",
     "itemControl",
@@ -63,9 +64,9 @@ const I = {
       paddingX: "sd.system.dimension.spacing.medium",
       cursor: "pointer"
     },
-    itemControl: I,
-    checkedIcon: _,
-    uncheckedIcon: v,
+    itemControl: _,
+    checkedIcon: v,
+    uncheckedIcon: N,
     itemTextGroup: {
       display: "flex",
       flexFlow: "column"
@@ -92,38 +93,38 @@ const I = {
       }
     }
   }
-}), F = ({
-  value: n,
-  label: m,
+}), L = ({
+  value: m,
+  label: l,
   helperText: s,
-  className: l,
-  ...d
+  className: d,
+  ...a
 }) => {
-  const [a, p] = i.splitVariantProps(d), o = i(a), y = t(
+  const [p, y] = n.splitVariantProps(a), o = n(p), h = c(
     o.root,
     s && x({ alignItems: "flex-start" })
   );
-  return /* @__PURE__ */ r(
-    g,
+  return /* @__PURE__ */ t(
+    f,
     {
-      value: n,
-      className: t("group", y, l),
-      ...p,
+      value: m,
+      className: c("group", h, d),
+      ...y,
       children: [
-        /* @__PURE__ */ e(f, { children: (h) => /* @__PURE__ */ e(C, { className: o.itemControl, children: h.checked ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : /* @__PURE__ */ e(b, { className: o.uncheckedIcon }) }) }),
-        /* @__PURE__ */ r("div", { className: o.itemTextGroup, children: [
-          /* @__PURE__ */ e(c, { className: o.itemText, children: m }),
-          s && /* @__PURE__ */ e(c, { className: o.helperText, children: s })
+        /* @__PURE__ */ e(C, { children: (r) => /* @__PURE__ */ e(S, { className: o.itemControl, children: r.checked === !0 ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : r.indeterminate === !0 ? /* @__PURE__ */ e(g, { className: o.checkedIcon }) : /* @__PURE__ */ e(b, { className: o.uncheckedIcon }) }) }),
+        /* @__PURE__ */ t("div", { className: o.itemTextGroup, children: [
+          /* @__PURE__ */ e(i, { className: o.itemText, children: l }),
+          s && /* @__PURE__ */ e(i, { className: o.helperText, children: s })
         ] }),
-        /* @__PURE__ */ e(S, {})
+        /* @__PURE__ */ e(I, {})
       ]
     }
   );
 };
 export {
-  F as CheckBox,
-  i as CheckBoxStyle,
-  _ as checkboxCheckedIconCss,
-  I as checkboxIconCss,
-  v as checkboxUncheckedIconCss
+  L as CheckBox,
+  n as CheckBoxStyle,
+  v as checkboxCheckedIconCss,
+  _ as checkboxIconCss,
+  N as checkboxUncheckedIconCss
 };

package/dist/components/ChoiceBox/ChoiceBox.js

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

package/dist/components/DataTable/DataTableComponent.d.ts

@@ -1,23 +1,6 @@
-import { ColumnDef, SortingState } from '@tanstack/react-table';
-/**
- * TanStack Tableは設計上、各カラムが異なる値の型を持つことを前提としています。
- * createColumnHelperは各カラムに正確な型（string, number等）を付与しますが、
- * これらを単一の配列にまとめる際、TypeScriptの型システムの制約により問題が生じます。
- *
- * TanStack Table自体も内部実装で`ColumnDef<TData, any>[]`を使用しており、
- * これは意図的な設計判断です。これに従い、型エイリアスで意図を明確にします。
- * https://github.com/TanStack/table/blob/0cc6992c7836489661a0954a2b56e620850ad4da/packages/table-core/src/types.ts#L288C1-L289C1
- */
-type TableColumnDef<TData> = ColumnDef<TData, any>;
-export interface DataTableComponentProps<TData = Record<string, unknown>> {
-    data: TData[];
-    columns: TableColumnDef<TData>[];
-    enableRowSelection?: boolean;
-    enableSorting?: boolean;
-    initialSorting?: SortingState;
-    onRowSelectionChange?: (selection: Record<string, boolean>) => void;
-    onSortingChange?: (sorting: SortingState) => void;
+import { TableOptions } from '@tanstack/react-table';
+export interface DataTableComponentProps<TData = Record<string, unknown>> extends Omit<TableOptions<TData>, "getCoreRowModel" | "getSortedRowModel"> {
     className?: string;
 }
-export declare function DataTableComponent<TData = Record<string, unknown>>({ data, columns, enableRowSelection, enableSorting, initialSorting, onSortingChange, className, }: DataTableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableComponent<TData = Record<string, unknown>>({ className, enableRowSelection, onRowSelectionChange, onSortingChange, state, ...tableOptions }: DataTableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default DataTableComponent;

package/dist/components/DataTable/DataTableComponent.js

@@ -1,52 +1,54 @@
-import { jsxs as M, jsx as e } from "react/jsx-runtime";
-import { useState as a } from "react";
+import { jsxs as M, jsx as l } from "react/jsx-runtime";
 import { useReactTable as T } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { DataTable as t } from "./index.js";
-import { getSortedRowModel as S, getCoreRowModel as b } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
-function D({
-  data: l = [],
-  columns: m = [],
-  enableRowSelection: r = !0,
-  enableSorting: c = !0,
-  initialSorting: f = [],
-  onSortingChange: s,
-  className: w
+import { useState as w } from "react";
+import { DataTable as r } from "./index.js";
+import { getSortedRowModel as u, getCoreRowModel as S } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+function g({
+  className: s,
+  enableRowSelection: m = !0,
+  onRowSelectionChange: t,
+  onSortingChange: d,
+  state: e,
+  ...f
 }) {
-  const [R, p] = a({}), [i, g] = a(f), u = (o) => {
-    const n = typeof o == "function" ? o(i) : o;
-    g(n), s == null || s(n);
-  }, d = T({
-    data: l,
-    columns: m,
-    getCoreRowModel: b(),
-    getSortedRowModel: S(),
-    state: { rowSelection: R, sorting: i },
-    onRowSelectionChange: p,
-    onSortingChange: u,
-    enableRowSelection: r,
-    enableSorting: c
-  });
-  return /* @__PURE__ */ M(t.Root, { className: w, children: [
-    /* @__PURE__ */ e(t.Thead, { children: d.getHeaderGroups().map((o) => /* @__PURE__ */ e(
-      t.HeaderRow,
+  const [R, b] = w({}), [p, n] = w([]), i = T({
+    getCoreRowModel: S(),
+    getSortedRowModel: u(),
+    enableRowSelection: m,
+    ...f,
+    state: {
+      rowSelection: (e == null ? void 0 : e.rowSelection) ?? R,
+      sorting: (e == null ? void 0 : e.sorting) ?? p,
+      ...e
+    },
+    onRowSelectionChange: (o) => {
+      b(o), t == null || t(o);
+    },
+    onSortingChange: (o) => {
+      n(o), d == null || d(o);
+    }
+  }), c = m !== !1;
+  return /* @__PURE__ */ M(r.Root, { className: s, children: [
+    /* @__PURE__ */ l(r.Thead, { children: i.getHeaderGroups().map((o) => /* @__PURE__ */ l(
+      r.HeaderRow,
       {
         headerGroup: o,
-        enableRowSelection: r,
-        table: d
+        enableRowSelection: c,
+        table: i
       },
       o.id
     )) }),
-    /* @__PURE__ */ e(t.Tbody, { children: d.getRowModel().rows.map((o) => /* @__PURE__ */ e(
-      t.Row,
+    /* @__PURE__ */ l(r.Tbody, { children: i.getRowModel().rows.map((o) => /* @__PURE__ */ l(
+      r.Row,
       {
         row: o,
-        enableRowSelection: r
+        enableRowSelection: c
       },
       o.id
     )) })
   ] });
 }
 export {
-  D as DataTableComponent,
-  D as default
+  g as DataTableComponent,
+  g as default
 };

package/dist/components/DataTable/table/HeaderCheckbox.js

@@ -1,26 +1,36 @@
 import { jsx as e } from "react/jsx-runtime";
-import { ChoiceBox as m } from "../../ChoiceBox/ChoiceBox.js";
-import { DataTable as t } from "../index.js";
-import { css as i } from "../../../styled-system/css/css.js";
-import { cx as c } from "../../../styled-system/css/cx.js";
+import { ChoiceBox as i } from "../../ChoiceBox/ChoiceBox.js";
+import { DataTable as a } from "../index.js";
+import { css as r } from "../../../styled-system/css/css.js";
+import { cx as o } from "../../../styled-system/css/cx.js";
 import "../../../styled-system/helpers.js";
-const d = ({
-  className: r,
-  ...o
-}) => /* @__PURE__ */ e(t.HeaderCell, { children: /* @__PURE__ */ e(
-  m,
+const x = ({
+  className: t,
+  ...m
+}) => /* @__PURE__ */ e(
+  a.HeaderCell,
   {
-    ...o,
-    type: "checkbox",
-    className: c(
-      i({
-        alignItems: "center",
-        verticalAlign: "middle"
-      }),
-      r
+    className: o(
+      r({
+        width: "sd.system.dimension.spacing.twoExtraLarge"
+      })
+    ),
+    children: /* @__PURE__ */ e(
+      i,
+      {
+        ...m,
+        type: "checkbox",
+        className: o(
+          r({
+            alignItems: "center",
+            verticalAlign: "middle"
+          }),
+          t
+        )
+      }
     )
   }
-) });
+);
 export {
-  d as HeaderCheckbox
+  x as HeaderCheckbox
 };

package/dist/components/Search/Search.d.ts

@@ -46,6 +46,8 @@ export declare const SearchStyle: import('../../../styled-system/types').SlotRec
         };
     };
 }>;
-type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle>;
+type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle> & {
+    items?: string[];
+};
 export declare const Search: React.FC<SearchStyleProps>;
 export {};

package/dist/components/Search/Search.js

@@ -1,23 +1,24 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { SerendieSymbolMagnifyingGlass as l, SerendieSymbolClose as c } from "@serendie/symbols";
+import { SerendieSymbolMagnifyingGlass as p, SerendieSymbolClose as g } from "@serendie/symbols";
 import "../../styled-system/css/css.js";
-import { cx as p } from "../../styled-system/css/cx.js";
+import { cx as y } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
-import { sva as g } from "../../styled-system/css/sva.js";
+import { sva as x } from "../../styled-system/css/sva.js";
 import "react";
 import "../../styled-system/jsx/is-valid-prop.js";
-import { Box as y } from "../../styled-system/jsx/box.js";
-import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { ComboboxRoot as b } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
-import { ComboboxControl as u } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
-import { ComboboxInput as h } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
-import { ComboboxTrigger as f } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
-import { ComboboxPositioner as S } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
-import { ComboboxContent as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
-import { ComboboxItemGroup as C } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
-import { ComboboxItem as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
-import { ComboboxItemText as v } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
-const m = g({
+import { Box as b } from "../../styled-system/jsx/box.js";
+import { createListCollection as u } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
+import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { ComboboxRoot as f } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
+import { ComboboxControl as S } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
+import { ComboboxInput as C } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
+import { ComboboxTrigger as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
+import { ComboboxPositioner as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
+import { ComboboxContent as v } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
+import { ComboboxItemGroup as B } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
+import { ComboboxItem as N } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
+import { ComboboxItemText as _ } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
+const d = x({
   slots: [
     "input",
     "control",
@@ -146,15 +147,16 @@ const m = g({
   defaultVariants: {
     size: "medium"
   }
-}), D = ({
+}), U = ({
   items: i = [],
-  ...d
+  ...a
 }) => {
-  const [a, t] = m.splitVariantProps(d), s = m(a);
+  const [r, l] = d.splitVariantProps(a), s = d(r), { collection: E, ...t } = l, n = u({ items: i });
   return /* @__PURE__ */ e(
-    b,
+    f,
     {
-      items: i,
+      ...t,
+      collection: n,
       lazyMount: !0,
       unmountOnExit: !0,
       positioning: {
@@ -163,36 +165,35 @@ const m = g({
           crossAxis: 0
         }
       },
-      ...t,
       children: [
-        /* @__PURE__ */ e(u, { className: p(s.control, t.className), children: [
-          /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(l, { className: s.icon }) }),
-          /* @__PURE__ */ o(h, { className: s.input }),
-          i.length > 0 && /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(c, { className: s.icon }) }) })
+        /* @__PURE__ */ e(S, { className: y(s.control, t.className), children: [
+          /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(p, { className: s.icon }) }),
+          /* @__PURE__ */ o(C, { className: s.input }),
+          i.length > 0 && /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(g, { className: s.icon }) }) })
         ] }),
-        i.length > 0 && /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(w, { className: s.combobox, children: /* @__PURE__ */ o(C, { id: "framework", children: i.map((n, r) => /* @__PURE__ */ e(
-          I,
+        i.length > 0 && /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(v, { className: s.combobox, children: /* @__PURE__ */ o(B, { id: "framework", children: n.items.map((m, c) => /* @__PURE__ */ e(
+          N,
           {
-            item: n,
+            item: m,
             className: s.comboboxItem,
             children: [
               /* @__PURE__ */ o(
-                y,
+                b,
                 {
                   w: "sd.system.dimension.spacing.large",
                   h: "sd.system.dimension.spacing.large"
                 }
               ),
-              /* @__PURE__ */ o(v, { children: n })
+              /* @__PURE__ */ o(_, { children: m })
             ]
           },
-          r
+          c
         )) }) }) }) })
       ]
     }
   );
 };
 export {
-  D as Search,
-  m as SearchStyle
+  U as Search,
+  d as SearchStyle
 };

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { SelectRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "iconBox" | "valueText" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {
@@ -55,6 +55,7 @@ type Props = {
     label?: string;
     required?: boolean;
     invalidMessage?: string;
+    items?: selectItem[];
 };
 type selectItem = {
     label: string;