@razorpay/blade 11.13.1 → 11.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { size as sizeToken } from '~tokens/global';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype IndicatorCommonProps = {\n  /**\n   * Sets the color tone\n   *\n   * @default neutral\n   */\n  color?: FeedbackColors;\n\n  /**\n   * Size of the indicator\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n} & TestID &\n  StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children: StringChildrenType;\n\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel?: string;\n};\n\ntype IndicatorWithA11yLabel = {\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel: string;\n\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);\n\ntype Dimensions = {\n  svgSize: number;\n  textSize: 'small' | 'medium';\n};\n\nconst Indicator = ({\n  accessibilityLabel,\n  children,\n  size = 'medium',\n  color = 'neutral',\n  testID,\n  ...styledProps\n}: IndicatorProps): ReactElement => {\n  const { theme } = useTheme();\n  const childrenString = getStringFromReactText(children);\n\n  const fillColor = theme.colors.feedback.background[color].intense;\n  const getDimension = useCallback((): Dimensions => {\n    switch (size) {\n      case 'small':\n        return { svgSize: sizeToken[6], textSize: 'small' };\n      case 'large':\n        return { svgSize: sizeToken[10], textSize: 'medium' };\n      default:\n        return { svgSize: sizeToken[8], textSize: 'medium' };\n    }\n  }, [size]);\n  const dimensions = getDimension();\n\n  const isWeb = !isReactNative();\n  const a11yProps = makeAccessible({\n    label: accessibilityLabel ?? childrenString,\n    ...(isWeb && { role: 'status' }),\n  });\n\n  return (\n    <BaseBox\n      display={(isWeb ? 'inline-flex' : 'flex') as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n        <Svg\n          width={String(dimensions.svgSize)}\n          height={String(dimensions.svgSize)}\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n        >\n          <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColor} />\n        </Svg>\n        <BaseBox marginLeft=\"spacing.2\">\n          <Text\n            weight=\"medium\"\n            color=\"surface.text.gray.subtle\"\n            textAlign=\"left\"\n            size={dimensions.textSize}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","fillColor","colors","feedback","background","intense","getDimension","useCallback","svgSize","sizeToken","textSize","dimensions","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","Circle","cx","cy","r","marginLeft","Text","weight","textAlign"],"mappings":"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"}
+{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { size as sizeToken } from '~tokens/global';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype IndicatorCommonProps = {\n  /**\n   * Sets the color tone\n   *\n   * @default neutral\n   */\n  color?: FeedbackColors | 'primary';\n\n  /**\n   * Size of the indicator\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n} & TestID &\n  StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children: StringChildrenType;\n\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel?: string;\n};\n\ntype IndicatorWithA11yLabel = {\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel: string;\n\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);\n\ntype Dimensions = {\n  svgSize: number;\n  textSize: 'small' | 'medium';\n};\n\nconst Indicator = ({\n  accessibilityLabel,\n  children,\n  size = 'medium',\n  color = 'neutral',\n  testID,\n  ...styledProps\n}: IndicatorProps): ReactElement => {\n  const { theme } = useTheme();\n  const childrenString = getStringFromReactText(children);\n\n  const fillColor =\n    color === 'primary'\n      ? theme.colors.surface.background.primary.intense\n      : theme.colors.feedback.background[color].intense;\n  const getDimension = useCallback((): Dimensions => {\n    switch (size) {\n      case 'small':\n        return { svgSize: sizeToken[6], textSize: 'small' };\n      case 'large':\n        return { svgSize: sizeToken[10], textSize: 'medium' };\n      default:\n        return { svgSize: sizeToken[8], textSize: 'medium' };\n    }\n  }, [size]);\n  const dimensions = getDimension();\n\n  const isWeb = !isReactNative();\n  const a11yProps = makeAccessible({\n    label: accessibilityLabel ?? childrenString,\n    ...(isWeb && { role: 'status' }),\n  });\n\n  return (\n    <BaseBox\n      display={(isWeb ? 'inline-flex' : 'flex') as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n        <Svg\n          width={String(dimensions.svgSize)}\n          height={String(dimensions.svgSize)}\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n        >\n          <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColor} />\n        </Svg>\n        <BaseBox marginLeft=\"spacing.2\">\n          <Text\n            weight=\"medium\"\n            color=\"surface.text.gray.subtle\"\n            textAlign=\"left\"\n            size={dimensions.textSize}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","fillColor","colors","surface","background","primary","intense","feedback","getDimension","useCallback","svgSize","sizeToken","textSize","dimensions","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","Circle","cx","cy","r","marginLeft","Text","weight","textAlign"],"mappings":"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"}

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

@@ -0,0 +1,138 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import { useStepGroup, StepGroupContext } from './StepGroupContext.js';
+import { componentIds } from './componentIds.js';
+import '../Box/BaseBox/index.js';
+import '../Box/styledProps/index.js';
+import '../../utils/isValidAllowedChildren/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["_nestingLevel", "children"],
+  _excluded2 = ["size", "orientation", "children", "testID", "_nestingLevel", "width", "minWidth", "maxWidth"];
+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 useChildrenWithIndexes = function useChildrenWithIndexes(_ref) {
+  var _nestingLevel = _ref._nestingLevel,
+    children = _ref.children,
+    parentStepGroupProps = _objectWithoutProperties(_ref, _excluded);
+  var _useStepGroup = useStepGroup(),
+    totalItemsFromPreviousParent = _useStepGroup.totalItemsInParentGroupCount;
+  var totalIndex = 0;
+  var traverseGroupAndAddIndex = function traverseGroupAndAddIndex(groupChildrenProp) {
+    var nestingLevelOfGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var stepItemIndex = 0;
+    return React__default.Children.map(groupChildrenProp, function (child, index) {
+      var componentId = getComponentId(child);
+      if (componentId === componentIds.StepItem) {
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          _index: stepItemIndex++,
+          _totalIndex: totalIndex++,
+          _nestingLevel: nestingLevelOfGroup,
+          key: index
+        });
+      }
+      if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {
+        return /*#__PURE__*/React__default.cloneElement(child, _objectSpread(_objectSpread({}, parentStepGroupProps), {}, {
+          children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),
+          _nestingLevel: nestingLevelOfGroup + 1
+        }));
+      }
+      return child;
+    });
+  };
+  var childrenWithIndex = React__default.useMemo(function () {
+    return _nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [children, _nestingLevel]);
+  var totalItemsInParentGroupCount = _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;
+  return {
+    childrenWithIndex: childrenWithIndex,
+    totalItemsInParentGroupCount: totalItemsInParentGroupCount
+  };
+};
+var _StepGroup = function _StepGroup(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    _ref2$orientation = _ref2.orientation,
+    orientation = _ref2$orientation === void 0 ? 'vertical' : _ref2$orientation,
+    children = _ref2.children,
+    testID = _ref2.testID,
+    _ref2$_nestingLevel = _ref2._nestingLevel,
+    _nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
+    width = _ref2.width,
+    minWidth = _ref2.minWidth,
+    maxWidth = _ref2.maxWidth,
+    styledProps = _objectWithoutProperties(_ref2, _excluded2);
+  var itemsInGroupCount = React__default.Children.count(children);
+  var _useChildrenWithIndex = useChildrenWithIndexes({
+      children: children,
+      size: size,
+      orientation: orientation,
+      _nestingLevel: _nestingLevel
+    }),
+    childrenWithIndex = _useChildrenWithIndex.childrenWithIndex,
+    totalItemsInParentGroupCount = _useChildrenWithIndex.totalItemsInParentGroupCount;
+  var contextValue = React__default.useMemo(function () {
+    return {
+      size: size,
+      orientation: orientation,
+      itemsInGroupCount: itemsInGroupCount,
+      totalItemsInParentGroupCount: totalItemsInParentGroupCount
+    };
+  }, [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount]);
+  var isHorizontal = orientation === 'horizontal';
+  var defaultWidth = isHorizontal ? '100%' : undefined;
+  return /*#__PURE__*/jsx(StepGroupContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, getStyledProps(styledProps)), {}, {
+      display: "inline-flex",
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100%',
+      minWidth: minWidth,
+      width: width !== null && width !== void 0 ? width : defaultWidth,
+      padding: _nestingLevel === 0 ? 'spacing.4' : undefined,
+      overflowX: orientation === 'horizontal' ? 'auto' : undefined,
+      flexDirection: orientation === 'vertical' ? 'column' : 'row'
+    }, metaAttribute({
+      name: MetaConstants.StepGroup,
+      testID: testID
+    })), {}, {
+      children: childrenWithIndex
+    }))
+  });
+};
+
+/**
+ * ## StepGroup
+ *
+ * Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <StepGroup orientation="vertical" size="medium">
+ *   <StepItem title="Personal Details" />
+ *   <StepItem title="Business Details" />
+ * </StepGroup>
+ * ```
+ *
+ * ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
+ */
+var StepGroup = /*#__PURE__*/assignWithoutSideEffects(_StepGroup, {
+  componentId: componentIds.StepGroup,
+  displayName: componentIds.StepGroup
+});
+
+export { StepGroup };
+//# sourceMappingURL=StepGroup.web.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+
+var StepGroupContext = /*#__PURE__*/React__default.createContext({
+  itemsInGroupCount: 0,
+  totalItemsInParentGroupCount: 0,
+  size: 'medium',
+  orientation: 'vertical'
+});
+var useStepGroup = function useStepGroup() {
+  var stepGroupContext = React__default.useContext(StepGroupContext);
+  return stepGroupContext;
+};
+
+export { StepGroupContext, useStepGroup };
+//# sourceMappingURL=StepGroupContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepGroupContext.js","sources":["../../../../../../src/components/StepGroup/StepGroupContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { StepGroupContextType } from './types';\n\nconst StepGroupContext = React.createContext<StepGroupContextType>({\n  itemsInGroupCount: 0,\n  totalItemsInParentGroupCount: 0,\n  size: 'medium',\n  orientation: 'vertical',\n});\n\nconst useStepGroup = (): StepGroupContextType => {\n  const stepGroupContext = React.useContext(StepGroupContext);\n\n  return stepGroupContext;\n};\n\nexport { useStepGroup, StepGroupContext };\n"],"names":["StepGroupContext","React","createContext","itemsInGroupCount","totalItemsInParentGroupCount","size","orientation","useStepGroup","stepGroupContext","useContext"],"mappings":";;AAGA,IAAMA,gBAAgB,gBAAGC,cAAK,CAACC,aAAa,CAAuB;AACjEC,EAAAA,iBAAiB,EAAE,CAAC;AACpBC,EAAAA,4BAA4B,EAAE,CAAC;AAC/BC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,WAAW,EAAE,UAAA;AACf,CAAC,EAAC;AAEF,IAAMC,YAAY,GAAG,SAAfA,YAAYA,GAA+B;AAC/C,EAAA,IAAMC,gBAAgB,GAAGP,cAAK,CAACQ,UAAU,CAACT,gBAAgB,CAAC,CAAA;AAE3D,EAAA,OAAOQ,gBAAgB,CAAA;AACzB;;;;"}

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

