@janbox/storefront-ui 2.0.1 → 2.0.3

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

@@ -1 +1 @@
-{"version":3,"file":"floating-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/floating-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAO/C,eAAO,MAAM,eAAe,8HAuC3B,CAAC"}
+{"version":3,"file":"floating-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/floating-content/floating-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAQ/C,eAAO,MAAM,eAAe,8HAwC3B,CAAC"}

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

@@ -5,8 +5,9 @@ import { AnimatePresence, motion } from "motion/react";
 import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 const FloatingContent = forwardRef(
-  ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, ...props }, ref) => {
+  ({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, sx, ...props }, ref) => {
     const { getFloatingProps, context } = useFloatingContext();
     const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
     const isHydrated = useIsHydrated();
@@ -29,6 +30,7 @@ const FloatingContent = forwardRef(
               ...style,
               zIndex: FLOATING_Z_INDEX
             },
+            css: createSxInterpolation(sx),
             ...getFloatingProps(props),
             ref: mergedRefs,
             children: props.children

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

@@ -1,8 +1,8 @@
 import { ComponentProps, HTMLProps } from 'react';
 import { Interpolation } from '@emotion/react';
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal } from '@floating-ui/react';
-import { ShallowMerge } from '../../../types';
-export type FloatingContentProps = ShallowMerge<HTMLProps<HTMLDivElement>, {
+import { PropsWithSx, ShallowMerge } from '../../../types';
+export type FloatingContentProps = PropsWithSx<HTMLProps<HTMLDivElement> & {
     floatingPortalProps?: Partial<ComponentProps<typeof FloatingPortal>>;
     floatingOverlayProps?: Partial<ShallowMerge<ComponentProps<typeof FloatingOverlay>, {
         disabled: boolean;

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,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"}
+{"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,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,SAAS,CAAC,cAAc,CAAC,GAAG;IAC1B,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/form-helper-text/form-helper-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-helper-text.d.ts","sourceRoot":"","sources":["../../../src/lib/form-helper-text/form-helper-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,cAAc,kCAAmC,mBAAmB,qDAiBhF,CAAC"}
+{"version":3,"file":"form-helper-text.d.ts","sourceRoot":"","sources":["../../../src/lib/form-helper-text/form-helper-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,cAAc,kCAAmC,mBAAmB,qDAmBhF,CAAC"}

package/dist/lib/form-helper-text/form-helper-text.js

@@ -2,20 +2,23 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { Primitive } from "../primitive/primitive.js";
 const FormHelperText = ({ error, children, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "p",
+    Primitive,
     {
-      css: {
+      as: "p",
+      ...props,
+      sx: {
         paddingLeft: 16,
         paddingRight: 16,
         paddingTop: 4,
         fontSize: getTypographyVar("xs").fontSize,
         lineHeight: getTypographyVar("xs").lineHeight,
         "&:empty": { display: "none" },
-        ...error && { color: getColorVar("red.600") }
+        ...error && { color: getColorVar("red.600") },
+        ...props.sx
       },
-      ...props,
       children
     }
   );

package/dist/lib/form-helper-text/types.d.ts

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { ShallowMerge } from '../../types';
-export type FormHelperTextProps = ShallowMerge<JSX.IntrinsicElements['p'], {
+import { PrimitiveProps } from '../primitive';
+export type FormHelperTextProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['p']>, {
     error?: boolean;
 }>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/form-helper-text/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/form-helper-text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAC1B;IACE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/form-helper-text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAC1C;IACE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/lib/input/input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAwB,MAAM,SAAS,CAAC;AAa3D,eAAO,MAAM,KAAK,sHA4LhB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/lib/input/input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAwB,MAAM,SAAS,CAAC;AAa3D,eAAO,MAAM,KAAK,sHA8LhB,CAAC"}

package/dist/lib/input/input.js

@@ -4,16 +4,17 @@ import { useMergeRefs } from "@floating-ui/react";
 import { isString } from "lodash-es";
 import { getInputProps } from "./helpers.js";
 import classes from "./input.module.scss.js";
-import { cn, createSxInterpolation } from "../../utils/stylesheet.js";
+import { cn } from "../../utils/stylesheet.js";
 import EyeHidden from "../../assets/svg/eye-hidden.svg.js";
 import EyeVisible from "../../assets/svg/eye-show-visible.svg.js";
 import { getSizeVariantState } from "../../utils/index.js";
-import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 const Input = forwardRef((_props, ref) => {
+  var _a, _b, _c;
   const {
     type,
     size,
@@ -22,7 +23,6 @@ const Input = forwardRef((_props, ref) => {
     lg,
     prefix,
     suffix,
-    sx,
     containerProps,
     mainProps,
     className,
@@ -71,146 +71,143 @@ const Input = forwardRef((_props, ref) => {
     onChangeProp == null ? void 0 : onChangeProp(e);
   };
   const onFocus = (e) => {
-    var _a;
+    var _a2;
     beforeChangeValue.current = e.target.value;
-    (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+    (_a2 = rest.onFocus) == null ? void 0 : _a2.call(rest, e);
   };
   const onBlur = (e) => {
-    var _a;
+    var _a2;
     if (beforeChangeValue.current !== e.target.value) {
       if (mode === "onBlur" || debounce > 0) {
         onChange(e, true);
       }
     }
-    (_a = rest.onBlur) == null ? void 0 : _a.call(rest, e);
+    (_a2 = rest.onBlur) == null ? void 0 : _a2.call(rest, e);
     setTimeout(() => {
       setTypingValue(void 0);
     }, debounce);
   };
-  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   const toggleShowPassword = (e) => {
     e.stopPropagation();
     setShowPassword((prev) => !prev);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...restContainerProps,
-      css: createSxInterpolation(containerSx),
-      className: cn(classes.input__container, restContainerProps.className),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+  return /* @__PURE__ */ jsxs(Primitive, { className: cn(classes.input__container, containerProps == null ? void 0 : containerProps.className), children: [
+    /* @__PURE__ */ jsxs(
+      Primitive,
+      {
+        ...mainProps,
+        className: cn(
+          classes.input__main,
           {
-            css: createSxInterpolation(sx),
-            ...mainProps,
-            className: cn(
-              classes.input__main,
-              {
-                [classes.input__main_error]: error
-              },
-              mainProps == null ? void 0 : mainProps.className
-            ),
-            children: [
-              prefix,
-              !!startIcon && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  size: getSizeVariantState(size).iconSize,
-                  ...startIcon,
-                  sm: {
-                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                    ...startIcon.sm
-                  },
-                  md: {
-                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                    ...startIcon.md
-                  },
-                  lg: {
-                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                    ...startIcon.lg
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  "data-error": error,
-                  type: type === "password" && showPassword ? "text" : type,
-                  className: cn(classes.input__control, className),
-                  ...rest,
-                  value: typingValue ?? value,
-                  ref: mergedRefs,
-                  onChange,
-                  css: [
-                    createStyle({ size }),
-                    {
-                      [mediaQuery("sm")]: createStyle(sm),
-                      [mediaQuery("md")]: createStyle(md),
-                      [mediaQuery("lg")]: createStyle(lg)
-                    }
-                  ],
-                  onBlur,
-                  onFocus
-                }
-              ),
-              !!endIcon && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  size: getSizeVariantState(size).iconSize,
-                  ...endIcon,
-                  sm: {
-                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                    ...endIcon.sm
-                  },
-                  md: {
-                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                    ...endIcon.md
-                  },
-                  lg: {
-                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                    ...endIcon.lg
-                  }
-                }
-              ),
-              suffix,
-              type === "password" && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  onClick: toggleShowPassword,
-                  sx: { cursor: "pointer" },
-                  size: getSizeVariantState(size).iconSize,
-                  sm: {
-                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
-                  },
-                  md: {
-                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
-                  },
-                  lg: {
-                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
-                  },
-                  source: showPassword ? EyeVisible : EyeHidden
-                }
-              )
-            ]
-          }
+            [classes.input__main_error]: error
+          },
+          mainProps == null ? void 0 : mainProps.className
         ),
-        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-      ]
-    }
-  );
+        sx: {
+          ...createStyle({ size }),
+          ...mainProps == null ? void 0 : mainProps.sx,
+          sm: {
+            ...createStyle(sm),
+            ...(_a = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _a.sm
+          },
+          md: {
+            ...createStyle(md),
+            ...(_b = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _b.md
+          },
+          lg: {
+            ...createStyle(lg),
+            ...(_c = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _c.lg
+          }
+        },
+        children: [
+          prefix,
+          !!startIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              size: getSizeVariantState(size).iconSize,
+              ...startIcon,
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                ...startIcon.sm
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                ...startIcon.md
+              },
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                ...startIcon.lg
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Primitive,
+            {
+              "data-error": error,
+              type: type === "password" && showPassword ? "text" : type,
+              className: cn(classes.input__control, className),
+              ...rest,
+              value: typingValue ?? value,
+              ref: mergedRefs,
+              onChange,
+              onBlur,
+              onFocus,
+              as: "input"
+            }
+          ),
+          !!endIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              size: getSizeVariantState(size).iconSize,
+              ...endIcon,
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                ...endIcon.sm
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                ...endIcon.md
+              },
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                ...endIcon.lg
+              }
+            }
+          ),
+          suffix,
+          type === "password" && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              onClick: toggleShowPassword,
+              sx: { cursor: "pointer" },
+              size: getSizeVariantState(size).iconSize,
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+              },
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+              },
+              source: showPassword ? EyeVisible : EyeHidden
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
 });
 const createStyle = ({ size } = {}) => {
   const { inputPaddingX, inputSize, textVariant } = getSizeVariantState(size);
-  return [
-    {
-      paddingLeft: inputPaddingX,
-      paddingRight: inputPaddingX,
-      height: inputSize,
-      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
-      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
-    }
-  ];
+  return {
+    paddingLeft: inputPaddingX,
+    paddingRight: inputPaddingX,
+    height: inputSize,
+    fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+    lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+  };
 };
 export {
   Input

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes, JSX } from 'react';
 import { IconProps } from '../icon';
 import { PropsWithSx, SizeVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export interface InputResponsiveProps {
     size?: SizeVariant;
 }
@@ -8,8 +9,8 @@ export type InputWrapperProps = HTMLAttributes<HTMLDivElement>;
 interface InputExtendedProps extends PropsWithSx<ToResponsiveProps<InputResponsiveProps>> {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
-    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
-    mainProps?: JSX.IntrinsicElements['div'];
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
+    mainProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
     helperText?: string;
     error?: boolean;
     value?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,UAAU,kBAAmB,SAAQ,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACvF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,UAAU,kBAAmB,SAAQ,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACvF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,kBAAkB,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, sx, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loading-overlay.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/loading-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,cAAc,yEASxB,mBAAmB,qDAqCrB,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,qEAQxB,mBAAmB,qDAsCrB,CAAC"}

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

@@ -3,12 +3,11 @@ 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 { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const LoadingOverlay = ({
   isLoading = false,
   iconProps,
   color = "primary",
-  sx,
   style,
   size = 32,
   children,
@@ -16,7 +15,7 @@ const LoadingOverlay = ({
 }) => {
   const { main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
       style: {
         minWidth: size,
@@ -24,17 +23,17 @@ const LoadingOverlay = ({
         ...style
       },
       ...props,
-      css: [
-        { position: "relative" },
-        createSxInterpolation(sx)
-      ],
+      sx: {
+        position: "relative",
+        ...props.sx
+      },
       children: [
         children,
         isLoading && /* @__PURE__ */ jsx(
-          "div",
+          Primitive,
           {
             ...iconProps,
-            css: {
+            sx: {
               position: "absolute",
               top: 0,
               right: 0,
@@ -43,7 +42,8 @@ const LoadingOverlay = ({
               zIndex: 10,
               display: "grid",
               placeItems: "center",
-              cursor: "progress"
+              cursor: "progress",
+              ...iconProps == null ? void 0 : iconProps.sx
             },
             children: /* @__PURE__ */ jsx(SvgLoader, { source: LoadingIcon, width: size, height: size, css: animateSpinStyle, style: { color: main } })
           }

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

@@ -1,9 +1,10 @@
 import { JSX } from 'react';
 import { ColorVariant, PropsWithSx, ShallowMerge } from '../../../types';
-export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<{
+import { PrimitiveProps } from '../../primitive';
+export type LoadingOverlayProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['div']>, PropsWithSx<{
     isLoading?: boolean;
     size?: number;
     color?: ColorVariant;
-    iconProps?: JSX.IntrinsicElements['div'];
+    iconProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
 }>>;
 //# 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,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,WAAW,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;CAC1C,CAAC,CACH,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/loading-overlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAC5C,WAAW,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;CAC1D,CAAC,CACH,CAAC"}

package/dist/lib/menu/menu-list/menu-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-list/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAMxC,eAAO,MAAM,QAAQ,2BAA4B,aAAa,qDAoB7D,CAAC"}
+{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-list/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAMxC,eAAO,MAAM,QAAQ,2BAA4B,aAAa,qDAqB7D,CAAC"}

package/dist/lib/menu/menu-list/menu-list.js

@@ -7,7 +7,8 @@ const MenuList = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(
     FloatingContent,
     {
-      css: {
+      ...props,
+      sx: {
         backgroundColor: getColorVar("surface.default"),
         padding: "0.25rem",
         borderRadius: "0.75rem",
@@ -16,9 +17,9 @@ const MenuList = ({ children, ...props }) => {
         borderColor: getColorVar("neutral.100"),
         boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        ...props.sx
       },
-      ...props,
       ...{ [HTMLDatasetAttributes.DATA_MENU_LIST]: true },
       children
     }

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

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

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

@@ -13,6 +13,7 @@ import { getTypographyVar } from "../../theme/typography.js";
 import { Checkbox } from "../checkbox/checkbox.js";
 import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
 import { ensureArray, matchSearch } from "../../utils/common.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";
@@ -207,10 +208,15 @@ const MultipleSelect = ({ ref, ...props }) => {
     return () => clearTimeout(timer);
   }, [isOpen, setInputValue]);
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
       ...containerProps,
-      css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css },
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
       children: [
         /* @__PURE__ */ jsxs(
           Floating,

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

@@ -1,9 +1,9 @@
 import { HTMLProps, JSX, PropsWithoutRef } from 'react';
-import { Interpolation } from '@emotion/react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
 import { ShallowMerge, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export type MultipleSelectResponsiveProps = InputMaskResponsiveProps;
 export type MultipleSelectOptionValue = string | number;
 interface MultipleSelectExtendedProps<O extends object> extends ToResponsiveProps<MultipleSelectResponsiveProps> {
@@ -24,9 +24,7 @@ interface MultipleSelectExtendedProps<O extends object> extends ToResponsiveProp
     selectedRenderer?: (options: O[]) => React.ReactNode;
     error?: boolean;
     helperText?: string;
-    containerProps?: JSX.IntrinsicElements['div'] & {
-        css?: Interpolation;
-    };
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
     inputProps?: InputProps;
     displayCount?: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,6BAA6B,GAAG,wBAAwB,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,iBAAiB,CAAC,6BAA6B,CAAC;IAE9G,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CACvE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,2BAA2B,CAAC,CAAC,CAAC,CAC/B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,6BAA6B,GAAG,wBAAwB,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,iBAAiB,CAAC,6BAA6B,CAAC;IAE9G,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CACvE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,2BAA2B,CAAC,CAAC,CAAC,CAC/B,CAAC"}

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

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