@razorpay/blade 11.14.0 → 11.15.1

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport BaseBox from './BaseBox';\nimport type { BoxProps, BoxRefType, MakeValueResponsive } from './BaseBox/types';\nimport { validBoxAsValues } from './BaseBox/types/propsTypes';\nimport type { KeysRequired } from '~utils/types';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n  if (__DEV__) {\n    if (\n      !stringBackgroundColorValue.startsWith('surface.background') &&\n      !stringBackgroundColorValue.startsWith('brand.') &&\n      stringBackgroundColorValue !== 'transparent'\n    ) {\n      throwBladeError({\n        message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.*\\`, and \\`brand.*\\` tokens with backgroundColor property but we received \\`${stringBackgroundColorValue}\\` instead.\\n\\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,\n        moduleName: 'Box',\n      });\n    }\n  }\n};\n\nconst validateBackgroundProp = (\n  responsiveBackgroundColor: MakeValueResponsive<string | undefined>,\n): void => {\n  if (__DEV__) {\n    if (responsiveBackgroundColor) {\n      if (typeof responsiveBackgroundColor === 'string') {\n        validateBackgroundString(responsiveBackgroundColor);\n        return;\n      }\n\n      Object.values(responsiveBackgroundColor).forEach((backgroundColor) => {\n        if (typeof backgroundColor === 'string') {\n          validateBackgroundString(backgroundColor);\n        }\n      });\n    }\n  }\n};\n\n/**\n * This function is to filter out any unexpected props passed by the user\n */\nconst makeBoxProps = (\n  props: BoxProps,\n): KeysRequired<Omit<BoxProps, 'testID' | 'id' | '__brand__'>> => {\n  return {\n    // Layout\n    display: props.display,\n    overflow: props.overflow,\n    overflowX: props.overflowX,\n    overflowY: props.overflowY,\n    whiteSpace: props.whiteSpace,\n    height: props.height,\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    width: props.width,\n    minWidth: props.minWidth,\n    maxWidth: props.maxWidth,\n    textAlign: props.textAlign,\n\n    // Flex\n    flex: props.flex,\n    flexWrap: props.flexWrap,\n    flexDirection: props.flexDirection,\n    flexGrow: props.flexGrow,\n    flexShrink: props.flexShrink,\n    flexBasis: props.flexBasis,\n    alignItems: props.alignItems,\n    alignContent: props.alignContent,\n    alignSelf: props.alignSelf,\n    justifyItems: props.justifyItems,\n    justifyContent: props.justifyContent,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    placeItems: props.placeItems,\n    order: props.order,\n\n    // Grid\n    grid: props.grid,\n    gridColumn: props.gridColumn,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridArea: props.gridArea,\n    gridAutoFlow: props.gridAutoFlow,\n    gridAutoRows: props.gridAutoRows,\n    gridAutoColumns: props.gridAutoColumns,\n    gridTemplate: props.gridTemplate,\n    gridTemplateAreas: props.gridTemplateAreas,\n    gridTemplateColumns: props.gridTemplateColumns,\n    gridTemplateRows: props.gridTemplateRows,\n\n    // Spacing\n    padding: props.padding,\n    paddingTop: props.paddingTop,\n    paddingBottom: props.paddingBottom,\n    paddingRight: props.paddingRight,\n    paddingLeft: props.paddingLeft,\n    paddingX: props.paddingX,\n    paddingY: props.paddingY,\n    margin: props.margin,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    gap: props.gap,\n    rowGap: props.rowGap,\n    columnGap: props.columnGap,\n\n    // Position\n    position: props.position,\n    zIndex: props.zIndex,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n\n    // Visual\n    backgroundColor: props.backgroundColor,\n    backgroundImage: props.backgroundImage,\n    backgroundSize: props.backgroundSize,\n    backgroundPosition: props.backgroundPosition,\n    backgroundOrigin: props.backgroundOrigin,\n    backgroundRepeat: props.backgroundRepeat,\n    elevation: props.elevation,\n    opacity: props.opacity,\n    visibility: props.visibility,\n\n    // Border\n    borderWidth: props.borderWidth,\n    borderColor: props.borderColor,\n    borderTopWidth: props.borderTopWidth,\n    borderTopColor: props.borderTopColor,\n    borderRightWidth: props.borderRightWidth,\n    borderRightColor: props.borderRightColor,\n    borderBottomWidth: props.borderBottomWidth,\n    borderBottomColor: props.borderBottomColor,\n    borderLeftWidth: props.borderLeftWidth,\n    borderLeftColor: props.borderLeftColor,\n    borderRadius: props.borderRadius,\n    borderTopLeftRadius: props.borderTopLeftRadius,\n    borderTopRightRadius: props.borderTopRightRadius,\n    borderBottomRightRadius: props.borderBottomRightRadius,\n    borderBottomLeftRadius: props.borderBottomLeftRadius,\n\n    // Polygon Support\n    transform: props.transform,\n    transformOrigin: props.transformOrigin,\n    clipPath: props.clipPath,\n\n    // callbacks\n    onMouseEnter: props.onMouseEnter,\n    onMouseLeave: props.onMouseLeave,\n    onMouseOver: props.onMouseOver,\n    onScroll: props.onScroll,\n\n    // Drag and Drop\n    draggable: props.draggable,\n    onDragStart: props.onDragStart,\n    onDragEnd: props.onDragEnd,\n    onDragEnter: props.onDragEnter,\n    onDragLeave: props.onDragLeave,\n    onDragOver: props.onDragOver,\n    onDrop: props.onDrop,\n\n    pointerEvents: props.pointerEvents,\n    children: props.children,\n    tabIndex: props.tabIndex,\n    as: isReactNative() ? undefined : props.as, // as is not supported on react-native\n  };\n};\n\n/**\n * ## Box\n * \n * Box is the basic Layout component.\n *\n *\n * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.\n *\n *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.\n * \n * ----\n * \n * ### Usage\n * \n * ```jsx\n * <Box display=\"flex\">\n * ```\n\n * #### Responsive Props\n *\n * ```jsx\n * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />\n * ```\n * \n * #### Margin and Padding Shorthands\n * \n * ```jsx\n * <Box padding={[\"spacing.3\", \"spacing.10\"]} />\n * ```\n *\n * ---\n * \n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}\n * \n */\nconst _Box: React.ForwardRefRenderFunction<BoxRefType, BoxProps> = (props, ref) => {\n  React.useEffect(() => {\n    if (__DEV__) {\n      validateBackgroundProp(props.backgroundColor);\n    }\n  }, [props.backgroundColor]);\n\n  React.useEffect(() => {\n    if (__DEV__) {\n      if (props.as) {\n        if (isReactNative()) {\n          throwBladeError({\n            message: '`as` prop is not supported on React Native',\n            moduleName: 'Box',\n          });\n        }\n\n        if (!validBoxAsValues.includes(props.as)) {\n          throwBladeError({\n            message: `Invalid \\`as\\` prop value - ${props.as}. Only ${validBoxAsValues.join(\n              ', ',\n            )} are valid values`,\n            moduleName: 'Box',\n          });\n        }\n      }\n    }\n  }, [props.as]);\n\n  return (\n    <BaseBox\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      id={props.id}\n      {...metaAttribute({ name: MetaConstants.Box, testID: props.testID })}\n      {...makeBoxProps(props)}\n    />\n  );\n};\n\nconst Box = assignWithoutSideEffects(React.forwardRef(_Box), {\n  displayName: 'Box',\n  componentId: 'Box',\n});\n\nexport { Box, makeBoxProps };\n"],"names":["validateBackgroundString","stringBackgroundColorValue","startsWith","throwBladeError","message","concat","moduleName","validateBackgroundProp","responsiveBackgroundColor","Object","values","forEach","backgroundColor","makeBoxProps","props","display","overflow","overflowX","overflowY","whiteSpace","height","minHeight","maxHeight","width","minWidth","maxWidth","textAlign","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingBottom","paddingRight","paddingLeft","paddingX","paddingY","margin","marginBottom","marginTop","marginRight","marginLeft","marginX","marginY","gap","rowGap","columnGap","position","zIndex","top","right","bottom","left","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","elevation","opacity","visibility","borderWidth","borderColor","borderTopWidth","borderTopColor","borderRightWidth","borderRightColor","borderBottomWidth","borderBottomColor","borderLeftWidth","borderLeftColor","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","onMouseEnter","onMouseLeave","onMouseOver","onScroll","draggable","onDragStart","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDrop","pointerEvents","children","tabIndex","as","isReactNative","undefined","_Box","ref","React","useEffect","validBoxAsValues","includes","join","_jsx","BaseBox","_objectSpread","id","metaAttribute","name","MetaConstants","Box","testID","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
+{"version":3,"file":"Box.js","sources":["../../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport BaseBox from './BaseBox';\nimport type { BoxProps, BoxRefType, MakeValueResponsive } from './BaseBox/types';\nimport { validBoxAsValues } from './BaseBox/types/propsTypes';\nimport type { KeysRequired } from '~utils/types';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n  if (__DEV__) {\n    if (\n      !stringBackgroundColorValue.startsWith('surface.background') &&\n      !stringBackgroundColorValue.startsWith('brand.') &&\n      stringBackgroundColorValue !== 'transparent'\n    ) {\n      throwBladeError({\n        message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.*\\`, and \\`brand.*\\` tokens with backgroundColor property but we received \\`${stringBackgroundColorValue}\\` instead.\\n\\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,\n        moduleName: 'Box',\n      });\n    }\n  }\n};\n\nconst validateBackgroundProp = (\n  responsiveBackgroundColor: MakeValueResponsive<string | undefined>,\n): void => {\n  if (__DEV__) {\n    if (responsiveBackgroundColor) {\n      if (typeof responsiveBackgroundColor === 'string') {\n        validateBackgroundString(responsiveBackgroundColor);\n        return;\n      }\n\n      Object.values(responsiveBackgroundColor).forEach((backgroundColor) => {\n        if (typeof backgroundColor === 'string') {\n          validateBackgroundString(backgroundColor);\n        }\n      });\n    }\n  }\n};\n\n/**\n * This function is to filter out any unexpected props passed by the user\n */\nconst makeBoxProps = (\n  props: BoxProps,\n): KeysRequired<Omit<BoxProps, 'testID' | 'id' | '__brand__'>> => {\n  return {\n    // Layout\n    display: props.display,\n    overflow: props.overflow,\n    overflowX: props.overflowX,\n    overflowY: props.overflowY,\n    whiteSpace: props.whiteSpace,\n    height: props.height,\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    width: props.width,\n    minWidth: props.minWidth,\n    maxWidth: props.maxWidth,\n    textAlign: props.textAlign,\n\n    // Flex\n    flex: props.flex,\n    flexWrap: props.flexWrap,\n    flexDirection: props.flexDirection,\n    flexGrow: props.flexGrow,\n    flexShrink: props.flexShrink,\n    flexBasis: props.flexBasis,\n    alignItems: props.alignItems,\n    alignContent: props.alignContent,\n    alignSelf: props.alignSelf,\n    justifyItems: props.justifyItems,\n    justifyContent: props.justifyContent,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    placeItems: props.placeItems,\n    order: props.order,\n\n    // Grid\n    grid: props.grid,\n    gridColumn: props.gridColumn,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridArea: props.gridArea,\n    gridAutoFlow: props.gridAutoFlow,\n    gridAutoRows: props.gridAutoRows,\n    gridAutoColumns: props.gridAutoColumns,\n    gridTemplate: props.gridTemplate,\n    gridTemplateAreas: props.gridTemplateAreas,\n    gridTemplateColumns: props.gridTemplateColumns,\n    gridTemplateRows: props.gridTemplateRows,\n\n    // Spacing\n    padding: props.padding,\n    paddingTop: props.paddingTop,\n    paddingBottom: props.paddingBottom,\n    paddingRight: props.paddingRight,\n    paddingLeft: props.paddingLeft,\n    paddingX: props.paddingX,\n    paddingY: props.paddingY,\n    margin: props.margin,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    gap: props.gap,\n    rowGap: props.rowGap,\n    columnGap: props.columnGap,\n\n    // Position\n    position: props.position,\n    zIndex: props.zIndex,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n\n    // Visual\n    backgroundColor: props.backgroundColor,\n    backgroundImage: props.backgroundImage,\n    backgroundSize: props.backgroundSize,\n    backgroundPosition: props.backgroundPosition,\n    backgroundOrigin: props.backgroundOrigin,\n    backgroundRepeat: props.backgroundRepeat,\n    elevation: props.elevation,\n    opacity: props.opacity,\n    visibility: props.visibility,\n\n    // Border\n    borderWidth: props.borderWidth,\n    borderColor: props.borderColor,\n    borderStyle: props.borderStyle,\n    borderTopWidth: props.borderTopWidth,\n    borderTopColor: props.borderTopColor,\n    borderTopStyle: props.borderTopStyle,\n    borderRightWidth: props.borderRightWidth,\n    borderRightColor: props.borderRightColor,\n    borderRightStyle: props.borderRightStyle,\n    borderBottomWidth: props.borderBottomWidth,\n    borderBottomColor: props.borderBottomColor,\n    borderBottomStyle: props.borderBottomStyle,\n    borderLeftWidth: props.borderLeftWidth,\n    borderLeftColor: props.borderLeftColor,\n    borderLeftStyle: props.borderLeftStyle,\n    borderRadius: props.borderRadius,\n    borderTopLeftRadius: props.borderTopLeftRadius,\n    borderTopRightRadius: props.borderTopRightRadius,\n    borderBottomRightRadius: props.borderBottomRightRadius,\n    borderBottomLeftRadius: props.borderBottomLeftRadius,\n\n    // Polygon Support\n    transform: props.transform,\n    transformOrigin: props.transformOrigin,\n    clipPath: props.clipPath,\n\n    // callbacks\n    onMouseEnter: props.onMouseEnter,\n    onMouseLeave: props.onMouseLeave,\n    onMouseOver: props.onMouseOver,\n    onScroll: props.onScroll,\n\n    // Drag and Drop\n    draggable: props.draggable,\n    onDragStart: props.onDragStart,\n    onDragEnd: props.onDragEnd,\n    onDragEnter: props.onDragEnter,\n    onDragLeave: props.onDragLeave,\n    onDragOver: props.onDragOver,\n    onDrop: props.onDrop,\n\n    pointerEvents: props.pointerEvents,\n    children: props.children,\n    tabIndex: props.tabIndex,\n    as: isReactNative() ? undefined : props.as, // as is not supported on react-native\n  };\n};\n\n/**\n * ## Box\n * \n * Box is the basic Layout component.\n *\n *\n * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.\n *\n *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.\n * \n * ----\n * \n * ### Usage\n * \n * ```jsx\n * <Box display=\"flex\">\n * ```\n\n * #### Responsive Props\n *\n * ```jsx\n * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />\n * ```\n * \n * #### Margin and Padding Shorthands\n * \n * ```jsx\n * <Box padding={[\"spacing.3\", \"spacing.10\"]} />\n * ```\n *\n * ---\n * \n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}\n * \n */\nconst _Box: React.ForwardRefRenderFunction<BoxRefType, BoxProps> = (props, ref) => {\n  React.useEffect(() => {\n    if (__DEV__) {\n      validateBackgroundProp(props.backgroundColor);\n    }\n  }, [props.backgroundColor]);\n\n  React.useEffect(() => {\n    if (__DEV__) {\n      if (props.as) {\n        if (isReactNative()) {\n          throwBladeError({\n            message: '`as` prop is not supported on React Native',\n            moduleName: 'Box',\n          });\n        }\n\n        if (!validBoxAsValues.includes(props.as)) {\n          throwBladeError({\n            message: `Invalid \\`as\\` prop value - ${props.as}. Only ${validBoxAsValues.join(\n              ', ',\n            )} are valid values`,\n            moduleName: 'Box',\n          });\n        }\n      }\n    }\n  }, [props.as]);\n\n  return (\n    <BaseBox\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      id={props.id}\n      {...metaAttribute({ name: MetaConstants.Box, testID: props.testID })}\n      {...makeBoxProps(props)}\n    />\n  );\n};\n\nconst Box = assignWithoutSideEffects(React.forwardRef(_Box), {\n  displayName: 'Box',\n  componentId: 'Box',\n});\n\nexport { Box, makeBoxProps };\n"],"names":["validateBackgroundString","stringBackgroundColorValue","startsWith","throwBladeError","message","concat","moduleName","validateBackgroundProp","responsiveBackgroundColor","Object","values","forEach","backgroundColor","makeBoxProps","props","display","overflow","overflowX","overflowY","whiteSpace","height","minHeight","maxHeight","width","minWidth","maxWidth","textAlign","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingBottom","paddingRight","paddingLeft","paddingX","paddingY","margin","marginBottom","marginTop","marginRight","marginLeft","marginX","marginY","gap","rowGap","columnGap","position","zIndex","top","right","bottom","left","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","elevation","opacity","visibility","borderWidth","borderColor","borderStyle","borderTopWidth","borderTopColor","borderTopStyle","borderRightWidth","borderRightColor","borderRightStyle","borderBottomWidth","borderBottomColor","borderBottomStyle","borderLeftWidth","borderLeftColor","borderLeftStyle","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","onMouseEnter","onMouseLeave","onMouseOver","onScroll","draggable","onDragStart","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDrop","pointerEvents","children","tabIndex","as","isReactNative","undefined","_Box","ref","React","useEffect","validBoxAsValues","includes","join","_jsx","BaseBox","_objectSpread","id","metaAttribute","name","MetaConstants","Box","testID","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Box/styledProps/getStyledProps.js

@@ -70,7 +70,8 @@ var makeStyledProps = function makeStyledProps(props) {
     top: props.top,
     right: props.right,
     bottom: props.bottom,
-    left: props.left
+    left: props.left,
+    visibility: props.visibility
   };
 };
 

package/build/lib/web/production/components/Box/styledProps/getStyledProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getStyledProps.js","sources":["../../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n  * Example: the following code will print display: undefined since it is given priority in spread.\n  * \n  * ```ts\n  * const styledProps = {\n  *  display: undefined,\n  * }\n  *\n  * const buttonProps = {\n  *  display: 'block',\n  * }\n  *\n  * const styles = {\n  *  ...buttonProps,\n  *  ...styledProps,\n  * } // -> Prints { display: undefined }\n  * ```\n  */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n  const onlyDefinedStyledProps: StyledPropsBlade = {};\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore: complex type error\n      onlyDefinedStyledProps[key] = obj[key];\n    }\n  }\n  return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n  return {\n    alignSelf: props.alignSelf,\n    display: props.display,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    order: props.order,\n    position: props.position,\n    zIndex: props.zIndex,\n    gridColumn: props.gridColumn,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridArea: props.gridArea,\n    margin: props.margin,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n  };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n *  return (\n *    // Make sure styledProps come last so they take priority in stylings in-case of overrides\n *    <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n *      // Your component code\n *    </BaseBox>\n *  )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n *  const styledPropsCSSObject = useStyledProps(props);\n *\n *  return {\n *    // ...your other CSS,\n *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n *  }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n  return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","getStyledProps"],"mappings":"AAGA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,EAA2B;EACtF,IAAMC,sBAAwC,GAAG,EAAE,CAAA;AACnD,EAAA,KAAK,IAAMC,GAAG,IAAIF,GAAG,EAAE;AACrB,IAAA,IAAIA,GAAG,CAACE,GAAG,CAAC,KAAKC,SAAS,EAAE;AAC1B;AACA;AACAF,MAAAA,sBAAsB,CAACC,GAAG,CAAC,GAAGF,GAAG,CAACE,GAAG,CAAC,CAAA;AACxC,KAAA;AACF,GAAA;AACA,EAAA,OAAOD,sBAAsB,CAAA;AAC/B,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAqC;EACvF,OAAO;IACLC,SAAS,EAAED,KAAK,CAACC,SAAS;IAC1BC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,WAAW,EAAEH,KAAK,CAACG,WAAW;IAC9BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,aAAa,EAAEV,KAAK,CAACU,aAAa;IAClCC,OAAO,EAAEX,KAAK,CAACW,OAAO;IACtBC,YAAY,EAAEZ,KAAK,CAACY,YAAY;IAChCC,UAAU,EAAEb,KAAK,CAACa,UAAU;IAC5BC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,MAAM,EAAEf,KAAK,CAACe,MAAM;IACpBC,OAAO,EAAEhB,KAAK,CAACgB,OAAO;IACtBC,OAAO,EAAEjB,KAAK,CAACiB,OAAO;IACtBC,YAAY,EAAElB,KAAK,CAACkB,YAAY;IAChCC,SAAS,EAAEnB,KAAK,CAACmB,SAAS;IAC1BC,WAAW,EAAEpB,KAAK,CAACoB,WAAW;IAC9BC,UAAU,EAAErB,KAAK,CAACqB,UAAU;IAC5BC,GAAG,EAAEtB,KAAK,CAACsB,GAAG;IACdC,KAAK,EAAEvB,KAAK,CAACuB,KAAK;IAClBC,MAAM,EAAExB,KAAK,CAACwB,MAAM;IACpBC,IAAI,EAAEzB,KAAK,CAACyB,IAAAA;GACb,CAAA;AACH,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAI1B,KAA0B,EAAuB;AACvE,EAAA,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAAA;AAC3D;;;;"}
+{"version":3,"file":"getStyledProps.js","sources":["../../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n  * Example: the following code will print display: undefined since it is given priority in spread.\n  * \n  * ```ts\n  * const styledProps = {\n  *  display: undefined,\n  * }\n  *\n  * const buttonProps = {\n  *  display: 'block',\n  * }\n  *\n  * const styles = {\n  *  ...buttonProps,\n  *  ...styledProps,\n  * } // -> Prints { display: undefined }\n  * ```\n  */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n  const onlyDefinedStyledProps: StyledPropsBlade = {};\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore: complex type error\n      onlyDefinedStyledProps[key] = obj[key];\n    }\n  }\n  return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n  return {\n    alignSelf: props.alignSelf,\n    display: props.display,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    order: props.order,\n    position: props.position,\n    zIndex: props.zIndex,\n    gridColumn: props.gridColumn,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridArea: props.gridArea,\n    margin: props.margin,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n    visibility: props.visibility,\n  };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n *  return (\n *    // Make sure styledProps come last so they take priority in stylings in-case of overrides\n *    <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n *      // Your component code\n *    </BaseBox>\n *  )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n *  const styledPropsCSSObject = useStyledProps(props);\n *\n *  return {\n *    // ...your other CSS,\n *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n *  }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n  return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","visibility","getStyledProps"],"mappings":"AAGA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,EAA2B;EACtF,IAAMC,sBAAwC,GAAG,EAAE,CAAA;AACnD,EAAA,KAAK,IAAMC,GAAG,IAAIF,GAAG,EAAE;AACrB,IAAA,IAAIA,GAAG,CAACE,GAAG,CAAC,KAAKC,SAAS,EAAE;AAC1B;AACA;AACAF,MAAAA,sBAAsB,CAACC,GAAG,CAAC,GAAGF,GAAG,CAACE,GAAG,CAAC,CAAA;AACxC,KAAA;AACF,GAAA;AACA,EAAA,OAAOD,sBAAsB,CAAA;AAC/B,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAqC;EACvF,OAAO;IACLC,SAAS,EAAED,KAAK,CAACC,SAAS;IAC1BC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,WAAW,EAAEH,KAAK,CAACG,WAAW;IAC9BC,SAAS,EAAEJ,KAAK,CAACI,SAAS;IAC1BC,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,aAAa,EAAEV,KAAK,CAACU,aAAa;IAClCC,OAAO,EAAEX,KAAK,CAACW,OAAO;IACtBC,YAAY,EAAEZ,KAAK,CAACY,YAAY;IAChCC,UAAU,EAAEb,KAAK,CAACa,UAAU;IAC5BC,QAAQ,EAAEd,KAAK,CAACc,QAAQ;IACxBC,MAAM,EAAEf,KAAK,CAACe,MAAM;IACpBC,OAAO,EAAEhB,KAAK,CAACgB,OAAO;IACtBC,OAAO,EAAEjB,KAAK,CAACiB,OAAO;IACtBC,YAAY,EAAElB,KAAK,CAACkB,YAAY;IAChCC,SAAS,EAAEnB,KAAK,CAACmB,SAAS;IAC1BC,WAAW,EAAEpB,KAAK,CAACoB,WAAW;IAC9BC,UAAU,EAAErB,KAAK,CAACqB,UAAU;IAC5BC,GAAG,EAAEtB,KAAK,CAACsB,GAAG;IACdC,KAAK,EAAEvB,KAAK,CAACuB,KAAK;IAClBC,MAAM,EAAExB,KAAK,CAACwB,MAAM;IACpBC,IAAI,EAAEzB,KAAK,CAACyB,IAAI;IAChBC,UAAU,EAAE1B,KAAK,CAAC0B,UAAAA;GACnB,CAAA;AACH,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAI3B,KAA0B,EAAuB;AACvE,EAAA,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAAA;AAC3D;;;;"}

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

@@ -41,7 +41,7 @@ var Indicator = function Indicator(_ref) {
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var childrenString = getStringFromReactText(children);
-  var fillColor = theme.colors.feedback.background[color].intense;
+  var fillColor = color === 'primary' ? theme.colors.surface.background.primary.intense : theme.colors.feedback.background[color].intense;
   var getDimension = useCallback(function () {
     switch (size$1) {
       case 'small':

package/build/lib/web/production/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/production/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/production/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/production/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/production/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/production/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 (false) {
+    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