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

@razorpay/blade 11.24.3 → 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 (51) hide show

package/build/lib/native/components/Avatar/TrustedBadgeIcon.native.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+var TrustedBadgeIcon=function TrustedBadgeIcon(){throwBladeError({message:'TrustedBadgeIcon is not yet implemented for React Native',moduleName:'TrustedBadgeIcon'});return jsx(Fragment,{});};
+export { TrustedBadgeIcon };
+//# sourceMappingURL=TrustedBadgeIcon.native.js.map

package/build/lib/native/components/Avatar/TrustedBadgeIcon.native.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TrustedBadgeIcon.native.js","sources":["../../../../../src/components/Avatar/TrustedBadgeIcon.native.tsx"],"sourcesContent":["import { throwBladeError } from '~utils/logger';\n\nimport type { IconComponent } from '~components/Icons';\n\nconst TrustedBadgeIcon: IconComponent = () => {\n throwBladeError({\n message: 'TrustedBadgeIcon is not yet implemented for React Native',\n moduleName: 'TrustedBadgeIcon',\n });\n\n return <></>;\n};\n\nexport { TrustedBadgeIcon };\n"],"names":["TrustedBadgeIcon","throwBladeError","message","moduleName","_jsx","_Fragment"],"mappings":";;;AAIM,IAAAA,gBAA+B,CAAG,SAAlCA,gBAA+BA,EAAS,CAC5CC,eAAe,CAAC,CACdC,OAAO,CAAE,0DAA0D,CACnEC,UAAU,CAAE,kBACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAAC,QAAA,CAAA,EAAI,CAAC,CACd;;;;"}

package/build/lib/native/components/Indicator/Indicator.js CHANGED Viewed

@@ -24,8 +24,9 @@ import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
 import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
-var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var isIntense=emphasis==='intense';var isPrimary=color==='primary';var fillColorOuter=isPrimary?theme.colors.surface.background.primary.subtle:theme.colors.feedback.background[color].subtle;var fillColorInner=isPrimary?theme.colors.surface.icon.primary.normal:theme.colors.feedback.icon[color].intense;var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));var svgSize=isIntense?indicatorDotSizes[emphasis][size].outer:indicatorDotSizes[emphasis][size].inner;return jsx(BaseBox,Object.assign({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsx(Svg,{width:String(svgSize),height:String(svgSize),viewBox:"0 0 10 10",fill:"none",children:isIntense?jsxs(Fragment,{children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorOuter}),jsx(Circle,{cx:"5",cy:"5",r:"2.5",fill:fillColorInner})]}):jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorInner})}),jsx(BaseBox,{marginLeft:"spacing.2",children:jsx(Text,{weight:"medium",color:"surface.text.gray.subtle",textAlign:"left",size:textSizeMapping[size],children:children})})]})}));};
+var _excluded=["accessibilityLabel","children","size","color","emphasis","testID"];var _Indicator=function _Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var isIntense=emphasis==='intense';var isPrimary=color==='primary';var fillColorOuter=isPrimary?theme.colors.surface.background.primary.subtle:theme.colors.feedback.background[color].subtle;var fillColorInner=isPrimary?theme.colors.surface.icon.primary.normal:theme.colors.feedback.icon[color].intense;var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));var svgSize=isIntense?indicatorDotSizes[emphasis][size].outer:indicatorDotSizes[emphasis][size].inner;return jsx(BaseBox,Object.assign({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsx(Svg,{width:String(svgSize),height:String(svgSize),viewBox:"0 0 10 10",fill:"none",children:isIntense?jsxs(Fragment,{children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorOuter}),jsx(Circle,{cx:"5",cy:"5",r:"2.5",fill:fillColorInner})]}):jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColorInner})}),jsx(BaseBox,{marginLeft:childrenString?'spacing.2':'spacing.0',children:jsx(Text,{weight:"medium",color:"surface.text.gray.subtle",textAlign:"left",size:textSizeMapping[size],children:children})})]})}));};var Indicator=assignWithoutSideEffects(_Indicator,{componentId:'Indicator'});
 export { Indicator };
 //# sourceMappingURL=Indicator.js.map

