@pedidopago/ui 1.7.20 → 1.7.22

package/dist/shared/components/FocusLock/index.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-interface FocusLockProps {
-    isLocked: boolean;
-    children: ReactNode;
-}
-declare const FocusLock: ({ isLocked, children, ...otherProps }: FocusLockProps) => JSX.Element;
-export default FocusLock;
+import { ReactNode } from 'react';
+interface FocusLockProps {
+    isLocked: boolean;
+    children: ReactNode;
+}
+declare const FocusLock: ({ isLocked, children, ...otherProps }: FocusLockProps) => JSX.Element;
+export default FocusLock;
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/formatters/format-number.d.ts

@@ -1,6 +1,6 @@
-import { FormatCurrency } from './types';
-export declare function formatCurrency({ amount, currency, locale }: FormatCurrency): string;
-export declare function formatNumber(number: string): string;
-export declare function sanitizeNumber(number: string): string;
-export declare function formatCurrencyWithoutSymbol(value: string): string;
+import { FormatCurrency } from './types';
+export declare function formatCurrency({ amount, currency, locale }: FormatCurrency): string;
+export declare function formatNumber(number: string): string;
+export declare function sanitizeNumber(number: string): string;
+export declare function formatCurrencyWithoutSymbol(value: string): string;
 //# sourceMappingURL=format-number.d.ts.map

package/dist/shared/formatters/types.d.ts

