@janbox/storefront-ui 1.0.27 → 2.0.0

package/dist/constants/index.d.ts

@@ -18,7 +18,4 @@ export declare enum Booleanish {
     True = "true",
     False = "false"
 }
-export declare enum LocaleNamespaces {
-    Translation = "ui__translation"
-}
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,eAAO,MAAM,+BAA+B,mBAAmB,CAAC;AAEhE,oBAAY,qBAAqB;IAC/B,YAAY,gBAAgB;IAC5B,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,cAAc,mBAAmB;CAClC;AAED,oBAAY,WAAW;IACrB,aAAa,kBAAkB;CAChC;AAED,eAAO,MAAM,YAAY,oHAA0G,CAAC;AAIpI,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,KAAK,SAAgC,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,gBAAgB;IAC1B,WAAW,oBAAoB;CAChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,eAAO,MAAM,+BAA+B,mBAAmB,CAAC;AAEhE,oBAAY,qBAAqB;IAC/B,YAAY,gBAAgB;IAC5B,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,cAAc,mBAAmB;CAClC;AAED,oBAAY,WAAW;IACrB,aAAa,kBAAkB;CAChC;AAED,eAAO,MAAM,YAAY,oHAA0G,CAAC;AAIpI,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,KAAK,SAAgC,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}

package/dist/constants/index.js

@@ -20,17 +20,12 @@ var Booleanish = /* @__PURE__ */ ((Booleanish2) => {
   Booleanish2["False"] = "false";
   return Booleanish2;
 })(Booleanish || {});
