@janbox/storefront-ui 2.0.1 → 2.0.3

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/tabs/tab-indicator/tab-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-indicator.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/tab-indicator.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,wDAqFxB,CAAC"}
+{"version":3,"file":"tab-indicator.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/tab-indicator.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY,wDA8FxB,CAAC"}

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -53,7 +53,7 @@ const TabIndicator = () => {
       resizeObserver.disconnect();
     };
   }, [activeTabElement]);
-  const css = [
+  [
     {
       position: "absolute",
       bottom: 0,
@@ -75,7 +75,16 @@ const TabIndicator = () => {
         transform: `translateX(${indicatorRect.left}px)`
       },
       ref: indicatorEl,
-      css
+      css: [
+        {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          backgroundColor: "currentcolor",
+          borderRadius: 8
+        },
+        createSxInterpolation(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx)
+      ]
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA0BpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,iBAAiB,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,sBAAsB,EAAE,SAAS,CAAC,wBAAwB,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,2CAAwC,CAAC;AAEjE,eAAO,MAAM,cAAc,wBAE1B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAwBpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,iBAAiB,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,sBAAsB,EAAE,SAAS,CAAC,wBAAwB,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,2CAAwC,CAAC;AAEjE,eAAO,MAAM,cAAc,wBAE1B,CAAC"}

package/dist/lib/tabs/tabs/helpers.js

@@ -15,10 +15,8 @@ const defaultProps = {
   },
   tabIndicatorProps: {
     sx: {
-      xs: {
-        height: 2,
-        backgroundColor: getColorVar("primary.600")
-      }
+      height: 2,
+      backgroundColor: getColorVar("primary.600")
     }
   }
 };

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/unordered-list/unordered-list/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAY7C,eAAO,MAAM,qBAAqB,aAAc,kBAAkB,uBAEjE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAU7C,eAAO,MAAM,qBAAqB,aAAc,kBAAkB,uBAEjE,CAAC"}

package/dist/lib/unordered-list/unordered-list/helpers.js

@@ -1,9 +1,7 @@
 import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
   sx: {
-    xs: {
-      alignItems: "flex-start"
-    }
+    alignItems: "flex-start"
   }
 };
 const getUnorderedListProps = (extended) => {

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.3",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [