npm - @razorpay/blade - Versions diffs - 11.24.2 → 11.25.0 - Mend

@razorpay/blade 11.24.2 → 11.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype ~~IndicatorCommonProps~~ = {\n /*\n Sets the color tone\n \n @default neutral\n /\n color?: FeedbackColors \| 'primary';\n\n /\n Sets the emphasis of the indicator\n \n If set to intense it will show a background circle\n \n @default subtle\n /\n emphasis?: 'subtle' \| 'intense';\n\n /\n Size of the indicator\n \n @default medium\n /\n size?: 'small' \| 'medium' \| 'large';\n~~} & TestID &\n~~ ~~StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n~~ /\n A text label to show alongside the indicator dot\n /\n children: StringChildrenType;\n\n /\n a11y label for screen readers\n /\n accessibilityLabel?: string;\n}~~;\n\ntype~~ ~~IndicatorWithA11yLabel~~ = {\n ~~/\n a11y label for screen readers\n /\n accessibilityLabel: string~~;\n\n /\n A text label to show alongside the indicator dot\n */\n children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel \| IndicatorWithoutA11yLabel);\n\nconst ~~Indicator~~ = ({\n accessibilityLabel,\n children,\n size = 'medium',\n color = 'neutral',\n emphasis = 'subtle',\n testID,\n ...styledProps\n}: IndicatorProps): ReactElement => {\n const { theme } = useTheme();\n const childrenString = getStringFromReactText(children);\n const isIntense = emphasis === 'intense';\n const isPrimary = color === 'primary';\n\n const fillColorOuter = isPrimary\n ? theme.colors.surface.background.primary.subtle\n : theme.colors.feedback.background[color].subtle;\n const fillColorInner = isPrimary\n ? theme.colors.surface.icon.primary.normal\n : theme.colors.feedback.icon[color].intense;\n\n const isWeb = !isReactNative();\n const a11yProps = makeAccessible({\n label: accessibilityLabel ?? childrenString,\n ...(isWeb && { role: 'status' }),\n });\n\n const svgSize = isIntense\n ? indicatorDotSizes[emphasis][size].outer\n : indicatorDotSizes[emphasis][size].inner;\n\n return (\n <BaseBox\n display={(isWeb ? 'inline-flex' : 'flex') as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n <Svg width={String(svgSize)} height={String(svgSize)} viewBox=\"0 0 10 10\" fill=\"none\">\n {isIntense ? (\n <>\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorOuter} />\n <Circle cx=\"5\" cy=\"5\" r=\"2.5\" fill={fillColorInner} />\n </>\n ) : (\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorInner} />\n )}\n </Svg>\n <BaseBox marginLeft~~=\"~~spacing.2\">\n <Text\n weight=\"medium\"\n color=\"surface.text.gray.subtle\"\n textAlign=\"left\"\n size={textSizeMapping[size]}\n >\n {children}\n </Text>\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["~~Indicator~~","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","_ref$emphasis","emphasis","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","isIntense","isPrimary","fillColorOuter","colors","surface","background","primary","subtle","feedback","fillColorInner","icon","normal","intense","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","svgSize","indicatorDotSizes","outer","inner","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","_Fragment","Circle","cx","cy","r","marginLeft","Text","weight","textAlign","textSizeMapping"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA~~,IAAMA,~~SAAS~~,GAAG,~~SAAZA~~,~~SAASA~~,CAAAC,IAAA,~~EAQqB~~;AAAA,EAAA,IAPlCC,kBAAkB,GAAAD,IAAA,CAAlBC,kBAAkB;IAClBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,SAAA,GAAAH,IAAA,CACRI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,UAAA,GAAAL,IAAA,CACfM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IAAAE,aAAA,GAAAP,IAAA,CACjBQ,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,aAAA;IACnBE,MAAM,GAAAT,IAAA,CAANS,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,cAAc,GAAGC,sBAAsB,CAACf,QAAQ,CAAC,CAAA;AACvD,EAAA,IAAMgB,SAAS,GAAGV,QAAQ,KAAK,SAAS,CAAA;AACxC,EAAA,IAAMW,SAAS,GAAGb,KAAK,KAAK,SAAS,CAAA;EAErC,IAAMc,cAAc,GAAGD,SAAS,GAC5BJ,KAAK,CAACM,MAAM,CAACC,OAAO,CAACC,UAAU,CAACC,OAAO,CAACC,MAAM,GAC9CV,KAAK,CAACM,MAAM,CAACK,QAAQ,CAACH,UAAU,CAACjB,KAAK,CAAC,CAACmB,MAAM,CAAA;EAClD,IAAME,cAAc,GAAGR,SAAS,GAC5BJ,KAAK,CAACM,MAAM,CAACC,OAAO,CAACM,IAAI,CAACJ,OAAO,CAACK,MAAM,GACxCd,KAAK,CAACM,MAAM,CAACK,QAAQ,CAACE,IAAI,CAACtB,KAAK,CAAC,CAACwB,OAAO,CAAA;AAE7C,EAAA,IAAMC,KAAK,GAAG,CAACC,aAAa,EAAE,CAAA;AAC9B,EAAA,IAAMC,SAAS,GAAGC,cAAc,CAAAC,aAAA,CAAA;AAC9BC,IAAAA,KAAK,EAAEnC,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAlBA,kBAAkB,GAAIe,cAAAA;AAAc,GAAA,EACvCe,KAAK,IAAI;AAAEM,IAAAA,IAAI,EAAE,QAAA;AAAS,GAAC,CAChC,CAAC,CAAA;EAEF,IAAMC,OAAO,GAAGpB,SAAS,GACrBqB,iBAAiB,CAAC/B,QAAQ,CAAC,CAACJ,IAAI,CAAC,CAACoC,KAAK,GACvCD,iBAAiB,CAAC/B,QAAQ,CAAC,CAACJ,IAAI,CAAC,CAACqC,KAAK,CAAA;EAE3C,oBACEC,GAAA,CAACC,OAAO,EAAAR,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNS,IAAAA,OAAO,EAAGb,KAAK,GAAG,aAAa,GAAG,MAAA;GAC9BE,EAAAA,SAAS,CACTY,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,~~CAAChD~~,SAAS;~~AAAEU~~,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,~~EACxDuC~~,cAAc,~~CAACtC~~,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAR,QAAA,eAE/~~B+C~~,IAAA,~~CAACN~~,OAAO,EAAA;AAACC,MAAAA,OAAO,EAAC,MAAM;~~AAACM~~,MAAAA,aAAa,EAAC,KAAK;AAACC,MAAAA,UAAU,EAAC,QAAQ;~~MAAAjD~~,QAAA,EAAA,cAC7DwC,GAAA,~~CAACU~~,GAAG,EAAA;AAACC,QAAAA,KAAK,EAAEC,MAAM,~~CAAChB~~,OAAO,CAAE;~~AAACiB~~,QAAAA,MAAM,EAAED,MAAM,~~CAAChB~~,OAAO,CAAE;~~AAACkB~~,QAAAA,OAAO,EAAC,WAAW;AAACC,QAAAA,IAAI,EAAC,MAAM;~~AAAAvD~~,QAAAA,QAAA,EAClFgB,SAAS,~~gBACR+B~~,IAAA,CAAAS,QAAA,EAAA;~~UAAAxD~~,QAAA,EAAA,cACEwC,GAAA,~~CAACiB~~,MAAM,EAAA;AAACC,YAAAA,EAAE,EAAC,GAAG;AAACC,YAAAA,EAAE,EAAC,GAAG;AAACC,YAAAA,CAAC,EAAC,GAAG;AAACL,YAAAA,IAAI,~~EAAErC~~,cAAAA;AAAe,WAAE,CAAC,eACpDsB,GAAA,~~CAACiB~~,MAAM,EAAA;AAACC,YAAAA,EAAE,EAAC,GAAG;AAACC,YAAAA,EAAE,EAAC,GAAG;AAACC,YAAAA,CAAC,EAAC,KAAK;AAACL,YAAAA,IAAI,~~EAAE9B~~,cAAAA;AAAe,WAAE,CAAC,CAAA;AAAA,SACtD,CAAC,gBAEHe,GAAA,~~CAACiB~~,MAAM,EAAA;AAACC,UAAAA,EAAE,EAAC,GAAG;AAACC,UAAAA,EAAE,EAAC,GAAG;AAACC,UAAAA,CAAC,EAAC,GAAG;AAACL,UAAAA,IAAI,~~EAAE9B~~,cAAAA;SAAiB,CAAA;AACpD,OACE,CAAC,eACNe,GAAA,CAACC,OAAO,EAAA;~~AAACoB~~,QAAAA,UAAU,~~EAAC~~,WAAW;~~QAAA7D~~,QAAA,~~eAC7BwC~~,GAAA,~~CAACsB~~,IAAI,EAAA;AACHC,UAAAA,MAAM,EAAC,QAAQ;~~AACf3D~~,UAAAA,KAAK,EAAC,0BAA0B;~~AAChC4D~~,UAAAA,SAAS,EAAC,MAAM;~~AAChB9D~~,UAAAA,IAAI,~~EAAE+D~~,eAAe,~~CAAC/D~~,IAAI,CAAE;AAAAF,UAAAA,QAAA,EAE3BA,QAAAA;SACG,CAAA;AAAC,OACA,CAAC,CAAA;KACH,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd;;;;"}
1	+ {"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype IndicatorProps = {\n /*\n Sets the color tone\n \n @default neutral\n /\n color?: FeedbackColors \| 'primary';\n\n /\n Sets the emphasis of the indicator\n \n If set to intense it will show a background circle\n \n @default subtle\n /\n emphasis?: 'subtle' \| 'intense';\n\n /\n Size of the indicator\n \n @default medium\n /\n size?: 'small' \| 'medium' \| 'large';\n /\n A text label to show alongside the indicator dot\n /\n children?: StringChildrenType;\n /\n a11y label for screen readers\n */\n accessibilityLabel?: string;\n} & TestID &\n StyledPropsBlade;\n\nconst _Indicator = ({\n accessibilityLabel,\n children,\n size = 'medium',\n color = 'neutral',\n emphasis = 'subtle',\n testID,\n ...styledProps\n}: IndicatorProps): ReactElement => {\n const { theme } = useTheme();\n const childrenString = getStringFromReactText(children);\n const isIntense = emphasis === 'intense';\n const isPrimary = color === 'primary';\n\n const fillColorOuter = isPrimary\n ? theme.colors.surface.background.primary.subtle\n : theme.colors.feedback.background[color].subtle;\n const fillColorInner = isPrimary\n ? theme.colors.surface.icon.primary.normal\n : theme.colors.feedback.icon[color].intense;\n\n const isWeb = !isReactNative();\n const a11yProps = makeAccessible({\n label: accessibilityLabel ?? childrenString,\n ...(isWeb && { role: 'status' }),\n });\n\n const svgSize = isIntense\n ? indicatorDotSizes[emphasis][size].outer\n : indicatorDotSizes[emphasis][size].inner;\n\n return (\n <BaseBox\n display={(isWeb ? 'inline-flex' : 'flex') as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n {...getStyledProps(styledProps)}\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n <Svg width={String(svgSize)} height={String(svgSize)} viewBox=\"0 0 10 10\" fill=\"none\">\n {isIntense ? (\n <>\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorOuter} />\n <Circle cx=\"5\" cy=\"5\" r=\"2.5\" fill={fillColorInner} />\n </>\n ) : (\n <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorInner} />\n )}\n </Svg>\n <BaseBox marginLeft={childrenString ? 'spacing.2' : 'spacing.0'}>\n <Text\n weight=\"medium\"\n color=\"surface.text.gray.subtle\"\n textAlign=\"left\"\n size={textSizeMapping[size]}\n >\n {children}\n </Text>\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nconst Indicator = assignWithoutSideEffects(_Indicator, {\n componentId: 'Indicator',\n});\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["_Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","_ref$emphasis","emphasis","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","isIntense","isPrimary","fillColorOuter","colors","surface","background","primary","subtle","feedback","fillColorInner","icon","normal","intense","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","svgSize","indicatorDotSizes","outer","inner","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","Indicator","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","_Fragment","Circle","cx","cy","r","marginLeft","Text","weight","textAlign","textSizeMapping","assignWithoutSideEffects","componentId"],"mappings":"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"}

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

@@ -36,7 +36,6 @@ var StepItemIndicator = function StepItemIndicator(_ref2) {
     margin: makeSize(spacingTokens.markerMargin),
     children: /*#__PURE__*/jsx(Indicator, {
       position: "relative",
-      marginLeft: "spacing.2",
       color: color,
       size: size,
       accessibilityLabel: "".concat(color, " indicator")

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

	@@ -1 +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 ~~marginLeft=\"spacing.2\"\n~~ color={color}\n size={size}\n accessibilityLabel={`${color} indicator`}\n />\n </MarkerBackgroundCircle>\n );\n};\n\ntype StepItemIconProps = {\n icon: IconComponent;\n color: IndicatorProps['color'];\n};\n\nconst StepItemIcon = ({ icon: Icon, color = 'neutral' }: StepItemIconProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <MarkerBackgroundCircle\n color={color}\n size={makeSize(spacingTokens.markerBackgroundSize)}\n margin={makeSize(spacingTokens.markerMargin)}\n >\n <Icon\n size={iconSizeTokens[size]}\n color={\n color === 'primary' ? 'surface.icon.primary.normal' : `feedback.icon.${color}.intense`\n }\n />\n </MarkerBackgroundCircle>\n );\n};\n\nexport { StepItemIndicator, StepItemIcon };\n"],"names":["MarkerBackgroundCircle","_ref","color","size","margin","children","_jsx","BaseBox","backgroundColor","concat","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","~~marginLeft","~~accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;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;~~AACnBC~~,MAAAA,~~UAAU,EAAC,WAAW;AACtBzB,MAAAA,~~KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;~~MACXyB~~,kBAAkB,EAAA,EAAA,~~CAAAnB~~,MAAA,CAAKP,KAAK,EAAA,YAAA,CAAA;KAC7B,CAAA;AAAC,GACoB,CAAC,CAAA;AAE7B,EAAC;AAOD,~~IAAM2B~~,YAAY,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAAiF;AAAA,EAAA,IAArEC,IAAI,GAAAD,KAAA,CAAVE,IAAI;IAAAC,WAAA,GAAAH,KAAA,~~CAAQ5B~~,KAAK;AAALA,IAAAA,KAAK,~~GAAA+B~~,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA,CAAA;AACnD,EAAA,IAAAC,cAAA,~~GAAiBf~~,YAAY,EAAE;IAAvBhB,IAAI,~~GAAA+B~~,cAAA,~~CAAJ/B~~,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,~~CAACyB~~,IAAI,EAAA;~~AACH5B~~,MAAAA,IAAI,~~EAAEgC~~,cAAc,~~CAAChC~~,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;;;;"}
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;;;;"}

package/build/lib/web/development/components/Typography/BaseText/BaseText.web.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import 'react';
+import React__default from 'react';
 import styled from 'styled-components';
 import getBaseTextStyles from './getBaseTextStyles.js';
 import '../../../utils/metaAttribute/index.js';
@@ -52,7 +52,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
     theme: props.theme
   })), styledPropsCSSObject);
 });