-var LocaleNamespaces = /* @__PURE__ */ ((LocaleNamespaces2) => {
-  LocaleNamespaces2["Translation"] = "ui__translation";
-  return LocaleNamespaces2;
-})(LocaleNamespaces || {});
 export {
   Booleanish,
   FALLBACK_SVG,
   HTMLClasses,
   HTMLDatasetAttributes,
   default2 as IMAGE_PLACEHOLDER,
-  LocaleNamespaces,
   TYPING_DEBOUNCE,
   USER_COMPONENT_LOCALE_NAMESPACE,
   isSSR

package/dist/index.js

@@ -107,9 +107,9 @@ import { getAccordionContentProps } from "./lib/accordion/accordion-content/help
 import { getAccordionSummaryProps } from "./lib/accordion/accordion-summary/helpers.js";
 import { getBadgeProps } from "./lib/badge/helpers.js";
 import { getBoxProps } from "./lib/box/helpers.js";
-import { getButtonProps } from "./lib/button/helpers.js";
+import { getButtonCssBySize, getButtonProps } from "./lib/button/helpers.js";
 import { getCellProps } from "./lib/grid/cell/helpers.js";
-import { getChipProps } from "./lib/chip/helpers.js";
+import { getChipProps, getChipSizeState } from "./lib/chip/helpers.js";
 import { getContainerProps } from "./lib/container/helpers.js";
 import { getDatePickerProps } from "./lib/date-picker/helpers.js";
 import { getDialogProps, getDialogSizeInNumber, useDialogContext } from "./lib/dialog/dialog/helpers.js";
@@ -254,9 +254,11 @@ export {
   getAccordionSummaryProps,
   getBadgeProps,
   getBoxProps,
+  getButtonCssBySize,
   getButtonProps,
   getCellProps,
   getChipProps,
+  getChipSizeState,
   getContainerProps,
   getDatePickerProps,
   getDialogProps,

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion/accordion.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA2B,cAAc,EAAE,MAAM,SAAS,CAAC;AAUlE,eAAO,MAAM,SAAS,WAAY,cAAc,qDA4H/C,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion/accordion.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA2B,cAAc,EAAE,MAAM,SAAS,CAAC;AAUlE,eAAO,MAAM,SAAS,WAAY,cAAc,qDAmG/C,CAAC"}

package/dist/lib/accordion/accordion/accordion.js

@@ -6,15 +6,11 @@ import { getAccordionProps, getAccordionDataAttributes, AccordionContext } from
 import { AccordionDataAttributes } from "./types.js";
 import { Booleanish } from "../../../constants/index.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { getAccordionGroupDataAttributes } from "../accordion-group/helpers.js";
 const Accordion = (_props) => {
   const {
-    xs,
-    sm,
-    md,
-    lg,
+    sx,
     children,
     open: controlledOpen,
     defaultOpen = false,
@@ -35,28 +31,12 @@ const Accordion = (_props) => {
     },
     [setOpen, onOpenChangeCallback]
   );
-  const css = [
-    {
-      width: "100%",
-      display: "flex",
-      flexDirection: "column"
-    },
-    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
-    }
-  ];
   const toggle = useCallback(() => {
     const rootElement = rootRef.current;
     if (!rootElement) return;
     const { openState: currentOpen } = getAccordionDataAttributes(rootElement);
     const nextOpen = !currentOpen;
-    rootElement.setAttribute(
-      AccordionDataAttributes.OpenState,
-      nextOpen.toString()
-    );
+    rootElement.setAttribute(AccordionDataAttributes.OpenState, nextOpen.toString());
   }, []);
   const contextValue = useMemo(
     () => ({
@@ -73,17 +53,12 @@ const Accordion = (_props) => {
       const nextOpen = target.getAttribute(AccordionDataAttributes.OpenState) === Booleanish.True;
       onOpenChange(nextOpen);
       if (nextOpen && target.parentElement) {
-        const { openMode } = getAccordionGroupDataAttributes(
-          target.parentElement
-        );
+        const { openMode } = getAccordionGroupDataAttributes(target.parentElement);
         switch (openMode) {
           case "single":
             for (const child of target.parentElement.children) {
               if (child !== target && getAccordionDataAttributes(child).openState) {
-                child.setAttribute(
-                  AccordionDataAttributes.OpenState,
-                  Booleanish.False
-                );
+                child.setAttribute(AccordionDataAttributes.OpenState, Booleanish.False);
               }
             }
             break;
@@ -103,7 +78,12 @@ const Accordion = (_props) => {
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
-      css,
+      css: createSxInterpolation({
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        ...sx
+      }),
       ...{
         [AccordionDataAttributes.OpenState]: open
       },

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

@@ -1,12 +1,12 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { PropsWithSx, ShallowMerge } from '../../../types';
 export declare enum AccordionDataAttributes {
     OpenState = "data-open"
 }
-export interface AccordionExtendedProps extends ResponsiveDesign<PropsWithCSS> {
+export interface AccordionExtendedProps {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export type AccordionProps = ShallowMerge<JSX.IntrinsicElements["div"], AccordionExtendedProps>;
+export type AccordionProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<AccordionExtendedProps>>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9E,oBAAY,uBAAuB;IACjC,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,cAAc,GAAG,YAAY,CACvC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,sBAAsB,CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,oBAAY,uBAAuB;IACjC,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC,CAAC"}

package/dist/lib/accordion/accordion-content/accordion-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-content/accordion-content.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAOhD,eAAO,MAAM,gBAAgB,iCAAkC,qBAAqB,qDAoCnF,CAAC"}
+{"version":3,"file":"accordion-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-content/accordion-content.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAOhD,eAAO,MAAM,gBAAgB,iCAAkC,qBAAqB,qDA+BnF,CAAC"}

package/dist/lib/accordion/accordion-content/accordion-content.js

@@ -3,24 +3,18 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();
-  const { xs, sm, md, lg, containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
+  const { sx, containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
   const { open } = useAccordionContext();
   const defaultOpenRef = useRef(open);
   const css = [
     {
       width: "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 initial = defaultOpenRef.current ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 };
   return /* @__PURE__ */ jsx(

package/dist/lib/accordion/accordion-content/types.d.ts

@@ -1,10 +1,10 @@
 import { JSX } from 'react';
 import { HTMLMotionProps } from 'motion/react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-interface AccordionContentExtendedProps extends ResponsiveDesign<PropsWithCSS> {
+import { PropsWithSx, ShallowMerge } from '../../../types';
+interface AccordionContentExtendedProps {
     children?: React.ReactNode;
     containerProps?: HTMLMotionProps<'div'>;
 }
-export type AccordionContentProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionContentExtendedProps>;
+export type AccordionContentProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<AccordionContentExtendedProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-content/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,UAAU,6BAA8B,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,6BAA6B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-content/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,UAAU,6BAA6B;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAC9C,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,WAAW,CAAC,6BAA6B,CAAC,CAC3C,CAAC"}

package/dist/lib/accordion/accordion-group/accordion-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-group.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-group/accordion-group.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA4D,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAIxG,eAAO,MAAM,cAAc,6HAmDzB,CAAC"}
+{"version":3,"file":"accordion-group.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-group/accordion-group.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA4D,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAIxG,eAAO,MAAM,cAAc,6HA2CzB,CAAC"}

package/dist/lib/accordion/accordion-group/accordion-group.js

@@ -3,15 +3,11 @@ import { forwardRef, useRef, useMemo } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { getAccordionGroupProps, AccordionGroupContext } from "./helpers.js";
 import { AccordionGroupDataAttributes } from "./types.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const AccordionGroup = forwardRef((_props, ref) => {
   const {
     children,
-    xs,
-    sm,
-    md,
-    lg,
+    sx,
     openMode = "multiple",
     accordionSummaryProps,
     accordionContentProps,
@@ -24,12 +20,7 @@ const AccordionGroup = forwardRef((_props, ref) => {
       display: "flex",
       flexDirection: "column"
     },
-    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 contextValue = useMemo(
     () => ({

package/dist/lib/accordion/accordion-group/types.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { AccordionContentProps } from '../accordion-content';
 import { AccordionSummaryProps } from '../accordion-summary';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { PropsWithSx } from '../../../types';
 export type AccordionGroupOpenMode = 'single' | 'multiple';
 export type AccordionGroupContextValue = Partial<{
     accordionSummaryProps?: Partial<AccordionSummaryProps>;
@@ -10,8 +10,8 @@ export type AccordionGroupContextValue = Partial<{
 export declare enum AccordionGroupDataAttributes {
     OpenMode = "data-open-mode"
 }
-export interface AccordionGroupExtendedProps extends ResponsiveDesign<PropsWithCSS>, AccordionGroupContextValue {
+export interface AccordionGroupExtendedProps extends AccordionGroupContextValue {
     openMode?: AccordionGroupOpenMode;
 }
-export type AccordionGroupProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionGroupExtendedProps>;
+export type AccordionGroupProps = PropsWithSx<JSX.IntrinsicElements['div'] & AccordionGroupExtendedProps>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/accordion-group/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC;IAC/C,qBAAqB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACvD,qBAAqB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,oBAAY,4BAA4B;IACtC,QAAQ,mBAAmB;CAC5B;AAED,MAAM,WAAW,2BAA4B,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EAAE,0BAA0B;IAC7G,QAAQ,CAAC,EAAE,sBAAsB,CAAC;CACnC;AAED,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,2BAA2B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC;IAC/C,qBAAqB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACvD,qBAAqB,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,oBAAY,4BAA4B;IACtC,QAAQ,mBAAmB;CAC5B;AAED,MAAM,WAAW,2BAA4B,SAAQ,0BAA0B;IAC7E,QAAQ,CAAC,EAAE,sBAAsB,CAAC;CACnC;AAED,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,2BAA2B,CAAC,CAAC"}

package/dist/lib/accordion/accordion-summary/accordion-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-summary.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-summary/accordion-summary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmC,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA6BjF,eAAO,MAAM,gBAAgB,iCAAkC,qBAAqB,qDAwCnF,CAAC"}
+{"version":3,"file":"accordion-summary.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-summary/accordion-summary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmC,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA6BjF,eAAO,MAAM,gBAAgB,iCAAkC,qBAAqB,qDAmCnF,CAAC"}

package/dist/lib/accordion/accordion-summary/accordion-summary.js

@@ -2,11 +2,10 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { getAccordionSummaryProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
 import { Booleanish } from "../../../constants/index.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
 import { Icon } from "../../icon/icon.js";
-const ExpandIcon = ({ source, position, xs, sm, md, lg }) => {
+const ExpandIcon = ({ source, position, size, sm, md, lg }) => {
   const { open } = useAccordionContext();
   const sourceString = open ? source.expanded : source.collapsed;
   return /* @__PURE__ */ jsx(
@@ -15,7 +14,7 @@ const ExpandIcon = ({ source, position, xs, sm, md, lg }) => {
       css: {
         flexShrink: 0
       },
-      xs,
+      size,
       sm,
       md,
       lg,
@@ -26,7 +25,7 @@ const ExpandIcon = ({ source, position, xs, sm, md, lg }) => {
 };
 const AccordionSummary = ({ children, ref, ..._props }) => {
   const { accordionSummaryProps: accordionSummaryPropsByGroup = {} } = useAccordionGroupContext();
-  const { xs, sm, md, lg, expandIcon, ...rest } = getAccordionSummaryProps(accordionSummaryPropsByGroup, _props);
+  const { sx, expandIcon, ...rest } = getAccordionSummaryProps(accordionSummaryPropsByGroup, _props);
   const { toggle } = useAccordionContext();
   const onClick = (e) => {
     var _a, _b;
@@ -46,12 +45,7 @@ const AccordionSummary = ({ children, ref, ..._props }) => {
       display: "flex",
       cursor: "pointer"
     },
-    xs == null ? void 0 : xs.css,
-    {
-      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [mediaQuery("md")]: md == null ? void 0 : md.css,
-      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsxs("div", { css, "aria-hidden": true, ...rest, onClick, ref, children: [
     !!expandIcon && expandIcon.position === "left" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon }),

package/dist/lib/accordion/accordion-summary/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-summary/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAahD,eAAO,MAAM,wBAAwB,gBAAiB,OAAO,CAAC,qBAAqB,CAAC,EAAE,0BAErF,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-summary/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWhD,eAAO,MAAM,wBAAwB,gBAAiB,OAAO,CAAC,qBAAqB,CAAC,EAAE,0BAErF,CAAC"}

package/dist/lib/accordion/accordion-summary/helpers.js

@@ -1,10 +1,8 @@
 import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-  xs: {
-    css: {
-      alignItems: "center",
-      columnGap: 8
-    }
+  sx: {
+    alignItems: "center",
+    columnGap: 8
   }
 };
 const getAccordionSummaryProps = (...extended) => {

package/dist/lib/accordion/accordion-summary/types.d.ts

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
 import { IconResponsiveProps } from '../../icon';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
 export declare enum AccordionSummaryVariant {
     EndArrow = "end-arrow",
     EndPlusMinus = "end-plus-minus"
 }
-export interface AccordionSummaryIconProps extends ResponsiveDesign<PropsWithCSS> {
+export type AccordionSummaryIconProps = PropsWithSx<{
     states: {
         collapse: {
             source: string;
@@ -14,15 +14,15 @@ export interface AccordionSummaryIconProps extends ResponsiveDesign<PropsWithCSS
             source: string;
         };
     };
-}
+}>;
 type AccordionState = 'collapsed' | 'expanded';
-export interface AccordionSummaryExpandIconProps extends ResponsiveDesign<IconResponsiveProps> {
+export interface AccordionSummaryExpandIconProps extends ToResponsiveProps<IconResponsiveProps> {
     source: Record<AccordionState, string>;
     position: 'left' | 'right';
 }
-export interface AccordionSummaryExtendedProps extends ResponsiveDesign<PropsWithCSS> {
+type AccordionSummaryExtendedProps = PropsWithSx<{
     expandIcon?: AccordionSummaryExpandIconProps;
-}
+}>;
 export type AccordionSummaryProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionSummaryExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/accordion-summary/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-summary/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,oBAAY,uBAAuB;IACjC,QAAQ,cAAc;IACtB,YAAY,mBAAmB;CAChC;AAED,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IAC/E,MAAM,EAAE;QACN,QAAQ,EAAE;YACR,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,MAAM,EAAE;YACN,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;CACH;AAED,KAAK,cAAc,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/C,MAAM,WAAW,+BAAgC,SAAQ,gBAAgB,CAAC,mBAAmB,CAAC;IAC5F,MAAM,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,6BAA8B,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACnF,UAAU,CAAC,EAAE,+BAA+B,CAAC;CAC9C;AAED,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,6BAA6B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/accordion-summary/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,oBAAY,uBAAuB;IACjC,QAAQ,cAAc;IACtB,YAAY,mBAAmB;CAChC;AAED,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,MAAM,EAAE;QACN,QAAQ,EAAE;YACR,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,MAAM,EAAE;YACN,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;CACH,CAAC,CAAC;AAEH,KAAK,cAAc,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/C,MAAM,WAAW,+BAAgC,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC;IAC7F,MAAM,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,KAAK,6BAA6B,GAAG,WAAW,CAAC;IAC/C,UAAU,CAAC,EAAE,+BAA+B,CAAC;CAC9C,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,6BAA6B,CAAC,CAAC"}

package/dist/lib/box/box.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/lib/box/box.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMnC,eAAO,MAAM,GAAG,4CAA6C,QAAQ,qDAyBpE,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/lib/box/box.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,qDA0BzD,CAAC"}

package/dist/lib/box/box.js

@@ -3,15 +3,16 @@ import { getBoxProps } from "./helpers.js";
 import { containerStyle } from "../../constants/emotion.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
-const Box = ({ children, container, ref, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = getBoxProps(_props);
+const Box = ({ children, ref, ..._props }) => {
+  const { sx = {}, container, ...rest } = getBoxProps(_props);
+  const { sm: sxSm, md: sxMd, lg: sxLg, ...sxXs } = sx;
   const css = [
     container && containerStyle,
-    createStyle(xs),
+    createStyle(sxXs),
     {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
+      [mediaQuery("sm")]: createStyle(sxSm),
+      [mediaQuery("md")]: createStyle(sxMd),
+      [mediaQuery("lg")]: createStyle(sxLg)
     }
   ];
   return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx(
@@ -25,7 +26,7 @@ const Box = ({ children, container, ref, ..._props }) => {
     }
   ) });
 };
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
+const createStyle = ({ width, height, ...css } = {}) => {
   return [
     {
       width,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,KAAK,gBAAgB,GAAG,gBAAgB,CAAC,YAAY,CAAC,GAAG;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAUtC,eAAO,MAAM,MAAM,iCAAkC,WAAW,qDAsO/D,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/lib/button/button.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAW7D,eAAO,MAAM,MAAM,iCAAkC,WAAW,qDAqN/D,CAAC"}