@razorpay/blade 9.6.1 → 10.0.0

package/build/utils/index.d.ts

@@ -418,10 +418,10 @@ type Delay = {
   xlong: 5000;
 };
 
-type EasingFunctionFactory = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
+type EasingFactoryFn = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`
 type EasingType<Value extends string> = Platform$1.Select<{
   web: Value;
-  native: EasingFunctionFactory;
+  native: EasingFactoryFn;
 }>;
 
 type Easing = {
@@ -429,49 +429,49 @@ type Easing = {
   standard: {
     /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
     /** `cubic-bezier(0.3, 0, 0.2, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
     /** `cubic-bezier(0.5, 0, 0, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
     /** `cubic-bezier(1, 0.5, 0, 0.5)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
   };
   /** Easings for all entrance animations*/
   entrance: {
     /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
     /** `cubic-bezier(0, 0, 0.2, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
     /** `cubic-bezier(0, 0, 0, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
   };
   /** Easings for all exit animations*/
   exit: {
     /** `cubic-bezier(0.7, 0, 0.5, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
     /** `cubic-bezier(0.17, 0, 1, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
     /** `cubic-bezier(0.5, 0, 1, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
   };
 };

package/build/utils/index.development.web.js

@@ -10,21 +10,18 @@ var getColorScheme = function getColorScheme() {
     system: 'default'
   };
   var supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
-
   if (colorScheme === 'light' || colorScheme === 'dark') {
     return colorScheme;
   }
-
   if (colorScheme === 'system' && supportsMatchMedia && window.matchMedia(colorSchemeMediaQueryMap.dark).matches) {
     return 'dark';
   }
-
   return 'light';
 };
 
 var getMediaQuery = function getMediaQuery(_ref) {
   var min = _ref.min,
-      max = _ref.max;
+    max = _ref.max;
   return "screen and (min-width: ".concat(min, "px)").concat(max ? " and (max-width: ".concat(max, "px)") : '');
 };
 
@@ -32,15 +29,12 @@ var getPlatformType = function getPlatformType() {
   if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
     return 'react-native';
   }
-
   if (typeof document !== 'undefined') {
     return 'browser';
   }
-
   if (typeof process !== 'undefined') {
     return 'node';
   }
-
   return 'unknown';
 };
 
@@ -50,17 +44,14 @@ var deviceType = {
 };
 var useBreakpoint = function useBreakpoint(_ref) {
   var _window;
-
   var breakpoints = _ref.breakpoints;
   var supportsMatchMedia = typeof document !== 'undefined' && typeof window !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
   var breakpointsTokenAndQueryCollection = useMemo(function () {
     return supportsMatchMedia ? Object.entries(breakpoints).map(function (_ref2, index, breakpointsArray) {
       var _breakpointsArray;
-
       var _ref3 = _slicedToArray(_ref2, 2),
-          token = _ref3[0],
-          screenSize = _ref3[1];
-
+        token = _ref3[0],
+        screenSize = _ref3[1];
       var min = screenSize;
       var maxValue = (_breakpointsArray = breakpointsArray[index + 1]) === null || _breakpointsArray === void 0 ? void 0 : _breakpointsArray[1];
       var mediaQuery = getMediaQuery({
@@ -77,7 +68,6 @@ var useBreakpoint = function useBreakpoint(_ref) {
   var getMatchedDeviceType = useCallback(function (matchedBreakpoint) {
     var matchedDeviceType = deviceType.mobile;
     var platform = getPlatformType();
-
     if (platform === 'react-native') {
       matchedDeviceType = deviceType.mobile;
     } else if (platform === 'browser') {
@@ -91,49 +81,40 @@ var useBreakpoint = function useBreakpoint(_ref) {
       //@TODO: Check for useragent for node
       matchedDeviceType = deviceType.desktop;
     }
-
     return matchedDeviceType;
   }, []);
   var getMatchedBreakpoint = useCallback(function (event) {
     var _breakpointsTokenAndQ, _breakpointsTokenAndQ2;
-
     var matchedBreakpoint = (_breakpointsTokenAndQ = (_breakpointsTokenAndQ2 = breakpointsTokenAndQueryCollection.find(function (_ref4) {
       var _ref4$mediaQuery = _ref4.mediaQuery,
-          mediaQuery = _ref4$mediaQuery === void 0 ? '' : _ref4$mediaQuery;
-
+        mediaQuery = _ref4$mediaQuery === void 0 ? '' : _ref4$mediaQuery;
       // this will run whenever mediaQuery change event is triggered
       if ((event === null || event === void 0 ? void 0 : event.media) === mediaQuery) {
         return true;
-      } // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object
-
-
+      }
       // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object
       if (window.matchMedia(mediaQuery).matches) {
         return true;
       }
-
       return false;
     })) === null || _breakpointsTokenAndQ2 === void 0 ? void 0 : _breakpointsTokenAndQ2.token) !== null && _breakpointsTokenAndQ !== void 0 ? _breakpointsTokenAndQ : undefined;
     return matchedBreakpoint;
   }, [breakpointsTokenAndQueryCollection]);
-
   var _useState = useState(function () {
-    var matchedBreakpoint = getMatchedBreakpoint();
-    var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
-    return {
-      matchedBreakpoint: matchedBreakpoint,
-      matchedDeviceType: matchedDeviceType
-    };
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      breakpointAndDevice = _useState2[0],
-      setBreakpointAndDevice = _useState2[1];
-
+      var matchedBreakpoint = getMatchedBreakpoint();
+      var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
+      return {
+        matchedBreakpoint: matchedBreakpoint,
+        matchedDeviceType: matchedDeviceType
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    breakpointAndDevice = _useState2[0],
+    setBreakpointAndDevice = _useState2[1];
   useEffect(function () {
     if (!supportsMatchMedia) {
       return undefined;
     }
-
     var handleMediaQueryChange = function handleMediaQueryChange(event) {
       setBreakpointAndDevice(function () {
         var matchedBreakpoint = getMatchedBreakpoint(event);
@@ -144,23 +125,20 @@ var useBreakpoint = function useBreakpoint(_ref) {
         };
       });
     };
-
     var mediaQueryInstances = breakpointsTokenAndQueryCollection.map(function (_ref5) {
       var _ref5$mediaQuery = _ref5.mediaQuery,
-          mediaQuery = _ref5$mediaQuery === void 0 ? '' : _ref5$mediaQuery;
+        mediaQuery = _ref5$mediaQuery === void 0 ? '' : _ref5$mediaQuery;
       var mediaQueryInstance = window.matchMedia(mediaQuery);
       /**
        * the mediaquery event listener is available on mediaQuery instances and not `window`
        * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.
        */
-
       if (mediaQueryInstance.addEventListener) {
         mediaQueryInstance.addEventListener('change', handleMediaQueryChange);
       } else {
         // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
         mediaQueryInstance.addListener(handleMediaQueryChange);
       }
-
       return mediaQueryInstance;
     });
     return function () {
@@ -173,12 +151,14 @@ var useBreakpoint = function useBreakpoint(_ref) {
         }
       });
     };
