@razorpay/blade 12.26.0 → 12.27.0

package/build/lib/native/components/Input/BaseInput/useTaggedInput.js

@@ -7,7 +7,7 @@ import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import '../../BladeProvider/useTheme.js';
 import { useControllableState } from '../../../utils/useControllable.js';
 
-var useTaggedInput=function useTaggedInput(_ref){var tags=_ref.tags,isDisabled=_ref.isDisabled,onTagChange=_ref.onTagChange,isTaggedInput=_ref.isTaggedInput,inputRef=_ref.inputRef,onChange=_ref.onChange,name=_ref.name,value=_ref.value,defaultValue=_ref.defaultValue;var _React$useState=React__default.useState(-1),_React$useState2=_slicedToArray(_React$useState,2),activeTagIndex=_React$useState2[0],setActiveTagIndex=_React$useState2[1];var _React$useState3=React__default.useState(defaultValue!=null?defaultValue:''),_React$useState4=_slicedToArray(_React$useState3,2),inputValueUncontrolled=_React$useState4[0],setInputValueUncontrolled=_React$useState4[1];var _useControllableState=useControllableState({value:tags,defaultValue:[],onChange:function onChange(tags){onTagChange==null?void 0:onTagChange({tags:tags});}}),_useControllableState2=_slicedToArray(_useControllableState,2),tagsValue=_useControllableState2[0],setTagsValue=_useControllableState2[1];var isTagsControlled=Boolean(tags);var getNewTagsArray=function getNewTagsArray(indexToRemove){var currentTags=tagsValue;if(!currentTags){return [];}if(indexToRemove<0||indexToRemove>=currentTags.length){return currentTags;}var newArray=currentTags.slice(0,indexToRemove).concat(currentTags.slice(indexToRemove+1));return newArray;};var getTags=React__default.useMemo(function(){return function(_ref2){var size=_ref2.size;return getTagsGroup({size:size,tags:tagsValue,activeTagIndex:activeTagIndex,isDisabled:isDisabled,onDismiss:function onDismiss(_ref3){var tagIndex=_ref3.tagIndex;console.log('dismiss',{tagIndex:tagIndex});if(!isTagsControlled){setTagsValue(function(){return getNewTagsArray(tagIndex);});}onTagChange==null?void 0:onTagChange({tags:getNewTagsArray(tagIndex)});}});};},[activeTagIndex,tags,tagsValue,isDisabled]);var handleTaggedInputChange=function handleTaggedInputChange(_ref4){var value=_ref4.value;if(!isTaggedInput){return;}setInputValueUncontrolled(value!=null?value:'');};var handleTagsClear=function handleTagsClear(){if(!isTaggedInput){return;}if(!isTagsControlled){setTagsValue(function(){return [];});}onTagChange==null?void 0:onTagChange({tags:[]});};var clearInput=function clearInput(){var isControlledValue=value!==undefined;if(isControlledValue){onChange==null?void 0:onChange({name:name,value:''});return;}if(!inputRef.current){return;}setInputValueUncontrolled('');if(isReactNative()){setTimeout(function(){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.clear();},10);return;}inputRef.current.value='';};var handleTaggedInputKeydown=function handleTaggedInputKeydown(e){if(!isTaggedInput){return;}var currentTags=tagsValue;var isControlledValue=value!==undefined;var inputValue=isControlledValue?value==null?void 0:value.trim():inputValueUncontrolled.trim();if(e.key==='Enter'||e.key===','){e.event.preventDefault==null?void 0:e.event.preventDefault();if(inputValue){if(!isTagsControlled){setTagsValue(function(){return [].concat(_toConsumableArray(currentTags),[inputValue]);});}onTagChange==null?void 0:onTagChange({tags:[].concat(_toConsumableArray(currentTags),[inputValue])});clearInput();setActiveTagIndex(-1);}}if(e.key==='Backspace'&&!inputValue&&activeTagIndex<0&&currentTags.length>0){if(!isTagsControlled){setTagsValue(function(){return currentTags.slice(0,-1);});}onTagChange==null?void 0:onTagChange({tags:currentTags.slice(0,-1)});}};return {activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,getTags:getTags,handleTaggedInputKeydown:handleTaggedInputKeydown,handleTaggedInputChange:handleTaggedInputChange,handleTagsClear:handleTagsClear};};
+var useTaggedInput=function useTaggedInput(_ref){var tags=_ref.tags,isDisabled=_ref.isDisabled,onTagChange=_ref.onTagChange,isTaggedInput=_ref.isTaggedInput,inputRef=_ref.inputRef,onChange=_ref.onChange,name=_ref.name,value=_ref.value,defaultValue=_ref.defaultValue;var _React$useState=React__default.useState(-1),_React$useState2=_slicedToArray(_React$useState,2),activeTagIndex=_React$useState2[0],setActiveTagIndex=_React$useState2[1];var _React$useState3=React__default.useState(defaultValue!=null?defaultValue:''),_React$useState4=_slicedToArray(_React$useState3,2),inputValueUncontrolled=_React$useState4[0],setInputValueUncontrolled=_React$useState4[1];var _useControllableState=useControllableState({value:tags,defaultValue:[],onChange:function onChange(tags){onTagChange==null?void 0:onTagChange({tags:tags});}}),_useControllableState2=_slicedToArray(_useControllableState,2),tagsValue=_useControllableState2[0],setTagsValue=_useControllableState2[1];var getNewTagsArray=function getNewTagsArray(indexToRemove){var currentTags=tagsValue;if(!currentTags){return [];}if(indexToRemove<0||indexToRemove>=currentTags.length){return currentTags;}var newArray=currentTags.slice(0,indexToRemove).concat(currentTags.slice(indexToRemove+1));return newArray;};var getTags=React__default.useMemo(function(){return function(_ref2){var size=_ref2.size;return getTagsGroup({size:size,tags:tagsValue,activeTagIndex:activeTagIndex,isDisabled:isDisabled,onDismiss:function onDismiss(_ref3){var tagIndex=_ref3.tagIndex;setTagsValue(function(){return getNewTagsArray(tagIndex);});}});};},[activeTagIndex,tags,tagsValue,isDisabled]);var handleTaggedInputChange=function handleTaggedInputChange(_ref4){var value=_ref4.value;if(!isTaggedInput){return;}setInputValueUncontrolled(value!=null?value:'');};var handleTagsClear=function handleTagsClear(){if(!isTaggedInput){return;}setTagsValue(function(){return [];});};var clearInput=function clearInput(){var isControlledValue=value!==undefined;if(isControlledValue){onChange==null?void 0:onChange({name:name,value:''});return;}if(!inputRef.current){return;}setInputValueUncontrolled('');if(isReactNative()){setTimeout(function(){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.clear();},10);return;}inputRef.current.value='';};var handleTaggedInputKeydown=function handleTaggedInputKeydown(e){if(!isTaggedInput){return;}var currentTags=tagsValue;var isControlledValue=value!==undefined;var inputValue=isControlledValue?value==null?void 0:value.trim():inputValueUncontrolled.trim();if(e.key==='Enter'||e.key===','){e.event.preventDefault==null?void 0:e.event.preventDefault();if(inputValue){setTagsValue(function(){return [].concat(_toConsumableArray(currentTags),[inputValue]);});clearInput();setActiveTagIndex(-1);}}if(e.key==='Backspace'&&!inputValue&&activeTagIndex<0&&currentTags.length>0){setTagsValue(function(){return currentTags.slice(0,-1);});}};return {activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,getTags:getTags,handleTaggedInputKeydown:handleTaggedInputKeydown,handleTaggedInputChange:handleTaggedInputChange,handleTagsClear:handleTagsClear};};
 
 export { useTaggedInput };
 //# sourceMappingURL=useTaggedInput.js.map

