@janbox/storefront-ui 3.0.1 → 3.0.2

package/dist/components/svg-loader.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
-export type SvgLoaderProps = JSX.IntrinsicElements['svg'] & {
+import { PropsWithSx } from '../types';
+export type SvgLoaderProps = PropsWithSx<JSX.IntrinsicElements['svg'] & {
     source: string;
-};
-export declare const SvgLoader: import('react').ForwardRefExoticComponent<Omit<SvgLoaderProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+}>;
+export declare const SvgLoader: ({ sx, source, ref, ...props }: SvgLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/svg-loader.js

@@ -1,14 +1,19 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useMemo, cloneElement } from "react";
+import { useId, useMemo, cloneElement } from "react";
 import { parseSvgString } from "../utils/common.js";
-const SvgLoader = forwardRef(({ source, ...props }, ref) => {
+import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
+const SvgLoader = ({ sx, source, ref, ...props }) => {
   const uniqueId = useId();
   const jsxSvg = useMemo(() => parseSvgString(source, uniqueId), [source, uniqueId]);
-  return /* @__PURE__ */ jsx(Fragment, { children: !!jsxSvg && cloneElement(jsxSvg, {
-    ...props,
-    ref
-  }) });
-});
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => {
+    if (!jsxSvg) return /* @__PURE__ */ jsx(Fragment, {});
+    return cloneElement(jsxSvg, {
+      ...props,
+      className: cx(css(sx), props.className),
+      ref
+    });
+  } });
+};
 export {
   SvgLoader
 };

package/dist/index.js

@@ -82,6 +82,7 @@ import { Select } from "./lib/select/select.js";
 import { StarRating } from "./lib/star-rating/star-rating.js";
 import { Step } from "./lib/stepper/step.js";
 import { Stepper } from "./lib/stepper/stepper.js";
+import { Stylesheet } from "./lib/stylesheet/stylesheet.js";
 import { SuspenseQuery } from "./lib/suspense-query/suspense-query.js";
 import { Swiper } from "./lib/swiper/swiper/swiper.js";
 import { SwiperSlide } from "./lib/swiper/swiper-slide/swiper-slide.js";
@@ -229,6 +230,7 @@ export {
   StarRating,
   Step,
   Stepper,
+  Stylesheet,
   SuspenseQuery,
   Swiper,
   SwiperSlide,

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

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

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

@@ -1,34 +1,45 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();
-  const { sx, containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
+  const { containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
   const { open } = useAccordionContext();
   const defaultOpenRef = useRef(open);
-  const css = [
-    {
-      width: "100%"
-    },
-    createSxInterpolation(sx)
-  ];
   const initial = defaultOpenRef.current ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     motion.div,
     {
       initial,
       animate: open ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 },
       transition: { duration: 0.3 },
-      css: { overflow: "hidden", width: "100%" },
       ...containerProps,
+      className: cx(
+        css({
+          overflow: "hidden",
+          width: "100%"
+        }),
+        containerProps == null ? void 0 : containerProps.className
+      ),
       ref,
-      children: /* @__PURE__ */ jsx("div", { ...props, css, children })
+      children: /* @__PURE__ */ jsx(
+        Primitive,
+        {
+          ...props,
+          sx: {
+            width: "100%",
+            ...props.sx
+          },
+          children
+        }
+      )
     }
-  );
+  ) });
 };
 export {
   AccordionContent

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/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/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)
     });
   } });
 };

package/dist/lib/select/select.js

@@ -277,15 +277,15 @@ const Select = ({
                         { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                         getTextCss(rest == null ? void 0 : rest.size)
                       ],
-                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
+                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx(Primitive, { css: { color: getColorVar("neutral.400"), display: "block" }, as: "span", children: placeholder })
                     }
                   )
                 }
               ) }),
               /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
