@janbox/storefront-ui 2.0.9 → 2.0.11

package/dist/constants/index.d.ts

@@ -1,5 +1,4 @@
 import { default as IMAGE_PLACEHOLDER } from '../assets/svg/image-placeholder.svg?url';
-export declare const USER_COMPONENT_LOCALE_NAMESPACE = "user-component";
 export declare enum HTMLDatasetAttributes {
     DATA_TEST_ID = "data-testid",
     ARIA_DISABLED = "aria-disabled",
@@ -18,7 +17,4 @@ export declare enum Booleanish {
     True = "true",
     False = "false"
 }
-export declare enum LocaleNamespaces {
-    Translation = "ui__translation"
-}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,eAAO,MAAM,+BAA+B,mBAAmB,CAAC;AAEhE,oBAAY,qBAAqB;IAC/B,YAAY,gBAAgB;IAC5B,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,cAAc,mBAAmB;CAClC;AAED,oBAAY,WAAW;IACrB,aAAa,kBAAkB;CAChC;AAED,eAAO,MAAM,YAAY,oHAA0G,CAAC;AAIpI,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,KAAK,SAAgC,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,gBAAgB;IAC1B,WAAW,oBAAoB;CAChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,oBAAY,qBAAqB;IAC/B,YAAY,gBAAgB;IAC5B,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,cAAc,mBAAmB;CAClC;AAED,oBAAY,WAAW;IACrB,aAAa,kBAAkB;CAChC;AAED,eAAO,MAAM,YAAY,oHAA0G,CAAC;AAIpI,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,KAAK,SAAgC,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}

package/dist/constants/index.js

@@ -1,5 +1,4 @@
 import { default as default2 } from "../assets/svg/image-placeholder.svg.js";