@@ -1,6 +1,6 @@
-export interface FormatCurrency {
-    amount: number;
-    currency?: string;
-    locale?: string;
-}
+export interface FormatCurrency {
+    amount: number;
+    currency?: string;
+    locale?: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/shared/hooks/devices.d.ts

@@ -1,9 +1,9 @@
-export declare const devices: {
-    mobile: number;
-    tablet: number;
-    'monitor-small': number;
-    'monitor-wide': number;
-    'monitor-ultra': number;
-};
-export type DeviceTypes = 'mobile' | 'tablet' | 'monitor-small' | 'monitor-wide' | 'monitor-ultra' | number;
+export declare const devices: {
+    mobile: number;
+    tablet: number;
+    'monitor-small': number;
+    'monitor-wide': number;
+    'monitor-ultra': number;
+};
+export type DeviceTypes = 'mobile' | 'tablet' | 'monitor-small' | 'monitor-wide' | 'monitor-ultra' | number;
 //# sourceMappingURL=devices.d.ts.map

package/dist/shared/hooks/useBreakpoints.d.ts

@@ -1,26 +1,26 @@
-type BreakpointsConfig = {
-    base: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    xxl: number;
-};
-type BreakpointName = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-type BreakpointValue<T> = {
-    [key in BreakpointName]?: T;
-};
-/**
- * It returns a function that takes a breakpoint value object and returns the value
- * of the closest breakpoint to the current window size
- * @param {BreakpointsConfig} [breakpointsConfig] - This is an optional parameter
- * that allows you to pass in your own breakpoints.
- * @returns a `breakpointPicker` function, which receives an object with  breakpoint keys and values.
- * @example const flexDirection = breapointPicker({ sm: 'column', lg: 'row' });
- */
-export declare const useBreakpoints: (breakpointsConfig?: BreakpointsConfig) => {
-    breakpoint: BreakpointName | null;
-    breakpointPicker: <T = string>(breakpointValues: BreakpointValue<T>) => T | undefined;
-};
-export {};
+type BreakpointsConfig = {
+    base: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+type BreakpointName = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type BreakpointValue<T> = {
+    [key in BreakpointName]?: T;
+};
+/**
+ * It returns a function that takes a breakpoint value object and returns the value
+ * of the closest breakpoint to the current window size
+ * @param {BreakpointsConfig} [breakpointsConfig] - This is an optional parameter
+ * that allows you to pass in your own breakpoints.
+ * @returns a `breakpointPicker` function, which receives an object with  breakpoint keys and values.
+ * @example const flexDirection = breapointPicker({ sm: 'column', lg: 'row' });
+ */
+export declare const useBreakpoints: (breakpointsConfig?: BreakpointsConfig) => {
+    breakpoint: BreakpointName | null;
+    breakpointPicker: <T = string>(breakpointValues: BreakpointValue<T>) => T | undefined;
+};
+export {};
 //# sourceMappingURL=useBreakpoints.d.ts.map

package/dist/shared/hooks/useDebounce.d.ts

@@ -1,2 +1,2 @@
-export declare function useDebounce<T extends (...args: any[]) => any>(callback: T, delay: number, eachStep?: boolean): (...args: Parameters<T>) => void;
+export declare function useDebounce<T extends (...args: any[]) => any>(callback: T, delay: number, eachStep?: boolean): (...args: Parameters<T>) => void;
 //# sourceMappingURL=useDebounce.d.ts.map

package/dist/shared/hooks/useDevices.d.ts

@@ -1,9 +1,9 @@
-import { DeviceTypes } from './devices';
-/**
- * Checks if the screen width matches the device in a certain direction everytime the screen resizes.
- * @param device The target device to compare. Can use one of the specified devices or a custom one passing a number.
- * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the device. "Up" will return true if it's larger.
- * @returns If the screen width matches the device in a certain direction.
- */
-export declare function useDevices(device: DeviceTypes, direction?: 'up' | 'down'): boolean;
+import { DeviceTypes } from './devices';
+/**
+ * Checks if the screen width matches the device in a certain direction everytime the screen resizes.
+ * @param device The target device to compare. Can use one of the specified devices or a custom one passing a number.
+ * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the device. "Up" will return true if it's larger.
+ * @returns If the screen width matches the device in a certain direction.
+ */
+export declare function useDevices(device: DeviceTypes, direction?: 'up' | 'down'): boolean;
 //# sourceMappingURL=useDevices.d.ts.map

package/dist/shared/hooks/useDisableBodyScroll.d.ts

@@ -1,2 +1,2 @@
-export declare const useDisableBodyScroll: (isDisabled: boolean, type?: 'modal' | 'child_element', noScrollbarPadding?: boolean) => void;
+export declare const useDisableBodyScroll: (isDisabled: boolean, type?: 'modal' | 'child_element', noScrollbarPadding?: boolean) => void;
 //# sourceMappingURL=useDisableBodyScroll.d.ts.map

package/dist/shared/hooks/useDraggableScroll/index.d.ts

@@ -1,10 +1,10 @@
-import { RefObject } from 'react';
-export declare function useDraggableScroll(ref: RefObject<HTMLElement>, options?: {
-    direction?: 'vertical' | 'horizontal' | 'both';
-}): {
-    onMouseDown: (event: {
-        clientX: number;
-        clientY: number;
-    }) => void;
-};
+import { RefObject } from 'react';
+export declare function useDraggableScroll(ref: RefObject<HTMLElement>, options?: {
+    direction?: 'vertical' | 'horizontal' | 'both';
+}): {
+    onMouseDown: (event: {
+        clientX: number;
+        clientY: number;
+    }) => void;
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/hooks/useDraggableScroll/types.d.ts

@@ -1,6 +1,6 @@
-import { RefObject } from 'react';
-export type UseMouseMoveProps = {
-    containerRef?: RefObject<HTMLDivElement | null>;
-    numbers: Array<string>;
-};
+import { RefObject } from 'react';
+export type UseMouseMoveProps = {
+    containerRef?: RefObject<HTMLDivElement | null>;
+    numbers: Array<string>;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/shared/hooks/useKeyPress.d.ts

@@ -1,2 +1,2 @@
-export declare function useKeyPress(key: string, action: () => void): void;
+export declare function useKeyPress(key: string, action: () => void): void;
 //# sourceMappingURL=useKeyPress.d.ts.map

package/dist/shared/hooks/useObserver.d.ts

@@ -1,11 +1,11 @@
-import { RefObject } from 'react';
-interface IntersectionObserverInit {
-    root?: Element | Document | null;
-    rootMargin?: string;
-    threshold?: number | number[];
-}
-export declare function useObserver(ref: RefObject<Element>, callback: () => void, options?: IntersectionObserverInit & {
-    enabled?: boolean;
-}): void;
-export {};
+import { RefObject } from 'react';
+interface IntersectionObserverInit {
+    root?: Element | Document | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+export declare function useObserver(ref: RefObject<Element>, callback: () => void, options?: IntersectionObserverInit & {
+    enabled?: boolean;
+}): void;
+export {};
 //# sourceMappingURL=useObserver.d.ts.map

package/dist/shared/hooks/useOnClickOutside.d.ts

@@ -1,3 +1,3 @@
-import { RefObject } from 'react';
-export declare const useOnClickOutside: (ref: RefObject<HTMLDivElement> | RefObject<HTMLDivElement>[], closeMenu: () => void) => void;
+import { RefObject } from 'react';
+export declare const useOnClickOutside: (ref: RefObject<HTMLDivElement> | RefObject<HTMLDivElement>[], closeMenu: () => void) => void;
 //# sourceMappingURL=useOnClickOutside.d.ts.map

package/dist/shared/hooks/useReposition/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { RefsUseRepositionProps, UseRepositionReturn } from './types';
-export declare function useReposition({ containerRef, triggerRef, onUpdatePosition }: RefsUseRepositionProps, depList: React.DependencyList): UseRepositionReturn;
+/// <reference types="react" />
+import { RefsUseRepositionProps, UseRepositionReturn } from './types';
+export declare function useReposition({ containerRef, triggerRef, onUpdatePosition }: RefsUseRepositionProps, depList: React.DependencyList): UseRepositionReturn;
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/hooks/useReposition/types.d.ts

@@ -1,30 +1,30 @@
-import { RefObject } from 'react';
-import { SelectOption } from '../../../components/Select/types';
-export type UseRepositionProps = {
-    triggerRef: RefObject<HTMLElement>;
-    containerRef: RefObject<HTMLElement>;
-};
-export type UseRepositionReturn = {
-    left: string;
-    top: string;
-};
-export type ChangeOptions = {
-    event?: React.MouseEvent;
-    value?: string | boolean;
-    option?: SelectOption;
-};
-type UseRepositionRefsProps = {
-    containerRef: RefObject<HTMLElement>;
-    triggerRef: RefObject<HTMLElement>;
-};
-type OnUpdatePositionProps = UseRepositionRefsProps & {
-    heightContainer: number;
-};
-export type RefsUseRepositionProps = UseRepositionRefsProps & {
-    /**
-     *@param remember to declare the dependency list after use this function
-     */
-    onUpdatePosition?: (refs: OnUpdatePositionProps) => void;
-};
-export {};
+import { RefObject } from 'react';
+import { SelectOption } from '../../../components/Select/types';
+export type UseRepositionProps = {
+    triggerRef: RefObject<HTMLElement>;
+    containerRef: RefObject<HTMLElement>;
+};
+export type UseRepositionReturn = {
+    left: string;
+    top: string;
+};
+export type ChangeOptions = {
+    event?: React.MouseEvent;
+    value?: string | boolean;
+    option?: SelectOption;
+};
+type UseRepositionRefsProps = {
+    containerRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement>;
+};
+type OnUpdatePositionProps = UseRepositionRefsProps & {
+    heightContainer: number;
+};
+export type RefsUseRepositionProps = UseRepositionRefsProps & {
+    /**
+     *@param remember to declare the dependency list after use this function
+     */
+    onUpdatePosition?: (refs: OnUpdatePositionProps) => void;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/shared/hooks/useSystemTheme.d.ts

@@ -0,0 +1,2 @@
+export declare const useSystemTheme: () => 'dark' | 'light';
+//# sourceMappingURL=useSystemTheme.d.ts.map

package/dist/shared/hooks/useSystemTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSystemTheme.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useSystemTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAAO,MAAM,GAAG,OAmB1C,CAAC"}

package/dist/shared/hooks/useSystemTheme.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSystemTheme = void 0;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var useSystemTheme = function useSystemTheme() {
+  var _useState = (0, _react.useState)('light'),
+    _useState2 = _slicedToArray(_useState, 2),
+    theme = _useState2[0],
+    setTheme = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handleThemeChange = function handleThemeChange(event) {
+      var isDarkMode = event.matches;
+      setTheme(isDarkMode ? 'dark' : 'light');
+    };
+    var prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+    setTheme(prefersDarkMode.matches ? 'dark' : 'light');
+    prefersDarkMode.addEventListener('change', handleThemeChange);
+    return function () {
+      prefersDarkMode.removeEventListener('change', handleThemeChange);
+    };
+  }, []);
+  return theme;
+};
+exports.useSystemTheme = useSystemTheme;

package/dist/shared/hooks/useWindowSize.d.ts

@@ -1,9 +1,9 @@
-export type WindowSize = {
-    width: number;
-    height: number;
-};
-export declare function useWindowSize(): {
-    width: number;
-    height: number;
-};
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};
 //# sourceMappingURL=useWindowSize.d.ts.map

package/dist/shared/tests/test-utils.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { RenderOptions } from '@testing-library/react';
-declare function customRender(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement>;
-export { customRender as render };
+import { ReactElement } from 'react';
+import { RenderOptions } from '@testing-library/react';
+declare function customRender(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement>;
+export { customRender as render };
 //# sourceMappingURL=test-utils.d.ts.map

package/dist/shared/tests/types.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export type AllTheProvidersProps = {
-    children?: React.ReactNode;
-};
+/// <reference types="react" />
+export type AllTheProvidersProps = {
+    children?: React.ReactNode;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/shared/theme/button-example.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Button: () => JSX.Element;
+/// <reference types="react" />
+export declare const Button: () => JSX.Element;
 //# sourceMappingURL=button-example.d.ts.map

package/dist/shared/theme/contexts/ThemeContext.d.ts

@@ -1,16 +1,16 @@
-import { ReactNode } from 'react';
-import { ExtendThemeProps } from '../theme.types';
-type ThemeContextProps = {
-    theme: ExtendThemeProps;
-    colorMode: boolean;
-    switchColorMode: () => void;
-};
-type ThemeProviderProps = {
-    theme?: ExtendThemeProps;
-    initialColorMode?: 'light' | 'dark';
-    children: ReactNode;
-};
-export declare const ThemeContext: import("react").Context<ThemeContextProps>;
-export declare function PPUIThemeProvider({ children, theme, initialColorMode }: ThemeProviderProps): JSX.Element;
-export {};
+import { ReactNode } from 'react';
+import { ExtendThemeProps } from '../theme.types';
+type ThemeContextProps = {
+    theme: ExtendThemeProps;
+    colorMode: 'dark' | 'light';
+    switchColorMode: () => void;
+};
+type ThemeProviderProps = {
+    theme?: ExtendThemeProps;
+    initialColorMode?: 'light' | 'dark';
+    children: ReactNode;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextProps>;
+export declare function PPUIThemeProvider({ children, theme, initialColorMode }: ThemeProviderProps): JSX.Element;
+export {};
 //# sourceMappingURL=ThemeContext.d.ts.map

package/dist/shared/theme/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eAmC1F"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAStE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eA4D1F"}

package/dist/shared/theme/contexts/ThemeContext.js

@@ -11,6 +11,9 @@ var _react2 = require("@emotion/react");
 var _ToastProvider = _interopRequireDefault(require("../../../components/Toast/contexts/ToastProvider"));
 var _ = require("..");
 var _localStorageController = require("../utils/localStorageController");
+var _useSystemTheme = require("../../hooks/useSystemTheme");
+var _colors = require("../objects/colors");
+var _shadows = require("../objects/shadows");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -30,37 +33,54 @@ function PPUIThemeProvider(_ref) {
   var children = _ref.children,
     theme = _ref.theme,
     initialColorMode = _ref.initialColorMode;
-  var _useState = (0, _react.useState)(initialColorMode === 'dark'),
+  var _useState = (0, _react.useState)(theme || _.defaultTheme),
     _useState2 = _slicedToArray(_useState, 2),
-    colorMode = _useState2[0],
-    setColorMode = _useState2[1];
-  var _useState3 = (0, _react.useState)(theme || _.defaultTheme),
+    currentTheme = _useState2[0],
+    setCurrentTheme = _useState2[1];
+  var systemTheme = (0, _useSystemTheme.useSystemTheme)();
+  var _useState3 = (0, _react.useState)(initialColorMode || systemTheme),
     _useState4 = _slicedToArray(_useState3, 2),
-    currentTheme = _useState4[0],
-    setCurrentTheme = _useState4[1];
+    colorMode = _useState4[0],
+    setColorMode = _useState4[1];
   (0, _react.useEffect)(function () {
     var localStorageColorMode = _localStorageController.localStorageController.get('UIColorMode');
-    if (localStorageColorMode) {
-      setColorMode(localStorageColorMode === 'dark');
+    if (localStorageColorMode && localStorageColorMode !== colorMode) {
+      setColorMode(localStorageColorMode);
     }
-  }, [setColorMode]);
+  }, []);
+  var themeColors = (theme === null || theme === void 0 ? void 0 : theme.colors) || _colors.colors[colorMode];
+  var themeShadow = _shadows.shadow[colorMode];
+  function switchColorMode() {
+    changeColorMode(colorMode === 'light' ? 'dark' : 'light');
+  }
+  function changeColorMode(colorMode) {
+    setColorMode(colorMode);
+    _localStorageController.localStorageController.set('UIColorMode', colorMode);
+  }
   (0, _react.useEffect)(function () {
     setCurrentTheme(theme || _.defaultTheme);
   }, [theme]);
-  function switchColorMode() {
-    var newColorMode = !colorMode;
-    _localStorageController.localStorageController.set('UIColorMode', newColorMode ? 'dark' : 'light');
-    setColorMode(newColorMode);
-  }
+  (0, _react.useEffect)(function () {
+    if (initialColorMode) {
+      changeColorMode(initialColorMode);
+    } else {
+      changeColorMode(systemTheme);
+    }
+  }, [initialColorMode, systemTheme]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
     value: {
-      theme: currentTheme,
+      theme: _objectSpread(_objectSpread({}, currentTheme), {}, {
+        colors: themeColors,
+        shadow: themeShadow
+      }),
       colorMode: colorMode,
       switchColorMode: switchColorMode
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
       theme: _objectSpread(_objectSpread({}, currentTheme), {}, {
-        colorMode: colorMode ? 'dark' : 'light'
+        shadow: themeShadow,
+        colors: themeColors,
+        colorMode: colorMode
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastProvider.default, {
         children: children

package/dist/shared/theme/hooks/useColorMode.d.ts

@@ -1,5 +1,5 @@
-export declare const useColorMode: () => {
-    colorMode: string;
-    switchColorMode: () => void;
-};
+export declare const useColorMode: () => {
+    colorMode: "light" | "dark";
+    switchColorMode: () => void;
+};
 //# sourceMappingURL=useColorMode.d.ts.map

package/dist/shared/theme/hooks/useColorMode.js

@@ -11,7 +11,7 @@ var useColorMode = function useColorMode() {
     colorMode = _useContext.colorMode,
     switchColorMode = _useContext.switchColorMode;
   return {
-    colorMode: colorMode ? 'dark' : 'light',
+    colorMode: colorMode,
     switchColorMode: switchColorMode
   };
 };

package/dist/shared/theme/hooks/useColorModeValue.d.ts

@@ -1,2 +1,2 @@
-export declare const useColorModeValue: (valueToLight: string, valueToDark: string) => string;
+export declare const useColorModeValue: (valueToLight: string, valueToDark: string) => string;
 //# sourceMappingURL=useColorModeValue.d.ts.map