@janbox/storefront-ui 2.0.32 → 3.0.1

package/dist/lib/chip/chip.js

@@ -1,52 +1,56 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getChipProps, getChipSizeState } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
-import { mediaQuery } from "../../theme/screens.js";
+import "lodash-es";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 const Chip = ({ children, ..._props }) => {
   const { sx, size, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
   const { light, main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
+      as: "div",
       ...rest,
-      css: [
-        {
-          width: "fit-content",
-          maxWidth: "100%",
-          display: "flex",
-          alignItems: "center",
-          backgroundColor: light,
-          borderWidth: 1,
-          borderColor: main,
-          color: main
+      sx: {
+        width: "fit-content",
+        maxWidth: "100%",
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: light,
+        borderWidth: 1,
+        borderColor: main,
+        color: main,
+        ...createStyle({ size }),
+        ...sx,
+        sm: {
+          ...createStyle(sm),
+          ...sx == null ? void 0 : sx.sm
         },
-        createStyle({ size }),
-        {
-          [mediaQuery("sm")]: createStyle(sm),
-          [mediaQuery("md")]: createStyle(md),
-          [mediaQuery("lg")]: createStyle(lg)
+        md: {
+          ...createStyle(md),
+          ...sx == null ? void 0 : sx.md
         },
-        createSxInterpolation(sx)
-      ],
+        lg: {
+          ...createStyle(lg),
+          ...sx == null ? void 0 : sx.lg
+        }
+      },
       children
     }
   );
 };
 const createStyle = ({ size } = {}) => {
   const { inputSize, inputPaddingX, textVariant, rounded } = getChipSizeState(size);
-  return [
-    {
-      paddingLeft: inputPaddingX,
-      paddingRight: inputPaddingX,
-      minHeight: inputSize,
-      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
-      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0,
-      borderRadius: rounded
-    }
-  ];
+  return {
+    paddingLeft: inputPaddingX,
+    paddingRight: inputPaddingX,
+    minHeight: inputSize,
+    fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+    lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0,
+    borderRadius: rounded
+  };
 };
 export {
   Chip

package/dist/lib/chip/types.d.ts

@@ -1,10 +1,11 @@
 import { JSX } from 'react';
-import { ColorVariant, PropsWithSx, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
+import { ColorVariant, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export interface ChipResponsiveProps {
     size?: SizeVariant;
 }
-type ChipExtendedProps = PropsWithSx<ToResponsiveProps<ChipResponsiveProps> & {
+type ChipExtendedProps = ToResponsiveProps<ChipResponsiveProps> & {
     color?: ColorVariant;
-}>;
-export type ChipProps = ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>;
+};
+export type ChipProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>>;
 export {};

package/dist/lib/container/README.md

@@ -1,6 +1,6 @@
 # Container
 
-Wrapper layout responsive giúp giới hạn chiều rộng nội dung theo breakpoint và tự động xử lý padding ngang. Component căn giữa nội dung trong viewport bằng cách tính padding hai bên theo breakpoint hiện tại, đồng thời hỗ trợ căn chỉnh vị trí để nội dung có thể tràn ra cạnh trái hoặc phải.
+Wrapper layout responsive giúp giới hạn chiều rộng nội dung theo breakpoint và tự động xử lý padding ngang. Component căn giữa nội dung trong viewport theo cấu hình layout nội bộ của design system.
 
 ## Import
 
@@ -12,13 +12,9 @@ import { Container } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `position` | `ContainerPosition` | `"center"` | Kiểm soát căn chỉnh ngang và padding của container. `'center'` áp dụng padding đều hai bên, `'start'` bỏ padding trái (nội dung tràn ra cạnh trái), `'end'` bỏ padding phải (nội dung tràn ra cạnh phải). |
-| `sm` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `sm` (min-width: 768px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình tablet. |
-| `md` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `md` (min-width: 1280px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình desktop. |
-| `lg` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `lg` (min-width: 1680px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình large desktop. |
-| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape hatch để truyền custom Emotion CSS vào wrapper div ngoài cùng. Hỗ trợ responsive keys (`sm`, `md`, `lg`). |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom Emotion CSS. Hỗ trợ responsive keys (`sm`, `md`, `lg`). **Không nên override** `width`, `max-width`, `margin-left`, `margin-right`, `padding-left`, `padding-right` — các thuộc tính này do Container quản lý nội bộ. |
 | `children` | `React.ReactNode` | - | Nội dung render bên trong container. |
-| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn (`className`, `style`, `onClick`, v.v.) được forward xuống div ngoài cùng. |
+| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn (`className`, `style`, `onClick`, v.v.). |
 
 ## Examples
 
@@ -30,22 +26,15 @@ import { Container } from '@janbox/storefront-ui';
 </Container>
 ```
 
-### Căn trái (bleed left)
+### Custom style qua sx prop
 
 ```tsx
-<Container position="start">
-  {/* Bỏ padding trái — nội dung kéo dài ra cạnh viewport bên trái */}
-  <HeroImage />
+<Container sx={{ backgroundColor: '#f0f0f0', minHeight: 100 }}>
+  Page content with custom visual styles
 </Container>
 ```
 
-### Responsive position — căn giữa trên mobile, căn trái trên desktop
-
-```tsx
-<Container position="center" md={{ position: 'start' }}>
-  <SidebarPanel />
-</Container>
-```
+> Không dùng `sx` để override layout core của Container như `width`, `max-width`, `margin-left`, `margin-right`, `padding-left`, `padding-right`. Nếu cần layout khác, dùng wrapper component riêng thay vì thay đổi contract của Container.
 
 ## Dependencies
 

package/dist/lib/container/container.d.ts

@@ -1,2 +1,2 @@
 import { ContainerProps } from './types';
-export declare const Container: ({ children, ref, ..._props }: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Container: ({ children, ref, ..._props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/container/container.js

@@ -1,93 +1,9 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { isNil } from "lodash-es";
+import { jsx } from "react/jsx-runtime";
 import { getContainerProps } from "./helpers.js";
-import { breakpoint, mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
-const CONTAINER_PADDING_VAR_NAME = "--container-padding";
-const CONTAINER_PADDING_VAR = `var(${CONTAINER_PADDING_VAR_NAME})`;
-const getContainerPaddingCSS = (position) => {
-  return isNil(position) ? {} : {
-    paddingLeft: position === "start" ? 0 : CONTAINER_PADDING_VAR,
-    paddingRight: position === "end" ? 0 : CONTAINER_PADDING_VAR
-  };
-};
-const CONTAINER_CONTENT_PADDING_VAR_NAME = "--container-content-padding";
-const CONTAINER_CONTENT_PADDING_VAR = `var(${CONTAINER_CONTENT_PADDING_VAR_NAME}, 0)`;
-const getContainerContentPaddingCSS = (position) => {
-  return isNil(position) ? {} : {
-    paddingLeft: position === "start" ? 0 : CONTAINER_CONTENT_PADDING_VAR,
-    paddingRight: position === "end" ? 0 : CONTAINER_CONTENT_PADDING_VAR
-  };
-};
+import { Primitive } from "../primitive/primitive.js";
 const Container = ({ children, ref, ..._props }) => {
-  const { position, sm, md, lg, sx, ...rest } = getContainerProps(_props);
-  const css = [
-    {
-      width: "100%"
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: [
-        {
-          width: "100%",
-          [CONTAINER_PADDING_VAR_NAME]: "0px",
-          ...getContainerPaddingCSS(position)
-        },
-        {
-          [mediaQuery("sm")]: {
-            width: "100%",
-            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.sm.minWidth}px) / 2)`,
-            ...getContainerPaddingCSS(sm == null ? void 0 : sm.position)
-          },
-          [mediaQuery("md")]: {
-            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.md.minWidth}px) / 2)`,
-            ...getContainerPaddingCSS(md == null ? void 0 : md.position)
-          },
-          [mediaQuery("lg")]: {
-            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.lg.minWidth}px) / 2)`,
-            ...getContainerPaddingCSS(lg == null ? void 0 : lg.position)
-          }
-        }
-      ],
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          css: [
-            {
-              width: "100%",
-              [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.xs.padding}px`,
-              ...getContainerContentPaddingCSS(position)
-            },
-            {
-              [mediaQuery("sm")]: [
-                {
-                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.sm.padding}px`,
-                  ...getContainerContentPaddingCSS(sm == null ? void 0 : sm.position)
-                }
-              ],
-              [mediaQuery("md")]: [
-                {
-                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.md.padding}px`,
-                  ...getContainerContentPaddingCSS(md == null ? void 0 : md.position)
-                }
-              ],
-              [mediaQuery("lg")]: [
-                {
-                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.lg.padding}px`,
-                  ...getContainerContentPaddingCSS(lg == null ? void 0 : lg.position)
-                }
-              ]
-            }
-          ],
-          children
-        }
-      )
-    }
-  ) });
+  const props = getContainerProps(_props);
+  return /* @__PURE__ */ jsx(Primitive, { ...props, ref, children });
 };
 export {
   Container

package/dist/lib/container/helpers.js

@@ -1,6 +1,29 @@
+import { breakpoint } from "../../theme/screens.js";
+import "../../theme/palette.js";
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  position: "center"
+  sx: {
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    paddingLeft: breakpoint.xs.padding,
+    paddingRight: breakpoint.xs.padding,
+    sm: {
+      maxWidth: breakpoint.sm.minWidth,
+      paddingLeft: breakpoint.sm.padding,
+      paddingRight: breakpoint.sm.padding
+    },
+    md: {
+      maxWidth: breakpoint.md.minWidth,
+      paddingLeft: breakpoint.md.padding,
+      paddingRight: breakpoint.md.padding
+    },
+    lg: {
+      maxWidth: breakpoint.lg.minWidth,
+      paddingLeft: breakpoint.lg.padding,
+      paddingRight: breakpoint.lg.padding
+    }
+  }
 };
 const getContainerProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

