@serendie/ui 0.1.16 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2025 Mitsubishi Electric Corporation, supported by Takram Japan Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,24 @@
-# Serendie UI
+<h1 align='center'>
+  <picture>
+    <source srcset='https://github.com/user-attachments/assets/afa39feb-f100-43f4-9f08-d11c81208dc8' media="(prefers-color-scheme: dark)" width='400px'/>
+    <img src='https://github.com/user-attachments/assets/a6e4b78e-a50c-4c6b-b04a-bb159a826b65' alt="Serendie Design System" title="Serendie Design System" width='400px'/>
+  </picture>
+</h1>
 
+<div align="center">
 
 [![GitHub](https://img.shields.io/github/license/serendie/serendie?style=flat)](https://github.com/serendie/serendie/blob/main/LICENSE)
 [![NPM Version](https://img.shields.io/npm/v/%40serendie%2Fui)](https://www.npmjs.com/package/@serendie/ui)
 [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://storybook.serendie.design/)
+[![X](https://img.shields.io/twitter/follow/SerendieDesign)](https://x.com/SerendieDesign/)
+
+</div>
+<br/>
+
+[Serendie Design System](https://serendie.design/)は、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。<br/>
+[デザイントークン](https://github.com/serendie/design-token)や[Serendie Symbols](https://github.com/serendie/serendie-symbols)など複数のリポジトリから構成され、本リポジトリはSerendie UIを扱います。
+
+# Serendie UI
 
 [Serendie UI Kit (Figma)](https://www.figma.com/community/file/1433690846108785966)と対となるReactベースのUIコンポーネント集です。Figma Code Connectにも対応しており、Storybookと同等の内容が[Figma Devモードでも確認](https://serendie.design/get-started/dev/#section-1)できます。
 
@@ -11,7 +26,7 @@
 
 ### インストール
 
-デザイントークンも同梱されるので同時インストールは不要です。
+[デザイントークン](https://github.com/serendie/design-token)も同梱されます。
 
 ```
 npm install @serendie/ui
@@ -19,7 +34,7 @@ npm install @serendie/ui
 
 ### プロジェクトへの導入
 
-rootのCSSに対して、次の2行を設定してください。1行目は、Serendie UIに対して、スタイルを適切に当てるためにカスケードレイヤーの指定をするもの、2行目は同梱のデザイントークンやデフォルトスタイルを読み込むものです。
+rootのCSSに対して下記を指定してください。1行目は、Serendie UIに対して、スタイルを適切に当てるためにカスケードレイヤーの指定をするもの、2行目は同梱のデザイントークンやデフォルトスタイルを読み込むものです。
 
 ```css
 @layer reset, base, tokens, recipes, utilities;
@@ -28,12 +43,12 @@ rootのCSSに対して、次の2行を設定してください。1行目は、Se
 
 ### コンポーネントを使う
 
-使いたいComponentをimportしたうえで、通常のReact Componentとして使用してください。各Componentが持つpropsについては、[ドキュメント](https://serendie.design/components/button/)や、[Storybook](https://storybook.serendie.design/?path=/story/components-button--medium)、Figma Code Connectを参照してください。
+各Componentのpropsについては、[ドキュメント](https://serendie.design/components/button/)や、[Storybook](https://storybook.serendie.design/?path=/story/components-button--medium)、Figma Code Connectを参照してください。
 
 ```js
 import { Button } from "@serendie/ui";
 
-<Button size="medium">Login</Button>
+<Button size="medium">Login</Button>;
 ```
 
 ### テーマ切り替え
@@ -47,7 +62,7 @@ Serendie Design Systemには5つのカラーテーマがあり、デザイント
 
 ## スタイリングライブラリと併用する
 
-あるコンポーネントのmarginを微修正したいなど、Serendie UIのスタイルをカスタムしたいシーンでは、プロジェクト側にスタイリングライブラリ(CSS-in-JSなど)を導入してください。どのスタイリングライブラリでも併用は可能ですが、ここではSerendie UIの内部でも使用している[Panda CSS](https://panda-css.com/)の例を紹介します。
+マージンを微修正したいなど、Serendie UIのスタイルをカスタムしたいシーンでは、プロジェクト側にスタイリングライブラリ(CSS-in-JSなど)を導入してください。どのスタイリングライブラリでも併用は可能ですが、ここではSerendie UIの内部でも使用している[Panda CSS](https://panda-css.com/)の例を紹介します。
 
 ### SerendiePresetの追加
 
@@ -68,16 +83,16 @@ export default defineConfig({
 
 Serendie UIはヘッドレスUIとして、[Ark UI](https://ark-ui.com/)を内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIの[APIリファレンス](https://ark-ui.com/react/docs/components/select#api-reference)を合わせて参照してください。
 
-## 開発
+## Serendie UIの開発
 
 Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。
 
 ```
-npm run dev # run storybook
+npm run dev
 npm run build
 ```
 
-## Figma Code Connect
+### Figma Code Connect
 
 Serendie UIでは、Figma Code ConnectをStorybookと繋ぎこむ形で導入しています。下記のコマンドで各コンポーネント毎のstoriesファイルの内容を、Figmaにpublishします。
 
@@ -86,3 +101,30 @@ npm run connect:publish
 ```
 
 storiesファイルに変更が入ると上記が[GitHub Actions](https://github.com/serendie/serendie/blob/main/.github/workflows/publish-code-connect.yml)によって実行されます。
+
+## Resources
+
+Serendie Design Systemは、Serendie UI (本リポジトリ) のほか以下の関連リポジトリから構成されています。
+
+| Package name                          | Location                                                                                     | Description                                                                                                                                               |
+| ------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@serendie/design-token`              | [serendie/design-token](https://github.com/serendie/design-token)                            | [W3C Design Token Format Module](https://serendie.design/foundations/design-tokens/#section-6)の仕様で定義されたSerendie UIのベースとなるデザイントークン |
+| `@serendie/symbols`                   | [serendie/symbols](https://github.com/serendie/serendie-symbols)                             | Serendieらしい300種類以上のSVGアイコン集                                                                                                                  |
+| `@serendie/figma-utils`               | [serendie/figma-utils](https://github.com/serendie/figma-utils)                              | Figma REST APIを用いて、`@serendie/design-token`とFigma Variablesの同期を行うためのユーティリティー集                                                     |
+| `@serendie/style-dictonary-formatter` | [serendie/style-dictonary-formatter](https://github.com/serendie/style-dictionary-formatter) | デザイントークンを各プラットフォームに展開するための[amzn/style-dictonary](https://github.com/amzn/style-dictionary)のフォーマッタ                        |
+
+### Examples
+
+主要パッケージの導入サンプルとして、[serendie/bootcamp](https://github.com/serendie/bootcamp)を用意しています。また三菱電機内ではハンズオン形式で使い方を紹介するブートキャンプを開催しています。
+
+### サブブランド対応
+
+Serendie Design Systemは[三菱電機の有する多様な事業に適応](https://serendie.design/about/#section-3)することがコンセプトの一つです。
+
+`@serendie/desigon-token`および`@serendie/ui`は、デフォルトでSerendieのVisual Identity (VI)を継承しますが、各事業ブランドのVIに合わせてテーミングできるよう社内向けに[serendie/subbrands-template](https://github.com/serendie/subbrands-template)を整備しています。
+
+詳しくはSerendie Design Systemチームまでお問い合わせください。
+
+## License
+
+各パッケージはMITライセンスの下で配布されています。 詳しくは[LICENSE](/LICENSE)を参照してください。

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

@@ -1,6 +1,6 @@
 import { AccordionItemProps } from '@ark-ui/react';
-import { RecipeVariantProps } from '../../styled-system/types';
-declare const AccordionStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
+import { RecipeVariantProps } from '../../../styled-system/types';
+declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
     isLeftIcon: {
         true: {
             item: {

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

@@ -1,13 +1,13 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import "../ui/styled-system/helpers.js";
-import { sva as c } from "../ui/styled-system/css/sva.js";
-import { SerendieSymbol as p } from "../node_modules/@serendie/symbols/dist/symbols2.js";
-import { AccordionItem as l } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item.js";
-import { AccordionItemTrigger as y } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-trigger.js";
-import { AccordionItemIndicator as g } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-indicator.js";
-import { AccordionItemContent as f } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-content.js";
-const i = c({
+import { SerendieSymbol as c } from "../../node_modules/@serendie/symbols/dist/symbols2.js";
+import "../../styled-system/css/css.js";
+import "../../styled-system/helpers.js";
+import { sva as p } from "../../styled-system/css/sva.js";
+import { AccordionItem as l } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item.js";
+import { AccordionItemTrigger as y } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-trigger.js";
+import { AccordionItemIndicator as g } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-indicator.js";
+import { AccordionItemContent as f } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-content.js";
+const i = p({
   slots: ["item", "title", "itemIndicator", "icon", "description"],
   base: {
     item: {
@@ -76,7 +76,7 @@ const i = c({
     /* @__PURE__ */ s(y, { className: e.item, children: [
       /* @__PURE__ */ o("span", { className: e.title, children: t }),
       /* @__PURE__ */ o(g, { className: e.itemIndicator, children: /* @__PURE__ */ o(
-        p,
+        c,
         {
           name: "chevron-down",
           className: e.icon,

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

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

package/dist/components/Accordion/index.js

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

package/dist/components/AccordionGroup.js

@@ -1,8 +1,8 @@
-import { styled as o } from "../ui/styled-system/jsx/factory.js";
-import "../ui/styled-system/jsx/is-valid-prop.js";
+import { styled as o } from "../styled-system/jsx/factory.js";
+import "../styled-system/jsx/is-valid-prop.js";
 import "react";
-import "../ui/styled-system/helpers.js";
-import "../ui/styled-system/css/css.js";
+import "../styled-system/helpers.js";
+import "../styled-system/css/css.js";
 import { AccordionRoot as r } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-root.js";
 const l = o(r, {
   base: {

package/dist/components/Avatar.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as f } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as g } from "../ui/styled-system/css/sva.js";
+import "../styled-system/css/css.js";
+import { cx as f } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as g } from "../styled-system/css/sva.js";
 import { SerendieSymbol as C } from "../node_modules/@serendie/symbols/dist/symbols2.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";

package/dist/components/Badge.js

@@ -1,8 +1,8 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as i } from "../ui/styled-system/css/cx.js";
-import { cva as l } from "../ui/styled-system/css/cva.js";
-import "../ui/styled-system/helpers.js";
+import "../styled-system/css/css.js";
+import { cx as i } from "../styled-system/css/cx.js";
+import { cva as l } from "../styled-system/css/cva.js";
+import "../styled-system/helpers.js";
 import { SerendieSymbol as p } from "../node_modules/@serendie/symbols/dist/symbols2.js";
 const o = l({
   base: {

package/dist/components/Banner.js

@@ -1,8 +1,8 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as p } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as y } from "../ui/styled-system/css/sva.js";
+import "../styled-system/css/css.js";
+import { cx as p } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as y } from "../styled-system/css/sva.js";
 import { SerendieSymbol as b } from "../node_modules/@serendie/symbols/dist/symbols2.js";
 const t = y({
   slots: ["container", "icon", "title", "description"],

package/dist/components/BottomNavigation.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { css as r } from "../ui/styled-system/css/css.js";
-import { cx as i } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
+import { css as r } from "../styled-system/css/css.js";
+import { cx as i } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
 const d = ({
   children: o,
   className: t,

package/dist/components/BottomNavigationItem.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as p } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as d } from "../ui/styled-system/css/sva.js";
+import "../styled-system/css/css.js";
+import { cx as p } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as d } from "../styled-system/css/sva.js";
 import { NotificationBadge as y } from "./NotificationBadge.js";
 const i = d({
   slots: ["root", "iconGroup", "icon", "label", "badge"],

package/dist/components/Button.js

@@ -1,13 +1,13 @@
 import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import b from "react";
-import { css as f } from "../ui/styled-system/css/css.js";
-import { cx as h } from "../ui/styled-system/css/cx.js";
-import { cva as x } from "../ui/styled-system/css/cva.js";
-import "../ui/styled-system/helpers.js";
-import { styled as _ } from "../ui/styled-system/jsx/factory.js";
-import "../ui/styled-system/jsx/is-valid-prop.js";
+import { css as f } from "../styled-system/css/css.js";
+import { cx as h } from "../styled-system/css/cx.js";
+import { cva as x } from "../styled-system/css/cva.js";
+import "../styled-system/helpers.js";
+import { styled as _ } from "../styled-system/jsx/factory.js";
+import "../styled-system/jsx/is-valid-prop.js";
 import "../preset.js";
-import "./Accordion.js";
+import "./Accordion/Accordion.js";
 import "./AccordionGroup.js";
 import "./Avatar.js";
 import "./Badge.js";

package/dist/components/CheckBox.js

@@ -1,8 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { css as x } from "../ui/styled-system/css/css.js";
-import { cx as t } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as u } from "../ui/styled-system/css/sva.js";
+import { css as x } from "../styled-system/css/css.js";
+import { cx as t } 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";

package/dist/components/ChoiceBox.js

@@ -1,14 +1,14 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { checkboxIconCss as a, checkboxCheckedIconCss as p, checkboxUncheckedIconCss as I } from "./CheckBox.js";
-import { radioIconCss as C, radioCheckedIconCss as x, radioUncheckedIconCss as l } from "./RadioButton.js";
+import { checkboxUncheckedIconCss as a, checkboxCheckedIconCss as p, checkboxIconCss as I } from "./CheckBox.js";
+import { radioUncheckedIconCss as C, radioCheckedIconCss as x, radioIconCss as l } from "./RadioButton.js";
 import b from "../assets/radioChecked.svg.js";
 import f from "../assets/radioUnchecked.svg.js";
 import u from "../assets/checkboxChecked.svg.js";
 import U from "../assets/checkboxUnchecked.svg.js";
-import "../ui/styled-system/css/css.js";
-import { cx as n } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as N } from "../ui/styled-system/css/sva.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 N } from "../styled-system/css/sva.js";
 import { RadioGroupItem as R } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
 import { RadioGroupItemContext as g } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
 import { RadioGroupItemControl as v } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
@@ -31,12 +31,12 @@ const h = N({
     root: {
       display: "flex"
     },
-    radioItem: C,
+    radioItem: l,
     radioCheckedIcon: x,
-    radioUncheckedIcon: l,
-    checkboxItem: a,
+    radioUncheckedIcon: C,
+    checkboxItem: I,
     checkboxCheckedIcon: p,
-    checkboxUncheckedIcon: I
+    checkboxUncheckedIcon: a
   }
 }), Y = ({
   type: r,

package/dist/components/DashboardWidget.js

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

package/dist/components/Divider.js

@@ -1,8 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as n } from "../ui/styled-system/css/cx.js";
-import { cva as a } from "../ui/styled-system/css/cva.js";
-import "../ui/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/Drawer.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as s } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as p } from "../ui/styled-system/css/sva.js";
+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";

package/dist/components/DropdownMenu.js

@@ -1,13 +1,13 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import "../preset.js";
-import "./Accordion.js";
+import "./Accordion/Accordion.js";
 import "./AccordionGroup.js";
 import "./Avatar.js";
 import "./Badge.js";
 import "./Banner.js";
-import "../ui/styled-system/css/css.js";
-import "../ui/styled-system/helpers.js";
-import { sva as c } from "../ui/styled-system/css/sva.js";
+import "../styled-system/css/css.js";
+import "../styled-system/helpers.js";
+import { sva as c } from "../styled-system/css/sva.js";
 import "./BottomNavigationItem.js";
 import { Button as l } from "./Button.js";
 import "./CheckBox.js";

package/dist/components/IconButton.js

@@ -1,9 +1,9 @@
 import { jsx as d } from "react/jsx-runtime";
 import a from "react";
-import "../ui/styled-system/css/css.js";
-import { cx as c } from "../ui/styled-system/css/cx.js";
-import { cva as m } from "../ui/styled-system/css/cva.js";
-import "../ui/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/ListItem.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { css as c } from "../ui/styled-system/css/css.js";
-import { cx as o } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as b } from "../ui/styled-system/css/sva.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.js";
 const p = b({
   slots: [

package/dist/components/ModalDialog.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as c } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as g } from "../ui/styled-system/css/sva.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.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";

package/dist/components/NotificationBadge.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as a } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as l } from "../ui/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/ProgressIndicator.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as n } from "../ui/styled-system/css/cx.js";
-import { cva as l } from "../ui/styled-system/css/cva.js";
-import "../ui/styled-system/helpers.js";
+import "../styled-system/css/css.js";
+import { cx as n } from "../styled-system/css/cx.js";
+import { cva as l } from "../styled-system/css/cva.js";
+import "../styled-system/helpers.js";
 const r = l({
   base: {
     animation: "1s linear infinite spin",

package/dist/components/RadioButton.js

@@ -1,8 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { css as x } from "../ui/styled-system/css/css.js";
-import { cx as i } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as h } from "../ui/styled-system/css/sva.js";
+import { css as x } from "../styled-system/css/css.js";
+import { cx as i } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as h } from "../styled-system/css/sva.js";
 import f from "../assets/radioChecked.svg.js";
 import g from "../assets/radioUnchecked.svg.js";
 import { RadioGroupItem as I } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";

package/dist/components/Search.js

@@ -1,11 +1,11 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as c } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as p } from "../ui/styled-system/css/sva.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 p } from "../styled-system/css/sva.js";
 import "react";
-import "../ui/styled-system/jsx/is-valid-prop.js";
-import { Box as g } from "../ui/styled-system/jsx/box.js";
+import "../styled-system/jsx/is-valid-prop.js";
+import { Box as g } from "../styled-system/jsx/box.js";
 import { SerendieSymbol as m } from "../node_modules/@serendie/symbols/dist/symbols2.js";
 import { Portal as y } from "../node_modules/@ark-ui/react/dist/components/portal/portal.js";
 import { ComboboxRoot as x } from "../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";

package/dist/components/Select.js

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { css as d } from "../ui/styled-system/css/css.js";
-import { cx as h } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as b } from "../ui/styled-system/css/sva.js";
+import { css as d } from "../styled-system/css/css.js";
+import { cx as h } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as b } from "../styled-system/css/sva.js";
 import { useId as f } from "react";
 import { ListItem as S } from "./ListItem.js";
 import { List as v } from "./List.js";

package/dist/components/Switch.js

@@ -1,9 +1,9 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { css as u } from "../ui/styled-system/css/css.js";
-import { cx as t } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as b } from "../ui/styled-system/css/sva.js";
+import { css as u } from "../styled-system/css/css.js";
+import { cx as t } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as b } from "../styled-system/css/sva.js";
 import { SwitchRoot as h } from "../node_modules/@ark-ui/react/dist/components/switch/switch-root.js";
 import { SwitchLabel as i } from "../node_modules/@ark-ui/react/dist/components/switch/switch-label.js";
 import { SwitchControl as g } from "../node_modules/@ark-ui/react/dist/components/switch/switch-control.js";

package/dist/components/TabItem.js

@@ -1,8 +1,8 @@
 import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as b } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as u } from "../ui/styled-system/css/sva.js";
+import "../styled-system/css/css.js";
+import { cx as b } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as u } from "../styled-system/css/sva.js";
 import { NotificationBadge as i } from "./NotificationBadge.js";
 import { TabTrigger as h } from "../node_modules/@ark-ui/react/dist/components/tabs/tab-trigger.js";
 const l = u({

package/dist/components/Tabs.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../ui/styled-system/css/css.js";
-import { cx as n } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as l } from "../ui/styled-system/css/sva.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 l } from "../styled-system/css/sva.js";
 import { TabsRoot as p } from "../node_modules/@ark-ui/react/dist/components/tabs/tabs-root.js";
 import { TabList as c } from "../node_modules/@ark-ui/react/dist/components/tabs/tab-list.js";
 const o = l({

package/dist/components/TextArea.js

@@ -1,10 +1,10 @@
 import { jsxs as a, jsx as s } from "react/jsx-runtime";
 import p, { forwardRef as v } from "react";
 import _ from "../node_modules/merge-refs/dist/esm/index.js";
-import "../ui/styled-system/css/css.js";
-import { cx as w } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as C } from "../ui/styled-system/css/sva.js";
+import "../styled-system/css/css.js";
+import { cx as w } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as C } from "../styled-system/css/sva.js";
 const c = C({
   slots: [
     "root",

package/dist/components/TextField.js

@@ -1,10 +1,10 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import m, { forwardRef as j } from "react";
 import q from "../node_modules/merge-refs/dist/esm/index.js";
-import { css as v } from "../ui/styled-system/css/css.js";
-import { cx as z } from "../ui/styled-system/css/cx.js";
-import "../ui/styled-system/helpers.js";
-import { sva as L } from "../ui/styled-system/css/sva.js";
+import { css as v } from "../styled-system/css/css.js";
+import { cx as z } from "../styled-system/css/cx.js";
+import "../styled-system/helpers.js";
+import { sva as L } from "../styled-system/css/sva.js";
 import { SerendieSymbol as S } from "../node_modules/@serendie/symbols/dist/symbols2.js";
 const C = L({
   slots: [