@razorpay/blade 11.36.2 → 11.38.0

package/build/lib/web/production/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';\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  ...styledProps\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(styledProps)}\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      >\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","styledProps","_excluded2","itemsInGroupCount","count","_useChildrenWithIndex","contextValue","isHorizontal","defaultWidth","_jsx","StepGroupContext","Provider","value","BaseBox","getStyledProps","display","padding","overflowX","flexDirection","metaAttribute","name","MetaConstants","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 { 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":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,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,EAU0B;AAAA,EAAA,IAAAC,UAAA,GAAAD,KAAA,CATxCE,IAAI;AAAJA,IAAAA,IAAI,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,UAAA;IAAAE,iBAAA,GAAAH,KAAA,CACfI,WAAW;AAAXA,IAAAA,WAAW,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,iBAAA;IACxBtC,QAAQ,GAAAmC,KAAA,CAARnC,QAAQ;IACRwC,MAAM,GAAAL,KAAA,CAANK,MAAM;IAAAC,mBAAA,GAAAN,KAAA,CACNpC,aAAa;AAAbA,IAAAA,aAAa,GAAA0C,mBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,mBAAA;IACjBC,KAAK,GAAAP,KAAA,CAALO,KAAK;IACLC,QAAQ,GAAAR,KAAA,CAARQ,QAAQ;IACRC,QAAQ,GAAAT,KAAA,CAARS,QAAQ;AACLC,IAAAA,IAAI,GAAA3C,wBAAA,CAAAiC,KAAA,EAAAW,UAAA,CAAA,CAAA;EAEP,IAAMC,iBAAiB,GAAG/B,cAAK,CAACC,QAAQ,CAAC+B,KAAK,CAAChD,QAAQ,CAAC,CAAA;EACxD,IAAAiD,qBAAA,GAA4DpD,sBAAsB,CAAC;AACjFG,MAAAA,QAAQ,EAARA,QAAQ;AACRqC,MAAAA,IAAI,EAAJA,IAAI;AACJE,MAAAA,WAAW,EAAXA,WAAW;AACXxC,MAAAA,aAAa,EAAbA,aAAAA;AACF,KAAC,CAAC;IALMiC,iBAAiB,GAAAiB,qBAAA,CAAjBjB,iBAAiB;IAAEzB,4BAA4B,GAAA0C,qBAAA,CAA5B1C,4BAA4B,CAAA;AAMvD,EAAA,IAAM2C,YAAY,GAAGlC,cAAK,CAACiB,OAAO,CAChC,YAAA;IAAA,OAAO;AACLI,MAAAA,IAAI,EAAJA,IAAI;AACJE,MAAAA,WAAW,EAAXA,WAAW;AACXQ,MAAAA,iBAAiB,EAAjBA,iBAAiB;AACjBxC,MAAAA,4BAA4B,EAA5BA,4BAAAA;KACD,CAAA;GAAC,EACF,CAAC8B,IAAI,EAAEE,WAAW,EAAEQ,iBAAiB,EAAExC,4BAA4B,CACrE,CAAC,CAAA;AAED,EAAA,IAAM4C,YAAY,GAAGZ,WAAW,KAAK,YAAY,CAAA;AACjD,EAAA,IAAMa,YAAY,GAAGD,YAAY,GAAG,MAAM,GAAGrC,SAAS,CAAA;AAEtD,EAAA,oBACEuC,GAAA,CAACC,gBAAgB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,YAAa;AAAAlD,IAAAA,QAAA,eAC7CqD,GAAA,CAACI,OAAO,EAAA3B,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACF4B,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,EAAE7D,aAAa,KAAK,CAAC,GAAG,WAAW,GAAGe,SAAU;AACvD+C,MAAAA,SAAS,EAAEtB,WAAW,KAAK,YAAY,GAAG,MAAM,GAAGzB,SAAU;AAC7DgD,MAAAA,aAAa,EAAEvB,WAAW,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAA;AAAM,KAAA,EACzDwB,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACpC,SAAS;AAAEW,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,EACxD0B,sBAAsB,CAACrB,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAA7C,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;AACA,IAAMH,SAAS,gBAAGsC,wBAAwB,CAACjC,UAAU,EAAE;EACrDb,WAAW,EAAEE,YAAY,CAACM,SAAS;EACnCuC,WAAW,EAAE7C,YAAY,CAACM,SAAAA;AAC5B,CAAC;;;;"}

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

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import styled from 'styled-components';
@@ -15,6 +16,7 @@ import '../../utils/getFocusRingStyles/index.js';
 import getIn from '../../utils/lodashButBetter/get.js';
 import '../../utils/logger/index.js';
 import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
@@ -26,8 +28,10 @@ import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
+var _excluded = ["title", "titleColor", "timestamp", "description", "stepProgress", "marker", "trailing", "isSelected", "isDisabled", "href", "target", "onClick", "children", "_index", "_totalIndex", "_nestingLevel"];
 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 InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