-                "div",
+                Primitive,
                 {
-                  css: {
+                  sx: {
                     paddingTop: 8,
                     paddingBottom: 8,
                     border: "1px solid",
@@ -297,7 +297,7 @@ const Select = ({
                     backgroundColor: getColorVar("surface.default")
                   },
                   children: [
-                    searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                    searchable && /* @__PURE__ */ jsx(Primitive, { sx: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
                       Input,
                       {
                         size: rest.size,

package/dist/lib/stepper/stepper.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { Step } from "./step.js";
 import { Progress } from "../progress/progress.js";
+import { Primitive } from "../primitive/primitive.js";
 const maxPercent = 100;
 const Stepper = forwardRef((props, ref) => {
   const { direction = "horizontal", items, activeIndex = 0, circleSize = 32, ...rest } = props;
@@ -49,7 +50,7 @@ const Stepper = forwardRef((props, ref) => {
       );
     });
   };
-  return /* @__PURE__ */ jsxs("div", { css: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs(Primitive, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ jsx(
       Progress,
       {

package/dist/lib/stylesheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './stylesheet';

package/dist/lib/stylesheet/stylesheet.d.ts

@@ -0,0 +1,2 @@
+import { StylesheetProps } from './types';
+export declare const Stylesheet: ({ children }: StylesheetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/stylesheet/stylesheet.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { ClassNames } from "@emotion/react";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+const Stylesheet = ({ children }) => {
+  return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => {
+    return children({
+      css: (sx = {}) => {
+        const { sm, md, lg, ...xs } = sx;
+        return css({
+          ...xs,
+          [mediaQuery("sm")]: sm,
+          [mediaQuery("md")]: md,
+          [mediaQuery("lg")]: lg
+        });
+      },
+      cx
+    });
+  } });
+};
+export {
+  Stylesheet
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PropsWithSx } from '../../types';
+export type StylesheetChildrenProps = {
+    css: (sx?: PropsWithSx['sx']) => string;
+    cx: (...classNames: Array<string | undefined | null | false>) => string;
+};
+export type StylesheetProps = {
+    children: (props: StylesheetChildrenProps) => ReactNode;
+};

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

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

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

@@ -1,31 +1,30 @@
-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";
-const TableBody = ({ sx, children, ref, ...props }) => {
+import { Primitive } from "../../primitive/primitive.js";
+const TableBody = ({ children, ref, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "tbody",
+    Primitive,
     {
-      css: [
-        {
-          "& > tr": {
-            position: "relative",
-            "&::after": {
-              content: '""',
-              position: "absolute",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              borderBottomWidth: 1,
-              borderBottomStyle: "solid",
-              borderBottomColor: getColorVar("neutral.100")
-            }
-          }
-        },
-        createSxInterpolation(sx)
-      ],
       ...props,
       ref,
+      sx: {
+        "& > tr": {
+          position: "relative",
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderBottomWidth: 1,
+            borderBottomStyle: "solid",
+            borderBottomColor: getColorVar("neutral.100")
+          }
+        },
+        ...props.sx
+      },
+      as: "tbody",
       children
     }
   );

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

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

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

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

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

@@ -1,29 +1,28 @@
-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 TableHead = ({ sx, children, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "thead",
+    Primitive,
     {
-      css: [
-        {
-          position: "relative",
-          fontWeight: 500,
-          "&::after": {
-            content: '""',
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            borderTopWidth: 1,
-            borderTopStyle: "solid",
-            borderTopColor: getColorVar("neutral.200")
-          }
-        },
-        createSxInterpolation(sx)
-      ],
       ...props,
+      sx: {
+        position: "relative",
+        fontWeight: 500,
+        ":after": {
+          content: '""',
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderTopWidth: 1,
+          borderTopStyle: "solid",
+          borderTopColor: getColorVar("neutral.200")
+        },
+        ...sx
+      },
+      as: "thead",
       children
     }
   );

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

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

package/dist/lib/tabs/tab-indicator/tab-indicator.d.ts

@@ -1 +1 @@
-export declare const TabIndicator: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TabIndicator: () => import("react/jsx-runtime").JSX.Element;

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
@@ -53,7 +53,7 @@ const TabIndicator = () => {
       resizeObserver.disconnect();
     };
   }, [activeTabElement]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsx(
     motion.div,
     {
       initial: {
@@ -65,18 +65,16 @@ const TabIndicator = () => {
         transform: `translateX(${indicatorRect.left}px)`
       },
       ref: indicatorEl,
-      css: [
-        {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          backgroundColor: "currentcolor",
-          borderRadius: 8
-        },
-        createSxInterpolation(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx)
-      ]
+      className: css({
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        backgroundColor: "currentcolor",
+        borderRadius: 8,
+        ...tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx
+      })
     }
-  );
+  ) });
 };
 export {
   TabIndicator

package/dist/lib/tabs/tabs/tabs.js

@@ -2,11 +2,10 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useMemo } from "react";
 import { getTabsProps, TabsContext } from "./helpers.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Tabs = ({ ref, children, ..._props }) => {
   const {
     defaultActiveIndex,
-    sx,
     activeIndex,
     onTabChange,
     tabProps,
@@ -35,7 +34,7 @@ const Tabs = ({ ref, children, ..._props }) => {
       preventActiveTabChange
     };
   }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { css: createSxInterpolation(sx), ...rest, ref, children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Primitive, { ...rest, ref, children }) });
 };
 export {
   Tabs

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

@@ -4,13 +4,13 @@ import dayjs from "dayjs";
 import { isNil, uniqueId } from "lodash-es";
 import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { getResponsiveProp, getSizeVariantState, getColorShadesByVariant } from "../../utils/index.js";
 import { VirtualizedList } from "../../components/virtualized-list.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import ClockIcon from "../../assets/svg/clock-time.svg.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
@@ -223,12 +223,16 @@ const TimePicker = ({
       }
     );
   };
-  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      ...restContainerProps,
-      css: [{ display: "flex", flexDirection: "column", width: "100%" }, createSxInterpolation(containerSx)],
+      ...containerProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
       children: /* @__PURE__ */ jsxs(
         Floating,
         {
@@ -244,15 +248,15 @@ const TimePicker = ({
           onOpenChange: prehandleOpenChange,
           ref: floatingRef,
           children: [
-            /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs("div", { css: createSxInterpolation(sx), children: [
-              !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
+            /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs(Primitive, { sx, children: [
+              !selectedDate && !!placeholder && /* @__PURE__ */ jsx(Primitive, { sx: { color: getColorShadesByVariant("neutral").placeholder }, as: "span", children: placeholder }),
               !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
               getIcon()
             ] }) }),
             /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
-              "div",
+              Primitive,
               {
-                css: {
+                sx: {
                   paddingTop: "0.5rem",
                   paddingBottom: "0.5rem",
                   borderWidth: 1,
@@ -261,7 +265,7 @@ const TimePicker = ({
                   boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
                   fontSize: getTypographyVar("sm").fontSize,
                   lineHeight: getTypographyVar("sm").lineHeight,
-                  backgroundColor: "var(--color-surface-default)"
+                  backgroundColor: getColorVar("surface.default")
                 },
                 children: portalContentRenderer()
               }

package/dist/lib/video/video.d.ts

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

package/dist/lib/video/video.js

@@ -1,10 +1,10 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import ReactPlayer from "react-player";
 import { getVideoProps } from "./helpers.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const Video = ({ ref, ..._props }) => {
   const { sx, ...rest } = getVideoProps(_props);
-  return /* @__PURE__ */ jsx(ReactPlayer, { css: createSxInterpolation(sx), width: "", height: "", ref, ...rest });
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(ReactPlayer, { width: "", height: "", ref, ...rest, className: cx(css(sx), rest.className) }) });
 };
 export {
   Video

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [