@razorpay/blade 11.39.0 → 12.0.1

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

@@ -0,0 +1,119 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _typeof from '@babel/runtime/helpers/typeof';
+import React__default from 'react';
+import '../BaseMotion/index.js';
+import { msToSeconds } from '../../utils/msToSeconds.js';
+import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
+import '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { BaseMotionEntryExit } from '../BaseMotion/BaseMotion.js';
+
+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 getFromTransform = function getFromTransform(direction, fromOffset) {
+  if (direction === 'top') {
+    return "translateY(-".concat(fromOffset, ")");
+  }
+  if (direction === 'left') {
+    return "translateX(-".concat(fromOffset, ")");
+  }
+  if (direction === 'right') {
+    return "translateX(".concat(fromOffset, ")");
+  }
+  return "translateY(".concat(fromOffset, ")");
+};
+
+/**
+ * ## Slide
+ *
+ * Slide is one of the motion presets that we expose from blade to help you make components slide in from outside of viewport
+ *
+ * If you're looking for subtle movement on enter in the viewport itself, checkout `Move` preset instead.
+ *
+ * ### Usage
+ *
+ * #### Slide in on mount
+ *
+ * ```jsx
+ * <Slide direction="bottom">
+ *   <Card />
+ * </Slide>
+ * ```
+ *
+ * #### Conditionally slide based on state
+ *
+ * ```jsx
+ * <Slide isVisible={isVisibleState}>
+ *   <Card />
+ * </Slide>
+ * ```
+ */
+var Slide = function Slide(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'inout' : _ref$type,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'bottom' : _ref$direction,
+    isVisible = _ref.isVisible,
+    motionTriggers = _ref.motionTriggers,
+    shouldUnmountWhenHidden = _ref.shouldUnmountWhenHidden,
+    fromOffset = _ref.fromOffset,
+    delay = _ref.delay;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var enterDirection = _typeof(direction) === 'object' ? direction.enter : direction;
+  var exitDirection = _typeof(direction) === 'object' ? direction.exit : direction;
+  var isEnterDirectionHorizontal = ['left', 'right'].includes(enterDirection);
+  var isExitDirectionHorizontal = ['left', 'right'].includes(exitDirection);
+  var defaultOffset = isEnterDirectionHorizontal ? '100vw' : '100vh';
+  var enterTransform = getFromTransform(enterDirection, fromOffset !== null && fromOffset !== void 0 ? fromOffset : defaultOffset);
+  var exitTransform = getFromTransform(exitDirection, fromOffset !== null && fromOffset !== void 0 ? fromOffset : defaultOffset);
+  var enterDelay = _typeof(delay) === 'object' ? delay.enter : delay;
+  var exitDelay = _typeof(delay) === 'object' ? delay.exit : delay;
+  var moveVariants = React__default.useMemo(function () {
+    return {
+      initial: {
+        // We keep element in view with opacity 0 initially so that it works with `in-view` trigger as expected
+        opacity: 0
+      },
+      animate: {
+        transform: [enterTransform, 'translateY(0%)'],
+        opacity: 1,
+        transition: _objectSpread(_objectSpread({}, enterDelay ? {
+          delay: msToSeconds(theme.motion.delay[enterDelay])
+        } : {}), {}, {
+          duration: msToSeconds(isEnterDirectionHorizontal ? theme.motion.duration.xmoderate : theme.motion.duration['2xgentle']),
+          ease: cssBezierToArray(isEnterDirectionHorizontal ? castWebType(theme.motion.easing.entrance) : castWebType(theme.motion.easing.emphasized))
+        })
+      },
+      exit: {
+        opacity: 0,
+        transform: exitTransform,
+        transitionEnd: {
+          transform: enterTransform
+        },
+        transition: _objectSpread(_objectSpread({}, exitDelay ? {
+          delay: msToSeconds(theme.motion.delay[exitDelay])
+        } : {}), {}, {
+          duration: msToSeconds(isExitDirectionHorizontal ? theme.motion.duration.moderate : theme.motion.duration.xgentle),
+          ease: cssBezierToArray(isExitDirectionHorizontal ? castWebType(theme.motion.easing.exit) : castWebType(theme.motion.easing.emphasized))
+        })
+      }
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [enterDirection, exitDirection, isEnterDirectionHorizontal, isExitDirectionHorizontal, theme.name]);
+  return /*#__PURE__*/jsx(BaseMotionEntryExit, {
+    motionVariants: moveVariants,
+    children: children,
+    type: type,
+    isVisible: isVisible,
+    motionTriggers: motionTriggers,
+    shouldUnmountWhenHidden: shouldUnmountWhenHidden
+  });
+};
+
+export { Slide };
+//# sourceMappingURL=Slide.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slide.web.js","sources":["../../../../../../src/components/Slide/Slide.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { SlideProps } from './types';\nimport { BaseMotionEntryExit } from '~components/BaseMotion';\nimport type { MotionVariantsType } from '~components/BaseMotion';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType, useTheme } from '~utils';\n\nconst getFromTransform = (\n  direction: SlideProps['direction'],\n  fromOffset: SlideProps['fromOffset'],\n): `translate${string}` => {\n  if (direction === 'top') {\n    return `translateY(-${fromOffset})`;\n  }\n\n  if (direction === 'left') {\n    return `translateX(-${fromOffset})`;\n  }\n\n  if (direction === 'right') {\n    return `translateX(${fromOffset})`;\n  }\n\n  return `translateY(${fromOffset})`;\n};\n\n/**\n * ## Slide\n *\n * Slide is one of the motion presets that we expose from blade to help you make components slide in from outside of viewport\n *\n * If you're looking for subtle movement on enter in the viewport itself, checkout `Move` preset instead.\n *\n * ### Usage\n *\n * #### Slide in on mount\n *\n * ```jsx\n * <Slide direction=\"bottom\">\n *   <Card />\n * </Slide>\n * ```\n *\n * #### Conditionally slide based on state\n *\n * ```jsx\n * <Slide isVisible={isVisibleState}>\n *   <Card />\n * </Slide>\n * ```\n */\nconst Slide = ({\n  children,\n  type = 'inout',\n  direction = 'bottom',\n  isVisible,\n  motionTriggers,\n  shouldUnmountWhenHidden,\n  fromOffset,\n  delay,\n}: SlideProps): React.ReactElement => {\n  const { theme } = useTheme();\n\n  const enterDirection = typeof direction === 'object' ? direction.enter : direction;\n  const exitDirection = typeof direction === 'object' ? direction.exit : direction;\n  const isEnterDirectionHorizontal = ['left', 'right'].includes(enterDirection);\n  const isExitDirectionHorizontal = ['left', 'right'].includes(exitDirection);\n\n  const defaultOffset: SlideProps['fromOffset'] = isEnterDirectionHorizontal ? '100vw' : '100vh';\n\n  const enterTransform = getFromTransform(enterDirection, fromOffset ?? defaultOffset);\n  const exitTransform = getFromTransform(exitDirection, fromOffset ?? defaultOffset);\n\n  const enterDelay = typeof delay === 'object' ? delay.enter : delay;\n  const exitDelay = typeof delay === 'object' ? delay.exit : delay;\n\n  const moveVariants: MotionVariantsType = React.useMemo(\n    () => ({\n      initial: {\n        // We keep element in view with opacity 0 initially so that it works with `in-view` trigger as expected\n        opacity: 0,\n      },\n      animate: {\n        transform: [enterTransform, 'translateY(0%)'],\n        opacity: 1,\n        transition: {\n          // We have to make sure we don't add delay prop because if we define it, it takes precedence in stagger.\n          // Even setting `undefined` would break the stagger\n          ...(enterDelay ? { delay: msToSeconds(theme.motion.delay[enterDelay]) } : {}),\n          duration: msToSeconds(\n            isEnterDirectionHorizontal\n              ? theme.motion.duration.xmoderate\n              : theme.motion.duration['2xgentle'],\n          ),\n          ease: cssBezierToArray(\n            isEnterDirectionHorizontal\n              ? castWebType(theme.motion.easing.entrance)\n              : castWebType(theme.motion.easing.emphasized),\n          ),\n        },\n      },\n      exit: {\n        opacity: 0,\n        transform: exitTransform,\n        transitionEnd: {\n          transform: enterTransform,\n        },\n        transition: {\n          // We have to make sure we don't add delay prop because if we define it, it takes precedence in stagger.\n          // Even setting `undefined` would break the stagger\n          ...(exitDelay ? { delay: msToSeconds(theme.motion.delay[exitDelay]) } : {}),\n          duration: msToSeconds(\n            isExitDirectionHorizontal\n              ? theme.motion.duration.moderate\n              : theme.motion.duration.xgentle,\n          ),\n          ease: cssBezierToArray(\n            isExitDirectionHorizontal\n              ? castWebType(theme.motion.easing.exit)\n              : castWebType(theme.motion.easing.emphasized),\n          ),\n        },\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      enterDirection,\n      exitDirection,\n      isEnterDirectionHorizontal,\n      isExitDirectionHorizontal,\n      theme.name,\n    ],\n  );\n\n  return (\n    <BaseMotionEntryExit\n      motionVariants={moveVariants}\n      children={children}\n      type={type}\n      isVisible={isVisible}\n      motionTriggers={motionTriggers}\n      shouldUnmountWhenHidden={shouldUnmountWhenHidden}\n    />\n  );\n};\n\nexport { Slide };\n"],"names":["getFromTransform","direction","fromOffset","concat","Slide","_ref","children","_ref$type","type","_ref$direction","isVisible","motionTriggers","shouldUnmountWhenHidden","delay","_useTheme","useTheme","theme","enterDirection","_typeof","enter","exitDirection","exit","isEnterDirectionHorizontal","includes","isExitDirectionHorizontal","defaultOffset","enterTransform","exitTransform","enterDelay","exitDelay","moveVariants","React","useMemo","initial","opacity","animate","transform","transition","_objectSpread","msToSeconds","motion","duration","xmoderate","ease","cssBezierToArray","castWebType","easing","entrance","emphasized","transitionEnd","moderate","xgentle","name","_jsx","BaseMotionEntryExit","motionVariants"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Slide } from './Slide.web.js';
+//# sourceMappingURL=index.js.map

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

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

package/build/lib/web/development/components/Spinner/BaseSpinner/BaseSpinner.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import 'react';
+import React__default from 'react';
 import { dimensions } from './spinnerTokens.js';
 import SpinnerIcon from './SpinnerIcon.js';
 import { SpinningBox } from './SpinningBox.web.js';
@@ -36,7 +36,7 @@ var getColor = function getColor(_ref) {
   }
   return getIn(theme.colors, 'interactive.icon.gray.subtle');
 };
-var BaseSpinner = function BaseSpinner(_ref2) {
+var _BaseSpinner = function _BaseSpinner(_ref2, ref) {
   var label = _ref2.label,
     _ref2$labelPosition = _ref2.labelPosition,
     labelPosition = _ref2$labelPosition === void 0 ? 'right' : _ref2$labelPosition,
@@ -49,7 +49,9 @@ var BaseSpinner = function BaseSpinner(_ref2) {
     styledProps = _objectWithoutProperties(_ref2, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref
+  }, metaAttribute({
     name: MetaConstants.Spinner,
     testID: testID
   })), getStyledProps(styledProps)), {}, {
@@ -83,6 +85,7 @@ var BaseSpinner = function BaseSpinner(_ref2) {
     }))
   }));
 };