@@ -76,6 +80,7 @@ var getStepTypeFromIndex = function getStepTypeFromIndex(_ref) {
 };
 var _StepItem = function _StepItem(_ref2) {
   var title = _ref2.title,
+    titleColor = _ref2.titleColor,
     timestamp = _ref2.timestamp,
     description = _ref2.description,
     _ref2$stepProgress = _ref2.stepProgress,
@@ -93,7 +98,8 @@ var _StepItem = function _StepItem(_ref2) {
     _ref2$_totalIndex = _ref2._totalIndex,
     _totalIndex = _ref2$_totalIndex === void 0 ? 0 : _ref2$_totalIndex,
     _ref2$_nestingLevel = _ref2._nestingLevel,
-    _nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel;
+    _nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStepGroup = useStepGroup(),
     itemsCount = _useStepGroup.itemsInGroupCount,
     totalItemsInParentGroupCount = _useStepGroup.totalItemsInParentGroupCount,
@@ -111,6 +117,7 @@ var _StepItem = function _StepItem(_ref2) {
   var isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;
   var isInteractive = Boolean(href) || Boolean(onClick);
   var isVertical = orientation === 'vertical';
+  var isNested = _nestingLevel > 0;
   if (false) {
     if (trailing && orientation === 'horizontal') {
       throwBladeError({
@@ -133,8 +140,8 @@ var _StepItem = function _StepItem(_ref2) {
     children: [/*#__PURE__*/jsxs(Box, {
       children: [/*#__PURE__*/jsx(Text, {
         size: stepItemHeaderTokens[size$1].title,
-        color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
-        weight: "semibold",
+        color: isDisabled ? 'surface.text.gray.disabled' : titleColor !== null && titleColor !== void 0 ? titleColor : 'surface.text.gray.subtle',
+        weight: isNested ? 'regular' : 'semibold',
         children: title
       }), /*#__PURE__*/jsx(Text, {
         size: stepItemHeaderTokens[size$1].timestamp,
@@ -155,7 +162,7 @@ var _StepItem = function _StepItem(_ref2) {
     paddingY: 'spacing.3',
     paddingX: 'spacing.4'
   };
-  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
     display: "flex",
     flexDirection: isVertical ? 'row' : 'column',
     gap: itemLineGap[size$1],
@@ -167,7 +174,7 @@ var _StepItem = function _StepItem(_ref2) {
     flex: isVertical ? undefined : '1'
   }, metaAttribute({
     name: MetaConstants.StepItem
-  })), {}, {
+  })), makeAnalyticsAttribute(rest)), {}, {
     ref: itemRef,
     children: [/*#__PURE__*/jsx(StepLine, {
       shouldShowStartBranch: !isFirstItem,
@@ -176,7 +183,6 @@ var _StepItem = function _StepItem(_ref2) {
       marker: marker,
       stepProgress: stepProgress
     }), /*#__PURE__*/jsxs(Box, {
-      marginTop: "spacing.3",
       flex: "1",
       marginRight: isVertical ? undefined : undefined,
       children: [isInteractive ? /*#__PURE__*/jsx(InteractiveItemHeaderBox, _objectSpread(_objectSpread({}, stepItemHeaderPaddings), {}, {
@@ -191,7 +197,7 @@ var _StepItem = function _StepItem(_ref2) {
         children: stepItemHeaderJSX
       })), children ? /*#__PURE__*/jsx(Box, {
         paddingX: "spacing.4",
-        paddingY: "spacing.3",
+        paddingBottom: "spacing.3",
         children: children
       }) : null]
     })]

package/build/lib/web/production/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';\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  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}: 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\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={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n          weight=\"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      ref={itemRef}\n    >\n      <StepLine\n        shouldShowStartBranch={!isFirstItem}\n        shouldShowEndBranch={!isLastItem}\n        stepType={stepType}\n        marker={marker}\n        stepProgress={stepProgress}\n      />\n      <Box marginTop=\"spacing.3\" 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\" paddingY=\"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","timestamp","description","_ref2$stepProgress","stepProgress","marker","trailing","isDisabled","href","target","onClick","children","_ref2$_index","_ref2$_totalIndex","_totalIndex","_ref2$_nestingLevel","_useStepGroup","useStepGroup","itemsInGroupCount","totalItemsInParentGroupCount","orientation","size","stepType","React","useMemo","itemRef","useRef","isFirstItem","isLastItem","isInteractive","Boolean","isVertical","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","ref","StepLine","shouldShowStartBranch","shouldShowEndBranch","marginTop","marginRight","as","disabled","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.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,wBAAwB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;EACpF,OAAO;AACLC,IAAAA,OAAO,EAAAC,EAAAA,CAAAA,MAAA,CAAKC,SAAS,CAACC,KAAK,CAACJ,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACM,QAAQ,CAAC,CAAC,EAAAJ,GAAAA,CAAAA,CAAAA,MAAA,CAAIC,SAAS,CACpEC,KAAK,CAACJ,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACO,QAAQ,CACnC,CAAC,CAAE;AACHC,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,OAAO,EAAE,cAAc;AACvBC,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,SAAS,EAAE,SAAS;IACpBC,eAAe,EAAEb,KAAK,CAACc,UAAU,GAC7Bd,KAAK,CAACK,KAAK,CAACU,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,OAAO,CAACC,KAAK,GACvDnB,KAAK,CAACK,KAAK,CAACU,MAAM,CAACK,WAAW;IAClCC,YAAY,EAAErB,KAAK,CAACK,KAAK,CAACM,MAAM,CAACW,MAAM,CAACC,MAAM;AAC9CC,IAAAA,KAAK,EAAE,MAAM;IACbC,UAAU,EAAA,mBAAA,CAAAvB,MAAA,CAAsBF,KAAK,CAACK,KAAK,CAACqB,MAAM,CAACC,QAAQ,CAACC,MAAM,EAAA,GAAA,CAAA,CAAA1B,MAAA,CAAIF,KAAK,CAACK,KAAK,CAACqB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAE;AACpH,IAAA,wBAAwB,EAAE;AACxBlB,MAAAA,eAAe,EAAEb,KAAK,CAACc,UAAU,GAC7Bd,KAAK,CAACK,KAAK,CAACU,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,OAAO,CAACc,gBAAgB,GAClEhC,KAAK,CAACK,KAAK,CAACU,MAAM,CAACC,WAAW,CAACC,UAAU,CAACgB,IAAI,CAACD,gBAAAA;KACpD;AACD,IAAA,gCAAgC,EAAAE,aAAA,CAC3BC,EAAAA,EAAAA,kBAAkB,CAAC;MAAE9B,KAAK,EAAEL,KAAK,CAACK,KAAAA;AAAM,KAAC,CAAC,CAC9C;AACD,IAAA,aAAa,EAAE;AACbG,MAAAA,MAAM,EAAE,aAAA;AACV,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAM4B,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAIkC;AAAA,EAAA,IAH1DC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,UAAU,GAAAH,IAAA,CAAVG,UAAU,CAAA;EAEV,IAAID,aAAa,KAAK,CAAC,EAAE;AACvB,IAAA,OAAO,SAAS,CAAA;AAClB,GAAA;EAEA,IAAIC,UAAU,KAAK,CAAC,EAAE;AACpB,IAAA,OAAO,aAAa,CAAA;AACtB,GAAA;EAEA,IAAIF,MAAM,KAAK,CAAC,EAAE;AAChB,IAAA,OAAO,OAAO,CAAA;AAChB,GAAA;AAEA,EAAA,IAAIA,MAAM,KAAKE,UAAU,GAAG,CAAC,EAAE;AAC7B,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AAED,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAAC,KAAA,EAkB0B;AAAA,EAAA,IAjBvCC,KAAK,GAAAD,KAAA,CAALC,KAAK;IACLC,UAAU,GAAAF,KAAA,CAAVE,UAAU;IACVC,SAAS,GAAAH,KAAA,CAATG,SAAS;IACTC,WAAW,GAAAJ,KAAA,CAAXI,WAAW;IAAAC,kBAAA,GAAAL,KAAA,CACXM,YAAY;AAAZA,IAAAA,YAAY,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,kBAAA;IACrBE,MAAM,GAAAP,KAAA,CAANO,MAAM;IACNC,QAAQ,GAAAR,KAAA,CAARQ,QAAQ;IACRpC,UAAU,GAAA4B,KAAA,CAAV5B,UAAU;IACVqC,UAAU,GAAAT,KAAA,CAAVS,UAAU;IACVC,IAAI,GAAAV,KAAA,CAAJU,IAAI;IACJC,MAAM,GAAAX,KAAA,CAANW,MAAM;IACNC,OAAO,GAAAZ,KAAA,CAAPY,OAAO;IACPC,QAAQ,GAAAb,KAAA,CAARa,QAAQ;IAAAC,YAAA,GAAAd,KAAA,CACRJ,MAAM;AAANA,IAAAA,MAAM,GAAAkB,YAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,YAAA;IAAAC,iBAAA,GAAAf,KAAA,CACVgB,WAAW;AAAXA,IAAAA,WAAW,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,iBAAA;IAAAE,mBAAA,GAAAjB,KAAA,CACfH,aAAa;AAAbA,IAAAA,aAAa,GAAAoB,mBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,mBAAA;AACdC,IAAAA,IAAI,GAAAC,wBAAA,CAAAnB,KAAA,EAAAoB,SAAA,CAAA,CAAA;AAEP,EAAA,IAAAC,aAAA,GAKIC,YAAY,EAAE;IAJGxB,UAAU,GAAAuB,aAAA,CAA7BE,iBAAiB;IACjBC,4BAA4B,GAAAH,aAAA,CAA5BG,4BAA4B;IAC5BC,WAAW,GAAAJ,aAAA,CAAXI,WAAW;IACXC,MAAI,GAAAL,aAAA,CAAJK,IAAI,CAAA;AAEN,EAAA,IAAMC,QAAQ,GAAGC,cAAK,CAACC,OAAO,CAC5B,YAAA;AAAA,IAAA,OAAMnC,oBAAoB,CAAC;AAAEE,MAAAA,MAAM,EAANA,MAAM;AAAEC,MAAAA,aAAa,EAAbA,aAAa;AAAEC,MAAAA,UAAU,EAAVA,UAAAA;AAAW,KAAC,CAAC,CAAA;AAAA,GAAA,EACjE,CAACF,MAAM,EAAEC,aAAa,EAAEC,UAAU,CACpC,CAAC,CAAA;AAED,EAAA,IAAMgC,OAAO,GAAGF,cAAK,CAACG,MAAM,CAAiB,IAAI,CAAC,CAAA;AAElD,EAAA,IAAMC,WAAW,GAAGhB,WAAW,KAAK,CAAC,CAAA;AACrC,EAAA,IAAMiB,UAAU,GAAGjB,WAAW,KAAKQ,4BAA4B,GAAG,CAAC,CAAA;EACnE,IAAMU,aAAa,GAAGC,OAAO,CAACzB,IAAI,CAAC,IAAIyB,OAAO,CAACvB,OAAO,CAAC,CAAA;AACvD,EAAA,IAAMwB,UAAU,GAAGX,WAAW,KAAK,UAAU,CAAA;AAC7C,EAAA,IAAMY,QAAQ,GAAGxC,aAAa,GAAG,CAAC,CAAA;AAElC,EAAA,IAAI,KAAO,EAAE;AACX,IAAA,IAAIW,QAAQ,IAAIiB,WAAW,KAAK,YAAY,EAAE;AAC5Ca,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,iDAAiD;AAC1DC,QAAAA,UAAU,EAAE,UAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AAEA,IAAA,IAAI3C,aAAa,IAAI,CAAC,IAAI4B,WAAW,KAAK,YAAY,EAAE;AACtDa,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,uEAAuE;AAChFC,QAAAA,UAAU,EAAE,UAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAMC,iBAAiB,gBACrBC,IAAA,CAACC,GAAG,EAAA;AAAC5E,IAAAA,OAAO,EAAC,MAAM;AAAC6E,IAAAA,aAAa,EAAC,KAAK;AAACC,IAAAA,cAAc,EAAC,eAAe;AAACC,IAAAA,GAAG,EAAC,WAAW;IAAAjC,QAAA,EAAA,cACpF6B,IAAA,CAACC,GAAG,EAAA;MAAA9B,QAAA,EAAA,cACFkC,GAAA,CAACC,IAAI,EAAA;AACHtB,QAAAA,IAAI,EAAEuB,oBAAoB,CAACvB,MAAI,CAAC,CAACzB,KAAM;QACvCiD,KAAK,EACHzC,UAAU,GAAG,4BAA4B,GAAGP,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,KAAA,CAAA,GAAVA,UAAU,GAAI,0BAC3D;AACDiD,QAAAA,MAAM,EAAEd,QAAQ,GAAG,SAAS,GAAG,UAAW;AAAAxB,QAAAA,QAAA,EAEzCZ,KAAAA;AAAK,OACF,CAAC,eACP8C,GAAA,CAACC,IAAI,EAAA;AACHtB,QAAAA,IAAI,EAAEuB,oBAAoB,CAACvB,MAAI,CAAC,CAACvB,SAAU;AAC3CiD,QAAAA,OAAO,EAAC,WAAW;AACnBF,QAAAA,KAAK,EAAEzC,UAAU,GAAG,4BAA4B,GAAG,yBAA0B;AAC7E4C,QAAAA,OAAO,EAAC,SAAS;AAAAxC,QAAAA,QAAA,EAEhBV,SAAAA;AAAS,OACN,CAAC,eACP4C,GAAA,CAACC,IAAI,EAAA;AACHtB,QAAAA,IAAI,EAAEuB,oBAAoB,CAACvB,MAAI,CAAC,CAACtB,WAAY;AAC7C8C,QAAAA,KAAK,EAAEzC,UAAU,GAAG,4BAA4B,GAAG,yBAA0B;AAAAI,QAAAA,QAAA,EAE5ET,WAAAA;AAAW,OACR,CAAC,CAAA;AAAA,KACJ,CAAC,eACN2C,GAAA,CAACJ,GAAG,EAAA;AAAA9B,MAAAA,QAAA,EAAEL,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAAA,GAClB,CACN,CAAA;AAED,EAAA,IAAM8C,sBAAsE,GAAG;AAC7E1F,IAAAA,QAAQ,EAAE,WAAW;AACrBC,IAAAA,QAAQ,EAAE,WAAA;GACF,CAAA;EAEV,oBACE6E,IAAA,CAACa,OAAO,EAAA/D,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNzB,IAAAA,OAAO,EAAC,MAAM;AACd6E,IAAAA,aAAa,EAAER,UAAU,GAAG,KAAK,GAAG,QAAS;AAC7CU,IAAAA,GAAG,EAAEU,WAAW,CAAC9B,MAAI,CAAE;IACvB+B,SAAS,EAAA,uBAAA,CAAAjG,MAAA,CAA0BoC,MAAM,0BAAApC,MAAA,CAAuBqC,aAAa,CAAG;AAChF3B,IAAAA,SAAS,EAAEkE,UAAU,GAAG,MAAM,GAAG,QAAS;AAC1CsB,IAAAA,UAAU,EAAEtB,UAAU,GAAGuB,SAAS,GAAG,QAAS;AAC9CC,IAAAA,QAAQ,EAAExB,UAAU,GAAGuB,SAAS,UAAAnG,MAAA,CAAUqG,QAAQ,CAACC,IAAU,CAAC,KAAK,CAAC,CAAC,EAAU,SAAA,CAAA;AAC/EhF,IAAAA,KAAK,EAAEsD,UAAU,GAAG,MAAM,GAAGuB,SAAU;AACvCI,IAAAA,IAAI,EAAE3B,UAAU,GAAGuB,SAAS,GAAG,GAAA;AAAI,GAAA,EAC/BK,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,QAAAA;AAAS,GAAC,CAAC,CAAA,EAC/CC,sBAAsB,CAAClD,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCmD,IAAAA,GAAG,EAAEvC,OAAQ;IAAAjB,QAAA,EAAA,cAEbkC,GAAA,CAACuB,QAAQ,EAAA;MACPC,qBAAqB,EAAE,CAACvC,WAAY;MACpCwC,mBAAmB,EAAE,CAACvC,UAAW;AACjCN,MAAAA,QAAQ,EAAEA,QAAS;AACnBpB,MAAAA,MAAM,EAAEA,MAAO;AACfD,MAAAA,YAAY,EAAEA,YAAAA;AAAa,KAC5B,CAAC,eACFoC,IAAA,CAACC,GAAG,EAAA;AAACoB,MAAAA,IAAI,EAAC,GAAG;AAACU,MAAAA,WAAW,EAAErC,UAAU,GAAGuB,SAAS,GAAGA,SAAU;MAAA9C,QAAA,EAAA,CAC3DqB,aAAa,gBACZa,GAAA,CAAC/F,wBAAwB,EAAAwC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACnB8D,sBAAsB,CAAA,EAAA,EAAA,EAAA;AAC1BoB,QAAAA,EAAE,EAAEhE,IAAI,GAAG,GAAG,GAAG,QAAS;AAC1BA,QAAAA,IAAI,EAAEA,IAAK;AACXC,QAAAA,MAAM,EAAEA,MAAO;AACfvC,QAAAA,UAAU,EAAEA,UAAW;AACvBwC,QAAAA,OAAO,EAAEA,OAAQ;AACjB+D,QAAAA,QAAQ,EAAElE,UAAW;AAAAI,QAAAA,QAAA,EAEpB4B,iBAAAA;OACuB,CAAA,CAAC,gBAE3BM,GAAA,CAACJ,GAAG,EAAAnD,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAK8D,sBAAsB,CAAA,EAAA,EAAA,EAAA;AAAAzC,QAAAA,QAAA,EAAG4B,iBAAAA;AAAiB,OAAA,CAAM,CAC1D,EACA5B,QAAQ,gBACPkC,GAAA,CAACJ,GAAG,EAAA;AAAC9E,QAAAA,QAAQ,EAAC,WAAW;AAAC+G,QAAAA,aAAa,EAAC,WAAW;AAAA/D,QAAAA,QAAA,EAChDA,QAAAA;OACE,CAAC,GACJ,IAAI,CAAA;AAAA,KACL,CAAC,CAAA;AAAA,GAAA,CACC,CAAC,CAAA;AAEd,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMsD,QAAQ,gBAAGU,wBAAwB,CAAC9E,SAAS,EAAE;EACnD1C,WAAW,EAAEyH,YAAY,CAACX,QAAQ;EAClC/G,WAAW,EAAE0H,YAAY,CAACX,QAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/production/components/StepGroup/StepLine.web.js

@@ -72,33 +72,35 @@ var StepTopCurveVertical = function StepTopCurveVertical(_ref4) {
     styledProps = _objectWithoutProperties(_ref4, _excluded3);
   var _useTheme2 = useTheme(),
     theme = _useTheme2.theme;
-  return isDotted ? /*#__PURE__*/jsxs(Svg, {
-    width: "21",
-    height: "15",
-    marginLeft: "-1px",
-    viewBox: "0 0 21 15",
-    fill: theme.colors.surface.border.gray.subtle,
+  return isDotted ? /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: theme.colors.surface.border.gray.subtle
+  }, styledProps), {}, {
     children: [/*#__PURE__*/jsx(Path, {
-      d: "M1.90332 2.3916C2.20752 2.3916 2.47998 2.25586 2.66357 2.04199C2.81299 1.86719 2.90332 1.63965 2.90332 1.3916C2.90332 0.838867 2.45557 0.391602 1.90332 0.391602C1.35107 0.391602 0.90332 0.838867 0.90332 1.3916C0.90332 1.94434 1.35107 2.3916 1.90332 2.3916Z"
+      d: "M2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M9.85352 13.042C9.66992 13.2559 9.39746 13.3916 9.09326 13.3916C8.54102 13.3916 8.09326 12.9443 8.09326 12.3916C8.09326 11.8389 8.54102 11.3916 9.09326 11.3916C9.64551 11.3916 10.0933 11.8389 10.0933 12.3916C10.0933 12.6396 10.0029 12.8672 9.85352 13.042Z"
+      d: "M2 6C2 6.55228 1.55228 7 1 7C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5C1.55228 5 2 5.44772 2 6Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M14.498 14.3916C14.8022 14.3916 15.0747 14.2559 15.2583 14.042C15.4077 13.8672 15.498 13.6396 15.498 13.3916C15.498 12.8389 15.0503 12.3916 14.498 12.3916C13.9458 12.3916 13.498 12.8389 13.498 13.3916C13.498 13.9443 13.9458 14.3916 14.498 14.3916Z"
+      d: "M1 12C1.55228 12 2 11.5523 2 11C2 10.4477 1.55228 10 1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M19.9033 14.3916C20.2075 14.3916 20.48 14.2559 20.6636 14.042C20.813 13.8672 20.9033 13.6396 20.9033 13.3916C20.9033 12.8389 20.4556 12.3916 19.9033 12.3916C19.3511 12.3916 18.9033 12.8389 18.9033 13.3916C18.9033 13.9443 19.3511 14.3916 19.9033 14.3916Z"
+      d: "M3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M3.26318 6.08887C3.07959 6.30273 2.80713 6.43848 2.50293 6.43848C1.95068 6.43848 1.50293 5.99121 1.50293 5.43848C1.50293 4.88574 1.95068 4.43848 2.50293 4.43848C3.05518 4.43848 3.50293 4.88574 3.50293 5.43848C3.50293 5.68652 3.4126 5.91406 3.26318 6.08887Z"
+      d: "M7 20C7.55228 20 8 19.5523 8 19C8 18.4477 7.55228 18 7 18C6.44772 18 6 18.4477 6 19C6 19.5523 6.44772 20 7 20Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M5.15137 10.6357C5.45557 10.6357 5.72803 10.5 5.91162 10.2861C6.06104 10.1113 6.15137 9.88379 6.15137 9.63574C6.15137 9.08301 5.70361 8.63574 5.15137 8.63574C4.59912 8.63574 4.15137 9.08301 4.15137 9.63574C4.15137 10.1885 4.59912 10.6357 5.15137 10.6357Z"
+      d: "M14 19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19C12 18.4477 12.4477 18 13 18C13.5523 18 14 18.4477 14 19Z"
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z"
     })]
-  }) : /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({
+  })) : /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({
     width: "20",
     height: "14",
     viewBox: "0 0 20 14",
     fill: "none"
   }, styledProps), {}, {
     children: /*#__PURE__*/jsx(Path, {
-      d: "M1 0V1C1 7.62742 6.37258 13 13 13H20",
+      d: "M1 0V5C1 9.41828 4.58172 13 9 13H20",
       stroke: theme.colors.surface.border.gray.subtle,
       strokeWidth: "2"
     })
@@ -109,36 +111,71 @@ var StepBottomCurveVertical = function StepBottomCurveVertical(_ref5) {
     styledProps = _objectWithoutProperties(_ref5, _excluded4);
   var _useTheme3 = useTheme(),
     theme = _useTheme3.theme;
-  return isDotted ? /*#__PURE__*/jsxs(Svg, {
-    width: "35",
-    height: "26",
-    viewBox: "0 0 35 26",
-    fill: theme.colors.surface.border.gray.subtle,
+  var _useStepGroup = useStepGroup(),
+    size = _useStepGroup.size;
+  if (size === 'medium') {
+    return isDotted ? /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
+      width: "42",
+      height: "5",
+      viewBox: "0 0 42 5",
+      fill: theme.colors.surface.border.gray.subtle
+    }, styledProps), {}, {
+      children: [/*#__PURE__*/jsx(Path, {
+        d: "M32 1C32 1.55228 31.5523 2 31 2C30.4477 2 30 1.55228 30 1C30 0.447715 30.4477 0 31 0C31.5523 0 32 0.447715 32 1Z"
+      }), /*#__PURE__*/jsx(Path, {
+        d: "M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z"
+      }), /*#__PURE__*/jsx(Path, {
+        d: "M27.5 3.5C28.0523 3.5 28.5 3.05228 28.5 2.5C28.5 1.94772 28.0523 1.5 27.5 1.5C26.9477 1.5 26.5 1.94772 26.5 2.5C26.5 3.05228 26.9477 3.5 27.5 3.5Z"
+      }), /*#__PURE__*/jsx(Path, {
+        d: "M5.5 2.5C5.5 3.05228 5.05228 3.5 4.5 3.5C3.94772 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.94772 1.5 4.5 1.5C5.05228 1.5 5.5 1.94772 5.5 2.5Z"
+      }), /*#__PURE__*/jsx(Path, {
+        d: "M16.5 3.5C17.0523 3.5 17.5 3.05228 17.5 2.5C17.5 1.94772 17.0523 1.5 16.5 1.5C15.9477 1.5 15.5 1.94772 15.5 2.5C15.5 3.05228 15.9477 3.5 16.5 3.5Z"
+      }), /*#__PURE__*/jsx(Path, {
+        d: "M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z"
+      }), /*#__PURE__*/jsx(Path, {
+        d: "M22.5 3.5C23.0523 3.5 23.5 3.05228 23.5 2.5C23.5 1.94772 23.0523 1.5 22.5 1.5C21.9477 1.5 21.5 1.94772 21.5 2.5C21.5 3.05228 21.9477 3.5 22.5 3.5Z"
+      })]
+    })) : /*#__PURE__*/jsx(Svg, {
+      width: "33",
+      height: "5",
+      viewBox: "0 0 33 5",
+      fill: "none",
+      children: /*#__PURE__*/jsx(Path, {
+        d: "M1 5V5C1 3.63251 2.108 2.52363 3.47549 2.52255L29.5 2.50198C30.881 2.50088 32 1.38103 32 1.19209e-07V1.19209e-07",
+        stroke: theme.colors.surface.border.gray.subtle,
+        strokeWidth: "2"
+      })
+    });
+  }
+  return isDotted ? /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
+    width: "46",
+    height: "5",
+    viewBox: "0 0 46 5",
+    fill: theme.colors.surface.border.gray.subtle
+  }, styledProps), {}, {
     children: [/*#__PURE__*/jsx(Path, {
-      d: "M34.7603 1.93457C34.5767 2.14844 34.3042 2.28418 34 2.28418C33.4478 2.28418 33 1.83691 33 1.28418C33 0.731445 33.4478 0.28418 34 0.28418C34.5522 0.28418 35 0.731445 35 1.28418C35 1.53223 34.9097 1.75977 34.7603 1.93457Z"
-    }), /*#__PURE__*/jsx(Path, {
-      d: "M2 18.7803C2.3042 18.7803 2.57666 18.6445 2.76025 18.4307C2.90967 18.2559 3 18.0283 3 17.7803C3 17.2275 2.55225 16.7803 2 16.7803C1.44775 16.7803 1 17.2275 1 17.7803C1 18.333 1.44775 18.7803 2 18.7803Z"
+      d: "M35 1C35 1.55228 34.5523 2 34 2C33.4477 2 33 1.55228 33 1C33 0.447715 33.4477 0 34 0C34.5523 0 35 0.447715 35 1Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M1 25.2842C1.3042 25.2842 1.57666 25.1484 1.76025 24.9346C1.90967 24.7598 2 24.5322 2 24.2842C2 23.7314 1.55225 23.2842 1 23.2842C0.447754 23.2842 0 23.7314 0 24.2842C0 24.8369 0.447754 25.2842 1 25.2842Z"
+      d: "M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M7.30127 14.7842C7.60547 14.7842 7.87793 14.6484 8.06152 14.4346C8.21094 14.2598 8.30127 14.0322 8.30127 13.7842C8.30127 13.2314 7.85352 12.7842 7.30127 12.7842C6.74902 12.7842 6.30127 13.2314 6.30127 13.7842C6.30127 14.3369 6.74902 14.7842 7.30127 14.7842Z"
+      d: "M31.5 3.5C32.0523 3.5 32.5 3.05228 32.5 2.5C32.5 1.94772 32.0523 1.5 31.5 1.5C30.9477 1.5 30.5 1.94772 30.5 2.5C30.5 3.05228 30.9477 3.5 31.5 3.5Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M14.7188 13.1338C14.5352 13.3477 14.2627 13.4834 13.9585 13.4834C13.4062 13.4834 12.9585 13.0361 12.9585 12.4834C12.9585 11.9307 13.4062 11.4834 13.9585 11.4834C14.5107 11.4834 14.9585 11.9307 14.9585 12.4834C14.9585 12.7314 14.8682 12.959 14.7188 13.1338Z"
+      d: "M4.5 2.5C4.5 3.05228 4.05228 3.5 3.5 3.5C2.94772 3.5 2.5 3.05228 2.5 2.5C2.5 1.94772 2.94772 1.5 3.5 1.5C4.05228 1.5 4.5 1.94772 4.5 2.5Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M20.5698 12.2119C20.874 12.2119 21.1465 12.0762 21.3301 11.8623C21.4795 11.6875 21.5698 11.46 21.5698 11.2119C21.5698 10.6592 21.1221 10.2119 20.5698 10.2119C20.0176 10.2119 19.5698 10.6592 19.5698 11.2119C19.5698 11.7646 20.0176 12.2119 20.5698 12.2119Z"
+      d: "M17.5 3.5C18.0523 3.5 18.5 3.05228 18.5 2.5C18.5 1.94772 18.0523 1.5 17.5 1.5C16.9477 1.5 16.5 1.94772 16.5 2.5C16.5 3.05228 16.9477 3.5 17.5 3.5Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M27.6211 10.6523C27.4375 10.8662 27.165 11.002 26.8608 11.002C26.3086 11.002 25.8608 10.5547 25.8608 10.002C25.8608 9.44922 26.3086 9.00195 26.8608 9.00195C27.4131 9.00195 27.8608 9.44922 27.8608 10.002C27.8608 10.25 27.7705 10.4775 27.6211 10.6523Z"
+      d: "M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z"
     }), /*#__PURE__*/jsx(Path, {
-      d: "M32.0879 8.2002C32.3921 8.2002 32.6646 8.06445 32.8481 7.85059C32.9976 7.67578 33.0879 7.44824 33.0879 7.2002C33.0879 6.64746 32.6401 6.2002 32.0879 6.2002C31.5356 6.2002 31.0879 6.64746 31.0879 7.2002C31.0879 7.75293 31.5356 8.2002 32.0879 8.2002Z"
+      d: "M24.5 3.5C25.0523 3.5 25.5 3.05228 25.5 2.5C25.5 1.94772 25.0523 1.5 24.5 1.5C23.9477 1.5 23.5 1.94772 23.5 2.5C23.5 3.05228 23.9477 3.5 24.5 3.5Z"
     })]
-  }) : /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({
+  })) : /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({
     width: "35",
-    height: "25",
-    viewBox: "0 0 35 25",
+    height: "6",
+    viewBox: "0 0 35 6",
     fill: "none"
   }, styledProps), {}, {
     children: /*#__PURE__*/jsx(Path, {
-      d: "M1 25V21.3088C1 17.4754 3.71928 14.1808 7.48316 13.4539L27.5168 9.58528C31.2807 8.85845 34 5.56381 34 1.7304V-2.98023e-08",
+      d: "M1 6V6C1 4.36914 2.31973 3.04584 3.95058 3.04142L31.04 2.96802C32.6761 2.96359 34 1.63606 34 1.3411e-07V1.3411e-07",
       stroke: theme.colors.surface.border.gray.subtle,
       strokeWidth: "2"
     })
@@ -154,8 +191,8 @@ var StepLineVertical = function StepLineVertical(_ref6) {
     isIndented = _ref6.isIndented,
     shouldShowStartBranch = _ref6.shouldShowStartBranch,
     shouldShowEndBranch = _ref6.shouldShowEndBranch;
-  var _useStepGroup = useStepGroup(),
-    size = _useStepGroup.size;
+  var _useStepGroup2 = useStepGroup(),
+    size = _useStepGroup2.size;
   var spacingTokens = getMarkerLineSpacings(size);
   return /*#__PURE__*/jsxs(Box, {
     position: "relative",
@@ -181,8 +218,8 @@ var StepLineStart = function StepLineStart(_ref7) {
     stepProgress = _ref7.stepProgress,
     shouldShowStartBranch = _ref7.shouldShowStartBranch,
     shouldShowEndBranch = _ref7.shouldShowEndBranch;
-  var _useStepGroup2 = useStepGroup(),
-    size = _useStepGroup2.size;
+  var _useStepGroup3 = useStepGroup(),
+    size = _useStepGroup3.size;
   var spacingTokens = getMarkerLineSpacings(size);
   return /*#__PURE__*/jsxs(Box, {
     position: "relative",
@@ -212,8 +249,8 @@ var StepLineEnd = function StepLineEnd(_ref8) {
     stepProgress = _ref8.stepProgress,
     shouldShowStartBranch = _ref8.shouldShowStartBranch,
     shouldShowEndBranch = _ref8.shouldShowEndBranch;
-  var _useStepGroup3 = useStepGroup(),
-    size = _useStepGroup3.size;
+  var _useStepGroup4 = useStepGroup(),
+    size = _useStepGroup4.size;
   var spacingTokens = getMarkerLineSpacings(size);
   return /*#__PURE__*/jsxs(Box, {
     position: "relative",
@@ -267,8 +304,8 @@ var StepLineSingleItem = function StepLineSingleItem(_ref10) {
     stepProgress = _ref10.stepProgress,
     shouldShowEndBranch = _ref10.shouldShowEndBranch,
     shouldShowStartBranch = _ref10.shouldShowStartBranch;
-  var _useStepGroup4 = useStepGroup(),
-    size = _useStepGroup4.size;
+  var _useStepGroup5 = useStepGroup(),
+    size = _useStepGroup5.size;
   var spacingTokens = getMarkerLineSpacings(size);
   return /*#__PURE__*/jsxs(Box, {
     position: "relative",
@@ -304,8 +341,8 @@ var StepLine = function StepLine(_ref11) {
     shouldShowEndBranch = _ref11.shouldShowEndBranch,
     marker = _ref11.marker,
     stepProgress = _ref11.stepProgress;
-  var _useStepGroup5 = useStepGroup(),
-    orientation = _useStepGroup5.orientation;
+  var _useStepGroup6 = useStepGroup(),
+    orientation = _useStepGroup6.orientation;
   var commonProps = {
     shouldShowStartBranch: shouldShowStartBranch,
     shouldShowEndBranch: shouldShowEndBranch,