@janbox/storefront-ui 1.0.27 → 2.0.1

package/dist/lib/time-picker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC"}

package/dist/lib/unordered-list/list-item/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAYxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAUxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC"}

package/dist/lib/unordered-list/list-item/helpers.js

@@ -1,9 +1,7 @@
 import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-  xs: {
-    css: {
-      alignItems: "flex-start"
-    }
+  sx: {
+    alignItems: "flex-start"
   }
 };
 const getListItemProps = (extended) => {

package/dist/lib/unordered-list/list-item/list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/list-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAIjE,eAAO,MAAM,QAAQ,sHAyBnB,CAAC"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/list-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,eAAO,MAAM,QAAQ,sHAqBnB,CAAC"}

package/dist/lib/unordered-list/list-item/list-item.js

@@ -2,19 +2,14 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { isNil } from "lodash-es";
 import { getListItemProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const ListItem = forwardRef((_props, ref) => {
-  const { xs, sm, md, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
+  const { sx, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
   const css = [
     {
       display: "inline-flex"
     },
-    createStyle(xs),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md)
-    }
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsx(
     "li",
@@ -28,9 +23,6 @@ const ListItem = forwardRef((_props, ref) => {
     }
   );
 });
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
 export {
   ListItem
 };

package/dist/lib/unordered-list/list-item/types.d.ts

@@ -1,5 +1,4 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
-export type ListItemResponsiveProps = PropsWithCSS;
-export type ListItemProps = JSX.IntrinsicElements["li"] & ResponsiveDesign<ListItemResponsiveProps>;
+import { PropsWithSx } from '../../../types';
+export type ListItemProps = PropsWithSx<JSX.IntrinsicElements['li']>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/unordered-list/list-item/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GACrD,gBAAgB,CAAC,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,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/unordered-list/unordered-list/helpers.js

@@ -1,7 +1,7 @@
 import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-  xs: {
-    css: {
+  sx: {
+    xs: {
       alignItems: "flex-start"
     }
   }

package/dist/lib/unordered-list/unordered-list/types.d.ts

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

package/dist/lib/unordered-list/unordered-list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/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,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAC3C,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC3B,gBAAgB,CAAC,4BAA4B,CAAC,CAC/C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC"}

package/dist/lib/unordered-list/unordered-list/unordered-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unordered-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/unordered-list.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAgC,MAAM,SAAS,CAAC;AAI3E,eAAO,MAAM,aAAa,8HAiBxB,CAAC"}
+{"version":3,"file":"unordered-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/unordered-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAI7C,eAAO,MAAM,aAAa,8HAexB,CAAC"}

package/dist/lib/unordered-list/unordered-list/unordered-list.js

@@ -1,27 +1,23 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { getUnorderedListProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const UnorderedList = forwardRef((_props, ref) => {
-  const { xs, sm, md, ...rest } = getUnorderedListProps(_props);
-  const css = [
+  const { sx, ...rest } = getUnorderedListProps(_props);
+  return /* @__PURE__ */ jsx(
+    "ul",
     {
-      display: "inline-flex",
-      flexDirection: "column",
-      verticalAlign: "top"
-    },
-    createStyle(xs),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md)
+      css: createSxInterpolation({
+        display: "inline-flex",
+        flexDirection: "column",
+        verticalAlign: "top",
+        ...sx
+      }),
+      ...rest,
+      ref
     }
-  ];
-  return /* @__PURE__ */ jsx("ul", { css, ...rest, ref });
+  );
 });
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
 export {
   UnorderedList
 };

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

@@ -1,10 +1,10 @@
 import { ComponentType, JSX } from 'react';
 import { ReactPlayerProps } from 'react-player/types';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
-type VideoExtendedProps = ResponsiveDesign<PropsWithCSS> & {
+import { PropsWithSx, ShallowMerge } from '../../types';
+type VideoExtendedProps = PropsWithSx<{
     containerProps?: JSX.IntrinsicElements['div'];
     PlayerComponent?: ComponentType<ReactPlayerProps>;
-};
+}>;
 export type VideoProps = ShallowMerge<ReactPlayerProps, VideoExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/video/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,KAAK,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,CAAC,GAAG;IAEzD,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/video/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,KAAK,kBAAkB,GAAG,WAAW,CAAC;IAEpC,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACnD,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/lib/video/video.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,wDAAyD,UAAU,qDAiBpF,CAAC"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/lib/video/video.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,wDAAyD,UAAU,qDAUpF,CAAC"}

package/dist/lib/video/video.js

@@ -2,23 +2,12 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { createElement } from "react";
 import ReactPlayer from "react-player";
 import { getVideoProps } from "./helpers.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 const Video = ({ ref, containerProps, PlayerComponent, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = getVideoProps(_props);
-  const css = [
-    createStyle(xs),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
+  const { sx, ...rest } = getVideoProps(_props);
+  const css = [createSxInterpolation(sx)];
   return /* @__PURE__ */ jsx("div", { css, ...containerProps, children: PlayerComponent ? createElement(PlayerComponent, rest) : /* @__PURE__ */ jsx(ReactPlayer, { width: "", height: "", ref, ...rest }) });
 };
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
 export {
   Video
 };

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ import type * as CSS from 'csstype';
 export type Nullable<T> = T | null;
 export type Dict<T> = Record<string, T>;
 export type ShallowMerge<T1, T2> = Omit<T1, keyof T2> & T2;
-export type ResponsiveDesign<T = unknown> = Partial<Record<Screen, T>>;
+export type ToResponsiveProps<T extends object = object> = T & Partial<Record<Exclude<Screen, 'xs'>, T>>;
 export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
 export type ColorVariant = 'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral';
 export type ButtonVariant = 'contained' | 'outlined' | 'text';
@@ -19,7 +19,7 @@ export type ProgressDirection = 'horizontal' | 'vertical';
 export type StyledCSS = Omit<CSSObject, keyof CSS.Properties | keyof CSS.Pseudos> & CSS.Properties<number | string> & {
     [K in CSS.Pseudos]?: StyledCSS;
 };
-export type PropsWithCSS<T extends object = object> = T & {
-    css?: StyledCSS;
+export type PropsWithSx<T extends object = object> = T & {
+    sx?: ToResponsiveProps<StyledCSS>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAEzG,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACvD,EAAE,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC"}

package/dist/utils/index.d.ts

@@ -1,9 +1,8 @@
 import { ReactElement } from 'react';
 import { Screen, TypographySizeVariant } from '../theme';
-import { SizeVariant, ColorVariant, ResponsiveDesign } from '../types';
+import { SizeVariant, ColorVariant } from '../types';
 import { Get, Paths } from 'type-fest';
 export * from './common';
-export * from './stylesheet';
 export * from './query-params';
 export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     main: string;
@@ -27,7 +26,6 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     ariaDisabledText?: undefined;
 };
 export declare const mergeComponentProps: <T extends object>(...args: Array<T | object | ((current: T) => T | object)>) => T;
-export declare const omitResponsiveProps: <T extends ResponsiveDesign>(props: T) => Omit<T, Screen>;
 export declare const flattenChildren: (children: React.ReactNode) => ReactElement[];
 export type SizeVariantState = Partial<{
     iconSize: number;
@@ -36,7 +34,7 @@ export type SizeVariantState = Partial<{
     textVariant: TypographySizeVariant;
 }>;
 export declare const getSizeVariantState: (size?: SizeVariant) => SizeVariantState;
-export declare const getResponsiveProp: <O extends object, P extends Paths<O>, R = Get<O, `${P}`>>(record: ResponsiveDesign<O>, field: P, screen: Screen, options?: {
+export declare const getResponsiveProp: <O extends object, P extends Paths<O>, R = Get<O, `${P}`>>(record: Partial<Record<Screen, O>>, field: P, screen: Screen, options?: {
     condition?: (value?: R) => boolean;
 }) => R;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAA8B,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAc/B,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,gBAAgB,SAAS,CAAC,KAAG,IAAI,CAAC,CAAC,EAAE,MAAM,CAExF,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,gBAAgB,CAAC,CAAC,CAAC,SACpB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAc/B,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAC3B,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC"}

package/dist/utils/index.js

@@ -1,9 +1,8 @@
 import { Children, isValidElement, Fragment } from "react";
-import { isUndefined, mergeWith, omit, get } from "lodash-es";
-import { getSmallerScreens, screens } from "../theme/screens.js";
+import { isUndefined, mergeWith, get } from "lodash-es";
+import { getSmallerScreens } from "../theme/screens.js";
 import { getColorVar } from "../theme/palette.js";
 import { ensureArray, ensureBoolean, formatNumber, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
-import { cn } from "./stylesheet.js";
 import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
 const getColorShadesByVariant = (variant) => {
   switch (variant) {
@@ -110,9 +109,6 @@ const mergeComponentProps = (...args) => {
   }
   return source;
 };
-const omitResponsiveProps = (props) => {
-  return omit(props, screens);
-};
 const flattenChildren = (children) => {
   return Children.toArray(children).reduce((acc, child) => {
     if (isValidElement(child)) {
@@ -177,7 +173,6 @@ export {
   EnumParamParser,
   NumberParamParser,
   StringParamParser,
-  cn,
   ensureArray,
   ensureBoolean,
   flattenChildren,
@@ -191,7 +186,6 @@ export {
   mergeComponentProps,
   normalizeSearchText,
   omitEmpty,
-  omitResponsiveProps,
   parseNumber,
   parseSvgString,
   simplifyQueryParams

package/dist/utils/stylesheet.d.ts

@@ -1,3 +1,5 @@
+import { PropsWithSx, StyledCSS } from '../types';
 import { ClassValue } from 'clsx';
 export declare const cn: (...classes: ClassValue[]) => string;
+export declare const createSxInterpolation: (sx?: PropsWithSx["sx"]) => StyledCSS[];
 //# sourceMappingURL=stylesheet.d.ts.map

package/dist/utils/stylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/utils/stylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,WAAqB,CAAC"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/utils/stylesheet.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,WAAqB,CAAC;AAEjE,eAAO,MAAM,qBAAqB,QAAQ,WAAW,CAAC,IAAI,CAAC,KAAQ,SAAS,EAW3E,CAAC"}

package/dist/utils/stylesheet.js

@@ -1,5 +1,19 @@
+import { mediaQuery } from "../theme/screens.js";
+import "../theme/palette.js";
 import { clsx } from "clsx";
 const cn = (...classes) => clsx(...classes);
+const createSxInterpolation = (sx = {}) => {
+  const { sm, md, lg, ...rest } = sx;
+  return [
+    rest,
+    {
+      [mediaQuery("sm")]: sm,
+      [mediaQuery("md")]: md,
+      [mediaQuery("lg")]: lg
+    }
+  ];
+};
 export {
-  cn
+  cn,
+  createSxInterpolation
 };

package/package.json

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