@razorpay/blade 11.34.1 → 11.36.0

package/build/lib/web/development/components/index.js

@@ -141,12 +141,18 @@ export { default as BankIcon } from './Icons/BankIcon/BankIcon.js';
 export { default as BarChartAltIcon } from './Icons/BarChartAltIcon/BarChartAltIcon.js';
 export { default as BarChartIcon } from './Icons/BarChartIcon/BarChartIcon.js';
 export { default as BarCodeIcon } from './Icons/BarCodeIcon/BarCodeIcon.js';
+export { default as Battery100PercentIcon } from './Icons/Battery100PercentIcon/Battery100PercentIcon.js';
+export { default as Battery20PercentIcon } from './Icons/Battery20PercentIcon/Battery20PercentIcon.js';
+export { default as Battery40PercentIcon } from './Icons/Battery40PercentIcon/Battery40PercentIcon.js';
+export { default as Battery60PercentIcon } from './Icons/Battery60PercentIcon/Battery60PercentIcon.js';
+export { default as Battery80PercentIcon } from './Icons/Battery80PercentIcon/Battery80PercentIcon.js';
 export { default as BatteryChargingIcon } from './Icons/BatteryChargingIcon/BatteryChargingIcon.js';
 export { default as BatteryIcon } from './Icons/BatteryIcon/BatteryIcon.js';
 export { default as BellIcon } from './Icons/BellIcon/BellIcon.js';
 export { default as BellOffIcon } from './Icons/BellOffIcon/BellOffIcon.js';
 export { default as BfsiIcon } from './Icons/BfsiIcon/BfsiIcon.js';
 export { default as BillIcon } from './Icons/BillIcon/BillIcon.js';
+export { default as BillMeIcon } from './Icons/BillMeIcon/BillMeIcon.js';
 export { default as BluetoothIcon } from './Icons/BluetoothIcon/BluetoothIcon.js';
 export { default as BoldIcon } from './Icons/BoldIcon/BoldIcon.js';
 export { default as BookIcon } from './Icons/BookIcon/BookIcon.js';
@@ -310,6 +316,7 @@ export { default as MoveIcon } from './Icons/MoveIcon/MoveIcon.js';
 export { default as MusicIcon } from './Icons/MusicIcon/MusicIcon.js';
 export { default as MyAccountIcon } from './Icons/MyAccountIcon/MyAccountIcon.js';
 export { default as NavigationIcon } from './Icons/NavigationIcon/NavigationIcon.js';
+export { default as NoSignalIcon } from './Icons/NoSignalIcon/NoSignalIcon.js';
 export { default as OctagonIcon } from './Icons/OctagonIcon/OctagonIcon.js';
 export { default as OffersIcon } from './Icons/OffersIcon/OffersIcon.js';
 export { default as OptimizerIcon } from './Icons/OptimizerIcon/OptimizerIcon.js';
@@ -378,6 +385,12 @@ export { default as ShoppingBagIcon } from './Icons/ShoppingBagIcon/ShoppingBagI
 export { default as ShoppingCartIcon } from './Icons/ShoppingCartIcon/ShoppingCartIcon.js';
 export { default as ShuffleIcon } from './Icons/ShuffleIcon/ShuffleIcon.js';
 export { default as SidebarIcon } from './Icons/SidebarIcon/SidebarIcon.js';
+export { default as Signal1BarIcon } from './Icons/Signal1BarIcon/Signal1BarIcon.js';
+export { default as Signal2BarIcon } from './Icons/Signal2BarIcon/Signal2BarIcon.js';
+export { default as Signal3BarIcon } from './Icons/Signal3BarIcon/Signal3BarIcon.js';
+export { default as Signal4BarIcon } from './Icons/Signal4BarIcon/Signal4BarIcon.js';
+export { default as SignalIcon } from './Icons/SignalIcon/SignalIcon.js';
+export { default as SimCardIcon } from './Icons/SimCardIcon/SimCardIcon.js';
 export { default as SkipBackIcon } from './Icons/SkipBackIcon/SkipBackIcon.js';
 export { default as SkipForwardIcon } from './Icons/SkipForwardIcon/SkipForwardIcon.js';
 export { default as SlackIcon } from './Icons/SlackIcon/SlackIcon.js';
@@ -424,6 +437,7 @@ export { default as UmbrellaIcon } from './Icons/UmbrellaIcon/UmbrellaIcon.js';
 export { default as UnderlineIcon } from './Icons/UnderlineIcon/UnderlineIcon.js';
 export { default as UnlockIcon } from './Icons/UnlockIcon/UnlockIcon.js';
 export { default as UpiAutopayIcon } from './Icons/UpiAutopayIcon/UpiAutopayIcon.js';
+export { default as UpiIcon } from './Icons/UpiIcon/UpiIcon.js';
 export { default as UploadCloudIcon } from './Icons/UploadCloudIcon/UploadCloudIcon.js';
 export { default as UploadIcon } from './Icons/UploadIcon/UploadIcon.js';
 export { default as UserCheckIcon } from './Icons/UserCheckIcon/UserCheckIcon.js';
@@ -448,6 +462,7 @@ export { default as WifiOffIcon } from './Icons/WifiOffIcon/WifiOffIcon.js';
 export { default as WindIcon } from './Icons/WindIcon/WindIcon.js';
 export { default as XCircleIcon } from './Icons/XCircleIcon/XCircleIcon.js';
 export { default as XSquareIcon } from './Icons/XSquareIcon/XSquareIcon.js';
+export { default as YoutubeIcon } from './Icons/YoutubeIcon/YoutubeIcon.js';
 export { default as ZapIcon } from './Icons/ZapIcon/ZapIcon.js';
 export { default as ZoomInIcon } from './Icons/ZoomInIcon/ZoomInIcon.js';
 export { default as ZoomOutIcon } from './Icons/ZoomOutIcon/ZoomOutIcon.js';

package/build/lib/web/development/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/development/utils/useCallbackRef.js

