@serendie/ui 2.5.0 → 2.5.1-dev.202602170627

package/dist/components/CheckBox/CheckBox.js

@@ -40,9 +40,9 @@ const v = {
 }, N = {
   width: 24,
   height: 24,
-  color: "sd.system.color.component.outline",
+  color: "sd.system.color.component.outlineDim",
   _disabled: {
-    color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
+    color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
 }, n = b({
   slots: [
@@ -93,7 +93,7 @@ const v = {
       }
     }
   }
-}), H = ({
+}), F = ({
   value: m,
   label: l,
   helperText: s,
@@ -122,7 +122,7 @@ const v = {
   );
 };
 export {
-  H as CheckBox,
+  F as CheckBox,
   n as CheckBoxStyle,
   _ as checkboxCheckedIconCss,
   v as checkboxIconCss,

package/dist/components/DatePicker/styles.js

@@ -21,7 +21,7 @@ const o = e({
       zIndex: "sd.system.elevation.zIndex.dropdown"
     },
     content: {
-      background: "sd.system.color.component.surface",
+      background: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       flexDirection: "column",

package/dist/components/Divider/Divider.d.ts

@@ -3,10 +3,10 @@ import { RecipeVariantProps } from '../../../styled-system/css';
 export declare const DividerStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     color: {
         light: {
-            borderColor: "sd.reference.color.scale.gray.200";
+            borderColor: "sd.system.color.component.outlineBright";
         };
         normal: {
-            borderColor: "sd.reference.color.scale.gray.300";
+            borderColor: "sd.system.color.component.outline";
         };
         dark: {
             borderColor: "sd.system.color.component.outlineDim";

package/dist/components/Divider/Divider.js

@@ -1,17 +1,17 @@
-import { jsx as d } from "react/jsx-runtime";
-import { cva as n } from "../../styled-system/css/cva.js";
-import { cx as l } from "../../styled-system/css/cx.js";
-const r = n({
+import { jsx as n } from "react/jsx-runtime";
+import { cva as d } from "../../styled-system/css/cva.js";
+import { cx as m } from "../../styled-system/css/cx.js";
+const o = d({
   base: {
     border: "none"
   },
   variants: {
     color: {
       light: {
-        borderColor: "sd.reference.color.scale.gray.200"
+        borderColor: "sd.system.color.component.outlineBright"
       },
       normal: {
-        borderColor: "sd.reference.color.scale.gray.300"
+        borderColor: "sd.system.color.component.outline"
       },
       dark: {
         borderColor: "sd.system.color.component.outlineDim"
@@ -37,11 +37,11 @@ const r = n({
     color: "normal",
     type: "horizontal"
   }
-}), h = (e) => {
-  const [o, s] = r.splitVariantProps(e), { className: t, ...i } = s;
-  return /* @__PURE__ */ d("hr", { className: l(r(o), t), ...i });
+}), p = (e) => {
+  const [r, t] = o.splitVariantProps(e), { className: s, ...i } = t;
+  return /* @__PURE__ */ n("hr", { className: m(o(r), s), ...i });
 };
 export {
-  h as Divider,
-  r as DividerStyle
+  p as Divider,
+  o as DividerStyle
 };

package/dist/components/Drawer/Drawer.js

@@ -25,7 +25,7 @@ const n = h({
       maxWidth: "375px",
       height: "100vh",
       gap: "sd.system.dimension.spacing.twoExtraLarge",
-      backgroundColor: "sd.system.color.component.surface",
+      backgroundColor: "sd.system.color.component.surfaceContainerBright",
       boxShadow: "sd.system.elevation.shadow.level5",
       zIndex: "sd.system.elevation.zIndex.modal"
     },
@@ -68,7 +68,7 @@ const n = h({
   defaultVariants: {
     type: "right"
   }
-}), W = ({
+}), N = ({
   isOpen: r,
   children: i,
   contentClassName: a,
@@ -92,5 +92,5 @@ const n = h({
   ] }) });
 };
 export {
-  W as Drawer
+  N as Drawer
 };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -8,16 +8,16 @@ import { sva as b } from "../../styled-system/css/sva.js";
 import { MenuRoot as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
 import { MenuTrigger as I } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
 import { MenuPositioner as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
-import { MenuContent as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
-import { MenuItemGroup as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
+import { MenuContent as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
+import { MenuItemGroup as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
 import { MenuItem as M } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
 const w = b({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
-      bgColor: "sd.system.color.component.surface",
+      bgColor: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
-      bg: "sd.system.color.component.surface",
+      bg: "sd.system.color.component.surfaceContainerBright",
       boxShadow: "sd.system.elevation.shadow.level1",
       outline: "none",
       zIndex: "sd.system.elevation.zIndex.dropdown"
@@ -126,7 +126,7 @@ const w = b({
             children: n
           }
         ) }),
-        /* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(_, { className: o.content, children: /* @__PURE__ */ e(C, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
+        /* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(C, { className: o.content, children: /* @__PURE__ */ e(_, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
           M,
           {
             value: t.value,

package/dist/components/IconButton/IconButton.d.ts

@@ -27,7 +27,6 @@ export declare const IconButtonStyle: import('../../../styled-system/types').Rec
         };
         outlined: {
             outlineColor: "sd.system.color.component.outline";
-            bgColor: "sd.system.color.component.surface";
             _enabled: {
                 _hover: {
                     bgColor: "sd.system.color.interaction.hoveredVariant";

package/dist/components/IconButton/IconButton.js

@@ -52,7 +52,6 @@ const e = a({
       },
       outlined: {
         outlineColor: "sd.system.color.component.outline",
-        bgColor: "sd.system.color.component.surface",
         _enabled: {
           _hover: {
             bgColor: "sd.system.color.interaction.hoveredVariant"

package/dist/components/ModalDialog/ModalDialog.js

@@ -44,7 +44,7 @@ const N = f({
       paddingRight: "sd.system.dimension.spacing.extraLarge",
       paddingBottom: "sd.system.dimension.spacing.large",
       paddingLeft: "sd.system.dimension.spacing.extraLarge",
-      backgroundColor: "sd.system.color.component.surface",
+      backgroundColor: "sd.system.color.component.surfaceContainerBright",
       boxShadow: "sd.system.elevation.shadow.level5",
       borderRadius: "sd.system.dimension.radius.medium",
       zIndex: "sd.system.elevation.zIndex.modal"

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -2,8 +2,8 @@ import { jsx as a, jsxs as f } from "react/jsx-runtime";
 import { useMemo as v } from "react";
 import { describeArc as b } from "./util.js";
 import { cx as h } from "../../styled-system/css/cx.js";
-import { cva as c } from "../../styled-system/css/cva.js";
-const u = c({
+import { cva as n } from "../../styled-system/css/cva.js";
+const u = n({
   base: {
     position: "relative",
     display: "flex",
@@ -74,10 +74,10 @@ const u = c({
     type: "linear",
     size: "medium"
   }
-}), p = c({
+}), p = n({
   base: {
     position: "absolute",
-    backgroundColor: "sd.reference.color.scale.gray.100",
+    backgroundColor: "sd.system.color.component.surfaceContainerDim",
     overflow: "hidden"
   },
   variants: {
@@ -101,7 +101,7 @@ const u = c({
     }
   },
   compoundVariants: []
-}), g = c({
+}), g = n({
   base: {
     position: "absolute",
     backgroundColor: "sd.system.color.impression.primary"
@@ -138,7 +138,7 @@ const u = c({
   max: o = 1,
   type: i = "linear",
   size: s = "medium",
-  className: n,
+  className: c,
   style: d,
   ...m
 }) => {
@@ -157,7 +157,7 @@ const u = c({
     return /* @__PURE__ */ a(
       "div",
       {
-        className: h(u({ type: i, size: s }), n),
+        className: h(u({ type: i, size: s }), c),
         role: "progressbar",
         "aria-valuenow": t,
         "aria-valuemin": 0,
@@ -177,7 +177,7 @@ const u = c({
                   cy: r + e,
                   r,
                   className: p({ type: i, size: s }),
-                  stroke: "var(--colors-sd-reference-color-scale-gray-100)",
+                  stroke: "var(--colors-sd-system-color-component-surface-container-dim)",
                   strokeWidth: e
                 }
               ),
@@ -198,7 +198,7 @@ const u = c({
   return /* @__PURE__ */ a(
     "div",
     {
-      className: h(u({ type: i, size: s }), n),
+      className: h(u({ type: i, size: s }), c),
       role: "progressbar",
       "aria-valuenow": t,
       "aria-valuemin": 0,

package/dist/components/Search/Search.js

@@ -64,7 +64,7 @@ const h = M({
       }
     },
     combobox: {
-      bgColor: "sd.system.color.component.surface",
+      bgColor: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       zIndex: "sd.system.elevation.zIndex.dropdown",
@@ -157,10 +157,10 @@ const h = M({
     () => !!(e.inputValue || e.defaultInputValue)
   ), m = l.useRef(null), R = l.useMemo(() => a ? r.filter(
     (o) => o.toLowerCase().includes(a.toLowerCase())
-  ) : r, [r, a]), f = j({ items: R }), _ = (o) => {
+  ) : r, [r, a]), f = j({ items: R }), B = (o) => {
     var n;
     d || g(o.inputValue), c(o.inputValue.length > 0), (n = e.onInputValueChange) == null || n.call(e, o);
-  }, B = (o) => {
+  }, _ = (o) => {
     var n;
     o.value.length > 0 && (i == null || i(o.value[0])), (n = e.onValueChange) == null || n.call(e, o);
   }, N = (o) => {
@@ -180,8 +180,8 @@ const h = M({
       collection: f,
       openOnClick: !0,
       allowCustomValue: x,
-      onInputValueChange: _,
-      onValueChange: B,
+      onInputValueChange: B,
+      onValueChange: _,
       onHighlightChange: N,
       lazyMount: !0,
       unmountOnExit: !0,

package/dist/components/Select/Select.js

@@ -6,8 +6,8 @@ import { useAutoPortalContainer as R } from "../../hooks/useAutoPortalContainer.
 import { useTranslations as z } from "../../i18n/index.js";
 import { createListCollection as P } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
 import { Portal as V } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as L } from "../../styled-system/css/sva.js";
-import { SelectRoot as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
+import { sva as B } from "../../styled-system/css/sva.js";
+import { SelectRoot as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
 import { cx as I } from "../../styled-system/css/cx.js";
 import { SelectLabel as A } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
 import { css as r } from "../../styled-system/css/css.js";
@@ -17,7 +17,7 @@ import { SelectValueText as W } from "../../node_modules/@ark-ui/react/dist/comp
 import { SelectPositioner as E } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
 import { SelectContent as k } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
 import { SelectItem as q } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
-const c = L({
+const c = B({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
@@ -82,7 +82,7 @@ const c = L({
       }
     },
     content: {
-      bgColor: "sd.system.color.component.surface",
+      bgColor: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       zIndex: "sd.system.elevation.zIndex.dropdown",
@@ -164,19 +164,19 @@ const c = L({
   required: y,
   requiredLabel: g,
   invalid: d,
-  invalidMessage: m,
+  invalidMessage: n,
   className: u,
-  items: x = [],
-  portalled: n = !0,
-  ...h
+  items: h = [],
+  portalled: m = !0,
+  ...x
 }) => {
-  const b = z(), [t, f] = c.splitVariantProps(h), o = c(t), { collection: D, ...S } = f, { triggerRef: v, portalContainerRef: w } = R(n), l = P({
-    items: x,
+  const b = z(), [t, f] = c.splitVariantProps(x), o = c(t), { collection: D, ...S } = f, { triggerRef: v, portalContainerRef: w } = R(m), l = P({
+    items: h,
     itemToString: (s) => s.label,
     itemToValue: (s) => s.value
   });
   return /* @__PURE__ */ i(
-    B,
+    L,
     {
       ...S,
       collection: l,
@@ -225,7 +225,7 @@ const c = L({
           ),
           /* @__PURE__ */ e(C, { className: o.iconBox })
         ] }) }),
-        d && m && /* @__PURE__ */ e(
+        d && n && /* @__PURE__ */ e(
           "div",
           {
             className: r({
@@ -235,10 +235,10 @@ const c = L({
               },
               color: "sd.system.color.impression.negative"
             }),
-            children: m
+            children: n
           }
         ),
-        /* @__PURE__ */ e(V, { disabled: !n, container: w, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(k, { className: o.content, children: /* @__PURE__ */ e(T, { children: l.items.map((s, _) => /* @__PURE__ */ e(q, { item: s, children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(V, { disabled: !m, container: w, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(k, { className: o.content, children: /* @__PURE__ */ e(T, { children: l.items.map((s, _) => /* @__PURE__ */ e(q, { item: s, children: /* @__PURE__ */ e(
           N,
           {
             title: s.label,

package/dist/components/Switch/Switch.js

@@ -35,8 +35,8 @@ const n = u({
       transitionProperty: "background, borderColor",
       transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
       _checked: {
-        backgroundColor: "sd.system.color.impression.primary",
-        borderColor: "sd.system.color.impression.primary",
+        backgroundColor: "sd.system.color.impression.primaryContainer",
+        borderColor: "sd.system.color.impression.primaryContainer",
         _disabled: {
           backgroundColor: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});",
           borderColor: "transparent"
@@ -97,7 +97,7 @@ const n = u({
     }
   }
 }), F = y(
-  ({ label: d, helperText: s, className: a, ...l }, m) => {
+  ({ label: a, helperText: s, className: d, ...l }, m) => {
     const [c, p] = n.splitVariantProps(l), o = n(c);
     return /* @__PURE__ */ e(
       b,
@@ -107,12 +107,12 @@ const n = u({
           "group",
           o.root,
           s && x({ alignItems: "flex-start" }),
-          a
+          d
         ),
         ...p,
         children: [
           /* @__PURE__ */ e("div", { className: o.textGroup, children: [
-            /* @__PURE__ */ r(i, { className: o.label, children: d }),
+            /* @__PURE__ */ r(i, { className: o.label, children: a }),
             s && /* @__PURE__ */ r(i, { className: o.helperText, children: s })
           ] }),
           /* @__PURE__ */ r(h, { className: t("control", o.control), children: /* @__PURE__ */ r(g, { className: o.thumb }) }),

package/dist/components/TextField/TextField.js

@@ -1,82 +1,86 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as W } from "@serendie/symbols";
 import z from "../../node_modules/merge-refs/dist/esm/index.js";
 import m, { forwardRef as B } from "react";
-import { textFieldRecipe as F } from "../../recipes/textFieldRecipe.js";
-import { useTranslations as D } from "../../i18n/index.js";
-import { cx as E } from "../../styled-system/css/cx.js";
-import { css as V } from "../../styled-system/css/css.js";
-const U = B(
+import { textFieldRecipe as b } from "../../recipes/textFieldRecipe.js";
+import { useTranslations as E } from "../../i18n/index.js";
+import { cx as G } from "../../styled-system/css/cx.js";
+import { css as w } from "../../styled-system/css/css.js";
+const X = B(
   ({
-    placeholder: b,
+    placeholder: F,
     label: d,
-    description: i,
+    description: o,
     required: u,
-    requiredLabel: S,
-    invalidMessage: c,
-    invalid: r,
-    type: w = "text",
-    disabled: n,
-    onChange: h,
-    value: f,
-    className: y,
-    leftContent: N,
-    rightContent: p,
+    requiredLabel: V,
+    invalidMessage: i,
+    invalid: s,
+    type: y = "text",
+    disabled: c,
+    onChange: f,
+    value: h,
+    className: C,
+    leftContent: p,
+    rightContent: N,
     ...l
-  }, C) => {
-    const v = D(), o = m.useRef(null), P = z(o, C), [_, j] = F.splitVariantProps({
+  }, P) => {
+    const v = E(), a = m.useRef(null), S = z(a, P), [D, _] = b.splitVariantProps({
       ...l
-    }), t = F(_), I = i || r && c, [T, k] = m.useState(l.defaultValue || f), g = l.id || m.useId(), q = () => {
+    }), t = b(D), j = o || s && i, [I, T] = m.useState(l.defaultValue || h), g = l.id || m.useId(), k = () => {
       var x;
-      const s = {
+      const r = {
         target: { value: "" }
       };
-      R(s), (x = l.onReset) == null || x.call(l, s), o.current && (o.current.value = "");
-    }, R = (s) => {
-      k(s.target.value), h && h(s);
+      R(r), (x = l.onReset) == null || x.call(l, r), a.current && (a.current.value = "", a.current.focus());
+    }, q = (r) => {
+      r.button === 0 && r.preventDefault();
+    }, R = (r) => {
+      T(r.target.value), f && f(r);
     };
-    return /* @__PURE__ */ a("div", { className: E(t.root, y), children: [
-      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: g, children: [
+    return /* @__PURE__ */ n("div", { className: G(t.root, C), children: [
+      d ? /* @__PURE__ */ n("label", { className: t.label, htmlFor: g, children: [
         d,
-        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? v("common.required") })
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: V ?? v("common.required") })
       ] }) : null,
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ n(
         "div",
         {
           className: t.inputWrapper,
-          "data-invalid": r ? !0 : void 0,
-          "data-disabled": n ? !0 : void 0,
+          "data-invalid": s ? !0 : void 0,
+          "data-disabled": c ? !0 : void 0,
           children: [
-            N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
+            p ? /* @__PURE__ */ e("div", { className: t.leftContent, children: p }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
-                ref: P,
+                ref: S,
                 id: g,
-                placeholder: b,
+                placeholder: F,
                 required: u,
-                disabled: n,
-                value: f,
-                type: w,
+                disabled: c,
+                value: h,
+                type: y,
                 className: t.input,
                 onChange: R,
-                ...j
+                ..._
               }
             ),
-            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
-            (r ? /* @__PURE__ */ e(
+            N ? /* @__PURE__ */ e("div", { className: t.rightContent, children: N }) : /* @__PURE__ */ e("div", { className: t.icon, children: !c && /* disabledの場合はアイコンを表示しない */
+            (s ? /* @__PURE__ */ e(
               "span",
               {
-                className: V({
+                className: w({
                   color: "sd.system.color.impression.negative"
                 }),
                 children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
               }
-            ) : T ? /* @__PURE__ */ e(
+            ) : I ? /* @__PURE__ */ e(
               "button",
               {
-                className: V({ cursor: "pointer" }),
-                onClick: q,
+                type: "button",
+                className: w({ cursor: "pointer" }),
+                onPointerDown: q,
+                onClick: k,
                 "aria-label": v("textField.clearValue"),
                 children: /* @__PURE__ */ e(W, { width: 20, height: 20 })
               }
@@ -84,13 +88,13 @@ const U = B(
           ]
         }
       ),
-      I && /* @__PURE__ */ a("div", { className: t.messageField, children: [
-        i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
-        r && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
+      j && /* @__PURE__ */ n("div", { className: t.messageField, children: [
+        o && /* @__PURE__ */ e("p", { className: t.description, children: o }),
+        s && i && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: i })
       ] })
     ] });
   }
 );
 export {
-  U as TextField
+  X as TextField
 };

package/dist/components/Toast/Toast.d.ts

@@ -3,20 +3,18 @@ export declare const ToastStyle: import('../../../styled-system/types').SlotReci
     variant: {
         default: {
             root: {
-                background: "sd.system.color.component.inverseSurface";
+                background: "sd.system.color.impression.positiveContainer";
             };
             text: {
-                color: "sd.system.color.component.inverseOnSurface";
+                color: "sd.system.color.impression.onPositiveContainer";
             };
             icon: {
-                color: "sd.system.color.impression.positive";
+                color: "sd.system.color.impression.onPositiveContainer";
             };
         };
         error: {
             root: {
                 background: "sd.system.color.impression.negativeContainer";
-                borderColor: "sd.system.color.impression.negative";
-                borderWidth: number;
             };
             text: {
                 color: "sd.system.color.impression.negative";

package/dist/components/Toast/Toast.js

@@ -35,20 +35,18 @@ const x = d({
     variant: {
       default: {
         root: {
-          background: "sd.system.color.component.inverseSurface"
+          background: "sd.system.color.impression.positiveContainer"
         },
         text: {
-          color: "sd.system.color.component.inverseOnSurface"
+          color: "sd.system.color.impression.onPositiveContainer"
         },
         icon: {
-          color: "sd.system.color.impression.positive"
+          color: "sd.system.color.impression.onPositiveContainer"
         }
       },
       error: {
         root: {
-          background: "sd.system.color.impression.negativeContainer",
-          borderColor: "sd.system.color.impression.negative",
-          borderWidth: 1
+          background: "sd.system.color.impression.negativeContainer"
         },
         text: {
           color: "sd.system.color.impression.negative"
@@ -62,9 +60,9 @@ const x = d({
   defaultVariants: {
     variant: "default"
   }
-}), T = m({
+}), C = m({
   placement: "bottom"
-}), C = ({ toaster: r }) => /* @__PURE__ */ o(c, { toaster: r, children: (t) => {
+}), T = ({ toaster: r }) => /* @__PURE__ */ o(c, { toaster: r, children: (t) => {
   const s = t.type === "error" ? "error" : "default", e = x({ variant: s }), i = s === "error" ? /* @__PURE__ */ o(n, { className: e.icon }) : /* @__PURE__ */ o(l, { className: e.icon });
   return /* @__PURE__ */ o(p, { className: e.root, children: /* @__PURE__ */ a("div", { className: e.textGroup, children: [
     i,
@@ -72,7 +70,7 @@ const x = d({
   ] }) }, t.id);
 } });
 export {
-  C as Toast,
+  T as Toast,
   x as ToastStyle,
-  T as toaster
+  C as toaster
 };

package/dist/i18n/index.d.ts

@@ -1,6 +1,6 @@
 import { dictionary } from './dictionary';
 import { Language } from './provider';
-export { SerendieProvider, LanguageProvider, type Language } from './provider';
+export { SerendieProvider, LanguageProvider, type Language, type SerendieProviderProps, } from './provider';
 export type TranslationKey = keyof typeof dictionary.ja;
 /**
  * 翻訳関数を生成するヘルパー