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

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

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

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

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