@janbox/storefront-ui 1.0.27 → 2.0.1

package/dist/lib/chip/chip.js

@@ -1,11 +1,12 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { getChipProps } from "./helpers.js";
-import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
+import { getChipProps, getChipSizeState } from "./helpers.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 const Chip = ({ children, ..._props }) => {
-  const { xs, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
+  const { sx, size, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
   const { light, main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsx(
     "div",
@@ -18,39 +19,33 @@ const Chip = ({ children, ..._props }) => {
           display: "flex",
           alignItems: "center",
           backgroundColor: light,
-          borderTopWidth: 1,
-          borderRightWidth: 1,
-          borderBottomWidth: 1,
-          borderLeftWidth: 1,
-          borderTopLeftRadius: 8,
-          borderTopRightRadius: 8,
-          borderBottomLeftRadius: 8,
-          borderBottomRightRadius: 8,
+          borderWidth: 1,
           borderColor: main,
           color: main
         },
-        createStyle(xs),
+        createStyle({ size }),
         {
           [mediaQuery("sm")]: createStyle(sm),
           [mediaQuery("md")]: createStyle(md),
           [mediaQuery("lg")]: createStyle(lg)
-        }
+        },
+        createSxInterpolation(sx)
       ],
       children
     }
   );
 };
-const createStyle = ({ css, size } = {}) => {
-  const { inputSize, inputPaddingX, textVariant } = getSizeVariantState(size);
+const createStyle = ({ size } = {}) => {
+  const { inputSize, inputPaddingX, textVariant, rounded } = getChipSizeState(size);
   return [
     {
       paddingLeft: inputPaddingX,
       paddingRight: inputPaddingX,
       minHeight: inputSize,
       fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
-      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
-    },
-    css
+      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0,
+      borderRadius: rounded
+    }
   ];
 };
 export {

package/dist/lib/chip/helpers.d.ts

@@ -1,3 +1,11 @@
+import { SizeVariant } from '../../types';
+import { TypographySizeVariant } from '../../theme';
 import { ChipProps } from './types';
+export declare const getChipSizeState: (size?: SizeVariant) => Partial<{
+    inputSize: number;
+    inputPaddingX: number;
+    textVariant: TypographySizeVariant;
+    rounded: number;
+}>;
 export declare const getChipProps: (extended: ChipProps) => ChipProps;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/lib/chip/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAYpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AASpC,eAAO,MAAM,gBAAgB,UACpB,WAAW,KACjB,OAAO,CAAC;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;CACjB,CAaA,CAAC;AAEF,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}

package/dist/lib/chip/helpers.js

@@ -1,14 +1,26 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    css: {},
-    size: "md"
-  },
+  size: "md",
   color: "primary"
 };
