@janbox/storefront-ui 2.0.1 → 2.0.2

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"}

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

@@ -9,6 +9,7 @@ import { getColorShadesByVariant } from "../../utils/index.js";
 import { getColorVar } from "../../theme/palette.js";
 import { Select } from "../select/select.js";
 import { Flag } from "../flag/flag.js";
+import { Primitive } from "../primitive/primitive.js";
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
 import { Input } from "../input/input.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
@@ -107,104 +108,116 @@ const PhoneInput = ({
     const originalValue = internalValue.nationalNumber ?? "";
     return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, "$1 $2 $3");
   })();
-  return /* @__PURE__ */ jsxs("div", { ...containerProps, css: [{ display: "flex", flexDirection: "column", width: "100%" }, containerProps == null ? void 0 : containerProps.css], children: [
-    /* @__PURE__ */ jsx(
-      ForwardRefInputMask,
-      {
-        ...props,
-        css: [
-          error && !selectOpen && {
-            "&::after": { borderColor: getColorVar("red.600") }
-          },
-          inputFocused && {
-            "&::after": { borderColor: getColorVar("primary.600") },
-            boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
-          },
-          disabled && {
-            backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
-            pointerEvents: "none"
-          },
-          props.css
-        ],
-        ref: mergedRefs,
-        children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              containerProps: {
-                sx: {
-                  width: "fit-content",
-                  minWidth: 80
-                }
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ...containerProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ForwardRefInputMask,
+          {
+            ...props,
+            css: [
+              error && !selectOpen && {
+                "&::after": { borderColor: getColorVar("red.600") }
               },
-              css: {
-                paddingRight: 0
+              inputFocused && {
+                "&::after": { borderColor: getColorVar("primary.600") },
+                boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
               },
-              outline: {
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0
+              disabled && {
+                backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
+                pointerEvents: "none"
               },
-              listProps: {
-                style: {
-                  width: wrapperWidth
+              props.css
+            ],
+            ref: mergedRefs,
+            children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  containerProps: {
+                    sx: {
+                      width: "fit-content",
+                      minWidth: 80
+                    }
+                  },
+                  css: {
+                    paddingRight: 0
+                  },
+                  outline: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                  },
+                  listProps: {
+                    style: {
+                      width: wrapperWidth
+                    }
+                  },
+                  value: internalValue.countryCode ?? null,
+                  onChange: onDialCodeChange,
+                  options: countries,
+                  disabled,
+                  selectedRenderer: SelectedRenderer,
+                  optionLabel: CountryRowLabel,
+                  optionValue: "code",
+                  optionSearchLabel: ["name", "dial_code", "code"],
+                  open: selectOpen,
+                  onOpenChange: setSelectOpen
                 }
-              },
-              value: internalValue.countryCode ?? null,
-              onChange: onDialCodeChange,
-              options: countries,
-              disabled,
-              selectedRenderer: SelectedRenderer,
-              optionLabel: CountryRowLabel,
-              optionValue: "code",
-              optionSearchLabel: ["name", "dial_code", "code"],
-              open: selectOpen,
-              onOpenChange: setSelectOpen
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              css: {
-                borderRight: "1px solid",
-                borderColor: getColorVar("border.default"),
-                height: "66.666667%",
-                marginLeft: 8,
-                marginRight: 8
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: inputDisplayValue,
-              disabled,
-              containerProps: {
-                sx: {
-                  flex: 1
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  css: {
+                    borderRight: "1px solid",
+                    borderColor: getColorVar("border.default"),
+                    height: "66.666667%",
+                    marginLeft: 8,
+                    marginRight: 8
+                  }
                 }
-              },
-              mainProps: {
-                style: {
-                  paddingLeft: 0,
-                  boxShadow: "none"
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: inputDisplayValue,
+                  disabled,
+                  containerProps: {
+                    sx: {
+                      flex: 1
+                    }
+                  },
+                  mainProps: {
+                    style: {
+                      paddingLeft: 0,
+                      boxShadow: "none"
+                    }
+                  },
+                  onChange: onNationalNumberChange,
+                  sx: {
+                    borderWidth: 0
+                  },
+                  onFocus: () => setInputFocused(true),
+                  onBlur: () => setInputFocused(false),
+                  ref: inputRef
                 }
-              },
-              onChange: onNationalNumberChange,
-              sx: {
-                borderWidth: 0
-              },
-              onFocus: () => setInputFocused(true),
-              onBlur: () => setInputFocused(false),
-              ref: inputRef
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 };
 export {
   PhoneInput

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

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { Interpolation } from '@emotion/react';
 import { SizeVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export type PhoneInputResponsiveProps = {
     size?: Exclude<SizeVariant, 'xs'>;
 };
@@ -16,9 +17,7 @@ export type PhoneInputProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     onChange?: (value: PhoneInputValue) => void;
     error?: boolean;
     helperText?: string;
-    containerProps?: JSX.IntrinsicElements['div'] & {
-        css?: Interpolation;
-    };
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
     disabled?: boolean;
 } & ToResponsiveProps<PhoneInputResponsiveProps>>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,CACjD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,CACjD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../src/lib/radio-button/radio-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAK3C,eAAO,MAAM,WAAW,4HAuBtB,CAAC"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../src/lib/radio-button/radio-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAM3C,eAAO,MAAM,WAAW,4HAsBtB,CAAC"}

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

@@ -4,20 +4,20 @@ import { getRadioButtonProps } from "./helpers.js";
 import classes from "./radio-button.module.scss.js";
 import { cn } from "../../utils/stylesheet.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
+import { Primitive } from "../primitive/primitive.js";
 const RadioButton = forwardRef((_props, ref) => {
   const { children, color = "primary", className, containerProps, ...props } = getRadioButtonProps(_props);
   const { main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsxs(
-    "label",
+    Primitive,
     {
       ...containerProps,
-      css: [
-        {
-          "--radio-button-color": main
-        },
-        containerProps == null ? void 0 : containerProps.css
-      ],
       className: cn(classes.radio_button__container, containerProps == null ? void 0 : containerProps.className),
+      sx: {
+        "--radio-button-color": main,
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
+      as: "label",
       children: [
         /* @__PURE__ */ jsxs("span", { className: classes.radio_button__main, children: [
           /* @__PURE__ */ jsx("input", { ...props, className: cn(classes.radio_button__input, className), type: "radio", ref }),

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

@@ -1,11 +1,9 @@
 import { JSX } from 'react';
-import { Interpolation } from '@emotion/react';
 import { ColorVariant, ShallowMerge } from '../../types';
+import { PrimitiveProps } from '../primitive';
 interface RadioButtonExtendedProps {
     color?: ColorVariant;
-    containerProps?: JSX.IntrinsicElements['label'] & {
-        css?: Interpolation;
-    };
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['label']>;
 }
 export type RadioButtonProps = ShallowMerge<JSX.IntrinsicElements['input'], RadioButtonExtendedProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/radio-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErD,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG;QAChD,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;CACH;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/radio-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC;CACjE;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,wBAAwB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAkHzD,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAUjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAuHzD,CAAC"}

package/dist/lib/textarea/textarea.js

@@ -5,18 +5,20 @@ import { isString } from "lodash-es";
 import { getTextareaProps } from "./helpers.js";
 import classes from "./textarea.module.scss.js";
 import { getSizeVariantState } from "../../utils/index.js";
-import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
-import { mediaQuery } from "../../theme/screens.js";
+import { cn } from "../../utils/stylesheet.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { Primitive } from "../primitive/primitive.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const Textarea = ({ ref, ..._props }) => {
+  var _a, _b, _c;
   const {
     size,
     sm,
     md,
     lg,
     containerProps,
+    mainProps,
     className,
     helperText,
     error,
@@ -24,7 +26,6 @@ const Textarea = ({ ref, ..._props }) => {
     debounce = 0,
     mode = "onChange",
     value,
-    sx,
     ...rest
   } = getTextareaProps(_props);
   const textareaRef = useRef(null);
@@ -58,45 +59,49 @@ const Textarea = ({ ref, ..._props }) => {
     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 css = [
-    {
-      paddingTop: 8,
-      paddingBottom: 8
-    },
-    createStyle({ size }),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    },
-    createSxInterpolation(sx)
-  ];
-  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...restContainerProps,
-      css: createSxInterpolation(containerSx),
-      className: cn(classes.textarea__container, restContainerProps.className),
-      children: [
-        /* @__PURE__ */ jsx("div", { css, className: classes.textarea__main, children: /* @__PURE__ */ jsx(
-          "textarea",
+  return /* @__PURE__ */ jsxs(Primitive, { ...containerProps, className: cn(classes.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
+    /* @__PURE__ */ jsx(
+      Primitive,
+      {
+        ...mainProps,
+        sx: {
+          display: "flex",
+          paddingTop: 4,
+          paddingBottom: 4,
+          ...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
+          }
+        },
+        className: cn(classes.textarea__main, mainProps == null ? void 0 : mainProps.className),
+        children: /* @__PURE__ */ jsx(
+          Primitive,
           {
             "aria-invalid": error,
             className: cn(
@@ -108,24 +113,23 @@ const Textarea = ({ ref, ..._props }) => {
             ref: mergedRefs,
             onChange,
             onBlur,
-            onFocus
+            onFocus,
+            as: "textarea"
           }
-        ) }),
-        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-      ]
-    }
-  );
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
 };
 const createStyle = ({ size } = {}) => {
   const { inputPaddingX, textVariant } = getSizeVariantState(size);
-  return [
-    {
-      paddingLeft: inputPaddingX,
-      paddingRight: inputPaddingX,
-      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
-      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
-    }
-  ];
+  return {
+    paddingLeft: inputPaddingX,
+    paddingRight: inputPaddingX,
+    fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+    lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+  };
 };
 export {
   Textarea

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

@@ -1,11 +1,12 @@
 import { JSX } from 'react';
 import { SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export interface TextareaResponsiveProps {
     size?: SizeVariant;
 }
 type TextareaExtendedProps = PropsWithSx<ToResponsiveProps<TextareaResponsiveProps> & {
     containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
-    mainProps?: JSX.IntrinsicElements['div'];
+    mainProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
     helperText?: string;
     error?: boolean;
     value?: string;
@@ -13,6 +14,6 @@ type TextareaExtendedProps = PropsWithSx<ToResponsiveProps<TextareaResponsivePro
     mode?: 'onChange' | 'onBlur';
     debounce?: number;
 }>;
-export type TextareaProps = ShallowMerge<JSX.IntrinsicElements['textarea'], TextareaExtendedProps>;
+export type TextareaProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['textarea']>, TextareaExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,qBAAqB,GAAG,WAAW,CACtC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAC3C,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,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,qBAAqB,GAAG,WAAW,CACtC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,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,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

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

@@ -1,10 +1,4 @@
-import { ComponentType, JSX } from 'react';
+import { PropsWithSx } from '../../types';
 import { ReactPlayerProps } from 'react-player/types';
-import { PropsWithSx, ShallowMerge } from '../../types';
-type VideoExtendedProps = PropsWithSx<{
-    containerProps?: JSX.IntrinsicElements['div'];
-    PlayerComponent?: ComponentType<ReactPlayerProps>;
-}>;
-export type VideoProps = ShallowMerge<ReactPlayerProps, VideoExtendedProps>;
-export {};
+export type VideoProps = PropsWithSx<ReactPlayerProps>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/video/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,KAAK,kBAAkB,GAAG,WAAW,CAAC;IAEpC,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACnD,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/video/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/lib/video/video.d.ts

@@ -1,3 +1,3 @@
 import { VideoProps } from './types';
-export declare const Video: ({ ref, containerProps, PlayerComponent, ..._props }: VideoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Video: ({ ref, ..._props }: VideoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=video.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/lib/video/video.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,wDAAyD,UAAU,qDAUpF,CAAC"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/lib/video/video.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,KAAK,uBAAwB,UAAU,qDAInD,CAAC"}

package/dist/lib/video/video.js

@@ -1,12 +1,10 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { createElement } from "react";
 import ReactPlayer from "react-player";
 import { getVideoProps } from "./helpers.js";
 import { createSxInterpolation } from "../../utils/stylesheet.js";
-const Video = ({ ref, containerProps, PlayerComponent, ..._props }) => {
+const Video = ({ ref, ..._props }) => {
   const { sx, ...rest } = getVideoProps(_props);
-  const css = [createSxInterpolation(sx)];
-  return /* @__PURE__ */ jsx("div", { css, ...containerProps, children: PlayerComponent ? createElement(PlayerComponent, rest) : /* @__PURE__ */ jsx(ReactPlayer, { width: "", height: "", ref, ...rest }) });
+  return /* @__PURE__ */ jsx(ReactPlayer, { css: createSxInterpolation(sx), width: "", height: "", ref, ...rest });
 };
 export {
   Video

package/package.json

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