-var BaseText = function BaseText(_ref2) {
+var _BaseText = function _BaseText(_ref2, ref) {
   var id = _ref2.id,
     color = _ref2.color,
     fontFamily = _ref2.fontFamily,
@@ -76,7 +76,9 @@ var BaseText = function BaseText(_ref2) {
     componentName = _ref2$componentName === void 0 ? MetaConstants.BaseText : _ref2$componentName,
     testID = _ref2.testID,
     styledProps = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyledProps(styledProps)), {}, {
+  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref
+  }, getStyledProps(styledProps)), {}, {
     color: color,
     fontFamily: fontFamily,
     fontSize: fontSize,
@@ -100,6 +102,7 @@ var BaseText = function BaseText(_ref2) {
     children: children
   }));
 };
+var BaseText = /*#__PURE__*/React__default.forwardRef(_BaseText);
 export { BaseText };
 //# sourceMappingURL=BaseText.web.js.map

package/build/lib/web/development/components/Typography/BaseText/BaseText.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseText.web.js","sources":["../../../../../../../src/components/Typography/BaseText/BaseText.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport styled from 'styled-components';\nimport getBaseTextStyles from './getBaseTextStyles';\nimport type { BaseTextProps, StyledBaseTextProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps, useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { omitPropsFromHTML } from '~utils/omitPropsFromHTML';\n\nconst StyledBaseText = styled.div.withConfig({\n shouldForwardProp: omitPropsFromHTML,\n displayName: 'StyledBaseText',\n})<StyledBaseTextProps>(\n ({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n wordBreak,\n opacity,\n ...props\n }) => {\n const styledPropsCSSObject = useStyledProps(props);\n return {\n ...getBaseTextStyles({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n wordBreak,\n opacity,\n theme: props.theme,\n }),\n ...styledPropsCSSObject,\n };\n },\n);\n\~~nexport~~ ~~const~~ ~~BaseText~~ = ({\n id,\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n lineHeight,\n letterSpacing,\n as,\n textAlign,\n children,\n truncateAfterLines,\n wordBreak,\n opacity,\n className,\n style,\n accessibilityProps = {},\n componentName = MetaConstants.BaseText,\n testID,\n ...styledProps\n}~~: BaseTextProps~~): ReactElement => {\n return (\n <StyledBaseText\n {...getStyledProps(styledProps)}\n color={color}\n fontFamily={fontFamily}\n fontSize={fontSize}\n fontWeight={fontWeight}\n fontStyle={fontStyle}\n textDecorationLine={textDecorationLine}\n lineHeight={lineHeight}\n letterSpacing={letterSpacing}\n as={as}\n textAlign={textAlign}\n numberOfLines={truncateAfterLines}\n wordBreak={wordBreak}\n opacity={opacity}\n className={className}\n style={style}\n id={id}\n {...makeAccessible(accessibilityProps)}\n {...metaAttribute({ name: componentName, testID })}\n >\n {children}\n </StyledBaseText>\n );\n};\n"],"names":["StyledBaseText","styled","div","withConfig","shouldForwardProp","omitPropsFromHTML","displayName","_ref","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","wordBreak","opacity","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","_objectSpread","getBaseTextStyles","theme","~~BaseText~~","_ref2","id","as","children","truncateAfterLines","className","style","_ref2$accessibilityPr","accessibilityProps","_ref2$componentName","componentName","MetaConstants","testID","styledProps","_excluded2","_jsx","getStyledProps","makeAccessible","metaAttribute","name"],"mappings":";;;;;;;;;;;;;;;;;;;;~~AAUA~~,IAAMA,cAAc,gBAAGC,MAAM,CAACC,GAAG,CAACC,UAAU,CAAC;AAC3CC,EAAAA,iBAAiB,EAAEC,iBAAiB;AACpCC,EAAAA,WAAW,EAAE,gBAAA;AACf,CAAC,CAAC,CACA,UAAAC,IAAA,EAcM;AAAA,EAAA,IAbJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IACVC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,kBAAkB,GAAAN,IAAA,CAAlBM,kBAAkB;IAClBC,aAAa,GAAAP,IAAA,CAAbO,aAAa;IACbC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IACVC,aAAa,GAAAT,IAAA,CAAbS,aAAa;IACbC,SAAS,GAAAV,IAAA,CAATU,SAAS;IACTC,SAAS,GAAAX,IAAA,CAATW,SAAS;IACTC,OAAO,GAAAZ,IAAA,CAAPY,OAAO;AACJC,IAAAA,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA,CAAA;AAER,EAAA,IAAMC,oBAAoB,GAAGC,cAAc,CAACJ,KAAK,CAAC,CAAA;AAClD,EAAA,OAAAK,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKC,iBAAiB,CAAC;AACnBlB,IAAAA,KAAK,EAALA,KAAK;AACLC,IAAAA,UAAU,EAAVA,UAAU;AACVC,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,UAAU,EAAVA,UAAU;AACVC,IAAAA,SAAS,EAATA,SAAS;AACTC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,aAAa,EAAbA,aAAa;AACbC,IAAAA,UAAU,EAAVA,UAAU;AACVC,IAAAA,aAAa,EAAbA,aAAa;AACbC,IAAAA,SAAS,EAATA,SAAS;AACTC,IAAAA,SAAS,EAATA,SAAS;AACTC,IAAAA,OAAO,EAAPA,OAAO;IACPQ,KAAK,EAAEP,KAAK,CAACO,KAAAA;GACd,CAAC,GACCJ,oBAAoB,CAAA,CAAA;AAE3B,CACF,CAAC,CAAA;~~IAEYK~~,~~QAAQ~~,GAAG,~~SAAXA~~,~~QAAQA~~,CAAAC,KAAA,~~EAsBc~~;AAAA,EAAA,~~IArBjCC~~,EAAE,~~GAAAD~~,KAAA,~~CAAFC~~,EAAE;~~IACFtB~~,KAAK,GAAAqB,KAAA,CAALrB,KAAK;IACLC,UAAU,GAAAoB,KAAA,CAAVpB,UAAU;IACVC,QAAQ,GAAAmB,KAAA,CAARnB,QAAQ;IACRC,UAAU,GAAAkB,KAAA,CAAVlB,UAAU;IACVC,SAAS,GAAAiB,KAAA,CAATjB,SAAS;IACTC,kBAAkB,GAAAgB,KAAA,CAAlBhB,kBAAkB;IAClBE,UAAU,GAAAc,KAAA,CAAVd,UAAU;IACVC,aAAa,GAAAa,KAAA,CAAbb,aAAa;~~IACbe~~,EAAE,~~GAAAF~~,KAAA,~~CAAFE~~,EAAE;~~IACFd~~,SAAS,GAAAY,KAAA,CAATZ,SAAS;~~IACTe~~,QAAQ,~~GAAAH~~,KAAA,~~CAARG~~,QAAQ;IACRC,kBAAkB,~~GAAAJ~~,KAAA,~~CAAlBI~~,kBAAkB;~~IAClBf~~,SAAS,GAAAW,KAAA,CAATX,SAAS;IACTC,OAAO,GAAAU,KAAA,CAAPV,OAAO;~~IACPe~~,SAAS,~~GAAAL~~,KAAA,~~CAATK~~,SAAS;IACTC,KAAK,~~GAAAN~~,KAAA,~~CAALM~~,KAAK;IAAAC,qBAAA,~~GAAAP~~,KAAA,~~CACLQ~~,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,qBAAA;IAAAE,mBAAA,~~GAAAT~~,KAAA,~~CACvBU~~,aAAa;AAAbA,IAAAA,aAAa,GAAAD,mBAAA,KAAA,KAAA,CAAA,GAAGE,aAAa,~~CAACZ~~,QAAQ,~~GAAAU~~,mBAAA;~~IACtCG~~,MAAM,~~GAAAZ~~,KAAA,~~CAANY~~,MAAM;AACHC,IAAAA,WAAW,~~GAAArB~~,wBAAA,CAAAQ,KAAA,~~EAAAc~~,UAAA,CAAA,CAAA;~~AAEd~~,~~EAAA,~~oBACEC,GAAA,~~CAAC5C~~,cAAc,EAAAyB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,~~EAAA~~,~~EACToB~~,cAAc,CAACH,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;AAC/~~BlC~~,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCE,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,aAAa,EAAEA,aAAc;~~AAC7Be~~,IAAAA,EAAE,EAAEA,EAAG;~~AACPd~~,IAAAA,SAAS,EAAEA,SAAU;AACrBH,IAAAA,aAAa,~~EAAEmB~~,kBAAmB;~~AAClCf~~,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,OAAO,EAAEA,OAAQ;~~AACjBe~~,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAM;AACbL,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,~~EACHgB~~,cAAc,~~CAACT~~,kBAAkB,CAAC,CAAA,~~EAClCU~~,aAAa,CAAC;AAAEC,IAAAA,IAAI,~~EAAET~~,aAAa;~~AAAEE~~,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;~~AAAAT~~,IAAAA,QAAA,EAEjDA,QAAAA;AAAQ,GAAA,CACK,CAAC,CAAA;AAErB;;;;"}
1	+ {"version":3,"file":"BaseText.web.js","sources":["../../../../../../../src/components/Typography/BaseText/BaseText.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport styled from 'styled-components';\nimport getBaseTextStyles from './getBaseTextStyles';\nimport type { BaseTextProps, StyledBaseTextProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps, useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { omitPropsFromHTML } from '~utils/omitPropsFromHTML';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledBaseText = styled.div.withConfig({\n shouldForwardProp: omitPropsFromHTML,\n displayName: 'StyledBaseText',\n})<StyledBaseTextProps>(\n ({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n wordBreak,\n opacity,\n ...props\n }) => {\n const styledPropsCSSObject = useStyledProps(props);\n return {\n ...getBaseTextStyles({\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n numberOfLines,\n lineHeight,\n letterSpacing,\n textAlign,\n wordBreak,\n opacity,\n theme: props.theme,\n }),\n ...styledPropsCSSObject,\n };\n },\n);\n\nconst _BaseText: React.ForwardRefRenderFunction<BladeElementRef, BaseTextProps> = (\n {\n id,\n color,\n fontFamily,\n fontSize,\n fontWeight,\n fontStyle,\n textDecorationLine,\n lineHeight,\n letterSpacing,\n as,\n textAlign,\n children,\n truncateAfterLines,\n wordBreak,\n opacity,\n className,\n style,\n accessibilityProps = {},\n componentName = MetaConstants.BaseText,\n testID,\n ...styledProps\n },\n ref,\n): ReactElement => {\n return (\n <StyledBaseText\n ref={ref as never}\n {...getStyledProps(styledProps)}\n color={color}\n fontFamily={fontFamily}\n fontSize={fontSize}\n fontWeight={fontWeight}\n fontStyle={fontStyle}\n textDecorationLine={textDecorationLine}\n lineHeight={lineHeight}\n letterSpacing={letterSpacing}\n as={as}\n textAlign={textAlign}\n numberOfLines={truncateAfterLines}\n wordBreak={wordBreak}\n opacity={opacity}\n className={className}\n style={style}\n id={id}\n {...makeAccessible(accessibilityProps)}\n {...metaAttribute({ name: componentName, testID })}\n >\n {children}\n </StyledBaseText>\n );\n};\n\nconst BaseText = React.forwardRef(_BaseText);\nexport { BaseText };\n"],"names":["StyledBaseText","styled","div","withConfig","shouldForwardProp","omitPropsFromHTML","displayName","_ref","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","wordBreak","opacity","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","_objectSpread","getBaseTextStyles","theme","_BaseText","_ref2","ref","id","as","children","truncateAfterLines","className","style","_ref2$accessibilityPr","accessibilityProps","_ref2$componentName","componentName","MetaConstants","BaseText","testID","styledProps","_excluded2","_jsx","getStyledProps","makeAccessible","metaAttribute","name","React","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/index.js CHANGED Viewed

@@ -66,6 +66,7 @@ export { Alert } from './Alert/Alert.js';
 export { Amount } from './Amount/Amount.js';
 export { Avatar } from './Avatar/Avatar.web.js';
 export { AvatarGroup } from './Avatar/AvatarGroup.web.js';
+export { TrustedBadgeIcon } from './Avatar/TrustedBadgeIcon.web.js';
 export { Badge } from './Badge/Badge.js';
 export { BladeProvider } from './BladeProvider/BladeProvider.web.js';
 export { default as useTheme } from './BladeProvider/useTheme.js';

package/build/lib/web/development/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/development/utils/useTruncationTitle/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { useTruncationTitle } from './useTruncationTitle.web.js';
2	+ //# sourceMappingURL=index.js.map

package/build/lib/web/development/utils/useTruncationTitle/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/development/utils/useTruncationTitle/useTruncationTitle.web.js ADDED Viewed

@@ -0,0 +1,37 @@
+import React__default from 'react';
+/**
+ *  Utility function that takes checks if text is truncated and adds `htmlTitle` with full text
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const { containerRef, textRef } = useTruncationTitle({ content: 'saurabhdaware99@gmail.com' });
+ *
+ * <Box ref={containerRef}>
+ *    <BaseText ref={textRef} truncateAfterLines={1}>
+ *      saurabhdaware99@gmail.com
+ *    </BaseText>
+ * </Box>
+ * ```
+ */
+var useTruncationTitle = function useTruncationTitle(_ref) {
+  var content = _ref.content;
+  var containerRef = React__default.useRef(null);
+  var textRef = React__default.useRef(null);
+  React__default.useEffect(function () {
+    if (!textRef.current || !containerRef.current) {
+      return;
+    }
+    if (textRef.current.scrollHeight > containerRef.current.clientHeight && content) {
+      textRef.current.setAttribute('title', content);
+    }
+  }, [content]);
+  return {
+    containerRef: containerRef,
+    textRef: textRef
+  };
+};
+export { useTruncationTitle };
+//# sourceMappingURL=useTruncationTitle.web.js.map

package/build/lib/web/development/utils/useTruncationTitle/useTruncationTitle.web.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTruncationTitle.web.js","sources":["../../../../../../src/utils/useTruncationTitle/useTruncationTitle.web.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * Utility function that takes checks if text is truncated and adds `htmlTitle` with full text\n *\n * ## Usage\n *\n * ```tsx\n * const { containerRef, textRef } = useTruncationTitle({ content: 'saurabhdaware99@gmail.com' });\n *\n * <Box ref={containerRef}>\n * <BaseText ref={textRef} truncateAfterLines={1}>\n * saurabhdaware99@gmail.com\n * </BaseText>\n * </Box>\n * ```\n */\nconst useTruncationTitle = ({\n content,\n}: {\n /**\n * content that you want to set as htmlTitle\n */\n content?: string;\n}): {\n containerRef: React.RefObject<HTMLDivElement>;\n textRef: React.RefObject<HTMLParagraphElement>;\n} => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const textRef = React.useRef<HTMLParagraphElement>(null);\n\n React.useEffect(() => {\n if (!textRef.current || !containerRef.current) {\n return;\n }\n\n if (textRef.current.scrollHeight > containerRef.current.clientHeight && content) {\n textRef.current.setAttribute('title', content);\n }\n }, [content]);\n\n return {\n containerRef,\n textRef,\n };\n};\n\nexport { useTruncationTitle };\n"],"names":["useTruncationTitle","_ref","content","containerRef","React","useRef","textRef","useEffect","current","scrollHeight","clientHeight","setAttribute"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAUnB;AAAA,EAAA,IATHC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAA;AAUP,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AACvD,EAAA,IAAMC,OAAO,GAAGF,cAAK,CAACC,MAAM,CAAuB,IAAI,CAAC,CAAA;EAExDD,cAAK,CAACG,SAAS,CAAC,YAAM;IACpB,IAAI,CAACD,OAAO,CAACE,OAAO,IAAI,CAACL,YAAY,CAACK,OAAO,EAAE;AAC7C,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIF,OAAO,CAACE,OAAO,CAACC,YAAY,GAAGN,YAAY,CAACK,OAAO,CAACE,YAAY,IAAIR,OAAO,EAAE;MAC/EI,OAAO,CAACE,OAAO,CAACG,YAAY,CAAC,OAAO,EAAET,OAAO,CAAC,CAAA;AAChD,KAAA;AACF,GAAC,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;EAEb,OAAO;AACLC,IAAAA,YAAY,EAAZA,YAAY;AACZG,IAAAA,OAAO,EAAPA,OAAAA;GACD,CAAA;AACH;;;;"}

package/build/lib/web/production/components/Avatar/Avatar.web.js CHANGED Viewed

@@ -4,20 +4,25 @@ import React__default from 'react';
 import { StyledAvatar } from './StyledAvatar.js';
 import { useAvatarGroupContext } from './AvatarGroupContext.js';
 import { AvatarButton } from './AvatarButton.js';
+import { avatarTopAddonOffsets, avatarToIndicatorSize, avatarToBottomAddonSize } from './avatarTokens.js';
 import '../Box/styledProps/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/logger/index.js';
 import '../Icons/index.js';
-import { jsx } from 'react/jsx-runtime';
+import '../Box/BaseBox/index.js';
+import '../../utils/isValidAllowedChildren/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { throwBladeError } from '../../utils/logger/logger.js';
+import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import UserIcon from '../Icons/UserIcon/UserIcon.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
-var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "testID", "onBlur", "onFocus", "onClick", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
+var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "isSelected", "bottomAddon", "topAddon", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "testID", "onBlur", "onFocus", "onClick", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getInitials = function getInitials(name) {
@@ -41,6 +46,9 @@ var _Avatar = function _Avatar(_ref, ref) {
     href = _ref.href,
     target = _ref.target,
     rel = _ref.rel,
+    isSelected = _ref.isSelected,
+    BottomAddon = _ref.bottomAddon,
+    topAddon = _ref.topAddon,
     src = _ref.src,
     alt = _ref.alt,
     srcSet = _ref.srcSet,
@@ -65,9 +73,16 @@ var _Avatar = function _Avatar(_ref, ref) {
         message: '"alt" or "name" prop is required when the "src" prop is provided.'
       });
     }
+    if (topAddon && getComponentId(topAddon) !== 'Indicator') {
+      throwBladeError({
+        moduleName: 'Avatar',
+        message: 'TopAddon only accepts `Indicator` component.'
+      });
+    }
   }
   var groupProps = useAvatarGroupContext();
   var avatarSize = (_groupProps$size = groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
+  var isInteractive = Boolean(onClick || href);
   var commonButtonProps = {
     variant: variant,
     color: color,
@@ -77,6 +92,7 @@ var _Avatar = function _Avatar(_ref, ref) {
     rel: rel,
     onBlur: onBlur,
     onFocus: onFocus,
+    isSelected: isSelected,
     onClick: onClick,
     onMouseLeave: onMouseLeave,
     onMouseMove: onMouseMove,
@@ -110,6 +126,7 @@ var _Avatar = function _Avatar(_ref, ref) {
       icon: icon !== null && icon !== void 0 ? icon : UserIcon
     }));
   };
+  var isSquare = variant === 'square';
   return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
     name: MetaConstants.Avatar,
     testID: testID
@@ -117,7 +134,29 @@ var _Avatar = function _Avatar(_ref, ref) {
     backgroundColor: "surface.background.gray.intense",
     variant: variant,
     size: avatarSize,
-    children: getChildrenToRender()
+    isInteractive: isInteractive,
+    children: /*#__PURE__*/jsxs(BaseBox, {
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      children: [topAddon ? /*#__PURE__*/jsx(BaseBox, {
+        position: "absolute",
+        top: avatarTopAddonOffsets[variant][size].top,
+        right: avatarTopAddonOffsets[variant][size].right,
+        children: /*#__PURE__*/React__default.cloneElement(topAddon, {
+          size: avatarToIndicatorSize[size],
+          display: 'block'
+        })
+      }) : null, getChildrenToRender(), BottomAddon ? /*#__PURE__*/jsx(BaseBox, {
+        position: "absolute",
+        bottom: isSquare ? '-10%' : '0%',
+        right: isSquare ? '-10%' : '0%',
+        children: /*#__PURE__*/jsx(BottomAddon, {
+          display: "block",
+          size: avatarToBottomAddonSize[size]
+        })
+      }) : null]
+    })
   }));
 };