@@ -0,0 +1,224 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default from 'react';
+import styled from 'styled-components';
+import { StepLine } from './StepLine.web.js';
+import { useStepGroup } from './StepGroupContext.js';
+import { componentIds } from './componentIds.js';
+import { stepItemHeaderTokens, itemLineGap } from './tokens.js';
+import '../Box/index.js';
+import '../Typography/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import '../../tokens/global/index.js';
+import '../../utils/getFocusRingStyles/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../../utils/logger/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { Box } from '../Box/Box.js';
+import { Text } from '../Typography/Text/Text.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+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 { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.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 InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
+  displayName: "StepItemweb__InteractiveItemHeaderBox",
+  componentId: "x6btk4-0"
+})(function (props) {
+  return {
+    padding: "".concat(makeSpace(getIn(props.theme, props.paddingY)), " ").concat(makeSpace(getIn(props.theme, props.paddingX))),
+    cursor: 'pointer',
+    display: 'inline-block',
+    textDecoration: 'none',
+    border: 'none',
+    textAlign: 'inherit',
+    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),
+    ':hover': {
+      backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.fadedHighlighted : props.theme.colors.interactive.background.gray.fadedHighlighted
+    },
+    ':focus-visible': _objectSpread({}, getFocusRingStyles({
+      theme: props.theme
+    }))
+  };
+});
+var getStepTypeFromIndex = function getStepTypeFromIndex(_ref) {
+  var _index = _ref._index,
+    _nestingLevel = _ref._nestingLevel,
+    itemsCount = _ref.itemsCount;
+  if (_nestingLevel === 0) {
+    return 'default';
+  }
+  if (itemsCount === 1) {
+    return 'single-item';
+  }
+  if (_index === 0) {
+    return 'start';
+  }
+  if (_index === itemsCount - 1) {
+    return 'end';
+  }
+  return 'middle';
+};
+var _StepItem = function _StepItem(_ref2) {
+  var title = _ref2.title,
+    timestamp = _ref2.timestamp,
+    description = _ref2.description,
+    _ref2$stepProgress = _ref2.stepProgress,
+    stepProgress = _ref2$stepProgress === void 0 ? 'none' : _ref2$stepProgress,
+    marker = _ref2.marker,
+    trailing = _ref2.trailing,
+    isSelected = _ref2.isSelected,
+    href = _ref2.href,
+    target = _ref2.target,
+    onClick = _ref2.onClick,
+    children = _ref2.children,
+    _ref2$_index = _ref2._index,
+    _index = _ref2$_index === void 0 ? 0 : _ref2$_index,
+    _ref2$_totalIndex = _ref2._totalIndex,
+    _totalIndex = _ref2$_totalIndex === void 0 ? 0 : _ref2$_totalIndex,
+    _ref2$_nestingLevel = _ref2._nestingLevel,
+    _nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel;
+  var _useStepGroup = useStepGroup(),
+    itemsCount = _useStepGroup.itemsInGroupCount,
+    totalItemsInParentGroupCount = _useStepGroup.totalItemsInParentGroupCount,
+    orientation = _useStepGroup.orientation,
+    size$1 = _useStepGroup.size;
+  var stepType = React__default.useMemo(function () {
+    return getStepTypeFromIndex({
+      _index: _index,
+      _nestingLevel: _nestingLevel,
+      itemsCount: itemsCount
+    });
+  }, [_index, _nestingLevel, itemsCount]);
+  var itemRef = React__default.useRef(null);
+  var isFirstItem = _totalIndex === 0;
+  var isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;
+  var isInteractive = Boolean(href) || Boolean(onClick);
+  var isVertical = orientation === 'vertical';
+  if (true) {
+    if (trailing && orientation === 'horizontal') {
+      throwBladeError({
+        message: 'trailing is not allowed in horizontal StepGroup',
+        moduleName: 'StepItem'
+      });
+    }
+    if (_nestingLevel >= 1 && orientation === 'horizontal') {
+      throwBladeError({
+        message: 'Nested StepGroup components are not allowed in horizontal orientation',
+        moduleName: 'StepItem'
+      });
+    }
+  }
+  var stepItemHeaderJSX = /*#__PURE__*/jsxs(Box, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: "spacing.4",
+    children: [/*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(Text, {
+        size: stepItemHeaderTokens[size$1].title,
+        color: "surface.text.gray.subtle",
+        weight: "semibold",
+        children: title
+      }), /*#__PURE__*/jsx(Text, {
+        size: stepItemHeaderTokens[size$1].timestamp,
+        marginY: "spacing.2",
+        color: "surface.text.gray.muted",
+        variant: "caption",
+        children: timestamp
+      }), /*#__PURE__*/jsx(Text, {
+        size: stepItemHeaderTokens[size$1].description,
+        color: "surface.text.gray.muted",
+        children: description
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      children: trailing
+    })]
+  });
+  var stepItemHeaderPaddings = {
+    paddingY: 'spacing.3',
+    paddingX: 'spacing.4'
+  };
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: isVertical ? 'row' : 'column',
+    gap: itemLineGap[size$1],
+    className: "step-item step-index-".concat(_index, " step-nesting-level-").concat(_nestingLevel),
+    textAlign: isVertical ? 'left' : 'center',
+    alignItems: isVertical ? undefined : 'center',
+    minWidth: isVertical ? undefined : "min(".concat(makeSize(size['120']), ", 100%)"),
+    width: isVertical ? '100%' : undefined,
+    flex: isVertical ? undefined : '1'
+  }, metaAttribute({
+    name: MetaConstants.StepItem
+  })), {}, {
+    ref: itemRef,
+    children: [/*#__PURE__*/jsx(StepLine, {
+      shouldShowStartBranch: !isFirstItem,
+      shouldShowEndBranch: !isLastItem,
+      stepType: stepType,
+      marker: marker,
+      stepProgress: stepProgress
+    }), /*#__PURE__*/jsxs(Box, {
+      marginTop: "spacing.3",
+      flex: "1",
+      marginRight: isVertical ? undefined : undefined,
+      children: [isInteractive ? /*#__PURE__*/jsx(InteractiveItemHeaderBox, _objectSpread(_objectSpread({}, stepItemHeaderPaddings), {}, {
+        as: href ? 'a' : 'button',
+        href: href,
+        target: target,
+        isSelected: isSelected,
+        onClick: onClick,
+        children: stepItemHeaderJSX
+      })) : /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, stepItemHeaderPaddings), {}, {
+        children: stepItemHeaderJSX
+      })), children ? /*#__PURE__*/jsx(Box, {
+        paddingX: "spacing.4",
+        paddingY: "spacing.3",
+        children: children
+      }) : null]
+    })]
+  }));
+};
+
+/**
+ * ## StepItem
+ *
+ * Component meant to be used inside the StepGroup parent component
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <StepGroup orientation="vertical" size="medium">
+ *   <StepItem
+ *      title="Personal Details"
+ *      timestamp="Thu 15th Oct'23 | 12:00pm"
+ *      description="Fill your personal details here"
+ *      marker={<StepItemIndicator color="negative" />}
+ *    />
+ * </StepGroup>
+ * ```
+ *
+ * ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
+ */
+var StepItem = /*#__PURE__*/assignWithoutSideEffects(_StepItem, {
+  componentId: componentIds.StepItem,
+  displayName: componentIds.StepItem
+});
+
+export { StepItem, StepLine };
+//# sourceMappingURL=StepItem.web.js.map

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