package/build/lib/native/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","Object","assign","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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AACA,IAAA,SAAA,CAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,MAAA,CAAA,OAAA,CAAA,UAAA,CAAA,QAAA,CAAA,~~CAmEM~~,~~IAAAA~~,~~SAAS~~,CAAG,~~SAAZA~~,~~SAASA~~,CAAAC,IAAA,~~CAQqB~~,~~CAPlC~~,~~IAAAC~~,kBAAkB,CAAAD,IAAA,CAAlBC,kBAAkB,CAClBC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAAC,SAAA,CAAAH,IAAA,CACRI,IAAI,CAAJA,IAAI,CAAAD,SAAA,~~GAAA~~,KAAA,CAAA,~~CAAG~~,QAAQ,CAAAA,SAAA,CAAAE,UAAA,CAAAL,IAAA,CACfM,KAAK,CAALA,KAAK,CAAAD,UAAA,GAAA,KAAA,CAAA,CAAG,SAAS,CAAAA,UAAA,CAAAE,aAAA,CAAAP,IAAA,CACjBQ,QAAQ,CAARA,QAAQ,CAAAD,aAAA,~~GAAA~~,KAAA,CAAA,~~CAAG~~,QAAQ,CAAAA,aAAA,CACnBE,MAAM,CAAAT,IAAA,CAANS,MAAM,CACHC,WAAW,CAAAC,wBAAA,CAAAX,IAAA,CAAAY,SAAA,CAAA,CAEd,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,cAAc,CAAGC,sBAAsB,CAACf,QAAQ,CAAC,CACvD,IAAMgB,SAAS,CAAGV,QAAQ,GAAK,SAAS,CACxC,IAAMW,SAAS,CAAGb,KAAK,GAAK,SAAS,CAErC,IAAMc,cAAc,CAAGD,SAAS,CAC5BJ,KAAK,CAACM,MAAM,CAACC,OAAO,CAACC,UAAU,CAACC,OAAO,CAACC,MAAM,CAC9CV,KAAK,CAACM,MAAM,CAACK,QAAQ,CAACH,UAAU,CAACjB,KAAK,CAAC,CAACmB,MAAM,CAClD,IAAME,cAAc,CAAGR,SAAS,CAC5BJ,KAAK,CAACM,MAAM,CAACC,OAAO,CAACM,IAAI,CAACJ,OAAO,CAACK,MAAM,CACxCd,KAAK,CAACM,MAAM,CAACK,QAAQ,CAACE,IAAI,CAACtB,KAAK,CAAC,CAACwB,OAAO,CAE7C,IAAMC,KAAK,CAAG,CAACC,aAAa,EAAE,CAC9B,IAAMC,SAAS,CAAGC,cAAc,CAAAC,MAAA,CAAAC,MAAA,CAC9BC,~~CAAAA,~~KAAK,CAAEpC,kBAAkB,~~EAAlBA~~,~~IAAAA~~,~~CAAAA~~,kBAAkB,CAAIe,cAAc,CACvCe,~~CAAAA,~~KAAK,EAAI,CAAEO,IAAI,CAAE,QAAS,CAAC,CAChC,CAAC,CAEF,IAAMC,OAAO,CAAGrB,SAAS,CACrBsB,iBAAiB,CAAChC,QAAQ,CAAC,CAACJ,IAAI,CAAC,CAACqC,KAAK,CACvCD,iBAAiB,CAAChC,QAAQ,CAAC,CAACJ,IAAI,CAAC,CAACsC,KAAK,CAE3C,OACEC,GAAA,CAACC,OAAO,CAAAT,MAAA,CAAAC,MAAA,CACNS,~~CAAAA,~~OAAO,CAAGd,KAAK,CAAG,aAAa,CAAG,MAAiB,CAC/CE,CAAAA,SAAS,CACTa,aAAa,CAAC,CAAEC,IAAI,CAAEC,aAAa,~~CAACjD~~,SAAS,~~CAAEU~~,MAAM,CAANA,MAAO,CAAC,CAAC,~~CACxDwC~~,cAAc,~~CAACvC~~,WAAW,CAAC,CAAAR,~~CAAAA,~~QAAA,CAE/~~BgD~~,IAAA,~~CAACN~~,OAAO,CAACC,~~CAAAA,~~OAAO,CAAC,MAAM,~~CAACM~~,aAAa,CAAC,KAAK,CAACC,UAAU,CAAC,QAAQ,~~CAAAlD~~,QAAA,CAC7DyC,~~CAAAA,~~GAAA,~~CAACU~~,GAAG,CAACC,~~CAAAA,~~KAAK,CAAEC,MAAM,~~CAAChB~~,OAAO,CAAE,~~CAACiB~~,MAAM,CAAED,MAAM,~~CAAChB~~,OAAO,CAAE,~~CAACkB~~,OAAO,CAAC,WAAW,CAACC,IAAI,CAAC,MAAM,~~CAAAxD~~,QAAA,CAClFgB,SAAS,~~CACRgC~~,IAAA,CAAAS,QAAA,~~CAAAzD~~,~~CAAAA~~,QAAA,CACEyC,~~CAAAA,~~GAAA,~~CAACiB~~,MAAM,CAACC,CAAAA,EAAE,CAAC,GAAG,CAACC,EAAE,CAAC,GAAG,CAACC,CAAC,CAAC,GAAG,CAACL,IAAI,~~CAAEtC~~,cAAe,CAAE,CAAC,CACpDuB,GAAA,~~CAACiB~~,MAAM,CAACC,CAAAA,EAAE,CAAC,GAAG,CAACC,EAAE,CAAC,GAAG,CAACC,CAAC,CAAC,KAAK,CAACL,IAAI,~~CAAE/B~~,cAAe,CAAE,CAAC,CACtD,~~CAAA,~~CAAC,CAEHgB,GAAA,~~CAACiB~~,MAAM,CAACC,~~CAAAA,~~EAAE,CAAC,GAAG,CAACC,EAAE,CAAC,GAAG,CAACC,CAAC,CAAC,GAAG,CAACL,IAAI,~~CAAE/B~~,cAAe,CAAE,CACpD,CACE,CAAC,CACNgB,GAAA,CAACC,OAAO,~~CAACoB~~,~~CAAAA~~,UAAU,~~CAAC~~,WAAW,~~CAAA9D~~,QAAA,~~CAC7ByC~~,GAAA,~~CAACsB~~,IAAI,CACHC,~~CAAAA,~~MAAM,CAAC,QAAQ,~~CACf5D~~,KAAK,CAAC,0BAA0B,~~CAChC6D~~,SAAS,CAAC,MAAM,~~CAChB/D~~,IAAI,~~CAAEgE~~,eAAe,~~CAAChE~~,IAAI,CAAE,CAAAF,QAAA,CAE3BA,QAAQ,CACL,CAAC,CACA,CAAC,CAAA,CACH,CAAC,CAAA,CACH,CAAC,CAEd;;;;"}
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","Object","assign","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/native/components/StepGroup/StepItemMarker.js CHANGED Viewed