package/build/lib/web/production/components/Avatar/Avatar.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.web.js","sources":["../../../../../../src/components/Avatar/Avatar.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport type { AvatarProps } from './types';\nimport { StyledAvatar } from './StyledAvatar';\nimport { useAvatarGroupContext } from './AvatarGroupContext';\nimport { AvatarButton } from './AvatarButton';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { UserIcon } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\n\nconst getInitials = (name: string): string => {\n // Combine first and last name initials\n const names = name.trim().toUpperCase().split(' ');\n\n if (names.length === 1) {\n return names[0].substring(0, 2);\n }\n return names[0][0] + names[names.length - 1][0];\n};\n\nconst _Avatar: React.ForwardRefRenderFunction<BladeElementRef, AvatarProps> = (\n {\n name,\n color = 'neutral',\n size = 'medium',\n variant = 'circle',\n icon,\n href,\n target,\n rel,\n // Image Props\n src,\n alt,\n srcSet,\n crossOrigin,\n referrerPolicy,\n testID,\n // interaction props\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n ...styledProps\n },\n ref,\n): ReactElement => {\n if (__DEV__) {\n if (src && !alt && !name) {\n throwBladeError({\n moduleName: 'Avatar',\n message: '\"alt\" or \"name\" prop is required when the \"src\" prop is provided.',\n });\n }\n }\n\n const groupProps = useAvatarGroupContext();\n const avatarSize = groupProps?.size ?? size;\n\n const commonButtonProps = {\n variant,\n color,\n size: avatarSize,\n href,\n target,\n rel,\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n };\n\n const getChildrenToRender = (): React.ReactElement => {\n if (src) {\n return (\n <AvatarButton\n {...commonButtonProps}\n ref={ref as never}\n imgProps={{\n src,\n alt: alt ?? name,\n srcSet,\n crossOrigin,\n referrerPolicy,\n }}\n />\n );\n }\n\n if (name && !src) {\n return (\n <AvatarButton ref={ref as never} {...commonButtonProps}>\n {getInitials(name)}\n </AvatarButton>\n );\n }\n\n return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;\n };\n\n return (\n <StyledAvatar\n {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n {...getStyledProps(styledProps)}\n backgroundColor=\"surface.background.gray.intense\"\n variant={variant}\n size={avatarSize}\n >\n {getChildrenToRender()}\n </StyledAvatar>\n );\n};\n\n/*\n ### Avatar Component\n * \n * An avatar component is a standardized visual representation of a user or entity.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n <Avatar name=\"Nitin Kumar\" src=\"https://avatars.githubusercontent.com/u/46647141?v=4\" /> \n * ```\n \n ---\n \n Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}\n * \n */\nconst Avatar = assignWithoutSideEffects(React.forwardRef(_Avatar), {\n displayName: 'Avatar',\n componentId: 'Avatar',\n});\n\nexport { Avatar };\nexport type { AvatarProps };\n"],"names":["getInitials","name","names","trim","toUpperCase","split","length","substring","_Avatar","_ref","ref","_groupProps$size","_ref$color","color","_ref$size","size","_ref$variant","variant","icon","href","target","rel","src","alt","srcSet","crossOrigin","referrerPolicy","testID","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","styledProps","_objectWithoutProperties","_excluded","throwBladeError","moduleName","message","groupProps","useAvatarGroupContext","avatarSize","commonButtonProps","getChildrenToRender","_jsx","AvatarButton","_objectSpread","imgProps","children","UserIcon","StyledAvatar","metaAttribute","MetaConstants","Avatar","getStyledProps","backgroundColor","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}
1	+ {"version":3,"file":"Avatar.web.js","sources":["../../../../../../src/components/Avatar/Avatar.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarProps } from './types';\nimport { StyledAvatar } from './StyledAvatar';\nimport { useAvatarGroupContext } from './AvatarGroupContext';\nimport { AvatarButton } from './AvatarButton';\nimport {\n avatarToBottomAddonSize,\n avatarToIndicatorSize,\n avatarTopAddonOffsets,\n} from './avatarTokens';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { UserIcon } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst getInitials = (name: string): string => {\n // Combine first and last name initials\n const names = name.trim().toUpperCase().split(' ');\n\n if (names.length === 1) {\n return names[0].substring(0, 2);\n }\n return names[0][0] + names[names.length - 1][0];\n};\n\nconst _Avatar: React.ForwardRefRenderFunction<BladeElementRef, AvatarProps> = (\n {\n name,\n color = 'neutral',\n size = 'medium',\n variant = 'circle',\n icon,\n href,\n target,\n rel,\n isSelected,\n bottomAddon: BottomAddon,\n topAddon,\n // Image Props\n src,\n alt,\n srcSet,\n crossOrigin,\n referrerPolicy,\n testID,\n // interaction props\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n ...styledProps\n },\n ref,\n) => {\n if (__DEV__) {\n if (src && !alt && !name) {\n throwBladeError({\n moduleName: 'Avatar',\n message: '\"alt\" or \"name\" prop is required when the \"src\" prop is provided.',\n });\n }\n if (topAddon && getComponentId(topAddon) !== 'Indicator') {\n throwBladeError({\n moduleName: 'Avatar',\n message: 'TopAddon only accepts `Indicator` component.',\n });\n }\n }\n\n const groupProps = useAvatarGroupContext();\n const avatarSize = groupProps?.size ?? size;\n const isInteractive = Boolean(onClick \|\| href);\n\n const commonButtonProps = {\n variant,\n color,\n size: avatarSize,\n href,\n target,\n rel,\n onBlur,\n onFocus,\n isSelected,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n };\n\n const getChildrenToRender = (): React.ReactElement => {\n if (src) {\n return (\n <AvatarButton\n {...commonButtonProps}\n ref={ref as never}\n imgProps={{\n src,\n alt: alt ?? name,\n srcSet,\n crossOrigin,\n referrerPolicy,\n }}\n />\n );\n }\n\n if (name && !src) {\n return (\n <AvatarButton ref={ref as never} {...commonButtonProps}>\n {getInitials(name)}\n </AvatarButton>\n );\n }\n\n return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;\n };\n\n const isSquare = variant === 'square';\n return (\n <StyledAvatar\n {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n {...getStyledProps(styledProps)}\n backgroundColor=\"surface.background.gray.intense\"\n variant={variant}\n size={avatarSize}\n isInteractive={isInteractive}\n >\n <BaseBox width=\"100%\" height=\"100%\" position=\"relative\">\n {topAddon ? (\n <BaseBox\n position=\"absolute\"\n top={avatarTopAddonOffsets[variant][size].top}\n right={avatarTopAddonOffsets[variant][size].right}\n >\n {React.cloneElement(topAddon, { size: avatarToIndicatorSize[size], display: 'block' })}\n </BaseBox>\n ) : null}\n {getChildrenToRender()}\n {BottomAddon ? (\n <BaseBox\n position=\"absolute\"\n bottom={isSquare ? '-10%' : '0%'}\n right={isSquare ? '-10%' : '0%'}\n >\n <BottomAddon display=\"block\" size={avatarToBottomAddonSize[size]} />\n </BaseBox>\n ) : null}\n </BaseBox>\n </StyledAvatar>\n );\n};\n\n/*\n ### Avatar Component\n * \n * An avatar component is a standardized visual representation of a user or entity.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n <Avatar name=\"Nitin Kumar\" src=\"https://avatars.githubusercontent.com/u/46647141?v=4\" /> \n * ```\n \n ---\n \n Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}\n * \n */\nconst Avatar = assignWithoutSideEffects(React.forwardRef(_Avatar), {\n displayName: 'Avatar',\n componentId: 'Avatar',\n});\n\nexport { Avatar };\nexport type { AvatarProps };\n"],"names":["getInitials","name","names","trim","toUpperCase","split","length","substring","_Avatar","_ref","ref","_groupProps$size","_ref$color","color","_ref$size","size","_ref$variant","variant","icon","href","target","rel","isSelected","BottomAddon","bottomAddon","topAddon","src","alt","srcSet","crossOrigin","referrerPolicy","testID","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","styledProps","_objectWithoutProperties","_excluded","throwBladeError","moduleName","message","getComponentId","groupProps","useAvatarGroupContext","avatarSize","isInteractive","Boolean","commonButtonProps","getChildrenToRender","_jsx","AvatarButton","_objectSpread","imgProps","children","UserIcon","isSquare","StyledAvatar","metaAttribute","MetaConstants","Avatar","getStyledProps","backgroundColor","_jsxs","BaseBox","width","height","position","top","avatarTopAddonOffsets","right","React","cloneElement","avatarToIndicatorSize","display","bottom","avatarToBottomAddonSize","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Avatar/AvatarButton.js CHANGED Viewed

@@ -36,8 +36,11 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
     onPointerDown = _ref.onPointerDown,
     onPointerEnter = _ref.onPointerEnter,
     onTouchStart = _ref.onTouchStart,
-    onTouchEnd = _ref.onTouchEnd;
+    onTouchEnd = _ref.onTouchEnd,
+    isSelected = _ref.isSelected;
   var isLink = Boolean(href);
+  var isInteractive = Boolean(onClick || isLink);
+  var as = isInteractive ? href ? 'a' : 'button' : 'div';
   var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
   var iconColor = getTextColorToken({
     property: 'icon',
@@ -53,7 +56,9 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
   });
   return /*#__PURE__*/jsx(StyledAvatarButton, {
     ref: ref,
-    as: href ? 'a' : 'button',
+    as: as,
+    isInteractive: isInteractive,
+    isSelected: isSelected,
     size: size,
     color: color,
     href: href,
@@ -61,7 +66,7 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
     target: target,
     rel: rel !== null && rel !== void 0 ? rel : defaultRel,
     accessibilityProps: _objectSpread({}, makeAccessible({
-      role: isLink ? 'link' : 'button'
+      role: isInteractive ? isLink ? 'link' : 'button' : 'presentation'
     })),
     onBlur: onBlur,
     onFocus: onFocus,

package/build/lib/web/production/components/Avatar/AvatarButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport type { BladeElementRef } from '~utils/types';\n\nconst _AvatarButton: React.ForwardRefRenderFunction<BladeElementRef, AvatarButtonProps> = (\n {\n href,\n target,\n rel,\n variant = 'circle',\n color = 'neutral',\n size = 'medium',\n icon: Icon,\n imgProps,\n children,\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n },\n ref,\n): React.ReactElement => {\n const isLink = Boolean(href);\n const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n const iconColor = getTextColorToken({\n property: 'icon',\n variant: 'secondary',\n color,\n state: 'default',\n }) as IconColor;\n const textColor = getTextColorToken({\n property: 'text',\n variant: 'secondary',\n color,\n state: 'default',\n }) as BaseTextProps['color'];\n\n return (\n <StyledAvatarButton\n ref={ref as never}\n as={~~href~~ ? ~~'a' : 'button'~~}\n size={size}\n color={color}\n href={href}\n variant={variant}\n target={target}\n rel={rel ?? defaultRel}\n accessibilityProps={{\n ...makeAccessible({\n role: isLink ? 'link' : 'button',\n }),\n }}\n onBlur={onBlur}\n onFocus={onFocus}\n onClick={onClick}\n onMouseLeave={onMouseLeave}\n onMouseMove={onMouseMove}\n onMouseDown={onMouseDown}\n onPointerDown={onPointerDown}\n onPointerEnter={onPointerEnter}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n >\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={1}\n height=\"100%\"\n >\n {Icon ? (\n <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n <Icon size={avatarIconSizeTokens[size]} color={iconColor} />\n </BaseBox>\n ) : null}\n\n {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}\n {imgProps?.src ? <img {...imgProps} /> : null}\n\n {size === 'xlarge' ? (\n <Heading size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n {children}\n </Heading>\n ) : (\n <Text size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n {children}\n </Text>\n )}\n </BaseBox>\n </StyledAvatarButton>\n );\n};\n\nconst AvatarButton = React.forwardRef(_AvatarButton);\n\nexport { AvatarButton };\n"],"names":["_AvatarButton","_ref","ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","isLink","Boolean","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","~~as","~~accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text","AvatarButton","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;AAYA,IAAMA,aAAiF,GAAG,SAApFA,aAAiFA,CAAAC,IAAA,~~EAsBrFC~~,GAAG,EACoB;AAAA,EAAA,~~IArBrBC~~,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAAC,YAAA,GAAAL,IAAA,CACHM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,YAAA;IAAAE,UAAA,GAAAP,IAAA,CAClBQ,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IAAAE,SAAA,GAAAT,IAAA,CACjBU,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACTE,IAAI,GAAAX,IAAA,CAAVY,IAAI;IACJC,QAAQ,GAAAb,IAAA,CAARa,QAAQ;IACRC,QAAQ,GAAAd,IAAA,CAARc,QAAQ;IACRC,MAAM,GAAAf,IAAA,CAANe,MAAM;IACNC,OAAO,GAAAhB,IAAA,CAAPgB,OAAO;IACPC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IACPC,YAAY,GAAAlB,IAAA,CAAZkB,YAAY;IACZC,WAAW,GAAAnB,IAAA,CAAXmB,WAAW;IACXC,WAAW,GAAApB,IAAA,CAAXoB,WAAW;IACXC,aAAa,GAAArB,IAAA,CAAbqB,aAAa;IACbC,cAAc,GAAAtB,IAAA,CAAdsB,cAAc;IACdC,YAAY,GAAAvB,IAAA,CAAZuB,YAAY;IACZC,UAAU,GAAAxB,IAAA,CAAVwB,UAAU,CAAA;AAIZ,EAAA,IAAMC,MAAM,GAAGC,OAAO,~~CAACxB~~,IAAI,CAAC,CAAA;~~EAC5B~~,~~IAAMyB~~,UAAU,~~GAAGxB~~,MAAM,KAAK,QAAQ,GAAG,qBAAqB,~~GAAGyB~~,SAAS,CAAA;EAC1E,IAAMC,SAAS,GAAGC,iBAAiB,CAAC;AAClCC,IAAAA,QAAQ,EAAE,MAAM;~~AAChBzB~~,IAAAA,OAAO,EAAE,WAAW;AACpBE,IAAAA,KAAK,EAALA,KAAK;~~AACLwB~~,IAAAA,KAAK,EAAE,SAAA;AACT,GAAC,CAAc,CAAA;EACf,IAAMC,SAAS,GAAGH,iBAAiB,CAAC;AAClCC,IAAAA,QAAQ,EAAE,MAAM;~~AAChBzB~~,IAAAA,OAAO,EAAE,WAAW;AACpBE,IAAAA,KAAK,EAALA,KAAK;~~AACLwB~~,IAAAA,KAAK,EAAE,SAAA;AACT,GAAC,CAA2B,CAAA;EAE5B,oBACEE,GAAA,CAACC,kBAAkB,EAAA;~~AACjBlC~~,IAAAA,GAAG,EAAEA,GAAa;~~AAClBmC~~,IAAAA,EAAE,~~EAAElC~~,~~IAAI~~,~~GAAG~~,~~GAAG~~,~~GAAG~~,~~QAAS~~;~~AAC1BQ~~,IAAAA,IAAI,EAAEA,IAAK;AACXF,IAAAA,KAAK,EAAEA,KAAM;AACbN,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,GAAG,EAAEA,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,~~GAAIuB~~,UAAW;~~AACvBU~~,IAAAA,kBAAkB,EAAAC,aAAA,CACbC,EAAAA,EAAAA,cAAc,CAAC;~~AAChBC~~,~~MAAAA,~~IAAI,~~EAAEf~~,MAAM,GAAG,MAAM,GAAG,~~QAAA~~;~~AAC1B~~,KAAC,CAAC,CACF;~~AACFV~~,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,UAAU,EAAEA,UAAW;IAAAV,QAAA,~~eAEvB2B~~,IAAA,CAACC,OAAO,EAAA;AACNC,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,cAAc,EAAC,QAAQ;AACvBC,MAAAA,MAAM,EAAE,CAAE;AACVC,MAAAA,MAAM,EAAC,MAAM;~~AAAAlC~~,MAAAA,QAAA,EAEZH,CAAAA,IAAI,~~gBACHuB~~,GAAA,~~CAACQ~~,OAAO,EAAA;AAACC,QAAAA,OAAO,EAAC,MAAM;AAACG,QAAAA,cAAc,EAAC,QAAQ;AAACD,QAAAA,UAAU,EAAC,QAAQ;~~QAAA/B~~,QAAA,~~eACjEoB~~,GAAA,~~CAACvB~~,IAAI,EAAA;AAACD,UAAAA,IAAI,~~EAAEuC~~,oBAAoB,~~CAACvC~~,IAAI,CAAE;AAACF,UAAAA,KAAK,~~EAAEqB~~,SAAAA;SAAY,CAAA;AAAC,OACrD,CAAC,GACR,IAAI,~~EAGPhB~~,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,IAARA,QAAQ,~~CAAEqC~~,GAAG,~~gBAAGhB~~,GAAA,CAAA,KAAA,~~EAAAI~~,aAAA,CAAA,EAAA,~~EAASzB~~,QAAQ,CAAG,CAAC,GAAG,IAAI,EAE5CH,IAAI,KAAK,QAAQ,~~gBAChBwB~~,GAAA,~~CAACiB~~,OAAO,EAAA;~~AAACzC~~,QAAAA,IAAI,~~EAAE0C~~,qBAAqB,~~CAAC1C~~,IAAI,CAAE;~~AAAC2C~~,QAAAA,MAAM,EAAC,UAAU;~~AAAC7C~~,QAAAA,KAAK,~~EAAEyB~~,SAAU;~~AAAAnB~~,QAAAA,QAAA,EAC5EA,QAAAA;AAAQ,OACF,CAAC,~~gBAEVoB~~,GAAA,~~CAACoB~~,IAAI,EAAA;~~AAAC5C~~,QAAAA,IAAI,~~EAAE0C~~,qBAAqB,~~CAAC1C~~,IAAI,CAAE;~~AAAC2C~~,QAAAA,MAAM,EAAC,UAAU;~~AAAC7C~~,QAAAA,KAAK,~~EAAEyB~~,SAAU;~~AAAAnB~~,QAAAA,QAAA,EACzEA,QAAAA;AAAQ,OACL,CACP,CAAA;KACM,CAAA;AAAC,GACQ,CAAC,CAAA;AAEzB,CAAC,CAAA;AAED,~~IAAMyC~~,YAAY,gBAAGC,cAAK,CAACC,UAAU,~~CAAC1D~~,aAAa;;;;"}
1	+ {"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport type { BladeElementRef } from '~utils/types';\n\nconst _AvatarButton: React.ForwardRefRenderFunction<BladeElementRef, AvatarButtonProps> = (\n {\n href,\n target,\n rel,\n variant = 'circle',\n color = 'neutral',\n size = 'medium',\n icon: Icon,\n imgProps,\n children,\n onBlur,\n onFocus,\n onClick,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onPointerDown,\n onPointerEnter,\n onTouchStart,\n onTouchEnd,\n isSelected,\n },\n ref,\n): React.ReactElement => {\n const isLink = Boolean(href);\n const isInteractive = Boolean(onClick \|\| isLink);\n const as = isInteractive ? (href ? 'a' : 'button') : 'div';\n\n const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n const iconColor = getTextColorToken({\n property: 'icon',\n variant: 'secondary',\n color,\n state: 'default',\n }) as IconColor;\n const textColor = getTextColorToken({\n property: 'text',\n variant: 'secondary',\n color,\n state: 'default',\n }) as BaseTextProps['color'];\n\n return (\n <StyledAvatarButton\n ref={ref as never}\n as={as as never}\n isInteractive={isInteractive}\n isSelected={isSelected}\n size={size}\n color={color}\n href={href}\n variant={variant}\n target={target}\n rel={rel ?? defaultRel}\n accessibilityProps={{\n ...makeAccessible({\n role: isInteractive ? (isLink ? 'link' : 'button') : 'presentation',\n }),\n }}\n onBlur={onBlur}\n onFocus={onFocus}\n onClick={onClick}\n onMouseLeave={onMouseLeave}\n onMouseMove={onMouseMove}\n onMouseDown={onMouseDown}\n onPointerDown={onPointerDown}\n onPointerEnter={onPointerEnter}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n >\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={1}\n height=\"100%\"\n >\n {Icon ? (\n <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n <Icon size={avatarIconSizeTokens[size]} color={iconColor} />\n </BaseBox>\n ) : null}\n\n {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}\n {imgProps?.src ? <img {...imgProps} /> : null}\n\n {size === 'xlarge' ? (\n <Heading size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n {children}\n </Heading>\n ) : (\n <Text size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n {children}\n </Text>\n )}\n </BaseBox>\n </StyledAvatarButton>\n );\n};\n\nconst AvatarButton = React.forwardRef(_AvatarButton);\n\nexport { AvatarButton };\n"],"names":["_AvatarButton","_ref","ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","isSelected","isLink","Boolean","isInteractive","as","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text","AvatarButton","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;AAYA,IAAMA,aAAiF,GAAG,SAApFA,aAAiFA,CAAAC,IAAA,EAuBrFC,GAAG,EACoB;AAAA,EAAA,IAtBrBC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAAC,YAAA,GAAAL,IAAA,CACHM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,YAAA;IAAAE,UAAA,GAAAP,IAAA,CAClBQ,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IAAAE,SAAA,GAAAT,IAAA,CACjBU,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACTE,IAAI,GAAAX,IAAA,CAAVY,IAAI;IACJC,QAAQ,GAAAb,IAAA,CAARa,QAAQ;IACRC,QAAQ,GAAAd,IAAA,CAARc,QAAQ;IACRC,MAAM,GAAAf,IAAA,CAANe,MAAM;IACNC,OAAO,GAAAhB,IAAA,CAAPgB,OAAO;IACPC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IACPC,YAAY,GAAAlB,IAAA,CAAZkB,YAAY;IACZC,WAAW,GAAAnB,IAAA,CAAXmB,WAAW;IACXC,WAAW,GAAApB,IAAA,CAAXoB,WAAW;IACXC,aAAa,GAAArB,IAAA,CAAbqB,aAAa;IACbC,cAAc,GAAAtB,IAAA,CAAdsB,cAAc;IACdC,YAAY,GAAAvB,IAAA,CAAZuB,YAAY;IACZC,UAAU,GAAAxB,IAAA,CAAVwB,UAAU;IACVC,UAAU,GAAAzB,IAAA,CAAVyB,UAAU,CAAA;AAIZ,EAAA,IAAMC,MAAM,GAAGC,OAAO,CAACzB,IAAI,CAAC,CAAA;AAC5B,EAAA,IAAM0B,aAAa,GAAGD,OAAO,CAACV,OAAO,IAAIS,MAAM,CAAC,CAAA;EAChD,IAAMG,EAAE,GAAGD,aAAa,GAAI1B,IAAI,GAAG,GAAG,GAAG,QAAQ,GAAI,KAAK,CAAA;EAE1D,IAAM4B,UAAU,GAAG3B,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG4B,SAAS,CAAA;EAC1E,IAAMC,SAAS,GAAGC,iBAAiB,CAAC;AAClCC,IAAAA,QAAQ,EAAE,MAAM;AAChB5B,IAAAA,OAAO,EAAE,WAAW;AACpBE,IAAAA,KAAK,EAALA,KAAK;AACL2B,IAAAA,KAAK,EAAE,SAAA;AACT,GAAC,CAAc,CAAA;EACf,IAAMC,SAAS,GAAGH,iBAAiB,CAAC;AAClCC,IAAAA,QAAQ,EAAE,MAAM;AAChB5B,IAAAA,OAAO,EAAE,WAAW;AACpBE,IAAAA,KAAK,EAALA,KAAK;AACL2B,IAAAA,KAAK,EAAE,SAAA;AACT,GAAC,CAA2B,CAAA;EAE5B,oBACEE,GAAA,CAACC,kBAAkB,EAAA;AACjBrC,IAAAA,GAAG,EAAEA,GAAa;AAClB4B,IAAAA,EAAE,EAAEA,EAAY;AAChBD,IAAAA,aAAa,EAAEA,aAAc;AAC7BH,IAAAA,UAAU,EAAEA,UAAW;AACvBf,IAAAA,IAAI,EAAEA,IAAK;AACXF,IAAAA,KAAK,EAAEA,KAAM;AACbN,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,GAAG,EAAEA,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAI0B,UAAW;AACvBS,IAAAA,kBAAkB,EAAAC,aAAA,CACbC,EAAAA,EAAAA,cAAc,CAAC;MAChBC,IAAI,EAAEd,aAAa,GAAIF,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAI,cAAA;AACvD,KAAC,CAAC,CACF;AACFX,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,UAAU,EAAEA,UAAW;IAAAV,QAAA,eAEvB6B,IAAA,CAACC,OAAO,EAAA;AACNC,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,cAAc,EAAC,QAAQ;AACvBC,MAAAA,MAAM,EAAE,CAAE;AACVC,MAAAA,MAAM,EAAC,MAAM;AAAApC,MAAAA,QAAA,EAEZH,CAAAA,IAAI,gBACH0B,GAAA,CAACO,OAAO,EAAA;AAACC,QAAAA,OAAO,EAAC,MAAM;AAACG,QAAAA,cAAc,EAAC,QAAQ;AAACD,QAAAA,UAAU,EAAC,QAAQ;QAAAjC,QAAA,eACjEuB,GAAA,CAAC1B,IAAI,EAAA;AAACD,UAAAA,IAAI,EAAEyC,oBAAoB,CAACzC,IAAI,CAAE;AAACF,UAAAA,KAAK,EAAEwB,SAAAA;SAAY,CAAA;AAAC,OACrD,CAAC,GACR,IAAI,EAGPnB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,IAARA,QAAQ,CAAEuC,GAAG,gBAAGf,GAAA,CAAA,KAAA,EAAAG,aAAA,CAAA,EAAA,EAAS3B,QAAQ,CAAG,CAAC,GAAG,IAAI,EAE5CH,IAAI,KAAK,QAAQ,gBAChB2B,GAAA,CAACgB,OAAO,EAAA;AAAC3C,QAAAA,IAAI,EAAE4C,qBAAqB,CAAC5C,IAAI,CAAE;AAAC6C,QAAAA,MAAM,EAAC,UAAU;AAAC/C,QAAAA,KAAK,EAAE4B,SAAU;AAAAtB,QAAAA,QAAA,EAC5EA,QAAAA;AAAQ,OACF,CAAC,gBAEVuB,GAAA,CAACmB,IAAI,EAAA;AAAC9C,QAAAA,IAAI,EAAE4C,qBAAqB,CAAC5C,IAAI,CAAE;AAAC6C,QAAAA,MAAM,EAAC,UAAU;AAAC/C,QAAAA,KAAK,EAAE4B,SAAU;AAAAtB,QAAAA,QAAA,EACzEA,QAAAA;AAAQ,OACL,CACP,CAAA;KACM,CAAA;AAAC,GACQ,CAAC,CAAA;AAEzB,CAAC,CAAA;AAED,IAAM2C,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC5D,aAAa;;;;"}

package/build/lib/web/production/components/Avatar/StyledAvatar.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
 import { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens.js';
 import '../Box/BaseBox/index.js';
@@ -6,24 +7,29 @@ import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StyledAvatar = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-127ewkg-0"
 })(function (_ref) {
   var theme = _ref.theme,
     variant = _ref.variant,
-    size = _ref.size;
-  return {
+    size = _ref.size,
+    isInteractive = _ref.isInteractive;
+  return _objectSpread({
     display: 'flex',
     width: makeSize(avatarSizeTokens[size]),
     height: makeSize(avatarSizeTokens[size]),
     borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
-    outline: "".concat(makeBorderSize(theme.border.width.thinner), " solid ").concat(theme.colors.surface.border.gray.subtle),
+    outline: "".concat(makeBorderSize(theme.border.width.thinner), " solid ").concat(theme.colors.surface.border.gray.subtle)
+  }, isInteractive ? {
     '&:hover': {
       outline: "".concat(makeBorderSize(theme.border.width.thick), " solid ").concat(theme.colors.surface.border.gray.muted),
-      borderColor: theme.colors.surface.border.gray.muted
+      borderColor: theme.colors.surface.border.gray.muted,
+      backgroundColor: theme.colors.surface.background.gray.moderate
     }
-  };
+  } : {});
 });
 export { StyledAvatar };

package/build/lib/web/production/components/Avatar/StyledAvatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyledAvatar.js","sources":["../../../../../../src/components/Avatar/StyledAvatar.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAvatarProps } from './types';\nimport { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize, makeSize } from '~utils';\n\nconst StyledAvatar = styled(BaseBox)<StyledAvatarProps>(({ theme, variant, size }) => {\n return {\n display: 'flex',\n width: makeSize(avatarSizeTokens[size]),\n height: makeSize(avatarSizeTokens[size]),\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n outline: `${makeBorderSize(theme.border.width.thinner)} solid ${\n theme.colors.surface.border.gray.subtle\n }`,\n\n '&:hover': {\n outline: `${makeBorderSize(theme.border.width.thick)} solid ${\n theme.colors.surface.border.gray.muted\n }`,\n borderColor: theme.colors.surface.border.gray.muted,\n },\n };\n});\n\nexport { StyledAvatar };\n"],"names":["StyledAvatar","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","variant","size","display","width","makeSize","avatarSizeTokens","height","borderRadius","makeBorderSize","border","radius","avatarBorderRadiusTokens","outline","concat","thinner","colors","surface","gray","subtle","thick","muted","borderColor"],"mappings":"~~;;;;;;;;~~AAMA,IAAMA,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,cAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,~~CAAoB~~,CAAA,CAAA,UAAAC,IAAA,~~EAA8B~~;AAAA,EAAA,~~IAA3BC~~,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI,CAAA;~~EAC7E~~,~~OAAO~~;~~AACLC~~,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,gBAAgB,~~CAACJ~~,IAAI,CAAC,CAAC;~~AACvCK~~,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,~~CAACJ~~,IAAI,CAAC,CAAC;~~AACxCM~~,IAAAA,YAAY,EAAEC,cAAc,~~CAACT~~,KAAK,~~CAACU~~,MAAM,CAACC,MAAM,CAACC,wBAAwB,~~CAACX~~,OAAO,CAAC,CAAC,CAAC;~~IACpFY~~,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,~~CAACT~~,KAAK,~~CAACU~~,MAAM,CAACN,KAAK,CAACW,OAAO,CAAC,~~EAAAD~~,~~SAAAA,CAAAA,CAAAA,~~MAAA,~~CACpDd~~,KAAK,~~CAACgB~~,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACC,MAAM,~~CACvC~~;~~AAEF~~,IAAA,SAAS,EAAE;~~MACTN~~,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,~~CAACT~~,KAAK,~~CAACU~~,MAAM,CAACN,KAAK,CAACgB,KAAK,CAAC,EAAAN,SAAAA,CAAAA,CAAAA,MAAA,~~CAClDd~~,KAAK,~~CAACgB~~,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAK,CACtC;MACFC,WAAW,~~EAAEtB~~,KAAK,~~CAACgB~~,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,~~KAAAA~~;~~AAChD~~,KAAA;GACD,CAAA;~~AACH~~,CAAC;;;;"}
1	+ {"version":3,"file":"StyledAvatar.js","sources":["../../../../../../src/components/Avatar/StyledAvatar.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAvatarProps } from './types';\nimport { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize, makeSize } from '~utils';\n\nconst StyledAvatar = styled(BaseBox)<StyledAvatarProps & { isInteractive?: boolean }>(\n ({ theme, variant, size, isInteractive }) => {\n return {\n display: 'flex',\n width: makeSize(avatarSizeTokens[size]),\n height: makeSize(avatarSizeTokens[size]),\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n outline: `${makeBorderSize(theme.border.width.thinner)} solid ${\n theme.colors.surface.border.gray.subtle\n }`,\n\n ...(isInteractive\n ? {\n '&:hover': {\n outline: `${makeBorderSize(theme.border.width.thick)} solid ${\n theme.colors.surface.border.gray.muted\n }`,\n borderColor: theme.colors.surface.border.gray.muted,\n backgroundColor: theme.colors.surface.background.gray.moderate,\n },\n }\n : {}),\n };\n },\n);\n\nexport { StyledAvatar };\n"],"names":["StyledAvatar","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","variant","size","isInteractive","_objectSpread","display","width","makeSize","avatarSizeTokens","height","borderRadius","makeBorderSize","border","radius","avatarBorderRadiusTokens","outline","concat","thinner","colors","surface","gray","subtle","thick","muted","borderColor","backgroundColor","background","moderate"],"mappings":";;;;;;;;;;;AAMA,IAAMA,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,cAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAClC,CAAA,CAAA,UAAAC,IAAA,EAA6C;AAAA,EAAA,IAA1CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,aAAa,GAAAJ,IAAA,CAAbI,aAAa,CAAA;AACpC,EAAA,OAAAC,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,gBAAgB,CAACN,IAAI,CAAC,CAAC;AACvCO,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,CAACN,IAAI,CAAC,CAAC;AACxCQ,IAAAA,YAAY,EAAEC,cAAc,CAACX,KAAK,CAACY,MAAM,CAACC,MAAM,CAACC,wBAAwB,CAACb,OAAO,CAAC,CAAC,CAAC;IACpFc,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,CAACX,KAAK,CAACY,MAAM,CAACN,KAAK,CAACW,OAAO,CAAC,aAAAD,MAAA,CACpDhB,KAAK,CAACkB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACC,MAAM,CAAA;AACvC,GAAA,EAEElB,aAAa,GACb;AACE,IAAA,SAAS,EAAE;MACTY,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,CAACX,KAAK,CAACY,MAAM,CAACN,KAAK,CAACgB,KAAK,CAAC,EAAAN,SAAAA,CAAAA,CAAAA,MAAA,CAClDhB,KAAK,CAACkB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAK,CACtC;MACFC,WAAW,EAAExB,KAAK,CAACkB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAK;MACnDE,eAAe,EAAEzB,KAAK,CAACkB,MAAM,CAACC,OAAO,CAACO,UAAU,CAACN,IAAI,CAACO,QAAAA;AACxD,KAAA;GACD,GACD,EAAE,CAAA,CAAA;AAEV,CAAC;;;;"}

package/build/lib/web/production/components/Avatar/StyledAvatarButton.js CHANGED Viewed

@@ -20,15 +20,18 @@ var StyledAvatarButton = /*#__PURE__*/styled.button.withConfig({
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'neutral' : _ref$color;
-  return {
+    color = _ref$color === void 0 ? 'neutral' : _ref$color,
+    isSelected = _ref.isSelected,
+    isInteractive = _ref.isInteractive;
+  return _objectSpread({
+    display: 'block',
     textAlign: 'center',
     textDecoration: 'none',
-    cursor: 'pointer',
+    cursor: isInteractive ? 'pointer' : 'default',
     minHeight: makeSize(avatarSizeTokens[size]),
     height: makeSize(avatarSizeTokens[size]),
     width: makeSize(avatarSizeTokens[size]),
-    border: 'none',
+    border: isSelected ? "".concat(makeBorderSize(theme.border.width.thicker), " solid ").concat(theme.colors.surface.border.primary.normal) : 'none',
     borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
     backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),
     img: {
@@ -37,11 +40,12 @@ var StyledAvatarButton = /*#__PURE__*/styled.button.withConfig({
       width: avatarSizeTokens[size],
       borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
       objectFit: 'cover'
-    },
+    }
+  }, isInteractive ? {
     '&:focus-visible': _objectSpread({}, getFocusRingStyles({
       theme: theme
     }))
-  };
+  } : {});
 });
 export { StyledAvatarButton };

package/build/lib/web/production/components/Avatar/StyledAvatarButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyledAvatarButton.js","sources":["../../../../../../src/components/Avatar/StyledAvatarButton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { AvatarButtonProps } from './types';\nimport { avatarSizeTokens, avatarColorTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport { makeBorderSize, makeSize } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledAvatarButton = styled.button<AvatarButtonProps>(\n ({ theme, size = 'medium', variant = 'circle', color = 'neutral' }) => {\n return {\n textAlign: 'center',\n textDecoration: 'none',\n cursor: 'pointer',\n minHeight: makeSize(avatarSizeTokens[size]),\n height: makeSize(avatarSizeTokens[size]),\n width: makeSize(avatarSizeTokens[size]),\n border: 'none',\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),\n\n img: {\n display: 'block',\n height: avatarSizeTokens[size],\n width: avatarSizeTokens[size],\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n objectFit: 'cover',\n },\n\n '&:focus-visible': {\n ...getFocusRingStyles({ theme }),\n },\n };\n },\n);\n\nexport { StyledAvatarButton };\n"],"names":["StyledAvatarButton","styled","button","withConfig","displayName","componentId","_ref","theme","_ref$size","size","_ref$variant","variant","_ref$color","color","textAlign","textDecoration","cursor","minHeight","makeSize","avatarSizeTokens","height","width","border","~~borderRadius~~","makeBorderSize","~~radius~~","~~avatarBorderRadiusTokens~~","~~backgroundColor~~","~~getIn~~","~~colors~~","~~avatarColorTokens~~","~~background~~","~~img~~","~~display~~","~~objectFit~~","~~_objectSpread~~","getFocusRingStyles"],"mappings":";;;;;;;;;;;;AAOA,IAAMA,kBAAkB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtC,CAAA,CAAA,UAAAC,IAAA,~~EAAuE~~;AAAA,EAAA,~~IAApEC~~,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,SAAA,GAAAF,IAAA,~~CAAEG~~,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,YAAA,GAAAJ,IAAA,~~CAAEK~~,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,YAAA;IAAAE,UAAA,GAAAN,IAAA,~~CAAEO~~,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA,CAAA;~~EAC9D~~,OAAO;~~AACLE~~,IAAAA,SAAS,EAAE,QAAQ;AACnBC,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,~~EAAE~~,SAAS;~~AACjBC~~,IAAAA,SAAS,EAAEC,QAAQ,CAACC,gBAAgB,~~CAACV~~,IAAI,CAAC,CAAC;~~AAC3CW~~,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,~~CAACV~~,IAAI,CAAC,CAAC;~~AACxCY~~,IAAAA,KAAK,EAAEH,QAAQ,CAACC,gBAAgB,~~CAACV~~,IAAI,CAAC,CAAC;~~AACvCa~~,IAAAA,MAAM,~~EAAE~~,MAAM;~~AACdC~~,IAAAA,YAAY,~~EAAEC~~,cAAc,~~CAACjB~~,KAAK,~~CAACe~~,MAAM,~~CAACG~~,MAAM,CAACC,wBAAwB,~~CAACf~~,OAAO,CAAC,CAAC,CAAC;~~AACpFgB~~,IAAAA,eAAe,EAAEC,KAAK,~~CAACrB~~,KAAK,~~CAACsB~~,MAAM,~~EAAEC~~,iBAAiB,CAACC,UAAU,~~CAAClB~~,KAAK,CAAC,CAAC;~~AAEzEmB~~,IAAAA,GAAG,EAAE;~~AACHC~~,MAAAA,OAAO,EAAE,OAAO;~~AAChBb~~,MAAAA,MAAM,EAAED,gBAAgB,~~CAACV~~,IAAI,CAAC;~~AAC9BY~~,MAAAA,KAAK,EAAEF,gBAAgB,~~CAACV~~,IAAI,CAAC;~~AAC7Bc~~,MAAAA,YAAY,~~EAAEC~~,cAAc,~~CAACjB~~,KAAK,~~CAACe~~,MAAM,~~CAACG~~,MAAM,CAACC,wBAAwB,~~CAACf~~,OAAO,CAAC,CAAC,CAAC;~~AACpFuB~~,MAAAA,SAAS,EAAE,OAAA;~~KACZ~~;~~AAED~~,IAAA,iBAAiB,EAAAC,aAAA,~~CACZC~~,EAAAA,EAAAA,kBAAkB,CAAC;~~AAAE7B~~,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA;GAEnC,CAAA;~~AACH~~,CAAC;;;;"}
1	+ {"version":3,"file":"StyledAvatarButton.js","sources":["../../../../../../src/components/Avatar/StyledAvatarButton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { AvatarButtonProps } from './types';\nimport { avatarSizeTokens, avatarColorTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport { makeBorderSize, makeSize } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledAvatarButton = styled.button<AvatarButtonProps & { isInteractive?: boolean }>(\n ({\n theme,\n size = 'medium',\n variant = 'circle',\n color = 'neutral',\n isSelected,\n isInteractive,\n }) => {\n return {\n display: 'block',\n textAlign: 'center',\n textDecoration: 'none',\n cursor: isInteractive ? 'pointer' : 'default',\n minHeight: makeSize(avatarSizeTokens[size]),\n height: makeSize(avatarSizeTokens[size]),\n width: makeSize(avatarSizeTokens[size]),\n border: isSelected\n ? `${makeBorderSize(theme.border.width.thicker)} solid ${\n theme.colors.surface.border.primary.normal\n }`\n : 'none',\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),\n\n img: {\n display: 'block',\n height: avatarSizeTokens[size],\n width: avatarSizeTokens[size],\n borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n objectFit: 'cover',\n },\n\n ...(isInteractive\n ? {\n '&:focus-visible': {\n ...getFocusRingStyles({ theme }),\n },\n }\n : {}),\n };\n },\n);\n\nexport { StyledAvatarButton };\n"],"names":["StyledAvatarButton","styled","button","withConfig","displayName","componentId","_ref","theme","_ref$size","size","_ref$variant","variant","_ref$color","color","isSelected","isInteractive","_objectSpread","display","textAlign","textDecoration","cursor","minHeight","makeSize","avatarSizeTokens","height","width","border","concat","makeBorderSize","thicker","colors","surface","primary","normal","borderRadius","radius","avatarBorderRadiusTokens","backgroundColor","getIn","avatarColorTokens","background","img","objectFit","getFocusRingStyles"],"mappings":";;;;;;;;;;;;AAOA,IAAMA,kBAAkB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtC,CAAA,CAAA,UAAAC,IAAA,EAOM;AAAA,EAAA,IANJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,SAAA,GAAAF,IAAA,CACLG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,YAAA,GAAAJ,IAAA,CACfK,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,YAAA;IAAAE,UAAA,GAAAN,IAAA,CAClBO,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA;IACjBE,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IACVC,aAAa,GAAAT,IAAA,CAAbS,aAAa,CAAA;AAEb,EAAA,OAAAC,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,OAAO;AAChBC,IAAAA,SAAS,EAAE,QAAQ;AACnBC,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,EAAEL,aAAa,GAAG,SAAS,GAAG,SAAS;AAC7CM,IAAAA,SAAS,EAAEC,QAAQ,CAACC,gBAAgB,CAACd,IAAI,CAAC,CAAC;AAC3Ce,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,CAACd,IAAI,CAAC,CAAC;AACxCgB,IAAAA,KAAK,EAAEH,QAAQ,CAACC,gBAAgB,CAACd,IAAI,CAAC,CAAC;AACvCiB,IAAAA,MAAM,EAAEZ,UAAU,GAAAa,EAAAA,CAAAA,MAAA,CACXC,cAAc,CAACrB,KAAK,CAACmB,MAAM,CAACD,KAAK,CAACI,OAAO,CAAC,EAAAF,SAAAA,CAAAA,CAAAA,MAAA,CAC3CpB,KAAK,CAACuB,MAAM,CAACC,OAAO,CAACL,MAAM,CAACM,OAAO,CAACC,MAAM,IAE5C,MAAM;AACVC,IAAAA,YAAY,EAAEN,cAAc,CAACrB,KAAK,CAACmB,MAAM,CAACS,MAAM,CAACC,wBAAwB,CAACzB,OAAO,CAAC,CAAC,CAAC;AACpF0B,IAAAA,eAAe,EAAEC,KAAK,CAAC/B,KAAK,CAACuB,MAAM,EAAES,iBAAiB,CAACC,UAAU,CAAC3B,KAAK,CAAC,CAAC;AAEzE4B,IAAAA,GAAG,EAAE;AACHxB,MAAAA,OAAO,EAAE,OAAO;AAChBO,MAAAA,MAAM,EAAED,gBAAgB,CAACd,IAAI,CAAC;AAC9BgB,MAAAA,KAAK,EAAEF,gBAAgB,CAACd,IAAI,CAAC;AAC7ByB,MAAAA,YAAY,EAAEN,cAAc,CAACrB,KAAK,CAACmB,MAAM,CAACS,MAAM,CAACC,wBAAwB,CAACzB,OAAO,CAAC,CAAC,CAAC;AACpF+B,MAAAA,SAAS,EAAE,OAAA;AACb,KAAA;AAAC,GAAA,EAEG3B,aAAa,GACb;AACE,IAAA,iBAAiB,EAAAC,aAAA,CACZ2B,EAAAA,EAAAA,kBAAkB,CAAC;AAAEpC,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA;GAEnC,GACD,EAAE,CAAA,CAAA;AAEV,CAAC;;;;"}