@razorpay/blade 9.4.1 → 9.5.1

package/build/utils/index.d.ts

@@ -369,11 +369,15 @@ declare const ThemeContext = createContext<ThemeContext>({
 
 declare const useTheme = (): ThemeContext => {
   const themeContext = useContext<ThemeContext>(ThemeContext);
-  if (!themeContext.theme) {
-    throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);
-  }
-  if (themeContext === undefined) {
-    throw new Error(`[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`);
+  if (__DEV__) {
+    if (!themeContext.theme) {
+      throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);
+    }
+    if (themeContext === undefined) {
+      throw new Error(
+        `[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`,
+      );
+    }
   }
   return themeContext;
 };

package/build/utils/{index.web.js → index.development.web.js}

@@ -199,8 +199,10 @@ var useColorScheme = function useColorScheme() {
       setColorSchemeState = _useState2[1];
 
   var setColorScheme = useCallback(function setThemeMode(colorScheme) {
-    if (!colorSchemeNamesInput.includes(colorScheme)) {
-      throw new Error("[useColorScheme]: Expected color scheme to be one of [".concat(colorSchemeNamesInput.toString(), "] but received ").concat(colorScheme));
+    {
+      if (!colorSchemeNamesInput.includes(colorScheme)) {
+        throw new Error("[useColorScheme]: Expected color scheme to be one of [".concat(colorSchemeNamesInput.toString(), "] but received ").concat(colorScheme));
+      }
     }
 
     setColorSchemeState(getColorScheme(colorScheme));
@@ -327,16 +329,18 @@ var ThemeContext = /*#__PURE__*/createContext({
 var useTheme = function useTheme() {
   var themeContext = useContext(ThemeContext);
 
-  if (!themeContext.theme) {
-    throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");
-  }
+  {
+    if (!themeContext.theme) {
+      throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");
+    }
 
-  if (themeContext === undefined) {
-    throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");
+    if (themeContext === undefined) {
+      throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");
+    }
   }
 
   return themeContext;
 };
 
 export { Platform, ThemeContext, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious, useTheme };
-//# sourceMappingURL=index.web.js.map
+//# sourceMappingURL=index.development.web.js.map

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

@@ -0,0 +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/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","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\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        throw new Error(\n          `[useColorScheme]: Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\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';\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      throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);\n    }\n    if (themeContext === undefined) {\n      throw new Error(\n        `[@razorpay/blade:BladeProvider]: useTheme must be used within 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","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","Error","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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"}

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

@@ -369,11 +369,15 @@ declare const ThemeContext = createContext<ThemeContext>({
 
 declare const useTheme = (): ThemeContext => {
   const themeContext = useContext<ThemeContext>(ThemeContext);
-  if (!themeContext.theme) {
-    throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);
-  }
-  if (themeContext === undefined) {
-    throw new Error(`[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`);
+  if (__DEV__) {
+    if (!themeContext.theme) {
+      throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);
+    }
+    if (themeContext === undefined) {
+      throw new Error(
+        `[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`,
+      );
+    }
   }
   return themeContext;
 };

package/build/utils/index.native.js

@@ -12,7 +12,7 @@ var deviceType={desktop:'desktop',mobile:'mobile'};var useBreakpoint=function us
 
 var colorSchemeNamesInput=['light','dark','system'];
 
-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(!colorSchemeNamesInput.includes(colorScheme)){throw new Error("[useColorScheme]: Expected color scheme to be one of ["+colorSchemeNamesInput.toString()+"] but received "+colorScheme);}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)){throw new Error("[useColorScheme]: Expected color scheme to be one of ["+colorSchemeNamesInput.toString()+"] but received "+colorScheme);}}setColorSchemeState(getColorScheme(colorScheme));},[]);return {colorScheme:colorSchemeState,setColorScheme:setColorScheme};};
 
 var isReactNative=function isReactNative(){return getPlatformType()==='react-native';};
 
@@ -36,7 +36,7 @@ var toTitleCase=function toTitleCase(inputString){return inputString.toLowerCase
 
 function usePrevious(value){var ref=useRef();useEffect(function(){ref.current=value;},[value]);return ref.current;}
 
-var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDesktop',setColorScheme:function setColorScheme(){return null;}});var useTheme=function useTheme(){var themeContext=useContext(ThemeContext);if(!themeContext.theme){throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");}if(themeContext===undefined){throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");}return themeContext;};
+var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDesktop',setColorScheme:function setColorScheme(){return null;}});var useTheme=function useTheme(){var themeContext=useContext(ThemeContext);if(__DEV__){if(!themeContext.theme){throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");}if(themeContext===undefined){throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");}}return themeContext;};
 
 export { Platform, ThemeContext, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious, useTheme };
 //# sourceMappingURL=index.native.js.map

package/build/utils/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","sources":["../../src/utils/getColorScheme/getColorScheme.native.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/tokens/theme/theme.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.native.ts","../../src/utils/platform/platform.native.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.native.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.native.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import { Appearance } from 'react-native';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n  // @TODO: convert this to hook as Appearance API also adds an eventListener which subscribes to the colorscheme changes on the device\n  if (colorScheme === 'light' || colorScheme === 'dark') {\n    return colorScheme;\n  }\n\n  if (colorScheme === 'system') {\n    return Appearance.getColorScheme() ?? 'light';\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","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\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 (!colorSchemeNamesInput.includes(colorScheme)) {\n      throw new Error(\n        `[useColorScheme]: Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\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 { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n  return Platform.OS;\n};\n\nexport const isAndroid = (): boolean => getOS() === 'android';\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n  export type Name = 'native';\n  /**\n   * Right now, the module resolution is set to resolve `.native` files,\n   *\n   * Thus Platform.Select<> type will return the `native` type\n   */\n  export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n    Options[Name],\n    'platform-native'\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>(\n  time: T,\n): Platform.CastNative<MakeMotionTime<T>> => {\n  return time;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","export const makeTypographySize = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\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';\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 (!themeContext.theme) {\n    throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);\n  }\n  if (themeContext === undefined) {\n    throw new Error(`[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`);\n  }\n  return themeContext;\n};\n\nexport default useTheme;\n"],"names":["getColorScheme","colorScheme","Appearance","getMediaQuery","min","max","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","breakpoints","supportsMatchMedia","window","matchMedia","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","index","breakpointsArray","token","screenSize","maxValue","mediaQuery","undefined","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","find","media","matches","useState","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","colorSchemeNamesInput","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","Error","toString","isReactNative","getOS","Platform","OS","isAndroid","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","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.native.js","sources":["../../src/utils/getColorScheme/getColorScheme.native.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/tokens/theme/theme.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.native.ts","../../src/utils/platform/platform.native.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.native.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.native.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import { Appearance } from 'react-native';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n  // @TODO: convert this to hook as Appearance API also adds an eventListener which subscribes to the colorscheme changes on the device\n  if (colorScheme === 'light' || colorScheme === 'dark') {\n    return colorScheme;\n  }\n\n  if (colorScheme === 'system') {\n    return Appearance.getColorScheme() ?? 'light';\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","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\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        throw new Error(\n          `[useColorScheme]: Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\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 { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n  return Platform.OS;\n};\n\nexport const isAndroid = (): boolean => getOS() === 'android';\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n  export type Name = 'native';\n  /**\n   * Right now, the module resolution is set to resolve `.native` files,\n   *\n   * Thus Platform.Select<> type will return the `native` type\n   */\n  export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n    Options[Name],\n    'platform-native'\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>(\n  time: T,\n): Platform.CastNative<MakeMotionTime<T>> => {\n  return time;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","export const makeTypographySize = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\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';\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      throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);\n    }\n    if (themeContext === undefined) {\n      throw new Error(\n        `[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`,\n      );\n    }\n  }\n  return themeContext;\n};\n\nexport default useTheme;\n"],"names":["getColorScheme","colorScheme","Appearance","getMediaQuery","min","max","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","breakpoints","supportsMatchMedia","window","matchMedia","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","index","breakpointsArray","token","screenSize","maxValue","mediaQuery","undefined","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","find","media","matches","useState","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","colorSchemeNamesInput","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","__DEV__","Error","toString","isReactNative","getOS","Platform","OS","isAndroid","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","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.production.web.js

@@ -0,0 +1,322 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useMemo, useCallback, useState, useEffect, useRef, createContext, useContext } from 'react';
+
+var getColorScheme = function getColorScheme() {
+  var colorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
+  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there
+  var colorSchemeMediaQueryMap = {
+    light: '(prefers-color-scheme: light)',
+    dark: '(prefers-color-scheme: dark)',
+    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;
+  return "screen and (min-width: ".concat(min, "px)").concat(max ? " and (max-width: ".concat(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';
+};
+
+var deviceType = {
+  desktop: 'desktop',
+  mobile: 'mobile'
+};
+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];
+
+      var min = screenSize;
+      var maxValue = (_breakpointsArray = breakpointsArray[index + 1]) === null || _breakpointsArray === void 0 ? void 0 : _breakpointsArray[1];
+      var mediaQuery = getMediaQuery({
+        min: min,
+        max: maxValue ? maxValue - 1 : undefined
+      });
+      return {
+        token: token,
+        screenSize: screenSize,
+        mediaQuery: mediaQuery
+      };
+    }) : [];
+  }, [breakpoints, supportsMatchMedia]);
+  var getMatchedDeviceType = useCallback(function (matchedBreakpoint) {
+    var matchedDeviceType = deviceType.mobile;
+    var platform = getPlatformType();
+
+    if (platform === 'react-native') {
+      matchedDeviceType = deviceType.mobile;
+    } else if (platform === 'browser') {
+      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {
+        // tablet is also categorised as mobile
+        matchedDeviceType = deviceType.mobile;
+      } else {
+        matchedDeviceType = deviceType.desktop;
+      }
+    } else if (platform === 'node') {
+      //@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;
+
+      // 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];
+
+  useEffect(function () {
+    if (!supportsMatchMedia) {
+      return undefined;
+    }
+
+    var handleMediaQueryChange = function handleMediaQueryChange(event) {
+      setBreakpointAndDevice(function () {
+        var matchedBreakpoint = getMatchedBreakpoint(event);
+        var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
+        return {
+          matchedBreakpoint: matchedBreakpoint,
+          matchedDeviceType: matchedDeviceType
+        };
+      });
+    };
+
+    var mediaQueryInstances = breakpointsTokenAndQueryCollection.map(function (_ref5) {
+      var _ref5$mediaQuery = _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 () {
+      mediaQueryInstances.forEach(function (mediaQueryInstance) {
+        if (mediaQueryInstance.removeEventListener) {
+          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);
+        } else {
+          // 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
+          mediaQueryInstance.removeListener(handleMediaQueryChange);
+        }
+      });
+    };
+  }, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]); // @TODO: handle SSR scenarios
+
+  return breakpointAndDevice;
+};
+
+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];
+
+  var setColorScheme = useCallback(function setThemeMode(colorScheme) {
+
+    setColorSchemeState(getColorScheme(colorScheme));
+  }, []);
+  return {
+    colorScheme: colorSchemeState,
+    setColorScheme: setColorScheme
+  };
+};
+
+/* eslint-disable @typescript-eslint/no-namespace */
+
+var isReactNative = function isReactNative() {
+  return getPlatformType() === 'react-native';
+};
+
+var getOS = function getOS() {
+  return 'web';
+};
+var isAndroid = function isAndroid() {
+  return false;
+};
+
+/* eslint-disable @typescript-eslint/no-namespace */
+var Platform;
+
+(function (_Platform) {})(Platform || (Platform = {}));
+
+/**
+ * @description
+ *
+ * Casts a Platform.Select<> type to web type
+ *
+ * @example
+ *
+ * ```ts
+ * type Example = Platform.Select<{ web: string; native: number }>;
+ *
+ * const extractedWebType = castWebType('' as Example);
+ * //    ^ string
+ * ```
+ */
+var castWebType = function castWebType(value) {
+  return value;
+};
+/**
+ * @description
+ *
+ * Casts a Platform.Select<> type to native type
+ *
+ * @example
+ *
+ * ```ts
+ * type Example = Platform.Select<{ web: string; native: number }>;
+ *
+ * const extractedNativeType = castNativeType('' as Example);
+ * //    ^ number
+ * ```
+ */
+
+
+var castNativeType = function castNativeType(value) {
+  return value;
+};
+
+function makeBorderSize(size) {
+  if (typeof size === 'number') {
+    return "".concat(size, "px");
+  }
+
+  return size;
+}
+
+var makeMotionTime = function makeMotionTime(time) {
+  return "".concat(time, "ms");
+};
+
+var makeSpace = function makeSpace(size) {
+  return "".concat(size, "px");
+};
+
+var makeTypographySize = function makeTypographySize(size) {
+  var remValue = size / 16;
+  return "".concat(remValue, "rem");
+};
+
+var makeSize = function makeSize(size) {
+  return "".concat(size, "px");
+};
+
+/**
+ * @deprecated This utility will be deprecated in subsequent version.
+ */
+var toTitleCase = function toTitleCase(inputString) {
+  return inputString.toLowerCase().split(' ').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+
+/**
+ * a type-safe version of the `usePrevious` hook described here:
+ * @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 () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+var ThemeContext = /*#__PURE__*/createContext({
+  // @ts-expect-error set null
+  theme: null,
+  colorScheme: 'light',
+  platform: 'onDesktop',
+  setColorScheme: function setColorScheme() {
+    return null;
+  }
+});
+
+var useTheme = function useTheme() {
+  var themeContext = useContext(ThemeContext);
+
+  return themeContext;
+};
+
+export { Platform, ThemeContext, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious, useTheme };
+//# sourceMappingURL=index.production.web.js.map