@janbox/storefront-ui 1.0.17 → 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,5 +1,5 @@
 import { JSX } from 'react';
-import { PrimitiveProps } from '../../primitive';
-export type BlockSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
-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;AAI5B,OAAO,EAAa,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC;AAE9F,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAItD,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,10 +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";
-import { Primitive } from "../../primitive/primitive.js";
-const BlockSkeleton = (props) => {
-  return /* @__PURE__ */ jsx(Primitive, { 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;AAM7C,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,11 +1,10 @@
 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";
-import { Primitive } from "../../primitive/primitive.js";
-const ImageSkeleton = (props) => {
+const ImageSkeleton = ({ xs, sm, md, lg, ...props }) => {
   return /* @__PURE__ */ jsx(
-    Primitive,
+    "div",
     {
       css: [
         animatePulseStyle,
@@ -17,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,4 +1,4 @@
-import { PrimitiveProps } from '../../primitive';
+import { ShallowMerge, ResponsiveDesign, PropsWithCSS } from '../../../types';
 import { JSX } from 'react';
-export type ImageSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
+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,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,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;AAQ9C,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,7 +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 { Primitive } from "../../primitive/primitive.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
 const LoadingOverlay = ({
   isLoading = false,
   iconProps,
@@ -11,19 +12,31 @@ const LoadingOverlay = ({
   style,
   size = 32,
   children,
+  xs,
+  sm,
+  md,
+  lg,
   ...props
 }) => {
   const { main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsxs(
-    Primitive,
+    "div",
     {
       style: {
         minWidth: size,
         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,10 +1,9 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../../types';
-import { PrimitiveProps } from '../../primitive';
-export type LoadingOverlayProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>, {
+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,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,EAC5D;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;AAM5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAkBpD,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,14 +1,20 @@
 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";
-import { Primitive } from "../../primitive/primitive.js";
-const TextSkeleton = (props) => {
+const TextSkeleton = ({ xs, sm, md, lg, ...props }) => {
   return /* @__PURE__ */ jsxs(
-    Primitive,
+    "span",
     {
-      as: "span",
-      css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" },
+      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(

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

@@ -1,4 +1,4 @@
-import { PrimitiveProps } from '../../primitive';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
 import { JSX } from 'react';
-export type TextSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['span'], HTMLSpanElement>;
+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,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,eAAe,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/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,qDAyUnB,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";
@@ -17,14 +18,13 @@ import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.j
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
 import { Input } from "../input/input.js";
-import { Primitive } from "../primitive/primitive.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const DEFAULT_DISPLAY_ROW_COUNT = 5;
 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,
@@ -202,7 +202,7 @@ const Select = ({
     return () => clearTimeout(timer);
   }, [isOpen, setInputValue]);
   return /* @__PURE__ */ jsxs(
-    Primitive,
+    "div",
     {
       ...containerProps,
       css: [
@@ -210,7 +210,13 @@ const Select = ({
           display: "flex",
           flexDirection: "column"
         },
-        fullWidth && { width: "100%" }
+        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(
@@ -265,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 })
                     }
@@ -290,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,8 +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 { PrimitiveProps } from '../primitive';
+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> {
@@ -25,7 +24,7 @@ interface SelectExtendedProps<V extends SelectOptionValue, O extends object> ext
     selectedRenderer?: (option: O) => React.ReactNode;
     error?: boolean;
     helperText?: string;
-    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
+    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;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,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,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC;IAC9E,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.17",
+  "version": "1.0.18",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [