@janbox/storefront-ui 1.0.16 → 1.0.17

package/dist/lib/loading/block-skeleton/block-skeleton.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
-export type BlockSkeletonProps = JSX.IntrinsicElements['div'];
+import { PrimitiveProps } from '../../primitive';
+export type BlockSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
 export declare const BlockSkeleton: (props: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=block-skeleton.d.ts.map

package/dist/lib/loading/block-skeleton/block-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAEtD,CAAC"}
+{"version":3,"file":"block-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/block-skeleton/block-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5B,OAAO,EAAa,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC;AAE9F,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAItD,CAAC"}

package/dist/lib/loading/block-skeleton/block-skeleton.js

@@ -2,8 +2,9 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
+import { Primitive } from "../../primitive/primitive.js";
 const BlockSkeleton = (props) => {
-  return /* @__PURE__ */ jsx("div", { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar("neutral.200") }], ...props });
+  return /* @__PURE__ */ jsx(Primitive, { css: [animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar("neutral.200") }], ...props });
 };
 export {
   BlockSkeleton

package/dist/lib/loading/image-skeleton/image-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA4BtD,CAAC"}
+{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/image-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM7C,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDA4BtD,CAAC"}

package/dist/lib/loading/image-skeleton/image-skeleton.js

@@ -2,9 +2,10 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
+import { Primitive } from "../../primitive/primitive.js";
 const ImageSkeleton = (props) => {
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
       css: [
         animatePulseStyle,

package/dist/lib/loading/image-skeleton/types.d.ts

@@ -1,3 +1,4 @@
+import { PrimitiveProps } from '../../primitive';
 import { JSX } from 'react';
-export type ImageSkeletonProps = JSX.IntrinsicElements['div'];
+export type ImageSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/image-skeleton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/image-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC"}

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;AAO9C,eAAO,MAAM,cAAc,qEAQxB,mBAAmB,qDAkCrB,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,qDAkCrB,CAAC"}

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

@@ -3,6 +3,7 @@ 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 { Primitive } from "../../primitive/primitive.js";
 const LoadingOverlay = ({
   isLoading = false,
   iconProps,
@@ -14,7 +15,7 @@ const LoadingOverlay = ({
 }) => {
   const { main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
       style: {
         minWidth: size,

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

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { ColorVariant, ShallowMerge } from '../../../types';
-export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], {
+import { PrimitiveProps } from '../../primitive';
+export type LoadingOverlayProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>, {
     isLoading?: boolean;
     size?: number;
     color?: ColorVariant;

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,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,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,CACF,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,YAAY,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,EAC5D;IACE,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,CACF,CAAC"}

package/dist/lib/loading/text-skeleton/text-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAcpD,CAAC"}
+{"version":3,"file":"text-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/text-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAM5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAkBpD,CAAC"}

package/dist/lib/loading/text-skeleton/text-skeleton.js

@@ -2,20 +2,29 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
+import { Primitive } from "../../primitive/primitive.js";
 const TextSkeleton = (props) => {
-  return /* @__PURE__ */ jsxs("span", { css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" }, ...props, children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        css: [
-          animatePulseStyle,
-          { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
-        ],
-        children: " "
-      }
-    ),
-    " "
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      as: "span",
+      css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            css: [
+              animatePulseStyle,
+              { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
+            ],
+            children: " "
+          }
+        ),
+        " "
+      ]
+    }
+  );
 };
 export {
   TextSkeleton

package/dist/lib/loading/text-skeleton/types.d.ts

@@ -1,3 +1,4 @@
+import { PrimitiveProps } from '../../primitive';
 import { JSX } from 'react';
-export type TextSkeletonProps = JSX.IntrinsicElements['p'];
+export type TextSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['span'], HTMLSpanElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/text-skeleton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/loading/text-skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { PhoneInputProps } from './types';
-export declare const PhoneInput: import('react').ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const PhoneInput: ({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ref, ...props }: PhoneInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=phone-input.d.ts.map

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,yHAqJtB,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;AAsD3D,eAAO,MAAM,UAAU,kGAUpB,eAAe,qDAwJjB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
 import { phone } from "phone";
@@ -46,157 +46,170 @@ const parsePhoneInputValue = (value) => {
     countryCode: countryIso2 ?? ((_b = countries.find((country) => country.dial_code === value.dialCode)) == null ? void 0 : _b.code)
   };
 };
-const PhoneInput = forwardRef(
-  ({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ...props }, ref) => {
-    var _a;
-    const [selectOpen, setSelectOpen] = useState(false);
-    const [inputFocused, setInputFocused] = useState(false);
-    const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, wrapperRef]);
-    const [wrapperWidth, setWrapperWidth] = useState(0);
-    useEffect(() => {
-      const resizeObserver = new ResizeObserver((entries) => {
-        var _a2;
-        const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
-        if (domRect) {
-          setWrapperWidth(domRect.width);
-        }
-      });
-      if (wrapperRef.current) {
-        resizeObserver.observe(wrapperRef.current);
+const PhoneInput = ({
+  error,
+  defaultValue,
+  value,
+  onChange,
+  containerProps,
+  helperText,
+  disabled,
+  ref,
+  ...props
+}) => {
+  var _a;
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
+  const inputRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const mergedRefs = useMergeRefs([ref, wrapperRef]);
+  const [wrapperWidth, setWrapperWidth] = useState(0);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      var _a2;
+      const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
+      if (domRect) {
+        setWrapperWidth(domRect.width);
       }
-      return () => resizeObserver.disconnect();
-    }, []);
-    const [internalValue, setInternalValue] = useControllableState({
-      defaultValue: parsePhoneInputValue(defaultValue) ?? {
-        countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
-      },
-      value: parsePhoneInputValue(value)
     });
-    const triggerChange = (next) => {
-      setInternalValue(next);
-      onChange == null ? void 0 : onChange(next);
-    };
-    const onDialCodeChange = (_, option) => {
-      var _a2;
-      triggerChange({
-        ...internalValue,
-        dialCode: option.dial_code,
-        countryCode: option.code
-      });
-      (_a2 = inputRef.current) == null ? void 0 : _a2.select();
-    };
-    const onNationalNumberChange = (e) => {
-      e.target.value = e.target.value.replace(/[^0-9]/g, "");
-      triggerChange({
-        ...internalValue,
-        nationalNumber: e.target.value
-      });
-    };
-    const inputDisplayValue = (() => {
-      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: {
-                  css: { width: "fit-content", minWidth: 80 }
-                },
-                css: {
-                  paddingRight: 0
-                },
+    if (wrapperRef.current) {
+      resizeObserver.observe(wrapperRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+  const [internalValue, setInternalValue] = useControllableState({
+    defaultValue: parsePhoneInputValue(defaultValue) ?? {
+      countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
+    },
+    value: parsePhoneInputValue(value)
+  });
+  const triggerChange = (next) => {
+    setInternalValue(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const onDialCodeChange = (_, option) => {
+    var _a2;
+    triggerChange({
+      ...internalValue,
+      dialCode: option.dial_code,
+      countryCode: option.code
+    });
+    (_a2 = inputRef.current) == null ? void 0 : _a2.select();
+  };
+  const onNationalNumberChange = (e) => {
+    e.target.value = e.target.value.replace(/[^0-9]/g, "");
+    triggerChange({
+      ...internalValue,
+      nationalNumber: e.target.value
+    });
+  };
+  const inputDisplayValue = (() => {
+    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: {
                 xs: {
-                  outline: {
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    left: 0
-                  }
-                },
-                listProps: {
-                  style: {
-                    width: wrapperWidth
+                  css: {
+                    width: "fit-content",
+                    minWidth: 80
                   }
-                },
-                value: internalValue.countryCode ?? null,
-                onChange: onDialCodeChange,
-                options: countries,
-                disabled,
-                selectedRenderer: SelectedRenderer,
-                optionLabel: CountryRowLabel,
-                optionValue: "code",
-                optionSearchLabel: ["name", "dial_code", "code"],
-                open: selectOpen,
-                onOpenChange: setSelectOpen
+                }
+              },
+              css: {
+                paddingRight: 0
+              },
+              xs: {
+                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
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                borderRight: "1px solid",
+                borderColor: getColorVar("border.default"),
+                height: "66.666667%",
+                marginLeft: 8,
+                marginRight: 8
               }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: inputDisplayValue,
+              disabled,
+              containerProps: {
+                css: { flex: 1 }
+              },
+              mainProps: {
+                style: {
+                  paddingLeft: 0,
+                  boxShadow: "none"
+                }
+              },
+              onChange: onNationalNumberChange,
+              xs: {
                 css: {
-                  borderRight: "1px solid",
-                  borderColor: getColorVar("border.default"),
-                  height: "66.666667%",
-                  marginLeft: 8,
-                  marginRight: 8
+                  borderWidth: 0
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: inputDisplayValue,
-                disabled,
-                containerProps: {
-                  css: { flex: 1 }
-                },
-                mainProps: {
-                  style: {
-                    paddingLeft: 0,
-                    boxShadow: "none"
-                  }
-                },
-                onChange: onNationalNumberChange,
-                xs: {
-                  css: {
-                    borderWidth: 0
-                  }
-                },
-                onFocus: () => setInputFocused(true),
-                onBlur: () => setInputFocused(false),
-                ref: inputRef
-              }
-            )
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-    ] });
-  }
-);
+              },
+              onFocus: () => setInputFocused(true),
+              onBlur: () => setInputFocused(false),
+              ref: inputRef
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
 export {
   PhoneInput
 };

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/lib/select/select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkBzD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,iBAAiB,sBAAsB,CAAC,SAAS,MAAM,8BAGrF,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,qDAwUnB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/lib/select/select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkBzD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,iBAAiB,sBAAsB,CAAC,SAAS,MAAM,8BAGrF,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,qDAyUnB,CAAC"}

package/dist/lib/select/select.js

@@ -17,6 +17,7 @@ import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.j
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
 import { Input } from "../input/input.js";
+import { Primitive } from "../primitive/primitive.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const DEFAULT_DISPLAY_ROW_COUNT = 5;
 const Select = ({
@@ -201,15 +202,16 @@ const Select = ({
     return () => clearTimeout(timer);
   }, [isOpen, setInputValue]);
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
       ...containerProps,
-      css: {
-        display: "flex",
-        flexDirection: "column",
-        ...fullWidth ? { width: "100%" } : {},
-        ...containerProps == null ? void 0 : containerProps.css
-      },
+      css: [
+        {
+          display: "flex",
+          flexDirection: "column"
+        },
+        fullWidth && { width: "100%" }
+      ],
       children: [
         /* @__PURE__ */ jsxs(
           Floating,

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

@@ -4,6 +4,7 @@ import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
 import { ResponsiveDesign, ShallowMerge } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export type SelectResponsiveProps = InputMaskResponsiveProps;
 export type SelectOptionValue = string | number | boolean;
 interface SelectExtendedProps<V extends SelectOptionValue, O extends object> extends ResponsiveDesign<SelectResponsiveProps> {
@@ -24,9 +25,7 @@ interface SelectExtendedProps<V extends SelectOptionValue, O extends object> ext
     selectedRenderer?: (option: O) => React.ReactNode;
     error?: boolean;
     helperText?: string;
-    containerProps?: JSX.IntrinsicElements['div'] & {
-        css?: Interpolation;
-    };
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
     inputProps?: InputProps;
     fullWidth?: boolean;
     lazy?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,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,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,UAAU,mBAAmB,CAC3B,CAAC,SAAS,iBAAiB,EAC3B,CAAC,SAAS,MAAM,CAChB,SAAQ,gBAAgB,CAAC,qBAAqB,CAAC;IAC/C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,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,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,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,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAChH,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,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,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,UAAU,mBAAmB,CAC3B,CAAC,SAAS,iBAAiB,EAC3B,CAAC,SAAS,MAAM,CAChB,SAAQ,gBAAgB,CAAC,qBAAqB,CAAC;IAC/C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,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,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,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,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC;IAC9E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAChH,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1B,CAAC"}

package/package.json

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