@janbox/storefront-ui 1.0.27 → 2.0.1

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flex-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;CAAG;AAEhF,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/flexbox/flex-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/flexbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvC,eAAO,MAAM,OAAO,4CAA6C,YAAY,qDAkB5E,CAAC"}
+{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/flexbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvC,eAAO,MAAM,OAAO,4CAA6C,YAAY,qDAmB5E,CAAC"}

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -4,10 +4,11 @@ import { mediaQuery } from "../../../theme/screens.js";
 import "../../../theme/palette.js";
 import { containerStyle } from "../../../constants/emotion.js";
 const Flexbox = ({ children, container, ref, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = getFlexboxProps(_props);
+  const { sx = {}, ...rest } = getFlexboxProps(_props);
+  const { sm, md, lg, ...restSx } = sx;
   const css = [
     container && containerStyle,
-    createStyle(xs),
+    createStyle(restSx),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
@@ -16,7 +17,8 @@ const Flexbox = ({ children, container, ref, ..._props }) => {
   ];
   return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx("div", { css: { display: "flex", width: "100%", height: "100%" }, children }) });
 };
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
+const createStyle = (sx = {}) => {
+  const { width, height, ...css } = sx;
   return [
     {
       width,

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAcvC,eAAO,MAAM,eAAe,aAAc,YAAY,iBAErD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAYvC,eAAO,MAAM,eAAe,aAAc,YAAY,iBAErD,CAAC"}

package/dist/lib/flexbox/flexbox/helpers.js

@@ -1,11 +1,9 @@
 import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-  xs: {
-    css: {
-      flexDirection: "row",
-      alignItems: "flex-start",
-      justifyContent: "flex-start"
-    }
+  sx: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "flex-start"
   }
 };
 const getFlexboxProps = (extended) => {

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-interface FlexboxExtendedProps extends ResponsiveDesign<PropsWithCSS> {
+import { PropsWithSx, ShallowMerge } from '../../../types';
+interface FlexboxExtendedProps {
     container?: boolean;
 }
-export type FlexboxProps = ShallowMerge<JSX.IntrinsicElements['div'], FlexboxExtendedProps>;
+export type FlexboxProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<FlexboxExtendedProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,CAAC"}

package/dist/lib/floating/floating-close/floating-close.js

@@ -2,8 +2,6 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { useFloatingContext } from "../floating/helpers.js";
-import "lodash-es";
-import "../../../theme/palette.js";
 import { cn } from "../../../utils/stylesheet.js";
 const FloatingClose = forwardRef(
   ({ event = "click", reason, className, ...props }, ref) => {

package/dist/lib/floating/floating-content/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB;IACE,mBAAmB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC;IACrE,oBAAoB,CAAC,EAAE,OAAO,CAC5B,YAAY,CACV,cAAc,CAAC,OAAO,eAAe,CAAC,EACtC;QACE,QAAQ,EAAE,OAAO,CAAC;QAClB,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CACF,CACF,CAAC;IACF,yBAAyB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC;CAClF,CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB;IACE,mBAAmB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC;IACrE,oBAAoB,CAAC,EAAE,OAAO,CAC5B,YAAY,CACV,cAAc,CAAC,OAAO,eAAe,CAAC,EACtC;QACE,QAAQ,EAAE,OAAO,CAAC;QAClB,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CACF,CACF,CAAC;IACF,yBAAyB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC;CAClF,CACF,CAAC"}

package/dist/lib/grid/cell/cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/cell/cell.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAIzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAiB3D,CAAC"}
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/cell/cell.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAkB3D,CAAC"}

package/dist/lib/grid/cell/cell.js

@@ -3,24 +3,25 @@ import { isNumber } from "lodash-es";
 import { getCellProps } from "./helpers.js";
 import { mediaQuery } from "../../../theme/screens.js";
 import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const Cell = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = getCellProps(_props);
+  const { colSpan, sm, md, lg, sx, ...rest } = getCellProps(_props);
   const css = [
-    createStyle(xs),
+    createStyle({ colSpan }),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
       [mediaQuery("lg")]: createStyle(lg)
-    }
+    },
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children });
 };
-const createStyle = ({ colSpan, css } = {}) => {
+const createStyle = ({ colSpan } = {}) => {
   return [
     {
       gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan
-    },
-    css
+    }
   ];
 };
 export {

package/dist/lib/grid/cell/types.d.ts

@@ -1,7 +1,9 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
-export interface CellResponsiveProps extends PropsWithCSS {
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+export interface CellResponsiveProps {
     colSpan?: number;
 }
-export type CellProps = JSX.IntrinsicElements['div'] & ResponsiveDesign<CellResponsiveProps>;
+type CellExtendedProps = PropsWithSx<ToResponsiveProps<CellResponsiveProps>>;
+export type CellProps = ShallowMerge<JSX.IntrinsicElements['div'], CellExtendedProps>;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/grid/cell/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/cell/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/cell/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,iBAAiB,GAAG,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/grid/grid.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAkB3D,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/grid/grid.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAMzD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAmB3D,CAAC"}

package/dist/lib/grid/grid/grid.js

@@ -7,19 +7,21 @@ import { containerStyle } from "../../../constants/emotion.js";
 const GRID_MINIMUM_COLS = 1;
 const GRID_MAXIMUM_COLS = 24;
 const Grid = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, container, ...rest } = getGridProps(_props);
+  const { cols, sm, md, lg, container, sx = {}, ...rest } = getGridProps(_props);
+  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
   const css = [
     container && containerStyle,
-    createStyle(xs),
+    createStyle({ cols }, sxXs),
     {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
+      [mediaQuery("sm")]: createStyle(sm, sxSm),
+      [mediaQuery("md")]: createStyle(md, sxMd),
+      [mediaQuery("lg")]: createStyle(lg, sxLg)
     }
   ];
   return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx("div", { css: { display: "grid", width: "100%", height: "100%" }, children }) });
 };
-const createStyle = ({ cols, css: { width, height, ...css } = {} } = {}) => {
+const createStyle = ({ cols } = {}, sx = {}) => {
+  const { width, height, ...css } = sx;
   return [
     {
       width,

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

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

package/dist/lib/grid/grid/helpers.js

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

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

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-export interface GridResponsiveProps extends PropsWithCSS {
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+export interface GridResponsiveProps {
     cols?: number;
 }
-type GridExtendedProps = ResponsiveDesign<GridResponsiveProps> & {
+type GridExtendedProps = PropsWithSx<ToResponsiveProps<GridResponsiveProps> & {
     container?: boolean;
-};
+}>;
 export type GridProps = ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/highlight-words/highlight-words.js

@@ -1,8 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Fragment } from "react";
 import { findAll } from "highlight-words-core";
-import "lodash-es";
-import "../../theme/palette.js";
 import { cn } from "../../utils/stylesheet.js";
 const HighlightWords = ({ highlightClassName, ...props }) => {
   const chunks = findAll(props);

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

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

package/dist/lib/icon/helpers.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,IAAI,4CAA6C,SAAS,qDAoBtE,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAMzD,eAAO,MAAM,IAAI,4CAA6C,SAAS,qDAqBtE,CAAC"}

package/dist/lib/icon/icon.js

@@ -3,20 +3,22 @@ import { getIconProps } from "./helpers.js";
 import { SvgLoader } from "../../components/svg-loader.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 const Icon = ({ children: _children, ref, ..._props }) => {
-  const { source, xs, md, sm, lg, ...props } = getIconProps(_props);
+  const { source, sx, size, md, sm, lg, ...props } = getIconProps(_props);
   return /* @__PURE__ */ jsx(
     SvgLoader,
     {
       source,
       ...props,
       css: [
-        createStyle(xs),
+        createStyle({ size }),
         {
           [mediaQuery("sm")]: createStyle(sm),
           [mediaQuery("md")]: createStyle(md),
           [mediaQuery("lg")]: createStyle(lg)
-        }
+        },
+        createSxInterpolation(sx)
       ],
       width: void 0,
       height: void 0,
@@ -24,12 +26,11 @@ const Icon = ({ children: _children, ref, ..._props }) => {
     }
   );
 };
-const createStyle = ({ css, size } = {}) => {
+const createStyle = ({ size } = {}) => {
   return [
     {
       width: size,
-      height: size,
-      ...css
+      height: size
     }
   ];
 };

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

@@ -1,12 +1,12 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign } from '../../types';
-export interface IconResponsiveProps extends PropsWithCSS {
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+export interface IconResponsiveProps {
     size?: number;
 }
 type IconHTMLProps = JSX.IntrinsicElements['svg'];
-export type IconExtendedProps = ResponsiveDesign<IconResponsiveProps> & {
+export type IconExtendedProps = PropsWithSx<ToResponsiveProps<IconResponsiveProps> & {
     source: string;
-};
-export type IconProps = IconHTMLProps & IconExtendedProps;
+}>;
+export type IconProps = ShallowMerge<IconHTMLProps, IconExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,KAAK,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAElD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IACtE,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,KAAK,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAElD,MAAM,MAAM,iBAAiB,GAAG,WAAW,CACzC,iBAAiB,CAAC,mBAAmB,CAAC,GAAG;IACvC,MAAM,EAAE,MAAM,CAAC;CAChB,CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/icon-button/helpers.d.ts.map

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

package/dist/lib/icon-button/helpers.js

@@ -1,41 +1,18 @@
-import { screens } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { mergeComponentProps, getSizeVariantState } from "../../utils/index.js";
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    size: "md",
-    css: {
-      borderTopLeftRadius: 8,
-      borderTopRightRadius: 8,
-      borderBottomLeftRadius: 8,
-      borderBottomRightRadius: 8
-    }
+  size: "md",
+  sx: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8
   },
   variant: "text",
   color: "primary",
   type: "button"
 };
 const getIconButtonProps = (extended) => {
-  return mergeComponentProps(
-    defaultProps,
-    extended,
-    ...screens.map((screen) => {
-      return (current) => {
-        var _a;
-        const size = (_a = current[screen]) == null ? void 0 : _a.size;
-        const propsBySize = {};
-        const { inputSize } = getSizeVariantState(size);
-        propsBySize[screen] = {
-          css: {
-            minHeight: inputSize,
-            minWidth: inputSize
-          }
-        };
-        return propsBySize;
-      };
-    }),
-    extended
-  );
+  return mergeComponentProps(defaultProps, extended);
 };
 export {
   getIconButtonProps

package/dist/lib/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/icon-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAW1C,eAAO,MAAM,UAAU,4HAwIrB,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/icon-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAA6B,MAAM,SAAS,CAAC;AAWrE,eAAO,MAAM,UAAU,4HA2HrB,CAAC"}

package/dist/lib/icon-button/icon-button.js

@@ -3,17 +3,16 @@ import { forwardRef, useRef } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { getIconButtonProps } from "./helpers.js";
 import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
-import { getColorShadesByVariant, getSizeVariantState, omitResponsiveProps } from "../../utils/index.js";
+import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
 import LoadingIcon from "../../assets/svg/loading-waiting.svg.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
+import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
 import { animateSpinStyle } from "../../constants/emotion.js";
 import { ensureBoolean } from "../../utils/common.js";
 import { Icon } from "../icon/icon.js";
-import { cn } from "../../utils/stylesheet.js";
 const IconButton = forwardRef((_props, ref) => {
-  var _a, _b, _c, _d;
-  const { color, variant, children, icon, isLoading, ...rest } = getIconButtonProps(_props);
+  const { size, color, variant, children, icon, isLoading, sx, sm, md, lg, ...rest } = getIconButtonProps(_props);
   const {
     dark,
     light,
@@ -26,10 +25,6 @@ const IconButton = forwardRef((_props, ref) => {
   const buttonRef = useRef(null);
   const { className } = useRippleEffect(buttonRef);
   const mergedRef = useMergeRefs([ref, buttonRef]);
-  const createStyle = (screen) => {
-    const { css: css2 } = rest[screen] ?? {};
-    return [css2];
-  };
   const css = [
     {
       display: "flex",
@@ -94,60 +89,58 @@ const IconButton = forwardRef((_props, ref) => {
     rest["aria-disabled"] && {
       pointerEvents: "none"
     },
-    createStyle("xs"),
+    createStyle({ size }),
     {
-      [mediaQuery("sm")]: createStyle("sm"),
-      [mediaQuery("md")]: createStyle("md")
-    }
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    },
+    createSxInterpolation(sx)
   ];
   const onClick = (e) => {
-    var _a2;
-    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
+    var _a;
+    (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsxs(
-    "button",
+  return /* @__PURE__ */ jsxs("button", { css, className: cn(rest.className, className), onClick, ref: mergedRef, children: [
+    !!icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: getSizeVariantState(size).iconSize,
+        ...icon,
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...icon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...icon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...icon.lg
+        }
+      }
+    ),
+    children,
+    isLoading && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-loading": true,
+        css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
+        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+      }
+    )
+  ] });
+});
+const createStyle = ({ size } = {}) => {
+  const { inputSize } = getSizeVariantState(size);
+  return [
     {
-      css,
-      ...omitResponsiveProps(rest),
-      className: cn(rest.className, className),
-      onClick,
-      ref: mergedRef,
-      children: [
-        !!icon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            ...icon,
-            xs: {
-              size: getSizeVariantState((_a = rest.xs) == null ? void 0 : _a.size).iconSize,
-              ...icon.xs
-            },
-            sm: {
-              size: getSizeVariantState((_b = rest.sm) == null ? void 0 : _b.size).iconSize,
-              ...icon.sm
-            },
-            md: {
-              size: getSizeVariantState((_c = rest.md) == null ? void 0 : _c.size).iconSize,
-              ...icon.md
-            },
-            lg: {
-              size: getSizeVariantState((_d = rest.lg) == null ? void 0 : _d.size).iconSize,
-              ...icon.lg
-            }
-          }
-        ),
-        children,
-        isLoading && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-loading": true,
-            css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
-            children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
-          }
-        )
-      ]
+      minHeight: inputSize,
+      minWidth: inputSize
     }
-  );
-});
+  ];
+};
 export {
   IconButton
 };

package/dist/lib/icon-button/types.d.ts

@@ -1,15 +1,15 @@
 import { JSX } from 'react';
 import { IconProps } from '../icon';
-import { ButtonVariant, ColorVariant, PropsWithCSS, ResponsiveDesign, SizeVariant, ShallowMerge } from '../../types';
-export type IconButtonResponsiveProps = PropsWithCSS<{
+import { ButtonVariant, ColorVariant, SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+export type IconButtonResponsiveProps = {
     size?: SizeVariant;
-}>;
-type IconButtonExtendedProps = ResponsiveDesign<IconButtonResponsiveProps> & {
+};
+type IconButtonExtendedProps = PropsWithSx<ToResponsiveProps<IconButtonResponsiveProps> & {
     color?: ColorVariant;
     variant?: ButtonVariant;
     icon?: IconProps;
     isLoading?: boolean;
-};
-export type IconButtonProps = ShallowMerge<JSX.IntrinsicElements["button"], IconButtonExtendedProps>;
+}>;
+export type IconButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], IconButtonExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/icon-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC;IACnD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG,gBAAgB,CAAC,yBAAyB,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,uBAAuB,CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,uBAAuB,GAAG,WAAW,CACxC,iBAAiB,CAAC,yBAAyB,CAAC,GAAG;IAC7C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/image/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAarC,eAAO,MAAM,aAAa,aAAc,UAAU,eAEjD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/image/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,eAAO,MAAM,aAAa,aAAc,UAAU,eAEjD,CAAC"}

package/dist/lib/image/helpers.js

@@ -1,10 +1,8 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
   loading: "lazy",
-  xs: {
-    css: {
-      objectFit: "cover"
-    }
+  sx: {
+    objectFit: "cover"
   }
 };
 const getImageProps = (extended) => {

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/lib/image/image.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKrC,eAAO,MAAM,KAAK,sHA6BhB,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/lib/image/image.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKrC,eAAO,MAAM,KAAK,sHAwBhB,CAAC"}

package/dist/lib/image/image.js

@@ -3,10 +3,9 @@ import { forwardRef, useMemo } from "react";
 import { isString } from "lodash-es";
 import { getImageProps } from "./helpers.js";
 import IMAGE_PLACEHOLDER from "../../assets/svg/image-placeholder.svg.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 const Image = forwardRef((_props, ref) => {
-  const { xs, sm, md, lg, fallback = true, src, ...rest } = getImageProps(_props);
+  const { sx, fallback = true, src, ...rest } = getImageProps(_props);
   const fallbackSrc = useMemo(() => {
     if (isString(fallback)) return fallback;
     return fallback ? IMAGE_PLACEHOLDER : void 0;
@@ -15,12 +14,7 @@ const Image = forwardRef((_props, ref) => {
     {
       maxHeight: "100%"
     },
-    xs == null ? void 0 : xs.css,
-    {
-      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [mediaQuery("md")]: md == null ? void 0 : md.css,
-      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
+    createSxInterpolation(sx)
   ];
   const onError = (e) => {
     var _a;

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
-import { ResponsiveDesign, PropsWithCSS, ShallowMerge } from '../../types';
+import { PropsWithSx, ShallowMerge } from '../../types';
 type ImageExtendedProps = {
     fallback?: string | boolean;
-} & ResponsiveDesign<PropsWithCSS>;
-export type ImageProps = ShallowMerge<JSX.IntrinsicElements["img"], ImageExtendedProps>;
+};
+export type ImageProps = ShallowMerge<JSX.IntrinsicElements['img'], PropsWithSx<ImageExtendedProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map