@serendie/ui 2.5.1 → 3.0.0-dev.202602170843

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +63 -8
  2. package/dist/client.js +135 -119
  3. package/dist/components/Avatar/Avatar.js +3 -3
  4. package/dist/components/Badge/Badge.d.ts +6 -6
  5. package/dist/components/Badge/Badge.js +21 -21
  6. package/dist/components/Banner/Banner.d.ts +1 -4
  7. package/dist/components/Banner/Banner.js +8 -11
  8. package/dist/components/Button/Button.d.ts +0 -2
  9. package/dist/components/Button/Button.js +10 -11
  10. package/dist/components/CheckBox/CheckBox.js +4 -4
  11. package/dist/components/DatePicker/styles.js +1 -1
  12. package/dist/components/Divider/Divider.d.ts +2 -2
  13. package/dist/components/Divider/Divider.js +11 -11
  14. package/dist/components/Drawer/Drawer.js +3 -3
  15. package/dist/components/DropdownMenu/DropdownMenu.js +5 -5
  16. package/dist/components/IconButton/IconButton.d.ts +0 -1
  17. package/dist/components/IconButton/IconButton.js +0 -1
  18. package/dist/components/ModalDialog/ModalDialog.js +1 -1
  19. package/dist/components/ProgressIndicator/ProgressIndicator.js +9 -9
  20. package/dist/components/Search/Search.js +5 -5
  21. package/dist/components/Select/Select.js +14 -14
  22. package/dist/components/Switch/Switch.js +5 -5
  23. package/dist/components/Toast/Toast.d.ts +3 -5
  24. package/dist/components/Toast/Toast.js +8 -10
  25. package/dist/i18n/index.d.ts +1 -1
  26. package/dist/i18n/provider.d.ts +29 -4
  27. package/dist/i18n/provider.js +31 -11
  28. package/dist/index.d.ts +2 -0
  29. package/dist/index.js +135 -119
  30. package/dist/node_modules/@serendie/design-token/dist/panda-tokens.js +310 -0
  31. package/dist/node_modules/@serendie/design-token/dist/tokens.js +126 -0
  32. package/dist/preset.d.ts +310 -0
  33. package/dist/styled-system/css/conditions.js +1 -1
  34. package/dist/styled-system/jsx/is-valid-prop.js +1 -1
  35. package/dist/styles.css +1 -1
  36. package/dist/theme/ThemeContext.d.ts +55 -0
  37. package/dist/theme/ThemeContext.js +15 -0
  38. package/dist/theme/index.d.ts +3 -0
  39. package/dist/theme/index.js +11 -0
  40. package/dist/theme/initColorScheme.d.ts +74 -0
  41. package/dist/theme/initColorScheme.js +32 -0
  42. package/dist/theme/useSystemColorScheme.d.ts +15 -0
  43. package/dist/theme/useSystemColorScheme.js +19 -0
  44. package/dist/tokens/getToken.d.ts +126 -0
  45. package/dist/tokens/index.d.ts +310 -0
  46. package/package.json +2 -2
  47. package/styled-system/css/conditions.js +1 -1
  48. package/styled-system/jsx/is-valid-prop.js +1 -1
  49. package/styled-system/themes/index.d.ts +6 -1
  50. package/styled-system/themes/theme-konjo-dark.json +5 -0
  51. package/styled-system/types/conditions.d.ts +2 -0