package/build/lib/native/components/Input/BaseInput/useTaggedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\n// import { isReactNative } from '~utils';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const isTagsControlled = Boolean(tags);\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          console.log('dismiss', { tagIndex });\n          if (!isTagsControlled) {\n            setTagsValue(() => getNewTagsArray(tagIndex));\n          }\n          onTagChange?.({ tags: getNewTagsArray(tagIndex) });\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    if (!isTagsControlled) {\n      setTagsValue(() => []);\n    }\n\n    onTagChange?.({ tags: [] });\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        if (!isTagsControlled) {\n          setTagsValue(() => [...currentTags, inputValue]);\n        }\n        onTagChange?.({ tags: [...currentTags, inputValue] });\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      if (!isTagsControlled) {\n        setTagsValue(() => currentTags.slice(0, -1));\n      }\n      onTagChange?.({ tags: currentTags.slice(0, -1) });\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","isTagsControlled","Boolean","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","console","log","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}
+{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          setTagsValue(() => getNewTagsArray(tagIndex));\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    setTagsValue(() => []);\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        setTagsValue(() => [...currentTags, inputValue]);\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      setTagsValue(() => currentTags.slice(0, -1));\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","event","preventDefault","_toConsumableArray"],"mappings":"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"}

package/build/lib/native/components/StepGroup/StepItemMarker.js

@@ -9,7 +9,7 @@ import { makeSize } from '../../utils/makeSize/makeSize.js';
 import '../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
 
-var MarkerBackgroundCircle=function MarkerBackgroundCircle(_ref){var color=_ref.color,size=_ref.size,margin=_ref.margin,children=_ref.children;return jsx(BaseBox,{backgroundColor:color==='primary'?'surface.background.primary.subtle':`feedback.background.${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 jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Indicator,{position:"relative",color:color,size:size,accessibilityLabel:`${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 jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Icon,{size:iconSizeTokens[size],color:color==='primary'?'surface.icon.primary.normal':`feedback.icon.${color}.intense`})});};
+var MarkerBackgroundCircle=function MarkerBackgroundCircle(_ref){var color=_ref.color,size=_ref.size,margin=_ref.margin,children=_ref.children;return jsx(BaseBox,{backgroundColor:color==='primary'?'surface.background.primary.subtle':`feedback.background.${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 jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Indicator,{position:"relative",color:color,size:size,accessibilityLabel:`${color} indicator`})});};var StepItemIcon=function StepItemIcon(_ref3){var Icon=_ref3.icon,_ref3$color=_ref3.color,color=_ref3$color===void 0?'neutral':_ref3$color,_ref3$isDisabled=_ref3.isDisabled,isDisabled=_ref3$isDisabled===void 0?false:_ref3$isDisabled;var _useStepGroup2=useStepGroup(),size=_useStepGroup2.size;var spacingTokens=getMarkerLineSpacings(size);return jsx(MarkerBackgroundCircle,{color:color,size:makeSize(spacingTokens.markerBackgroundSize),margin:makeSize(spacingTokens.markerMargin),children:jsx(Icon,{size:iconSizeTokens[size],color:isDisabled?'surface.icon.gray.disabled':color==='primary'?'surface.icon.primary.normal':`feedback.icon.${color}.intense`})});};
 
 export { StepItemIcon, StepItemIndicator };
 //# sourceMappingURL=StepItemMarker.js.map

package/build/lib/native/components/StepGroup/StepItemMarker.js.map

@@ -1 +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        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","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;;AAgBA,IAAMA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,CAK2B,CAAA,IAJrDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,MAAM,CAAAH,IAAA,CAANG,MAAM,CACNC,QAAQ,CAAAJ,IAAA,CAARI,QAAQ,CAER,OACEC,GAAA,CAACC,OAAO,CAAA,CACNC,eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CAClC,CAAsBA,oBAAAA,EAAAA,KAAM,SAClC,CACDO,OAAO,CAAC,MAAM,CACdC,UAAU,CAAC,QAAQ,CACnBC,cAAc,CAAC,QAAQ,CACvBC,MAAM,CAAET,IAAK,CACbU,KAAK,CAAEV,IAAK,CACZW,YAAY,CAAC,OAAO,CACpBV,MAAM,CAAEA,MAAO,CAAAC,QAAA,CAEdA,QAAQ,CACF,CAAC,CAEd,CAAC,CAEK,IAAAU,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,CAA0E,CAAA,IAApEd,KAAK,CAAAc,KAAA,CAALd,KAAK,CAChC,IAAAe,aAAA,CAAiBC,YAAY,EAAE,CAAvBf,IAAI,CAAAc,aAAA,CAAJd,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,EACrBE,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACkB,SAAS,EACRC,QAAQ,CAAC,UAAU,CACnBvB,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEA,IAAK,CACXuB,kBAAkB,CAAG,CAAA,EAAExB,KAAM,CAAY,UAAA,CAAA,CAC1C,CAAC,CACoB,CAAC,CAE7B,EAOM,IAAAyB,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAAiF,CAAA,IAArEC,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,CAAQ1B,KAAK,CAALA,KAAK,CAAA6B,WAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,WAAA,CACnD,IAAAC,cAAA,CAAiBd,YAAY,EAAE,CAAvBf,IAAI,CAAA6B,cAAA,CAAJ7B,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CAAA,CACrBE,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACuB,IAAI,CAAA,CACH1B,IAAI,CAAE8B,cAAc,CAAC9B,IAAI,CAAE,CAC3BD,KAAK,CACHA,KAAK,GAAK,SAAS,CAAG,6BAA6B,CAAI,CAAA,cAAA,EAAgBA,KAAM,CAC9E,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}
+{"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        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  isDisabled?: boolean;\n};\n\nconst StepItemIcon = ({\n  icon: Icon,\n  color = 'neutral',\n  isDisabled = false,\n}: 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          isDisabled\n            ? 'surface.icon.gray.disabled'\n            : color === 'primary'\n            ? 'surface.icon.primary.normal'\n            : `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","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_ref3$isDisabled","isDisabled","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;;AAgBA,IAAMA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,CAK2B,KAJrDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,MAAM,CAAAH,IAAA,CAANG,MAAM,CACNC,QAAQ,CAAAJ,IAAA,CAARI,QAAQ,CAER,OACEC,GAAA,CAACC,OAAO,CACNC,CAAAA,eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CAClC,CAAsBA,oBAAAA,EAAAA,KAAM,CAClC,OAAA,CAAA,CACDO,OAAO,CAAC,MAAM,CACdC,UAAU,CAAC,QAAQ,CACnBC,cAAc,CAAC,QAAQ,CACvBC,MAAM,CAAET,IAAK,CACbU,KAAK,CAAEV,IAAK,CACZW,YAAY,CAAC,OAAO,CACpBV,MAAM,CAAEA,MAAO,CAAAC,QAAA,CAEdA,QAAQ,CACF,CAAC,CAEd,CAAC,CAEK,IAAAU,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,CAA0E,KAApEd,KAAK,CAAAc,KAAA,CAALd,KAAK,CAChC,IAAAe,aAAA,CAAiBC,YAAY,EAAE,CAAvBf,IAAI,CAAAc,aAAA,CAAJd,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CAAA,CACrBE,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACkB,SAAS,CACRC,CAAAA,QAAQ,CAAC,UAAU,CACnBvB,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEA,IAAK,CACXuB,kBAAkB,CAAG,CAAA,EAAExB,KAAM,CAAY,UAAA,CAAA,CAC1C,CAAC,CACoB,CAAC,CAE7B,EAQM,IAAAyB,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAI2B,KAHrCC,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,CACJ1B,KAAK,CAALA,KAAK,CAAA6B,WAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,WAAA,CAAAC,gBAAA,CAAAJ,KAAA,CACjBK,UAAU,CAAVA,UAAU,CAAAD,gBAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,gBAAA,CAElB,IAAAE,cAAA,CAAiBhB,YAAY,EAAE,CAAvBf,IAAI,CAAA+B,cAAA,CAAJ/B,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CACrBE,CAAAA,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACuB,IAAI,CACH1B,CAAAA,IAAI,CAAEgC,cAAc,CAAChC,IAAI,CAAE,CAC3BD,KAAK,CACH+B,UAAU,CACN,4BAA4B,CAC5B/B,KAAK,GAAK,SAAS,CACnB,6BAA6B,CAC5B,CAAA,cAAA,EAAgBA,KAAM,CAC5B,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}

package/build/lib/native/tokens/theme/createTheme.js

@@ -7,7 +7,7 @@ import '../global/typography.js';
 import '../global/motion.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 
-var WCAG2ContrastOptions={level:'AAA',size:'large'};var getColorWithOpacity=function getColorWithOpacity(color,opacity){return tinycolor(color).setAlpha(opacity).toHslString();};var generateChromaticBrandColors=function generateChromaticBrandColors(baseColorInput){var baseColor=tinycolor(baseColorInput);var baseColorHslString=baseColor.toHslString();if(__DEV__){if(!baseColor.isValid()){throwBladeError({message:'Invalid brandColor passed',moduleName:'createTheme'});}}var palette=[baseColorHslString];var brightness=tinycolor(baseColor).getBrightness();var lightnessFactor=brightness>150?3:6;var darknessFactor=brightness<50?3:5;var currentColor=baseColor;for(var lightShadeIndex=0;lightShadeIndex<6;lightShadeIndex++){currentColor=currentColor.brighten(lightnessFactor);palette.push(currentColor.toHslString());}currentColor=tinycolor(baseColorHslString);for(var darkShadeIndex=0;darkShadeIndex<4;darkShadeIndex++){currentColor=currentColor.darken(darknessFactor);palette.unshift(currentColor.toHslString());}var colorPalette=palette.reverse();var brandPrimaryColor=colorPalette[6];var brandColors={'50':colorPalette[0],'100':colorPalette[1],'200':colorPalette[2],'300':colorPalette[3],'400':colorPalette[4],'500':colorPalette[5],'600':brandPrimaryColor,'700':colorPalette[7],'800':colorPalette[8],'900':colorPalette[9],'1000':colorPalette[10],a50:getColorWithOpacity(brandPrimaryColor,opacity[100]),a150:getColorWithOpacity(brandPrimaryColor,opacity[100]),a100:getColorWithOpacity(brandPrimaryColor,opacity[200]),a200:getColorWithOpacity(brandPrimaryColor,opacity[300]),a400:getColorWithOpacity(brandPrimaryColor,opacity[400])};return brandColors;};var getOnLightOverrides=function getOnLightOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayLight[50],brandColors[600],WCAG2ContrastOptions)?brandColors[600]:colors.neutral.blueGrayLight[1100];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var lightThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:foregroundOnSurface,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:foregroundOnSurface,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}},text:{primary:{normal:brandColors[600]}}}};return lightThemeOverrides;};var getOnDarkOverrides=function getOnDarkOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayDark[1100],brandColors[400],WCAG2ContrastOptions)?brandColors[400]:colors.neutral.blueGrayDark[0];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var darkThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:foregroundOnSurface,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:foregroundOnSurface,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}}}};return darkThemeOverrides;};var createTheme=function createTheme(_ref){var brandColor=_ref.brandColor;var chromaticBrandColors=generateChromaticBrandColors(brandColor);var brandedLightTheme=getOnLightOverrides(chromaticBrandColors);var brandedDarkTheme=getOnDarkOverrides(chromaticBrandColors);var brandedThemeTokens=overrideTheme({baseThemeTokens:bladeTheme,overrides:{name:`custom-${tinycolor(brandColor).toHex()}`,colors:{onLight:Object.assign({},brandedLightTheme),onDark:Object.assign({},brandedDarkTheme)}}});return {theme:brandedThemeTokens,brandColors:chromaticBrandColors};};
+var WCAG2ContrastOptions={level:'AAA',size:'large'};var getColorWithOpacity=function getColorWithOpacity(color,opacity){return tinycolor(color).setAlpha(opacity).toHslString();};var generateChromaticBrandColors=function generateChromaticBrandColors(baseColorInput){var baseColor=tinycolor(baseColorInput);var baseColorHslString=baseColor.toHslString();if(__DEV__){if(!baseColor.isValid()){throwBladeError({message:'Invalid brandColor passed',moduleName:'createTheme'});}}var palette=[baseColorHslString];var brightness=tinycolor(baseColor).getBrightness();var lightnessFactor=brightness>150?3:6;var darknessFactor=brightness<50?3:5;var currentColor=baseColor;for(var lightShadeIndex=0;lightShadeIndex<6;lightShadeIndex++){currentColor=currentColor.brighten(lightnessFactor);palette.push(currentColor.toHslString());}currentColor=tinycolor(baseColorHslString);for(var darkShadeIndex=0;darkShadeIndex<4;darkShadeIndex++){currentColor=currentColor.darken(darknessFactor);palette.unshift(currentColor.toHslString());}var colorPalette=palette.reverse();var brandPrimaryColor=colorPalette[6];var brandColors={'50':colorPalette[0],'100':colorPalette[1],'200':colorPalette[2],'300':colorPalette[3],'400':colorPalette[4],'500':colorPalette[5],'600':brandPrimaryColor,'700':colorPalette[7],'800':colorPalette[8],'900':colorPalette[9],'1000':colorPalette[10],a50:getColorWithOpacity(brandPrimaryColor,opacity[100]),a150:getColorWithOpacity(brandPrimaryColor,opacity[100]),a100:getColorWithOpacity(brandPrimaryColor,opacity[200]),a200:getColorWithOpacity(brandPrimaryColor,opacity[300]),a400:getColorWithOpacity(brandPrimaryColor,opacity[400])};return brandColors;};var getOnLightOverrides=function getOnLightOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayLight[50],brandColors[600],WCAG2ContrastOptions)?brandColors[600]:colors.neutral.blueGrayLight[1100];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var lightThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}},text:{primary:{normal:brandColors[600]}}}};return lightThemeOverrides;};var getOnDarkOverrides=function getOnDarkOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayDark[1100],brandColors[400],WCAG2ContrastOptions)?brandColors[400]:colors.neutral.blueGrayDark[0];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var darkThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}}}};return darkThemeOverrides;};var createTheme=function createTheme(_ref){var brandColor=_ref.brandColor;var chromaticBrandColors=generateChromaticBrandColors(brandColor);var brandedLightTheme=getOnLightOverrides(chromaticBrandColors);var brandedDarkTheme=getOnDarkOverrides(chromaticBrandColors);var brandedThemeTokens=overrideTheme({baseThemeTokens:bladeTheme,overrides:{name:`custom-${tinycolor(brandColor).toHex()}`,colors:{onLight:Object.assign({},brandedLightTheme),onDark:Object.assign({},brandedDarkTheme)}}});return {theme:brandedThemeTokens,brandColors:chromaticBrandColors};};
 
 export { createTheme };
 //# sourceMappingURL=createTheme.js.map

