@janbox/storefront-ui 3.0.0 → 3.0.2

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/filter-panel/checkbox-filter-panel.js

@@ -7,6 +7,7 @@ import "../../theme/palette.js";
 import { matchSearch } from "../../utils/common.js";
 import { ArrayParamParser } from "../../utils/query-params.js";
 import { Checkbox } from "../checkbox/checkbox.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Input } from "../input/input.js";
 const ROW_HEIGHT = 32;
 const DISPLAY_ROW_COUNT = 5;
@@ -65,7 +66,7 @@ const CheckboxFilterPanel = ({
       }
       onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsx("div", { css: { paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Primitive, { sx: { paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
       Checkbox,
       {
         containerProps: {
@@ -82,7 +83,7 @@ const CheckboxFilterPanel = ({
     ) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Input, { value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
+    searchEnabled && /* @__PURE__ */ jsx(Primitive, { sx: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Input, { value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
     /* @__PURE__ */ jsx(
       VirtualizedList,
       {

package/dist/lib/filter-panel/price-range-filter-panel.d.ts

@@ -1,2 +1,2 @@
 import { InputRangeFilterPanelProps } from './types';
-export declare const PriceRangeFilterPanel: ({ value, queryParam, placeholder, priceTypes, onPriceChange, onPriceTypeChange, }: InputRangeFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PriceRangeFilterPanel: ({ value, queryParam, placeholder, priceTypes, onPriceChange, onPriceTypeChange, }: InputRangeFilterPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/filter-panel/price-range-filter-panel.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { TYPING_DEBOUNCE } from "../../constants/index.js";
 import { useQueryParams } from "../../hooks/use-query-params.js";
 import { useId } from "react";
@@ -7,6 +7,7 @@ import "../../theme/palette.js";
 import { StringParamParser, NumberParamParser } from "../../utils/query-params.js";
 import { RadioButton } from "../radio-button/radio-button.js";
 import { InputRange } from "../input-range/input-range.js";
+import { Primitive } from "../primitive/primitive.js";
 const PriceRangeFilterPanel = ({
   value,
   queryParam,
@@ -86,8 +87,8 @@ const PriceRangeFilterPanel = ({
     }
     onPriceTypeChange == null ? void 0 : onPriceTypeChange(event);
   };
-  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ jsx("div", { css: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: priceTypes.map((priceType) => {
+  return /* @__PURE__ */ jsxs(Primitive, { sx: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Primitive, { sx: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: priceTypes.map((priceType) => {
       var _a2;
       return /* @__PURE__ */ jsx(
         RadioButton,

package/dist/lib/filter-panel/radio-filter-panel.js

@@ -6,6 +6,7 @@ import { useQueryParams } from "../../hooks/use-query-params.js";
 import "../../theme/palette.js";
 import { matchSearch } from "../../utils/common.js";
 import { StringParamParser } from "../../utils/query-params.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Input } from "../input/input.js";
 import { RadioButton } from "../radio-button/radio-button.js";
 const ROW_HEIGHT = 32;
@@ -72,7 +73,7 @@ const RadioFilterPanel = ({
     ) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(Input, { value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
+    searchEnabled && /* @__PURE__ */ jsx(Primitive, { sx: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(Input, { value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
     /* @__PURE__ */ jsx(
       VirtualizedList,
       {

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/flex-item/flex-item.d.ts

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

package/dist/lib/flexbox/flex-item/flex-item.js

@@ -1,15 +1,20 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getFlexItemProps } from "./helpers.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const FlexItem = ({ children, ref, ...rest }) => {
   const { sx, ...props } = getFlexItemProps(rest);
-  const css = [
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      maxWidth: "100%"
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...props, ref, children });
+      sx: {
+        maxWidth: "100%",
+        ...sx
+      },
+      ...props,
+      ref,
+      children
+    }
+  );
 };
 export {
   FlexItem

package/dist/lib/flexbox/flex-item/types.d.ts

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

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/icon.d.ts

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

package/dist/lib/icon/icon.js

@@ -1,38 +1,40 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getIconProps } from "./helpers.js";
 import { SvgLoader } from "../../components/svg-loader.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
 const Icon = ({ children: _children, ref, ..._props }) => {
-  const { source, sx, size, md, sm, lg, ...props } = getIconProps(_props);
+  var _a, _b, _c;
+  const { size, md, sm, lg, ...props } = getIconProps(_props);
   return /* @__PURE__ */ jsx(
     SvgLoader,
     {
-      source,
       ...props,
-      css: [
-        createStyle({ size }),
-        {
-          [mediaQuery("sm")]: createStyle(sm),
-          [mediaQuery("md")]: createStyle(md),
-          [mediaQuery("lg")]: createStyle(lg)
-        },
-        createSxInterpolation(sx)
-      ],
       width: void 0,
       height: void 0,
+      sx: {
+        ...createStyle({ size }),
+        ...props.sx,
+        sm: {
+          ...createStyle(sm),
+          ...(_a = props.sx) == null ? void 0 : _a.sm
+        },
+        md: {
+          ...createStyle(md),
+          ...(_b = props.sx) == null ? void 0 : _b.md
+        },
+        lg: {
+          ...createStyle(lg),
+          ...(_c = props.sx) == null ? void 0 : _c.lg
+        }
+      },
       ref
     }
   );
 };
 const createStyle = ({ size } = {}) => {
-  return [
-    {
-      width: size,
-      height: size
-    }
-  ];
+  return {
+    width: size,
+    height: size
+  };
 };
 export {
   Icon

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

@@ -8,6 +8,7 @@ import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.
 import { animateSpinStyle } from "../../constants/emotion.js";
 import { ensureBoolean } from "../../utils/common.js";
 import { Icon } from "../icon/icon.js";
+import { Primitive } from "../primitive/primitive.js";
 import { RippleEffect } from "../ripple-effect/ripple-effect.js";
 const IconButton = ({ children, ref, ..._props }) => {
   const { size, color, variant, icon, isLoading, sx, sm, md, lg, ...rest } = getIconButtonProps(_props);
@@ -119,11 +120,12 @@ const IconButton = ({ children, ref, ..._props }) => {
     ),
     children,
     isLoading && /* @__PURE__ */ jsx(
-      "span",
+      Primitive,
       {
         "data-loading": true,
-        css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
-        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+        sx: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
+        as: "span",
+        children: /* @__PURE__ */ jsx(Icon, { sx: animateSpinStyle, source: LoadingIcon })
       }
     ),
     /* @__PURE__ */ jsx(RippleEffect, {})

package/dist/lib/index.d.ts

@@ -57,6 +57,7 @@ export * from './video';
 export * from './lightbox';
 export * from './cascader';
 export * from './primitive';
+export * from './stylesheet';
 export * from './price-label';
 export * from './avatar';
 export * from './suspense-query';

package/dist/lib/lightbox/lightbox.js

@@ -14,6 +14,7 @@ import { Swiper } from "../swiper/swiper/swiper.js";
 import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Image } from "../image/image.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { FloatingClose } from "../floating/floating-close/floating-close.js";
@@ -57,7 +58,7 @@ const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
       mainApi == null ? void 0 : mainApi.off("select", onSelect);
     };
   }, [mainApi]);
-  return /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Primitive, { sx: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
     "div",
     {
       css: {

package/dist/lib/pagination/pagination.js

@@ -94,7 +94,7 @@ const Pagination = ({ ref, ..._props }) => {
     );
   };
   return /* @__PURE__ */ jsxs("div", { css, ...rest, ref, children: [
-    showFirstPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_a = states == null ? void 0 : states.normal) == null ? void 0 : _a.color, onClick: handleFirstClick, children: /* @__PURE__ */ jsx(PaginationIcon, { css: { transform: "rotate(180deg)" }, source: ArrowForwardIcon }) }),
+    showFirstPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_a = states == null ? void 0 : states.normal) == null ? void 0 : _a.color, onClick: handleFirstClick, children: /* @__PURE__ */ jsx(PaginationIcon, { sx: { transform: "rotate(180deg)" }, source: ArrowForwardIcon }) }),
     showPrevPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_b = states == null ? void 0 : states.normal) == null ? void 0 : _b.color, onClick: handlePrevClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowLeftIcon }) }),
     pageRange.map((pageItem, index) => {
       var _a2, _b2, _c2, _d2, _e;

package/dist/lib/popover/popover-content/popover-content.d.ts

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

package/dist/lib/popover/popover-content/popover-content.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
 import { FloatingContent } from "../../floating/floating-content/floating-content.js";
@@ -6,16 +6,17 @@ const PopoverContent = (props) => {
   return /* @__PURE__ */ jsx(
     FloatingContent,
     {
-      css: {
+      ...props,
+      sx: {
         backgroundColor: getColorVar("surface.default"),
         padding: "0.75rem",
         borderRadius: "0.75rem",
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: getColorVar("neutral.100"),
-        boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
-      },
-      ...props
+        boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+        ...props.sx
+      }
     }
   );
 };

package/dist/lib/primitive/primitive.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
-import { ClassNames } from "@emotion/react";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const Primitive = ({ as = "div", sx, ...rest }) => {
-  return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => {
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css, cx }) => {
     return createElement(as, {
       ...rest,
-      className: cx(css(createSxInterpolation(sx)), rest.className)
+      className: cx(css(sx), rest.className)
     });
   } });
 };