@@ -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",marginLeft:"spacing.2",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;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`})});};
 export { StepItemIcon, StepItemIndicator };
 //# sourceMappingURL=StepItemMarker.js.map

package/build/lib/native/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","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,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,CACNC,~~CAAAA,~~eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CAClC,~~uBAAsBA~~,~~KAAM~~,~~CAAA~~,~~OAAA~~,~~CAClC~~,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,~~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,CAACkB,SAAS,~~CACRC~~,~~CAAAA,~~QAAQ,CAAC,UAAU,~~CACnBC~~,~~UAAU,CAAC,WAAW,CACtBxB,~~KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEA,IAAK,~~CACXwB~~,kBAAkB,CAAG,~~CAAEzB~~,~~EAAAA~~,KAAM,CAAY,UAAA,CAAA,CAC1C,CAAC,CACoB,CAAC,CAE7B,EAOM,~~IAAA0B~~,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAAiF,~~KAArEC~~,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,~~CAAQ3B~~,KAAK,CAALA,KAAK,~~CAAA8B~~,WAAA,~~GAAA~~,KAAA,CAAA,~~CAAG~~,SAAS,CAAAA,WAAA,CACnD,IAAAC,cAAA,~~CAAiBf~~,YAAY,EAAE,CAAvBf,IAAI,~~CAAA8B~~,cAAA,~~CAAJ9B~~,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,~~CAACwB~~,IAAI,CAAA,~~CACH3B~~,IAAI,~~CAAE+B~~,cAAc,~~CAAC/B~~,IAAI,CAAE,CAC3BD,KAAK,CACHA,KAAK,GAAK,SAAS,CAAG,6BAA6B,CAAI,CAAA,cAAA,EAAgBA,KAAM,CAC9E,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}
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;;;;"}

package/build/lib/native/components/index.js CHANGED Viewed

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

package/build/lib/native/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/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/development/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/development/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/development/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":"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"}

package/build/lib/web/development/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/development/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/development/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/development/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;;;;"}