package/build/lib/native/tokens/theme/createTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTheme.js","sources":["../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n  level: 'AAA',\n  size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n  return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n  const baseColor = tinycolor(baseColorInput);\n  const baseColorHslString = baseColor.toHslString();\n  if (__DEV__) {\n    if (!baseColor.isValid()) {\n      throwBladeError({\n        message: 'Invalid brandColor passed',\n        moduleName: 'createTheme',\n      });\n    }\n  }\n\n  const palette = [baseColorHslString]; // Include the original color\n  const brightness = tinycolor(baseColor).getBrightness();\n  // Determine how much to lighten or darken the colors depending on the brightness of the base color\n  const lightnessFactor = brightness > 150 ? 3 : 6;\n  const darknessFactor = brightness < 50 ? 3 : 5;\n\n  let currentColor = baseColor;\n\n  // Generate shades lighter\n  for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n    currentColor = currentColor.brighten(lightnessFactor);\n    palette.push(currentColor.toHslString());\n  }\n\n  currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n  // Generate shades darker\n  for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n    currentColor = currentColor.darken(darknessFactor);\n    palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n  }\n\n  const colorPalette = palette.reverse();\n  const brandPrimaryColor = colorPalette[6];\n\n  const brandColors: ColorChromaticScale = {\n    '50': colorPalette[0],\n    '100': colorPalette[1],\n    '200': colorPalette[2],\n    '300': colorPalette[3],\n    '400': colorPalette[4],\n    '500': colorPalette[5],\n    '600': brandPrimaryColor,\n    '700': colorPalette[7],\n    '800': colorPalette[8],\n    '900': colorPalette[9],\n    '1000': colorPalette[10],\n    a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n    a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n    a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n  };\n\n  return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayLight[50],\n    brandColors[600],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[600]\n    : globalColors.neutral.blueGrayLight[1100];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the light theme with the brand colors passed in\n  const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n      text: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayDark[1100],\n    brandColors[400],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[400]\n    : globalColors.neutral.blueGrayDark[0];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the dark theme with the brand colors passed in\n  const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: foregroundOnSurface,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n  brandColor,\n}: {\n  brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n  const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n  // Get onLight overrides\n  const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n  // Get onDark overrides\n  const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n  // Override the payment theme with the brand colors\n  const brandedThemeTokens = overrideTheme({\n    baseThemeTokens: bladeTheme,\n    overrides: {\n      name: `custom-${tinycolor(brandColor).toHex()}`,\n      colors: {\n        onLight: {\n          ...brandedLightTheme,\n        },\n        onDark: {\n          ...brandedDarkTheme,\n        },\n      },\n    },\n  });\n\n  return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","__DEV__","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","default","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","toHex","colors","onLight","Object","assign","onDark","theme"],"mappings":"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"}
+{"version":3,"file":"createTheme.js","sources":["../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n  level: 'AAA',\n  size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n  return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n  const baseColor = tinycolor(baseColorInput);\n  const baseColorHslString = baseColor.toHslString();\n  if (__DEV__) {\n    if (!baseColor.isValid()) {\n      throwBladeError({\n        message: 'Invalid brandColor passed',\n        moduleName: 'createTheme',\n      });\n    }\n  }\n\n  const palette = [baseColorHslString]; // Include the original color\n  const brightness = tinycolor(baseColor).getBrightness();\n  // Determine how much to lighten or darken the colors depending on the brightness of the base color\n  const lightnessFactor = brightness > 150 ? 3 : 6;\n  const darknessFactor = brightness < 50 ? 3 : 5;\n\n  let currentColor = baseColor;\n\n  // Generate shades lighter\n  for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n    currentColor = currentColor.brighten(lightnessFactor);\n    palette.push(currentColor.toHslString());\n  }\n\n  currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n  // Generate shades darker\n  for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n    currentColor = currentColor.darken(darknessFactor);\n    palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n  }\n\n  const colorPalette = palette.reverse();\n  const brandPrimaryColor = colorPalette[6];\n\n  const brandColors: ColorChromaticScale = {\n    '50': colorPalette[0],\n    '100': colorPalette[1],\n    '200': colorPalette[2],\n    '300': colorPalette[3],\n    '400': colorPalette[4],\n    '500': colorPalette[5],\n    '600': brandPrimaryColor,\n    '700': colorPalette[7],\n    '800': colorPalette[8],\n    '900': colorPalette[9],\n    '1000': colorPalette[10],\n    a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n    a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n    a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n    a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n  };\n\n  return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayLight[50],\n    brandColors[600],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[600]\n    : globalColors.neutral.blueGrayLight[1100];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the light theme with the brand colors passed in\n  const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: brandColors.a200,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: brandColors.a200,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n      text: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n  brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n  // Select the most readable color to use as the foreground color on top of surface color\n  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n  const foregroundOnSurface = tinycolor.isReadable(\n    globalColors.neutral.blueGrayDark[1100],\n    brandColors[400],\n    WCAG2ContrastOptions,\n  )\n    ? brandColors[400]\n    : globalColors.neutral.blueGrayDark[0];\n\n  const foregroundOnBrand = tinycolor\n    .mostReadable(\n      brandColors[900],\n      [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n      WCAG2ContrastOptions,\n    )\n    .toHslString();\n\n  // Overrides for the dark theme with the brand colors passed in\n  const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n    interactive: {\n      background: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n          fadedHighlighted: brandColors.a150,\n        },\n      },\n      border: {\n        primary: {\n          default: brandColors[600],\n          highlighted: brandColors[700],\n          disabled: brandColors.a100,\n          faded: brandColors.a100,\n        },\n      },\n      text: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: brandColors.a400,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n      icon: {\n        primary: {\n          normal: foregroundOnSurface,\n          disabled: brandColors.a400,\n          muted: foregroundOnSurface,\n          subtle: foregroundOnSurface,\n        },\n        onPrimary: {\n          normal: foregroundOnBrand,\n          disabled: foregroundOnBrand,\n          muted: foregroundOnBrand,\n          subtle: foregroundOnBrand,\n        },\n      },\n    },\n    surface: {\n      background: {\n        primary: {\n          intense: brandColors[600],\n          subtle: brandColors[200],\n        },\n      },\n      icon: {\n        primary: {\n          normal: brandColors[600],\n        },\n      },\n    },\n  };\n\n  return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n  brandColor,\n}: {\n  brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n  const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n  // Get onLight overrides\n  const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n  // Get onDark overrides\n  const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n  // Override the payment theme with the brand colors\n  const brandedThemeTokens = overrideTheme({\n    baseThemeTokens: bladeTheme,\n    overrides: {\n      name: `custom-${tinycolor(brandColor).toHex()}`,\n      colors: {\n        onLight: {\n          ...brandedLightTheme,\n        },\n        onDark: {\n          ...brandedDarkTheme,\n        },\n      },\n    },\n  });\n\n  return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","__DEV__","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","default","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","toHex","colors","onLight","Object","assign","onDark","theme"],"mappings":"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"}

