@janbox/storefront-ui 1.0.27 → 2.0.0

package/dist/lib/loading/image-skeleton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/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,kBAAkB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC"}

package/dist/lib/loading/loading-overlay/loading-overlay.d.ts

@@ -1,3 +1,3 @@
 import { LoadingOverlayProps } from './types';
-export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, xs, sm, md, lg, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LoadingOverlay: ({ isLoading, iconProps, color, sx, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loading-overlay.d.ts.map

package/dist/lib/loading/loading-overlay/loading-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/loading-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,cAAc,qFAYxB,mBAAmB,qDA0CrB,CAAC"}
+{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/loading-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,cAAc,yEASxB,mBAAmB,qDAqCrB,CAAC"}

package/dist/lib/loading/loading-overlay/loading-overlay.js

@@ -3,19 +3,15 @@ import { SvgLoader } from "../../../components/svg-loader.js";
 import { animateSpinStyle } from "../../../constants/emotion.js";
 import LoadingIcon from "../../../assets/svg/loading-waiting.svg.js";
 import { getColorShadesByVariant } from "../../../utils/index.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const LoadingOverlay = ({
   isLoading = false,
   iconProps,
   color = "primary",
+  sx,
   style,
   size = 32,
   children,
-  xs,
-  sm,
-  md,
-  lg,
   ...props
 }) => {
   const { main } = getColorShadesByVariant(color);
@@ -30,12 +26,7 @@ const LoadingOverlay = ({
       ...props,
       css: [
         { position: "relative" },
-        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)
       ],
       children: [
         children,

package/dist/lib/loading/loading-overlay/types.d.ts

@@ -1,9 +1,9 @@
 import { JSX } from 'react';
-import { ColorVariant, PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], {
+import { ColorVariant, PropsWithSx, ShallowMerge } from '../../../types';
+export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<{
     isLoading?: boolean;
     size?: number;
     color?: ColorVariant;
     iconProps?: JSX.IntrinsicElements['div'];
-} & ResponsiveDesign<PropsWithCSS>>;
+}>>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/loading-overlay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;CAC1C,GAAG,gBAAgB,CAAC,YAAY,CAAC,CACnC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,WAAW,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;CAC1C,CAAC,CACH,CAAC"}

package/dist/lib/loading/text-skeleton/text-skeleton.d.ts

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

package/dist/lib/loading/text-skeleton/text-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5C,eAAO,MAAM,YAAY,iCAAkC,iBAAiB,qDAyB3E,CAAC"}
+{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAM5C,eAAO,MAAM,YAAY,qBAAsB,iBAAiB,qDAoB/D,CAAC"}

package/dist/lib/loading/text-skeleton/text-skeleton.js

@@ -1,19 +1,15 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import { mediaQuery } from "../../../theme/screens.js";
+import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-const TextSkeleton = ({ xs, sm, md, lg, ...props }) => {
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const TextSkeleton = ({ sx, ...props }) => {
   return /* @__PURE__ */ jsxs(
     "span",
     {
       css: [
         { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" },
-        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/loading/text-skeleton/types.d.ts

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

package/dist/lib/loading/text-skeleton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/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,iBAAiB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC"}

package/dist/lib/marquee/marquee/marquee.d.ts

@@ -1,3 +1,3 @@
 import { MarqueeProps } from './types';
-export declare const Marquee: ({ ref, ..._props }: MarqueeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Marquee: ({ children, ref, ..._props }: MarqueeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=marquee.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/marquee.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAiD,MAAM,SAAS,CAAC;AAUtF,eAAO,MAAM,OAAO,uBAAwB,YAAY,qDAwFvD,CAAC"}
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/marquee.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAiD,MAAM,SAAS,CAAC;AAUtF,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDA0FjE,CAAC"}

package/dist/lib/marquee/marquee/marquee.js

@@ -10,8 +10,9 @@ import { mediaQuery } from "../../../theme/screens.js";
 import "../../../theme/palette.js";
 import { flattenChildren } from "../../../utils/index.js";
 import { Icon } from "../../icon/icon.js";
-const Marquee = ({ ref, ..._props }) => {
-  const { children, xs, sm, md, autoScrollOptions, separatorIcon, ...rest } = getMarqueeProps(_props);
+const Marquee = ({ children, ref, ..._props }) => {
+  const { sx = {}, spaceBetween, sm, md, lg, autoScrollOptions, separatorIcon, ...rest } = getMarqueeProps(_props);
+  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
   const rootEl = useRef(null);
   const [emblaRef, emblaApi] = useEmblaCarousel(
     {
@@ -69,10 +70,11 @@ const Marquee = ({ ref, ..._props }) => {
           overflow: "hidden",
           maxWidth: "100%"
         },
-        createStyle(xs),
+        createStyle({ spaceBetween }, sxXs),
         {
-          [mediaQuery("sm")]: createStyle(sm),
-          [mediaQuery("md")]: createStyle(md)
+          [mediaQuery("sm")]: createStyle(sm, sxSm),
+          [mediaQuery("md")]: createStyle(md, sxMd),
+          [mediaQuery("lg")]: createStyle(lg, sxLg)
         }
       ],
       ...rest,
@@ -84,14 +86,17 @@ const Marquee = ({ ref, ..._props }) => {
     }
   );
 };
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
+const createStyle = ({ spaceBetween } = {}, sx = {}) => {
+  const { width, height, ...css } = sx;
   return [
     {
       width,
       height,
-      "& > *": css
-    },
-    css
+      "& > *": {
+        columnGap: spaceBetween,
+        ...css
+      }
+    }
   ];
 };
 export {

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

@@ -1,17 +1,17 @@
 import { JSX } from 'react';
 import { AutoScrollOptionsType } from 'embla-carousel-auto-scroll';
 import { IconProps } from '../../icon';
-import { ResponsiveDesign, ShallowMerge, PropsWithCSS } from '../../../types';
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
 export declare enum MarqueeDataAttributes {
     PlayState = "data-marquee-play-state"
 }
-export type MarqueeResponsiveProps = PropsWithCSS & {
+export type MarqueeResponsiveProps = {
     spaceBetween?: number;
 };
 type MarqueeHTMLProps = Omit<JSX.IntrinsicElements['div'], 'is'>;
-export type MarqueeProps = ShallowMerge<MarqueeHTMLProps, {
+export type MarqueeProps = ShallowMerge<MarqueeHTMLProps, PropsWithSx<{
     autoScrollOptions?: AutoScrollOptionsType;
     separatorIcon?: IconProps;
-}> & ResponsiveDesign<MarqueeResponsiveProps>;
+}>> & ToResponsiveProps<MarqueeResponsiveProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,oBAAY,qBAAqB;IAC/B,SAAS,4BAA4B;CACtC;AAED,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjE,MAAM,MAAM,YAAY,GAAG,YAAY,CACrC,gBAAgB,EAChB;IACE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CACF,GACC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/marquee/marquee/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,oBAAY,qBAAqB;IAC/B,SAAS,4BAA4B;CACtC;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjE,MAAM,MAAM,YAAY,GAAG,YAAY,CACrC,gBAAgB,EAChB,WAAW,CAAC;IACV,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC,CACH,GACC,iBAAiB,CAAC,sBAAsB,CAAC,CAAC"}

package/dist/lib/menu/menu-item/helpers.d.ts.map

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

package/dist/lib/menu/menu-item/helpers.js

@@ -2,10 +2,8 @@ import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
   variant: "text",
   color: "neutral",
-  xs: {
-    css: {
-      width: "100%"
-    }
+  sx: {
+    width: "100%"
   }
 };
 const getMenuItemProps = (extended) => {

package/dist/lib/multiple-select/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,MAAM,qBAAqB,mBAAmB,CAAC,CAAC,CAAC,2BAEjG,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,MAAM,qBAAqB,mBAAmB,CAAC,CAAC,CAAC,2BAEjG,CAAC"}

package/dist/lib/multiple-select/helpers.js

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

package/dist/lib/multiple-select/multiple-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiple-select.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/multiple-select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAA6B,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAiBzE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,8BAA8B,mBAAmB,CAAC,CAAC,CAAC,qDAgYlG,CAAC"}
+{"version":3,"file":"multiple-select.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/multiple-select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAA6B,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAiBzE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,8BAA8B,mBAAmB,CAAC,CAAC,CAAC,qDAkYlG,CAAC"}

package/dist/lib/multiple-select/multiple-select.js

@@ -21,7 +21,7 @@ import { Input } from "../input/input.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const DEFAULT_DISPLAY_ROW_COUNT = 5;
 const MultipleSelect = ({ ref, ...props }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const {
     placement = "bottom-start",
     open,
@@ -111,7 +111,7 @@ const MultipleSelect = ({ ref, ...props }) => {
     setControllableValues(preset);
     onChange == null ? void 0 : onChange(preset);
   };
-  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name) ?? rest.size;
   const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
   const displayOptions = useMemo(() => {
     if (!inputValue) {
@@ -147,7 +147,7 @@ const MultipleSelect = ({ ref, ...props }) => {
         onChange: onCheckboxChange,
         checked: isSelected,
         containerProps: {
-          css: {
+          sx: {
             paddingTop: 2,
             paddingBottom: 2,
             paddingLeft: 12,
@@ -260,7 +260,7 @@ const MultipleSelect = ({ ref, ...props }) => {
                           paddingTop: 4,
                           paddingBottom: 4
                         },
-                        getTextCss((_a = rest.xs) == null ? void 0 : _a.size)
+                        getTextCss(rest == null ? void 0 : rest.size)
                       ],
                       children: selectedValueMap.size > 0 ? /* @__PURE__ */ jsxs(
                         "div",
@@ -341,10 +341,10 @@ const MultipleSelect = ({ ref, ...props }) => {
                     searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
                       Input,
                       {
-                        xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
-                        sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
-                        md: { size: (_d = rest.md) == null ? void 0 : _d.size },
-                        lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
+                        size: rest.size,
+                        sm: { size: (_a = rest.sm) == null ? void 0 : _a.size },
+                        md: { size: (_b = rest.md) == null ? void 0 : _b.size },
+                        lg: { size: (_c = rest.lg) == null ? void 0 : _c.size },
                         value: inputValue,
                         ...inputProps,
                         onChange: onInputChange,

package/dist/lib/multiple-select/types.d.ts

@@ -3,10 +3,10 @@ import { Interpolation } from '@emotion/react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
-import { ResponsiveDesign, ShallowMerge } from '../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../types';
 export type MultipleSelectResponsiveProps = InputMaskResponsiveProps;
 export type MultipleSelectOptionValue = string | number;
-interface MultipleSelectExtendedProps<O extends object> extends ResponsiveDesign<MultipleSelectResponsiveProps> {
+interface MultipleSelectExtendedProps<O extends object> extends ToResponsiveProps<MultipleSelectResponsiveProps> {
     placement?: Placement;
     onOpenChange?: UseFloatingOptions['onOpenChange'];
     open?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,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,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,6BAA6B,GAAG,wBAAwB,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,gBAAgB,CAAC,6BAA6B,CAAC;IAE7G,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,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACnE,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,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CACvE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,2BAA2B,CAAC,CAAC,CAAC,CAC/B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,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;AAE1D,MAAM,MAAM,6BAA6B,GAAG,wBAAwB,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,iBAAiB,CAAC,6BAA6B,CAAC;IAE9G,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,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACnE,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,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CACvE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,2BAA2B,CAAC,CAAC,CAAC,CAC/B,CAAC"}

package/dist/lib/otp-input/otp-input.d.ts

@@ -1,3 +1,3 @@
 import { OtpInputProps } from './types';
-export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }: OtpInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, size, sm, md, lg, }: OtpInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=otp-input.d.ts.map

package/dist/lib/otp-input/otp-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/otp-input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASxC,eAAO,MAAM,QAAQ,oGAUlB,aAAa,qDA4If,CAAC"}
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/otp-input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASxC,eAAO,MAAM,QAAQ,sHAclB,aAAa,qDA+If,CAAC"}

package/dist/lib/otp-input/otp-input.js

@@ -15,7 +15,11 @@ const OtpInput = ({
   isLoading,
   defaultValue,
   value,
-  error
+  error,
+  size,
+  sm,
+  md,
+  lg
 }) => {
   const [otp, setOtp] = useControllableState({
     defaultValue: times(length, (num) => (defaultValue == null ? void 0 : defaultValue.at(num)) ?? ""),
@@ -122,7 +126,10 @@ const OtpInput = ({
         fontSize: getTypographyVar("lg").fontSize,
         lineHeight: getTypographyVar("lg").lineHeight
       },
-      xs: { size: "md" },
+      size,
+      sm,
+      md,
+      lg,
       error
     }
   ) }, index)) });

package/dist/lib/otp-input/types.d.ts

@@ -1,10 +1,8 @@
 import { JSX } from 'react';
-import { ResponsiveDesign, ShallowMerge } from '../../types';
-import { InputProps } from '../input';
-type OtpInputResponsiveProps = {
-    size?: InputProps['size'];
-};
-type OtpInputExtendedProps = ResponsiveDesign<OtpInputResponsiveProps> & {
+import { ShallowMerge, ToResponsiveProps } from '../../types';
+import { InputResponsiveProps } from '../input';
+type OtpInputResponsiveProps = InputResponsiveProps;
+type OtpInputExtendedProps = ToResponsiveProps<OtpInputResponsiveProps> & {
     length?: number;
     onChange?: (otp: string) => void;
     disabled?: boolean;

package/dist/lib/otp-input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B,CAAC;AAEF,KAAK,qBAAqB,GAAG,gBAAgB,CAAC,uBAAuB,CAAC,GAAG;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,KAAK,uBAAuB,GAAG,oBAAoB,CAAC;AAEpD,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ1C;;GAEG;AAEH,KAAK,aAAa,GACd;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEN,eAAO,MAAM,YAAY,gBAAiB,MAAM,cAAc,MAAM,iBAAgB,MAAM,oBAgDzF,CAAC;AAoBF,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ1C;;GAEG;AAEH,KAAK,aAAa,GACd;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEN,eAAO,MAAM,YAAY,gBAAiB,MAAM,cAAc,MAAM,iBAAgB,MAAM,oBAgDzF,CAAC;AAkBF,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}

package/dist/lib/pagination/helpers.js

@@ -32,9 +32,7 @@ const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_CO
   return result;
 };
 const defaultProps = {
-  xs: {
-    size: "sm"
-  },
+  size: "sm",
   showPrevPageButton: true,
   showNextPageButton: true,
   states: {

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/pagination.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAY1C,eAAO,MAAM,UAAU,yHAgMrB,CAAC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/pagination.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAY1C,eAAO,MAAM,UAAU,yHAgLrB,CAAC"}

package/dist/lib/pagination/pagination.js

@@ -24,14 +24,14 @@ const Pagination = forwardRef((_props, ref) => {
     showPrevPageButton,
     siblingCount,
     states,
-    xs,
+    size,
     sm,
     md,
     lg,
     ...rest
   } = getPaginationProps(_props);
   const sizeVariantState = {
-    xs: getSizeVariantState(xs == null ? void 0 : xs.size),
+    xs: getSizeVariantState(size),
     sm: getSizeVariantState(sm == null ? void 0 : sm.size),
     md: getSizeVariantState(md == null ? void 0 : md.size),
     lg: getSizeVariantState(lg == null ? void 0 : lg.size)
@@ -73,8 +73,8 @@ const Pagination = forwardRef((_props, ref) => {
       {
         disabled,
         variant: (_a2 = states == null ? void 0 : states.normal) == null ? void 0 : _a2.variant,
+        size,
         ...buttonProps,
-        xs: { size: xs == null ? void 0 : xs.size, ...buttonProps.xs },
         sm: { size: sm == null ? void 0 : sm.size, ...buttonProps.sm },
         md: { size: md == null ? void 0 : md.size, ...buttonProps.md },
         lg: { size: lg == null ? void 0 : lg.size, ...buttonProps.lg }
@@ -85,18 +85,10 @@ const Pagination = forwardRef((_props, ref) => {
     return /* @__PURE__ */ jsx(
       Icon,
       {
-        xs: {
-          size: getSizeVariantState(xs == null ? void 0 : xs.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
-        },
+        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 },
         ...iconProps
       }
     );
@@ -119,30 +111,22 @@ const Pagination = forwardRef((_props, ref) => {
             children: /* @__PURE__ */ jsx(
               Text,
               {
-                xs: {
-                  css: {
-                    paddingLeft: 2,
-                    paddingRight: 2,
-                    ...sizeVariantState.xs.textVariant ? {
-                      fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
-                      lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight
-                    } : {}
-                  }
-                },
-                sm: {
-                  css: sizeVariantState.sm.textVariant ? {
+                sx: {
+                  paddingLeft: 2,
+                  paddingRight: 2,
+                  ...sizeVariantState.xs.textVariant ? {
+                    fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
+                    lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight
+                  } : {},
+                  sm: sizeVariantState.sm.textVariant ? {
                     fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
                     lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight
-                  } : {}
-                },
-                md: {
-                  css: sizeVariantState.md.textVariant ? {
+                  } : {},
+                  md: sizeVariantState.md.textVariant ? {
                     fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
                     lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight
-                  } : {}
-                },
-                lg: {
-                  css: sizeVariantState.lg.textVariant ? {
+                  } : {},
+                  lg: sizeVariantState.lg.textVariant ? {
                     fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
                     lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight
                   } : {}

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

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
 import { IconButtonProps } from '../icon-button';
-import { ResponsiveDesign, SizeVariant, ShallowMerge } from '../../types';
+import { SizeVariant, ShallowMerge, ToResponsiveProps } from '../../types';
 export type PaginationState = 'normal' | 'active';
 export interface PaginationResponsiveProps {
     size?: SizeVariant;
 }
-type PaginationExtendedProps = ResponsiveDesign<PaginationResponsiveProps> & {
+type PaginationExtendedProps = ToResponsiveProps<PaginationResponsiveProps> & {
     page?: number;
     count?: number;
     onChange?: (page: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC;CAKpB;AAED,KAAK,uBAAuB,GAAG,gBAAgB,CAAC,yBAAyB,CAAC,GAAG;IAE3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,eAAe,EACf;QACE,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACtC,CACF,CACF,CAAC;CAGH,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC;CAKpB;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,GAAG;IAE5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,eAAe,EACf;QACE,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACtC,CACF,CACF,CAAC;CAGH,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

package/dist/lib/phone-input/phone-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,kGAUpB,eAAe,qDAwJjB,CAAC"}
+{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,kGAUpB,eAAe,qDAoJjB,CAAC"}

package/dist/lib/phone-input/phone-input.js

@@ -132,23 +132,19 @@ const PhoneInput = ({
             Select,
             {
               containerProps: {
-                xs: {
-                  css: {
-                    width: "fit-content",
-                    minWidth: 80
-                  }
+                sx: {
+                  width: "fit-content",
+                  minWidth: 80
                 }
               },
               css: {
                 paddingRight: 0
               },
-              xs: {
-                outline: {
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                  left: 0
-                }
+              outline: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
               },
               listProps: {
                 style: {
@@ -185,7 +181,9 @@ const PhoneInput = ({
               value: inputDisplayValue,
               disabled,
               containerProps: {
-                css: { flex: 1 }
+                sx: {
+                  flex: 1
+                }
               },
               mainProps: {
                 style: {
@@ -194,10 +192,8 @@ const PhoneInput = ({
                 }
               },
               onChange: onNationalNumberChange,
-              xs: {
-                css: {
-                  borderWidth: 0
-                }
+              sx: {
+                borderWidth: 0
               },
               onFocus: () => setInputFocused(true),
               onBlur: () => setInputFocused(false),

package/dist/lib/phone-input/types.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Interpolation } from '@emotion/react';
-import { ResponsiveDesign, SizeVariant, ShallowMerge } from '../../types';
+import { SizeVariant, ShallowMerge, ToResponsiveProps } from '../../types';
 export type PhoneInputResponsiveProps = {
     size?: Exclude<SizeVariant, 'xs'>;
 };
@@ -20,5 +20,5 @@ export type PhoneInputProps = ShallowMerge<JSX.IntrinsicElements['div'], {
         css?: Interpolation;
     };
     disabled?: boolean;
-} & ResponsiveDesign<PhoneInputResponsiveProps>>;
+} & ToResponsiveProps<PhoneInputResponsiveProps>>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/phone-input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,yBAAyB,CAAC,CAChD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,CACjD,CAAC"}