@razorpay/blade 9.4.1 → 9.5.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.production.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/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 { 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","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","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":";;;IAEaA,cAAc,GAAG,SAAjBA,cAAiB,GAAoE;AAAA,MAAnEC,WAAmE,uEAA9B,OAA8B;AAChG;AACA,MAAMC,wBAAwB,GAAG;AAC/BC,IAAAA,KAAK,EAAE,+BADwB;AAE/BC,IAAAA,IAAI,EAAE,8BAFyB;AAG/BC,IAAAA,MAAM,EAAE;AAHuB,GAAjC;AAKA,MAAMC,kBAAkB,GACtB,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,OAAOA,MAAM,CAACC,UAAd,KAA6B,UADhE;;AAGA,MAAIP,WAAW,KAAK,OAAhB,IAA2BA,WAAW,KAAK,MAA/C,EAAuD;AACrD,WAAOA,WAAP;AACD;;AAED,MACEA,WAAW,KAAK,QAAhB,IACAK,kBADA,IAEAC,MAAM,CAACC,UAAP,CAAkBN,wBAAwB,CAACE,IAA3C,EAAiDK,OAHnD,EAIE;AACA,WAAO,MAAP;AACD;;AAED,SAAO,OAAP;AACD;;ICzBYC,aAAa,GAAG,SAAhBA,aAAgB,OAAyD;AAAA,MAAtDC,GAAsD,QAAtDA,GAAsD;AAAA,MAAjDC,GAAiD,QAAjDA,GAAiD;AACpF,0CAAiCD,GAAjC,gBAA0CC,GAAG,8BAAuBA,GAAvB,WAAkC,EAA/E;AACD;;ICAYC,eAAe,GAAG,SAAlBA,eAAkB,GAAqB;AAClD,MAAI,OAAOC,SAAP,KAAqB,WAArB,IAAoCA,SAAS,CAACC,OAAV,KAAsB,aAA9D,EAA6E;AAC3E,WAAO,cAAP;AACD;;AAED,MAAI,OAAOC,QAAP,KAAoB,WAAxB,EAAqC;AACnC,WAAO,SAAP;AACD;;AAED,MAAI,OAAOC,OAAP,KAAmB,WAAvB,EAAoC;AAClC,WAAO,MAAP;AACD;;AAED,SAAO,SAAP;AACD;;ACVD,IAAMC,UAAU,GAAG;AACjBC,EAAAA,OAAO,EAAE,SADQ;AAEjBC,EAAAA,MAAM,EAAE;AAFS,CAAnB;IAaaC,aAAa,GAAG,SAAhBA,aAAgB,OAIF;AAAA;;AAAA,MAHzBC,WAGyB,QAHzBA,WAGyB;AACzB,MAAMhB,kBAAkB,GACtB,OAAOU,QAAP,KAAoB,WAApB,IACA,OAAOT,MAAP,KAAkB,WADlB,IAEA,mBAAOA,MAAP,4CAAO,QAAQC,UAAf,MAA8B,UAHhC;AAKA,MAAMe,kCAAkC,GAAGC,OAAO,CAChD;AAAA,WACGlB,kBAAkB,GACfmB,MAAM,CAACC,OAAP,CAAeJ,WAAf,EAA4BK,GAA5B,CAAgC,iBAAsBC,KAAtB,EAA6BC,gBAA7B,EAAkD;AAAA;;AAAA;AAAA,UAAhDC,KAAgD;AAAA,UAAzCC,UAAyC;;AAChF,UAAMpB,GAAG,GAAGoB,UAAZ;AACA,UAAMC,QAAQ,wBAAGH,gBAAgB,CAACD,KAAK,GAAG,CAAT,CAAnB,sDAAG,kBAA8B,CAA9B,CAAjB;AACA,UAAMK,UAAU,GAAGvB,aAAa,CAAC;AAAEC,QAAAA,GAAG,EAAHA,GAAF;AAAOC,QAAAA,GAAG,EAAEoB,QAAQ,GAAGA,QAAQ,GAAG,CAAd,GAAkBE;AAAtC,OAAD,CAAhC;AACA,aAAO;AAAEJ,QAAAA,KAAK,EAALA,KAAF;AAASC,QAAAA,UAAU,EAAVA,UAAT;AAAqBE,QAAAA,UAAU,EAAVA;AAArB,OAAP;AACD,KALD,CADe,GAOf,EARN;AAAA,GADgD,EAchD,CAACX,WAAD,EAAchB,kBAAd,CAdgD,CAAlD;AAiBA,MAAM6B,oBAAoB,GAAGC,WAAW,CAAC,UAACC,iBAAD,EAA+C;AACtF,QAAIC,iBAA6B,GAAGpB,UAAU,CAACE,MAA/C;AACA,QAAMmB,QAAQ,GAAG1B,eAAe,EAAhC;;AACA,QAAI0B,QAAQ,KAAK,cAAjB,EAAiC;AAC/BD,MAAAA,iBAAiB,GAAGpB,UAAU,CAACE,MAA/B;AACD,KAFD,MAEO,IAAImB,QAAQ,KAAK,SAAjB,EAA4B;AACjC,UAAIF,iBAAiB,IAAI,CAAC,MAAD,EAAS,IAAT,EAAe,GAAf,EAAoBG,QAApB,CAA6BH,iBAA7B,CAAzB,EAA0E;AACxE;AACAC,QAAAA,iBAAiB,GAAGpB,UAAU,CAACE,MAA/B;AACD,OAHD,MAGO;AACLkB,QAAAA,iBAAiB,GAAGpB,UAAU,CAACC,OAA/B;AACD;AACF,KAPM,MAOA,IAAIoB,QAAQ,KAAK,MAAjB,EAAyB;AAC9B;AACAD,MAAAA,iBAAiB,GAAGpB,UAAU,CAACC,OAA/B;AACD;;AACD,WAAOmB,iBAAP;AACD,GAjBuC,EAiBrC,EAjBqC,CAAxC;AAmBA,MAAMG,oBAAoB,GAAGL,WAAW,CACtC,UAACM,KAAD,EAA6C;AAAA;;AAC3C,QAAML,iBAAiB,sDACrBd,kCAAkC,CAACoB,IAAnC,CAAwC,iBAAyB;AAAA,mCAAtBV,UAAsB;AAAA,UAAtBA,UAAsB,iCAAT,EAAS;;AAC/D;AACA,UAAI,CAAAS,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,KAAP,MAAiBX,UAArB,EAAiC;AAC/B,eAAO,IAAP;AACD,OAJ8D;;;AAK/D;AACA,UAAI1B,MAAM,CAACC,UAAP,CAAkByB,UAAlB,EAA8BxB,OAAlC,EAA2C;AACzC,eAAO,IAAP;AACD;;AACD,aAAO,KAAP;AACD,KAVD,CADqB,2DACrB,uBAUIqB,KAXiB,yEAWRI,SAXf;AAaA,WAAOG,iBAAP;AACD,GAhBqC,EAiBtC,CAACd,kCAAD,CAjBsC,CAAxC;;AAoBA,kBAAsDsB,QAAQ,CAAC,YAAM;AACnE,QAAMR,iBAAiB,GAAGI,oBAAoB,EAA9C;AACA,QAAMH,iBAAiB,GAAGH,oBAAoB,CAACE,iBAAD,CAA9C;AACA,WAAO;AACLA,MAAAA,iBAAiB,EAAjBA,iBADK;AAELC,MAAAA,iBAAiB,EAAjBA;AAFK,KAAP;AAID,GAP6D,CAA9D;AAAA;AAAA,MAAOQ,mBAAP;AAAA,MAA4BC,sBAA5B;;AASAC,EAAAA,SAAS,CAAC,YAAM;AACd,QAAI,CAAC1C,kBAAL,EAAyB;AACvB,aAAO4B,SAAP;AACD;;AAED,QAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACP,KAAD,EAAsC;AACnEK,MAAAA,sBAAsB,CAAC,YAAM;AAC3B,YAAMV,iBAAiB,GAAGI,oBAAoB,CAACC,KAAD,CAA9C;AACA,YAAMJ,iBAAiB,GAAGH,oBAAoB,CAACE,iBAAD,CAA9C;AAEA,eAAO;AAAEA,UAAAA,iBAAiB,EAAjBA,iBAAF;AAAqBC,UAAAA,iBAAiB,EAAjBA;AAArB,SAAP;AACD,OALqB,CAAtB;AAMD,KAPD;;AASA,QAAMY,mBAAmB,GAAG3B,kCAAkC,CAACI,GAAnC,CAAuC,iBAAyB;AAAA,mCAAtBM,UAAsB;AAAA,UAAtBA,UAAsB,iCAAT,EAAS;AAC1F,UAAMkB,kBAAkB,GAAG5C,MAAM,CAACC,UAAP,CAAkByB,UAAlB,CAA3B;AACA;AACN;AACA;AACA;;AACM,UAAIkB,kBAAkB,CAACC,gBAAvB,EAAyC;AACvCD,QAAAA,kBAAkB,CAACC,gBAAnB,CAAoC,QAApC,EAA8CH,sBAA9C;AACD,OAFD,MAEO;AACL;AACAE,QAAAA,kBAAkB,CAACE,WAAnB,CAA+BJ,sBAA/B;AACD;;AACD,aAAOE,kBAAP;AACD,KAb2B,CAA5B;AAeA,WAAO,YAAY;AACjBD,MAAAA,mBAAmB,CAACI,OAApB,CAA4B,UAACH,kBAAD,EAAwB;AAClD,YAAIA,kBAAkB,CAACI,mBAAvB,EAA4C;AAC1CJ,UAAAA,kBAAkB,CAACI,mBAAnB,CAAuC,QAAvC,EAAiDN,sBAAjD;AACD,SAFD,MAEO;AACL;AACAE,UAAAA,kBAAkB,CAACK,cAAnB,CAAkCP,sBAAlC;AACD;AACF,OAPD;AAQD,KATD;AAUD,GAvCQ,EAuCN,CACD1B,kCADC,EAEDkB,oBAFC,EAGDN,oBAHC,EAID7B,kBAJC,CAvCM,CAAT,CAvEyB;;AAsHzB,SAAOwC,mBAAP;AACD;;ICpIYW,cAAc,GAAG,SAAjBA,cAAiB,GAET;AAAA,MADnBC,kBACmB,uEADyB,OACzB;;AACnB;AACA,kBAAgDb,QAAQ,CAAmB;AAAA,WACzE7C,cAAc,CAAC0D,kBAAD,CAD2D;AAAA,GAAnB,CAAxD;AAAA;AAAA,MAAOC,gBAAP;AAAA,MAAyBC,mBAAzB;;AAIA,MAAMC,cAAc,GAAGzB,WAAW,CAAC,SAAS0B,YAAT,CAAsB7D,WAAtB,EAA0D;;AAQ3F2D,IAAAA,mBAAmB,CAAC5D,cAAc,CAACC,WAAD,CAAf,CAAnB;AACD,GATiC,EAS/B,EAT+B,CAAlC;AAWA,SAAO;AACLA,IAAAA,WAAW,EAAE0D,gBADR;AAELE,IAAAA,cAAc,EAAdA;AAFK,GAAP;AAID;;ACjCD;;IAGME,aAAa,GAAG,SAAhBA,aAAgB,GAAe;AACnC,SAAOlD,eAAe,OAAO,cAA7B;AACD;;ICHYmD,KAAK,GAAG,SAARA,KAAQ,GAA0B;AAC7C,SAAO,KAAP;AACD;IAEYC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAe,KAAf;AAAA;;ACNzB;;;0BAGUC,aAAAA;;ACDV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACMC,WAAW,GAAG,SAAdA,WAAc,CAAIC,KAAJ,EAAsC;AACxD,SAAOA,KAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;IACMC,cAAc,GAAG,SAAjBA,cAAiB,CAAID,KAAJ,EAAyC;AAC9D,SAAOA,KAAP;AACD;;AClCM,SAASE,cAAT,CAAmDC,IAAnD,EAA0E;AAC/E,MAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;AAC5B,qBAAUA,IAAV;AACD;;AACD,SAAOA,IAAP;AACD;;ICJYC,cAAc,GAAG,SAAjBA,cAAiB,CAAmBC,IAAnB,EAAoE;AAChG,mBAAUA,IAAV;AACD;;ICLYC,SAAS,GAAG,SAAZA,SAAY,CAAmBH,IAAnB,EAAyC;AAChE,mBAAUA,IAAV;AACD;;ICFYI,kBAAkB,GAAG,SAArBA,kBAAqB,CAACJ,IAAD,EAAkC;AAClE,MAAMK,QAAQ,GAAGL,IAAI,GAAG,EAAxB;AACA,mBAAUK,QAAV;AACD;;ICDYC,QAAQ,GAAG,SAAXA,QAAW,CAAmBN,IAAnB,EAAyC;AAC/D,mBAAUA,IAAV;AACD;;ACJD;AACA;AACA;IACaO,WAAW,GAAG,SAAdA,WAAc,CAACC,WAAD;AAAA,SACzBA,WAAW,CACRC,WADH,GAEGC,KAFH,CAES,GAFT,EAGGtD,GAHH,CAGO,UAACuD,IAAD;AAAA,WAAUA,IAAI,CAACC,MAAL,CAAY,CAAZ,EAAeC,WAAf,KAA+BF,IAAI,CAACG,KAAL,CAAW,CAAX,CAAzC;AAAA,GAHP,EAIGC,IAJH,CAIQ,GAJR,CADyB;AAAA;;ACA3B;AACA;AACA;AACA;AACA;;AACO,SAASC,WAAT,CAAwBnB,KAAxB,EAA8E;AACnF,MAAMoB,GAAG,GAAGC,MAAM,EAAlB;AAEAzC,EAAAA,SAAS,CAAC,YAAM;AACdwC,IAAAA,GAAG,CAACE,OAAJ,GAActB,KAAd;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT;AAIA,SAAOoB,GAAG,CAACE,OAAX;AACD;;ICNYC,YAAY,gBAAGC,aAAa,CAAe;AACtD;AACAC,EAAAA,KAAK,EAAE,IAF+C;AAGtD5F,EAAAA,WAAW,EAAE,OAHyC;AAItDsC,EAAAA,QAAQ,EAAE,WAJ4C;AAKtDsB,EAAAA,cAAc,EAAE;AAAA,WAAM,IAAN;AAAA;AALsC,CAAf;;IAQnCiC,QAAQ,GAAG,SAAXA,QAAW,GAAoB;AACnC,MAAMC,YAAY,GAAGC,UAAU,CAAeL,YAAf,CAA/B;;AAWA,SAAOI,YAAP;AACD;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "9.4.1",
+  "version": "9.5.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -39,7 +39,9 @@
       },
       "default": {
         "types": "./build/components/index.d.ts",
-        "default": "./build/components/index.web.js"
+        "development": "./build/components/index.development.web.js",
+        "production": "./build/components/index.production.web.js",
+        "default": "./build/components/index.development.web.js"
       }
     },
     "./tokens": {
@@ -49,7 +51,9 @@
       },
       "default": {
         "types": "./build/tokens/index.d.ts",
-        "default": "./build/tokens/index.web.js"
+        "development": "./build/tokens/index.development.web.js",
+        "production": "./build/tokens/index.production.web.js",
+        "default": "./build/tokens/index.development.web.js"
       }
     },
     "./utils": {
@@ -59,7 +63,9 @@
       },
       "default": {
         "types": "./build/utils/index.d.ts",
-        "default": "./build/utils/index.web.js"
+        "development": "./build/utils/index.development.web.js",
+        "production": "./build/utils/index.production.web.js",
+        "default": "./build/utils/index.development.web.js"
       }
     }
   },
