@janbox/storefront-ui 1.0.27 → 2.0.1

package/dist/lib/select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,UAAU,mBAAmB,CAC3B,CAAC,SAAS,iBAAiB,EAC3B,CAAC,SAAS,MAAM,CAChB,SAAQ,gBAAgB,CAAC,qBAAqB,CAAC;IAC/C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAC5F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAChH,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,UAAU,mBAAmB,CAC3B,CAAC,SAAS,iBAAiB,EAC3B,CAAC,SAAS,MAAM,CAChB,SAAQ,iBAAiB,CAAC,qBAAqB,CAAC;IAChD,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAChH,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1B,CAAC"}

package/dist/lib/swiper/swiper/swiper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/swiper.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAS7D,eAAO,MAAM,MAAM,wCAAyC,WAAW,qDAoEtE,CAAC"}
+{"version":3,"file":"swiper.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/swiper.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAW7D,eAAO,MAAM,MAAM,wCAAyC,WAAW,qDAmEtE,CAAC"}

package/dist/lib/swiper/swiper/swiper.js

@@ -8,12 +8,13 @@ import { isNumber } from "lodash-es";
 import { getSwiperProps } from "./helpers.js";
 import { mediaQuery } from "../../../theme/screens.js";
 import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { SwiperDotsPaging } from "../swiper-dots-paging/swiper-dots-paging.js";
