@janbox/storefront-ui 2.0.21 → 2.0.22

package/dist/hooks/use-window-screen/index.d.ts

@@ -1,6 +1,6 @@
 import { Screen } from '../../theme';
 export declare const useWindowScreen: () => {
-    name: "xs" | "sm" | "md" | "lg" | undefined;
+    name: "xs" | "sm" | "lg" | "md" | undefined;
     isSmallerThan: (target: Screen) => boolean;
     isLargerThan: (target: Screen) => boolean;
 };

package/dist/i18n/index.d.ts

@@ -1,6 +1,5 @@
 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;

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,mBAAmB,CAAC;AASnC,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,eAAO,MAAM,cAAc;aAKZ,MAAM,OAAO,EAAE;;CAI7B,CAAC"}

package/dist/i18n/index.js

@@ -1,14 +1,16 @@
-import { useContext, useMemo, createContext } from "react";
+import { useMemo } from "react";
 import en from "./locales/en.json.js";
 import vi from "./locales/vi.json.js";
+import "lodash-es";
+import "../theme/palette.js";
+import { useTheme } from "../theme/provider.js";
 const translations = {
   en,
   vi
 };
 const FALLBACK_LOCALE = "en";
-const LocaleContext = createContext(FALLBACK_LOCALE);
 const useTranslation = () => {
-  const locale = useContext(LocaleContext);
+  const { locale = FALLBACK_LOCALE } = useTheme();
   return useMemo(() => {
     return {
       t: (key) => {
@@ -21,6 +23,5 @@ const useTranslation = () => {
 };
 export {
   FALLBACK_LOCALE,
-  LocaleContext,
   useTranslation
 };

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

@@ -1 +1 @@
-{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBxC,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAqJzD,CAAC"}
+{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBxC,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAqJzD,CAAC"}

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -19,13 +19,11 @@ const Flexbox = ({ children, container, ref, ..._props }) => {
 };
 const createStyle = (sx = {}) => {
   const { width, height, ...css } = sx;
-  return [
-    {
-      width,
-      height,
-      "& > *": css
-    }
-  ];
+  return {
+    width,
+    height,
+    "& > *": css
+  };
 };
 export {
   Flexbox

package/dist/lib/stepper/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/lib/stepper/step.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkCpC,eAAO,MAAM,IAAI,mHAsCf,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/lib/stepper/step.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmCpC,eAAO,MAAM,IAAI,mHAsCf,CAAC"}

package/dist/lib/tabs/tab-list/tab-list.d.ts

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

package/dist/lib/tabs/tab-list/tab-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/tab-list.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDA6BjE,CAAC"}
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/tab-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,OAAO,iCAAkC,YAAY,4CA8BjE,CAAC"}

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

@@ -1,31 +1,37 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { getTabListProps } from "./helpers.js";
 import { TabIndexContext } from "../tab/helpers.js";
 import { flattenChildren } from "../../../utils/index.js";
 import { scrollbarNoneStyle } from "../../../constants/emotion.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { TabIndicator } from "../tab-indicator/tab-indicator.js";
+import { Primitive } from "../../primitive/primitive.js";
 const TabList = ({ ref, children, ..._props }) => {
   const { sx, ...props } = getTabListProps(_props);
-  const css = [
+  return /* @__PURE__ */ jsxs(
+    Primitive,
     {
-      display: "flex",
-      width: "fit-content",
-      maxWidth: "100%",
-      alignItems: "center",
-      gap: 16,
-      position: "relative",
-      overflow: "auto",
-      "& > *": {
-        flexShrink: 0
-      }
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsxs("div", { css: [css, scrollbarNoneStyle], ...props, ref, children: [
-    flattenChildren(children).map((child, index) => /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: index, children: child }, index)),
-    /* @__PURE__ */ jsx(TabIndicator, {})
-  ] });
+      sx: {
+        display: "flex",
+        width: "fit-content",
+        maxWidth: "100%",
+        alignItems: "center",
+        gap: 16,
+        position: "relative",
+        overflow: "auto",
+        "& > *": {
+          flexShrink: 0
+        },
+        ...scrollbarNoneStyle,
+        ...sx
+      },
+      ...props,
+      ref,
+      children: [
+        flattenChildren(children).map((child, index) => /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: index, children: child }, index)),
+        /* @__PURE__ */ jsx(TabIndicator, {})
+      ]
+    }
+  );
 };
 export {
   TabList

package/dist/lib/tabs/tab-list/types.d.ts

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

package/dist/lib/tabs/tab-list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC"}

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

@@ -1,6 +1,6 @@
 import { TextProps, TextVariant } from './types';
 import { Screen } from '../../theme';
-import { CSSObject } from '@emotion/react';
-export declare const getTextCssByVariant: (variant?: TextVariant) => Partial<Record<Screen, CSSObject>>;
+import { StyledCSS } from '../../types';
+export declare const getTextCssByVariant: (variant?: TextVariant) => Partial<Record<Screen, StyledCSS>>;
 export declare const getTextProps: (extended: TextProps) => TextProps;
 //# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/text/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEjD,OAAO,EAAoB,MAAM,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,eAAO,MAAM,mBAAmB,aAAc,WAAW,KAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CA2H5F,CAAC;AAEF,eAAO,MAAM,YAAY,aAAc,SAAS,cAO/C,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/text/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEjD,OAAO,EAAoB,MAAM,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,eAAO,MAAM,mBAAmB,aAAc,WAAW,KAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CA2H5F,CAAC;AAEF,eAAO,MAAM,YAAY,aAAc,SAAS,cAO/C,CAAC"}

package/dist/theme/index.d.ts

@@ -1,6 +1,13 @@
+import { Palette } from './palette';
+import { ThemeTypography } from './typography';
 export * from './screens';
 export * from './palette';
 export * from './typography';
 export * from './provider';
+export interface Theme {
+    palette: Palette;
+    typography: ThemeTypography;
+    locale?: string;
+}
 export declare const FLOATING_Z_INDEX = 9999;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAE3B,eAAO,MAAM,gBAAgB,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAE3B,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,OAAO,CAAC"}

package/dist/theme/index.js

@@ -1,7 +1,7 @@
 import { breakpoint, getSmallerScreens, mediaQuery, screens } from "./screens.js";
 import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
 import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
-import { ThemeProvider } from "./provider.js";
+import { ThemeProvider, useTheme } from "./provider.js";
 const FLOATING_Z_INDEX = 9999;
 export {
   FLOATING_Z_INDEX,
@@ -16,5 +16,6 @@ export {
   paletteVars,
   parseColor,
   screens,
-  typographyVars
+  typographyVars,
+  useTheme
 };

package/dist/theme/palette.d.ts

@@ -37,10 +37,5 @@ export type GroupedColor = {
 };
 export declare const groupedColors: GroupedColor[];
 export declare const parseColor: (text: string | undefined, palette: Palette) => import('color').ColorInstance | null;
-declare module '@emotion/react' {
-    interface Theme {
-        palette: Palette;
-    }
-}
 export {};
 //# sourceMappingURL=palette.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,eAAO,MAAM,WAAW,QAAS,UAAU,8BAG1C,CAAC;AAIF,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3D,KAAK,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,SAAS,EAAE,UAAU,CAAC;IACtB,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,WAAW,EAAE,OAoHzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAAY,EA+IvC,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAwB,OAAO,yCAiBrD,CAAC;AAEF,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,OAAO,EAAE,OAAO,CAAC;KAClB;CACF"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,eAAO,MAAM,WAAW,QAAS,UAAU,8BAG1C,CAAC;AAIF,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3D,KAAK,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,SAAS,EAAE,UAAU,CAAC;IACtB,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,WAAW,EAAE,OAoHzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAAY,EA+IvC,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAwB,OAAO,yCAiBrD,CAAC"}

package/dist/theme/provider.d.ts

@@ -1,8 +1,8 @@
-import { Theme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
+import { Theme } from '.';
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
-    locale?: string;
 }>;
-export declare const ThemeProvider: ({ theme, locale, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => Theme;
+export declare const ThemeProvider: ({ theme, 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,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"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1E,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,QAAQ,aAMpB,CAAC;AAIF,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,4CAOpE,CAAC"}

package/dist/theme/provider.js

@@ -1,14 +1,22 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { ThemeProvider as ThemeProvider$1, Global } from "@emotion/react";
+import { Global } from "@emotion/react";
+import { useContext, createContext } from "react";
 import { getColorVar } from "./palette.js";
 import { flatten } from "flat";
 import { flatMap } from "lodash-es";
 import { getTypographyVar } from "./typography.js";
-import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
-const ThemeProvider = ({ theme, locale = FALLBACK_LOCALE, children }) => {
-  return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
+const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("Theme context is unavailable. Make sure the component is wrapped in ThemeProvider.");
+  }
+  return context;
+};
+const ThemeContext = createContext(null);
+const ThemeProvider = ({ theme, children }) => {
+  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: theme, children: [
     /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
-    /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children })
+    children
   ] });
 };
 const createGlobalStyle = ({ palette, typography }) => {
@@ -294,5 +302,6 @@ const createGlobalStyle = ({ palette, typography }) => {
   };
 };
 export {
-  ThemeProvider
+  ThemeProvider,
+  useTheme
 };

package/dist/theme/typography.d.ts

@@ -10,10 +10,5 @@ type TypographySizeVariantCSS = {
     lineHeight: string;
 };
 export type ThemeTypography = Record<TypographySizeVariant, TypographySizeVariantCSS>;
-declare module '@emotion/react' {
-    interface Theme {
-        typography: ThemeTypography;
-    }
-}
 export {};
 //# sourceMappingURL=typography.d.ts.map

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,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"}
+{"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"}

package/package.json

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

package/dist/locales/en/ui__translation.json

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

package/dist/locales/vi/ui__translation.json

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