-const USER_COMPONENT_LOCALE_NAMESPACE = "user-component";
 var HTMLDatasetAttributes = /* @__PURE__ */ ((HTMLDatasetAttributes2) => {
   HTMLDatasetAttributes2["DATA_TEST_ID"] = "data-testid";
   HTMLDatasetAttributes2["ARIA_DISABLED"] = "aria-disabled";
@@ -20,18 +19,12 @@ var Booleanish = /* @__PURE__ */ ((Booleanish2) => {
   Booleanish2["False"] = "false";
   return Booleanish2;
 })(Booleanish || {});
-var LocaleNamespaces = /* @__PURE__ */ ((LocaleNamespaces2) => {
-  LocaleNamespaces2["Translation"] = "ui__translation";
-  return LocaleNamespaces2;
-})(LocaleNamespaces || {});
 export {
   Booleanish,
   FALLBACK_SVG,
   HTMLClasses,
   HTMLDatasetAttributes,
   default2 as IMAGE_PLACEHOLDER,
-  LocaleNamespaces,
   TYPING_DEBOUNCE,
-  USER_COMPONENT_LOCALE_NAMESPACE,
   isSSR
 };

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './use-window-screen';
-export * from './use-hover-line-effect';
 export * from './use-ripple-effect';
 export * from './use-controllable-state';
 export * from './use-countdown-timer';

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;AAC1C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,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

@@ -1,5 +1,4 @@
 import { useWindowScreen } from "./use-window-screen/index.js";
-import { useHoverLineEffect } from "./use-hover-line-effect/index.js";
 import { useRippleEffect } from "./use-ripple-effect/index.js";
 import { useControllableState } from "./use-controllable-state.js";
 import { useCountdownTimer } from "./use-countdown-timer.js";
@@ -14,7 +13,6 @@ export {
   useDeepCompareEffect,
   useFirstMountState,
   useFormatter,
-  useHoverLineEffect,
   useQueryParams,
   useRippleEffect,
   useUpdateEffect,

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

@@ -1 +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"}
+{"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;AAGjB,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,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

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

package/dist/i18n/index.d.ts

@@ -0,0 +1,8 @@
+import { default as en } from './locales/en.json';
+export declare const FALLBACK_LOCALE = "en";
+export declare const LocaleContext: import('react').Context<string>;
+export declare const useTranslation: () => {
+    t: (key: keyof typeof en) => string;
+    locale: string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQnC,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,eAAO,MAAM,aAAa,iCAAiC,CAAC;AAE5D,eAAO,MAAM,cAAc;aAKZ,MAAM,OAAO,EAAE;;CAI7B,CAAC"}

package/dist/i18n/index.js

@@ -0,0 +1,26 @@
+import { useContext, useMemo, createContext } from "react";
+import en from "./locales/en.json.js";
+import vi from "./locales/vi.json.js";
+const translations = {
+  en,
+  vi
+};
+const FALLBACK_LOCALE = "en";
+const LocaleContext = createContext(FALLBACK_LOCALE);
+const useTranslation = () => {
+  const locale = useContext(LocaleContext);
+  return useMemo(() => {
+    return {
+      t: (key) => {
+        var _a, _b;
+        return ((_a = translations[locale]) == null ? void 0 : _a[key]) ?? ((_b = translations.en) == null ? void 0 : _b[key]) ?? key;
+      },
+      locale
+    };
+  }, [locale]);
+};
+export {
+  FALLBACK_LOCALE,
+  LocaleContext,
+  useTranslation
+};

package/dist/i18n/locales/en.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "updating": "Updating"
+}
+;
+
+export default _default;

package/dist/i18n/locales/en.json.js

@@ -0,0 +1,8 @@
+const updating = "Updating";
+const en = {
+  updating
+};
+export {
+  en as default,
+  updating
+};

package/dist/i18n/locales/vi.json.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  "updating": "Đang cập nhật"
+};
+
+export default _default;

package/dist/i18n/locales/vi.json.js

@@ -0,0 +1,8 @@
+const updating = "Đang cập nhật";
+const vi = {
+  updating
+};
+export {
+  vi as default,
+  updating
+};

package/dist/index.js

@@ -7,6 +7,7 @@ import { AccordionGroupContext, getAccordionGroupDataAttributes, getAccordionGro
 import { AccordionGroupDataAttributes } from "./lib/accordion/accordion-group/types.js";
 import { AccordionSummary } from "./lib/accordion/accordion-summary/accordion-summary.js";
 import { AccordionSummaryVariant } from "./lib/accordion/accordion-summary/types.js";
+import { Avatar } from "./lib/avatar/avatar.js";
 import { Badge } from "./lib/badge/badge.js";
 import { BlockSkeleton } from "./lib/loading/block-skeleton/block-skeleton.js";
 import { Box } from "./lib/box/box.js";
@@ -150,6 +151,7 @@ export {
   AccordionGroupDataAttributes,
   AccordionSummary,
   AccordionSummaryVariant,
+  Avatar,
   Badge,
   BlockSkeleton,
   Box,

package/dist/lib/avatar/avatar.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAyB,MAAM,SAAS,CAAC;AAQ7D,eAAO,MAAM,MAAM,uBAAwB,WAAW,4CAqFrD,CAAC"}

package/dist/lib/avatar/avatar.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { getAvatarProps, getInitials, getAvatarStatusColor } from "./helpers.js";
+import { isNil } from "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
+import { useUpdateEffect } from "../../hooks/use-update-effect/index.js";
+import { Primitive } from "../primitive/primitive.js";
+const Avatar = ({ ref, ..._props }) => {
+  var _a, _b, _c;
+  const { src, name, color = "primary", size = 40, status, sm, md, lg, ...rest } = getAvatarProps(_props);
+  const [avatarSrc, setAvatarSrc] = useState(src);
+  useUpdateEffect(() => {
+    setAvatarSrc(src);
+  }, [src]);
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ref,
+      ...rest,
+      sx: {
+        position: "relative",
+        ...createStyle({ size }),
+        ...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
+        }
+      },
+      children: [
+        avatarSrc ? /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            src,
+            alt: name ?? "",
+            onError: () => setAvatarSrc(void 0),
+            sx: {
+              position: "absolute",
+              inset: 0,
+              objectFit: "inherit",
+              borderRadius: "inherit"
+            },
+            as: "img"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: getColorVar(`${color}.600`),
+              color: getColorVar("white"),
+              fontWeight: 600,
+              lineHeight: 1,
+              borderRadius: "inherit",
+              ...createInitialsStyle({ size }),
+              sm: createInitialsStyle(sm),
+              md: createInitialsStyle(md),
+              lg: createInitialsStyle(lg)
+            },
+            children: getInitials(name)
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          Primitive,
+          {
+            as: "span",
+            sx: {
+              position: "absolute",
+              bottom: 0,
+              right: 0,
+              borderRadius: "50%",
+              backgroundColor: getAvatarStatusColor(status),
+              borderWidth: 2,
+              borderColor: getColorVar("white"),
+              ...createStatusStyle({ size }),
+              sm: createStatusStyle(sm),
+              md: createStatusStyle(md),
+              lg: createStatusStyle(lg)
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const createStyle = ({ size } = {}) => {
+  return {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size
+  };
+};
+const createStatusStyle = ({ size } = {}) => {
+  if (isNil(size)) return {};
+  const dotSize = Math.round(size * 0.28);
+  return {
+    width: dotSize,
+    height: dotSize
+  };
+};
+const createInitialsStyle = ({ size } = {}) => {
+  if (isNil(size)) return {};
+  return {
+    fontSize: Math.round(size * 0.4)
+  };
+};
+export {
+  Avatar
+};

package/dist/lib/avatar/helpers.d.ts

@@ -0,0 +1,6 @@
+import { AvatarProps, AvatarStatus } from './types';
+export declare const getAvatarProps: (props: AvatarProps) => AvatarProps;
+/** Resolve dimension from named size or custom number */
+export declare const getInitials: (name?: string) => string;
+export declare const getAvatarStatusColor: (status: AvatarStatus) => string | undefined;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAYpD,eAAO,MAAM,cAAc,UAAW,WAAW,KAAG,WAEnD,CAAC;AAEF,yDAAyD;AAEzD,eAAO,MAAM,WAAW,2BAIvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,WAAY,YAAY,uBAaxD,CAAC"}

package/dist/lib/avatar/helpers.js

@@ -0,0 +1,36 @@
+import { mergeComponentProps } from "../../utils/index.js";
+import "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
+const defaultProps = {
+  size: 40,
+  sx: {
+    borderRadius: "50%"
+  }
+};
+const getAvatarProps = (props) => {
+  return mergeComponentProps(defaultProps, props);
+};
+const getInitials = (name = "") => {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+};
+const getAvatarStatusColor = (status) => {
+  switch (status) {
+    case "online":
+      return getColorVar("green.600");
+    case "offline":
+      return getColorVar("neutral.600");
+    case "busy":
+      return getColorVar("red.600");
+    case "away":
+      return getColorVar("orange.600");
+    default:
+      return;
+  }
+};
+export {
+  getAvatarProps,
+  getAvatarStatusColor,
+  getInitials
+};

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

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './avatar';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+import { ColorVariant, PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+export type AvatarResponsiveProps = {
+    size?: number;
+};
+type AvatarHTMLProps = JSX.IntrinsicElements['div'];
+export type AvatarProps = PropsWithSx<ShallowMerge<AvatarHTMLProps, ToResponsiveProps<AvatarResponsiveProps> & {
+    /** URL of the avatar image */
+    src?: string;
+    /** User's name — used for initials fallback and alt/aria-label */
+    name?: string;
+    /** Shape of the avatar */
+    /** Online status indicator */
+    status?: AvatarStatus;
+    color?: ColorVariant;
+}>>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAErF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,WAAW,CACnC,YAAY,CACV,eAAe,EACf,iBAAiB,CAAC,qBAAqB,CAAC,GAAG;IACzC,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CACF,CACF,CAAC"}

package/dist/lib/count-up/count-up.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"count-up.d.ts","sourceRoot":"","sources":["../../../src/lib/count-up/count-up.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC,eAAO,MAAM,OAAO,+DAAwE,YAAY,4CAiCvG,CAAC"}
+{"version":3,"file":"count-up.d.ts","sourceRoot":"","sources":["../../../src/lib/count-up/count-up.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKvC,eAAO,MAAM,OAAO,+DAAwE,YAAY,4CAiCvG,CAAC"}

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

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { 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 { formatNumber } from "../../utils/index.js";
+import { useTranslation } from "../../i18n/index.js";
 import { getDecimalDigits } from "../../utils/common.js";
 const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...props }) => {
   const rootRef = useRef(null);
-  const { i18n } = useTranslation();
+  const { locale } = useTranslation();
   const mergedRef = useMergeRefs([ref, rootRef]);
   const maximumFractionDigits = Math.max(getDecimalDigits(from), getDecimalDigits(to));
   const count = useMotionValue(from);
@@ -15,7 +15,7 @@ const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...prop
   const rounded = useTransform(
     count,
     (latest) => formatNumber(latest, {
-      lng: i18n.language,
+      lng: locale,
       ...formatNumberOptions,
       maximumFractionDigits
     })

package/dist/lib/index.d.ts

@@ -58,4 +58,5 @@ export * from './lightbox';
 export * from './cascader';
 export * from './primitive';
 export * from './price-label';
+export * from './avatar';
 //# 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;AAC5B,cAAc,eAAe,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;AAC9B,cAAc,UAAU,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAY3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,4CAmHlB,CAAC"}
+{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAW3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,4CA0HlB,CAAC"}

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

@@ -2,10 +2,8 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
-import classes from "./input-number.module.scss.js";
 import { Input } from "../input/input.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { cn } from "../../utils/stylesheet.js";
 import MinusIcon from "../../assets/svg/minus.svg.js";
 import PlusIcon from "../../assets/svg/plus.svg.js";
 import { IconButton } from "../icon-button/icon-button.js";
@@ -94,7 +92,14 @@ const InputNumber = ({
       value: valueAsString,
       onChange,
       transform: transformFn,
-      className: cn(classes.input_number__input, className),
+      className,
+      sx: {
+        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0,
+          ...props.sx
+        }
+      },
       onKeyDown,
       suffix: suffix ?? /* @__PURE__ */ jsx(Fragment, { children: step > 0 && /* @__PURE__ */ jsx(
         IconButton,

package/dist/lib/link/link.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAQzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAuD3D,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/lib/link/link.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAOzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,4CAoD3D,CAAC"}

package/dist/lib/link/link.js

@@ -1,16 +1,16 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ClassNames } from "@emotion/react";
 import { isNil } from "lodash-es";
 import { Link as Link$1 } from "react-router";
 import { getLinkProps } from "./helpers.js";
-import { useHoverLineEffect } from "../../hooks/use-hover-line-effect/index.js";
 import { Booleanish } from "../../constants/index.js";
+import "react";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { createUnderlineEffect } from "../../utils/stylesheet.js";
 const Link = ({ children, ref, ..._props }) => {
   const { sx, textVariant, sm, md, lg, to, underline = false, className, ...rest } = getLinkProps(_props);
-  const hoverLineEffectProps = useHoverLineEffect({ enabled: underline });
   const onClick = (e) => {
     var _a;
     if (e.currentTarget.getAttribute("aria-disabled") === Booleanish.True) {
@@ -25,14 +25,13 @@ const Link = ({ children, ref, ..._props }) => {
     Link$1,
     {
       to: to ?? "#",
-      ...hoverLineEffectProps,
       className: cx(
         className,
-        hoverLineEffectProps.className,
         css({
           '&[aria-disabled="true"]': {
             pointerEvents: "none"
           },
+          ...underline ? createUnderlineEffect() : {},
           ...createStyle({ textVariant }),
           ...sx,
           [mediaQuery("sm")]: {

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

@@ -1 +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,4CAwEjD,CAAC"}
+{"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;AAOtF,eAAO,MAAM,UAAU,WAAY,eAAe,4CAoFjD,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsxs, jsx, Fragment } from "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 { isNumber, isNil } from "lodash-es";
+import { useTranslation } from "../../i18n/index.js";
 import { useFormatter } from "../../hooks/use-formatter/index.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getSmallerTypographyVariants, getTypographyVar } from "../../theme/typography.js";
@@ -18,8 +17,14 @@ const PriceLabel = (_props) => {
     sm,
     md,
     lg,
+    showEqual = false,
     ...rest
   } = getPriceLabelProps(_props);
+  const isPriceEqual = price.currency && price.currency === (exchangePrice == null ? void 0 : exchangePrice.currency) && isNumber(price.value) && price.value === (exchangePrice == null ? void 0 : exchangePrice.value);
+  const isShowExchangePrice = (() => {
+    if (!exchangePrice) return false;
+    return showEqual ? true : !isPriceEqual;
+  })();
   return /* @__PURE__ */ jsxs(
     Primitive,
     {
@@ -53,7 +58,7 @@ const PriceLabel = (_props) => {
             )
           }
         ),
-        exchangePrice && /* @__PURE__ */ jsxs(Fragment, { children: [
+        isShowExchangePrice && /* @__PURE__ */ jsxs(Fragment, { children: [
           orientation === "vertical" ? /* @__PURE__ */ jsx("br", {}) : /* @__PURE__ */ jsx(Fragment, { children: " " }),
           /* @__PURE__ */ jsx(
             Primitive,
@@ -78,7 +83,7 @@ const PriceLabel = (_props) => {
                   price: {
                     prefix: "(",
                     suffix: ")",
-                    placeholder: isNil(exchangePrice.value),
+                    placeholder: isNil(exchangePrice == null ? void 0 : exchangePrice.value),
                     ...exchangePrice
                   }
                 }
@@ -91,7 +96,7 @@ const PriceLabel = (_props) => {
   );
 };
 const PriceRenderer = ({ price }) => {
-  const { t } = useTranslation(LocaleNamespaces.Translation);
+  const { t } = useTranslation();
   const { formatPrice, formatNumber } = useFormatter();
   const { currency, value, isPending, prefix = "", suffix = "", placeholder } = price;
   if (currency && isNumber(value)) {

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

@@ -18,6 +18,7 @@ type PriceLabelExtendedProps = ToResponsiveProps<PriceLabelResponsiveProps> & {
     exchangePrice?: PriceLabelEntry;
     color?: ColorVariant;
     orientation?: 'horizontal' | 'vertical';
+    showEqual?: boolean;
 };
 export type PriceLabelProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['span']>, PriceLabelExtendedProps>;
 export {};

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

@@ -1 +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"}
+{"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;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

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

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

package/dist/lib/textarea/textarea.js

@@ -3,11 +3,9 @@ import { useRef, useState } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isString } from "lodash-es";
 import { getTextareaProps } from "./helpers.js";
-import classes from "./textarea.module.scss.js";
-import { getSizeVariantState } from "../../utils/index.js";
-import { cn } from "../../utils/stylesheet.js";
-import "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { getSizeVariantState } from "../../utils/index.js";
 import { Primitive } from "../primitive/primitive.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const Textarea = ({ ref, ..._props }) => {
@@ -75,52 +73,96 @@ const Textarea = ({ ref, ..._props }) => {
       setTypingValue(void 0);
     }, debounce);
   };
-  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(
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ...containerProps,
+      sx: {
+        position: "relative",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
+      className: containerProps == null ? void 0 : containerProps.className,
+      children: [
+        /* @__PURE__ */ jsx(
           Primitive,
           {
-            "aria-invalid": error,
-            className: cn(
-              classes.textarea__control,
-              className
-            ),
-            ...rest,
-            value: typingValue ?? value,
-            ref: mergedRefs,
-            onChange,
-            onBlur,
-            onFocus,
-            as: "textarea"
+            ...mainProps,
+            sx: {
+              width: "100%",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: "0.5rem",
+              display: "flex",
+              paddingTop: 4,
+              paddingBottom: 4,
+              "&:has(textarea[aria-invalid])": {
+                borderColor: getColorVar("red.600")
+              },
+              "&:hover": {
+                borderColor: getColorVar("primary.300")
+              },
+              "&:has(textarea:focus)": {
+                outline: "none",
+                borderColor: getColorVar("primary.600"),
+                boxShadow: `0 1px 3px 0 ${getColorVar("primary.300")}, 0 1px 2px -1px ${getColorVar("primary.300")}`
+              },
+              "&:has(textarea:read-only)": {
+                cursor: "default",
+                pointerEvents: "none"
+              },
+              "&:has(textarea:disabled)": {
+                backgroundColor: getColorVar("neutral.300"),
+                color: getColorVar("neutral.500"),
+                borderColor: getColorVar("neutral.300"),
+                pointerEvents: "none"
+              },
+              ...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: mainProps == null ? void 0 : mainProps.className,
+            children: /* @__PURE__ */ jsx(
+              Primitive,
+              {
+                "aria-invalid": error,
+                sx: {
+                  width: "100%",
+                  backgroundColor: "transparent",
+                  "&:focus": {
+                    outline: "none"
+                  },
+                  "&::placeholder": {
+                    color: getColorVar("neutral.400")
+                  }
+                },
+                className,
+                ...rest,
+                value: typingValue ?? value,
+                ref: mergedRefs,
+                onChange,
+                onBlur,
+                onFocus,
+                as: "textarea"
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 };
 const createStyle = ({ size } = {}) => {
   const { inputPaddingX, textVariant } = getSizeVariantState(size);

package/dist/locales/en/ui__translation.json

@@ -1,3 +1,4 @@
 {
-  "apply": "Apply"
+  "apply": "Apply",
+  "updating": "Updating"
 }

package/dist/locales/vi/ui__translation.json

@@ -1,3 +1,4 @@
 {
-  "apply": "Áp dụng"
+  "apply": "Áp dụng",
+  "updating": "Đang cập nhật"
 }

package/dist/style.css

@@ -1,22 +1,4 @@
-._hover_line_effect_dv0bz_1 {
-  position: relative;
-}
-._hover_line_effect_dv0bz_1::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transform: scaleX(0);
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--hover-line-color);
-  height: var(--hover-line-height);
-  transition-duration: var(--hover-line-duration);
-}
-._hover_line_effect_dv0bz_1:hover::after {
-  transform: scaleX(1);
-}@keyframes _ripple_1jvqm_7 {
+@keyframes _ripple_1jvqm_7 {
   to {
     transform: scale(1);
     opacity: 0;
@@ -847,9 +829,6 @@
 }
 ._input_range_1yrkm_1:hover {
   border-color: var(--color-primary-300);
-}._input_number__input_2xvhv_1::-webkit-outer-spin-button, ._input_number__input_2xvhv_1::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }._switch__container_19zrg_1 {
   display: flex;
   align-items: center;
@@ -936,46 +915,4 @@
 ._switch__main_19zrg_24:has(._switch__input_19zrg_12:disabled)::after {
   background-color: var(--color-neutral-400);
   border-color: var(--color-neutral-400);
-}._textarea__container_bs49u_1 {
-  position: relative;
-  width: 100%;
-}
-
-._textarea__main_bs49u_6 {
-  width: 100%;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.5rem;
-}
-._textarea__main_bs49u_6:has(textarea[aria-invalid]) {
-  border-color: var(--color-red-600);
-}
-._textarea__main_bs49u_6:hover {
-  border-color: var(--color-primary-300);
-}
-._textarea__main_bs49u_6:has(textarea:focus) {
-  outline: none;
-  border-color: var(--color-primary-600);
-  box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-}
-._textarea__main_bs49u_6:has(textarea:read-only) {
-  cursor: default;
-  pointer-events: none;
-}
-._textarea__main_bs49u_6:has(textarea:disabled) {
-  background-color: var(--color-neutral-300);
-  color: var(--color-neutral-500);
-  border-color: var(--color-neutral-300);
-  pointer-events: none;
-}
-
-._textarea__control_bs49u_34 {
-  width: 100%;
-  background-color: transparent;
-}
-._textarea__control_bs49u_34:focus {
-  outline: none;
-}
-._textarea__control_bs49u_34::placeholder {
-  color: var(--color-neutral-400);
 }

package/dist/theme/provider.d.ts

@@ -2,6 +2,7 @@ import { Theme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
+    locale?: string;
 }>;
-export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ theme, locale, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=provider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAwD,MAAM,gBAAgB,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,4CAOpE,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAwD,MAAM,gBAAgB,CAAC;AACrG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ/C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,gCAAmD,kBAAkB,4CAO9F,CAAC"}

package/dist/theme/provider.js

@@ -4,10 +4,11 @@ import { getColorVar } from "./palette.js";
 import { flatten } from "flat";
 import { flatMap } from "lodash-es";
 import { getTypographyVar } from "./typography.js";
-const ThemeProvider = ({ theme, children }) => {
+import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
+const ThemeProvider = ({ theme, locale = FALLBACK_LOCALE, children }) => {
   return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
     /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
-    children
+    /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children })
   ] });
 };
 const createGlobalStyle = ({ palette, typography }) => {

package/dist/utils/index.d.ts

@@ -4,6 +4,7 @@ import { SizeVariant, ColorVariant, ToResponsiveProps } from '../types';
 import { Get, Paths, SetRequired } from 'type-fest';
 export * from './common';
 export * from './query-params';
+export { createUnderlineEffect } from './stylesheet';
 export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     main: string;
     contrastText: string;

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,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"}
+{"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,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAcrD,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

@@ -4,6 +4,7 @@ import { getSmallerScreens } from "../theme/screens.js";
 import { getColorVar } from "../theme/palette.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";
+import { createUnderlineEffect } from "./stylesheet.js";
 const getColorShadesByVariant = (variant) => {
   switch (variant) {
     case "primary":
@@ -220,6 +221,7 @@ export {
   EnumParamParser,
   NumberParamParser,
   StringParamParser,
+  createUnderlineEffect,
   ensureArray,
   ensureBoolean,
   flattenChildren,

package/dist/utils/stylesheet.d.ts

@@ -2,4 +2,11 @@ import { PropsWithSx, StyledCSS } from '../types';
 import { ClassValue } from 'clsx';
 export declare const cn: (...classes: ClassValue[]) => string;
 export declare const createSxInterpolation: (sx?: PropsWithSx["sx"]) => StyledCSS[];
+type CreateUnderlineEffectOptions = {
+    color?: string;
+    duration?: number;
+    height?: string | number;
+};
+export declare const createUnderlineEffect: (options?: CreateUnderlineEffectOptions) => StyledCSS;
+export {};
 //# sourceMappingURL=stylesheet.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/utils/stylesheet.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,WAAqB,CAAC;AAEjE,eAAO,MAAM,qBAAqB,QAAQ,WAAW,CAAC,IAAI,CAAC,KAAQ,SAAS,EAW3E,CAAC"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/utils/stylesheet.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,WAAqB,CAAC;AAEjE,eAAO,MAAM,qBAAqB,QAAQ,WAAW,CAAC,IAAI,CAAC,KAAQ,SAAS,EAW3E,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,aAAa,4BAA4B,KAAQ,SAsBlF,CAAC"}

package/dist/utils/stylesheet.js

@@ -1,3 +1,4 @@
+import { isNumber } from "lodash-es";
 import { mediaQuery } from "../theme/screens.js";
 import "../theme/palette.js";
 import { clsx } from "clsx";
@@ -13,7 +14,30 @@ const createSxInterpolation = (sx = {}) => {
     }
   ];
 };
+const createUnderlineEffect = (options = {}) => {
+  const { color = "currentColor", duration = 300, height = 1 } = options;
+  return {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      transform: "scaleX(0)",
+      transitionProperty: "transform",
+      transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+      backgroundColor: color,
+      height: isNumber(height) ? `${height}px` : height,
+      transitionDuration: `${duration}ms`
+    },
+    "&:hover::after": {
+      transform: "scaleX(1)"
+    }
+  };
+};
 export {
   cn,
-  createSxInterpolation
+  createSxInterpolation,
+  createUnderlineEffect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -56,7 +56,6 @@
     "@emotion/react": "*",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "react-i18next": "*",
     "react-router": ">=7.0.0"
   },
   "dependencies": {
@@ -99,7 +98,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^17.4.0",
-    "i18next": "^25.8.13",
     "prettier": "^3.8.1",
     "sass-embedded": "^1.97.3",
     "storybook": "^10.2.14",

package/dist/hooks/use-hover-line-effect/index.d.ts

@@ -1,12 +0,0 @@
-type UseHoverLineEffectOptions = {
-    color?: string;
-    duration?: number;
-    height?: string | number;
-    enabled?: boolean;
-};
-export declare const useHoverLineEffect: (options?: UseHoverLineEffectOptions) => {
-    className: string;
-    style: React.CSSProperties;
-};
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-hover-line-effect/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-hover-line-effect/index.ts"],"names":[],"mappings":"AAMA,KAAK,yBAAyB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAAa,yBAAyB;;WAYpD,KAAK,CAAC,aAAa;CAGnC,CAAC"}

package/dist/hooks/use-hover-line-effect/index.js

@@ -1,19 +0,0 @@
-import { useMemo } from "react";
-import { isNumber } from "lodash-es";
-import classes from "./use-hover-line-effect.module.scss.js";
-const useHoverLineEffect = (options = {}) => {
-  const { color = "currentColor", duration = 300, height = 1, enabled = true } = options;
-  return useMemo(() => {
-    return {
-      className: enabled ? classes.hover_line_effect : "",
-      style: enabled ? {
-        "--hover-line-color": color,
-        "--hover-line-duration": `${duration}ms`,
-        "--hover-line-height": isNumber(height) ? `${height}px` : height
-      } : {}
-    };
-  }, [color, duration, enabled, height]);
-};
-export {
-  useHoverLineEffect
-};

package/dist/hooks/use-hover-line-effect/use-hover-line-effect.module.scss.js

@@ -1,8 +0,0 @@
-const hover_line_effect = "_hover_line_effect_dv0bz_1";
-const classes = {
-  hover_line_effect
-};
-export {
-  classes as default,
-  hover_line_effect
-};

package/dist/lib/input-number/input-number.module.scss.js

@@ -1,8 +0,0 @@
-const input_number__input = "_input_number__input_2xvhv_1";
-const classes = {
-  input_number__input
-};
-export {
-  classes as default,
-  input_number__input
-};

package/dist/lib/textarea/textarea.module.scss.js

@@ -1,14 +0,0 @@
-const textarea__container = "_textarea__container_bs49u_1";
-const textarea__main = "_textarea__main_bs49u_6";
-const textarea__control = "_textarea__control_bs49u_34";
-const classes = {
-  textarea__container,
-  textarea__main,
-  textarea__control
-};
-export {
-  classes as default,
-  textarea__container,
-  textarea__control,
-  textarea__main
-};