@janbox/storefront-ui 1.0.27 → 2.0.0

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

@@ -1,11 +1,10 @@
-import { HTMLAttributes, JSX } from 'react';
-import { PropsWithCSS, SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
-export interface TextareaResponsiveProps extends PropsWithCSS {
+import { JSX } from 'react';
+import { SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+export interface TextareaResponsiveProps {
     size?: SizeVariant;
 }
-export type TextareaWrapperProps = HTMLAttributes<HTMLDivElement>;
-interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps> {
-    containerProps?: JSX.IntrinsicElements['div'];
+type TextareaExtendedProps = PropsWithSx<ToResponsiveProps<TextareaResponsiveProps> & {
+    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
     mainProps?: JSX.IntrinsicElements['div'];
     helperText?: string;
     error?: boolean;
@@ -13,7 +12,7 @@ interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps
     defaultValue?: string;
     mode?: 'onChange' | 'onBlur';
     debounce?: number;
-}
+}>;
 export type TextareaProps = ShallowMerge<JSX.IntrinsicElements['textarea'], TextareaExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,qBAAqB,GAAG,WAAW,CACtC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TimePickerProps } from './types';
-export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, sx, size, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=time-picker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,yIAapB,eAAe,qDA2RjB,CAAC"}
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,mJAepB,eAAe,qDA2QjB,CAAC"}

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

@@ -8,9 +8,9 @@ import { getResponsiveProp, getSizeVariantState } 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 { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { createSxInterpolation } from "../../utils/stylesheet.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";
@@ -28,11 +28,13 @@ const TimePicker = ({
   open,
   onOpenChange,
   disabled,
+  sx,
+  size,
   ...rest
 }) => {
   const floatingRef = useRef(null);
   const windowScreen = useWindowScreen();
-  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name) ?? size;
   const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
   const [isOpen, setIsOpen] = useControllableState({
     defaultValue: open ?? false,
@@ -200,25 +202,14 @@ const TimePicker = ({
     e.stopPropagation();
     onClear == null ? void 0 : onClear();
   };
-  const getCss = (sizeVariant) => {
-    if (isNil(sizeVariant)) return {};
-    return getSizeVariantState(sizeVariant);
-  };
-  const createStyle = (screen) => {
-    const { css } = rest[screen] ?? {};
-    return {
-      ...css
-    };
-  };
   const getIcon = () => {
-    var _a, _b;
     if (selectedDate && clearable) {
       return /* @__PURE__ */ jsx(
         Icon,
         {
-          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          size: getSizeVariantState(size).iconSize,
           source: CloseIcon,
-          css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          sx: { color: disabled ? getColorVar("neutral.400") : getColorVar("neutral.500") },
           onClick: handleClear
         }
       );
@@ -227,65 +218,59 @@ const TimePicker = ({
       Icon,
       {
         source: ClockIcon,
-        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
-        css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+        size: getSizeVariantState(size).iconSize,
+        sx: { color: disabled ? getColorVar("neutral.400") : getColorVar("neutral.500") }
       }
     );
   };
-  return /* @__PURE__ */ jsx("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%" }, children: /* @__PURE__ */ jsxs(
-    Floating,
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      clickProps: {
-        enabled: true
-      },
-      dismissProps: {
-        enabled: true
-      },
-      sizeOptions,
-      placement,
-      open: isOpen,
-      onOpenChange: prehandleOpenChange,
-      ref: floatingRef,
-      children: [
-        /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            css: [
-              createStyle("sm"),
-              {
-                [mediaQuery("xs")]: createStyle("xs"),
-                [mediaQuery("sm")]: createStyle("sm"),
-                [mediaQuery("md")]: createStyle("md"),
-                [mediaQuery("lg")]: createStyle("lg")
-              }
-            ],
-            children: [
+      ...restContainerProps,
+      css: [{ display: "flex", flexDirection: "column", width: "100%" }, createSxInterpolation(containerSx)],
+      children: /* @__PURE__ */ jsxs(
+        Floating,
+        {
+          clickProps: {
+            enabled: true
+          },
+          dismissProps: {
+            enabled: true
+          },
+          sizeOptions,
+          placement,
+          open: isOpen,
+          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 }),
               !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
               getIcon()
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            css: {
-              paddingTop: "0.5rem",
-              paddingBottom: "0.5rem",
-              borderWidth: 1,
-              borderStyle: "solid",
-              borderRadius: "0.5rem",
-              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)"
-            },
-            children: portalContentRenderer()
-          }
-        ) })
-      ]
+            ] }) }),
+            /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  paddingTop: "0.5rem",
+                  paddingBottom: "0.5rem",
+                  borderWidth: 1,
+                  borderStyle: "solid",
+                  borderRadius: "0.5rem",
+                  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)"
+                },
+                children: portalContentRenderer()
+              }
+            ) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   TimePicker

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
-import { PropsWithCSS, ResponsiveDesign, SizeVariant } from '../../types';
-export interface TimeResponsiveProps extends PropsWithCSS {
-    size?: Exclude<SizeVariant, 'lg'>;
+import { PropsWithSx, SizeVariant, ToResponsiveProps } from '../../types';
+export interface TimeResponsiveProps {
+    size?: Exclude<SizeVariant, 'xs'>;
 }
 type TimePickerBaseProps = {
     defaultValue?: Date;
@@ -11,12 +11,12 @@ type TimePickerBaseProps = {
     placeholder?: string;
     clearable?: boolean;
     onClear?: () => void;
-    containerProps?: JSX.IntrinsicElements['div'];
+    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
     placement?: Placement;
     onOpenChange?: UseFloatingOptions['onOpenChange'];
     open?: boolean;
     disabled?: boolean;
 };
-export type TimePickerProps = TimePickerBaseProps & ResponsiveDesign<TimeResponsiveProps>;
+export type TimePickerProps = PropsWithSx<TimePickerBaseProps & ToResponsiveProps<TimeResponsiveProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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/locales/en/ui__translation.json

@@ -1,3 +1,3 @@
 {
-  "apply": "Apply"
+  "hello": "Hello"
 }

package/dist/locales/vi/ui__translation.json

@@ -1,3 +1 @@
-{
-  "apply": "Áp dụng"
-}
+{}

package/dist/style.css

@@ -757,6 +757,23 @@
   font-weight: 600;
   color: #849095;
   padding: 0.833em;
+}._input_range_1yrkm_1 {
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+}
+._input_range_1yrkm_1:has(input:focus) {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
+}
+._input_range_1yrkm_1:hover {
+  border-color: var(--color-primary-300);
+}._input_number__input_2xvhv_1::-webkit-outer-spin-button, ._input_number__input_2xvhv_1::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }._radio_button__container_10dls_1 {
   display: flex;
   width: fit-content;
@@ -833,23 +850,6 @@
 
 ._radio_button__input_10dls_10:disabled + ._radio_button__checkmark_10dls_21 {
   color: var(--color-neutral-300);
-}._input_range_1yrkm_1 {
-  display: flex;
-  align-items: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.5rem;
-  gap: 0.5rem;
-}
-._input_range_1yrkm_1:has(input:focus) {
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._input_range_1yrkm_1:hover {
-  border-color: var(--color-primary-300);
-}._input_number__input_2xvhv_1::-webkit-outer-spin-button, ._input_number__input_2xvhv_1::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }._switch__container_19zrg_1 {
   display: flex;
   align-items: center;

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"}