@janbox/storefront-ui 2.0.3 → 2.0.5

package/dist/hooks/index.d.ts

@@ -7,4 +7,5 @@ export * from './use-query-params';
 export * from './use-first-mount-state';
 export * from './use-update-effect';
 export * from './use-deep-compare-effect';
+export * from './use-formatter';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC"}

package/dist/hooks/index.js

@@ -7,11 +7,13 @@ import { useQueryParams } from "./use-query-params.js";
 import { useFirstMountState } from "./use-first-mount-state/index.js";
 import { useUpdateEffect } from "./use-update-effect/index.js";
 import { useDeepCompareEffect } from "./use-deep-compare-effect/index.js";
+import { useFormatter } from "./use-formatter/index.js";
 export {
   useControllableState,
   useCountdownTimer,
   useDeepCompareEffect,
   useFirstMountState,
+  useFormatter,
   useHoverLineEffect,
   useQueryParams,
   useRippleEffect,

package/dist/hooks/use-formatter/index.d.ts

@@ -0,0 +1,8 @@
+import { FormatPriceOptions, FormatDateTimeOptions, FormatNumberOptions } from '../../utils';
+import { SetOptional } from 'type-fest';
+export declare const useFormatter: () => {
+    formatNumber: (value: number, options?: Partial<FormatNumberOptions>) => string;
+    formatDateTime: (value: Date | string | number, options: SetOptional<FormatDateTimeOptions, "lng">) => string;
+    formatPrice: (value: number, options: SetOptional<FormatPriceOptions, "lng">) => string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-formatter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-formatter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,kBAAkB,EAElB,qBAAqB,EAErB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAIjB,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,eAAO,MAAM,YAAY;0BAIb,MAAM,YAAY,OAAO,CAAC,mBAAmB,CAAC;4BAO9C,IAAI,GAAG,MAAM,GAAG,MAAM,WAAW,WAAW,CAAC,qBAAqB,EAAE,KAAK,CAAC;yBAU1E,MAAM,WAAW,WAAW,CAAC,kBAAkB,EAAE,KAAK,CAAC;CAclE,CAAC"}

package/dist/hooks/use-formatter/index.js

@@ -0,0 +1,38 @@
+import { formatNumber, formatDateTime, formatPrice } from "../../utils/index.js";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const useFormatter = () => {
+  const { i18n } = useTranslation();
+  const formatNumberFn = useCallback(
+    (value, options) => {
+      return formatNumber(value, { lng: i18n.language, ...options });
+    },
+    [i18n.language]
+  );
+  const formatDateTimeFn = useCallback(
+    (value, options) => {
+      return formatDateTime(value, {
+        ...options,
+        lng: options.lng ?? i18n.language
+      });
+    },
+    [i18n.language]
+  );
+  const formatPriceFn = useCallback(
+    (value, options) => {
+      return formatPrice(value, { ...options, lng: options.lng ?? i18n.language });
+    },
+    [i18n.language]
+  );
+  return useMemo(
+    () => ({
+      formatNumber: formatNumberFn,
+      formatDateTime: formatDateTimeFn,
+      formatPrice: formatPriceFn
+    }),
+    [formatNumberFn, formatDateTimeFn, formatPriceFn]
+  );
+};
+export {
+  useFormatter
+};

package/dist/index.js

@@ -72,6 +72,7 @@ import { Popover } from "./lib/popover/popover/popover.js";
 import { PopoverClose } from "./lib/popover/popover-close/popover-close.js";
 import { PopoverContent } from "./lib/popover/popover-content/popover-content.js";
 import { PopoverTrigger } from "./lib/popover/popover-trigger/popover-trigger.js";
+import { PriceLabel } from "./lib/price-label/price-label.js";
 import { Primitive } from "./lib/primitive/primitive.js";
 import { Progress } from "./lib/progress/progress.js";
 import { RadioButton } from "./lib/radio-button/radio-button.js";
@@ -126,6 +127,7 @@ import { getListItemProps } from "./lib/unordered-list/list-item/helpers.js";
 import { getMarqueeProps } from "./lib/marquee/marquee/helpers.js";
 import { getMultipleSelectProps } from "./lib/multiple-select/helpers.js";
 import { getPageRange, getPaginationProps } from "./lib/pagination/helpers.js";
+import { getPriceLabelProps } from "./lib/price-label/helpers.js";
 import { getRadioButtonProps } from "./lib/radio-button/helpers.js";
 import { getSwiperProps } from "./lib/swiper/swiper/helpers.js";
 import { getTabListProps } from "./lib/tabs/tab-list/helpers.js";
@@ -215,6 +217,7 @@ export {
   PopoverClose,
   PopoverContent,
   PopoverTrigger,
+  PriceLabel,
   Primitive,
   Progress,
   RadioButton,
@@ -277,6 +280,7 @@ export {
   getMultipleSelectProps,
   getPageRange,
   getPaginationProps,
+  getPriceLabelProps,
   getRadioButtonProps,
   getSwiperProps,
   getTabListProps,

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

@@ -6,8 +6,8 @@ import { getAccordionProps, getAccordionDataAttributes, AccordionContext } from
 import { AccordionDataAttributes } from "./types.js";
 import { Booleanish } from "../../../constants/index.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { getAccordionGroupDataAttributes } from "../accordion-group/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Accordion = (_props) => {
   const {
     sx,
@@ -76,18 +76,18 @@ const Accordion = (_props) => {
     };
   }, [onOpenChange]);
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: createSxInterpolation({
+      ...{
+        [AccordionDataAttributes.OpenState]: open
+      },
+      ...rest,
+      sx: {
         width: "100%",
         display: "flex",
         flexDirection: "column",
         ...sx
-      }),
-      ...{
-        [AccordionDataAttributes.OpenState]: open
       },
-      ...rest,
       ref: mergedRefs,
       children
     }

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

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

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

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

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

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

package/dist/lib/button/button.js

@@ -140,69 +140,80 @@ const Button = ({ children, ref, ..._props }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs("button", { css, disabled, onClick, className: cn(rest.className, className), ref: mergedRef, children: [
-    prefix,
-    !!startIcon && /* @__PURE__ */ jsx(
-      Icon,
-      {
-        size: getSizeVariantState(size).iconSize,
-        ...startIcon,
-        css: {
-          flexShrink: 0
-        },
-        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(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
-    !!endIcon && /* @__PURE__ */ jsx(
-      Icon,
-      {
-        size: getSizeVariantState(size).iconSize,
-        ...endIcon,
-        css: {
-          flexShrink: 0
-        },
-        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,
-    isLoading && /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-loading": true,
-        css: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      css,
+      disabled,
+      ...rest,
+      onClick,
+      className: cn(rest.className, className),
+      ref: mergedRef,
+      children: [
+        prefix,
+        !!startIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: getSizeVariantState(size).iconSize,
+            ...startIcon,
+            css: {
+              flexShrink: 0
+            },
+            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(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
+        !!endIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: getSizeVariantState(size).iconSize,
+            ...endIcon,
+            css: {
+              flexShrink: 0
+            },
+            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,
+        isLoading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-loading": true,
+            css: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+          }
+        )
+      ]
+    }
+  );
 };
 const createStyle = ({ size } = {}) => {
   return [getButtonCssBySize(size)];

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASxC,eAAO,MAAM,QAAQ,iFAQlB,aAAa,qDAkCf,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASxC,eAAO,MAAM,QAAQ,iFAQlB,aAAa,qDAmCf,CAAC"}

package/dist/lib/checkbox/checkbox.js

@@ -32,9 +32,10 @@ const Checkbox = ({
       as: "label",
       ...containerProps,
       className: cn(classes.checkbox__container, containerProps == null ? void 0 : containerProps.className),
-      css: {
+      sx: {
         "--checkbox-color": main,
-        "--checkbox-contrast-text": contrastText
+        "--checkbox-contrast-text": contrastText,
+        ...containerProps == null ? void 0 : containerProps.sx
       },
       children: [
         /* @__PURE__ */ jsxs("span", { className: classes.checkbox__main, children: [

package/dist/lib/count-up/count-up.js

@@ -3,9 +3,8 @@ import { forwardRef, useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { useMotionValue, useInView, useTransform, animate, motion } from "motion/react";
 import { useTranslation } from "react-i18next";
-import "lodash-es";
-import "../../theme/palette.js";
-import { getDecimalDigits, formatNumber } from "../../utils/common.js";
+import { formatNumber } from "../../utils/index.js";
+import { getDecimalDigits } from "../../utils/common.js";
 const CountUp = forwardRef(
   ({ from = 0, to, duration = 2, formatNumberOptions, ...props }, ref) => {
     const rootRef = useRef(null);

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

@@ -101,7 +101,7 @@ const IconButton = forwardRef((_props, ref) => {
     var _a;
     (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsxs("button", { css, className: cn(rest.className, className), onClick, ref: mergedRef, children: [
+  return /* @__PURE__ */ jsxs("button", { css, ...rest, className: cn(rest.className, className), onClick, ref: mergedRef, children: [
     !!icon && /* @__PURE__ */ jsx(
       Icon,
       {

package/dist/lib/index.d.ts

@@ -57,4 +57,5 @@ export * from './video';
 export * from './lightbox';
 export * from './cascader';
 export * from './primitive';
+export * from './price-label';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

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

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge } from '../../../types';
-export type BlockSkeletonProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx>;
-export declare const BlockSkeleton: ({ sx, ...props }: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { PrimitiveProps } from '../../primitive';
+export type BlockSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div']>;
+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;AAI5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpD,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AAEzF,eAAO,MAAM,aAAa,qBAAsB,kBAAkB,qDAWjE,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,CAAC,CAAC;AAE9E,eAAO,MAAM,aAAa,UAAW,kBAAkB,qDAYtD,CAAC"}

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

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

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

@@ -1,3 +1,3 @@
 import { ImageSkeletonProps } from './types';
-export declare const ImageSkeleton: ({ sx, ...props }: ImageSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ImageSkeleton: (props: ImageSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=image-skeleton.d.ts.map

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;AAM7C,eAAO,MAAM,aAAa,qBAAsB,kBAAkB,qDA6BjE,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,qDA2BtD,CAAC"}

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

@@ -2,25 +2,23 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const ImageSkeleton = ({ sx, ...props }) => {
+import { Primitive } from "../../primitive/primitive.js";
+const ImageSkeleton = (props) => {
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css: [
-        animatePulseStyle,
-        {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "100%",
-          height: "100%",
-          borderRadius: "0.25rem",
-          backgroundColor: getColorVar("neutral.200")
-        },
-        createSxInterpolation(sx)
-      ],
       ...props,
+      sx: {
+        ...animatePulseStyle,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%",
+        borderRadius: "0.25rem",
+        backgroundColor: getColorVar("neutral.200"),
+        ...props.sx
+      },
       children: /* @__PURE__ */ jsx(
         "svg",
         {

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

@@ -1,4 +1,4 @@
-import { PropsWithSx, ShallowMerge } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 import { JSX } from 'react';
-export type ImageSkeletonProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx>;
+export type ImageSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div']>;
 //# 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,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,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,CAAC,CAAC"}

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

@@ -1,3 +1,3 @@
 import { TextSkeletonProps } from './types';
-export declare const TextSkeleton: ({ sx, ...props }: TextSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TextSkeleton: (props: TextSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=text-skeleton.d.ts.map

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;AAM5C,eAAO,MAAM,YAAY,qBAAsB,iBAAiB,qDAoB/D,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,qDAiCpD,CAAC"}

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

@@ -1,30 +1,42 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "@emotion/react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const TextSkeleton = ({ sx, ...props }) => {
-  return /* @__PURE__ */ jsxs(
-    "span",
+import { Primitive } from "../../primitive/primitive.js";
+const TextSkeleton = (props) => {
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      css: [
-        { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" },
-        createSxInterpolation(sx)
-      ],
+      as: "span",
       ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            css: [
-              animatePulseStyle,
-              { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: getColorVar("neutral.200") }
-            ],
-            children: " "
-          }
-        ),
-        " "
-      ]
+      sx: {
+        width: "100%",
+        overflow: "hidden",
+        display: "inline-flex",
+        alignItems: "center",
+        visibility: "hidden",
+        "::before": {
+          content: '"\\200B"'
+        },
+        ...props.sx
+      },
+      children: /* @__PURE__ */ jsx(
+        Primitive,
+        {
+          sx: {
+            ...animatePulseStyle,
+            flex: "1 1 0%",
+            borderRadius: "0.125rem",
+            lineHeight: 1,
+            backgroundColor: getColorVar("neutral.200"),
+            visibility: "visible",
+            "::before": {
+              content: '"\\200B"'
+            }
+          },
+          as: "span"
+        }
+      )
     }
   );
 };

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

@@ -1,4 +1,4 @@
-import { PropsWithSx, ShallowMerge } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 import { JSX } from 'react';
-export type TextSkeletonProps = ShallowMerge<JSX.IntrinsicElements['span'], PropsWithSx>;
+export type TextSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['span']>;
 //# 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,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,WAAW,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,CAAC,CAAC"}

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;AA0BzE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,8BAA8B,mBAAmB,CAAC,CAAC,CAAC,qDAuYlG,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,qDAqYlG,CAAC"}

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

@@ -112,7 +112,7 @@ const MultipleSelect = ({ ref, ...props }) => {
     setControllableValues(preset);
     onChange == null ? void 0 : onChange(preset);
   };
-  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name) ?? rest.size;
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
   const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
   const displayOptions = useMemo(() => {
     if (!inputValue) {

package/dist/lib/price-label/helpers.d.ts

@@ -0,0 +1,3 @@
+import { PriceLabelProps } from './types';
+export declare const getPriceLabelProps: (extended: PriceLabelProps) => PriceLabelProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/price-label/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAO3D,CAAC"}

package/dist/lib/price-label/helpers.js

@@ -0,0 +1,12 @@
+import { mergeComponentProps } from "../../utils/index.js";
+const getPriceLabelProps = (extended) => {
+  return mergeComponentProps(
+    {
+      size: "sm"
+    },
+    extended
+  );
+};
+export {
+  getPriceLabelProps
+};

package/dist/lib/price-label/index.d.ts

@@ -0,0 +1,4 @@
+export * from './price-label';
+export * from './types';
+export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/price-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/price-label/price-label.d.ts

@@ -0,0 +1,3 @@
+import { PriceLabelProps } from './types';
+export declare const PriceLabel: (_props: PriceLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=price-label.d.ts.map

package/dist/lib/price-label/price-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-label.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/price-label.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8C,eAAe,EAAE,MAAM,SAAS,CAAC;AAQtF,eAAO,MAAM,UAAU,WAAY,eAAe,qDAwEjD,CAAC"}

package/dist/lib/price-label/price-label.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { getPriceLabelProps } from "./helpers.js";
+import { isNil, isNumber } from "lodash-es";
+import { useTranslation } from "react-i18next";
+import { LocaleNamespaces } from "../../constants/index.js";
+import { useFormatter } from "../../hooks/use-formatter/index.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getSmallerTypographyVariants, getTypographyVar } from "../../theme/typography.js";
+import { Primitive } from "../primitive/primitive.js";
+import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
+const PriceLabel = (_props) => {
+  const {
+    price,
+    exchangePrice,
+    size,
+    orientation = "vertical",
+    color = "neutral",
+    sm,
+    md,
+    lg,
+    ...rest
+  } = getPriceLabelProps(_props);
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      as: "span",
+      sx: {
+        display: "inline-block",
+        textAlign: orientation === "vertical" ? "right" : "left",
+        ...rest.sx
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            as: "span",
+            sx: {
+              color: getColorVar(`${color}.600`),
+              ...createStyle({ size }),
+              sm: createStyle(sm),
+              md: createStyle(md),
+              lg: createStyle(lg)
+            },
+            children: /* @__PURE__ */ jsx(
+              PriceRenderer,
+              {
+                price: {
+                  placeholder: true,
+                  ...price
+                }
+              }
+            )
+          }
+        ),
+        exchangePrice && /* @__PURE__ */ jsxs(Fragment, { children: [
+          orientation === "vertical" ? /* @__PURE__ */ jsx("br", {}) : /* @__PURE__ */ jsx(Fragment, { children: " " }),
+          /* @__PURE__ */ jsx(
+            Primitive,
+            {
+              sx: {
+                color: getColorVar(`${color}.500`),
+                ...createStyle({ size: getSmallerTypographyVariants(size).at(0) }),
+                sm: {
+                  ...createStyle({ size: getSmallerTypographyVariants(sm == null ? void 0 : sm.size).at(0) })
+                },
+                md: {
+                  ...createStyle({ size: getSmallerTypographyVariants(md == null ? void 0 : md.size).at(0) })
+                },
+                lg: {
+                  ...createStyle({ size: getSmallerTypographyVariants(lg == null ? void 0 : lg.size).at(0) })
+                }
+              },
+              as: "span",
+              children: /* @__PURE__ */ jsx(
+                PriceRenderer,
+                {
+                  price: {
+                    prefix: "(",
+                    suffix: ")",
+                    placeholder: isNil(exchangePrice.value),
+                    ...exchangePrice
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const PriceRenderer = ({ price }) => {
+  const { t } = useTranslation(LocaleNamespaces.Translation);
+  const { formatPrice, formatNumber } = useFormatter();
+  const { currency, value, isPending, prefix = "", suffix = "", placeholder } = price;
+  if (currency && isNumber(value)) {
+    return `${prefix}${formatPrice(value, { currency })}${suffix}`;
+  }
+  if (isNumber(value)) {
+    return `${prefix}${formatNumber(value)}${suffix}`;
+  }
+  if (isPending) {
+    return `${prefix}${t("updating")}${suffix}`;
+  }
+  if (placeholder) {
+    return /* @__PURE__ */ jsx(TextSkeleton, { sx: { width: 60 } });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+const createStyle = ({ size } = {}) => {
+  return size ? {
+    fontSize: getTypographyVar(size).fontSize,
+    lineHeight: getTypographyVar(size).lineHeight
+  } : {};
+};
+export {
+  PriceLabel
+};

package/dist/lib/price-label/types.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'react';
+import { TypographySizeVariant } from '../../theme';
+import { ColorVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
+export type PriceLabelEntry = {
+    currency?: string;
+    value?: number;
+    isPending?: boolean;
+    placeholder?: boolean;
+    prefix?: string;
+    suffix?: string;
+};
+export interface PriceLabelResponsiveProps {
+    size?: TypographySizeVariant;
+}
+type PriceLabelExtendedProps = ToResponsiveProps<PriceLabelResponsiveProps> & {
+    price: PriceLabelEntry;
+    exchangePrice?: PriceLabelEntry;
+    color?: ColorVariant;
+    orientation?: 'horizontal' | 'vertical';
+};
+export type PriceLabelProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['span']>, PriceLabelExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/price-label/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/price-label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

package/dist/lib/stepper/stepper.js

@@ -4,7 +4,7 @@ import { Step } from "./step.js";
 import { Progress } from "../progress/progress.js";
 const maxPercent = 100;
 const Stepper = forwardRef((props, ref) => {
-  const { direction = "horizontal", className, items, activeIndex = 0, circleSize = 32, ...rest } = props;
+  const { direction = "horizontal", items, activeIndex = 0, circleSize = 32, ...rest } = props;
   const value = maxPercent / (items.length - 1) * activeIndex;
   const progressBarSize = `${(items.length - 1) / items.length * 100}%`;
   const progressBarStyles = {

package/dist/lib/text/text.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/lib/text/text.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAMzD,eAAO,MAAM,IAAI,qCAAsC,SAAS,qDAwB/D,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/lib/text/text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAMzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDA6B3D,CAAC"}

package/dist/lib/text/text.js

@@ -1,41 +1,44 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getTextProps } from "./helpers.js";
-import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
 import { Primitive } from "../primitive/primitive.js";
-const Text = ({ sx, children, ref, ..._props }) => {
+const Text = ({ children, ref, ..._props }) => {
+  var _a, _b, _c;
   const { sizeVariant, sm, md, lg, as = "p", dangerouslySetInnerHTML, ...rest } = getTextProps(_props);
-  const css = [
-    createStyle({ sizeVariant }),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    },
-    createSxInterpolation(sx)
-  ];
   return /* @__PURE__ */ jsx(
     Primitive,
     {
-      css,
       dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
       ...rest,
       as,
+      sx: {
+        ...createStyle({ sizeVariant }),
+        ...rest.sx,
+        sm: {
+          ...createStyle(sm),
+          ...(_a = rest.sx) == null ? void 0 : _a.sm
+        },
+        md: {
+          ...createStyle(md),
+          ...(_b = rest.sx) == null ? void 0 : _b.md
+        },
+        lg: {
+          ...createStyle(lg),
+          ...(_c = rest.sx) == null ? void 0 : _c.lg
+        }
+      },
       ref,
       children: isNil(dangerouslySetInnerHTML) ? children : null
     }
   );
 };
 const createStyle = ({ sizeVariant } = {}) => {
-  return [
-    sizeVariant && {
-      fontSize: getTypographyVar(sizeVariant).fontSize,
-      lineHeight: getTypographyVar(sizeVariant).lineHeight
-    }
-  ];
+  return sizeVariant ? {
+    fontSize: getTypographyVar(sizeVariant).fontSize,
+    lineHeight: getTypographyVar(sizeVariant).lineHeight
+  } : {};
 };
 export {
   Text

package/dist/lib/time-picker/time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,mJAepB,eAAe,qDA2QjB,CAAC"}
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,mJAepB,eAAe,qDAyQjB,CAAC"}

package/dist/lib/time-picker/time-picker.js

@@ -34,7 +34,7 @@ const TimePicker = ({
 }) => {
   const floatingRef = useRef(null);
   const windowScreen = useWindowScreen();
-  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name) ?? size;
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
   const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
   const [isOpen, setIsOpen] = useControllableState({
     defaultValue: open ?? false,

package/dist/theme/typography.d.ts

@@ -4,7 +4,7 @@ export declare const getTypographyVar: <T extends TypographySizeVariant>(key: T,
     lineHeight: string;
 };
 export declare const typographyVars: ThemeTypography;
-export declare const getSmallerTypographyVariants: (variant: TypographySizeVariant) => TypographySizeVariant[];
+export declare const getSmallerTypographyVariants: (variant?: TypographySizeVariant) => TypographySizeVariant[];
 type TypographySizeVariantCSS = {
     fontSize: string;
     lineHeight: string;

package/dist/theme/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAC7B,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,qBAAqB,OAAO,CAAC;;;CASvE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,eAW5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,YAAa,qBAAqB,4BAI1E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;AAEtF,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,UAAU,EAAE,eAAe,CAAC;KAC7B;CACF"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAC7B,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,qBAAqB,OAAO,CAAC;;;CASvE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,eAW5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,aAAc,qBAAqB,4BAQ3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;AAEtF,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,UAAU,EAAE,eAAe,CAAC;KAC7B;CACF"}

package/dist/theme/typography.js

@@ -19,6 +19,9 @@ const typographyVars = {
   "6xl": getTypographyVar("6xl")
 };
 const getSmallerTypographyVariants = (variant) => {
+  if (!variant) {
+    return [];
+  }
   const allVariants = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
   return allVariants.slice(0, allVariants.indexOf(variant)).reverse();
 };

package/dist/utils/common.js

@@ -37,16 +37,6 @@ const matchSearch = (text, searchText, options) => {
     return normalizeSearchText(entry, options).includes(normalizedSearchText);
   });
 };
-const formatNumber = (value, { lng, ...options }) => {
-  try {
-    return new Intl.NumberFormat(lng, {
-      minimumFractionDigits: 0,
-      ...options
-    }).format(value);
-  } catch (error) {
-    return value.toString();
-  }
-};
 const getDecimalDigits = (value) => {
   var _a;
   return ((_a = value.toString().split(".").at(1)) == null ? void 0 : _a.length) ?? 0;
@@ -121,7 +111,6 @@ function parseSvgString(source, uniqueId) {
 export {
   ensureArray,
   ensureBoolean,
-  formatNumber,
   getDecimalDigits,
   getEnumValues,
   matchSearch,

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { Screen, TypographySizeVariant } from '../theme';
-import { SizeVariant, ColorVariant } from '../types';
-import { Get, Paths } from 'type-fest';
+import { SizeVariant, ColorVariant, ToResponsiveProps } from '../types';
+import { Get, Paths, SetRequired } from 'type-fest';
 export * from './common';
 export * from './query-params';
 export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
@@ -34,7 +34,19 @@ export type SizeVariantState = Partial<{
     textVariant: TypographySizeVariant;
 }>;
 export declare const getSizeVariantState: (size?: SizeVariant) => SizeVariantState;
-export declare const getResponsiveProp: <O extends object, P extends Paths<O>, R = Get<O, `${P}`>>(record: Partial<Record<Screen, O>>, field: P, screen: Screen, options?: {
+export declare const getResponsiveProp: <O extends object, P extends Paths<O>, R = Get<O, `${P}`>>(record: ToResponsiveProps<O>, field: P, screen: Screen, options?: {
     condition?: (value?: R) => boolean;
 }) => R;
+export type FormatNumberOptions = Intl.NumberFormatOptions & {
+    lng: string;
+};
+export declare const formatNumber: (value: number, { lng, ...options }: FormatNumberOptions) => string;
+export type FormatPriceOptions = SetRequired<Intl.NumberFormatOptions, 'currency'> & {
+    lng: string;
+};
+export declare const formatPrice: (value: number, { lng, ...options }: FormatPriceOptions) => string;
+export type FormatDateTimeOptions = Intl.DateTimeFormatOptions & {
+    lng: string;
+};
+export declare const formatDateTime: (value: Date | string | number, { lng, ...options }: FormatDateTimeOptions) => string;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAc/B,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAC3B,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAe,MAAM,EAAqB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAc/B,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAiB9G,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAYvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,2BAC/D,iBAAiB,CAAC,CAAC,CAAC,SACrB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,uBAAuB,kBAAkB,WAWjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,IAAI,GAAG,MAAM,GAAG,MAAM,uBAAuB,qBAAqB,WAyBvG,CAAC"}

package/dist/utils/index.js

@@ -1,8 +1,8 @@
 import { Children, isValidElement, Fragment } from "react";
-import { isUndefined, mergeWith, get } from "lodash-es";
+import { isString, isNumber, isUndefined, mergeWith, get } from "lodash-es";
 import { getSmallerScreens } from "../theme/screens.js";
 import { getColorVar } from "../theme/palette.js";
-import { ensureArray, ensureBoolean, formatNumber, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
+import { ensureArray, ensureBoolean, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
 import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
 const getColorShadesByVariant = (variant) => {
   switch (variant) {
@@ -156,7 +156,7 @@ const getSizeVariantState = (size) => {
 };
 const getResponsiveProp = (record, field, screen, options) => {
   const condition = (options == null ? void 0 : options.condition) ?? ((value) => !isUndefined(value));
-  const getByScreen = (bp) => get(record == null ? void 0 : record[bp], field);
+  const getByScreen = (bp) => bp === "xs" ? get(record, field) : get(record == null ? void 0 : record[bp], field);
   const currentVal = getByScreen(screen);
   if (condition(currentVal)) {
     return currentVal;
@@ -166,6 +166,53 @@ const getResponsiveProp = (record, field, screen, options) => {
   });
   return getByScreen(smallerScreen ?? screen);
 };
+const formatNumber = (value, { lng, ...options }) => {
+  try {
+    return new Intl.NumberFormat(lng, {
+      minimumFractionDigits: 0,
+      ...options
+    }).format(value);
+  } catch (error) {
+    return value.toString();
+  }
+};
+const formatPrice = (value, { lng, ...options }) => {
+  try {
+    return new Intl.NumberFormat(lng, {
+      style: "currency",
+      minimumFractionDigits: 0,
+      currencyDisplay: "narrowSymbol",
+      ...options
+    }).format(value);
+  } catch (error) {
+    return [value, options.currency].filter(Boolean).join(" ");
+  }
+};
+const formatDateTime = (value, { lng, ...options }) => {
+  const dateObject = (() => {
+    if (isString(value)) {
+      const hasTimezone = /([zZ]|[+-]\d{2}:\d{2})$/.test(value);
+      return hasTimezone ? new Date(value) : /* @__PURE__ */ new Date(value + "Z");
+    }
+    if (isNumber(value)) {
+      return new Date(value);
+    }
+    return value;
+  })();
+  try {
+    return new Intl.DateTimeFormat(lng, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: false,
+      ...options
+    }).format(dateObject);
+  } catch (error) {
+    return value.toString();
+  }
+};
 export {
   ArrayParamParser,
   BooleanParamParser,
@@ -176,7 +223,9 @@ export {
   ensureArray,
   ensureBoolean,
   flattenChildren,
+  formatDateTime,
   formatNumber,
+  formatPrice,
   getColorShadesByVariant,
   getDecimalDigits,
   getEnumValues,

package/package.json

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