+var BaseSpinner = /*#__PURE__*/React__default.forwardRef(_BaseSpinner);
 
 export { BaseSpinner };
 //# sourceMappingURL=BaseSpinner.js.map

package/build/lib/web/development/components/Spinner/BaseSpinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sources":["../../../../../../../src/components/Spinner/BaseSpinner/BaseSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { dimensions } from './spinnerTokens';\nimport SpinnerIcon from './SpinnerIcon';\nimport { SpinningBox } from './SpinningBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype BaseSpinnerProps = {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'white' | FeedbackColors;\n  /**\n   * Sets the label of the spinner.\n   *\n   * @default 'right'\n   */\n  label?: string;\n  /**\n   * Sets the label of the spinner.\n   *\n   */\n  labelPosition?: 'right' | 'bottom';\n  /**\n   * Sets the size of the spinner.\n   *\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large' | 'xlarge';\n  /**\n   * Sets the aria-label for web & accessibilityLabel react-native.\n   *\n   */\n  accessibilityLabel: string;\n} & TestID &\n  StyledPropsBlade;\n\nconst getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: Theme }): string => {\n  if (color && color === 'white') {\n    return getIn(theme.colors, 'interactive.icon.staticWhite.subtle');\n  }\n  if (color && color !== 'neutral') {\n    return getIn(theme.colors, `interactive.icon.${color}.subtle`);\n  }\n  return getIn(theme.colors, 'interactive.icon.gray.subtle');\n};\n\nconst BaseSpinner = ({\n  label,\n  labelPosition = 'right',\n  accessibilityLabel,\n  color = 'neutral',\n  size = 'medium',\n  testID,\n  ...styledProps\n}: BaseSpinnerProps): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.Spinner, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        flexDirection={labelPosition === 'right' ? 'row' : 'column'}\n        {...makeAccessible({\n          label: accessibilityLabel,\n          role: 'progressbar',\n        })}\n      >\n        <SpinningBox>\n          <SpinnerIcon dimensions={makeSize(dimensions[size])} color={getColor({ color, theme })} />\n        </SpinningBox>\n        {label && label.trim().length > 0 ? (\n          <BaseBox\n            marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}\n            marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}\n          >\n            <Text variant=\"body\" weight=\"regular\" size=\"small\" color=\"surface.text.gray.muted\">\n              {label}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { BaseSpinnerProps };\nexport { BaseSpinner };\n"],"names":["getColor","_ref","color","theme","getIn","colors","concat","BaseSpinner","_ref2","label","_ref2$labelPosition","labelPosition","accessibilityLabel","_ref2$color","_ref2$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Spinner","getStyledProps","children","_jsxs","display","alignItems","flexDirection","makeAccessible","role","SpinningBox","SpinnerIcon","dimensions","makeSize","trim","length","marginLeft","marginTop","Text","variant","weight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAqF;AAAA,EAAA,IAA/EC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;AAC9B,EAAA,IAAID,KAAK,IAAIA,KAAK,KAAK,OAAO,EAAE;AAC9B,IAAA,OAAOE,KAAK,CAACD,KAAK,CAACE,MAAM,EAAE,qCAAqC,CAAC,CAAA;AACnE,GAAA;AACA,EAAA,IAAIH,KAAK,IAAIA,KAAK,KAAK,SAAS,EAAE;IAChC,OAAOE,KAAK,CAACD,KAAK,CAACE,MAAM,sBAAAC,MAAA,CAAsBJ,KAAK,EAAA,SAAA,CAAS,CAAC,CAAA;AAChE,GAAA;AACA,EAAA,OAAOE,KAAK,CAACD,KAAK,CAACE,MAAM,EAAE,8BAA8B,CAAC,CAAA;AAC5D,CAAC,CAAA;AAED,IAAME,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAQ2B;AAAA,EAAA,IAP1CC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAAC,mBAAA,GAAAF,KAAA,CACLG,aAAa;AAAbA,IAAAA,aAAa,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,mBAAA;IACvBE,kBAAkB,GAAAJ,KAAA,CAAlBI,kBAAkB;IAAAC,WAAA,GAAAL,KAAA,CAClBN,KAAK;AAALA,IAAAA,KAAK,GAAAW,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA;IAAAC,UAAA,GAAAN,KAAA,CACjBO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,UAAA;IACfE,MAAM,GAAAR,KAAA,CAANQ,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAV,KAAA,EAAAW,SAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBlB,KAAK,GAAAiB,SAAA,CAALjB,KAAK,CAAA;EACb,oBACEmB,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,OAAO;AAAEZ,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EACtDa,cAAc,CAACZ,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAa,IAAAA,QAAA,eAE/BC,IAAA,CAACR,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACNQ,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,aAAa,EAAEvB,aAAa,KAAK,OAAO,GAAG,KAAK,GAAG,QAAA;AAAS,KAAA,EACxDwB,cAAc,CAAC;AACjB1B,MAAAA,KAAK,EAAEG,kBAAkB;AACzBwB,MAAAA,IAAI,EAAE,aAAA;AACR,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAN,QAAA,EAAA,cAEFR,GAAA,CAACe,WAAW,EAAA;QAAAP,QAAA,eACVR,GAAA,CAACgB,WAAW,EAAA;AAACC,UAAAA,UAAU,EAAEC,QAAQ,CAACD,UAAU,CAACxB,IAAI,CAAC,CAAE;UAACb,KAAK,EAAEF,QAAQ,CAAC;AAAEE,YAAAA,KAAK,EAALA,KAAK;AAAEC,YAAAA,KAAK,EAALA,KAAAA;WAAO,CAAA;SAAI,CAAA;AAAC,OAC/E,CAAC,EACbM,KAAK,IAAIA,KAAK,CAACgC,IAAI,EAAE,CAACC,MAAM,GAAG,CAAC,gBAC/BpB,GAAA,CAACC,OAAO,EAAA;AACNoB,QAAAA,UAAU,EAAEhC,aAAa,KAAK,OAAO,GAAG,WAAW,GAAG,WAAY;AAClEiC,QAAAA,SAAS,EAAEjC,aAAa,KAAK,QAAQ,GAAG,WAAW,GAAG,WAAY;QAAAmB,QAAA,eAElER,GAAA,CAACuB,IAAI,EAAA;AAACC,UAAAA,OAAO,EAAC,MAAM;AAACC,UAAAA,MAAM,EAAC,SAAS;AAAChC,UAAAA,IAAI,EAAC,OAAO;AAACb,UAAAA,KAAK,EAAC,yBAAyB;AAAA4B,UAAAA,QAAA,EAC/ErB,KAAAA;SACG,CAAA;OACC,CAAC,GACR,IAAI,CAAA;KACD,CAAA,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"BaseSpinner.js","sources":["../../../../../../../src/components/Spinner/BaseSpinner/BaseSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { dimensions } from './spinnerTokens';\nimport SpinnerIcon from './SpinnerIcon';\nimport { SpinningBox } from './SpinningBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { BladeElementRef, TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype BaseSpinnerProps = {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'white' | FeedbackColors;\n  /**\n   * Sets the label of the spinner.\n   *\n   * @default 'right'\n   */\n  label?: string;\n  /**\n   * Sets the label of the spinner.\n   *\n   */\n  labelPosition?: 'right' | 'bottom';\n  /**\n   * Sets the size of the spinner.\n   *\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large' | 'xlarge';\n  /**\n   * Sets the aria-label for web & accessibilityLabel react-native.\n   *\n   */\n  accessibilityLabel: string;\n} & TestID &\n  StyledPropsBlade;\n\nconst getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: Theme }): string => {\n  if (color && color === 'white') {\n    return getIn(theme.colors, 'interactive.icon.staticWhite.subtle');\n  }\n  if (color && color !== 'neutral') {\n    return getIn(theme.colors, `interactive.icon.${color}.subtle`);\n  }\n  return getIn(theme.colors, 'interactive.icon.gray.subtle');\n};\n\nconst _BaseSpinner = (\n  {\n    label,\n    labelPosition = 'right',\n    accessibilityLabel,\n    color = 'neutral',\n    size = 'medium',\n    testID,\n    ...styledProps\n  }: BaseSpinnerProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      ref={ref as never}\n      {...metaAttribute({ name: MetaConstants.Spinner, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        flexDirection={labelPosition === 'right' ? 'row' : 'column'}\n        {...makeAccessible({\n          label: accessibilityLabel,\n          role: 'progressbar',\n        })}\n      >\n        <SpinningBox>\n          <SpinnerIcon dimensions={makeSize(dimensions[size])} color={getColor({ color, theme })} />\n        </SpinningBox>\n        {label && label.trim().length > 0 ? (\n          <BaseBox\n            marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}\n            marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}\n          >\n            <Text variant=\"body\" weight=\"regular\" size=\"small\" color=\"surface.text.gray.muted\">\n              {label}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst BaseSpinner = React.forwardRef(_BaseSpinner);\n\nexport type { BaseSpinnerProps };\nexport { BaseSpinner };\n"],"names":["getColor","_ref","color","theme","getIn","colors","concat","_BaseSpinner","_ref2","ref","label","_ref2$labelPosition","labelPosition","accessibilityLabel","_ref2$color","_ref2$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Spinner","getStyledProps","children","_jsxs","display","alignItems","flexDirection","makeAccessible","role","SpinningBox","SpinnerIcon","dimensions","makeSize","trim","length","marginLeft","marginTop","Text","variant","weight","BaseSpinner","React","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/Spinner/BaseSpinner/spinnerTokens.js

@@ -5,7 +5,7 @@ var dimensions = {
 };
 var motion = {
   duration: 'duration.2xgentle',
-  easing: 'easing.standard.attentive'
+  easing: 'easing.overshoot'
 };
 
 export { dimensions, motion };

package/build/lib/web/development/components/Spinner/BaseSpinner/spinnerTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinnerTokens.js","sources":["../../../../../../../src/components/Spinner/BaseSpinner/spinnerTokens.ts"],"sourcesContent":["import type { DurationString, EasingString } from '~tokens/global';\n\nconst dimensions = {\n  medium: 16,\n  large: 20,\n  xlarge: 24,\n} as const;\n\nconst motion: {\n  duration: DurationString;\n  easing: EasingString;\n} = {\n  duration: 'duration.2xgentle',\n  easing: 'easing.standard.attentive',\n};\n\nexport { dimensions, motion };\n"],"names":["dimensions","medium","large","xlarge","motion","duration","easing"],"mappings":"AAEA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAA;AACV,EAAU;AAEV,IAAMC,MAGL,GAAG;AACFC,EAAAA,QAAQ,EAAE,mBAAmB;AAC7BC,EAAAA,MAAM,EAAE,2BAAA;AACV;;;;"}
+{"version":3,"file":"spinnerTokens.js","sources":["../../../../../../../src/components/Spinner/BaseSpinner/spinnerTokens.ts"],"sourcesContent":["import type { DurationString, EasingString } from '~tokens/global';\n\nconst dimensions = {\n  medium: 16,\n  large: 20,\n  xlarge: 24,\n} as const;\n\nconst motion: {\n  duration: DurationString;\n  easing: EasingString;\n} = {\n  duration: 'duration.2xgentle',\n  easing: 'easing.overshoot',\n};\n\nexport { dimensions, motion };\n"],"names":["dimensions","medium","large","xlarge","motion","duration","easing"],"mappings":"AAEA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAA;AACV,EAAU;AAEV,IAAMC,MAGL,GAAG;AACFC,EAAAA,QAAQ,EAAE,mBAAmB;AAC7BC,EAAAA,MAAM,EAAE,kBAAA;AACV;;;;"}

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

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
 import '../BaseSpinner/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseSpinner } from '../BaseSpinner/BaseSpinner.js';
@@ -7,7 +8,7 @@ import { BaseSpinner } from '../BaseSpinner/BaseSpinner.js';
 var _excluded = ["label", "labelPosition", "accessibilityLabel", "color", "size", "testID"];
 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 Spinner = function Spinner(_ref) {
+var _Spinner = function _Spinner(_ref, ref) {
   var _ref2;
   var label = _ref.label,
     labelPosition = _ref.labelPosition,
@@ -19,6 +20,7 @@ var Spinner = function Spinner(_ref) {
     testID = _ref.testID,
     styledProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(BaseSpinner, _objectSpread({
+    ref: ref,
     label: label,
     labelPosition: labelPosition,
     accessibilityLabel: (_ref2 = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label) !== null && _ref2 !== void 0 ? _ref2 : 'Loading',
@@ -27,6 +29,7 @@ var Spinner = function Spinner(_ref) {
     testID: testID
   }, styledProps));
 };
+var Spinner = /*#__PURE__*/React__default.forwardRef(_Spinner);
 
 export { Spinner };
 //# sourceMappingURL=Spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../../../../src/components/Spinner/Spinner/Spinner.tsx"],"sourcesContent":["import { BaseSpinner } from '../BaseSpinner';\nimport type { BaseSpinnerProps } from '../BaseSpinner';\n\ntype SpinnerProps = BaseSpinnerProps & {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'neutral' | 'white';\n};\n\nconst Spinner = ({\n  label,\n  labelPosition,\n  accessibilityLabel,\n  color = 'neutral',\n  size = 'medium',\n  testID,\n  ...styledProps\n}: SpinnerProps): React.ReactElement => {\n  return (\n    <BaseSpinner\n      label={label}\n      labelPosition={labelPosition}\n      accessibilityLabel={accessibilityLabel ?? label ?? 'Loading'}\n      color={color}\n      size={size}\n      testID={testID}\n      {...styledProps}\n    />\n  );\n};\n\nexport type { SpinnerProps };\nexport { Spinner };\n"],"names":["Spinner","_ref","_ref2","label","labelPosition","accessibilityLabel","_ref$color","color","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_jsx","BaseSpinner","_objectSpread"],"mappings":";;;;;;;;;AAYA,IAAMA,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAQ2B;AAAA,EAAA,IAAAC,KAAA,CAAA;AAAA,EAAA,IAPtCC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,aAAa,GAAAH,IAAA,CAAbG,aAAa;IACbC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAAAC,UAAA,GAAAL,IAAA,CAClBM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IAAAE,SAAA,GAAAP,IAAA,CACjBQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACfE,MAAM,GAAAT,IAAA,CAANS,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA,CAAA;AAEd,EAAA,oBACEC,GAAA,CAACC,WAAW,EAAAC,aAAA,CAAA;AACVb,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,kBAAkB,EAAAH,CAAAA,KAAA,GAAEG,kBAAkB,aAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAlBA,kBAAkB,GAAIF,KAAK,MAAAD,IAAAA,IAAAA,KAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAA,GAAI,SAAU;AAC7DK,IAAAA,KAAK,EAAEA,KAAM;AACbE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAAA;GACJC,EAAAA,WAAW,CAChB,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../../../../../../../src/components/Spinner/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseSpinner } from '../BaseSpinner';\nimport type { BaseSpinnerProps } from '../BaseSpinner';\nimport type { BladeElementRef } from '~utils/types';\n\ntype SpinnerProps = BaseSpinnerProps & {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'neutral' | 'white';\n};\n\nconst _Spinner = (\n  {\n    label,\n    labelPosition,\n    accessibilityLabel,\n    color = 'neutral',\n    size = 'medium',\n    testID,\n    ...styledProps\n  }: SpinnerProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  return (\n    <BaseSpinner\n      ref={ref as never}\n      label={label}\n      labelPosition={labelPosition}\n      accessibilityLabel={accessibilityLabel ?? label ?? 'Loading'}\n      color={color}\n      size={size}\n      testID={testID}\n      {...styledProps}\n    />\n  );\n};\n\nconst Spinner = React.forwardRef(_Spinner);\n\nexport type { SpinnerProps };\nexport { Spinner };\n"],"names":["_Spinner","_ref","ref","_ref2","label","labelPosition","accessibilityLabel","_ref$color","color","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_jsx","BaseSpinner","_objectSpread","Spinner","React","forwardRef"],"mappings":";;;;;;;;;;AAcA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAUZC,GAA+B,EACR;AAAA,EAAA,IAAAC,KAAA,CAAA;AAAA,EAAA,IATrBC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,aAAa,GAAAJ,IAAA,CAAbI,aAAa;IACbC,kBAAkB,GAAAL,IAAA,CAAlBK,kBAAkB;IAAAC,UAAA,GAAAN,IAAA,CAClBO,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IAAAE,SAAA,GAAAR,IAAA,CACjBS,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACfE,MAAM,GAAAV,IAAA,CAANU,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA,CAAA,CAAA;AAIhB,EAAA,oBACEC,GAAA,CAACC,WAAW,EAAAC,aAAA,CAAA;AACVf,IAAAA,GAAG,EAAEA,GAAa;AAClBE,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,kBAAkB,EAAAH,CAAAA,KAAA,GAAEG,kBAAkB,aAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAlBA,kBAAkB,GAAIF,KAAK,MAAAD,IAAAA,IAAAA,KAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAA,GAAI,SAAU;AAC7DK,IAAAA,KAAK,EAAEA,KAAM;AACbE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAAA;GACJC,EAAAA,WAAW,CAChB,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMM,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAACpB,QAAQ;;;;"}

package/build/lib/web/development/components/SpotlightPopoverTour/TourMask.web.js

@@ -45,8 +45,8 @@ var FadeRect = /*#__PURE__*/React__default.memo(function (_ref3) {
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var duration = theme.motion.duration.gentle;
-  var enter = /*#__PURE__*/css(["animation:", " ", " ", ";animation-fill-mode:forwards;"], scaleIn, makeMotionTime(duration), theme.motion.easing.entrance.effective);
-  var exit = /*#__PURE__*/css(["animation:", " ", " ", ";animation-fill-mode:forwards;"], fadeOut, makeMotionTime(duration), theme.motion.easing.exit.effective);
+  var enter = /*#__PURE__*/css(["animation:", " ", " ", ";animation-fill-mode:forwards;"], scaleIn, makeMotionTime(duration), theme.motion.easing.entrance);
+  var exit = /*#__PURE__*/css(["animation:", " ", " ", ";animation-fill-mode:forwards;"], fadeOut, makeMotionTime(duration), theme.motion.easing.exit);
   var _usePresence = usePresence(Boolean(show), {
       transitionDuration: duration,
       initialEnter: false

package/build/lib/web/development/components/SpotlightPopoverTour/TourMask.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourMask.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourMask.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\nimport React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport usePresence from 'use-presence';\nimport type { SpotlightPopoverTourMaskRect } from './types';\nimport { useTheme } from '~components/BladeProvider';\nimport { useWindowSize } from '~utils/useWindowSize';\nimport { makeSpace } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst scaleIn = keyframes`\n  from {\n    fill-opacity: 0;\n  }\n  to {\n    fill-opacity: 1;\n  }\n`;\nconst fadeOut = keyframes`\n  from {\n    fill-opacity: 1;\n  }\n  to {\n    fill-opacity: 0;\n  }\n`;\n\nconst pulsingAnimation = keyframes`\n  0% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst AnimatedFade = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) =>\n    animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `,\n);\n\nconst StyledPlusing = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) => {\n    return animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `;\n  },\n);\n\ntype FadeRectProps = React.ComponentProps<'rect'> & {\n  show: boolean;\n};\nconst FadeRect = React.memo(\n  ({ show, children, ...rest }: FadeRectProps): React.ReactElement => {\n    const { theme } = useTheme();\n\n    const duration = theme.motion.duration.gentle;\n    const enter = css`\n      animation: ${scaleIn} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.entrance.effective as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const exit = css`\n      animation: ${fadeOut} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.exit.effective as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const { isVisible } = usePresence(Boolean(show), {\n      transitionDuration: duration,\n      initialEnter: false,\n    });\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <AnimatedFade animationType={isVisible ? enter : exit} {...rest}>\n        {children}\n      </AnimatedFade>\n    );\n  },\n);\n\nconst PulsingRect = React.memo(\n  (props: React.ComponentProps<'rect'>): React.ReactElement => {\n    const pulsing = css`\n      animation: ${pulsingAnimation} 2s;\n      animation-iteration-count: infinite;\n      animation-direction: alternate;\n    `;\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <StyledPlusing animationType={pulsing} {...props} />\n    );\n  },\n);\n\ntype SpotlightPopoverTourMaskProps = {\n  padding: number;\n  size: SpotlightPopoverTourMaskRect;\n  isTransitioning: boolean;\n};\n\nconst absoluteFill = {\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  zIndex: componentZIndices.tourMask,\n} as const;\n\nconst _SpotlightPopoverTourMask = ({\n  padding,\n  size,\n  isTransitioning,\n}: SpotlightPopoverTourMaskProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { width: windowWidth, height: windowHeight } = useWindowSize();\n\n  const width = size.width + padding;\n  const height = size.height + padding;\n  const x = size.x - (width - size.width) / 2;\n  const y = size.y - (height - size.height) / 2;\n\n  const borderWidth = theme.spacing[1];\n  const borderRadius = theme.spacing[2];\n\n  const isSizeZero = size.width === 0 || size.height === 0;\n\n  return (\n    <svg\n      style={absoluteFill}\n      viewBox={`0 0 ${windowWidth} ${windowHeight}`}\n      fill=\"none\"\n      stroke=\"none\"\n      {...metaAttribute({ name: MetaConstants.TourMask })}\n    >\n      <PulsingRect\n        x={x + borderWidth / 2}\n        y={y + borderWidth / 2}\n        width={width - borderWidth}\n        height={height - borderWidth}\n        stroke={theme.colors.surface.background.primary.intense}\n        strokeWidth={makeSpace(borderWidth)}\n        rx={borderRadius - 1}\n        ry={borderRadius - 1}\n        fill=\"transparent\"\n        opacity={isSizeZero ? 0 : 1}\n      />\n\n      <mask id=\"tour-mask\" x={0} y={0} height=\"100%\" width=\"100%\" stroke=\"none\">\n        <rect height=\"100%\" width=\"100%\" fill=\"#fff\" />\n        {!isSizeZero && (\n          <FadeRect\n            show={!isTransitioning}\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            rx={borderRadius}\n            ry={borderRadius}\n            fill=\"#000\"\n          />\n        )}\n      </mask>\n      <rect\n        height=\"100%\"\n        width=\"100%\"\n        mask=\"url(#tour-mask)\"\n        fill={theme.colors.overlay.background.subtle}\n      />\n    </svg>\n  );\n};\n\nconst SpotlightPopoverTourMask = assignWithoutSideEffects(React.memo(_SpotlightPopoverTourMask), {\n  displayName: 'TourMask',\n});\nexport { SpotlightPopoverTourMask };\n"],"names":["scaleIn","keyframes","fadeOut","pulsingAnimation","AnimatedFade","styled","rect","withConfig","displayName","componentId","_ref","animationType","css","StyledPlusing","_ref2","FadeRect","React","memo","_ref3","show","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","duration","motion","gentle","enter","makeMotionTime","easing","entrance","effective","exit","_usePresence","usePresence","Boolean","transitionDuration","initialEnter","isVisible","_jsx","_objectSpread","PulsingRect","props","pulsing","absoluteFill","position","top","left","bottom","right","zIndex","componentZIndices","tourMask","_SpotlightPopoverTourMask","_ref4","padding","size","isTransitioning","_useTheme2","_useWindowSize","useWindowSize","windowWidth","width","windowHeight","height","x","y","borderWidth","spacing","borderRadius","isSizeZero","_jsxs","style","viewBox","concat","fill","stroke","metaAttribute","name","MetaConstants","TourMask","colors","surface","background","primary","intense","strokeWidth","makeSpace","rx","ry","opacity","id","mask","overlay","subtle","SpotlightPopoverTourMask","assignWithoutSideEffects"],"mappings":"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"}
+{"version":3,"file":"TourMask.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourMask.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\nimport React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport usePresence from 'use-presence';\nimport type { SpotlightPopoverTourMaskRect } from './types';\nimport { useTheme } from '~components/BladeProvider';\nimport { useWindowSize } from '~utils/useWindowSize';\nimport { makeSpace } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst scaleIn = keyframes`\n  from {\n    fill-opacity: 0;\n  }\n  to {\n    fill-opacity: 1;\n  }\n`;\nconst fadeOut = keyframes`\n  from {\n    fill-opacity: 1;\n  }\n  to {\n    fill-opacity: 0;\n  }\n`;\n\nconst pulsingAnimation = keyframes`\n  0% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst AnimatedFade = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) =>\n    animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `,\n);\n\nconst StyledPlusing = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) => {\n    return animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `;\n  },\n);\n\ntype FadeRectProps = React.ComponentProps<'rect'> & {\n  show: boolean;\n};\nconst FadeRect = React.memo(\n  ({ show, children, ...rest }: FadeRectProps): React.ReactElement => {\n    const { theme } = useTheme();\n\n    const duration = theme.motion.duration.gentle;\n    const enter = css`\n      animation: ${scaleIn} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.entrance as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const exit = css`\n      animation: ${fadeOut} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.exit as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const { isVisible } = usePresence(Boolean(show), {\n      transitionDuration: duration,\n      initialEnter: false,\n    });\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <AnimatedFade animationType={isVisible ? enter : exit} {...rest}>\n        {children}\n      </AnimatedFade>\n    );\n  },\n);\n\nconst PulsingRect = React.memo(\n  (props: React.ComponentProps<'rect'>): React.ReactElement => {\n    const pulsing = css`\n      animation: ${pulsingAnimation} 2s;\n      animation-iteration-count: infinite;\n      animation-direction: alternate;\n    `;\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <StyledPlusing animationType={pulsing} {...props} />\n    );\n  },\n);\n\ntype SpotlightPopoverTourMaskProps = {\n  padding: number;\n  size: SpotlightPopoverTourMaskRect;\n  isTransitioning: boolean;\n};\n\nconst absoluteFill = {\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  zIndex: componentZIndices.tourMask,\n} as const;\n\nconst _SpotlightPopoverTourMask = ({\n  padding,\n  size,\n  isTransitioning,\n}: SpotlightPopoverTourMaskProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { width: windowWidth, height: windowHeight } = useWindowSize();\n\n  const width = size.width + padding;\n  const height = size.height + padding;\n  const x = size.x - (width - size.width) / 2;\n  const y = size.y - (height - size.height) / 2;\n\n  const borderWidth = theme.spacing[1];\n  const borderRadius = theme.spacing[2];\n\n  const isSizeZero = size.width === 0 || size.height === 0;\n\n  return (\n    <svg\n      style={absoluteFill}\n      viewBox={`0 0 ${windowWidth} ${windowHeight}`}\n      fill=\"none\"\n      stroke=\"none\"\n      {...metaAttribute({ name: MetaConstants.TourMask })}\n    >\n      <PulsingRect\n        x={x + borderWidth / 2}\n        y={y + borderWidth / 2}\n        width={width - borderWidth}\n        height={height - borderWidth}\n        stroke={theme.colors.surface.background.primary.intense}\n        strokeWidth={makeSpace(borderWidth)}\n        rx={borderRadius - 1}\n        ry={borderRadius - 1}\n        fill=\"transparent\"\n        opacity={isSizeZero ? 0 : 1}\n      />\n\n      <mask id=\"tour-mask\" x={0} y={0} height=\"100%\" width=\"100%\" stroke=\"none\">\n        <rect height=\"100%\" width=\"100%\" fill=\"#fff\" />\n        {!isSizeZero && (\n          <FadeRect\n            show={!isTransitioning}\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            rx={borderRadius}\n            ry={borderRadius}\n            fill=\"#000\"\n          />\n        )}\n      </mask>\n      <rect\n        height=\"100%\"\n        width=\"100%\"\n        mask=\"url(#tour-mask)\"\n        fill={theme.colors.overlay.background.subtle}\n      />\n    </svg>\n  );\n};\n\nconst SpotlightPopoverTourMask = assignWithoutSideEffects(React.memo(_SpotlightPopoverTourMask), {\n  displayName: 'TourMask',\n});\nexport { SpotlightPopoverTourMask };\n"],"names":["scaleIn","keyframes","fadeOut","pulsingAnimation","AnimatedFade","styled","rect","withConfig","displayName","componentId","_ref","animationType","css","StyledPlusing","_ref2","FadeRect","React","memo","_ref3","show","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","duration","motion","gentle","enter","makeMotionTime","easing","entrance","exit","_usePresence","usePresence","Boolean","transitionDuration","initialEnter","isVisible","_jsx","_objectSpread","PulsingRect","props","pulsing","absoluteFill","position","top","left","bottom","right","zIndex","componentZIndices","tourMask","_SpotlightPopoverTourMask","_ref4","padding","size","isTransitioning","_useTheme2","_useWindowSize","useWindowSize","windowWidth","width","windowHeight","height","x","y","borderWidth","spacing","borderRadius","isSizeZero","_jsxs","style","viewBox","concat","fill","stroke","metaAttribute","name","MetaConstants","TourMask","colors","surface","background","primary","intense","strokeWidth","makeSpace","rx","ry","opacity","id","mask","overlay","subtle","SpotlightPopoverTourMask","assignWithoutSideEffects"],"mappings":"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"}

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

@@ -0,0 +1,73 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _typeof from '@babel/runtime/helpers/typeof';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { StaggerContext } from './StaggerProvider.js';
+import '../BaseMotion/index.js';
+import { msToSeconds } from '../../utils/msToSeconds.js';
+import '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+
+var _excluded = ["children", "isVisible", "type", "shouldUnmountWhenHidden", "delay", "motionTriggers"];
+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 Stagger = function Stagger(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'inout' : _ref$type,
+    _ref$shouldUnmountWhe = _ref.shouldUnmountWhenHidden,
+    shouldUnmountWhenHidden = _ref$shouldUnmountWhe === void 0 ? false : _ref$shouldUnmountWhe,
+    delay = _ref.delay,
+    motionTriggers = _ref.motionTriggers,
+    boxProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  // Only need AnimatePresence when we have to unmount the component
+  var AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React__default.Fragment;
+  // keep it always mounted when shouldUnmountWhenHidden is false
+  var isMounted = shouldUnmountWhenHidden ? isVisible : true;
+  var enterDelay = _typeof(delay) === 'object' ? delay.enter : delay;
+  var exitDelay = _typeof(delay) === 'object' ? delay.exit : delay;
+  var staggerVariants = {
+    initial: {},
+    animate: {
+      transition: _objectSpread(_objectSpread({}, enterDelay ? {
+        delayChildren: msToSeconds(theme.motion.delay[enterDelay])
+      } : {}), {}, {
+        staggerChildren: msToSeconds(theme.motion.duration['2xquick'])
+      })
+    },
+    exit: {
+      transition: _objectSpread(_objectSpread({}, exitDelay ? {
+        delayChildren: msToSeconds(theme.motion.delay[exitDelay])
+      } : {}), {}, {
+        staggerChildren: msToSeconds(theme.motion.duration['2xquick'])
+      })
+    }
+  };
+  return /*#__PURE__*/jsx(AnimateWrapper, {
+    children: isMounted ? /*#__PURE__*/jsx(BaseMotionBox, _objectSpread(_objectSpread(_objectSpread({
+      type: type,
+      motionVariants: staggerVariants,
+      motionTriggers: motionTriggers
+    }, shouldUnmountWhenHidden ? {} : {
+      animateVisibility: isVisible ? 'animate' : 'exit'
+    }), boxProps), {}, {
+      children: /*#__PURE__*/jsx(StaggerContext.Provider, {
+        value: {
+          isInsideStaggerContainer: true,
+          staggerType: type
+        },
+        children: children
+      })
+    })) : null
+  });
+};
+
+export { Stagger };
+//# sourceMappingURL=Stagger.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stagger.web.js","sources":["../../../../../../src/components/Stagger/Stagger.web.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { StaggerContext } from './StaggerProvider';\nimport type { StaggerProps } from './types';\nimport { BaseMotionBox } from '~components/BaseMotion';\nimport type { MotionVariantsType } from '~components/BaseMotion';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~utils';\n\n/**\n * ## Stagger\n *\n * Stagger is a utility motion preset we expose from blade to help you implement stagger animations.\n *\n * You can use any of the base entry / exit presets like `Fade`, `Move`, `Slide` inside of it and the components will appear one after the other instead of all at once.\n *\n * **Note:** Unlike other motion presets, Stagger is not an enhancer components and renders a Box instead. You can use BoxProps on this component.\n *\n * ### Usage\n *\n * #### Move with Stagger\n *\n * ```jsx\n * <Stagger>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n * </Stagger>\n * ```\n *\n * #### Conditionally make the parent visible or invisible\n *\n * `isVisible` prop in this case should be on Stagger instead of children preset component\n *\n * ```jsx\n * <Stagger isVisible={isVisibleState}>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n * </Stagger>\n * ```\n *\n */\nconst Stagger = ({\n  children,\n  isVisible = true,\n  type = 'inout',\n  shouldUnmountWhenHidden = false,\n  delay,\n  motionTriggers,\n  ...boxProps\n}: StaggerProps): React.ReactElement => {\n  const { theme } = useTheme();\n  // Only need AnimatePresence when we have to unmount the component\n  const AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React.Fragment;\n  // keep it always mounted when shouldUnmountWhenHidden is false\n  const isMounted = shouldUnmountWhenHidden ? isVisible : true;\n\n  const enterDelay = typeof delay === 'object' ? delay.enter : delay;\n  const exitDelay = typeof delay === 'object' ? delay.exit : delay;\n\n  const staggerVariants: MotionVariantsType = {\n    initial: {},\n    animate: {\n      transition: {\n        ...(enterDelay ? { delayChildren: msToSeconds(theme.motion.delay[enterDelay]) } : {}),\n        staggerChildren: msToSeconds(theme.motion.duration['2xquick']),\n      },\n    },\n    exit: {\n      transition: {\n        ...(exitDelay ? { delayChildren: msToSeconds(theme.motion.delay[exitDelay]) } : {}),\n        staggerChildren: msToSeconds(theme.motion.duration['2xquick']),\n      },\n    },\n  };\n\n  return (\n    <AnimateWrapper>\n      {isMounted ? (\n        <BaseMotionBox\n          type={type}\n          motionVariants={staggerVariants}\n          motionTriggers={motionTriggers}\n          {...(shouldUnmountWhenHidden\n            ? {}\n            : { animateVisibility: isVisible ? 'animate' : 'exit' })}\n          {...boxProps}\n        >\n          <StaggerContext.Provider value={{ isInsideStaggerContainer: true, staggerType: type }}>\n            {children}\n          </StaggerContext.Provider>\n        </BaseMotionBox>\n      ) : null}\n    </AnimateWrapper>\n  );\n};\n\nexport { Stagger };\n"],"names":["Stagger","_ref","children","_ref$isVisible","isVisible","_ref$type","type","_ref$shouldUnmountWhe","shouldUnmountWhenHidden","delay","motionTriggers","boxProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","AnimateWrapper","AnimatePresence","React","Fragment","isMounted","enterDelay","_typeof","enter","exitDelay","exit","staggerVariants","initial","animate","transition","_objectSpread","delayChildren","msToSeconds","motion","staggerChildren","duration","_jsx","BaseMotionBox","motionVariants","animateVisibility","StaggerContext","Provider","value","isInsideStaggerContainer","staggerType"],"mappings":"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"}

package/build/lib/web/development/components/Stagger/StaggerProvider.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+var StaggerContext = /*#__PURE__*/React__default.createContext({
+  isInsideStaggerContainer: false,
+  staggerType: 'inout'
+});
+var useStagger = function useStagger() {
+  var staggerContextValue = React__default.useContext(StaggerContext);
+  return staggerContextValue;
+};
+
+export { StaggerContext, useStagger };
+//# sourceMappingURL=StaggerProvider.js.map

package/build/lib/web/development/components/Stagger/StaggerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaggerProvider.js","sources":["../../../../../../src/components/Stagger/StaggerProvider.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMotionBoxProps } from '~components/BaseMotion';\n\ntype StaggerContextType = {\n  isInsideStaggerContainer: boolean;\n  staggerType: BaseMotionBoxProps['type'];\n};\n\nconst StaggerContext = React.createContext<StaggerContextType>({\n  isInsideStaggerContainer: false,\n  staggerType: 'inout',\n});\n\nconst useStagger = (): StaggerContextType => {\n  const staggerContextValue = React.useContext(StaggerContext);\n  return staggerContextValue;\n};\n\nexport { useStagger, StaggerContext };\n"],"names":["StaggerContext","React","createContext","isInsideStaggerContainer","staggerType","useStagger","staggerContextValue","useContext"],"mappings":";;AAQA,IAAMA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAqB;AAC7DC,EAAAA,wBAAwB,EAAE,KAAK;AAC/BC,EAAAA,WAAW,EAAE,OAAA;AACf,CAAC,EAAC;AAEF,IAAMC,UAAU,GAAG,SAAbA,UAAUA,GAA6B;AAC3C,EAAA,IAAMC,mBAAmB,GAAGL,cAAK,CAACM,UAAU,CAACP,cAAc,CAAC,CAAA;AAC5D,EAAA,OAAOM,mBAAmB,CAAA;AAC5B;;;;"}

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

@@ -0,0 +1,2 @@
+export { Stagger } from './Stagger.web.js';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -62,7 +62,7 @@ var useChildrenWithIndexes = function useChildrenWithIndexes(_ref) {
     totalItemsInParentGroupCount: totalItemsInParentGroupCount
   };
 };
-var _StepGroup = function _StepGroup(_ref2) {
+var _StepGroup = function _StepGroup(_ref2, ref) {
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'medium' : _ref2$size,
     _ref2$orientation = _ref2.orientation,
@@ -96,7 +96,9 @@ var _StepGroup = function _StepGroup(_ref2) {
   var defaultWidth = isHorizontal ? '100%' : undefined;
   return /*#__PURE__*/jsx(StepGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyledProps(rest)), {}, {
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      ref: ref
+    }, getStyledProps(rest)), {}, {
       display: "inline-flex",
       maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100%',
       minWidth: minWidth,
@@ -131,7 +133,7 @@ var _StepGroup = function _StepGroup(_ref2) {
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
  */
-var StepGroup = /*#__PURE__*/assignWithoutSideEffects(_StepGroup, {
+var StepGroup = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_StepGroup), {
   componentId: componentIds.StepGroup,
   displayName: componentIds.StepGroup
 });

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

@@ -1 +1 @@
-{"version":3,"file":"StepGroup.web.js","sources":["../../../../../../src/components/StepGroup/StepGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { StepGroupContextType, StepGroupProps } from './types';\nimport { StepGroupContext, useStepGroup } from './StepGroupContext';\nimport { componentIds } from './componentIds';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst useChildrenWithIndexes = ({\n  _nestingLevel,\n  children,\n  ...parentStepGroupProps\n}: Pick<StepGroupProps, 'children' | '_nestingLevel' | 'size' | 'orientation'>): {\n  childrenWithIndex: React.ReactNode;\n  totalItemsInParentGroupCount: number;\n} => {\n  const { totalItemsInParentGroupCount: totalItemsFromPreviousParent } = useStepGroup();\n\n  let totalIndex = 0;\n  const traverseGroupAndAddIndex = (\n    groupChildrenProp: StepGroupProps['children'],\n    nestingLevelOfGroup = 0,\n  ): React.ReactNode => {\n    let stepItemIndex = 0;\n    return React.Children.map(groupChildrenProp, (child, index) => {\n      const componentId = getComponentId(child);\n      if (componentId === componentIds.StepItem) {\n        return React.cloneElement(child, {\n          _index: stepItemIndex++,\n          _totalIndex: totalIndex++,\n          _nestingLevel: nestingLevelOfGroup,\n          key: index,\n        });\n      }\n\n      if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {\n        return React.cloneElement(child, {\n          ...parentStepGroupProps,\n          children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),\n          _nestingLevel: nestingLevelOfGroup + 1,\n        });\n      }\n\n      return child;\n    });\n  };\n\n  const childrenWithIndex: React.ReactNode = React.useMemo(\n    () => (_nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, _nestingLevel],\n  );\n\n  const totalItemsInParentGroupCount =\n    _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;\n\n  return { childrenWithIndex, totalItemsInParentGroupCount };\n};\n\nconst _StepGroup = ({\n  size = 'medium',\n  orientation = 'vertical',\n  children,\n  testID,\n  _nestingLevel = 0,\n  width,\n  minWidth,\n  maxWidth,\n  ...rest\n}: StepGroupProps): React.ReactElement => {\n  const itemsInGroupCount = React.Children.count(children);\n  const { childrenWithIndex, totalItemsInParentGroupCount } = useChildrenWithIndexes({\n    children,\n    size,\n    orientation,\n    _nestingLevel,\n  });\n  const contextValue = React.useMemo<StepGroupContextType>(\n    () => ({\n      size,\n      orientation,\n      itemsInGroupCount,\n      totalItemsInParentGroupCount,\n    }),\n    [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount],\n  );\n\n  const isHorizontal = orientation === 'horizontal';\n  const defaultWidth = isHorizontal ? '100%' : undefined;\n\n  return (\n    <StepGroupContext.Provider value={contextValue}>\n      <BaseBox\n        {...getStyledProps(rest)}\n        display=\"inline-flex\"\n        maxWidth={maxWidth ?? '100%'}\n        minWidth={minWidth}\n        width={width ?? defaultWidth}\n        padding={_nestingLevel === 0 ? 'spacing.4' : undefined}\n        overflowX={orientation === 'horizontal' ? 'auto' : undefined}\n        flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n        {...metaAttribute({ name: MetaConstants.StepGroup, testID })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {childrenWithIndex}\n      </BaseBox>\n    </StepGroupContext.Provider>\n  );\n};\n\n/**\n * ## StepGroup\n *\n * Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.\n *\n * ### Usage\n *\n * ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n *   <StepItem title=\"Personal Details\" />\n *   <StepItem title=\"Business Details\" />\n * </StepGroup>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepGroup = assignWithoutSideEffects(_StepGroup, {\n  componentId: componentIds.StepGroup,\n  displayName: componentIds.StepGroup,\n});\n\nexport { StepGroup };\n"],"names":["useChildrenWithIndexes","_ref","_nestingLevel","children","parentStepGroupProps","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","totalItemsFromPreviousParent","totalItemsInParentGroupCount","totalIndex","traverseGroupAndAddIndex","groupChildrenProp","nestingLevelOfGroup","arguments","length","undefined","stepItemIndex","React","Children","map","child","index","componentId","getComponentId","componentIds","StepItem","cloneElement","_index","_totalIndex","key","StepGroup","_objectSpread","props","childrenWithIndex","useMemo","_StepGroup","_ref2","_ref2$size","size","_ref2$orientation","orientation","testID","_ref2$_nestingLevel","width","minWidth","maxWidth","rest","_excluded2","itemsInGroupCount","count","_useChildrenWithIndex","contextValue","isHorizontal","defaultWidth","_jsx","StepGroupContext","Provider","value","BaseBox","getStyledProps","display","padding","overflowX","flexDirection","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","assignWithoutSideEffects","displayName"],"mappings":"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"}
+{"version":3,"file":"StepGroup.web.js","sources":["../../../../../../src/components/StepGroup/StepGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { StepGroupContextType, StepGroupProps } from './types';\nimport { StepGroupContext, useStepGroup } from './StepGroupContext';\nimport { componentIds } from './componentIds';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst useChildrenWithIndexes = ({\n  _nestingLevel,\n  children,\n  ...parentStepGroupProps\n}: Pick<StepGroupProps, 'children' | '_nestingLevel' | 'size' | 'orientation'>): {\n  childrenWithIndex: React.ReactNode;\n  totalItemsInParentGroupCount: number;\n} => {\n  const { totalItemsInParentGroupCount: totalItemsFromPreviousParent } = useStepGroup();\n\n  let totalIndex = 0;\n  const traverseGroupAndAddIndex = (\n    groupChildrenProp: StepGroupProps['children'],\n    nestingLevelOfGroup = 0,\n  ): React.ReactNode => {\n    let stepItemIndex = 0;\n    return React.Children.map(groupChildrenProp, (child, index) => {\n      const componentId = getComponentId(child);\n      if (componentId === componentIds.StepItem) {\n        return React.cloneElement(child, {\n          _index: stepItemIndex++,\n          _totalIndex: totalIndex++,\n          _nestingLevel: nestingLevelOfGroup,\n          key: index,\n        });\n      }\n\n      if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {\n        return React.cloneElement(child, {\n          ...parentStepGroupProps,\n          children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),\n          _nestingLevel: nestingLevelOfGroup + 1,\n        });\n      }\n\n      return child;\n    });\n  };\n\n  const childrenWithIndex: React.ReactNode = React.useMemo(\n    () => (_nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, _nestingLevel],\n  );\n\n  const totalItemsInParentGroupCount =\n    _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;\n\n  return { childrenWithIndex, totalItemsInParentGroupCount };\n};\n\nconst _StepGroup = (\n  {\n    size = 'medium',\n    orientation = 'vertical',\n    children,\n    testID,\n    _nestingLevel = 0,\n    width,\n    minWidth,\n    maxWidth,\n    ...rest\n  }: StepGroupProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const itemsInGroupCount = React.Children.count(children);\n  const { childrenWithIndex, totalItemsInParentGroupCount } = useChildrenWithIndexes({\n    children,\n    size,\n    orientation,\n    _nestingLevel,\n  });\n  const contextValue = React.useMemo<StepGroupContextType>(\n    () => ({\n      size,\n      orientation,\n      itemsInGroupCount,\n      totalItemsInParentGroupCount,\n    }),\n    [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount],\n  );\n\n  const isHorizontal = orientation === 'horizontal';\n  const defaultWidth = isHorizontal ? '100%' : undefined;\n\n  return (\n    <StepGroupContext.Provider value={contextValue}>\n      <BaseBox\n        ref={ref as never}\n        {...getStyledProps(rest)}\n        display=\"inline-flex\"\n        maxWidth={maxWidth ?? '100%'}\n        minWidth={minWidth}\n        width={width ?? defaultWidth}\n        padding={_nestingLevel === 0 ? 'spacing.4' : undefined}\n        overflowX={orientation === 'horizontal' ? 'auto' : undefined}\n        flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n        {...metaAttribute({ name: MetaConstants.StepGroup, testID })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {childrenWithIndex}\n      </BaseBox>\n    </StepGroupContext.Provider>\n  );\n};\n\n/**\n * ## StepGroup\n *\n * Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.\n *\n * ### Usage\n *\n * ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n *   <StepItem title=\"Personal Details\" />\n *   <StepItem title=\"Business Details\" />\n * </StepGroup>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepGroup = assignWithoutSideEffects(React.forwardRef(_StepGroup), {\n  componentId: componentIds.StepGroup,\n  displayName: componentIds.StepGroup,\n});\n\nexport { StepGroup };\n"],"names":["useChildrenWithIndexes","_ref","_nestingLevel","children","parentStepGroupProps","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","totalItemsFromPreviousParent","totalItemsInParentGroupCount","totalIndex","traverseGroupAndAddIndex","groupChildrenProp","nestingLevelOfGroup","arguments","length","undefined","stepItemIndex","React","Children","map","child","index","componentId","getComponentId","componentIds","StepItem","cloneElement","_index","_totalIndex","key","StepGroup","_objectSpread","props","childrenWithIndex","useMemo","_StepGroup","_ref2","ref","_ref2$size","size","_ref2$orientation","orientation","testID","_ref2$_nestingLevel","width","minWidth","maxWidth","rest","_excluded2","itemsInGroupCount","count","_useChildrenWithIndex","contextValue","isHorizontal","defaultWidth","_jsx","StepGroupContext","Provider","value","BaseBox","getStyledProps","display","padding","overflowX","flexDirection","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

package/build/lib/web/development/components/StepGroup/StepItem.web.js

@@ -48,7 +48,7 @@ var InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
     backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.faded : props.theme.colors.transparent,
     borderRadius: props.theme.border.radius.medium,
     width: '100%',
-    transition: "background-color ".concat(props.theme.motion.duration.xquick, " ").concat(props.theme.motion.easing.standard.effective),
+    transition: "background-color ".concat(props.theme.motion.duration.xquick, " ").concat(props.theme.motion.easing.standard),
     ':not([disabled]):hover': {
       backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.fadedHighlighted : props.theme.colors.interactive.background.gray.fadedHighlighted
     },