@@ -0,0 +1,31 @@
+import { useRef, useInsertionEffect, useCallback } from 'react';
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+/**
+ * This hook is user-land implementation of the experimental `useEffectEvent` hook.
+ * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ *
+ * This hook is useful when you want to use a callback function inside a useEffect while keeping it "fresh" but you don't want to add it to the dependency array.
+ */
+function useCallbackRef(callback) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var callbackRef = useRef(function () {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+  useInsertionEffect(function () {
+    callbackRef.current = callback;
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(function () {
+    var _callbackRef$current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call.apply(_callbackRef$current, [callbackRef].concat(args));
+  }, deps);
+}
+
+export { useCallbackRef };
+//# sourceMappingURL=useCallbackRef.js.map

package/build/lib/web/development/utils/useCallbackRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { useCallback, useInsertionEffect, useRef } from 'react';\n\n/**\n * This hook is user-land implementation of the experimental `useEffectEvent` hook.\n * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n *\n * This hook is useful when you want to use a callback function inside a useEffect while keeping it \"fresh\" but you don't want to add it to the dependency array.\n */\nfunction useCallbackRef<Args extends unknown[], Return>(\n  callback: ((...args: Args) => Return) | undefined,\n  deps: React.DependencyList = [],\n) {\n  const callbackRef = useRef<typeof callback>(() => {\n    throw new Error('Cannot call an event handler while rendering.');\n  });\n\n  useInsertionEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useCallback((...args: Args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n"],"names":["useCallbackRef","callback","deps","arguments","length","undefined","callbackRef","useRef","Error","useInsertionEffect","current","useCallback","_callbackRef$current","_len","args","Array","_key","call","apply","concat"],"mappings":";;AAAA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,cAAcA,CACrBC,QAAiD,EAEjD;AAAA,EAAA,IADAC,IAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AAE/B,EAAA,IAAMG,WAAW,GAAGC,MAAM,CAAkB,YAAM;AAChD,IAAA,MAAM,IAAIC,KAAK,CAAC,+CAA+C,CAAC,CAAA;AAClE,GAAC,CAAC,CAAA;AAEFC,EAAAA,kBAAkB,CAAC,YAAM;IACvBH,WAAW,CAACI,OAAO,GAAGT,QAAQ,CAAA;AAChC,GAAC,CAAC,CAAA;;AAEF;AACA,EAAA,OAAOU,WAAW,CAAC,YAAA;AAAA,IAAA,IAAAC,oBAAA,CAAA;AAAA,IAAA,KAAA,IAAAC,IAAA,GAAAV,SAAA,CAAAC,MAAA,EAAIU,IAAI,GAAAC,IAAAA,KAAA,CAAAF,IAAA,GAAAG,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA,EAAA,EAAA;AAAJF,MAAAA,IAAI,CAAAE,IAAA,CAAAb,GAAAA,SAAA,CAAAa,IAAA,CAAA,CAAA;AAAA,KAAA;IAAA,OAAAJ,CAAAA,oBAAA,GAAWN,WAAW,CAACI,OAAO,MAAAE,IAAAA,IAAAA,oBAAA,uBAAnBA,oBAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,oBAAA,EAAA,CAAAN,WAAW,CAAAa,CAAAA,MAAA,CAAcL,IAAI,CAAC,CAAA,CAAA;AAAA,GAAA,EAAEZ,IAAI,CAAC,CAAA;AAC7E;;;;"}

package/build/lib/web/development/utils/useControllable.js

@@ -1,5 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import * as React from 'react';
+import { useCallbackRef } from './useCallbackRef.js';
 
 /**
  * React hook for using controlling component state.
@@ -14,7 +15,13 @@ import * as React from 'react';
 function useControllableState(props) {
   var valueProp = props.value,
     defaultValue = props.defaultValue,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    _props$shouldUpdate = props.shouldUpdate,
+    shouldUpdate = _props$shouldUpdate === void 0 ? function (prev, next) {
+      return prev !== next;
+    } : _props$shouldUpdate;
+  var onChangeProp = useCallbackRef(onChange);
+  var shouldUpdateProp = useCallbackRef(shouldUpdate);
   var _React$useState = React.useState(defaultValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     valueState = _React$useState2[0],
@@ -22,14 +29,15 @@ function useControllableState(props) {
   var _React$useRef = React.useRef(valueProp !== undefined),
     isControlled = _React$useRef.current;
   var value = isControlled && typeof valueProp !== 'undefined' ? valueProp : valueState;
-  var updateValue = React.useCallback(function (next) {
+  var updateValue = useCallbackRef(function (next) {
     var skipUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var nextValue = next(value);
     if (!isControlled) setValue(nextValue);
-    // We don't want to call onChange if skipUpdate is true
+    // We don't want to call onChange if skipUpdate is true or if the value is not changed
+    if (!shouldUpdateProp(value, nextValue)) return;
     if (skipUpdate) return;
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [onChange, value]);
+    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(nextValue);
+  }, [isControlled, onChangeProp, value, shouldUpdateProp]);
   return [value, updateValue];
 }
 

package/build/lib/web/development/utils/useControllable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControllable.js","sources":["../../../../../src/utils/useControllable.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport * as React from 'react';\n\ntype ControllableStateSetter<T> = (\n  /**\n   * Sets the state to the given value\n   */\n  next: (prevState: T) => T,\n  /**\n   * If `true`, `onChange` won't be called\n   */\n  skipUpdate?: boolean,\n) => void;\n\ntype UseControllableStateProps<T> = {\n  /**\n   * The value to used in controlled mode\n   */\n  value?: T;\n  /**\n   * The initial value to be used, in uncontrolled mode\n   */\n  defaultValue?: T | (() => T);\n  /**\n   * The callback fired when the value changes\n   */\n  onChange?: (value: T) => void;\n};\n\n/**\n * React hook for using controlling component state.\n *\n * It automatically handles controlled and uncontrolled state,\n * while internally giving us the state value so that we can react to the changes.\n *\n * @example\n * In checkbox we want to internally track the checked state to be able to render the correct Icon\n * but also want to provide controlled and uncontrolled behavior to user\n */\nexport function useControllableState<T>(props: UseControllableStateProps<T>) {\n  const { value: valueProp, defaultValue, onChange } = props;\n\n  const [valueState, setValue] = React.useState(defaultValue as T);\n  const { current: isControlled } = React.useRef(valueProp !== undefined);\n  const value = isControlled && typeof valueProp !== 'undefined' ? valueProp : valueState;\n\n  const updateValue: ControllableStateSetter<T> = React.useCallback(\n    (next, skipUpdate = false) => {\n      const nextValue = next(value);\n      if (!isControlled) setValue(nextValue);\n      // We don't want to call onChange if skipUpdate is true\n      if (skipUpdate) return;\n      onChange?.(nextValue);\n    },\n    [onChange, value],\n  );\n\n  return [value, updateValue] as [T, ControllableStateSetter<T>];\n}\n\nexport type { ControllableStateSetter };\n"],"names":["useControllableState","props","valueProp","value","defaultValue","onChange","_React$useState","React","useState","_React$useState2","_slicedToArray","valueState","setValue","_React$useRef","useRef","undefined","isControlled","current","updateValue","useCallback","next","skipUpdate","arguments","length","nextValue"],"mappings":";;;AA+BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,oBAAoBA,CAAIC,KAAmC,EAAE;AAC3E,EAAA,IAAeC,SAAS,GAA6BD,KAAK,CAAlDE,KAAK;IAAaC,YAAY,GAAeH,KAAK,CAAhCG,YAAY;IAAEC,QAAQ,GAAKJ,KAAK,CAAlBI,QAAQ,CAAA;AAEhD,EAAA,IAAAC,eAAA,GAA+BC,KAAK,CAACC,QAAQ,CAACJ,YAAiB,CAAC;IAAAK,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAzDK,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,QAAQ,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;EAC3B,IAAAI,aAAA,GAAkCN,KAAK,CAACO,MAAM,CAACZ,SAAS,KAAKa,SAAS,CAAC;IAAtDC,YAAY,GAAAH,aAAA,CAArBI,OAAO,CAAA;EACf,IAAMd,KAAK,GAAGa,YAAY,IAAI,OAAOd,SAAS,KAAK,WAAW,GAAGA,SAAS,GAAGS,UAAU,CAAA;EAEvF,IAAMO,WAAuC,GAAGX,KAAK,CAACY,WAAW,CAC/D,UAACC,IAAI,EAAyB;AAAA,IAAA,IAAvBC,UAAU,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAP,SAAA,GAAAO,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK,CAAA;AACvB,IAAA,IAAME,SAAS,GAAGJ,IAAI,CAACjB,KAAK,CAAC,CAAA;AAC7B,IAAA,IAAI,CAACa,YAAY,EAAEJ,QAAQ,CAACY,SAAS,CAAC,CAAA;AACtC;AACA,IAAA,IAAIH,UAAU,EAAE,OAAA;AAChBhB,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGmB,SAAS,CAAC,CAAA;AACvB,GAAC,EACD,CAACnB,QAAQ,EAAEF,KAAK,CAClB,CAAC,CAAA;AAED,EAAA,OAAO,CAACA,KAAK,EAAEe,WAAW,CAAC,CAAA;AAC7B;;;;"}
+{"version":3,"file":"useControllable.js","sources":["../../../../../src/utils/useControllable.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport * as React from 'react';\nimport { useCallbackRef } from './useCallbackRef';\n\ntype ControllableStateSetter<T> = (\n  /**\n   * Sets the state to the given value\n   */\n  next: (prevState: T) => T,\n  /**\n   * If `true`, `onChange` won't be called\n   */\n  skipUpdate?: boolean,\n) => void;\n\ntype UseControllableStateProps<T> = {\n  /**\n   * The value to used in controlled mode\n   */\n  value?: T;\n  /**\n   * The initial value to be used, in uncontrolled mode\n   */\n  defaultValue?: T | (() => T);\n  /**\n   * The callback fired when the value changes\n   */\n  onChange?: (value: T) => void;\n  shouldUpdate?: (prev: T, next: T) => boolean;\n};\n\n/**\n * React hook for using controlling component state.\n *\n * It automatically handles controlled and uncontrolled state,\n * while internally giving us the state value so that we can react to the changes.\n *\n * @example\n * In checkbox we want to internally track the checked state to be able to render the correct Icon\n * but also want to provide controlled and uncontrolled behavior to user\n */\nfunction useControllableState<T>(props: UseControllableStateProps<T>) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onChange,\n    shouldUpdate = (prev, next) => prev !== next,\n  } = props;\n\n  const onChangeProp = useCallbackRef(onChange);\n  const shouldUpdateProp = useCallbackRef(shouldUpdate);\n\n  const [valueState, setValue] = React.useState(defaultValue as T);\n  const { current: isControlled } = React.useRef(valueProp !== undefined);\n  const value = isControlled && typeof valueProp !== 'undefined' ? valueProp : valueState;\n\n  const updateValue: ControllableStateSetter<T> = useCallbackRef(\n    (next, skipUpdate = false) => {\n      const nextValue = next(value);\n      if (!isControlled) setValue(nextValue);\n      // We don't want to call onChange if skipUpdate is true or if the value is not changed\n      if (!shouldUpdateProp(value, nextValue)) return;\n      if (skipUpdate) return;\n      onChangeProp?.(nextValue);\n    },\n    [isControlled, onChangeProp, value, shouldUpdateProp],\n  );\n\n  return [value, updateValue] as [T, ControllableStateSetter<T>];\n}\n\nexport { useControllableState };\nexport type { ControllableStateSetter };\n"],"names":["useControllableState","props","valueProp","value","defaultValue","onChange","_props$shouldUpdate","shouldUpdate","prev","next","onChangeProp","useCallbackRef","shouldUpdateProp","_React$useState","React","useState","_React$useState2","_slicedToArray","valueState","setValue","_React$useRef","useRef","undefined","isControlled","current","updateValue","skipUpdate","arguments","length","nextValue"],"mappings":";;;;AAiCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,oBAAoBA,CAAIC,KAAmC,EAAE;AACpE,EAAA,IACSC,SAAS,GAIdD,KAAK,CAJPE,KAAK;IACLC,YAAY,GAGVH,KAAK,CAHPG,YAAY;IACZC,QAAQ,GAENJ,KAAK,CAFPI,QAAQ;IAAAC,mBAAA,GAENL,KAAK,CADPM,YAAY;AAAZA,IAAAA,YAAY,GAAAD,mBAAA,KAAA,KAAA,CAAA,GAAG,UAACE,IAAI,EAAEC,IAAI,EAAA;MAAA,OAAKD,IAAI,KAAKC,IAAI,CAAA;AAAA,KAAA,GAAAH,mBAAA,CAAA;AAG9C,EAAA,IAAMI,YAAY,GAAGC,cAAc,CAACN,QAAQ,CAAC,CAAA;AAC7C,EAAA,IAAMO,gBAAgB,GAAGD,cAAc,CAACJ,YAAY,CAAC,CAAA;AAErD,EAAA,IAAAM,eAAA,GAA+BC,KAAK,CAACC,QAAQ,CAACX,YAAiB,CAAC;IAAAY,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAzDK,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,QAAQ,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;EAC3B,IAAAI,aAAA,GAAkCN,KAAK,CAACO,MAAM,CAACnB,SAAS,KAAKoB,SAAS,CAAC;IAAtDC,YAAY,GAAAH,aAAA,CAArBI,OAAO,CAAA;EACf,IAAMrB,KAAK,GAAGoB,YAAY,IAAI,OAAOrB,SAAS,KAAK,WAAW,GAAGA,SAAS,GAAGgB,UAAU,CAAA;AAEvF,EAAA,IAAMO,WAAuC,GAAGd,cAAc,CAC5D,UAACF,IAAI,EAAyB;AAAA,IAAA,IAAvBiB,UAAU,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAL,SAAA,GAAAK,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK,CAAA;AACvB,IAAA,IAAME,SAAS,GAAGpB,IAAI,CAACN,KAAK,CAAC,CAAA;AAC7B,IAAA,IAAI,CAACoB,YAAY,EAAEJ,QAAQ,CAACU,SAAS,CAAC,CAAA;AACtC;AACA,IAAA,IAAI,CAACjB,gBAAgB,CAACT,KAAK,EAAE0B,SAAS,CAAC,EAAE,OAAA;AACzC,IAAA,IAAIH,UAAU,EAAE,OAAA;AAChBhB,IAAAA,YAAY,aAAZA,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,YAAY,CAAGmB,SAAS,CAAC,CAAA;GAC1B,EACD,CAACN,YAAY,EAAEb,YAAY,EAAEP,KAAK,EAAES,gBAAgB,CACtD,CAAC,CAAA;AAED,EAAA,OAAO,CAACT,KAAK,EAAEsB,WAAW,CAAC,CAAA;AAC7B;;;;"}

package/build/lib/web/production/components/Box/BaseBox/types/propsTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"propsTypes.js","sources":["../../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n  {\n    height: SpacingValueType;\n    minHeight: SpacingValueType;\n    maxHeight: SpacingValueType;\n    width: SpacingValueType;\n    minWidth: SpacingValueType;\n    maxWidth: SpacingValueType;\n  } & PickCSSByPlatform<\n    'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'\n  >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n  {\n    /**\n     * This uses the native gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=gap\n     */\n    gap: SpacingValueType;\n    /**\n     * This uses the native row-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=row-gap\n     */\n    rowGap: SpacingValueType;\n    /**\n     * This uses the native column-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=column-gap\n     */\n    columnGap: SpacingValueType;\n    /**\n     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n     *\n     * @see https://developer.mozilla.org/docs/Web/CSS/flex\n     */\n    flex: string | number;\n  } & PickCSSByPlatform<\n    | 'flexWrap'\n    | 'flexDirection'\n    | 'flexGrow'\n    | 'flexShrink'\n    | 'flexBasis'\n    | 'alignItems'\n    | 'alignContent'\n    | 'alignSelf'\n    | 'justifyItems'\n    | 'justifyContent'\n    | 'justifySelf'\n    | 'placeSelf'\n    | 'placeItems'\n    | 'order'\n  >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n  {\n    top: SpacingValueType;\n    right: SpacingValueType;\n    bottom: SpacingValueType;\n    left: SpacingValueType;\n  } & PickCSSByPlatform<'position' | 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n  PickCSSByPlatform<\n    | 'grid'\n    | 'gridColumn'\n    | 'gridRow'\n    | 'gridRowStart'\n    | 'gridRowEnd'\n    | 'gridColumnStart'\n    | 'gridColumnEnd'\n    | 'gridArea'\n    | 'gridAutoFlow'\n    | 'gridAutoRows'\n    | 'gridAutoColumns'\n    | 'gridTemplate'\n    | 'gridTemplateAreas'\n    | 'gridTemplateColumns'\n    | 'gridTemplateRows'\n  >\n>;\n\ntype ColorObjects = 'feedback' | 'surface' | 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' | 'overlay';\ntype BackgroundColorString<\n  T extends ColorObjects | BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n  Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n  'div',\n  'section',\n  'footer',\n  'header',\n  'main',\n  'aside',\n  'nav',\n  'span',\n  'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n  {\n    borderRadius: keyof Border['radius'];\n    borderWidth: keyof Border['width'];\n    borderColor: BorderColorString<'surface'>;\n    borderTopWidth: keyof Border['width'];\n    borderTopColor: BorderColorString<'surface'>;\n    borderRightWidth: keyof Border['width'];\n    borderRightColor: BorderColorString<'surface'>;\n    borderBottomWidth: keyof Border['width'];\n    borderBottomColor: BorderColorString<'surface'>;\n    borderLeftWidth: keyof Border['width'];\n    borderLeftColor: BorderColorString<'surface'>;\n    borderTopLeftRadius: keyof Border['radius'];\n    borderTopRightRadius: keyof Border['radius'];\n    borderBottomRightRadius: keyof Border['radius'];\n    borderBottomLeftRadius: keyof Border['radius'];\n  } & PickCSSByPlatform<\n    | 'backgroundImage'\n    | 'backgroundSize'\n    | 'backgroundPosition'\n    | 'backgroundOrigin'\n    | 'backgroundRepeat'\n    | 'pointerEvents'\n    | 'opacity'\n    | 'visibility'\n    | 'transform'\n    | 'transformOrigin'\n    | 'clipPath'\n    | 'borderStyle'\n    | 'borderTopStyle'\n    | 'borderBottomStyle'\n    | 'borderLeftStyle'\n    | 'borderRightStyle'\n  > & {\n      /**\n       * Sets the elevation for Box\n       *\n       * eg: `theme.elevation.midRaised`\n       *\n       * @default `theme.elevation.lowRaised`\n       *\n       * **Links:**\n       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n       */\n      elevation?: keyof Elevation;\n    }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n  {\n    backgroundColor:\n      | BackgroundColorString<'feedback'>\n      | BackgroundColorString<'surface'>\n      | BackgroundColorString<'interactive'>\n      | BackgroundColorString<'overlay'>\n      | BackgroundColorString<'popup'>\n      | 'transparent'\n      | (string & Record<never, never>);\n    lineHeight: SpacingValueType;\n    touchAction: CSSObject['touchAction'];\n    userSelect: CSSObject['userSelect'];\n  } & PickCSSByPlatform<\n    | 'border'\n    | 'borderLeft'\n    | 'borderRight'\n    | 'borderTop'\n    | 'borderBottom'\n    | 'opacity'\n    | 'pointerEvents'\n    | 'cursor'\n  >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n  backgroundColor: BackgroundColorString<'surface'> | 'transparent';\n}> & {\n  // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n  // styled-components do not support passing `as` prop as an object\n  as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n  Omit<\n    MarginProps &\n      Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &\n      PositionProps &\n      Pick<\n        GridProps,\n        | 'gridColumn'\n        | 'gridRow'\n        | 'gridRowStart'\n        | 'gridRowEnd'\n        | 'gridColumnStart'\n        | 'gridColumnEnd'\n        | 'gridArea'\n      > &\n      Pick<LayoutProps, 'display'> &\n      Pick<CommonBoxVisualProps, 'visibility'>,\n    '__brand__'\n  >\n>;\n\ntype BoxCallbackProps = Omit<\n  Platform.Select<{\n    web: {\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseOver: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseEnter: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseLeave: React.MouseEventHandler<HTMLElement>;\n      onScroll: React.UIEventHandler<HTMLElement>;\n    };\n    native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;\n  }>,\n  '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n  Platform.Select<{\n    web: {\n      draggable: boolean;\n      onDragStart: React.DragEventHandler<HTMLElement>;\n      onDragEnter: React.DragEventHandler<HTMLElement>;\n      onDragLeave: React.DragEventHandler<HTMLElement>;\n      onDragOver: React.DragEventHandler<HTMLElement>;\n      onDragEnd: React.DragEventHandler<HTMLElement>;\n      onDrop: React.DragEventHandler<HTMLElement>;\n    };\n    native: Record<\n      | 'draggable'\n      | 'onDragStart'\n      | 'onDragEnter'\n      | 'onDragLeave'\n      | 'onDragOver'\n      | 'onDragEnd'\n      | 'onDrop',\n      undefined\n    >;\n  }>,\n  '__brand__'\n>;\n\ntype BoxProps = Partial<\n  PaddingProps &\n    MarginProps &\n    LayoutProps &\n    FlexboxProps &\n    PositionProps &\n    GridProps &\n    BoxCallbackProps &\n    BoxDragAndDropProps &\n    CommonBoxVisualProps &\n    BoxVisualProps & {\n      children?: React.ReactNode | React.ReactNode[];\n      tabIndex?: number;\n      id?: string;\n    } & TestID\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n  Partial<\n    BaseBoxVisualProps & {\n      className?: string;\n      id?: string;\n      tabIndex?: number;\n    }\n  > &\n  BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n  web: Omit<HTMLElement, 'style'>;\n  native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA6GA;AACMA,IAAAA,gBAAgB,GAAG,CACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO;;;;"}
+{"version":3,"file":"propsTypes.js","sources":["../../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n  {\n    height: SpacingValueType;\n    minHeight: SpacingValueType;\n    maxHeight: SpacingValueType;\n    width: SpacingValueType;\n    minWidth: SpacingValueType;\n    maxWidth: SpacingValueType;\n  } & PickCSSByPlatform<\n    'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'\n  >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n  {\n    /**\n     * This uses the native gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=gap\n     */\n    gap: SpacingValueType;\n    /**\n     * This uses the native row-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=row-gap\n     */\n    rowGap: SpacingValueType;\n    /**\n     * This uses the native column-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=column-gap\n     */\n    columnGap: SpacingValueType;\n    /**\n     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n     *\n     * @see https://developer.mozilla.org/docs/Web/CSS/flex\n     */\n    flex: string | number;\n  } & PickCSSByPlatform<\n    | 'flexWrap'\n    | 'flexDirection'\n    | 'flexGrow'\n    | 'flexShrink'\n    | 'flexBasis'\n    | 'alignItems'\n    | 'alignContent'\n    | 'alignSelf'\n    | 'justifyItems'\n    | 'justifyContent'\n    | 'justifySelf'\n    | 'placeSelf'\n    | 'placeItems'\n    | 'order'\n  >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n  {\n    top: SpacingValueType;\n    right: SpacingValueType;\n    bottom: SpacingValueType;\n    left: SpacingValueType;\n  } & PickCSSByPlatform<'position' | 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n  PickCSSByPlatform<\n    | 'grid'\n    | 'gridColumn'\n    | 'gridRow'\n    | 'gridRowStart'\n    | 'gridRowEnd'\n    | 'gridColumnStart'\n    | 'gridColumnEnd'\n    | 'gridArea'\n    | 'gridAutoFlow'\n    | 'gridAutoRows'\n    | 'gridAutoColumns'\n    | 'gridTemplate'\n    | 'gridTemplateAreas'\n    | 'gridTemplateColumns'\n    | 'gridTemplateRows'\n  >\n>;\n\ntype ColorObjects = 'feedback' | 'surface' | 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' | 'overlay';\ntype BackgroundColorString<\n  T extends ColorObjects | BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n  Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n  'div',\n  'section',\n  'footer',\n  'header',\n  'main',\n  'aside',\n  'nav',\n  'span',\n  'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n  {\n    borderRadius: keyof Border['radius'];\n    borderWidth: keyof Border['width'];\n    borderColor: BorderColorString<'surface'>;\n    borderTopWidth: keyof Border['width'];\n    borderTopColor: BorderColorString<'surface'>;\n    borderRightWidth: keyof Border['width'];\n    borderRightColor: BorderColorString<'surface'>;\n    borderBottomWidth: keyof Border['width'];\n    borderBottomColor: BorderColorString<'surface'>;\n    borderLeftWidth: keyof Border['width'];\n    borderLeftColor: BorderColorString<'surface'>;\n    borderTopLeftRadius: keyof Border['radius'];\n    borderTopRightRadius: keyof Border['radius'];\n    borderBottomRightRadius: keyof Border['radius'];\n    borderBottomLeftRadius: keyof Border['radius'];\n  } & PickCSSByPlatform<\n    | 'backgroundImage'\n    | 'backgroundSize'\n    | 'backgroundPosition'\n    | 'backgroundOrigin'\n    | 'backgroundRepeat'\n    | 'pointerEvents'\n    | 'opacity'\n    | 'visibility'\n    | 'transform'\n    | 'transformOrigin'\n    | 'clipPath'\n    | 'borderStyle'\n    | 'borderTopStyle'\n    | 'borderBottomStyle'\n    | 'borderLeftStyle'\n    | 'borderRightStyle'\n  > & {\n      /**\n       * Sets the elevation for Box\n       *\n       * eg: `theme.elevation.midRaised`\n       *\n       * @default `theme.elevation.lowRaised`\n       *\n       * **Links:**\n       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n       */\n      elevation?: keyof Elevation;\n    }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n  {\n    backgroundColor:\n      | BackgroundColorString<'feedback'>\n      | BackgroundColorString<'surface'>\n      | BackgroundColorString<'interactive'>\n      | BackgroundColorString<'overlay'>\n      | BackgroundColorString<'popup'>\n      | 'transparent'\n      | (string & Record<never, never>);\n    lineHeight: SpacingValueType;\n    touchAction: CSSObject['touchAction'];\n    userSelect: CSSObject['userSelect'];\n  } & PickCSSByPlatform<\n    | 'border'\n    | 'borderLeft'\n    | 'borderRight'\n    | 'borderTop'\n    | 'borderBottom'\n    | 'opacity'\n    | 'pointerEvents'\n    | 'cursor'\n  >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n  backgroundColor: BackgroundColorString<'surface'> | 'transparent';\n}> & {\n  // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n  // styled-components do not support passing `as` prop as an object\n  as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n  Omit<\n    MarginProps &\n      Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &\n      PositionProps &\n      Pick<\n        GridProps,\n        | 'gridColumn'\n        | 'gridRow'\n        | 'gridRowStart'\n        | 'gridRowEnd'\n        | 'gridColumnStart'\n        | 'gridColumnEnd'\n        | 'gridArea'\n      > &\n      Pick<LayoutProps, 'display'> &\n      Pick<CommonBoxVisualProps, 'visibility'>,\n    '__brand__'\n  >\n>;\n\ntype BoxCallbackProps = Omit<\n  Platform.Select<{\n    web: {\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseOver: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseEnter: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseLeave: React.MouseEventHandler<HTMLElement>;\n      onScroll: React.UIEventHandler<HTMLElement>;\n    };\n    native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;\n  }>,\n  '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n  Platform.Select<{\n    web: {\n      draggable: boolean;\n      onDragStart: React.DragEventHandler<HTMLElement>;\n      onDragEnter: React.DragEventHandler<HTMLElement>;\n      onDragLeave: React.DragEventHandler<HTMLElement>;\n      onDragOver: React.DragEventHandler<HTMLElement>;\n      onDragEnd: React.DragEventHandler<HTMLElement>;\n      onDrop: React.DragEventHandler<HTMLElement>;\n    };\n    native: Record<\n      | 'draggable'\n      | 'onDragStart'\n      | 'onDragEnter'\n      | 'onDragLeave'\n      | 'onDragOver'\n      | 'onDragEnd'\n      | 'onDrop',\n      undefined\n    >;\n  }>,\n  '__brand__'\n>;\n\ntype BoxProps = Partial<\n  PaddingProps &\n    MarginProps &\n    LayoutProps &\n    FlexboxProps &\n    PositionProps &\n    GridProps &\n    BoxCallbackProps &\n    BoxDragAndDropProps &\n    CommonBoxVisualProps &\n    BoxVisualProps & {\n      children?: React.ReactNode | React.ReactNode[];\n      tabIndex?: number;\n      id?: string;\n    } & TestID\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n  Partial<\n    BaseBoxVisualProps & {\n      className?: string;\n      id?: string;\n      tabIndex?: number;\n    }\n  > &\n  BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n  web: Omit<HTMLElement, 'style'>;\n  native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA6GA;AACMA,IAAAA,gBAAgB,GAAG,CACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO;;;;"}

package/build/lib/web/production/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * @default false\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  StyledPropsBlade;\n\nconst Card = ({\n  children,\n  backgroundColor = 'surface.background.gray.intense',\n  borderRadius = 'medium',\n  elevation = 'lowRaised',\n  testID,\n  padding = 'spacing.7',\n  width,\n  height,\n  minHeight,\n  minWidth,\n  onClick,\n  isSelected = false,\n  accessibilityLabel,\n  shouldScaleOnHover = false,\n  onHover,\n  href,\n  target,\n  rel,\n  as,\n  ...styledProps\n}: CardProps): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        display={'block' as never}\n        borderRadius=\"medium\"\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID;\n\nconst _CardBody = ({ height, children, testID }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.CardBody, testID })} height={height}>\n      {children}\n    </BaseBox>\n  );\n};\n\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","Card","_ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","getStyledProps","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","useVerifyInsideCard","BaseBox","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * @default false\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  StyledPropsBlade;\n\nconst Card = ({\n  children,\n  backgroundColor = 'surface.background.gray.intense',\n  borderRadius = 'medium',\n  elevation = 'lowRaised',\n  testID,\n  padding = 'spacing.7',\n  width,\n  height,\n  minHeight,\n  minWidth,\n  onClick,\n  isSelected = false,\n  accessibilityLabel,\n  shouldScaleOnHover = false,\n  onHover,\n  href,\n  target,\n  rel,\n  as,\n  ...styledProps\n}: CardProps): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        display={'block' as never}\n        borderRadius=\"medium\"\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID;\n\nconst _CardBody = ({ height, children, testID }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.CardBody, testID })} height={height}>\n      {children}\n    </BaseBox>\n  );\n};\n\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","Card","_ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","getStyledProps","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","useVerifyInsideCard","BaseBox","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Carousel/Carousel.web.js

@@ -1,6 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
 import React__default from 'react';
@@ -20,8 +19,10 @@ import '../../utils/makeAccessible/index.js';
 import '../../utils/metaAttribute/index.js';
 import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
 import '../BladeProvider/index.js';
-import { useFirstRender } from '../../utils/useFirstRender.js';
 import '../Box/styledProps/index.js';
+import { useControllableState } from '../../utils/useControllable.js';
+import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
+import { useDidUpdate } from '../../utils/useDidUpdate.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Box } from '../Box/Box.js';
 import { NavigationButton } from './NavigationButton/NavigationButton.js';
@@ -29,14 +30,13 @@ import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
-import { usePrevious } from '../../utils/usePrevious/usePrevious.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import { useInterval } from '../../utils/useInterval.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 
-var _excluded = ["autoPlay", "visibleItems", "showIndicators", "navigationButtonPosition", "children", "shouldAddStartEndSpacing", "carouselItemWidth", "scrollOverlayColor", "accessibilityLabel", "onChange", "indicatorVariant", "navigationButtonVariant", "carouselItemAlignment", "height"];
+var _excluded = ["autoPlay", "visibleItems", "showIndicators", "navigationButtonPosition", "children", "shouldAddStartEndSpacing", "carouselItemWidth", "scrollOverlayColor", "accessibilityLabel", "onChange", "indicatorVariant", "navigationButtonVariant", "carouselItemAlignment", "height", "defaultActiveSlide", "activeSlide"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Controls = function Controls(_ref) {
@@ -191,24 +191,6 @@ var CarouselBody = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref)
     })
   }));
 });
-
-/**
- * A custom hook which syncs an effect with a state
- * While ignoring the first render & only running the effect when the state changes
- */
-function useSyncUpdateEffect(effect, stateToSyncWith, deps) {
-  var isFirst = useFirstRender();
-  var prevState = usePrevious(stateToSyncWith);
-  React__default.useEffect(function () {
-    if (!isFirst) {
-      // if the state is the same as the previous state
-      // we don't want to run the effect
-      if (prevState === stateToSyncWith) return;
-      return effect();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stateToSyncWith].concat(_toConsumableArray(deps)));
-}
 var Carousel = function Carousel(_ref4) {
   var autoPlay = _ref4.autoPlay,
     _ref4$visibleItems = _ref4.visibleItems,
@@ -223,7 +205,7 @@ var Carousel = function Carousel(_ref4) {
     carouselItemWidth = _ref4.carouselItemWidth,
     scrollOverlayColor = _ref4.scrollOverlayColor,
     accessibilityLabel = _ref4.accessibilityLabel,
-    onChange = _ref4.onChange,
+    _onChange = _ref4.onChange,
     _ref4$indicatorVarian = _ref4.indicatorVariant,
     indicatorVariant = _ref4$indicatorVarian === void 0 ? 'gray' : _ref4$indicatorVarian,
     _ref4$navigationButto2 = _ref4.navigationButtonVariant,
@@ -231,43 +213,52 @@ var Carousel = function Carousel(_ref4) {
     _ref4$carouselItemAli = _ref4.carouselItemAlignment,
     carouselItemAlignment = _ref4$carouselItemAli === void 0 ? 'start' : _ref4$carouselItemAli,
     height = _ref4.height,
+    defaultActiveSlide = _ref4.defaultActiveSlide,
+    activeSlideProp = _ref4.activeSlide,
     props = _objectWithoutProperties(_ref4, _excluded);
   var _useTheme = useTheme(),
     platform = _useTheme.platform;
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    activeSlide = _React$useState2[0],
-    setActiveSlide = _React$useState2[1];
-  var _React$useState3 = React__default.useState(0),
+    activeIndicator = _React$useState2[0],
+    setActiveIndicator = _React$useState2[1];
+  var _useControllableState = useControllableState({
+      defaultValue: defaultActiveSlide !== null && defaultActiveSlide !== void 0 ? defaultActiveSlide : 0,
+      value: activeSlideProp,
+      onChange: function onChange(value) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    activeSlide = _useControllableState2[0],
+    setActiveSlide = _useControllableState2[1];
+  var _React$useState3 = React__default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeIndicator = _React$useState4[0],
-    setActiveIndicator = _React$useState4[1];
-  var _React$useState5 = React__default.useState(false),
+    shouldPauseAutoplay = _React$useState4[0],
+    setShouldPauseAutoplay = _React$useState4[1];
+  var _React$useState5 = React__default.useState(0),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    shouldPauseAutoplay = _React$useState6[0],
-    setShouldPauseAutoplay = _React$useState6[1];
-  var _React$useState7 = React__default.useState(0),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    startEndMargin = _React$useState8[0],
-    setStartEndMargin = _React$useState8[1];
+    startEndMargin = _React$useState6[0],
+    setStartEndMargin = _React$useState6[1];
   var containerRef = React__default.useRef(null);
   var isMobile = platform === 'onMobile';
-  var id = useId('carousel');
+  var id = useId();
+  var carouselId = "carousel-".concat(id);
   useVerifyAllowedChildren({
     componentName: 'Carousel',
     allowedComponents: [componentIds.CarouselItem],
     children: children
   });
-  var _React$useState9 = React__default.useState(
+  var _React$useState7 = React__default.useState(
     // on mobile we do not want to render the overlay
     isMobile ? true : !shouldAddStartEndSpacing),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isScrollAtStart = _React$useState8[0],
+    setScrollStart = _React$useState8[1];
+  var _React$useState9 = React__default.useState(isMobile),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    isScrollAtStart = _React$useState10[0],
-    setScrollStart = _React$useState10[1];
-  var _React$useState11 = React__default.useState(isMobile),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    isScrollAtEnd = _React$useState12[0],
-    setScrollEnd = _React$useState12[1];
+    isScrollAtEnd = _React$useState10[0],
+    setScrollEnd = _React$useState10[1];
   var isResponsive = visibleItems === 'autofit';
   var _visibleItems = visibleItems;
   if (isMobile) {
@@ -296,31 +287,36 @@ var Carousel = function Carousel(_ref4) {
 
   // calculate the start/end margin so that we can
   // deduct that margin when scrolling to a carousel item with goToSlideIndex
-  React__default.useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     var _carouselItem$getBoun, _containerRef$current;
     // Do not calculate if not needed
     if (!isResponsive && !shouldAddStartEndSpacing) return;
     if (!containerRef.current) return;
-    var carouselItemId = getCarouselItemId(id, 0);
+    var carouselItemId = getCarouselItemId(carouselId, 0);
     var carouselItem = containerRef.current.querySelector(carouselItemId);
     if (!carouselItem) return;
     var carouselItemLeft = (_carouselItem$getBoun = carouselItem.getBoundingClientRect().left) !== null && _carouselItem$getBoun !== void 0 ? _carouselItem$getBoun : 0;
     var carouselContainerLeft = (_containerRef$current = containerRef.current.getBoundingClientRect().left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
     setStartEndMargin(carouselItemLeft - carouselContainerLeft);
-  }, [id, isResponsive, shouldAddStartEndSpacing]);
-  var goToSlideIndex = function goToSlideIndex(slideIndex) {
+  }, [carouselId, isResponsive, shouldAddStartEndSpacing]);
+  var scrollToSlide = function scrollToSlide(slideIndex) {
     var _ref5;
+    var shouldAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     if (!containerRef.current) return;
-    var carouselItemId = getCarouselItemId(id, slideIndex * _visibleItems);
+    var carouselItemId = getCarouselItemId(carouselId, slideIndex * _visibleItems);
     var carouselItem = containerRef.current.querySelector(carouselItemId);
     if (!carouselItem) return;
     var carouselItemLeft = (_ref5 = carouselItem.getBoundingClientRect().left - containerRef.current.getBoundingClientRect().left) !== null && _ref5 !== void 0 ? _ref5 : 0;
     var left = containerRef.current.scrollLeft + carouselItemLeft;
     containerRef.current.scroll({
       left: left - startEndMargin,
-      behavior: 'smooth'
+      behavior: shouldAnimate ? 'smooth' : 'auto'
+    });
+  };
+  var goToSlideIndex = function goToSlideIndex(slideIndex) {
+    setActiveSlide(function () {
+      return slideIndex;
     });
-    setActiveSlide(slideIndex);
     setActiveIndicator(slideIndex);
   };
   var goToNextSlide = function goToNextSlide() {
@@ -394,13 +390,16 @@ var Carousel = function Carousel(_ref4) {
       }
       var slideIndex = Number(carouselItem === null || carouselItem === void 0 ? void 0 : carouselItem.getAttribute('data-slide-index'));
       var goTo = Math.ceil(slideIndex / _visibleItems);
+      setActiveSlide(function () {
+        return goTo;
+      });
       setActiveIndicator(goTo);
-      setActiveSlide(goTo);
     }, 50);
     carouselContainer.addEventListener('scroll', handleScroll);
     return function () {
       carouselContainer === null || carouselContainer === void 0 ? void 0 : carouselContainer.removeEventListener('scroll', handleScroll);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_visibleItems, isMobile, isResponsive, shouldAddStartEndSpacing]);
 
   // auto play
@@ -411,6 +410,18 @@ var Carousel = function Carousel(_ref4) {
     // only enable if autoplay is true & user's intent isn't to interact with carousel
     enable: autoPlay && !shouldPauseAutoplay
   });
+
+  // set initial active slide on mount
+  useIsomorphicLayoutEffect(function () {
+    if (!id) return;
+    goToSlideIndex(activeSlide);
+    scrollToSlide(activeSlide, false);
+  }, [id]);
+
+  // Scroll the carousel to the active slide
+  useDidUpdate(function () {
+    scrollToSlide(activeSlide);
+  }, [activeSlide]);
   var carouselContext = React__default.useMemo(function () {
     return {
       isResponsive: isResponsive,
@@ -418,16 +429,13 @@ var Carousel = function Carousel(_ref4) {
       carouselItemWidth: carouselItemWidth,
       carouselContainerRef: containerRef,
       setActiveIndicator: setActiveIndicator,
-      carouselId: id,
+      carouselId: carouselId,
       totalNumberOfSlides: totalNumberOfSlides,
       activeSlide: activeSlide,
       startEndMargin: startEndMargin,
       shouldAddStartEndSpacing: shouldAddStartEndSpacing
     };
-  }, [id, startEndMargin, isResponsive, _visibleItems, carouselItemWidth, totalNumberOfSlides, activeSlide, shouldAddStartEndSpacing]);
-  useSyncUpdateEffect(function () {
-    onChange === null || onChange === void 0 ? void 0 : onChange(activeSlide);
-  }, activeSlide, [onChange]);
+  }, [carouselId, startEndMargin, isResponsive, _visibleItems, carouselItemWidth, totalNumberOfSlides, activeSlide, shouldAddStartEndSpacing]);
   return /*#__PURE__*/jsx(CarouselContext.Provider, {
     value: carouselContext,
     children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
@@ -485,7 +493,7 @@ var Carousel = function Carousel(_ref4) {
           variant: navigationButtonVariant,
           onClick: goToPreviousSlide
         }) : null, /*#__PURE__*/jsx(CarouselBody, {
-          idPrefix: id,
+          idPrefix: carouselId,
           startEndMargin: startEndMargin,
           totalSlides: totalNumberOfSlides,
           shouldAddStartEndSpacing: shouldAddStartEndSpacing,