@@ -0,0 +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    ':hover': {\n      backgroundColor: props.isSelected\n        ? props.theme.colors.interactive.background.primary.fadedHighlighted\n        : props.theme.colors.interactive.background.gray.fadedHighlighted,\n    },\n    ':focus-visible': {\n      ...getFocusRingStyles({ theme: props.theme }),\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  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=\"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=\"surface.text.gray.muted\"\n          variant=\"caption\"\n        >\n          {timestamp}\n        </Text>\n        <Text size={stepItemHeaderTokens[size].description} color=\"surface.text.gray.muted\">\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          >\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","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","assignWithoutSideEffects","componentIds"],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import { useStepGroup } from './StepGroupContext.js';
+import { getMarkerLineSpacings, iconSizeTokens } from './tokens.js';
+import '../Box/BaseBox/index.js';
+import '../Indicator/index.js';
+import '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { Indicator } from '../Indicator/Indicator.js';
+
+var MarkerBackgroundCircle = function MarkerBackgroundCircle(_ref) {
+  var color = _ref.color,
+    size = _ref.size,
+    margin = _ref.margin,
+    children = _ref.children;
+  return /*#__PURE__*/jsx(BaseBox, {
+    backgroundColor: color === 'primary' ? 'surface.background.primary.subtle' : "feedback.background.".concat(color, ".subtle"),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: size,
+    width: size,
+    borderRadius: "round",
+    margin: margin,
+    children: children
+  });
+};
+var StepItemIndicator = function StepItemIndicator(_ref2) {
+  var color = _ref2.color;
+  var _useStepGroup = useStepGroup(),
+    size = _useStepGroup.size;
+  var spacingTokens = getMarkerLineSpacings(size);
+  return /*#__PURE__*/jsx(MarkerBackgroundCircle, {
+    color: color,
+    size: makeSize(spacingTokens.markerBackgroundSize),
+    margin: makeSize(spacingTokens.markerMargin),
+    children: /*#__PURE__*/jsx(Indicator, {
+      position: "relative",
+      marginLeft: "spacing.2",
+      color: color,
+      size: size,
+      accessibilityLabel: "".concat(color, " indicator")
+    })
+  });
+};
+var StepItemIcon = function StepItemIcon(_ref3) {
+  var Icon = _ref3.icon,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'neutral' : _ref3$color;
+  var _useStepGroup2 = useStepGroup(),
+    size = _useStepGroup2.size;
+  var spacingTokens = getMarkerLineSpacings(size);
+  return /*#__PURE__*/jsx(MarkerBackgroundCircle, {
+    color: color,
+    size: makeSize(spacingTokens.markerBackgroundSize),
+    margin: makeSize(spacingTokens.markerMargin),
+    children: /*#__PURE__*/jsx(Icon, {
+      size: iconSizeTokens[size],
+      color: color === 'primary' ? 'surface.icon.primary.normal' : "feedback.icon.".concat(color, ".intense")
+    })
+  });
+};
+
+export { StepItemIcon, StepItemIndicator };
+//# sourceMappingURL=StepItemMarker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepItemMarker.js","sources":["../../../../../../src/components/StepGroup/StepItemMarker.tsx"],"sourcesContent":["import { useStepGroup } from './StepGroupContext';\nimport { getMarkerLineSpacings, iconSizeTokens } from './tokens';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport type { IndicatorProps } from '~components/Indicator';\nimport { Indicator } from '~components/Indicator';\nimport { makeSize } from '~utils';\n\ntype MarkerBackgroundCircleProps = {\n  color: IndicatorProps['color'];\n  size: BaseBoxProps['width'];\n  margin: BaseBoxProps['margin'];\n  children: BaseBoxProps['children'];\n};\n\nconst MarkerBackgroundCircle = ({\n  color,\n  size,\n  margin,\n  children,\n}: MarkerBackgroundCircleProps): React.ReactElement => {\n  return (\n    <BaseBox\n      backgroundColor={\n        color === 'primary'\n          ? 'surface.background.primary.subtle'\n          : `feedback.background.${color}.subtle`\n      }\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      height={size}\n      width={size}\n      borderRadius=\"round\"\n      margin={margin}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst StepItemIndicator = ({ color }: { color: IndicatorProps['color'] }): React.ReactElement => {\n  const { size } = useStepGroup();\n  const spacingTokens = getMarkerLineSpacings(size);\n\n  return (\n    <MarkerBackgroundCircle\n      color={color}\n      size={makeSize(spacingTokens.markerBackgroundSize)}\n      margin={makeSize(spacingTokens.markerMargin)}\n    >\n      <Indicator\n        position=\"relative\"\n        marginLeft=\"spacing.2\"\n        color={color}\n        size={size}\n        accessibilityLabel={`${color} indicator`}\n      />\n    </MarkerBackgroundCircle>\n  );\n};\n\ntype StepItemIconProps = {\n  icon: IconComponent;\n  color: IndicatorProps['color'];\n};\n\nconst StepItemIcon = ({ icon: Icon, color = 'neutral' }: StepItemIconProps): React.ReactElement => {\n  const { size } = useStepGroup();\n  const spacingTokens = getMarkerLineSpacings(size);\n\n  return (\n    <MarkerBackgroundCircle\n      color={color}\n      size={makeSize(spacingTokens.markerBackgroundSize)}\n      margin={makeSize(spacingTokens.markerMargin)}\n    >\n      <Icon\n        size={iconSizeTokens[size]}\n        color={\n          color === 'primary' ? 'surface.icon.primary.normal' : `feedback.icon.${color}.intense`\n        }\n      />\n    </MarkerBackgroundCircle>\n  );\n};\n\nexport { StepItemIndicator, StepItemIcon };\n"],"names":["MarkerBackgroundCircle","_ref","color","size","margin","children","_jsx","BaseBox","backgroundColor","concat","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","marginLeft","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_useStepGroup2","iconSizeTokens"],"mappings":"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"}