-  }, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]); // @TODO: handle SSR scenarios
+  }, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]);
 
+  // @TODO: handle SSR scenarios
   return breakpointAndDevice;
 };
 
 // @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens
+
 // export type ActionProperties = {
 //   background: ActionVariants;
 //   border: ActionVariants;
@@ -188,11 +168,9 @@ var useBreakpoint = function useBreakpoint(_ref) {
 var colorSchemeNamesInput = ['light', 'dark', 'system'];
 
 var PREFIX = '[Blade]:';
-
 var throwBladeError = function throwBladeError(_ref) {
   var message = _ref.message,
-      moduleName = _ref.moduleName;
-
+    moduleName = _ref.moduleName;
   {
     var prefix = moduleName ? "[Blade: ".concat(moduleName, "]:") : PREFIX;
     throw new Error("".concat(prefix, " ").concat(message));
@@ -201,15 +179,13 @@ var throwBladeError = function throwBladeError(_ref) {
 
 var useColorScheme = function useColorScheme() {
   var initialColorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-
   // if colorScheme defined use that else fallback to 'light'
   var _useState = useState(function () {
-    return getColorScheme(initialColorScheme);
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      colorSchemeState = _useState2[0],
-      setColorSchemeState = _useState2[1];
-
+      return getColorScheme(initialColorScheme);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    colorSchemeState = _useState2[0],
+    setColorSchemeState = _useState2[1];
   var setColorScheme = useCallback(function setThemeMode(colorScheme) {
     {
       if (!colorSchemeNamesInput.includes(colorScheme)) {
@@ -219,7 +195,6 @@ var useColorScheme = function useColorScheme() {
         });
       }
     }
-
     setColorSchemeState(getColorScheme(colorScheme));
   }, []);
   return {
@@ -229,7 +204,6 @@ var useColorScheme = function useColorScheme() {
 };
 
 /* eslint-disable @typescript-eslint/no-namespace */
-
 var isReactNative = function isReactNative() {
   return getPlatformType() === 'react-native';
 };
@@ -243,7 +217,6 @@ var isAndroid = function isAndroid() {
 
 /* eslint-disable @typescript-eslint/no-namespace */
 var Platform;
-
 (function (_Platform) {})(Platform || (Platform = {}));
 
 /**
@@ -263,6 +236,7 @@ var Platform;
 var castWebType = function castWebType(value) {
   return value;
 };
+
 /**
  * @description
  *
@@ -277,8 +251,6 @@ var castWebType = function castWebType(value) {
  * //    ^ number
  * ```
  */
-
-
 var castNativeType = function castNativeType(value) {
   return value;
 };
@@ -287,7 +259,6 @@ function makeBorderSize(size) {
   if (typeof size === 'number') {
     return "".concat(size, "px");
   }
-
   return size;
 }
 
@@ -322,7 +293,6 @@ var toTitleCase = function toTitleCase(inputString) {
  * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}
  * @deprecated This utility will be deprecated in subsequent version.
  */
-
 function usePrevious(value) {
   var ref = useRef();
   useEffect(function () {
@@ -340,10 +310,8 @@ var ThemeContext = /*#__PURE__*/createContext({
     return null;
   }
 });
-
 var useTheme = function useTheme() {
   var themeContext = useContext(ThemeContext);
-
   {
     if (!themeContext.theme) {
       throwBladeError({
@@ -351,7 +319,6 @@ var useTheme = function useTheme() {
         moduleName: 'BladeProvider'
       });
     }
-
     if (themeContext === undefined) {
       throwBladeError({
         message: 'useTheme must be used within BladeProvider',
@@ -359,7 +326,6 @@ var useTheme = function useTheme() {
       });
     }
   }
-
   return themeContext;
 };
 

package/build/utils/index.development.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.development.web.js","sources":["../../src/utils/getColorScheme/getColorScheme.web.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/tokens/theme/theme.ts","../../src/utils/logger/logger.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.web.ts","../../src/utils/platform/platform.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.web.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.web.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there\n  const colorSchemeMediaQueryMap = {\n    light: '(prefers-color-scheme: light)',\n    dark: '(prefers-color-scheme: dark)',\n    system: 'default',\n  };\n  const supportsMatchMedia =\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\n  if (colorScheme === 'light' || colorScheme === 'dark') {\n    return colorScheme;\n  }\n\n  if (\n    colorScheme === 'system' &&\n    supportsMatchMedia &&\n    window.matchMedia(colorSchemeMediaQueryMap.dark).matches\n  ) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n","export const getMediaQuery = ({ min, max }: { min: number; max?: number }): string => {\n  return `screen and (min-width: ${min}px)${max ? ` and (max-width: ${max}px)` : ''}`;\n};\n","export type PlatformTypes = 'browser' | 'node' | 'react-native' | 'unknown';\n\nexport const getPlatformType = (): PlatformTypes => {\n  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n    return 'react-native';\n  }\n\n  if (typeof document !== 'undefined') {\n    return 'browser';\n  }\n\n  if (typeof process !== 'undefined') {\n    return 'node';\n  }\n\n  return 'unknown';\n};\n","/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { useEffect, useState, useCallback, useMemo } from 'react';\nimport { getPlatformType } from '../getPlatformType';\nimport { getMediaQuery } from '../getMediaQuery';\nimport type { Breakpoints } from '~tokens/global';\n\nconst deviceType = {\n  desktop: 'desktop',\n  mobile: 'mobile',\n} as const;\n\ntype DeviceType = keyof typeof deviceType;\ntype Breakpoint = keyof Breakpoints | undefined;\n\ntype BreakpointAndDevice = {\n  matchedBreakpoint: Breakpoint;\n  matchedDeviceType: DeviceType;\n};\n\nexport const useBreakpoint = ({\n  breakpoints,\n}: {\n  breakpoints: Breakpoints;\n}): BreakpointAndDevice => {\n  const supportsMatchMedia =\n    typeof document !== 'undefined' &&\n    typeof window !== 'undefined' &&\n    typeof window?.matchMedia === 'function';\n\n  const breakpointsTokenAndQueryCollection = useMemo(\n    () =>\n      (supportsMatchMedia\n        ? Object.entries(breakpoints).map(([token, screenSize], index, breakpointsArray) => {\n            const min = screenSize;\n            const maxValue = breakpointsArray[index + 1]?.[1];\n            const mediaQuery = getMediaQuery({ min, max: maxValue ? maxValue - 1 : undefined });\n            return { token, screenSize, mediaQuery };\n          })\n        : []) as {\n        token: keyof Breakpoints;\n        screenSize: number;\n        mediaQuery: string;\n      }[],\n    [breakpoints, supportsMatchMedia],\n  );\n\n  const getMatchedDeviceType = useCallback((matchedBreakpoint: Breakpoint): DeviceType => {\n    let matchedDeviceType: DeviceType = deviceType.mobile;\n    const platform = getPlatformType();\n    if (platform === 'react-native') {\n      matchedDeviceType = deviceType.mobile;\n    } else if (platform === 'browser') {\n      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {\n        // tablet is also categorised as mobile\n        matchedDeviceType = deviceType.mobile;\n      } else {\n        matchedDeviceType = deviceType.desktop;\n      }\n    } else if (platform === 'node') {\n      //@TODO: Check for useragent for node\n      matchedDeviceType = deviceType.desktop;\n    }\n    return matchedDeviceType;\n  }, []);\n\n  const getMatchedBreakpoint = useCallback(\n    (event?: MediaQueryListEvent): Breakpoint => {\n      const matchedBreakpoint =\n        breakpointsTokenAndQueryCollection.find(({ mediaQuery = '' }) => {\n          // this will run whenever mediaQuery change event is triggered\n          if (event?.media === mediaQuery) {\n            return true;\n          }\n          // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object\n          if (window.matchMedia(mediaQuery).matches) {\n            return true;\n          }\n          return false;\n        })?.token ?? undefined;\n\n      return matchedBreakpoint;\n    },\n    [breakpointsTokenAndQueryCollection],\n  );\n\n  const [breakpointAndDevice, setBreakpointAndDevice] = useState(() => {\n    const matchedBreakpoint = getMatchedBreakpoint();\n    const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n    return {\n      matchedBreakpoint,\n      matchedDeviceType,\n    };\n  });\n\n  useEffect(() => {\n    if (!supportsMatchMedia) {\n      return undefined;\n    }\n\n    const handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      setBreakpointAndDevice(() => {\n        const matchedBreakpoint = getMatchedBreakpoint(event);\n        const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n\n        return { matchedBreakpoint, matchedDeviceType };\n      });\n    };\n\n    const mediaQueryInstances = breakpointsTokenAndQueryCollection.map(({ mediaQuery = '' }) => {\n      const mediaQueryInstance = window.matchMedia(mediaQuery);\n      /**\n       * the mediaquery event listener is available on mediaQuery instances and not `window`\n       * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.\n       */\n      if (mediaQueryInstance.addEventListener) {\n        mediaQueryInstance.addEventListener('change', handleMediaQueryChange);\n      } else {\n        // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener\n        mediaQueryInstance.addListener(handleMediaQueryChange);\n      }\n      return mediaQueryInstance;\n    });\n\n    return (): void => {\n      mediaQueryInstances.forEach((mediaQueryInstance) => {\n        if (mediaQueryInstance.removeEventListener) {\n          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);\n        } else {\n          // In older browsers MediaQueryList do not yet inherit from EventTarget, So using removeListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener\n          mediaQueryInstance.removeListener(handleMediaQueryChange);\n        }\n      });\n    };\n  }, [\n    breakpointsTokenAndQueryCollection,\n    getMatchedBreakpoint,\n    getMatchedDeviceType,\n    supportsMatchMedia,\n  ]);\n\n  // @TODO: handle SSR scenarios\n  return breakpointAndDevice;\n};\n","import type { StringWithAutocomplete } from '~utils/types';\nimport type {\n  Border,\n  Breakpoints,\n  Motion,\n  Spacing,\n  TypographyWithPlatforms,\n  ElevationWithColorModes,\n} from '~tokens/global';\n\nexport type ColorSchemeNames = 'dark' | 'light';\nexport type ColorSchemeNamesInput = ColorSchemeNames | 'system';\n\nexport type ColorSchemeModes = 'onDark' | 'onLight';\n\nexport type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';\n\nexport type ColorContrastTypes = 'low' | 'high';\n\nexport type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';\n\nexport type ColorContrast = {\n  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;\n};\n\n// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens\nexport type SurfaceLevels = 1 | 2 | 3;\n\nexport type ActionStates = {\n  default: string;\n  hover: string;\n  focus: string;\n  active: string;\n  disabled: string;\n};\n\nexport type LinkActionStates = ActionStates & {\n  visited: string;\n};\n\nexport type ActionStatesWithContrast = {\n  default: ColorContrast;\n  hover: ColorContrast;\n  focus: ColorContrast;\n  active: ColorContrast;\n  disabled: ColorContrast;\n};\n\nexport type LinkActionStatesWithContrast = ActionStatesWithContrast & {\n  visited: ColorContrast;\n};\n\nexport type ActionVariants = {\n  primary: ActionStates;\n  secondary: ActionStates;\n  tertiary: ActionStates;\n  link: LinkActionStates;\n};\n\nexport type ActionVariantsWithContrast = {\n  primary: ActionStatesWithContrast;\n  secondary: ActionStatesWithContrast;\n  tertiary: ActionStatesWithContrast;\n  link: ActionStatesWithContrast;\n};\n\n// export type ActionProperties = {\n//   background: ActionVariants;\n//   border: ActionVariants;\n//   text: ActionVariants;\n//   icon: ActionVariants;\n// };\n\nexport type FeedbackActions = {\n  background: Pick<ActionVariantsWithContrast, 'primary'>;\n  border: Pick<ActionVariantsWithContrast, 'primary'>;\n  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n};\n\nexport type Colors = {\n  brand: {\n    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;\n    secondary: Record<500, string>;\n    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;\n  };\n  feedback: {\n    background: Record<Feedback, ColorContrast>;\n    border: Record<Feedback, ColorContrast>;\n    text: Record<Feedback, ColorContrast>;\n    icon: Record<Feedback, ColorContrast>;\n    positive: {\n      action: FeedbackActions;\n    };\n    negative: {\n      action: FeedbackActions;\n    };\n    information: {\n      action: FeedbackActions;\n    };\n    notice: {\n      action: FeedbackActions;\n    };\n    neutral: {\n      action: FeedbackActions;\n    };\n  };\n  surface: {\n    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;\n    border: Record<'normal' | 'subtle', ColorContrast>;\n    text: Record<TextTypes, ColorContrast>;\n    action: {\n      icon: ActionStatesWithContrast;\n    };\n  };\n  overlay: Record<'background', string>;\n  action: {\n    background: Omit<ActionVariants, 'link'>;\n    border: Omit<ActionVariants, 'link'>;\n    text: ActionVariants;\n    icon: ActionVariants;\n  };\n  badge: {\n    background: {\n      blue: ColorContrast;\n    };\n    border: {\n      blue: ColorContrast;\n    };\n    text: {\n      blue: ColorContrast;\n    };\n    icon: {\n      blue: ColorContrast;\n    };\n  };\n};\n\nexport type ColorsWithModes = Record<ColorSchemeModes, Colors>;\n\nexport type ThemeTokens = {\n  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object\n  border: Border;\n  breakpoints: Breakpoints;\n  colors: ColorsWithModes;\n  motion: Motion;\n  elevation: ElevationWithColorModes;\n  spacing: Spacing;\n  typography: TypographyWithPlatforms;\n};\n\nexport type SpacingValues = `${Spacing[keyof Spacing]}px`;\nexport type BorderWidthValues = `${Border['width'][keyof Border['width']]}px`;\nexport type BorderRadiusValues =\n  | `${Border['radius'][Exclude<keyof Border['radius'], 'round'>]}px`\n  | `${Border['radius'][Extract<keyof Border['radius'], 'round'>]}`;\n\nexport const colorSchemeNamesInput: ColorSchemeNamesInput[] = ['light', 'dark', 'system'];\n","type LogType = 'error' | 'warn' | 'log';\n\ntype LoggerOptions = {\n  message: string;\n  moduleName?: string;\n  type: LogType;\n};\n\ntype ThrowBladeErrorOptions = {\n  message: string;\n  moduleName?: string;\n};\n\nconst PREFIX = '[Blade]:';\n\nconst throwBladeError = ({ message, moduleName }: ThrowBladeErrorOptions): void | never => {\n  if (__DEV__) {\n    const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n    throw new Error(`${prefix} ${message}`);\n  }\n};\n\nconst getCommonLogger = (\n  type: LogType,\n): typeof console.log | typeof console.error | typeof console.warn => {\n  switch (type) {\n    case 'error':\n      return console.error;\n    case 'warn':\n      return console.warn;\n    case 'log':\n    default:\n      return console.log;\n  }\n};\n\nconst logger = ({ message, moduleName, type }: LoggerOptions): void => {\n  if (__DEV__) {\n    const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n    getCommonLogger(type)(`${prefix} ${message}`);\n  }\n};\n\nexport { throwBladeError, logger };\n","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\nimport { throwBladeError } from '~utils/logger';\n\nexport type UseColorScheme = {\n  colorScheme: ColorSchemeNames;\n  setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;\n};\n\nexport const useColorScheme = (\n  initialColorScheme: ColorSchemeNamesInput = 'light',\n): UseColorScheme => {\n  // if colorScheme defined use that else fallback to 'light'\n  const [colorSchemeState, setColorSchemeState] = useState<ColorSchemeNames>(() =>\n    getColorScheme(initialColorScheme),\n  );\n\n  const setColorScheme = useCallback(function setThemeMode(colorScheme: ColorSchemeNamesInput) {\n    if (__DEV__) {\n      if (!colorSchemeNamesInput.includes(colorScheme)) {\n        throwBladeError({\n          message: `Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\n          moduleName: 'useColorScheme',\n        });\n      }\n    }\n    setColorSchemeState(getColorScheme(colorScheme));\n  }, []);\n\n  return {\n    colorScheme: colorSchemeState,\n    setColorScheme,\n  };\n};\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport { getPlatformType } from '../getPlatformType';\n\nconst isReactNative = (): boolean => {\n  return getPlatformType() === 'react-native';\n};\n\nexport { isReactNative };\n","import type { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n  return 'web';\n};\n\nexport const isAndroid = (): boolean => false;\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n  export type Name = 'web';\n  /**\n   * Right now, the module resolution is set to resolve `.web` files,\n   *\n   * Thus Platform.Select<> type will return the `web` type\n   */\n  export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n    Options[Name],\n    'platform-web'\n  >;\n\n  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-native' | 'platform-all' }\n  >;\n\n  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-web' | 'platform-all' }\n  >;\n}\n\nexport { Platform };\n","import type { Platform } from '.';\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to web type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedWebType = castWebType('' as Example);\n * //    ^ string\n * ```\n */\nconst castWebType = <T>(value: T): Platform.CastWeb<T> => {\n  return value as Platform.CastWeb<typeof value>;\n};\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to native type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedNativeType = castNativeType('' as Example);\n * //    ^ number\n * ```\n */\nconst castNativeType = <T>(value: T): Platform.CastNative<T> => {\n  return value as Platform.CastNative<typeof value>;\n};\n\nexport { castWebType, castNativeType };\n","export function makeBorderSize<T extends number>(size: T): `${T}px`;\nexport function makeBorderSize<T extends string>(size: T): T;\nexport function makeBorderSize<T extends number | string>(size: T): `${T}px` | T {\n  if (typeof size === 'number') {\n    return `${size}px`;\n  }\n  return size;\n}\n","import type { MakeMotionTime } from './types';\nimport type { Platform } from '~utils';\n\nexport const makeMotionTime = <T extends number>(time: T): Platform.CastWeb<MakeMotionTime<T>> => {\n  return `${time}ms`;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","export const makeTypographySize = (size: number): `${number}rem` => {\n  const remValue = size / 16;\n  return `${remValue}rem`;\n};\n","export type MakeSize<T extends number> = `${T}px`;\n\nexport const makeSize = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","/**\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport const toTitleCase = (inputString: string): string =>\n  inputString\n    .toLowerCase()\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(' ');\n","import type { MutableRefObject } from 'react';\nimport { useEffect, useRef } from 'react';\n\n/**\n * a type-safe version of the `usePrevious` hook described here:\n * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport function usePrevious<T>(value: T): MutableRefObject<T | undefined>['current'] {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n}\n","import { useContext, createContext } from 'react';\nimport type { UseColorScheme } from '../../utils/useColorScheme';\nimport type { Theme } from './';\nimport type { TypographyPlatforms } from '~tokens/global';\nimport { throwBladeError } from '~utils/logger';\n\nexport type ThemeContext = UseColorScheme & {\n  theme: Theme;\n  platform: TypographyPlatforms;\n};\n\nexport const ThemeContext = createContext<ThemeContext>({\n  // @ts-expect-error set null\n  theme: null,\n  colorScheme: 'light',\n  platform: 'onDesktop',\n  setColorScheme: () => null,\n});\n\nconst useTheme = (): ThemeContext => {\n  const themeContext = useContext<ThemeContext>(ThemeContext);\n  if (__DEV__) {\n    if (!themeContext.theme) {\n      throwBladeError({\n        message: 'BladeProvider is missing theme',\n        moduleName: 'BladeProvider',\n      });\n    }\n    if (themeContext === undefined) {\n      throwBladeError({\n        message: 'useTheme must be used within BladeProvider',\n        moduleName: 'BladeProvider',\n      });\n    }\n  }\n  return themeContext;\n};\n\nexport default useTheme;\n"],"names":["getColorScheme","colorScheme","colorSchemeMediaQueryMap","light","dark","system","supportsMatchMedia","window","matchMedia","matches","getMediaQuery","min","max","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","breakpoints","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","index","breakpointsArray","token","screenSize","maxValue","mediaQuery","undefined","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","find","media","useState","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","colorSchemeNamesInput","PREFIX","throwBladeError","message","moduleName","prefix","Error","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","toString","isReactNative","getOS","isAndroid","Platform","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","remValue","makeSize","toTitleCase","inputString","toLowerCase","split","word","charAt","toUpperCase","slice","join","usePrevious","ref","useRef","current","ThemeContext","createContext","theme","useTheme","themeContext","useContext"],"mappings":"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"}
+{"version":3,"file":"index.development.web.js","sources":["../../src/utils/getColorScheme/getColorScheme.web.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/tokens/theme/theme.ts","../../src/utils/logger/logger.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.web.ts","../../src/utils/platform/platform.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.web.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.web.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there\n  const colorSchemeMediaQueryMap = {\n    light: '(prefers-color-scheme: light)',\n    dark: '(prefers-color-scheme: dark)',\n    system: 'default',\n  };\n  const supportsMatchMedia =\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\n  if (colorScheme === 'light' || colorScheme === 'dark') {\n    return colorScheme;\n  }\n\n  if (\n    colorScheme === 'system' &&\n    supportsMatchMedia &&\n    window.matchMedia(colorSchemeMediaQueryMap.dark).matches\n  ) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n","export const getMediaQuery = ({ min, max }: { min: number; max?: number }): string => {\n  return `screen and (min-width: ${min}px)${max ? ` and (max-width: ${max}px)` : ''}`;\n};\n","export type PlatformTypes = 'browser' | 'node' | 'react-native' | 'unknown';\n\nexport const getPlatformType = (): PlatformTypes => {\n  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n    return 'react-native';\n  }\n\n  if (typeof document !== 'undefined') {\n    return 'browser';\n  }\n\n  if (typeof process !== 'undefined') {\n    return 'node';\n  }\n\n  return 'unknown';\n};\n","/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { useEffect, useState, useCallback, useMemo } from 'react';\nimport { getPlatformType } from '../getPlatformType';\nimport { getMediaQuery } from '../getMediaQuery';\nimport type { Breakpoints } from '~tokens/global';\n\nconst deviceType = {\n  desktop: 'desktop',\n  mobile: 'mobile',\n} as const;\n\ntype DeviceType = keyof typeof deviceType;\ntype Breakpoint = keyof Breakpoints | undefined;\n\ntype BreakpointAndDevice = {\n  matchedBreakpoint: Breakpoint;\n  matchedDeviceType: DeviceType;\n};\n\nexport const useBreakpoint = ({\n  breakpoints,\n}: {\n  breakpoints: Breakpoints;\n}): BreakpointAndDevice => {\n  const supportsMatchMedia =\n    typeof document !== 'undefined' &&\n    typeof window !== 'undefined' &&\n    typeof window?.matchMedia === 'function';\n\n  const breakpointsTokenAndQueryCollection = useMemo(\n    () =>\n      (supportsMatchMedia\n        ? Object.entries(breakpoints).map(([token, screenSize], index, breakpointsArray) => {\n            const min = screenSize;\n            const maxValue = breakpointsArray[index + 1]?.[1];\n            const mediaQuery = getMediaQuery({ min, max: maxValue ? maxValue - 1 : undefined });\n            return { token, screenSize, mediaQuery };\n          })\n        : []) as {\n        token: keyof Breakpoints;\n        screenSize: number;\n        mediaQuery: string;\n      }[],\n    [breakpoints, supportsMatchMedia],\n  );\n\n  const getMatchedDeviceType = useCallback((matchedBreakpoint: Breakpoint): DeviceType => {\n    let matchedDeviceType: DeviceType = deviceType.mobile;\n    const platform = getPlatformType();\n    if (platform === 'react-native') {\n      matchedDeviceType = deviceType.mobile;\n    } else if (platform === 'browser') {\n      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {\n        // tablet is also categorised as mobile\n        matchedDeviceType = deviceType.mobile;\n      } else {\n        matchedDeviceType = deviceType.desktop;\n      }\n    } else if (platform === 'node') {\n      //@TODO: Check for useragent for node\n      matchedDeviceType = deviceType.desktop;\n    }\n    return matchedDeviceType;\n  }, []);\n\n  const getMatchedBreakpoint = useCallback(\n    (event?: MediaQueryListEvent): Breakpoint => {\n      const matchedBreakpoint =\n        breakpointsTokenAndQueryCollection.find(({ mediaQuery = '' }) => {\n          // this will run whenever mediaQuery change event is triggered\n          if (event?.media === mediaQuery) {\n            return true;\n          }\n          // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object\n          if (window.matchMedia(mediaQuery).matches) {\n            return true;\n          }\n          return false;\n        })?.token ?? undefined;\n\n      return matchedBreakpoint;\n    },\n    [breakpointsTokenAndQueryCollection],\n  );\n\n  const [breakpointAndDevice, setBreakpointAndDevice] = useState(() => {\n    const matchedBreakpoint = getMatchedBreakpoint();\n    const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n    return {\n      matchedBreakpoint,\n      matchedDeviceType,\n    };\n  });\n\n  useEffect(() => {\n    if (!supportsMatchMedia) {\n      return undefined;\n    }\n\n    const handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      setBreakpointAndDevice(() => {\n        const matchedBreakpoint = getMatchedBreakpoint(event);\n        const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n\n        return { matchedBreakpoint, matchedDeviceType };\n      });\n    };\n\n    const mediaQueryInstances = breakpointsTokenAndQueryCollection.map(({ mediaQuery = '' }) => {\n      const mediaQueryInstance = window.matchMedia(mediaQuery);\n      /**\n       * the mediaquery event listener is available on mediaQuery instances and not `window`\n       * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.\n       */\n      if (mediaQueryInstance.addEventListener) {\n        mediaQueryInstance.addEventListener('change', handleMediaQueryChange);\n      } else {\n        // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener\n        mediaQueryInstance.addListener(handleMediaQueryChange);\n      }\n      return mediaQueryInstance;\n    });\n\n    return (): void => {\n      mediaQueryInstances.forEach((mediaQueryInstance) => {\n        if (mediaQueryInstance.removeEventListener) {\n          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);\n        } else {\n          // In older browsers MediaQueryList do not yet inherit from EventTarget, So using removeListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener\n          mediaQueryInstance.removeListener(handleMediaQueryChange);\n        }\n      });\n    };\n  }, [\n    breakpointsTokenAndQueryCollection,\n    getMatchedBreakpoint,\n    getMatchedDeviceType,\n    supportsMatchMedia,\n  ]);\n\n  // @TODO: handle SSR scenarios\n  return breakpointAndDevice;\n};\n","import type { StringWithAutocomplete } from '~utils/types';\nimport type {\n  Border,\n  Breakpoints,\n  Motion,\n  Spacing,\n  TypographyWithPlatforms,\n  ElevationWithColorModes,\n} from '~tokens/global';\n\nexport type ColorSchemeNames = 'dark' | 'light';\nexport type ColorSchemeNamesInput = ColorSchemeNames | 'system';\n\nexport type ColorSchemeModes = 'onDark' | 'onLight';\n\nexport type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';\n\nexport type ColorContrastTypes = 'low' | 'high';\n\nexport type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';\n\nexport type ColorContrast = {\n  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;\n};\n\n// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens\nexport type SurfaceLevels = 1 | 2 | 3;\n\nexport type ActionStates = {\n  default: string;\n  hover: string;\n  focus: string;\n  active: string;\n  disabled: string;\n};\n\nexport type LinkActionStates = ActionStates & {\n  visited: string;\n};\n\nexport type ActionStatesWithContrast = {\n  default: ColorContrast;\n  hover: ColorContrast;\n  focus: ColorContrast;\n  active: ColorContrast;\n  disabled: ColorContrast;\n};\n\nexport type LinkActionStatesWithContrast = ActionStatesWithContrast & {\n  visited: ColorContrast;\n};\n\nexport type ActionVariants = {\n  primary: ActionStates;\n  secondary: ActionStates;\n  tertiary: ActionStates;\n  link: LinkActionStates;\n};\n\nexport type ActionVariantsWithContrast = {\n  primary: ActionStatesWithContrast;\n  secondary: ActionStatesWithContrast;\n  tertiary: ActionStatesWithContrast;\n  link: ActionStatesWithContrast;\n};\n\n// export type ActionProperties = {\n//   background: ActionVariants;\n//   border: ActionVariants;\n//   text: ActionVariants;\n//   icon: ActionVariants;\n// };\n\nexport type FeedbackActions = {\n  background: Pick<ActionVariantsWithContrast, 'primary'>;\n  border: Pick<ActionVariantsWithContrast, 'primary'>;\n  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n};\n\nexport type Colors = {\n  brand: {\n    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;\n    secondary: Record<500, string>;\n    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;\n  };\n  feedback: {\n    background: Record<Feedback, ColorContrast>;\n    border: Record<Feedback, ColorContrast>;\n    text: Record<Feedback, ColorContrast>;\n    icon: Record<Feedback, ColorContrast>;\n    positive: {\n      action: FeedbackActions;\n    };\n    negative: {\n      action: FeedbackActions;\n    };\n    information: {\n      action: FeedbackActions;\n    };\n    notice: {\n      action: FeedbackActions;\n    };\n    neutral: {\n      action: FeedbackActions;\n    };\n  };\n  surface: {\n    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;\n    border: Record<'normal' | 'subtle', ColorContrast>;\n    text: Record<TextTypes, ColorContrast>;\n    action: {\n      icon: ActionStatesWithContrast;\n    };\n  };\n  overlay: Record<'background', string>;\n  action: {\n    background: Omit<ActionVariants, 'link'>;\n    border: Omit<ActionVariants, 'link'>;\n    text: ActionVariants;\n    icon: ActionVariants;\n  };\n  badge: {\n    background: {\n      blue: ColorContrast;\n    };\n    border: {\n      blue: ColorContrast;\n    };\n    text: {\n      blue: ColorContrast;\n    };\n    icon: {\n      blue: ColorContrast;\n    };\n  };\n};\n\nexport type ColorsWithModes = Record<ColorSchemeModes, Colors>;\n\nexport type ThemeTokens = {\n  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object\n  border: Border;\n  breakpoints: Breakpoints;\n  colors: ColorsWithModes;\n  motion: Motion;\n  elevation: ElevationWithColorModes;\n  spacing: Spacing;\n  typography: TypographyWithPlatforms;\n};\n\nexport type SpacingValues = `${Spacing[keyof Spacing]}px`;\nexport type BorderWidthValues = `${Border['width'][keyof Border['width']]}px`;\nexport type BorderRadiusValues =\n  | `${Border['radius'][Exclude<keyof Border['radius'], 'round'>]}px`\n  | `${Border['radius'][Extract<keyof Border['radius'], 'round'>]}`;\n\nexport const colorSchemeNamesInput: ColorSchemeNamesInput[] = ['light', 'dark', 'system'];\n","type LogType = 'error' | 'warn' | 'log';\n\ntype LoggerOptions = {\n  message: string;\n  moduleName?: string;\n  type: LogType;\n};\n\ntype ThrowBladeErrorOptions = {\n  message: string;\n  moduleName?: string;\n};\n\nconst PREFIX = '[Blade]:';\n\nconst throwBladeError = ({ message, moduleName }: ThrowBladeErrorOptions): void | never => {\n  if (__DEV__) {\n    const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n    throw new Error(`${prefix} ${message}`);\n  }\n};\n\nconst getCommonLogger = (\n  type: LogType,\n): typeof console.log | typeof console.error | typeof console.warn => {\n  switch (type) {\n    case 'error':\n      return console.error;\n    case 'warn':\n      return console.warn;\n    case 'log':\n    default:\n      return console.log;\n  }\n};\n\nconst logger = ({ message, moduleName, type }: LoggerOptions): void => {\n  if (__DEV__) {\n    const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n    getCommonLogger(type)(`${prefix} ${message}`);\n  }\n};\n\nexport { throwBladeError, logger };\n","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\nimport { throwBladeError } from '~utils/logger';\n\nexport type UseColorScheme = {\n  colorScheme: ColorSchemeNames;\n  setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;\n};\n\nexport const useColorScheme = (\n  initialColorScheme: ColorSchemeNamesInput = 'light',\n): UseColorScheme => {\n  // if colorScheme defined use that else fallback to 'light'\n  const [colorSchemeState, setColorSchemeState] = useState<ColorSchemeNames>(() =>\n    getColorScheme(initialColorScheme),\n  );\n\n  const setColorScheme = useCallback(function setThemeMode(colorScheme: ColorSchemeNamesInput) {\n    if (__DEV__) {\n      if (!colorSchemeNamesInput.includes(colorScheme)) {\n        throwBladeError({\n          message: `Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\n          moduleName: 'useColorScheme',\n        });\n      }\n    }\n    setColorSchemeState(getColorScheme(colorScheme));\n  }, []);\n\n  return {\n    colorScheme: colorSchemeState,\n    setColorScheme,\n  };\n};\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport { getPlatformType } from '../getPlatformType';\n\nconst isReactNative = (): boolean => {\n  return getPlatformType() === 'react-native';\n};\n\nexport { isReactNative };\n","import type { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n  return 'web';\n};\n\nexport const isAndroid = (): boolean => false;\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n  export type Name = 'web';\n  /**\n   * Right now, the module resolution is set to resolve `.web` files,\n   *\n   * Thus Platform.Select<> type will return the `web` type\n   */\n  export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n    Options[Name],\n    'platform-web'\n  >;\n\n  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-native' | 'platform-all' }\n  >;\n\n  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-web' | 'platform-all' }\n  >;\n}\n\nexport { Platform };\n","import type { Platform } from '.';\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to web type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedWebType = castWebType('' as Example);\n * //    ^ string\n * ```\n */\nconst castWebType = <T>(value: T): Platform.CastWeb<T> => {\n  return value as Platform.CastWeb<typeof value>;\n};\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to native type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedNativeType = castNativeType('' as Example);\n * //    ^ number\n * ```\n */\nconst castNativeType = <T>(value: T): Platform.CastNative<T> => {\n  return value as Platform.CastNative<typeof value>;\n};\n\nexport { castWebType, castNativeType };\n","export function makeBorderSize<T extends number>(size: T): `${T}px`;\nexport function makeBorderSize<T extends string>(size: T): T;\nexport function makeBorderSize<T extends number | string>(size: T): `${T}px` | T {\n  if (typeof size === 'number') {\n    return `${size}px`;\n  }\n  return size;\n}\n","import type { MakeMotionTime } from './types';\nimport type { Platform } from '~utils';\n\nexport const makeMotionTime = <T extends number>(time: T): Platform.CastWeb<MakeMotionTime<T>> => {\n  return `${time}ms`;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","export const makeTypographySize = (size: number): `${number}rem` => {\n  const remValue = size / 16;\n  return `${remValue}rem`;\n};\n","export type MakeSize<T extends number> = `${T}px`;\n\nexport const makeSize = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","/**\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport const toTitleCase = (inputString: string): string =>\n  inputString\n    .toLowerCase()\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(' ');\n","import type { MutableRefObject } from 'react';\nimport { useEffect, useRef } from 'react';\n\n/**\n * a type-safe version of the `usePrevious` hook described here:\n * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport function usePrevious<T>(value: T): MutableRefObject<T | undefined>['current'] {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n}\n","import { useContext, createContext } from 'react';\nimport type { UseColorScheme } from '../../utils/useColorScheme';\nimport type { Theme } from './';\nimport type { TypographyPlatforms } from '~tokens/global';\nimport { throwBladeError } from '~utils/logger';\n\nexport type ThemeContext = UseColorScheme & {\n  theme: Theme;\n  platform: TypographyPlatforms;\n};\n\nexport const ThemeContext = createContext<ThemeContext>({\n  // @ts-expect-error set null\n  theme: null,\n  colorScheme: 'light',\n  platform: 'onDesktop',\n  setColorScheme: () => null,\n});\n\nconst useTheme = (): ThemeContext => {\n  const themeContext = useContext<ThemeContext>(ThemeContext);\n  if (__DEV__) {\n    if (!themeContext.theme) {\n      throwBladeError({\n        message: 'BladeProvider is missing theme',\n        moduleName: 'BladeProvider',\n      });\n    }\n    if (themeContext === undefined) {\n      throwBladeError({\n        message: 'useTheme must be used within BladeProvider',\n        moduleName: 'BladeProvider',\n      });\n    }\n  }\n  return themeContext;\n};\n\nexport default useTheme;\n"],"names":["getColorScheme","colorScheme","arguments","length","undefined","colorSchemeMediaQueryMap","light","dark","system","supportsMatchMedia","window","matchMedia","matches","getMediaQuery","_ref","min","max","concat","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","_window","breakpoints","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","_ref2","index","breakpointsArray","_breakpointsArray","_ref3","_slicedToArray","token","screenSize","maxValue","mediaQuery","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","_breakpointsTokenAndQ","_breakpointsTokenAndQ2","find","_ref4","_ref4$mediaQuery","media","_useState","useState","_useState2","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","_ref5","_ref5$mediaQuery","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","colorSchemeNamesInput","PREFIX","throwBladeError","message","moduleName","prefix","Error","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","toString","isReactNative","getOS","isAndroid","Platform","_Platform","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","remValue","makeSize","toTitleCase","inputString","toLowerCase","split","word","charAt","toUpperCase","slice","join","usePrevious","ref","useRef","current","ThemeContext","createContext","theme","useTheme","themeContext","useContext"],"mappings":"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"}

package/build/utils/index.native.d.ts

@@ -418,10 +418,10 @@ type Delay = {
   xlong: 5000;
 };
 
-type EasingFunctionFactory = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
+type EasingFactoryFn = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`
 type EasingType<Value extends string> = Platform$1.Select<{
   web: Value;
-  native: EasingFunctionFactory;
+  native: EasingFactoryFn;
 }>;
 
 type Easing = {
@@ -429,49 +429,49 @@ type Easing = {
   standard: {
     /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
     /** `cubic-bezier(0.3, 0, 0.2, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
     /** `cubic-bezier(0.5, 0, 0, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
     /** `cubic-bezier(1, 0.5, 0, 0.5)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
   };
   /** Easings for all entrance animations*/
   entrance: {
     /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
     /** `cubic-bezier(0, 0, 0.2, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
     /** `cubic-bezier(0, 0, 0, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
   };
   /** Easings for all exit animations*/
   exit: {
     /** `cubic-bezier(0.7, 0, 0.5, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
     /** `cubic-bezier(0.17, 0, 1, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
     /** `cubic-bezier(0.5, 0, 1, 1)`
      *
-     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
     revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
   };
 };

package/build/utils/index.native.js

@@ -4,7 +4,7 @@ import { useMemo, useCallback, useState, useEffect, useRef, createContext, useCo
 
 var getColorScheme=function getColorScheme(){var colorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';if(colorScheme==='light'||colorScheme==='dark'){return colorScheme;}if(colorScheme==='system'){var _Appearance$getColorS;return (_Appearance$getColorS=Appearance.getColorScheme())!=null?_Appearance$getColorS:'light';}return 'light';};
 
-var getMediaQuery=function getMediaQuery(_ref){var min=_ref.min,max=_ref.max;return "screen and (min-width: "+min+"px)"+(max?" and (max-width: "+max+"px)":'');};
+var getMediaQuery=function getMediaQuery(_ref){var min=_ref.min,max=_ref.max;return `screen and (min-width: ${min}px)${max?` and (max-width: ${max}px)`:''}`;};
 
 var getPlatformType=function getPlatformType(){if(typeof navigator!=='undefined'&&navigator.product==='ReactNative'){return 'react-native';}if(typeof document!=='undefined'){return 'browser';}if(typeof process!=='undefined'){return 'node';}return 'unknown';};
 
@@ -12,9 +12,9 @@ var deviceType={desktop:'desktop',mobile:'mobile'};var useBreakpoint=function us
 
 var colorSchemeNamesInput=['light','dark','system'];
 
-var PREFIX='[Blade]:';var throwBladeError=function throwBladeError(_ref){var message=_ref.message,moduleName=_ref.moduleName;if(__DEV__){var prefix=moduleName?"[Blade: "+moduleName+"]:":PREFIX;throw new Error(prefix+" "+message);}};
+var PREFIX='[Blade]:';var throwBladeError=function throwBladeError(_ref){var message=_ref.message,moduleName=_ref.moduleName;if(__DEV__){var prefix=moduleName?`[Blade: ${moduleName}]:`:PREFIX;throw new Error(`${prefix} ${message}`);}};
 
-var useColorScheme=function useColorScheme(){var initialColorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';var _useState=useState(function(){return getColorScheme(initialColorScheme);}),_useState2=_slicedToArray(_useState,2),colorSchemeState=_useState2[0],setColorSchemeState=_useState2[1];var setColorScheme=useCallback(function setThemeMode(colorScheme){if(__DEV__){if(!colorSchemeNamesInput.includes(colorScheme)){throwBladeError({message:"Expected color scheme to be one of ["+colorSchemeNamesInput.toString()+"] but received "+colorScheme,moduleName:'useColorScheme'});}}setColorSchemeState(getColorScheme(colorScheme));},[]);return {colorScheme:colorSchemeState,setColorScheme:setColorScheme};};
+var useColorScheme=function useColorScheme(){var initialColorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';var _useState=useState(function(){return getColorScheme(initialColorScheme);}),_useState2=_slicedToArray(_useState,2),colorSchemeState=_useState2[0],setColorSchemeState=_useState2[1];var setColorScheme=useCallback(function setThemeMode(colorScheme){if(__DEV__){if(!colorSchemeNamesInput.includes(colorScheme)){throwBladeError({message:`Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,moduleName:'useColorScheme'});}}setColorSchemeState(getColorScheme(colorScheme));},[]);return {colorScheme:colorSchemeState,setColorScheme:setColorScheme};};
 
 var isReactNative=function isReactNative(){return getPlatformType()==='react-native';};
 
@@ -24,15 +24,15 @@ var Platform;(function(_Platform){})(Platform||(Platform={}));
 
 var castWebType=function castWebType(value){return value;};var castNativeType=function castNativeType(value){return value;};
 
-function makeBorderSize(size){if(typeof size==='number'){return size+"px";}return size;}
+function makeBorderSize(size){if(typeof size==='number'){return `${size}px`;}return size;}
 
 var makeMotionTime=function makeMotionTime(time){return time;};
 
-var makeSpace=function makeSpace(size){return size+"px";};
+var makeSpace=function makeSpace(size){return `${size}px`;};
 
-var makeTypographySize=function makeTypographySize(size){return size+"px";};
+var makeTypographySize=function makeTypographySize(size){return `${size}px`;};
 
-var makeSize=function makeSize(size){return size+"px";};
+var makeSize=function makeSize(size){return `${size}px`;};
 
 var toTitleCase=function toTitleCase(inputString){return inputString.toLowerCase().split(' ').map(function(word){return word.charAt(0).toUpperCase()+word.slice(1);}).join(' ');};