package/dist/lib/container/types.d.ts

@@ -1,9 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
-export type ContainerPosition = 'center' | 'start' | 'end';
-export type ContainerResponsiveProps = {
-    position?: ContainerPosition;
-};
-type ContainerExtendedProps = PropsWithSx<ToResponsiveProps<ContainerResponsiveProps>>;
-export type ContainerProps = ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>;
-export {};
+import { PrimitiveProps } from '../primitive';
+export type ContainerProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;

package/dist/lib/date-picker/date-picker.js

@@ -88,7 +88,7 @@ const DatePicker = (_props, ref) => {
         justifyContent: "center",
         overflow: "hidden",
         borderRadius: 12,
-        backgroundColor: getColorVar("white"),
+        backgroundColor: getColorVar("common.white"),
         fontSize: "0.875rem",
         lineHeight: "1.25rem",
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",

package/dist/lib/flexbox/README.md

@@ -1,6 +1,6 @@
 # Flexbox
 
-A layout component that renders a `div` with `display: flex` applied by default. It supports responsive `sx` prop overrides and an optional `container` prop that applies the project's responsive container styles for page-level layout use cases.
+A layout component that renders a `div` with `display: flex` applied by default. It supports responsive `sx` prop overrides.
 
 ## Import
 
@@ -12,7 +12,6 @@ import { Flexbox } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `container` | `boolean` | undefined (false) | When true, applies the global `containerStyle` (responsive padding and max-width) on top of the flex display — useful for page-level section wrappers. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start' } | Responsive style overrides via the Emotion-powered sx prop. Supports base styles plus `sm`, `md`, and `lg` breakpoint keys. Merged on top of the component defaults (`flexDirection: 'row'`, `alignItems: 'flex-start'`, `justifyContent: 'flex-start'`). |
 | `children` | `React.ReactNode` | - | Child elements rendered inside the flex container — typically `FlexItem` components. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying `div` element. |

package/dist/lib/flexbox/flexbox/flexbox.d.ts

@@ -1,2 +1,2 @@
 import { FlexboxProps } from './types';
-export declare const Flexbox: ({ children, container, ref, ..._props }: FlexboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flexbox: ({ children, ref, ..._props }: FlexboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { getFlexboxProps } from "./helpers.js";
-import { containerStyle } from "../../../constants/emotion.js";
 import { Primitive } from "../../primitive/primitive.js";
-const Flexbox = ({ children, container, ref, ..._props }) => {
+const Flexbox = ({ children, ref, ..._props }) => {
   const { sx = {}, ...rest } = getFlexboxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
@@ -10,7 +9,6 @@ const Flexbox = ({ children, container, ref, ..._props }) => {
       ...rest,
       sx: {
         display: "flex",
-        ...container ? containerStyle : {},
         ...sx,
         sm: { ...sx.sm },
         md: { ...sx.md },

package/dist/lib/flexbox/flexbox/types.d.ts

@@ -1,7 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge } from '../../../types';
-interface FlexboxExtendedProps {
-    container?: boolean;
-}
-export type FlexboxProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<FlexboxExtendedProps>>;
-export {};
+import { PrimitiveProps } from '../../primitive';
+export type FlexboxProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;

package/dist/lib/grid/cell/README.md

@@ -0,0 +1,66 @@
+# Cell
+
+A CSS Grid child component that supports configurable column spans. It is intended to be used inside Grid.
+
+## Import
+
+```tsx
+import { Cell } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `colSpan` | `number` | - | Number of grid columns the cell should span. Generates `grid-column: span colSpan`. Supports responsive variants via sm/md/lg. |
+| `sm` | `CellResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ colSpan?: number }`. |
+| `md` | `CellResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ colSpan?: number }`. |
+| `lg` | `CellResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ colSpan?: number }`. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for inline Emotion styles. Supports responsive keys (sm, md, lg) alongside base styles. |
+| `children` | `React.ReactNode` | - | Cell content. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
+
+## Examples
+
+### Span two columns
+
+```tsx
+<Grid cols={3}>
+  <Cell colSpan={2}>Span 2 columns</Cell>
+  <Cell>Cell 2</Cell>
+  <Cell>Cell 3</Cell>
+</Grid>
+```
+
+### Responsive spans
+
+```tsx
+<Grid cols={4}>
+  <Cell colSpan={4} sm={{ colSpan: 2 }} md={{ colSpan: 1 }}>
+    Responsive item
+  </Cell>
+</Grid>
+```
+
+### Custom styles
+
+```tsx
+<Cell colSpan={2} sx={{ padding: 12, backgroundColor: 'var(--color-neutral-100)' }}>
+  Styled cell
+</Cell>
+```
+
+## Related Components
+
+- [Grid](../grid/README.md)
+- [Primitive](../../primitive/README.md)
+
+## Dependencies
+
+- lodash-es
+
+## See Also
+
+- [Component Source](./cell.tsx)
+- [Storybook Stories](./cell.stories.tsx)
+- [Main README](../../../README.md)

package/dist/lib/grid/{README.md → grid/README.md}

@@ -16,7 +16,6 @@ import { Grid } from '@janbox/storefront-ui';
 | `sm` | `GridResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ cols?: number }`. |
 | `md` | `GridResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ cols?: number }`. |
 | `lg` | `GridResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ cols?: number }`. |
-| `container` | `boolean` | false | When true, applies the shared responsive container styles (padding and max-width) from `containerStyle`. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for inline Emotion styles. Supports responsive keys (sm, md, lg) alongside base styles. |
 | `children` | `React.ReactNode` | - | Grid children, typically Cell components. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
@@ -48,7 +47,7 @@ import { Grid } from '@janbox/storefront-ui';
 ### Responsive columns (1 on mobile, 2 on tablet, 4 on desktop)
 
 ```tsx
