@razorpay/blade 11.39.0 → 12.0.0

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":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;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,YAAY,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAUhBC,GAA+B,EACR;AAAA,EAAA,IATrBC,KAAK,GAAAF,KAAA,CAALE,KAAK;IAAAC,mBAAA,GAAAH,KAAA,CACLI,aAAa;AAAbA,IAAAA,aAAa,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,mBAAA;IACvBE,kBAAkB,GAAAL,KAAA,CAAlBK,kBAAkB;IAAAC,WAAA,GAAAN,KAAA,CAClBN,KAAK;AAALA,IAAAA,KAAK,GAAAY,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA;IAAAC,UAAA,GAAAP,KAAA,CACjBQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,UAAA;IACfE,MAAM,GAAAT,KAAA,CAANS,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAX,KAAA,EAAAY,SAAA,CAAA,CAAA;AAIhB,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBnB,KAAK,GAAAkB,SAAA,CAALlB,KAAK,CAAA;EACb,oBACEoB,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNhB,IAAAA,GAAG,EAAEA,GAAAA;AAAa,GAAA,EACdiB,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;UAACd,KAAK,EAAEF,QAAQ,CAAC;AAAEE,YAAAA,KAAK,EAALA,KAAK;AAAEC,YAAAA,KAAK,EAALA,KAAAA;WAAO,CAAA;SAAI,CAAA;AAAC,OAC/E,CAAC,EACbO,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;AAACd,UAAAA,KAAK,EAAC,yBAAyB;AAAA6B,UAAAA,QAAA,EAC/ErB,KAAAA;SACG,CAAA;OACC,CAAC,GACR,IAAI,CAAA;KACD,CAAA,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMuC,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAAC5C,YAAY;;;;"}

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/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/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":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAOvB;AAAA,EAAA,IANHC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;AACLC,IAAAA,oBAAoB,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAKvB,EAAA,IAAAC,aAAA,GAAuEC,YAAY,EAAE;IAA/CC,4BAA4B,GAAAF,aAAA,CAA1DG,4BAA4B,CAAA;EAEpC,IAAIC,UAAU,GAAG,CAAC,CAAA;AAClB,EAAA,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAC5BC,iBAA6C,EAEzB;AAAA,IAAA,IADpBC,mBAAmB,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,CAAC,CAAA;IAEvB,IAAIG,aAAa,GAAG,CAAC,CAAA;AACrB,IAAA,OAAOC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACR,iBAAiB,EAAE,UAACS,KAAK,EAAEC,KAAK,EAAK;AAC7D,MAAA,IAAMC,WAAW,GAAGC,cAAc,CAACH,KAAK,CAAC,CAAA;AACzC,MAAA,IAAIE,WAAW,KAAKE,YAAY,CAACC,QAAQ,EAAE;AACzC,QAAA,oBAAOR,cAAK,CAACS,YAAY,CAACN,KAAK,EAAE;UAC/BO,MAAM,EAAEX,aAAa,EAAE;UACvBY,WAAW,EAAEnB,UAAU,EAAE;AACzBT,UAAAA,aAAa,EAAEY,mBAAmB;AAClCiB,UAAAA,GAAG,EAAER,KAAAA;AACP,SAAC,CAAC,CAAA;AACJ,OAAA;MAEA,IAAIC,WAAW,KAAKE,YAAY,CAACM,SAAS,IAAIlB,mBAAmB,GAAG,CAAC,EAAE;QACrE,oBAAOK,cAAK,CAACS,YAAY,CAACN,KAAK,EAAAW,aAAA,CAAAA,aAAA,CAAA,EAAA,EAC1B7B,oBAAoB,CAAA,EAAA,EAAA,EAAA;AACvBD,UAAAA,QAAQ,EAAES,wBAAwB,CAACU,KAAK,CAACY,KAAK,CAAC/B,QAAQ,EAAEW,mBAAmB,GAAG,CAAC,CAAC;UACjFZ,aAAa,EAAEY,mBAAmB,GAAG,CAAA;AAAC,SAAA,CACvC,CAAC,CAAA;AACJ,OAAA;AAEA,MAAA,OAAOQ,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAMa,iBAAkC,GAAGhB,cAAK,CAACiB,OAAO,CACtD,YAAA;IAAA,OAAOlC,aAAa,KAAK,CAAC,GAAGU,wBAAwB,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAAA;GAAC;AAC3E;AACA,EAAA,CAACA,QAAQ,EAAED,aAAa,CAC1B,CAAC,CAAA;EAED,IAAMQ,4BAA4B,GAChCR,aAAa,KAAK,CAAC,GAAGS,UAAU,GAAGF,4BAA4B,CAAA;EAEjE,OAAO;AAAE0B,IAAAA,iBAAiB,EAAjBA,iBAAiB;AAAEzB,IAAAA,4BAA4B,EAA5BA,4BAAAA;GAA8B,CAAA;AAC5D,CAAC,CAAA;AAED,IAAM2B,UAAU,GAAG,SAAbA,UAAUA,CAAAC,KAAA,EAYdC,GAA+B,EACR;AAAA,EAAA,IAAAC,UAAA,GAAAF,KAAA,CAXrBG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,UAAA;IAAAE,iBAAA,GAAAJ,KAAA,CACfK,WAAW;AAAXA,IAAAA,WAAW,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,iBAAA;IACxBvC,QAAQ,GAAAmC,KAAA,CAARnC,QAAQ;IACRyC,MAAM,GAAAN,KAAA,CAANM,MAAM;IAAAC,mBAAA,GAAAP,KAAA,CACNpC,aAAa;AAAbA,IAAAA,aAAa,GAAA2C,mBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,mBAAA;IACjBC,KAAK,GAAAR,KAAA,CAALQ,KAAK;IACLC,QAAQ,GAAAT,KAAA,CAARS,QAAQ;IACRC,QAAQ,GAAAV,KAAA,CAARU,QAAQ;AACLC,IAAAA,IAAI,GAAA5C,wBAAA,CAAAiC,KAAA,EAAAY,UAAA,CAAA,CAAA;EAIT,IAAMC,iBAAiB,GAAGhC,cAAK,CAACC,QAAQ,CAACgC,KAAK,CAACjD,QAAQ,CAAC,CAAA;EACxD,IAAAkD,qBAAA,GAA4DrD,sBAAsB,CAAC;AACjFG,MAAAA,QAAQ,EAARA,QAAQ;AACRsC,MAAAA,IAAI,EAAJA,IAAI;AACJE,MAAAA,WAAW,EAAXA,WAAW;AACXzC,MAAAA,aAAa,EAAbA,aAAAA;AACF,KAAC,CAAC;IALMiC,iBAAiB,GAAAkB,qBAAA,CAAjBlB,iBAAiB;IAAEzB,4BAA4B,GAAA2C,qBAAA,CAA5B3C,4BAA4B,CAAA;AAMvD,EAAA,IAAM4C,YAAY,GAAGnC,cAAK,CAACiB,OAAO,CAChC,YAAA;IAAA,OAAO;AACLK,MAAAA,IAAI,EAAJA,IAAI;AACJE,MAAAA,WAAW,EAAXA,WAAW;AACXQ,MAAAA,iBAAiB,EAAjBA,iBAAiB;AACjBzC,MAAAA,4BAA4B,EAA5BA,4BAAAA;KACD,CAAA;GAAC,EACF,CAAC+B,IAAI,EAAEE,WAAW,EAAEQ,iBAAiB,EAAEzC,4BAA4B,CACrE,CAAC,CAAA;AAED,EAAA,IAAM6C,YAAY,GAAGZ,WAAW,KAAK,YAAY,CAAA;AACjD,EAAA,IAAMa,YAAY,GAAGD,YAAY,GAAG,MAAM,GAAGtC,SAAS,CAAA;AAEtD,EAAA,oBACEwC,GAAA,CAACC,gBAAgB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,YAAa;IAAAnD,QAAA,eAC7CsD,GAAA,CAACI,OAAO,EAAA5B,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNM,MAAAA,GAAG,EAAEA,GAAAA;KACDuB,EAAAA,cAAc,CAACb,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AACxBc,MAAAA,OAAO,EAAC,aAAa;AACrBf,MAAAA,QAAQ,EAAEA,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,QAAQ,GAAI,MAAO;AAC7BD,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAK,GAAIU,YAAa;AAC7BQ,MAAAA,OAAO,EAAE9D,aAAa,KAAK,CAAC,GAAG,WAAW,GAAGe,SAAU;AACvDgD,MAAAA,SAAS,EAAEtB,WAAW,KAAK,YAAY,GAAG,MAAM,GAAG1B,SAAU;AAC7DiD,MAAAA,aAAa,EAAEvB,WAAW,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAA;AAAM,KAAA,EACzDwB,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACrC,SAAS;AAAEY,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,EACxD0B,sBAAsB,CAACrB,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAA9C,MAAAA,QAAA,EAE/BgC,iBAAAA;KACM,CAAA,CAAA;AAAC,GACe,CAAC,CAAA;AAEhC,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMH,IAAAA,SAAS,gBAAGuC,wBAAwB,eAACpD,cAAK,CAACqD,UAAU,CAACnC,UAAU,CAAC,EAAE;EACvEb,WAAW,EAAEE,YAAY,CAACM,SAAS;EACnCyC,WAAW,EAAE/C,YAAY,CAACM,SAAAA;AAC5B,CAAC;;;;"}

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
     },

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