+import { Primitive } from "../../primitive/primitive.js";
 const SWIPER_SLIDE_GAP_VAR_NAME = "--slice-gap";
 const SWIPER_SLIDE_GAP_VAR = `var(${SWIPER_SLIDE_GAP_VAR_NAME}, 0px)`;
 const Swiper = ({ children, onApi, ref, ..._props }) => {
-  var _a, _b, _c, _d;
-  const { xs, sm, md, lg, autoplayOptions, options, paging, ...rest } = getSwiperProps(_props);
+  const { sx, slidesPerView, spaceBetween, sm, md, lg, autoplayOptions, options, paging, ...rest } = getSwiperProps(_props);
   const [emblaRef, emblaApi] = useEmblaCarousel(
     {
       align: "start",
@@ -33,12 +34,13 @@ const Swiper = ({ children, onApi, ref, ..._props }) => {
       maxWidth: "100%"
     },
     (options == null ? void 0 : options.axis) === "y" && { height: "100%" },
-    createStyle(xs),
+    createStyle({ slidesPerView, spaceBetween }),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
       [mediaQuery("lg")]: createStyle(lg)
-    }
+    },
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsxs("div", { css, ...rest, ref: mergedRefs, children: [
     /* @__PURE__ */ jsx(
@@ -55,26 +57,23 @@ const Swiper = ({ children, onApi, ref, ..._props }) => {
       }
     ),
     /* @__PURE__ */ jsx(Suspense, { fallback: null, children: (paging == null ? void 0 : paging.type) === "dots" && /* @__PURE__ */ jsx(
-      "div",
+      Primitive,
       {
-        css: {
+        sx: {
           position: "absolute",
           left: 0,
           right: 0,
           display: "flex",
           justifyContent: "center",
           bottom: 0,
-          ...(_a = paging.xs) == null ? void 0 : _a.css,
-          [mediaQuery("sm")]: (_b = paging.sm) == null ? void 0 : _b.css,
-          [mediaQuery("md")]: (_c = paging.md) == null ? void 0 : _c.css,
-          [mediaQuery("lg")]: (_d = paging.lg) == null ? void 0 : _d.css
+          ...paging.sx
         },
         children: /* @__PURE__ */ jsx(SwiperDotsPaging, { api: emblaApi, ...paging.options })
       }
     ) })
   ] });
 };
-const createStyle = ({ slidesPerView, css, spaceBetween } = {}) => {
+const createStyle = ({ slidesPerView, spaceBetween } = {}) => {
   return [
     {
       [`& > [role="group"]`]: {
@@ -84,8 +83,7 @@ const createStyle = ({ slidesPerView, css, spaceBetween } = {}) => {
           flexBasis: isNumber(slidesPerView) ? `calc((100% - (${SWIPER_SLIDE_GAP_VAR} * ${slidesPerView - 1})) / ${slidesPerView})` : void 0
         }
       }
-    },
-    css
+    }
   ];
 };
 export {

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

@@ -2,26 +2,26 @@ import { JSX } from 'react';
 import { AutoplayOptionsType } from 'embla-carousel-autoplay';
 import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
 import { SwiperDotsPagingProps } from '../swiper-dots-paging/types';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
 export type SwiperOptions = Parameters<typeof useEmblaCarousel>[0];
 export type SwiperApi = UseEmblaCarouselType[1];
-export interface SwiperResponsiveProps extends PropsWithCSS {
+export type SwiperResponsiveProps = {
     slidesPerView?: number | 'auto';
     spaceBetween?: number;
-}
-type SwiperDosPaging = ResponsiveDesign<PropsWithCSS> & {
+};
+type SwiperDosPaging = PropsWithSx<{
     type: 'dots';
     options?: SwiperDotsPagingProps;
-};
+}>;
 type SwiperPaging = SwiperDosPaging;
-type SwiperExtendedProps = ResponsiveDesign<SwiperResponsiveProps> & {
+type SwiperExtendedProps = PropsWithSx<ToResponsiveProps<SwiperResponsiveProps> & {
     autoplayOptions?: ShallowMerge<AutoplayOptionsType, {
         delay?: number;
     }>;
     onApi?: (api: SwiperApi) => void;
     options?: Partial<SwiperOptions>;
     paging?: SwiperPaging;
-};
+}>;
 export type SwiperProps = ShallowMerge<JSX.IntrinsicElements['div'], SwiperExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/swiper/swiper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAEhD,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,KAAK,eAAe,GAAG,gBAAgB,CAAC,YAAY,CAAC,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,CAAC;AAEpC,KAAK,mBAAmB,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,GAAG;IACnE,eAAe,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,WAAW,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACjC,CAAC,CAAC;AAEH,KAAK,YAAY,GAAG,eAAe,CAAC;AAEpC,KAAK,mBAAmB,GAAG,WAAW,CACpC,iBAAiB,CAAC,qBAAqB,CAAC,GAAG;IACzC,eAAe,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CACF,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/lib/swiper/swiper-slide/swiper-slide.d.ts

@@ -1,3 +1,3 @@
 import { SwiperSlideProps } from './types';
-export declare const SwiperSlide: ({ xs, sm, md, lg, ...props }: SwiperSlideProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SwiperSlide: ({ sx, ...props }: SwiperSlideProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=swiper-slide.d.ts.map

package/dist/lib/swiper/swiper-slide/swiper-slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper-slide.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-slide/swiper-slide.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,WAAW,iCAAkC,gBAAgB,qDAgBzE,CAAC"}
+{"version":3,"file":"swiper-slide.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-slide/swiper-slide.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,WAAW,qBAAsB,gBAAgB,qDAW7D,CAAC"}

package/dist/lib/swiper/swiper-slide/swiper-slide.js

@@ -1,19 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
-const SwiperSlide = ({ xs, sm, md, lg, ...props }) => {
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const SwiperSlide = ({ sx, ...props }) => {
   const css = [
     {
       flexShrink: 0,
       flexGrow: 0,
       overflow: "hidden"
     },
-    xs == null ? void 0 : xs.css,
-    {
-      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [mediaQuery("md")]: md == null ? void 0 : md.css,
-      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsx("div", { ...props, css });
 };

package/dist/lib/swiper/swiper-slide/types.d.ts

@@ -1,7 +1,4 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-interface SwiperSlideExtendedProps extends ResponsiveDesign<PropsWithCSS> {
-}
-export type SwiperSlideProps = ShallowMerge<JSX.IntrinsicElements['div'], SwiperSlideExtendedProps>;
-export {};
+import { PropsWithSx, ShallowMerge } from '../../../types';
+export type SwiperSlideProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/swiper/swiper-slide/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-slide/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,UAAU,wBAAyB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;CAAG;AAE5E,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-slide/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC"}

package/dist/lib/switch/switch.js

@@ -2,8 +2,6 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useRef } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import classes from "./switch.module.scss.js";
-import "lodash-es";
-import "../../theme/palette.js";
 import { cn } from "../../utils/stylesheet.js";
 const Switch = ({ children, className, ref, ...props }) => {
   const inputRef = useRef(null);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,2BAA4B,UAAU,qDAevD,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKrC,eAAO,MAAM,KAAK,+BAAgC,UAAU,qDAgB3D,CAAC"}

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

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

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

@@ -1,3 +1,4 @@
 import { JSX } from 'react';
-export type TableProps = JSX.IntrinsicElements['table'];
+import { PropsWithSx } from '../../../types';
+export type TableProps = PropsWithSx<JSX.IntrinsicElements['table']>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TableBodyProps } from './types';
-export declare const TableBody: ({ xs, sm, md, lg, children, ref, ...props }: TableBodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableBody: ({ sx, children, ref, ...props }: TableBodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-body.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-body/table-body.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,SAAS,gDAAiD,cAAc,qDAgCpF,CAAC"}
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-body/table-body.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,SAAS,oCAAqC,cAAc,qDA2BxE,CAAC"}

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

@@ -1,7 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mediaQuery } from "../../../theme/screens.js";
+import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-const TableBody = ({ xs, sm, md, lg, children, ref, ...props }) => {
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const TableBody = ({ sx, children, ref, ...props }) => {
   return /* @__PURE__ */ jsx(
     "tbody",
     {
@@ -21,12 +22,7 @@ const TableBody = ({ xs, sm, md, lg, children, ref, ...props }) => {
             }
           }
         },
-        xs == null ? void 0 : xs.css,
-        {
-          [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-          [mediaQuery("md")]: md == null ? void 0 : md.css,
-          [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-        }
+        createSxInterpolation(sx)
       ],
       ...props,
       ref,

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

@@ -1,4 +1,4 @@
-import { ShallowMerge, ResponsiveDesign, PropsWithCSS } from '../../../types';
+import { PropsWithSx } from '../../../types';
 import { JSX } from 'react';
-export type TableBodyProps = ShallowMerge<JSX.IntrinsicElements['tbody'], ResponsiveDesign<PropsWithCSS>>;
+export type TableBodyProps = PropsWithSx<JSX.IntrinsicElements['tbody']>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-body/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-body/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TableCellProps } from './types';
-export declare const TableCell: ({ children, ...props }: TableCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableCell: ({ sx, children, ...props }: TableCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-cell.d.ts.map

package/dist/lib/table/table-cell/table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-cell/table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,SAAS,2BAA4B,cAAc,qDAM/D,CAAC"}
+{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-cell/table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,SAAS,+BAAgC,cAAc,qDAcnE,CAAC"}

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

@@ -1,6 +1,19 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-const TableCell = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx("td", { css: { padding: 8 }, ...props, children });
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const TableCell = ({ sx, children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      css: [
+        {
+          padding: 8
+        },
+        createSxInterpolation(sx)
+      ],
+      ...props,
+      children
+    }
+  );
 };
 export {
   TableCell

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

@@ -1,3 +1,4 @@
 import { JSX } from 'react';
-export type TableCellProps = JSX.IntrinsicElements['td'];
+import { PropsWithSx } from '../../../types';
+export type TableCellProps = PropsWithSx<JSX.IntrinsicElements['td']>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/table/table-cell/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-cell/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-cell/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TableFooterProps } from './types';
-export declare const TableFooter: ({ children, ...props }: TableFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableFooter: ({ sx, children, ...props }: TableFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-footer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-footer.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-footer/table-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,2BAA4B,gBAAgB,qDAEnE,CAAC"}
+{"version":3,"file":"table-footer.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-footer/table-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,eAAO,MAAM,WAAW,+BAAgC,gBAAgB,qDAMvE,CAAC"}

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

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

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

@@ -1,3 +1,4 @@
 import { JSX } from 'react';
-export type TableFooterProps = JSX.IntrinsicElements['tfoot'];
+import { PropsWithSx } from '../../../types';
+export type TableFooterProps = PropsWithSx<JSX.IntrinsicElements['tfoot']>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TableHeadProps } from './types';
-export declare const TableHead: ({ xs, sm, md, lg, children, ...props }: TableHeadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableHead: ({ sx, children, ...props }: TableHeadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-head.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-head.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,SAAS,2CAA4C,cAAc,qDA8B/E,CAAC"}
+{"version":3,"file":"table-head.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,SAAS,+BAAgC,cAAc,qDAyBnE,CAAC"}

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

@@ -1,7 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mediaQuery } from "../../../theme/screens.js";
+import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-const TableHead = ({ xs, sm, md, lg, children, ...props }) => {
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const TableHead = ({ sx, children, ...props }) => {
   return /* @__PURE__ */ jsx(
     "thead",
     {
@@ -20,12 +21,7 @@ const TableHead = ({ xs, sm, md, lg, children, ...props }) => {
             borderTopColor: getColorVar("neutral.200")
           }
         },
-        xs == null ? void 0 : xs.css,
-        {
-          [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-          [mediaQuery("md")]: md == null ? void 0 : md.css,
-          [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-        }
+        createSxInterpolation(sx)
       ],
       ...props,
       children

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

@@ -1,4 +1,4 @@
-import { ShallowMerge, ResponsiveDesign, PropsWithCSS } from '../../../types';
+import { PropsWithSx } from '../../../types';
 import { JSX } from 'react';
-export type TableHeadProps = ShallowMerge<JSX.IntrinsicElements['thead'], ResponsiveDesign<PropsWithCSS>>;
+export type TableHeadProps = PropsWithSx<JSX.IntrinsicElements['thead']>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TableRowProps } from './types';
-export declare const TableRow: ({ children, ...props }: TableRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ sx, children, ...props }: TableRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-row.d.ts.map

package/dist/lib/table/table-row/table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,QAAQ,2BAA4B,aAAa,qDAE7D,CAAC"}
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,QAAQ,+BAAgC,aAAa,qDAMjE,CAAC"}

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

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

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

@@ -1,3 +1,4 @@
 import { JSX } from 'react';
-export type TableRowProps = JSX.IntrinsicElements['tr'];
+import { PropsWithSx } from '../../../types';
+export type TableRowProps = PropsWithSx<JSX.IntrinsicElements['tr']>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/table/table-row/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC"}

package/dist/lib/tabs/tab/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,qDAwBzD,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAOnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,qDAwBzD,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mergeComponentProps } from "../../../utils/index.js";
 import { useTabIndexContext } from "./helpers.js";
+import { mergeComponentProps } from "../../../utils/index.js";
 import { useTabsContext } from "../tabs/helpers.js";
 import { Button } from "../../button/button.js";
 const Tab = ({ children, ref, ..._props }) => {

package/dist/lib/tabs/tab/types.d.ts

@@ -1,10 +1,10 @@
-import { ButtonProps, ButtonSizeVariant } from '../../button';
-import { ResponsiveDesign, ShallowMerge } from '../../../types';
+import { ButtonSizeVariant, ButtonProps } from '../../button';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
 export type TabState = 'active';
 export interface TabResponsiveProps {
     size?: ButtonSizeVariant;
 }
-export interface TabExtendedProps extends ResponsiveDesign<TabResponsiveProps> {
+export interface TabExtendedProps extends ToResponsiveProps<TabResponsiveProps> {
     states?: Partial<Record<TabState, {
         color?: ButtonProps['color'];
         variant?: ButtonProps['variant'];

package/dist/lib/tabs/tab/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB,CAAC,kBAAkB,CAAC;IAC5E,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,QAAQ,EACR;QACE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KAClC,CACF,CACF,CAAC;CACH;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,CAAC,kBAAkB,CAAC;IAC7E,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,QAAQ,EACR;QACE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KAClC,CACF,CACF,CAAC;CACH;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tab-indicator.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/tab-indicator.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,wDAyFxB,CAAC"}
+{"version":3,"file":"tab-indicator.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/tab-indicator.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,wDAqFxB,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
@@ -62,11 +61,7 @@ const TabIndicator = () => {
       backgroundColor: "currentcolor",
       borderRadius: 8
     },
-    createStyle(tabIndicatorProps == null ? void 0 : tabIndicatorProps.xs),
-    {
-      [mediaQuery("sm")]: createStyle(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sm),
-      [mediaQuery("md")]: createStyle(tabIndicatorProps == null ? void 0 : tabIndicatorProps.md)
-    }
+    createSxInterpolation(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx)
   ];
   return /* @__PURE__ */ jsx(
     motion.div,
@@ -84,9 +79,6 @@ const TabIndicator = () => {
     }
   );
 };
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
 export {
   TabIndicator
 };

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

@@ -1,4 +1,3 @@
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
-export type TabIndicatorResponsiveProps = PropsWithCSS;
-export type TabIndicatorProps = ResponsiveDesign<TabIndicatorResponsiveProps>;
+import { PropsWithSx } from '../../../types';
+export type TabIndicatorProps = PropsWithSx;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,2BAA2B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC"}

package/dist/lib/tabs/tab-list/tab-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/tab-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDAkCjE,CAAC"}
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/tab-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDA6BjE,CAAC"}

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

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { getTabListProps } from "./helpers.js";
 import { TabIndexContext } from "../tab/helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { flattenChildren } from "../../../utils/index.js";
 import { scrollbarNoneStyle } from "../../../constants/emotion.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { TabIndicator } from "../tab-indicator/tab-indicator.js";
 const TabList = ({ ref, children, ..._props }) => {
-  const { xs, sm, md, lg, ...props } = getTabListProps(_props);
+  const { sx, ...props } = getTabListProps(_props);
   const css = [
     {
       display: "flex",
@@ -21,12 +20,7 @@ const TabList = ({ ref, children, ..._props }) => {
         flexShrink: 0
       }
     },
-    xs == null ? void 0 : xs.css,
-    {
-      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [mediaQuery("md")]: md == null ? void 0 : md.css,
-      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsxs("div", { css: [css, scrollbarNoneStyle], ...props, ref, children: [
     flattenChildren(children).map((child, index) => /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: index, children: child }, index)),