-<Grid cols={1} sm={{ cols: 2 }} md={{ cols: 4 }} container>
+<Grid cols={1} sm={{ cols: 2 }} md={{ cols: 4 }}>
   <Cell>Item 1</Cell>
   <Cell>Item 2</Cell>
   <Cell>Item 3</Cell>
@@ -58,8 +57,8 @@ import { Grid } from '@janbox/storefront-ui';
 
 ## Related Components
 
-- [Cell](./cell/README.md)
-- [Primitive](../primitive/README.md)
+- [Cell](../cell/README.md)
+- [Primitive](../../primitive/README.md)
 
 ## Dependencies
 
@@ -67,6 +66,6 @@ import { Grid } from '@janbox/storefront-ui';
 
 ## See Also
 
-- [Component Source](./index.ts)
+- [Component Source](./grid.tsx)
 - [Storybook Stories](./grid.stories.tsx)
-- [Main README](../../README.md)
+- [Main README](../../../README.md)

package/dist/lib/grid/grid/grid.js

@@ -1,18 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getGridProps } from "./helpers.js";
-import { containerStyle } from "../../../constants/emotion.js";
 import { Primitive } from "../../primitive/primitive.js";
 const GRID_MINIMUM_COLS = 1;
 const GRID_MAXIMUM_COLS = 24;
 const Grid = ({ children, ref, ..._props }) => {
-  const { cols, sm, md, lg, container, sx = {}, ...rest } = getGridProps(_props);
+  const { cols, sm, md, lg, sx = {}, ...rest } = getGridProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {
         display: "grid",
-        ...container ? containerStyle : {},
         ...createStyle({ cols }),
         ...sx,
         sm: { ...createStyle(sm), ...sx.sm },

package/dist/lib/grid/grid/types.d.ts

@@ -1,10 +1,9 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 export interface GridResponsiveProps {
     cols?: number;
 }
-type GridExtendedProps = PropsWithSx<ToResponsiveProps<GridResponsiveProps> & {
-    container?: boolean;
-}>;
-export type GridProps = ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>;
+type GridExtendedProps = ToResponsiveProps<GridResponsiveProps>;
+export type GridProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>>;
 export {};

package/dist/lib/icon-button/icon-button.js

@@ -15,7 +15,7 @@ const IconButton = ({ children, ref, ..._props }) => {
     dark,
     light,
     main,
-    contrastText,
+    contrast,
     placeholder: placeholderColor,
     ariaDisabledSurface,
     ariaDisabledText
@@ -42,7 +42,7 @@ const IconButton = ({ children, ref, ..._props }) => {
     },
     variant === "contained" && {
       backgroundColor: isLoading ? placeholderColor : main,
-      color: contrastText,
+      color: contrast,
       ":hover": {
         backgroundColor: dark
       },

package/dist/lib/stepper/step.js

@@ -6,32 +6,32 @@ import CheckIcon from "../../assets/svg/check.svg.js";
 import { Icon } from "../icon/icon.js";
 const stateStyles = {
   done: {
-    text: { color: getColorVar("white") },
+    text: { color: getColorVar("common.white") },
     bg: {
       borderColor: getColorVar("primary.600"),
       backgroundColor: getColorVar("primary.600"),
-      color: getColorVar("white")
+      color: getColorVar("common.white")
     }
   },
   active: {
     text: { color: getColorVar("primary.600") },
     bg: {
       borderColor: getColorVar("primary.600"),
-      backgroundColor: getColorVar("white"),
+      backgroundColor: getColorVar("common.white"),
       color: getColorVar("primary.600")
     }
   },
   normal: {
-    text: { color: getColorVar("white") },
+    text: { color: getColorVar("common.white") },
     bg: {
       borderColor: getColorVar("neutral.500"),
       backgroundColor: getColorVar("neutral.500"),
-      color: getColorVar("white")
+      color: getColorVar("common.white")
     }
   }
 };
 const Step = forwardRef((props, ref) => {
-  const { state = "normal", content, className, size = 32, children, ...rest } = props;
+  const { state = "normal", content, size = 32, children, ...rest } = props;
   const styles = stateStyles[state] ?? stateStyles.normal;
   const checked = state === "done";
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.js

@@ -124,7 +124,7 @@ const SwiperDotsPaging = ({
                         ...inViewIndexes.includes(slideIndex) ? { visibility: "hidden" } : {},
                         borderWidth: 1,
                         borderColor: getColorVar(`${color}.600`),
-                        backgroundColor: getColorVar("white")
+                        backgroundColor: getColorVar("common.white")
                       },
                       onClick: onDotClick,
                       "data-index": slideIndex

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -217,7 +217,7 @@ const ArrowButton = ({
             borderStyle: "solid",
             borderColor: getColorVar(`${color}.600`),
             borderRadius: 9999,
-            backgroundColor: getColorVar("white"),
+            backgroundColor: getColorVar("common.white"),
             ":disabled": {
               opacity: visible ? 0.5 : 0
             },

package/dist/lib/table/table/table.d.ts

@@ -1,2 +1,2 @@
 import { TableProps } from './types';
-export declare const Table: ({ children, sx, ...props }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: ({ children, sx, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/table/table/table.js

@@ -1,20 +1,21 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Table = ({ children, sx, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "table",
+    Primitive,
     {
-      css: createSxInterpolation({
+      ...props,
+      sx: {
         width: "100%",
         borderTopLeftRadius: "0.5rem",
         borderTopRightRadius: "0.5rem",
         overflow: "hidden",
         backgroundColor: getColorVar("surface.default"),
         ...sx
-      }),
-      ...props,
+      },
+      as: "table",
       children
     }
   );

package/dist/lib/table/table/types.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableProps = PropsWithSx<JSX.IntrinsicElements['table']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableProps = PrimitiveProps<JSX.IntrinsicElements['table'], 'table'>;

package/dist/lib/table/table-footer/table-footer.d.ts

@@ -1,2 +1,2 @@
 import { TableFooterProps } from './types';
-export declare const TableFooter: ({ sx, children, ...props }: TableFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableFooter: ({ children, ...props }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/table/table-footer/table-footer.js

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const TableFooter = ({ sx, children, ...props }) => {
-  return /* @__PURE__ */ jsx("tfoot", { css: createSxInterpolation(sx), ...props, children });
+import { jsx } from "react/jsx-runtime";
+import { Primitive } from "../../primitive/primitive.js";
+const TableFooter = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Primitive, { ...props, as: "tfoot", children });
 };
 export {
   TableFooter