@@ -1 +1 @@
-{"version":3,"file":"StepItem.web.js","sources":["../../../../../../src/components/StepGroup/StepItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { StepLine } from './StepLine';\nimport type { StepLineProps } from './StepLine';\nimport { useStepGroup } from './StepGroupContext';\nimport type {\n  InteractiveItemHeaderProps,\n  StepGroupContextType,\n  StepGroupProps,\n  StepItemProps,\n} from './types';\nimport { componentIds } from './componentIds';\nimport { itemLineGap, stepItemHeaderTokens } from './tokens';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize, makeSpace } from '~utils';\nimport { size as sizeTokens } from '~tokens/global';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport getIn from '~utils/lodashButBetter/get';\nimport { throwBladeError } from '~utils/logger';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype GetStepTypeFromIndexProps = {\n  _index: StepItemProps['_index'];\n  _nestingLevel: StepGroupProps['_nestingLevel'];\n  itemsCount: StepGroupContextType['itemsInGroupCount'];\n};\n\nconst InteractiveItemHeaderBox = styled.button<InteractiveItemHeaderProps>((props) => {\n  return {\n    padding: `${makeSpace(getIn(props.theme, props.paddingY))} ${makeSpace(\n      getIn(props.theme, props.paddingX),\n    )}`,\n    cursor: 'pointer',\n    display: 'inline-block',\n    textDecoration: 'none',\n    border: 'none',\n    textAlign: 'inherit',\n    backgroundColor: props.isSelected\n      ? props.theme.colors.interactive.background.primary.faded\n      : props.theme.colors.transparent,\n    borderRadius: props.theme.border.radius.medium,\n    width: '100%',\n    transition: `background-color ${props.theme.motion.duration.xquick} ${props.theme.motion.easing.standard.effective}`,\n    ':not([disabled]):hover': {\n      backgroundColor: props.isSelected\n        ? props.theme.colors.interactive.background.primary.fadedHighlighted\n        : props.theme.colors.interactive.background.gray.fadedHighlighted,\n    },\n    ':not([disabled]):focus-visible': {\n      ...getFocusRingStyles({ theme: props.theme }),\n    },\n    '&[disabled]': {\n      cursor: 'not-allowed',\n    },\n  };\n});\n\nconst getStepTypeFromIndex = ({\n  _index,\n  _nestingLevel,\n  itemsCount,\n}: GetStepTypeFromIndexProps): StepLineProps['stepType'] => {\n  if (_nestingLevel === 0) {\n    return 'default';\n  }\n\n  if (itemsCount === 1) {\n    return 'single-item';\n  }\n\n  if (_index === 0) {\n    return 'start';\n  }\n\n  if (_index === itemsCount - 1) {\n    return 'end';\n  }\n\n  return 'middle';\n};\n\nconst _StepItem = ({\n  title,\n  titleColor,\n  timestamp,\n  description,\n  stepProgress = 'none',\n  marker,\n  trailing,\n  isSelected,\n  isDisabled,\n  href,\n  target,\n  onClick,\n  children,\n  _index = 0,\n  _totalIndex = 0,\n  _nestingLevel = 0,\n  ...rest\n}: StepItemProps): React.ReactElement => {\n  const {\n    itemsInGroupCount: itemsCount,\n    totalItemsInParentGroupCount,\n    orientation,\n    size,\n  } = useStepGroup();\n  const stepType = React.useMemo(\n    () => getStepTypeFromIndex({ _index, _nestingLevel, itemsCount }),\n    [_index, _nestingLevel, itemsCount],\n  );\n\n  const itemRef = React.useRef<HTMLDivElement>(null);\n\n  const isFirstItem = _totalIndex === 0;\n  const isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;\n  const isInteractive = Boolean(href) || Boolean(onClick);\n  const isVertical = orientation === 'vertical';\n  const isNested = _nestingLevel > 0;\n\n  if (__DEV__) {\n    if (trailing && orientation === 'horizontal') {\n      throwBladeError({\n        message: 'trailing is not allowed in horizontal StepGroup',\n        moduleName: 'StepItem',\n      });\n    }\n\n    if (_nestingLevel >= 1 && orientation === 'horizontal') {\n      throwBladeError({\n        message: 'Nested StepGroup components are not allowed in horizontal orientation',\n        moduleName: 'StepItem',\n      });\n    }\n  }\n\n  const stepItemHeaderJSX = (\n    <Box display=\"flex\" flexDirection=\"row\" justifyContent=\"space-between\" gap=\"spacing.4\">\n      <Box>\n        <Text\n          size={stepItemHeaderTokens[size].title}\n          color={\n            isDisabled ? 'surface.text.gray.disabled' : titleColor ?? 'surface.text.gray.subtle'\n          }\n          weight={isNested ? 'regular' : 'semibold'}\n        >\n          {title}\n        </Text>\n        <Text\n          size={stepItemHeaderTokens[size].timestamp}\n          marginY=\"spacing.2\"\n          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n          variant=\"caption\"\n        >\n          {timestamp}\n        </Text>\n        <Text\n          size={stepItemHeaderTokens[size].description}\n          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n        >\n          {description}\n        </Text>\n      </Box>\n      <Box>{trailing}</Box>\n    </Box>\n  );\n\n  const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n    paddingY: 'spacing.3',\n    paddingX: 'spacing.4',\n  } as const;\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection={isVertical ? 'row' : 'column'}\n      gap={itemLineGap[size]}\n      className={`step-item step-index-${_index} step-nesting-level-${_nestingLevel}`}\n      textAlign={isVertical ? 'left' : 'center'}\n      alignItems={isVertical ? undefined : 'center'}\n      minWidth={isVertical ? undefined : `min(${makeSize(sizeTokens['120'])}, 100%)`}\n      width={isVertical ? '100%' : undefined}\n      flex={isVertical ? undefined : '1'}\n      {...metaAttribute({ name: MetaConstants.StepItem })}\n      {...makeAnalyticsAttribute(rest)}\n      ref={itemRef}\n    >\n      <StepLine\n        shouldShowStartBranch={!isFirstItem}\n        shouldShowEndBranch={!isLastItem}\n        stepType={stepType}\n        marker={marker}\n        stepProgress={stepProgress}\n      />\n      <Box flex=\"1\" marginRight={isVertical ? undefined : undefined}>\n        {isInteractive ? (\n          <InteractiveItemHeaderBox\n            {...stepItemHeaderPaddings}\n            as={href ? 'a' : 'button'}\n            href={href}\n            target={target}\n            isSelected={isSelected}\n            onClick={onClick}\n            disabled={isDisabled}\n          >\n            {stepItemHeaderJSX}\n          </InteractiveItemHeaderBox>\n        ) : (\n          <Box {...stepItemHeaderPaddings}>{stepItemHeaderJSX}</Box>\n        )}\n        {children ? (\n          <Box paddingX=\"spacing.4\" paddingBottom=\"spacing.3\">\n            {children}\n          </Box>\n        ) : null}\n      </Box>\n    </BaseBox>\n  );\n};\n\n/**\n * ## StepItem\n *\n * Component meant to be used inside the StepGroup parent component\n *\n * ### Usage\n *\n * ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n *   <StepItem\n *      title=\"Personal Details\"\n *      timestamp=\"Thu 15th Oct'23 | 12:00pm\"\n *      description=\"Fill your personal details here\"\n *      marker={<StepItemIndicator color=\"negative\" />}\n *    />\n * </StepGroup>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepItem = assignWithoutSideEffects(_StepItem, {\n  componentId: componentIds.StepItem,\n  displayName: componentIds.StepItem,\n});\n\nexport { StepLine, StepItem };\n"],"names":["InteractiveItemHeaderBox","styled","button","withConfig","displayName","componentId","props","padding","concat","makeSpace","getIn","theme","paddingY","paddingX","cursor","display","textDecoration","border","textAlign","backgroundColor","isSelected","colors","interactive","background","primary","faded","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","effective","fadedHighlighted","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","title","titleColor","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","rest","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","itemsInGroupCount","totalItemsInParentGroupCount","orientation","size","stepType","React","useMemo","itemRef","useRef","isFirstItem","isLastItem","isInteractive","Boolean","isVertical","isNested","throwBladeError","message","moduleName","stepItemHeaderJSX","_jsxs","Box","flexDirection","justifyContent","gap","_jsx","Text","stepItemHeaderTokens","color","weight","marginY","variant","stepItemHeaderPaddings","BaseBox","itemLineGap","className","alignItems","undefined","minWidth","makeSize","sizeTokens","flex","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":"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"}
+{"version":3,"file":"StepItem.web.js","sources":["../../../../../../src/components/StepGroup/StepItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { StepLine } from './StepLine';\nimport type { StepLineProps } from './StepLine';\nimport { useStepGroup } from './StepGroupContext';\nimport type {\n  InteractiveItemHeaderProps,\n  StepGroupContextType,\n  StepGroupProps,\n  StepItemProps,\n} from './types';\nimport { componentIds } from './componentIds';\nimport { itemLineGap, stepItemHeaderTokens } from './tokens';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize, makeSpace } from '~utils';\nimport { size as sizeTokens } from '~tokens/global';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport getIn from '~utils/lodashButBetter/get';\nimport { throwBladeError } from '~utils/logger';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype GetStepTypeFromIndexProps = {\n  _index: StepItemProps['_index'];\n  _nestingLevel: StepGroupProps['_nestingLevel'];\n  itemsCount: StepGroupContextType['itemsInGroupCount'];\n};\n\nconst InteractiveItemHeaderBox = styled.button<InteractiveItemHeaderProps>((props) => {\n  return {\n    padding: `${makeSpace(getIn(props.theme, props.paddingY))} ${makeSpace(\n      getIn(props.theme, props.paddingX),\n    )}`,\n    cursor: 'pointer',\n    display: 'inline-block',\n    textDecoration: 'none',\n    border: 'none',\n    textAlign: 'inherit',\n    backgroundColor: props.isSelected\n      ? props.theme.colors.interactive.background.primary.faded\n      : props.theme.colors.transparent,\n    borderRadius: props.theme.border.radius.medium,\n    width: '100%',\n    transition: `background-color ${props.theme.motion.duration.xquick} ${props.theme.motion.easing.standard}`,\n    ':not([disabled]):hover': {\n      backgroundColor: props.isSelected\n        ? props.theme.colors.interactive.background.primary.fadedHighlighted\n        : props.theme.colors.interactive.background.gray.fadedHighlighted,\n    },\n    ':not([disabled]):focus-visible': {\n      ...getFocusRingStyles({ theme: props.theme }),\n    },\n    '&[disabled]': {\n      cursor: 'not-allowed',\n    },\n  };\n});\n\nconst getStepTypeFromIndex = ({\n  _index,\n  _nestingLevel,\n  itemsCount,\n}: GetStepTypeFromIndexProps): StepLineProps['stepType'] => {\n  if (_nestingLevel === 0) {\n    return 'default';\n  }\n\n  if (itemsCount === 1) {\n    return 'single-item';\n  }\n\n  if (_index === 0) {\n    return 'start';\n  }\n\n  if (_index === itemsCount - 1) {\n    return 'end';\n  }\n\n  return 'middle';\n};\n\nconst _StepItem = ({\n  title,\n  titleColor,\n  timestamp,\n  description,\n  stepProgress = 'none',\n  marker,\n  trailing,\n  isSelected,\n  isDisabled,\n  href,\n  target,\n  onClick,\n  children,\n  _index = 0,\n  _totalIndex = 0,\n  _nestingLevel = 0,\n  ...rest\n}: StepItemProps): React.ReactElement => {\n  const {\n    itemsInGroupCount: itemsCount,\n    totalItemsInParentGroupCount,\n    orientation,\n    size,\n  } = useStepGroup();\n  const stepType = React.useMemo(\n    () => getStepTypeFromIndex({ _index, _nestingLevel, itemsCount }),\n    [_index, _nestingLevel, itemsCount],\n  );\n\n  const itemRef = React.useRef<HTMLDivElement>(null);\n\n  const isFirstItem = _totalIndex === 0;\n  const isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;\n  const isInteractive = Boolean(href) || Boolean(onClick);\n  const isVertical = orientation === 'vertical';\n  const isNested = _nestingLevel > 0;\n\n  if (__DEV__) {\n    if (trailing && orientation === 'horizontal') {\n      throwBladeError({\n        message: 'trailing is not allowed in horizontal StepGroup',\n        moduleName: 'StepItem',\n      });\n    }\n\n    if (_nestingLevel >= 1 && orientation === 'horizontal') {\n      throwBladeError({\n        message: 'Nested StepGroup components are not allowed in horizontal orientation',\n        moduleName: 'StepItem',\n      });\n    }\n  }\n\n  const stepItemHeaderJSX = (\n    <Box display=\"flex\" flexDirection=\"row\" justifyContent=\"space-between\" gap=\"spacing.4\">\n      <Box>\n        <Text\n          size={stepItemHeaderTokens[size].title}\n          color={\n            isDisabled ? 'surface.text.gray.disabled' : titleColor ?? 'surface.text.gray.subtle'\n          }\n          weight={isNested ? 'regular' : 'semibold'}\n        >\n          {title}\n        </Text>\n        <Text\n          size={stepItemHeaderTokens[size].timestamp}\n          marginY=\"spacing.2\"\n          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n          variant=\"caption\"\n        >\n          {timestamp}\n        </Text>\n        <Text\n          size={stepItemHeaderTokens[size].description}\n          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n        >\n          {description}\n        </Text>\n      </Box>\n      <Box>{trailing}</Box>\n    </Box>\n  );\n\n  const stepItemHeaderPaddings: Omit<InteractiveItemHeaderProps, 'isSelected'> = {\n    paddingY: 'spacing.3',\n    paddingX: 'spacing.4',\n  } as const;\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection={isVertical ? 'row' : 'column'}\n      gap={itemLineGap[size]}\n      className={`step-item step-index-${_index} step-nesting-level-${_nestingLevel}`}\n      textAlign={isVertical ? 'left' : 'center'}\n      alignItems={isVertical ? undefined : 'center'}\n      minWidth={isVertical ? undefined : `min(${makeSize(sizeTokens['120'])}, 100%)`}\n      width={isVertical ? '100%' : undefined}\n      flex={isVertical ? undefined : '1'}\n      {...metaAttribute({ name: MetaConstants.StepItem })}\n      {...makeAnalyticsAttribute(rest)}\n      ref={itemRef}\n    >\n      <StepLine\n        shouldShowStartBranch={!isFirstItem}\n        shouldShowEndBranch={!isLastItem}\n        stepType={stepType}\n        marker={marker}\n        stepProgress={stepProgress}\n      />\n      <Box flex=\"1\" marginRight={isVertical ? undefined : undefined}>\n        {isInteractive ? (\n          <InteractiveItemHeaderBox\n            {...stepItemHeaderPaddings}\n            as={href ? 'a' : 'button'}\n            href={href}\n            target={target}\n            isSelected={isSelected}\n            onClick={onClick}\n            disabled={isDisabled}\n          >\n            {stepItemHeaderJSX}\n          </InteractiveItemHeaderBox>\n        ) : (\n          <Box {...stepItemHeaderPaddings}>{stepItemHeaderJSX}</Box>\n        )}\n        {children ? (\n          <Box paddingX=\"spacing.4\" paddingBottom=\"spacing.3\">\n            {children}\n          </Box>\n        ) : null}\n      </Box>\n    </BaseBox>\n  );\n};\n\n/**\n * ## StepItem\n *\n * Component meant to be used inside the StepGroup parent component\n *\n * ### Usage\n *\n * ```jsx\n * <StepGroup orientation=\"vertical\" size=\"medium\">\n *   <StepItem\n *      title=\"Personal Details\"\n *      timestamp=\"Thu 15th Oct'23 | 12:00pm\"\n *      description=\"Fill your personal details here\"\n *      marker={<StepItemIndicator color=\"negative\" />}\n *    />\n * </StepGroup>\n * ```\n *\n * ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}\n */\nconst StepItem = assignWithoutSideEffects(_StepItem, {\n  componentId: componentIds.StepItem,\n  displayName: componentIds.StepItem,\n});\n\nexport { StepLine, StepItem };\n"],"names":["InteractiveItemHeaderBox","styled","button","withConfig","displayName","componentId","props","padding","concat","makeSpace","getIn","theme","paddingY","paddingX","cursor","display","textDecoration","border","textAlign","backgroundColor","isSelected","colors","interactive","background","primary","faded","transparent","borderRadius","radius","medium","width","transition","motion","duration","xquick","easing","standard","fadedHighlighted","gray","_objectSpread","getFocusRingStyles","getStepTypeFromIndex","_ref","_index","_nestingLevel","itemsCount","_StepItem","_ref2","title","titleColor","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","rest","_objectWithoutProperties","_excluded","_useStepGroup","useStepGroup","itemsInGroupCount","totalItemsInParentGroupCount","orientation","size","stepType","React","useMemo","itemRef","useRef","isFirstItem","isLastItem","isInteractive","Boolean","isVertical","isNested","throwBladeError","message","moduleName","stepItemHeaderJSX","_jsxs","Box","flexDirection","justifyContent","gap","_jsx","Text","stepItemHeaderTokens","color","weight","marginY","variant","stepItemHeaderPaddings","BaseBox","itemLineGap","className","alignItems","undefined","minWidth","makeSize","sizeTokens","flex","metaAttribute","name","MetaConstants","StepItem","makeAnalyticsAttribute","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginRight","as","disabled","paddingBottom","assignWithoutSideEffects","componentIds"],"mappings":"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"}

package/build/lib/web/development/components/Switch/AnimatedThumbIcon.web.js

@@ -17,7 +17,7 @@ var AnimatedThumbIcon = /*#__PURE__*/styled(Svg).withConfig({
   return {
     transitionDuration: "".concat(makeMotionTime(duration)),
     transitionTimingFunction: easing,
-    transitionDelay: isChecked ? "".concat(makeMotionTime(theme.motion.delay['2xshort'])) : "0ms",
+    transitionDelay: isChecked ? "".concat(makeMotionTime(theme.motion.delay['2xquick'])) : "0ms",
     opacity: isChecked ? 1 : 0
   };
 });

package/build/lib/web/development/components/Switch/AnimatedThumbIcon.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedThumbIcon.web.js","sources":["../../../../../../src/components/Switch/AnimatedThumbIcon.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { switchMotion } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport Svg from '~components/Icons/_Svg';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst AnimatedThumbIcon = styled(Svg)<{ isChecked?: boolean }>(({ isChecked, theme }) => {\n  const easing = getIn(theme, switchMotion.easing.thumbIcon);\n  const duration = getIn(theme, switchMotion.duration.thumbIcon);\n\n  return {\n    transitionDuration: `${makeMotionTime(duration)}`,\n    transitionTimingFunction: easing,\n    transitionDelay: isChecked ? `${makeMotionTime(theme.motion.delay['2xshort'])}` : `0ms`,\n    opacity: isChecked ? 1 : 0,\n  };\n});\n\nexport { AnimatedThumbIcon };\n"],"names":["AnimatedThumbIcon","styled","Svg","withConfig","displayName","componentId","_ref","isChecked","theme","easing","getIn","switchMotion","thumbIcon","duration","transitionDuration","concat","makeMotionTime","transitionTimingFunction","transitionDelay","motion","delay","opacity"],"mappings":";;;;;;;;AAMA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,GAAG,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAA0B,CAAA,CAAA,UAAAC,IAAA,EAA0B;AAAA,EAAA,IAAvBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;EAChF,IAAMC,MAAM,GAAGC,KAAK,CAACF,KAAK,EAAEG,YAAY,CAACF,MAAM,CAACG,SAAS,CAAC,CAAA;EAC1D,IAAMC,QAAQ,GAAGH,KAAK,CAACF,KAAK,EAAEG,YAAY,CAACE,QAAQ,CAACD,SAAS,CAAC,CAAA;EAE9D,OAAO;AACLE,IAAAA,kBAAkB,KAAAC,MAAA,CAAKC,cAAc,CAACH,QAAQ,CAAC,CAAE;AACjDI,IAAAA,wBAAwB,EAAER,MAAM;AAChCS,IAAAA,eAAe,EAAEX,SAAS,GAAA,EAAA,CAAAQ,MAAA,CAAMC,cAAc,CAACR,KAAK,CAACW,MAAM,CAACC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAU,GAAA,KAAA;AACvFC,IAAAA,OAAO,EAAEd,SAAS,GAAG,CAAC,GAAG,CAAA;GAC1B,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"AnimatedThumbIcon.web.js","sources":["../../../../../../src/components/Switch/AnimatedThumbIcon.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { switchMotion } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport Svg from '~components/Icons/_Svg';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst AnimatedThumbIcon = styled(Svg)<{ isChecked?: boolean }>(({ isChecked, theme }) => {\n  const easing = getIn(theme, switchMotion.easing.thumbIcon);\n  const duration = getIn(theme, switchMotion.duration.thumbIcon);\n\n  return {\n    transitionDuration: `${makeMotionTime(duration)}`,\n    transitionTimingFunction: easing,\n    transitionDelay: isChecked ? `${makeMotionTime(theme.motion.delay['2xquick'])}` : `0ms`,\n    opacity: isChecked ? 1 : 0,\n  };\n});\n\nexport { AnimatedThumbIcon };\n"],"names":["AnimatedThumbIcon","styled","Svg","withConfig","displayName","componentId","_ref","isChecked","theme","easing","getIn","switchMotion","thumbIcon","duration","transitionDuration","concat","makeMotionTime","transitionTimingFunction","transitionDelay","motion","delay","opacity"],"mappings":";;;;;;;;AAMA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,GAAG,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAA0B,CAAA,CAAA,UAAAC,IAAA,EAA0B;AAAA,EAAA,IAAvBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;EAChF,IAAMC,MAAM,GAAGC,KAAK,CAACF,KAAK,EAAEG,YAAY,CAACF,MAAM,CAACG,SAAS,CAAC,CAAA;EAC1D,IAAMC,QAAQ,GAAGH,KAAK,CAACF,KAAK,EAAEG,YAAY,CAACE,QAAQ,CAACD,SAAS,CAAC,CAAA;EAE9D,OAAO;AACLE,IAAAA,kBAAkB,KAAAC,MAAA,CAAKC,cAAc,CAACH,QAAQ,CAAC,CAAE;AACjDI,IAAAA,wBAAwB,EAAER,MAAM;AAChCS,IAAAA,eAAe,EAAEX,SAAS,GAAA,EAAA,CAAAQ,MAAA,CAAMC,cAAc,CAACR,KAAK,CAACW,MAAM,CAACC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAU,GAAA,KAAA;AACvFC,IAAAA,OAAO,EAAEd,SAAS,GAAG,CAAC,GAAG,CAAA;GAC1B,CAAA;AACH,CAAC;;;;"}