@janbox/storefront-ui 1.0.16 → 1.0.18

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

@@ -1 +1 @@
-{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBxC,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAiJzD,CAAC"}
+{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBxC,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAwJzD,CAAC"}

package/dist/lib/cascader/cascader.js

@@ -4,13 +4,13 @@ import { isNil } from "lodash-es";
 import { CascaderFloatingContent } from "./cascader-floating-content.js";
 import { getCascaderProps } from "./helpers.js";
 import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { truncateStyle } from "../../constants/emotion.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { SvgLoader } from "../../components/svg-loader.js";
-import { Primitive } from "../primitive/primitive.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
@@ -18,7 +18,7 @@ import { FloatingContent } from "../floating/floating-content/floating-content.j
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const DEFAULT_SEPARATOR = "/";
 const Cascader = ({ ref, ..._props }) => {
-  var _a;
+  var _a, _b, _c, _d, _e;
   const {
     placement = "bottom-start",
     open,
@@ -75,15 +75,22 @@ const Cascader = ({ ref, ..._props }) => {
     return getTypographyVar(textVariant);
   };
   return /* @__PURE__ */ jsxs(
-    Primitive,
+    "div",
     {
       ...containerProps,
-      css: {
-        display: "flex",
-        flexDirection: "column",
-        ...fullWidth ? { width: "100%" } : {}
-      },
-      as: "div",
+      css: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          ...fullWidth ? { width: "100%" } : {}
+        },
+        (_a = containerProps == null ? void 0 : containerProps.xs) == null ? void 0 : _a.css,
+        {
+          [mediaQuery("sm")]: (_b = containerProps == null ? void 0 : containerProps.sm) == null ? void 0 : _b.css,
+          [mediaQuery("md")]: (_c = containerProps == null ? void 0 : containerProps.md) == null ? void 0 : _c.css,
+          [mediaQuery("lg")]: (_d = containerProps == null ? void 0 : containerProps.lg) == null ? void 0 : _d.css
+        }
+      ],
       children: [
         /* @__PURE__ */ jsxs(
           Floating,
@@ -129,7 +136,7 @@ const Cascader = ({ ref, ..._props }) => {
                           textAlign: "left",
                           ...truncateStyle
                         },
-                        getTextCss((_a = rest.xs) == null ? void 0 : _a.size)
+                        getTextCss((_e = rest.xs) == null ? void 0 : _e.size)
                       ],
                       children: selectedPath.length > 0 ? /* @__PURE__ */ jsx("div", { children: valueRenderer ?? selectedPath.join(" / ") }) : /* @__PURE__ */ jsx("div", { css: { color: getColorVar("neutral.400") }, children: placeholder })
                     }

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

@@ -1,10 +1,9 @@
 import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
-import { ResponsiveDesign } from '@janbox/storefront-ui/types';
+import { PropsWithCSS, ResponsiveDesign } from '@janbox/storefront-ui/types';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
 import { ShallowMerge } from '../../types';
-import { PrimitiveProps } from '../primitive';
 export type CascaderResponsiveProps = InputMaskResponsiveProps;
 export type CascaderOptionValue = string | number;
 export interface CascaderOption {
@@ -49,7 +48,7 @@ interface CascaderExtendedProps extends ResponsiveDesign<CascaderResponsiveProps
     /** Helper text below the input */
     helperText?: string;
     /** Props for the container div */
-    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
+    containerProps?: ShallowMerge<JSX.IntrinsicElements['div'], ResponsiveDesign<PropsWithCSS>>;
     /** Props for the search input */
     inputProps?: InputProps;
     /** Whether component takes full width */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qIAAqI;IACrI,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wBAAwB;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,yIAAyI;IACzI,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACpE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,iDAAiD;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,iCAAiC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qIAAqI;IACrI,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wBAAwB;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,yIAAyI;IACzI,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACpE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,iDAAiD;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAC5F,iCAAiC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
-export type BlockSkeletonProps = JSX.IntrinsicElements['div'];
-export declare const BlockSkeleton: (props: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+export type BlockSkeletonProps = ShallowMerge<JSX.IntrinsicElements['div'], ResponsiveDesign<PropsWithCSS>>;
+export declare const BlockSkeleton: ({ xs, sm, md, lg, ...props }: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=block-skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAEtD,CAAC"}
+{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;AAE5G,eAAO,MAAM,aAAa,iCAAkC,kBAAkB,qDAgB7E,CAAC"}

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

@@ -1,9 +1,24 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import "lodash-es";
+import { mediaQuery } from "../../../theme/screens.js";
 import { getColorVar } from "../../../theme/palette.js";
-const BlockSkeleton = (props) => {
-  return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar("neutral.200") }], ...props });
+const BlockSkeleton = ({ xs, sm, md, lg, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: [
+        animatePulseStyle,
+        { borderRadius: 4, backgroundColor: getColorVar("neutral.200") },
+        xs == null ? void 0 : xs.css,
+        {
+          [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
+          [mediaQuery("md")]: md == null ? void 0 : md.css,
+          [mediaQuery("lg")]: lg == null ? void 0 : lg.css
+        }
+      ],
+      ...props
+    }
+  );
 };
 export {
   BlockSkeleton

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA4BtD,CAAC"}
+{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,eAAO,MAAM,aAAa,iCAAkC,kBAAkB,qDAkC7E,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import "lodash-es";
+import { mediaQuery } from "../../../theme/screens.js";
 import { getColorVar } from "../../../theme/palette.js";
-const ImageSkeleton = (props) => {
+const ImageSkeleton = ({ xs, sm, md, lg, ...props }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -16,6 +16,12 @@ const ImageSkeleton = (props) => {
           height: "100%",
           borderRadius: "0.25rem",
           backgroundColor: getColorVar("neutral.200")
+        },
+        xs == null ? void 0 : xs.css,
+        {
+          [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
+          [mediaQuery("md")]: md == null ? void 0 : md.css,
+          [mediaQuery("lg")]: lg == null ? void 0 : lg.css
         }
       ],
       ...props,

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

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

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,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC"}
+{"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"}

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, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, xs, sm, md, lg, ...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;AAO9C,eAAO,MAAM,cAAc,qEAQxB,mBAAmB,qDAkCrB,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,qFAYxB,mBAAmB,qDA0CrB,CAAC"}

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

@@ -3,6 +3,8 @@ 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";
 const LoadingOverlay = ({
   isLoading = false,
   iconProps,
@@ -10,6 +12,10 @@ const LoadingOverlay = ({
   style,
   size = 32,
   children,
+  xs,
+  sm,
+  md,
+  lg,
   ...props
 }) => {
   const { main } = getColorShadesByVariant(color);
@@ -21,8 +27,16 @@ const LoadingOverlay = ({
         minHeight: size,
         ...style
       },
-      css: { position: "relative" },
       ...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
+        }
+      ],
       children: [
         children,
         isLoading && /* @__PURE__ */ jsx(

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

@@ -1,9 +1,9 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../../types';
+import { ColorVariant, PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
 export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     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,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE1D,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,CACF,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,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"}

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

@@ -1,3 +1,3 @@
 import { TextSkeletonProps } from './types';
-export declare const TextSkeleton: (props: TextSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TextSkeleton: ({ xs, sm, md, lg, ...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,UAAW,iBAAiB,qDAcpD,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;AAK5C,eAAO,MAAM,YAAY,iCAAkC,iBAAiB,qDAyB3E,CAAC"}

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

@@ -1,21 +1,36 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import "lodash-es";
+import { mediaQuery } from "../../../theme/screens.js";
 import { getColorVar } from "../../../theme/palette.js";
-const TextSkeleton = (props) => {
-  return /* @__PURE__ */ jsxs("span", { css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" }, ...props, children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        css: [
-          animatePulseStyle,
-          { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
-        ],
-        children: " "
-      }
-    ),
-    " "
-  ] });
+const TextSkeleton = ({ xs, sm, md, lg, ...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
+        }
+      ],
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            css: [
+              animatePulseStyle,
+              { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
+            ],
+            children: " "
+          }
+        ),
+        " "
+      ]
+    }
+  );
 };
 export {
   TextSkeleton

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

@@ -1,3 +1,4 @@
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
 import { JSX } from 'react';
-export type TextSkeletonProps = JSX.IntrinsicElements['p'];
+export type TextSkeletonProps = ShallowMerge<JSX.IntrinsicElements['span'], ResponsiveDesign<PropsWithCSS>>;
 //# 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,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC"}
+{"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"}

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

@@ -1,3 +1,3 @@
 import { PhoneInputProps } from './types';
-export declare const PhoneInput: import('react').ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const PhoneInput: ({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ref, ...props }: PhoneInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=phone-input.d.ts.map

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,yHAqJtB,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,qDAwJjB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
 import { phone } from "phone";
@@ -46,157 +46,170 @@ const parsePhoneInputValue = (value) => {
     countryCode: countryIso2 ?? ((_b = countries.find((country) => country.dial_code === value.dialCode)) == null ? void 0 : _b.code)
   };
 };
-const PhoneInput = forwardRef(
-  ({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ...props }, ref) => {
-    var _a;
-    const [selectOpen, setSelectOpen] = useState(false);
-    const [inputFocused, setInputFocused] = useState(false);
-    const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, wrapperRef]);
-    const [wrapperWidth, setWrapperWidth] = useState(0);
-    useEffect(() => {
-      const resizeObserver = new ResizeObserver((entries) => {
-        var _a2;
-        const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
-        if (domRect) {
-          setWrapperWidth(domRect.width);
-        }
-      });
-      if (wrapperRef.current) {
-        resizeObserver.observe(wrapperRef.current);
+const PhoneInput = ({
+  error,
+  defaultValue,
+  value,
+  onChange,
+  containerProps,
+  helperText,
+  disabled,
+  ref,
+  ...props
+}) => {
+  var _a;
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
+  const inputRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const mergedRefs = useMergeRefs([ref, wrapperRef]);
+  const [wrapperWidth, setWrapperWidth] = useState(0);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      var _a2;
+      const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
+      if (domRect) {
+        setWrapperWidth(domRect.width);
       }
-      return () => resizeObserver.disconnect();
-    }, []);
-    const [internalValue, setInternalValue] = useControllableState({
-      defaultValue: parsePhoneInputValue(defaultValue) ?? {
-        countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
-      },
-      value: parsePhoneInputValue(value)
     });
-    const triggerChange = (next) => {
-      setInternalValue(next);
-      onChange == null ? void 0 : onChange(next);
-    };
-    const onDialCodeChange = (_, option) => {
-      var _a2;
-      triggerChange({
-        ...internalValue,
-        dialCode: option.dial_code,
-        countryCode: option.code
-      });
-      (_a2 = inputRef.current) == null ? void 0 : _a2.select();
-    };
-    const onNationalNumberChange = (e) => {
-      e.target.value = e.target.value.replace(/[^0-9]/g, "");
-      triggerChange({
-        ...internalValue,
-        nationalNumber: e.target.value
-      });
-    };
-    const inputDisplayValue = (() => {
-      const originalValue = internalValue.nationalNumber ?? "";
-      return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, "$1 $2 $3");
-    })();
-    return /* @__PURE__ */ jsxs("div", { ...containerProps, css: [{ display: "flex", flexDirection: "column", width: "100%" }, containerProps == null ? void 0 : containerProps.css], children: [
-      /* @__PURE__ */ jsx(
-        ForwardRefInputMask,
-        {
-          ...props,
-          css: [
-            error && !selectOpen && {
-              "&::after": { borderColor: getColorVar("red.600") }
-            },
-            inputFocused && {
-              "&::after": { borderColor: getColorVar("primary.600") },
-              boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
-            },
-            disabled && {
-              backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
-              pointerEvents: "none"
-            },
-            props.css
-          ],
-          ref: mergedRefs,
-          children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                containerProps: {
-                  css: { width: "fit-content", minWidth: 80 }
-                },
-                css: {
-                  paddingRight: 0
-                },
+    if (wrapperRef.current) {
+      resizeObserver.observe(wrapperRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+  const [internalValue, setInternalValue] = useControllableState({
+    defaultValue: parsePhoneInputValue(defaultValue) ?? {
+      countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
+    },
+    value: parsePhoneInputValue(value)
+  });
+  const triggerChange = (next) => {
+    setInternalValue(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const onDialCodeChange = (_, option) => {
+    var _a2;
+    triggerChange({
+      ...internalValue,
+      dialCode: option.dial_code,
+      countryCode: option.code
+    });
+    (_a2 = inputRef.current) == null ? void 0 : _a2.select();
+  };
+  const onNationalNumberChange = (e) => {
+    e.target.value = e.target.value.replace(/[^0-9]/g, "");
+    triggerChange({
+      ...internalValue,
+      nationalNumber: e.target.value
+    });
+  };
+  const inputDisplayValue = (() => {
+    const originalValue = internalValue.nationalNumber ?? "";
+    return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, "$1 $2 $3");
+  })();
+  return /* @__PURE__ */ jsxs("div", { ...containerProps, css: [{ display: "flex", flexDirection: "column", width: "100%" }, containerProps == null ? void 0 : containerProps.css], children: [
+    /* @__PURE__ */ jsx(
+      ForwardRefInputMask,
+      {
+        ...props,
+        css: [
+          error && !selectOpen && {
+            "&::after": { borderColor: getColorVar("red.600") }
+          },
+          inputFocused && {
+            "&::after": { borderColor: getColorVar("primary.600") },
+            boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
+          },
+          disabled && {
+            backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
+            pointerEvents: "none"
+          },
+          props.css
+        ],
+        ref: mergedRefs,
+        children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              containerProps: {
                 xs: {
-                  outline: {
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    left: 0
-                  }
-                },
-                listProps: {
-                  style: {
-                    width: wrapperWidth
+                  css: {
+                    width: "fit-content",
+                    minWidth: 80
                   }
-                },
-                value: internalValue.countryCode ?? null,
-                onChange: onDialCodeChange,
-                options: countries,
-                disabled,
-                selectedRenderer: SelectedRenderer,
-                optionLabel: CountryRowLabel,
-                optionValue: "code",
-                optionSearchLabel: ["name", "dial_code", "code"],
-                open: selectOpen,
-                onOpenChange: setSelectOpen
+                }
+              },
+              css: {
+                paddingRight: 0
+              },
+              xs: {
+                outline: {
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0
+                }
+              },
+              listProps: {
+                style: {
+                  width: wrapperWidth
+                }
+              },
+              value: internalValue.countryCode ?? null,
+              onChange: onDialCodeChange,
+              options: countries,
+              disabled,
+              selectedRenderer: SelectedRenderer,
+              optionLabel: CountryRowLabel,
+              optionValue: "code",
+              optionSearchLabel: ["name", "dial_code", "code"],
+              open: selectOpen,
+              onOpenChange: setSelectOpen
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                borderRight: "1px solid",
+                borderColor: getColorVar("border.default"),
+                height: "66.666667%",
+                marginLeft: 8,
+                marginRight: 8
               }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: inputDisplayValue,
+              disabled,
+              containerProps: {
+                css: { flex: 1 }
+              },
+              mainProps: {
+                style: {
+                  paddingLeft: 0,
+                  boxShadow: "none"
+                }
+              },
+              onChange: onNationalNumberChange,
+              xs: {
                 css: {
-                  borderRight: "1px solid",
-                  borderColor: getColorVar("border.default"),
-                  height: "66.666667%",
-                  marginLeft: 8,
-                  marginRight: 8
+                  borderWidth: 0
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: inputDisplayValue,
-                disabled,
-                containerProps: {
-                  css: { flex: 1 }
-                },
-                mainProps: {
-                  style: {
-                    paddingLeft: 0,
-                    boxShadow: "none"
-                  }
-                },
-                onChange: onNationalNumberChange,
-                xs: {
-                  css: {
-                    borderWidth: 0
-                  }
-                },
-                onFocus: () => setInputFocused(true),
-                onBlur: () => setInputFocused(false),
-                ref: inputRef
-              }
-            )
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-    ] });
-  }
-);
+              },
+              onFocus: () => setInputFocused(true),
+              onBlur: () => setInputFocused(false),
+              ref: inputRef
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
 export {
   PhoneInput
 };

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/lib/select/select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkBzD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,iBAAiB,sBAAsB,CAAC,SAAS,MAAM,8BAGrF,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,qDAwUnB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/lib/select/select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkBzD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,iBAAiB,sBAAsB,CAAC,SAAS,MAAM,8BAGrF,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,qDA+UnB,CAAC"}

package/dist/lib/select/select.js

@@ -9,6 +9,7 @@ import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
 import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
 import CheckIcon from "../../assets/svg/done-check.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { ensureArray, matchSearch } from "../../utils/common.js";
@@ -23,7 +24,7 @@ const Select = ({
   ref,
   ...props
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const {
     placement = "bottom-start",
     open,
@@ -204,12 +205,19 @@ const Select = ({
     "div",
     {
       ...containerProps,
-      css: {
-        display: "flex",
-        flexDirection: "column",
-        ...fullWidth ? { width: "100%" } : {},
-        ...containerProps == null ? void 0 : containerProps.css
-      },
+      css: [
+        {
+          display: "flex",
+          flexDirection: "column"
+        },
+        fullWidth && { width: "100%" },
+        (_a = containerProps == null ? void 0 : containerProps.xs) == null ? void 0 : _a.css,
+        {
+          [mediaQuery("sm")]: (_b = containerProps == null ? void 0 : containerProps.sm) == null ? void 0 : _b.css,
+          [mediaQuery("md")]: (_c = containerProps == null ? void 0 : containerProps.md) == null ? void 0 : _c.css,
+          [mediaQuery("lg")]: (_d = containerProps == null ? void 0 : containerProps.lg) == null ? void 0 : _d.css
+        }
+      ],
       children: [
         /* @__PURE__ */ jsxs(
           Floating,
@@ -263,7 +271,7 @@ const Select = ({
                     {
                       css: [
                         { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                        getTextCss((_a = rest.xs) == null ? void 0 : _a.size)
+                        getTextCss((_e = rest.xs) == null ? void 0 : _e.size)
                       ],
                       children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
                     }
@@ -288,10 +296,10 @@ const Select = ({
                     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 },
+                        xs: { size: (_f = rest.xs) == null ? void 0 : _f.size },
+                        sm: { size: (_g = rest.sm) == null ? void 0 : _g.size },
+                        md: { size: (_h = rest.md) == null ? void 0 : _h.size },
+                        lg: { size: (_i = rest.lg) == null ? void 0 : _i.size },
                         value: inputValue,
                         ...inputProps,
                         onChange: onInputChange,

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

@@ -3,7 +3,7 @@ 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 { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
 export type SelectResponsiveProps = InputMaskResponsiveProps;
 export type SelectOptionValue = string | number | boolean;
 interface SelectExtendedProps<V extends SelectOptionValue, O extends object> extends ResponsiveDesign<SelectResponsiveProps> {
@@ -24,9 +24,7 @@ interface SelectExtendedProps<V extends SelectOptionValue, O extends object> ext
     selectedRenderer?: (option: O) => React.ReactNode;
     error?: boolean;
     helperText?: string;
-    containerProps?: JSX.IntrinsicElements['div'] & {
-        css?: Interpolation;
-    };
+    containerProps?: ShallowMerge<JSX.IntrinsicElements['div'], ResponsiveDesign<PropsWithCSS>>;
     inputProps?: InputProps;
     fullWidth?: boolean;
     lazy?: boolean;

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

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

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

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

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

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

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

@@ -1,14 +1,12 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import "lodash-es";
+import { mediaQuery } from "../../../theme/screens.js";
 import { getColorVar } from "../../../theme/palette.js";
-import { Primitive } from "../../primitive/primitive.js";
-const TableBody = ({ children, ...props }) => {
+const TableBody = ({ xs, sm, md, lg, children, ref, ...props }) => {
   return /* @__PURE__ */ jsx(
-    Primitive,
+    "tbody",
     {
-      as: "tbody",
-      xs: {
-        css: {
+      css: [
+        {
           "& > tr": {
             position: "relative",
             "&::after": {
@@ -22,9 +20,16 @@ const TableBody = ({ children, ...props }) => {
               borderBottomColor: getColorVar("neutral.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
         }
-      },
+      ],
       ...props,
+      ref,
       children
     }
   );

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

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

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

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

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

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

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

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

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

@@ -1,14 +1,12 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import "lodash-es";
+import { mediaQuery } from "../../../theme/screens.js";
 import { getColorVar } from "../../../theme/palette.js";
-import { Primitive } from "../../primitive/primitive.js";
-const TableHead = ({ children, ...props }) => {
+const TableHead = ({ xs, sm, md, lg, children, ...props }) => {
   return /* @__PURE__ */ jsx(
-    Primitive,
+    "thead",
     {
-      as: "thead",
-      xs: {
-        css: {
+      css: [
+        {
           position: "relative",
           fontWeight: 500,
           "&::after": {
@@ -21,8 +19,14 @@ const TableHead = ({ children, ...props }) => {
             borderTopStyle: "solid",
             borderTopColor: getColorVar("neutral.200")
           }
+        },
+        xs == null ? void 0 : xs.css,
+        {
+          [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
+          [mediaQuery("md")]: md == null ? void 0 : md.css,
+          [mediaQuery("lg")]: lg == null ? void 0 : lg.css
         }
-      },
+      ],
       ...props,
       children
     }

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

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

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

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

package/package.json

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