package/build/lib/web/development/components/Input/BaseInput/useTaggedInput.js

@@ -36,7 +36,6 @@ var useTaggedInput = function useTaggedInput(_ref) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     tagsValue = _useControllableState2[0],
     setTagsValue = _useControllableState2[1];
-  var isTagsControlled = Boolean(tags);
   var getNewTagsArray = function getNewTagsArray(indexToRemove) {
     var currentTags = tagsValue;
     if (!currentTags) {
@@ -62,16 +61,8 @@ var useTaggedInput = function useTaggedInput(_ref) {
         isDisabled: isDisabled,
         onDismiss: function onDismiss(_ref3) {
           var tagIndex = _ref3.tagIndex;
-          console.log('dismiss', {
-            tagIndex: tagIndex
-          });
-          if (!isTagsControlled) {
-            setTagsValue(function () {
-              return getNewTagsArray(tagIndex);
-            });
-          }
-          onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
-            tags: getNewTagsArray(tagIndex)
+          setTagsValue(function () {
+            return getNewTagsArray(tagIndex);
           });
         }
       });
@@ -90,13 +81,8 @@ var useTaggedInput = function useTaggedInput(_ref) {
     if (!isTaggedInput) {
       return;
     }
-    if (!isTagsControlled) {
-      setTagsValue(function () {
-        return [];
-      });
-    }
-    onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
-      tags: []
+    setTagsValue(function () {
+      return [];
     });
   };
   var clearInput = function clearInput() {
@@ -135,26 +121,16 @@ var useTaggedInput = function useTaggedInput(_ref) {
       var _e$event$preventDefau, _e$event;
       (_e$event$preventDefau = (_e$event = e.event).preventDefault) === null || _e$event$preventDefau === void 0 ? void 0 : _e$event$preventDefau.call(_e$event); // we don't want textarea to treat enter as line break in tagged inputs
       if (inputValue) {
-        if (!isTagsControlled) {
-          setTagsValue(function () {
-            return [].concat(_toConsumableArray(currentTags), [inputValue]);
-          });
-        }
-        onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
-          tags: [].concat(_toConsumableArray(currentTags), [inputValue])
+        setTagsValue(function () {
+          return [].concat(_toConsumableArray(currentTags), [inputValue]);
         });
         clearInput();
         setActiveTagIndex(-1);
       }
     }
     if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {
-      if (!isTagsControlled) {
-        setTagsValue(function () {
-          return currentTags.slice(0, -1);
-        });
-      }
-      onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
-        tags: currentTags.slice(0, -1)
+      setTagsValue(function () {
+        return currentTags.slice(0, -1);
       });
     }
   };

package/build/lib/web/development/components/Input/BaseInput/useTaggedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\n// import { isReactNative } from '~utils';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const isTagsControlled = Boolean(tags);\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          console.log('dismiss', { tagIndex });\n          if (!isTagsControlled) {\n            setTagsValue(() => getNewTagsArray(tagIndex));\n          }\n          onTagChange?.({ tags: getNewTagsArray(tagIndex) });\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    if (!isTagsControlled) {\n      setTagsValue(() => []);\n    }\n\n    onTagChange?.({ tags: [] });\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        if (!isTagsControlled) {\n          setTagsValue(() => [...currentTags, inputValue]);\n        }\n        onTagChange?.({ tags: [...currentTags, inputValue] });\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      if (!isTagsControlled) {\n        setTagsValue(() => currentTags.slice(0, -1));\n      }\n      onTagChange?.({ tags: currentTags.slice(0, -1) });\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","isTagsControlled","Boolean","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","console","log","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","_e$event$preventDefau","_e$event","event","preventDefault","call","_toConsumableArray"],"mappings":"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"}
+{"version":3,"file":"useTaggedInput.js","sources":["../../../../../../../src/components/Input/BaseInput/useTaggedInput.ts"],"sourcesContent":["import React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport type { BladeElementRefWithValue } from '~utils/types';\nimport type { FormInputOnEvent, FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport { getTagsGroup } from '~components/Tag/getTagsGroup';\nimport { isReactNative } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\n\ntype TaggedInputProps = {\n  isTaggedInput?: boolean;\n  tags?: string[];\n  onTagChange?: ({ tags }: { tags: string[] }) => void;\n};\n\ntype UseTaggedInputProps = TaggedInputProps &\n  Pick<BaseInputProps, 'isDisabled' | 'onChange' | 'name' | 'value' | 'defaultValue'> & {\n    inputRef: React.RefObject<BladeElementRefWithValue | null>;\n  };\n\ntype UseTaggedInputReturn = {\n  activeTagIndex: number;\n  setActiveTagIndex: (activeTagIndex: number) => void;\n  getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];\n  handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;\n  handleTaggedInputChange: FormInputOnEvent;\n  handleTagsClear: () => void;\n};\n\nconst useTaggedInput = ({\n  tags,\n  isDisabled,\n  onTagChange,\n  isTaggedInput,\n  inputRef,\n  onChange,\n  name,\n  value,\n  defaultValue,\n}: UseTaggedInputProps): UseTaggedInputReturn => {\n  const [activeTagIndex, setActiveTagIndex] = React.useState(-1);\n  const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');\n  const [tagsValue, setTagsValue] = useControllableState({\n    value: tags,\n    defaultValue: [],\n    onChange: (tags) => {\n      onTagChange?.({ tags });\n    },\n  });\n\n  const getNewTagsArray = (indexToRemove: number): string[] => {\n    const currentTags = tagsValue;\n\n    if (!currentTags) {\n      return [];\n    }\n\n    // Check if the index is valid\n    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {\n      return currentTags; // Return the original array\n    }\n\n    // Create a new array without the element at the specified index\n    const newArray = currentTags\n      .slice(0, indexToRemove)\n      .concat(currentTags.slice(indexToRemove + 1));\n\n    return newArray;\n  };\n\n  const getTags = React.useMemo(\n    () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {\n      return getTagsGroup({\n        size,\n        tags: tagsValue,\n        activeTagIndex,\n        isDisabled,\n        onDismiss: ({ tagIndex }) => {\n          setTagsValue(() => getNewTagsArray(tagIndex));\n        },\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTagIndex, tags, tagsValue, isDisabled],\n  );\n\n  const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {\n    if (!isTaggedInput) {\n      return;\n    }\n    setInputValueUncontrolled(value ?? '');\n  };\n\n  const handleTagsClear = (): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    setTagsValue(() => []);\n  };\n\n  const clearInput = (): void => {\n    const isControlledValue = value !== undefined;\n\n    if (isControlledValue) {\n      // In Controlled component, we don't clear input ourselves. We just call onChange with empty value\n      onChange?.({ name, value: '' });\n      return;\n    }\n\n    if (!inputRef.current) {\n      return;\n    }\n\n    setInputValueUncontrolled('');\n\n    if (isReactNative()) {\n      setTimeout(() => {\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error\n        // @ts-ignore: clear does exist in react native\n        inputRef.current?.clear();\n      }, 10);\n      return;\n    }\n\n    inputRef.current.value = '';\n  };\n\n  const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {\n    if (!isTaggedInput) {\n      return;\n    }\n\n    const currentTags = tagsValue;\n    const isControlledValue = value !== undefined;\n    const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();\n    if (e.key === 'Enter' || e.key === ',') {\n      e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs\n      if (inputValue) {\n        setTagsValue(() => [...currentTags, inputValue]);\n        clearInput();\n        setActiveTagIndex(-1);\n      }\n    }\n    if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {\n      setTagsValue(() => currentTags.slice(0, -1));\n    }\n  };\n\n  return {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  };\n};\n\nexport type { TaggedInputProps };\nexport { useTaggedInput };\n"],"names":["useTaggedInput","_ref","tags","isDisabled","onTagChange","isTaggedInput","inputRef","onChange","name","value","defaultValue","_React$useState","React","useState","_React$useState2","_slicedToArray","activeTagIndex","setActiveTagIndex","_React$useState3","_React$useState4","inputValueUncontrolled","setInputValueUncontrolled","_useControllableState","useControllableState","_useControllableState2","tagsValue","setTagsValue","getNewTagsArray","indexToRemove","currentTags","length","newArray","slice","concat","getTags","useMemo","_ref2","size","getTagsGroup","onDismiss","_ref3","tagIndex","handleTaggedInputChange","_ref4","handleTagsClear","clearInput","isControlledValue","undefined","current","isReactNative","setTimeout","_inputRef$current","clear","handleTaggedInputKeydown","e","inputValue","trim","key","_e$event$preventDefau","_e$event","event","preventDefault","call","_toConsumableArray"],"mappings":"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"}

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

@@ -45,12 +45,12 @@ var InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
     textDecoration: 'none',
     border: 'none',
     textAlign: 'inherit',
-    backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.faded : props.theme.colors.transparent,
+    backgroundColor: 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),
     ':not([disabled]):hover': {
-      backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.fadedHighlighted : props.theme.colors.interactive.background.gray.fadedHighlighted
+      backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.faded : props.theme.colors.interactive.background.gray["default"]
     },
     ':not([disabled]):focus-visible': _objectSpread({}, getFocusRingStyles({
       theme: props.theme
@@ -79,6 +79,7 @@ var getStepTypeFromIndex = function getStepTypeFromIndex(_ref) {
   return 'middle';
 };
 var _StepItem = function _StepItem(_ref2) {
+  var _marker$props;
   var title = _ref2.title,
     titleColor = _ref2.titleColor,
     timestamp = _ref2.timestamp,
@@ -140,8 +141,8 @@ var _StepItem = function _StepItem(_ref2) {
     children: [/*#__PURE__*/jsxs(Box, {
       children: [/*#__PURE__*/jsx(Text, {
         size: stepItemHeaderTokens[size$1].title,
-        color: isDisabled ? 'surface.text.gray.disabled' : titleColor !== null && titleColor !== void 0 ? titleColor : 'surface.text.gray.subtle',
-        weight: isNested ? 'regular' : 'semibold',
+        color: isDisabled ? 'surface.text.gray.disabled' : isSelected ? 'surface.text.primary.normal' : titleColor !== null && titleColor !== void 0 ? titleColor : 'surface.text.gray.subtle',
+        weight: isNested ? 'regular' : 'medium',
         children: title
       }), /*#__PURE__*/jsx(Text, {
         size: stepItemHeaderTokens[size$1].timestamp,
@@ -162,6 +163,9 @@ var _StepItem = function _StepItem(_ref2) {
     paddingY: 'spacing.3',
     paddingX: 'spacing.4'
   };
+  var enhancedMarker = marker ? /*#__PURE__*/React__default.cloneElement(marker, {
+    isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : marker === null || marker === void 0 ? void 0 : (_marker$props = marker.props) === null || _marker$props === void 0 ? void 0 : _marker$props.isDisabled
+  }) : undefined;
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
     display: "flex",
     flexDirection: isVertical ? 'row' : 'column',
@@ -181,7 +185,7 @@ var _StepItem = function _StepItem(_ref2) {
       shouldShowStartBranch: !isFirstItem,
       shouldShowEndBranch: !isLastItem,
       stepType: stepType,
-      marker: marker,
+      marker: enhancedMarker,
       stepProgress: stepProgress
     }), /*#__PURE__*/jsxs(Box, {
       flex: "1",

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

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

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

@@ -45,7 +45,9 @@ var StepItemIndicator = function StepItemIndicator(_ref2) {
 var StepItemIcon = function StepItemIcon(_ref3) {
   var Icon = _ref3.icon,
     _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? 'neutral' : _ref3$color;
+    color = _ref3$color === void 0 ? 'neutral' : _ref3$color,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
   var _useStepGroup2 = useStepGroup(),
     size = _useStepGroup2.size;
   var spacingTokens = getMarkerLineSpacings(size);
@@ -55,7 +57,7 @@ var StepItemIcon = function StepItemIcon(_ref3) {
     margin: makeSize(spacingTokens.markerMargin),
     children: /*#__PURE__*/jsx(Icon, {
       size: iconSizeTokens[size],
-      color: color === 'primary' ? 'surface.icon.primary.normal' : "feedback.icon.".concat(color, ".intense")
+      color: isDisabled ? 'surface.icon.gray.disabled' : color === 'primary' ? 'surface.icon.primary.normal' : "feedback.icon.".concat(color, ".intense")
     })
   });
 };

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

@@ -1 +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        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","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;AAgBA,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAK2B;AAAA,EAAA,IAJrDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,oBACEC,GAAA,CAACC,OAAO,EAAA;IACNC,eAAe,EACbN,KAAK,KAAK,SAAS,GACf,mCAAmC,GAAAO,sBAAAA,CAAAA,MAAA,CACZP,KAAK,EACjC,SAAA,CAAA;AACDQ,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,MAAM,EAAEV,IAAK;AACbW,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,YAAY,EAAC,OAAO;AACpBX,IAAAA,MAAM,EAAEA,MAAO;AAAAC,IAAAA,QAAA,EAEdA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMW,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,KAAA,EAA0E;AAAA,EAAA,IAApEf,KAAK,GAAAe,KAAA,CAALf,KAAK,CAAA;AAChC,EAAA,IAAAgB,aAAA,GAAiBC,YAAY,EAAE;IAAvBhB,IAAI,GAAAe,aAAA,CAAJf,IAAI,CAAA;AACZ,EAAA,IAAMiB,aAAa,GAAGC,qBAAqB,CAAClB,IAAI,CAAC,CAAA;EAEjD,oBACEG,GAAA,CAACN,sBAAsB,EAAA;AACrBE,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,IAAI,EAAEmB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE;AACnDnB,IAAAA,MAAM,EAAEkB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE;IAAAnB,QAAA,eAE7CC,GAAA,CAACmB,SAAS,EAAA;AACRC,MAAAA,QAAQ,EAAC,UAAU;AACnBxB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;MACXwB,kBAAkB,EAAA,EAAA,CAAAlB,MAAA,CAAKP,KAAK,EAAA,YAAA,CAAA;KAC7B,CAAA;AAAC,GACoB,CAAC,CAAA;AAE7B,EAAC;AAOD,IAAM0B,YAAY,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAAiF;AAAA,EAAA,IAArEC,IAAI,GAAAD,KAAA,CAAVE,IAAI;IAAAC,WAAA,GAAAH,KAAA,CAAQ3B,KAAK;AAALA,IAAAA,KAAK,GAAA8B,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA,CAAA;AACnD,EAAA,IAAAC,cAAA,GAAiBd,YAAY,EAAE;IAAvBhB,IAAI,GAAA8B,cAAA,CAAJ9B,IAAI,CAAA;AACZ,EAAA,IAAMiB,aAAa,GAAGC,qBAAqB,CAAClB,IAAI,CAAC,CAAA;EAEjD,oBACEG,GAAA,CAACN,sBAAsB,EAAA;AACrBE,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,IAAI,EAAEmB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE;AACnDnB,IAAAA,MAAM,EAAEkB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE;IAAAnB,QAAA,eAE7CC,GAAA,CAACwB,IAAI,EAAA;AACH3B,MAAAA,IAAI,EAAE+B,cAAc,CAAC/B,IAAI,CAAE;MAC3BD,KAAK,EACHA,KAAK,KAAK,SAAS,GAAG,6BAA6B,GAAA,gBAAA,CAAAO,MAAA,CAAoBP,KAAK,EAAA,UAAA,CAAA;KAE/E,CAAA;AAAC,GACoB,CAAC,CAAA;AAE7B;;;;"}
+{"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        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  isDisabled?: boolean;\n};\n\nconst StepItemIcon = ({\n  icon: Icon,\n  color = 'neutral',\n  isDisabled = false,\n}: 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          isDisabled\n            ? 'surface.icon.gray.disabled'\n            : color === 'primary'\n            ? 'surface.icon.primary.normal'\n            : `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","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_ref3$isDisabled","isDisabled","_useStepGroup2","iconSizeTokens"],"mappings":"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"}