+const getChipSizeState = (size) => {
+  switch (size) {
+    case "xs":
+      return { inputSize: 20, inputPaddingX: 6, textVariant: "xs", rounded: 4 };
+    case "sm":
+      return { inputSize: 24, inputPaddingX: 8, textVariant: "xs", rounded: 6 };
+    case "md":
+      return { inputSize: 28, inputPaddingX: 10, textVariant: "sm", rounded: 8 };
+    case "lg":
+      return { inputSize: 32, inputPaddingX: 12, textVariant: "sm", rounded: 8 };
+    default:
+      return {};
+  }
+};
 const getChipProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);
 };
 export {
-  getChipProps
+  getChipProps,
+  getChipSizeState
 };

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

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
-import { ColorVariant, SizeVariant, ResponsiveDesign, ShallowMerge, PropsWithCSS } from '../../types';
-export interface ChipResponsiveProps extends PropsWithCSS {
+import { ColorVariant, PropsWithSx, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
+export interface ChipResponsiveProps {
     size?: SizeVariant;
 }
-type ChipExtendedProps = ResponsiveDesign<ChipResponsiveProps> & {
+type ChipExtendedProps = PropsWithSx<ToResponsiveProps<ChipResponsiveProps> & {
     color?: ColorVariant;
-};
+}>;
 export type ChipProps = ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAElG,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElG,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG,WAAW,CAClC,iBAAiB,CAAC,mBAAmB,CAAC,GAAG;IACvC,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/lib/container/container.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,cAAc,EAA4B,MAAM,SAAS,CAAC;AA2BtF,eAAO,MAAM,SAAS,iCAAkC,cAAc,qDA2ErE,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/lib/container/container.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AA4B5D,eAAO,MAAM,SAAS,iCAAkC,cAAc,qDAsErE,CAAC"}

package/dist/lib/container/container.js

@@ -1,8 +1,9 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getContainerProps } from "./helpers.js";
-import { mediaQuery, breakpoint } from "../../theme/screens.js";
+import { breakpoint, mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 const CONTAINER_PADDING_VAR_NAME = "--container-padding";
 const CONTAINER_PADDING_VAR = `var(${CONTAINER_PADDING_VAR_NAME})`;
 const getContainerPaddingCSS = (position) => {
@@ -20,17 +21,12 @@ const getContainerContentPaddingCSS = (position) => {
   };
 };
 const Container = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = getContainerProps(_props);
+  const { position, sm, md, lg, sx, ...rest } = getContainerProps(_props);
   const css = [
     {
       width: "100%"
     },
-    createStyle(xs),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    }
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx(
     "div",
@@ -39,7 +35,7 @@ const Container = ({ children, ref, ..._props }) => {
         {
           width: "100%",
           [CONTAINER_PADDING_VAR_NAME]: "0px",
-          ...getContainerPaddingCSS(xs == null ? void 0 : xs.position)
+          ...getContainerPaddingCSS(position)
         },
         {
           [mediaQuery("sm")]: {
@@ -64,7 +60,7 @@ const Container = ({ children, ref, ..._props }) => {
             {
               width: "100%",
               [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.xs.padding}px`,
-              ...getContainerContentPaddingCSS(xs == null ? void 0 : xs.position)
+              ...getContainerContentPaddingCSS(position)
             },
             {
               [mediaQuery("sm")]: [
@@ -93,9 +89,6 @@ const Container = ({ children, ref, ..._props }) => {
     }
   ) });
 };
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
 export {
   Container
 };

package/dist/lib/container/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/container/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAUzC,eAAO,MAAM,iBAAiB,aAAc,cAAc,KAAG,cAE5D,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/container/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAQzC,eAAO,MAAM,iBAAiB,aAAc,cAAc,KAAG,cAE5D,CAAC"}

package/dist/lib/container/helpers.js

@@ -1,8 +1,6 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    position: "center"
-  }
+  position: "center"
 };
 const getContainerProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

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

@@ -1,10 +1,10 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
 export type ContainerPosition = 'center' | 'start' | 'end';
-export interface ContainerResponsiveProps extends PropsWithCSS {
+export type ContainerResponsiveProps = {
     position?: ContainerPosition;
-}
-type ContainerExtendedProps = ResponsiveDesign<ContainerResponsiveProps> & {};
+};
+type ContainerExtendedProps = PropsWithSx<ToResponsiveProps<ContainerResponsiveProps>>;
 export type ContainerProps = ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/container/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3D,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,KAAK,sBAAsB,GAAG,gBAAgB,CAAC,wBAAwB,CAAC,GAAG,EAE1E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/container/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,KAAK,sBAAsB,GAAG,WAAW,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,CAAC,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAkC,MAAM,OAAO,CAAC;AAQvD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,QAAA,MAAM,UAAU,WAAY,eAAe,QAAQ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,qDAyKvF,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAwC,OAAO,UAAU,CAAC;AAEpF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,QAAA,MAAM,UAAU,WAAY,eAAe,QAAQ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,qDA6MvF,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAwC,OAAO,UAAU,CAAC;AAEpF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,CAAC"}

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

@@ -2,14 +2,15 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 /* empty css                */
 import { forwardRef, useRef } from "react";
 import dayjs from "dayjs";
-import { isNil } from "lodash-es";
 import { Calendar } from "react-date-range";
 import { getDatePickerProps } from "./helpers.js";
 import CalendarIcon from "../../assets/svg/calendar.svg.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
+import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 import { TimePicker } from "../time-picker/time-picker.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
@@ -34,10 +35,15 @@ const DatePicker = (_props, ref) => {
     onClear,
     helperText,
     error,
+    sx,
     containerProps,
     open,
     onOpenChange,
     placement = "bottom-end",
+    size,
+    sm,
+    md,
+    lg,
     ...rest
   } = getDatePickerProps(_props);
   const floatingRef = useRef(null);
@@ -73,10 +79,6 @@ const DatePicker = (_props, ref) => {
     setSelectedDate(preset);
     onChange == null ? void 0 : onChange(preset);
   };
-  const getCss = (sizeVariant) => {
-    if (isNil(sizeVariant)) return {};
-    return getSizeVariantState(sizeVariant);
-  };
   const portalContentRenderer = () => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -101,7 +103,18 @@ const DatePicker = (_props, ref) => {
             css: { paddingLeft: 12, paddingRight: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 8 },
             children: [
               /* @__PURE__ */ jsx("span", { css: { fontSize: "0.75rem", lineHeight: "1rem" }, children: "Time:" }),
-              /* @__PURE__ */ jsx(TimePicker, { onChange: onChangeTime, placement: "top", xs: { size: "xs" }, value: selectedDate })
+              /* @__PURE__ */ jsx(
+                TimePicker,
+                {
+                  onChange: onChangeTime,
+                  placement: "top",
+                  size,
+                  sm: { size: sm == null ? void 0 : sm.size },
+                  md: { size: md == null ? void 0 : md.size },
+                  lg: { size: lg == null ? void 0 : lg.size },
+                  value: selectedDate
+                }
+              )
             ]
           }
         )
@@ -113,7 +126,6 @@ const DatePicker = (_props, ref) => {
     onClear == null ? void 0 : onClear();
   };
   const getSuffix = () => {
-    var _a, _b;
     if (icon) {
       return icon;
     }
@@ -122,8 +134,17 @@ const DatePicker = (_props, ref) => {
         Icon,
         {
           source: CloseIcon,
-          css: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
-          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          sx: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          size: getSizeVariantState(size).iconSize,
+          sm: {
+            size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+          },
+          md: {
+            size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+          },
+          lg: {
+            size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+          },
           onClick: handleClear
         }
       );
@@ -132,16 +153,34 @@ const DatePicker = (_props, ref) => {
       Icon,
       {
         source: CalendarIcon,
-        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
-        css: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+        size: getSizeVariantState(size).iconSize,
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+        },
+        sx: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
       }
     );
   };
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ...containerProps,
-      css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css },
+      ...restContainerProps,
+      css: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%"
+        },
+        createSxInterpolation(sx),
+        createSxInterpolation(containerSx)
+      ],
       children: [
         /* @__PURE__ */ jsxs(
           Floating,

package/dist/lib/date-picker/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAW1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}

package/dist/lib/date-picker/helpers.js

@@ -1,8 +1,6 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+  size: "md"
 };
 const getDatePickerProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

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

@@ -1,11 +1,10 @@
 import { JSX } from 'react';
-import { Interpolation } from '@emotion/react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { InputRange } from 'react-date-range';
-import { PropsWithCSS, SizeVariant, ResponsiveDesign } from '../../types';
+import { PropsWithSx, SizeVariant, ToResponsiveProps } from '../../types';
 export type PickerStaticRange = StaticRange;
 export type PickerInputRange = InputRange;
-export interface DateResponsiveProps extends PropsWithCSS {
+export interface DateResponsiveProps {
     size?: Exclude<SizeVariant, 'xs'>;
 }
 type DatePickerBaseProps = {
@@ -27,13 +26,11 @@ type DatePickerBaseProps = {
     timePicker?: boolean;
     clearable?: boolean;
     onClear?: () => void;
-    containerProps?: JSX.IntrinsicElements['div'] & {
-        css?: Interpolation;
-    };
+    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
     error?: boolean;
     helperText?: string;
     disabled?: boolean;
 };
-export type DatePickerProps = DatePickerBaseProps & ResponsiveDesign<DateResponsiveProps>;
+export type DatePickerProps = PropsWithSx<DatePickerBaseProps & ToResponsiveProps<DateResponsiveProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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/date-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,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,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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/dialog/dialog/dialog.js

@@ -6,7 +6,7 @@ import { FloatingContent } from "../../floating/floating-content/floating-conten
 import { getColorVar } from "../../../theme/palette.js";
 import { mediaQuery } from "../../../theme/screens.js";
 const Dialog = (_props) => {
-  const { xs, sm, md, lg, children, ...props } = getDialogProps(_props);
+  const { size, sm, md, lg, children, ...props } = getDialogProps(_props);
   return /* @__PURE__ */ jsx(
     Floating,
     {
@@ -56,7 +56,7 @@ const Dialog = (_props) => {
               {
                 css: [
                   {
-                    width: getDialogSizeInNumber(xs == null ? void 0 : xs.size),
+                    width: getDialogSizeInNumber(size),
                     backgroundColor: getColorVar("surface.default"),
                     maxWidth: "100%",
                     overflow: "hidden",

package/dist/lib/dialog/dialog/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAalD,eAAO,MAAM,cAAc,aAAc,WAAW,gBAEnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,UAAU,uBAKtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,qDAE5B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWlD,eAAO,MAAM,cAAc,aAAc,WAAW,gBAEnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,UAAU,uBAKtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,qDAE5B,CAAC"}

package/dist/lib/dialog/dialog/helpers.js

@@ -4,9 +4,7 @@ import "../../../theme/palette.js";
 import { mergeComponentProps } from "../../../utils/index.js";
 import { useFloatingContext } from "../../floating/floating/helpers.js";
 const defaultProps = {
-  xs: {
-    size: "sm"
-  }
+  size: "sm"
 };
 const getDialogProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

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

@@ -1,8 +1,8 @@
 import { FloatingProps } from '../../floating';
 import { breakpoint } from '../../../theme';
-import { ResponsiveDesign, ShallowMerge } from '../../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
 export type DialogSize = keyof typeof breakpoint | number;
-export type DialogProps = ShallowMerge<FloatingProps, ResponsiveDesign<{
+export type DialogProps = ShallowMerge<FloatingProps, ToResponsiveProps<{
     size?: DialogSize;
 }>>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,YAAY,CACpC,aAAa,EACb,gBAAgB,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC,CACH,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,YAAY,CACpC,aAAa,EACb,iBAAiB,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC,CACH,CAAC"}

package/dist/lib/dialog/dialog-header/dialog-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-header/dialog-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,eAAO,MAAM,YAAY,sCAA8C,iBAAiB,qDAmDvF,CAAC"}
+{"version":3,"file":"dialog-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-header/dialog-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,eAAO,MAAM,YAAY,sCAA8C,iBAAiB,qDAiDvF,CAAC"}

package/dist/lib/dialog/dialog-header/dialog-header.js

@@ -45,9 +45,7 @@ const DialogHeader = ({ children, closeable = true, ...props }) => {
             children: /* @__PURE__ */ jsx(
               IconButton,
               {
-                xs: {
-                  size: "sm"
-                },
+                size: "sm",
                 color: "neutral",
                 icon: {
                   source: CloseIcon

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

@@ -82,7 +82,7 @@ const CheckboxFilterPanel = ({
     ) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
+    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Input, { value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
     /* @__PURE__ */ jsx(
       VirtualizedList,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"price-range-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/price-range-filter-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAWrD,eAAO,MAAM,qBAAqB,sFAO/B,0BAA0B,qDAyH5B,CAAC"}
+{"version":3,"file":"price-range-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/price-range-filter-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAWrD,eAAO,MAAM,qBAAqB,sFAO/B,0BAA0B,qDAwH5B,CAAC"}

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

@@ -104,7 +104,6 @@ const PriceRangeFilterPanel = ({
     /* @__PURE__ */ jsx(
       InputRange,
       {
-        xs: { size: "sm" },
         onChange: onInputRangeChange,
         inputs: [
           {

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

@@ -72,7 +72,7 @@ const RadioFilterPanel = ({
     ) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
+    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(Input, { value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
     /* @__PURE__ */ jsx(
       VirtualizedList,
       {

package/dist/lib/flag/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/flag/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAcpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/flag/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAYpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}

package/dist/lib/flag/helpers.js

@@ -1,11 +1,9 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    css: {
-      width: 24,
-      aspectRatio: "4 / 3",
-      objectFit: "contain"
-    }
+  sx: {
+    width: 24,
+    aspectRatio: "4 / 3",
+    objectFit: "contain"
   }
 };
 const getFlagProps = (extended) => {

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

@@ -1,9 +1,5 @@
 import { ImageProps } from '../image';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
-export type FlagExtendedProps = ResponsiveDesign<PropsWithCSS> & {
-    countryCode?: string;
-    fallback?: string;
-};
+import { ShallowMerge } from '../../types';
 export type FlagProps = ShallowMerge<ImageProps, {
     countryCode?: string;
     fallback?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/flag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,YAAY,CAAC,GAAG;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,UAAU,EACV;IACE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/flag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,UAAU,EACV;IACE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"flex-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flex-item/flex-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,eAAO,MAAM,QAAQ,+BAAgC,aAAa,qDAoBjE,CAAC"}
+{"version":3,"file":"flex-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flex-item/flex-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,eAAO,MAAM,QAAQ,+BAAgC,aAAa,qDAejE,CAAC"}

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

@@ -1,19 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { getFlexItemProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const FlexItem = ({ children, ref, ...rest }) => {
-  const { xs, sm, md, lg, ...props } = getFlexItemProps(rest);
+  const { sx, ...props } = getFlexItemProps(rest);
   const css = [
     {
       maxWidth: "100%"
     },
-    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", { css, ...props, ref, children });
 };

package/dist/lib/flexbox/flex-item/helpers.d.ts.map

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

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

@@ -1,7 +1,5 @@
 import { mergeComponentProps } from "../../../utils/index.js";
-const defaultProps = {
-  xs: {}
-};
+const defaultProps = {};
 const getFlexItemProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);
 };