@@ -80,8 +86,9 @@
     "types:copy-declarations:native": "copyfiles -u 1 \"src/**/*.d.ts\" build/types/native",
     "build:generate-root-imports": "rollup -c && node ./scripts/generateRootImports.js",
     "build:clean-declarations": "rm -rf build/types",
-    "build:react": "FRAMEWORK=REACT rollup -c && node ./scripts/generateRootImports.js",
-    "build:react-native": "FRAMEWORK=REACT_NATIVE rollup -c && node ./scripts/generateRootImports.js",
+    "build:react-dev": "FRAMEWORK=REACT NODE_ENV=development rollup -c",
+    "build:react-prod": "FRAMEWORK=REACT NODE_ENV=production rollup -c",
+    "build:react-native": "FRAMEWORK=REACT_NATIVE rollup -c",
     "build:generate-css-variables": "GENERATE_CSS_VARIABLES=true FRAMEWORK=REACT rollup -c && node ./scripts/generateCssThemeVariables.js",
     "build:clean-theme-bundle": "rm -rf build/js-bundle-for-css",
     "react-native:get-stories": "sb-rn-get-stories --config-path=./.storybook/react-native && yarn prettier --write ./.storybook/react-native/storybook.requires.js",
@@ -133,6 +140,7 @@
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-node-resolve": "13.1.1",
+    "@rollup/plugin-replace": "5.0.2",
     "@size-limit/preset-big-lib": "8.2.4",
     "@storybook/addon-a11y": "6.3.0",
     "@storybook/addon-actions": "6.3.0",
@@ -247,7 +255,7 @@
     "files": [
       {
         "friendlyName": "Web Components",
-        "path": "./build/components/index.web.js"
+        "path": "./build/components/index.production.web.js"
       },
       {
         "friendlyName": "React Native Components",
@@ -255,7 +263,7 @@
       },
       {
         "friendlyName": "Web Tokens",
-        "path": "./build/tokens/index.web.js"
+        "path": "./build/tokens/index.production.web.js"
       },
       {
         "friendlyName": "React Native Tokens",
@@ -267,7 +275,7 @@
       },
       {
         "friendlyName": "Web Utils",
-        "path": "./build/utils/index.web.js"
+        "path": "./build/utils/index.production.web.js"
       },
       {
         "friendlyName": "React Native Utils",
@@ -281,14 +289,14 @@
   "size-limit": [
     {
       "name": "Import Button only",
-      "path": "./build/components/index.web.js",
+      "path": "./build/components/index.production.web.js",
       "import": "{ Button }",
       "limit": "20 kb",
       "running": false
     },
     {
       "name": "Import Text only",
-      "path": "./build/components/index.web.js",
+      "path": "./build/components/index.production.web.js",
       "import": "{ Text }",
       "limit": "15 kb",
       "running": false