package/README.md CHANGED
@@ -79,8 +79,60 @@ export default function ClientComponent() {
79
79
 
80
80
  ### テーマ切り替え
81
81
 
82
- Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、`data-panda-theme`属性 (`konjo`, `asagi`, `sumire`, `tsutsuji`, `kurikawa`)を付与することでカラーテーマを切り替えることができます。
83
- 各テーマについては[こちら](https://serendie.design/foundations/theming/)を参照してください。
82
+ Serendie Design Systemには5つのカラーテーマ (`konjo`, `asagi`, `sumire`, `tsutsuji`, `kurikawa`) とダークモードがあります。各テーマについては[こちら](https://serendie.design/foundations/theming/)を参照してください。
83
+
84
+ `SerendieProvider`の`colorTheme`と`colorMode`を使って、テーマとカラーモードを設定できます。
85
+
86
+ ```tsx
87
+ import { SerendieProvider } from "@serendie/ui";
88
+
89
+ function App() {
90
+ return (
91
+ <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
92
+ {/* アプリケーション全体 */}
93
+ </SerendieProvider>
94
+ );
95
+ }
96
+ ```
97
+
98
+ - `colorTheme`: カラーテーマ（`konjo` | `asagi` | `sumire` | `tsutsuji` | `kurikawa`、デフォルト: `konjo`）
99
+ - `colorMode`: カラーモード（`system` | `light` | `dark`、デフォルト: `light`）
100
+
101
+ `colorMode="system"`を指定すると、OSの設定に応じてライト/ダークモードが自動的に切り替わります。
102
+
103
+ #### FOUC（フラッシュ）の防止
104
+
105
+ SSR環境（Next.jsなど）では、ページ読み込み時にテーマが一瞬ちらつく（FOUC）ことがあります。`ColorSchemeScript`を`<head>`内に配置することで、HTMLの描画前にテーマを適用しFOUCを防止できます。
106
+
107
+ ```tsx
108
+ // Next.js App Router: app/layout.tsx
109
+ import { SerendieProvider, ColorSchemeScript } from "@serendie/ui";
110
+
111
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
112
+ return (
113
+ <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
114
+ <html suppressHydrationWarning>
115
+ <head>
116
+ <ColorSchemeScript />
117
+ </head>
118
+ <body>{children}</body>
119
+ </html>
120
+ </SerendieProvider>
121
+ );
122
+ }
123
+ ```
124
+
125
+ `SerendieProvider`を`<html>`の外側に配置することで、`ColorSchemeScript`はContextからテーマ設定を自動取得します。テーマの設定を1箇所にまとめられるため、値の不整合を防ぐことができます。
126
+
127
+ `SerendieProvider`を使わない場合や、`ColorSchemeScript`をProvider外で使う場合は、propsで直接指定することもできます。
128
+
129
+ ```tsx
130
+ <ColorSchemeScript colorTheme="konjo" colorMode="system" />
131
+ ```
132
+
133
+ #### `data-panda-theme`属性による直接制御
134
+
135
+ `SerendieProvider`を使用せずに、`data-panda-theme`属性を直接設定してテーマを切り替えることもできます。
84
136
 
85
137
  ```html
86
138
  <html data-panda-theme="asagi"></html>
@@ -123,7 +175,7 @@ function App() {
123
175
 
124
176
  ```tsx
125
177
  // app/layout.tsx
126
- import { SerendieProvider } from "@serendie/ui";
178
+ import { SerendieProvider, ColorSchemeScript } from "@serendie/ui";
127
179
 
128
180
  export default function RootLayout({
129
181
  children,
@@ -133,11 +185,14 @@ export default function RootLayout({
133
185
  params: { lang: "ja" | "en" };
134
186
  }) {
135
187
  return (
136
- <html lang={params.lang}>
137
- <body>
138
- <SerendieProvider lang={params.lang}>{children}</SerendieProvider>
139
- </body>
140
- </html>
188
+ <SerendieProvider lang={params.lang} colorTheme="konjo" colorMode="system">
189
+ <html lang={params.lang} suppressHydrationWarning>
190
+ <head>
191
+ <ColorSchemeScript />
192
+ </head>
193
+ <body>{children}</body>
194
+ </html>
195
+ </SerendieProvider>
141
196
  );
142
197
  }
143
198
  ```
package/dist/client.js CHANGED
@@ -1,122 +1,138 @@
1
1
  "use client";
2
- import { SerendiePreset as e } from "./preset.js";
3
- import { Accordion as a } from "./components/Accordion/Accordion.js";
4
- import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
5
- import { Avatar as x, AvatarStyle as n } from "./components/Avatar/Avatar.js";
6
- import { Badge as s, BadgeCloseButton as c, BadgeStyle as d } from "./components/Badge/Badge.js";
7
- import { Banner as h } from "./components/Banner/Banner.js";
8
- import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
9
- import { BottomNavigationItem as g, BottomNavigationItemStyle as u } from "./components/BottomNavigation/BottomNavigationItem.js";
10
- import { Button as I, ButtonStyle as T } from "./components/Button/Button.js";
11
- import { SerendieChartTheme as D } from "./components/Chart/SerendieChartTheme.js";
12
- import { compactChartMargin as k, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
13
- import { CheckBox as W, CheckBoxStyle as j, checkboxCheckedIconCss as q, checkboxIconCss as z, checkboxUncheckedIconCss as E } from "./components/CheckBox/CheckBox.js";
14
- import { ChoiceBox as J, ChoiceBoxStyle as K } from "./components/ChoiceBox/ChoiceBox.js";
15
- import { DashboardWidget as Q } from "./components/DashboardWidget/DashboardWidget.js";
16
- import { DataTable as X } from "./components/DataTable/index.js";
17
- import { DatePicker as Z } from "./components/DatePicker/DatePicker.js";
18
- import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.js";
19
- import { Drawer as eo } from "./components/Drawer/Drawer.js";
20
- import { DropdownMenu as ao, DropdownMenuStyle as po } from "./components/DropdownMenu/DropdownMenu.js";
21
- import { IconButton as io, IconButtonStyle as xo } from "./components/IconButton/IconButton.js";
22
- import { List as fo } from "./components/List/List.js";
23
- import { ListItem as co, ListItemStyle as lo } from "./components/List/ListItem.js";
24
- import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
25
- import { NotificationBadge as Bo } from "./components/NotificationBadge/NotificationBadge.js";
26
- import { Pagination as uo, PaginationStyle as yo } from "./components/Pagination/Pagination.js";
27
- import { PasswordField as To } from "./components/PasswordField/PasswordField.js";
28
- import { ProgressIndicator as Do } from "./components/ProgressIndicator/ProgressIndicator.js";
29
- import { ProgressIndicatorIndeterminate as ko } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
30
- import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, radioIconCss as Lo, radioUncheckedIconCss as No } from "./components/RadioButton/RadioButton.js";
31
- import { RadioGroup as Fo } from "./components/RadioButton/RadioGroup.js";
32
- import { Search as Uo, SearchStyle as Wo } from "./components/Search/Search.js";
33
- import { Select as qo, SelectStyle as zo } from "./components/Select/Select.js";
34
- import { Switch as Ho, SwitchStyle as Jo } from "./components/Switch/Switch.js";
35
- import { Tabs as Oo, TabsStyle as Qo } from "./components/Tabs/Tabs.js";
36
- import { TabItem as Xo, TabItemStyle as Yo } from "./components/Tabs/TabItem.js";
37
- import { TextArea as _o } from "./components/TextArea/TextArea.js";
38
- import { TextField as or } from "./components/TextField/TextField.js";
39
- import { Toast as er, ToastStyle as tr, toaster as ar } from "./components/Toast/Toast.js";
40
- import { Tooltip as mr } from "./components/Tooltip/Tooltip.js";
41
- import { TopAppBar as xr } from "./components/TopAppBar/TopAppBar.js";
42
- import { DataTableComponent as fr } from "./components/DataTable/DataTableComponent.js";
43
- import { parse as cr } from "./node_modules/@zag-js/date-picker/dist/index.js";
2
+ import { SerendiePreset as r } from "./preset.js";
3
+ import { ThemeContext as a, resolveTheme as m, useThemeContext as p } from "./theme/ThemeContext.js";
4
+ import { useSystemColorScheme as x } from "./theme/useSystemColorScheme.js";
5
+ import { ColorSchemeScript as s, getColorSchemeScript as f } from "./theme/initColorScheme.js";
6
+ import { formatDateByLang as l, getTranslations as d, useTranslations as h } from "./i18n/index.js";
7
+ import { Accordion as C } from "./components/Accordion/Accordion.js";
8
+ import { AccordionGroup as u } from "./components/Accordion/AccordionGroup.js";
9
+ import { Avatar as y, AvatarStyle as T } from "./components/Avatar/Avatar.js";
10
+ import { Badge as P, BadgeCloseButton as D, BadgeStyle as b } from "./components/Badge/Badge.js";
11
+ import { Banner as v } from "./components/Banner/Banner.js";
12
+ import { BottomNavigation as w } from "./components/BottomNavigation/BottomNavigation.js";
13
+ import { BottomNavigationItem as L, BottomNavigationItemStyle as N } from "./components/BottomNavigation/BottomNavigationItem.js";
14
+ import { Button as F, ButtonStyle as G } from "./components/Button/Button.js";
15
+ import { SerendieChartTheme as W } from "./components/Chart/SerendieChartTheme.js";
16
+ import { compactChartMargin as q, defaultChartMargin as z, getChartColor as E, getChartColors as H, legendChartMargin as J, spaciousChartMargin as K, useBarChartProps as O, useChartProps as Q, useLineChartProps as V, usePieChartProps as X } from "./components/Chart/SerendieChartProps.js";
17
+ import { CheckBox as Z, CheckBoxStyle as _, checkboxCheckedIconCss as $, checkboxIconCss as oo, checkboxUncheckedIconCss as eo } from "./components/CheckBox/CheckBox.js";
18
+ import { ChoiceBox as to, ChoiceBoxStyle as ao } from "./components/ChoiceBox/ChoiceBox.js";
19
+ import { DashboardWidget as po } from "./components/DashboardWidget/DashboardWidget.js";
20
+ import { DataTable as xo } from "./components/DataTable/index.js";
21
+ import { DatePicker as so } from "./components/DatePicker/DatePicker.js";
22
+ import { Divider as co, DividerStyle as lo } from "./components/Divider/Divider.js";
23
+ import { Drawer as So } from "./components/Drawer/Drawer.js";
24
+ import { DropdownMenu as go, DropdownMenuStyle as uo } from "./components/DropdownMenu/DropdownMenu.js";
25
+ import { IconButton as yo, IconButtonStyle as To } from "./components/IconButton/IconButton.js";
26
+ import { List as Po } from "./components/List/List.js";
27
+ import { ListItem as bo, ListItemStyle as ko } from "./components/List/ListItem.js";
28
+ import { ModalDialog as Mo } from "./components/ModalDialog/ModalDialog.js";
29
+ import { NotificationBadge as Ao } from "./components/NotificationBadge/NotificationBadge.js";
30
+ import { Pagination as No, PaginationStyle as Ro } from "./components/Pagination/Pagination.js";
31
+ import { PasswordField as Go } from "./components/PasswordField/PasswordField.js";
32
+ import { ProgressIndicator as Wo } from "./components/ProgressIndicator/ProgressIndicator.js";
33
+ import { ProgressIndicatorIndeterminate as qo } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
34
+ import { RadioButton as Eo, RadioButtonStyle as Ho, radioCheckedIconCss as Jo, radioIconCss as Ko, radioUncheckedIconCss as Oo } from "./components/RadioButton/RadioButton.js";
35
+ import { RadioGroup as Vo } from "./components/RadioButton/RadioGroup.js";
36
+ import { Search as Yo, SearchStyle as Zo } from "./components/Search/Search.js";
37
+ import { Select as $o, SelectStyle as oe } from "./components/Select/Select.js";
38
+ import { Switch as re, SwitchStyle as te } from "./components/Switch/Switch.js";
39
+ import { Tabs as me, TabsStyle as pe } from "./components/Tabs/Tabs.js";
40
+ import { TabItem as xe, TabItemStyle as ne } from "./components/Tabs/TabItem.js";
41
+ import { TextArea as fe } from "./components/TextArea/TextArea.js";
42
+ import { TextField as le } from "./components/TextField/TextField.js";
43
+ import { Toast as he, ToastStyle as Se, toaster as Ce } from "./components/Toast/Toast.js";
44
+ import { Tooltip as ue } from "./components/Tooltip/Tooltip.js";
45
+ import { TopAppBar as ye } from "./components/TopAppBar/TopAppBar.js";
46
+ import { LanguageProvider as Ie, SerendieProvider as Pe } from "./i18n/provider.js";
47
+ import { DataTableComponent as be } from "./components/DataTable/DataTableComponent.js";
48
+ import { parse as ve } from "./node_modules/@zag-js/date-picker/dist/index.js";
44
49
  export {
45
- a as Accordion,
46
- m as AccordionGroup,
47
- x as Avatar,
48
- n as AvatarStyle,
49
- s as Badge,
50
- c as BadgeCloseButton,
51
- d as BadgeStyle,
52
- h as Banner,
53
- S as BottomNavigation,
54
- g as BottomNavigationItem,
55
- u as BottomNavigationItemStyle,
56
- I as Button,
57
- T as ButtonStyle,
58
- W as CheckBox,
59
- j as CheckBoxStyle,
60
- J as ChoiceBox,
61
- K as ChoiceBoxStyle,
62
- Q as DashboardWidget,
63
- X as DataTable,
64
- fr as DataTableComponent,
65
- Z as DatePicker,
66
- $ as Divider,
67
- oo as DividerStyle,
68
- eo as Drawer,
69
- ao as DropdownMenu,
70
- po as DropdownMenuStyle,
71
- io as IconButton,
72
- xo as IconButtonStyle,
73
- fo as List,
74
- co as ListItem,
75
- lo as ListItemStyle,
76
- Co as ModalDialog,
77
- Bo as NotificationBadge,
78
- uo as Pagination,
79
- yo as PaginationStyle,
80
- To as PasswordField,
81
- Do as ProgressIndicator,
82
- ko as ProgressIndicatorIndeterminate,
83
- Mo as RadioButton,
84
- wo as RadioButtonStyle,
85
- Fo as RadioGroup,
86
- Uo as Search,
87
- Wo as SearchStyle,
88
- qo as Select,
89
- zo as SelectStyle,
90
- D as SerendieChartTheme,
91
- e as SerendiePreset,
92
- Ho as Switch,
93
- Jo as SwitchStyle,
94
- Xo as TabItem,
95
- Yo as TabItemStyle,
96
- Oo as Tabs,
97
- Qo as TabsStyle,
98
- _o as TextArea,
99
- or as TextField,
100
- er as Toast,
101
- tr as ToastStyle,
102
- mr as Tooltip,
103
- xr as TopAppBar,
104
- q as checkboxCheckedIconCss,
105
- z as checkboxIconCss,
106
- E as checkboxUncheckedIconCss,
107
- k as compactChartMargin,
108
- v as defaultChartMargin,
109
- M as getChartColor,
110
- w as getChartColors,
111
- A as legendChartMargin,
112
- cr as parseDate,
113
- Ao as radioCheckedIconCss,
114
- Lo as radioIconCss,
115
- No as radioUncheckedIconCss,
116
- L as spaciousChartMargin,
117
- ar as toaster,
118
- N as useBarChartProps,
119
- R as useChartProps,
120
- F as useLineChartProps,
121
- G as usePieChartProps
50
+ C as Accordion,
51
+ u as AccordionGroup,
52
+ y as Avatar,
53
+ T as AvatarStyle,
54
+ P as Badge,
55
+ D as BadgeCloseButton,
56
+ b as BadgeStyle,
57
+ v as Banner,
58
+ w as BottomNavigation,
59
+ L as BottomNavigationItem,
60
+ N as BottomNavigationItemStyle,
61
+ F as Button,
62
+ G as ButtonStyle,
63
+ Z as CheckBox,
64
+ _ as CheckBoxStyle,
65
+ to as ChoiceBox,
66
+ ao as ChoiceBoxStyle,
67
+ s as ColorSchemeScript,
68
+ po as DashboardWidget,
69
+ xo as DataTable,
70
+ be as DataTableComponent,
71
+ so as DatePicker,
72
+ co as Divider,
73
+ lo as DividerStyle,
74
+ So as Drawer,
75
+ go as DropdownMenu,
76
+ uo as DropdownMenuStyle,
77
+ yo as IconButton,
78
+ To as IconButtonStyle,
79
+ Ie as LanguageProvider,
80
+ Po as List,
81
+ bo as ListItem,
82
+ ko as ListItemStyle,
83
+ Mo as ModalDialog,
84
+ Ao as NotificationBadge,
85
+ No as Pagination,
86
+ Ro as PaginationStyle,
87
+ Go as PasswordField,
88
+ Wo as ProgressIndicator,
89
+ qo as ProgressIndicatorIndeterminate,
90
+ Eo as RadioButton,
91
+ Ho as RadioButtonStyle,
92
+ Vo as RadioGroup,
93
+ Yo as Search,
94
+ Zo as SearchStyle,
95
+ $o as Select,
96
+ oe as SelectStyle,
97
+ W as SerendieChartTheme,
98
+ r as SerendiePreset,
99
+ Pe as SerendieProvider,
100
+ re as Switch,
101
+ te as SwitchStyle,
102
+ xe as TabItem,
103
+ ne as TabItemStyle,
104
+ me as Tabs,
105
+ pe as TabsStyle,
106
+ fe as TextArea,
107
+ le as TextField,
108
+ a as ThemeContext,
109
+ he as Toast,
110
+ Se as ToastStyle,
111
+ ue as Tooltip,
112
+ ye as TopAppBar,
113
+ $ as checkboxCheckedIconCss,
114
+ oo as checkboxIconCss,
115
+ eo as checkboxUncheckedIconCss,
116
+ q as compactChartMargin,
117
+ z as defaultChartMargin,
118
+ l as formatDateByLang,
119
+ E as getChartColor,
120
+ H as getChartColors,
121
+ f as getColorSchemeScript,
122
+ d as getTranslations,
123
+ J as legendChartMargin,
124
+ ve as parseDate,
125
+ Jo as radioCheckedIconCss,
126
+ Ko as radioIconCss,
127
+ Oo as radioUncheckedIconCss,
128
+ m as resolveTheme,
129
+ K as spaciousChartMargin,
130
+ Ce as toaster,
131
+ O as useBarChartProps,
132
+ Q as useChartProps,
133
+ V as useLineChartProps,
134
+ X as usePieChartProps,
135
+ x as useSystemColorScheme,
136
+ p as useThemeContext,
137
+ h as useTranslations
122
138
  };
package/dist/components/Avatar/Avatar.js CHANGED
@@ -18,7 +18,7 @@ const c = g({
18
18
  width: "100%",
19
19
  height: "100%",
20
20
  borderRadius: "50%",
21
- color: "sd.system.color.component.onSurface",
21
+ color: "sd.reference.color.scale.black.1000",
22
22
  backgroundColor: "sd.reference.color.scale.blue.200",
23
23
  textStyle: "sd.system.typography.label.extraLarge_compact"
24
24
  },
@@ -70,8 +70,8 @@ const c = g({
70
70
  className: h,
71
71
  ...m
72
72
  }) => {
73
- const [o, f] = c.splitVariantProps(m), { size: l } = o, t = c({ size: l, ...o }), a = l === "small" ? 24 : l === "large" ? 80 : 40;
74
- return /* @__PURE__ */ e(C, { className: u(t.root, h), ...f, 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(p, { width: a, height: a }) : /* @__PURE__ */ e(w, {}) });
73
+ const [a, f] = c.splitVariantProps(m), { size: l } = a, t = c({ size: l, ...a }), o = l === "small" ? 24 : l === "large" ? 80 : 40;
74
+ return /* @__PURE__ */ e(C, { className: u(t.root, h), ...f, 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(p, { width: o, height: o }) : /* @__PURE__ */ e(w, {}) });
75
75
  }, w = () => /* @__PURE__ */ s("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
76
76
  /* @__PURE__ */ s("g", { "clip-path": "url(#clip0_3661_24550)", children: [
77
77
  /* @__PURE__ */ e("rect", { width: "80", height: "80", rx: "40", fill: "#EFF2FC" }),
package/dist/components/Badge/Badge.d.ts CHANGED
@@ -33,27 +33,27 @@ export declare const BadgeStyle: import('../../../styled-system/types').RecipeRu
33
33
  styleColor: {
34
34
  gray: {
35
35
  bg: "sd.reference.color.scale.gray.600";
36
- color: "sd.system.color.component.inverseOnSurface";
36
+ color: "sd.reference.color.scale.white.1000";
37
37
  };
38
38
  blue: {
39
39
  bg: "sd.reference.color.scale.blue.600";
40
- color: "sd.system.color.component.inverseOnSurface";
40
+ color: "sd.reference.color.scale.white.1000";
41
41
  };
42
42
  green: {
43
43
  bg: "sd.reference.color.scale.green.600";
44
- color: "sd.system.color.component.inverseOnSurface";
44
+ color: "sd.reference.color.scale.white.1000";
45
45
  };
46
46
  yellow: {
47
47
  bg: "sd.reference.color.scale.yellow.600";
48
- color: "sd.system.color.component.inverseOnSurface";
48
+ color: "sd.reference.color.scale.white.1000";
49
49
  };
50
50
  chestnut: {
51
51
  bg: "sd.reference.color.scale.chestnut.600";
52
- color: "sd.system.color.component.inverseOnSurface";
52
+ color: "sd.reference.color.scale.white.1000";
53
53
  };
54
54
  red: {
55
55
  bg: "sd.reference.color.scale.red.600";
56
- color: "sd.system.color.component.inverseOnSurface";
56
+ color: "sd.reference.color.scale.white.1000";
57
57
  };
58
58
  "gray-subtle": {
59
59
  bg: "sd.reference.color.scale.gray.100";
package/dist/components/Badge/Badge.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsxs as m, jsx as r } from "react/jsx-runtime";
2
- import { SerendieSymbolClose as i } from "@serendie/symbols";
3
- import { cva as l } from "../../styled-system/css/cva.js";
1
+ import { jsxs as i, jsx as r } from "react/jsx-runtime";
2
+ import { SerendieSymbolClose as m } from "@serendie/symbols";
3
+ import { cva as o } from "../../styled-system/css/cva.js";
4
4
  import { cx as y } from "../../styled-system/css/cx.js";
5
- const o = l({
5
+ const l = o({
6
6
  base: {
7
7
  display: "inline-flex",
8
8
  alignItems: "center",
@@ -43,27 +43,27 @@ const o = l({
43
43
  styleColor: {
44
44
  gray: {
45
45
  bg: "sd.reference.color.scale.gray.600",
46
- color: "sd.system.color.component.inverseOnSurface"
46
+ color: "sd.reference.color.scale.white.1000"
47
47
  },
48
48
  blue: {
49
49
  bg: "sd.reference.color.scale.blue.600",
50
- color: "sd.system.color.component.inverseOnSurface"
50
+ color: "sd.reference.color.scale.white.1000"
51
51
  },
52
52
  green: {
53
53
  bg: "sd.reference.color.scale.green.600",
54
- color: "sd.system.color.component.inverseOnSurface"
54
+ color: "sd.reference.color.scale.white.1000"
55
55
  },
56
56
  yellow: {
57
57
  bg: "sd.reference.color.scale.yellow.600",
58
- color: "sd.system.color.component.inverseOnSurface"
58
+ color: "sd.reference.color.scale.white.1000"
59
59
  },
60
60
  chestnut: {
61
61
  bg: "sd.reference.color.scale.chestnut.600",
62
- color: "sd.system.color.component.inverseOnSurface"
62
+ color: "sd.reference.color.scale.white.1000"
63
63
  },
64
64
  red: {
65
65
  bg: "sd.reference.color.scale.red.600",
66
- color: "sd.system.color.component.inverseOnSurface"
66
+ color: "sd.reference.color.scale.white.1000"
67
67
  },
68
68
  "gray-subtle": {
69
69
  bg: "sd.reference.color.scale.gray.100",
@@ -95,26 +95,26 @@ const o = l({
95
95
  size: "medium",
96
96
  styleColor: "gray"
97
97
  }
98
- }), x = ({
98
+ }), h = ({
99
99
  children: e,
100
100
  closeButton: s,
101
- ...t
101
+ ...c
102
102
  }) => {
103
- const [c, { className: n, ...a }] = o.splitVariantProps(t), d = o(c);
104
- return /* @__PURE__ */ m("span", { className: y(d, n), ...a, children: [
103
+ const [t, { className: a, ...n }] = l.splitVariantProps(c), d = l(t);
104
+ return /* @__PURE__ */ i("span", { className: y(d, a), ...n, children: [
105
105
  e,
106
106
  s
107
107
  ] });
108
- }, p = l({
108
+ }, g = o({
109
109
  base: {
110
110
  cursor: "pointer"
111
111
  }
112
- }), h = (e) => {
113
- const s = p();
114
- return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(i, { width: 12, height: 12 }) });
112
+ }), x = (e) => {
113
+ const s = g();
114
+ return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(m, { width: 12, height: 12 }) });
115
115
  };
116
116
  export {
117
- x as Badge,
118
- h as BadgeCloseButton,
119
- o as BadgeStyle
117
+ h as Badge,
118
+ x as BadgeCloseButton,
119
+ l as BadgeStyle
120
120
  };
package/dist/components/Banner/Banner.d.ts CHANGED
@@ -4,11 +4,8 @@ declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRunt
4
4
  type: {
5
5
  information: {
6
6
  container: {
7
- bg: "sd.system.color.component.surface";
7
+ bg: "sd.system.color.component.surfaceContainer";
8
8
  color: "sd.system.color.component.onSurface";
9
- borderWidth: "sd.system.dimension.border.medium";
10
- borderStyle: "solid";
11
- borderColor: "sd.system.color.component.outline";
12
9
  };
13
10
  };
14
11
  error: {
package/dist/components/Banner/Banner.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
2
  import { SerendieSymbolAlertCircleFilled as p, SerendieSymbolAlertCircle as y } from "@serendie/symbols";
3
3
  import { sva as b } from "../../styled-system/css/sva.js";
4
4
  import { cx as g } from "../../styled-system/css/cx.js";
@@ -31,11 +31,8 @@ const t = b({
31
31
  type: {
32
32
  information: {
33
33
  container: {
34
- bg: "sd.system.color.component.surface",
35
- color: "sd.system.color.component.onSurface",
36
- borderWidth: "sd.system.dimension.border.medium",
37
- borderStyle: "solid",
38
- borderColor: "sd.system.color.component.outline"
34
+ bg: "sd.system.color.component.surfaceContainer",
35
+ color: "sd.system.color.component.onSurface"
39
36
  }
40
37
  },
41
38
  error: {
@@ -64,14 +61,14 @@ const t = b({
64
61
  defaultVariants: {
65
62
  type: "information"
66
63
  }
67
- }), C = (n) => {
68
- const [s, { title: d, icon: r, description: m, className: a, ...l }] = t.splitVariantProps(n), o = t(s), i = s.type || "alert-circle";
69
- return /* @__PURE__ */ c("div", { className: g(o.container, a), ...l, children: [
64
+ }), h = (n) => {
65
+ const [s, { title: d, icon: r, description: a, className: m, ...c }] = t.splitVariantProps(n), o = t(s), i = s.type || "alert-circle";
66
+ return /* @__PURE__ */ l("div", { className: g(o.container, m), ...c, children: [
70
67
  /* @__PURE__ */ e("div", { className: o.icon, children: r || (i === "error" || i === "warning" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(y, {})) }),
71
68
  /* @__PURE__ */ e("h2", { className: o.title, children: d }),
72
- /* @__PURE__ */ e("p", { className: o.description, children: m })
69
+ /* @__PURE__ */ e("p", { className: o.description, children: a })
73
70
  ] });
74
71
  };
75
72
  export {
76
- C as Banner
73
+ h as Banner
77
74
  };
package/dist/components/Button/Button.d.ts CHANGED
@@ -53,7 +53,6 @@ export declare const ButtonStyle: import('../../../styled-system/types').RecipeR
53
53
  outlineWidth: string;
54
54
  outlineStyle: string;
55
55
  outlineColor: string;
56
- bgColor: string;
57
56
  _enabled: {
58
57
  _hover: {
59
58
  bgColor: string;
@@ -75,7 +74,6 @@ export declare const ButtonStyle: import('../../../styled-system/types').RecipeR
75
74
  outlineWidth: string;
76
75
  outlineStyle: string;
77
76
  outlineColor: string;
78
- bgColor: string;
79
77
  _enabled: {
80
78
  _hover: {
81
79
  bgColor: string;
package/dist/components/Button/Button.js CHANGED
@@ -1,16 +1,15 @@
1
1
  import { jsxs as g, jsx as o } from "react/jsx-runtime";
2
2
  import b from "react";
3
- import { ProgressIndicatorIndeterminate as f } from "../ProgressIndicator/ProgressIndicatorIndeterminate.js";
4
- import { cva as h } from "../../styled-system/css/cva.js";
3
+ import { ProgressIndicatorIndeterminate as h } from "../ProgressIndicator/ProgressIndicatorIndeterminate.js";
4
+ import { cva as f } from "../../styled-system/css/cva.js";
5
5
  import { css as x } from "../../styled-system/css/css.js";
6
6
  import { cx as _ } from "../../styled-system/css/cx.js";
7
7
  import { styled as v } from "../../styled-system/jsx/factory.js";
8
- const d = {
8
+ const r = {
9
9
  color: "sd.system.color.component.onSurface",
10
10
  outlineWidth: "sd.system.dimension.border.medium",
11
11
  outlineStyle: "solid",
12
12
  outlineColor: "sd.system.color.component.outline",
13
- bgColor: "sd.system.color.component.surface",
14
13
  _enabled: {
15
14
  _hover: {
16
15
  bgColor: "sd.system.color.interaction.hoveredVariant"
@@ -25,7 +24,7 @@ const d = {
25
24
  color: "sd.system.color.interaction.disabledOnSurface",
26
25
  outline: "none"
27
26
  }
28
- }, l = h({
27
+ }, l = f({
29
28
  base: {
30
29
  borderRadius: "sd.system.dimension.radius.full",
31
30
  position: "relative",
@@ -87,9 +86,9 @@ const d = {
87
86
  color: "sd.system.color.interaction.disabledOnSurface"
88
87
  }
89
88
  },
90
- outlined: d,
89
+ outlined: r,
91
90
  rectangle: {
92
- ...d,
91
+ ...r,
93
92
  borderRadius: "sd.system.dimension.radius.medium"
94
93
  }
95
94
  },
@@ -126,9 +125,9 @@ const d = {
126
125
  }), R = b.forwardRef(
127
126
  (n, a) => {
128
127
  const [
129
- r,
128
+ d,
130
129
  { children: m, leftIcon: e, rightIcon: s, isLoading: i, className: c, ...y }
131
- ] = l.splitVariantProps(n), p = l(r), u = x(
130
+ ] = l.splitVariantProps(n), p = l(d), u = x(
132
131
  e || s ? n.size === "medium" ? {
133
132
  //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
134
133
  paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
@@ -147,10 +146,10 @@ const d = {
147
146
  ...y,
148
147
  children: [
149
148
  i && /* @__PURE__ */ o(
150
- f,
149
+ h,
151
150
  {
152
151
  type: "circular",
153
- size: r.size || "medium",
152
+ size: d.size || "medium",
154
153
  color: "subtle"
155
154
  }
156
155
  ),