@razorpay/blade 12.98.1 → 12.110.0

package/build/lib/web/development/components/AppBar/AppBar.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.web.js","sources":["../../../../../../src/components/AppBar/AppBar.web.tsx"],"sourcesContent":["import React from 'react';\nimport { AppBarContext, useAppBarContext } from './AppBarContext';\nimport type { AppBarActionsProps, AppBarLeadingProps, AppBarProps } from './types';\nimport {\n  APP_BAR_ACTIONS_GAP,\n  APP_BAR_BACKGROUND_COLOR,\n  APP_BAR_BACK_BUTTON_GAP,\n  APP_BAR_HEIGHT,\n  APP_BAR_LEADING_GAP,\n  APP_BAR_PADDING_X,\n  APP_BAR_PADDING_Y,\n} from './appBarTokens';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeSize } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ArrowLeftIcon } from '~components/Icons';\nimport { TrustBadge } from '~components/TrustBadge';\nimport { Tooltip } from '~components/Tooltip';\nimport { Text } from '~components/Typography';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst _AppBar = (\n  {\n    children,\n    backButton,\n    variant = 'neutral',\n    isSticky = true,\n    accessibilityLabel,\n    backgroundColor,\n    position,\n    top,\n    zIndex,\n    width,\n    paddingX,\n    paddingY,\n    testID,\n    ...rest\n  }: AppBarProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { colorScheme, themeTokens } = useTheme();\n  const resolvedBackgroundColor = backgroundColor ?? APP_BAR_BACKGROUND_COLOR[variant];\n  const resolvedColorScheme = variant === 'neutral' ? 'dark' : colorScheme;\n\n  const backButtonElement = backButton ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      flexShrink={0}\n      marginRight={APP_BAR_BACK_BUTTON_GAP}\n    >\n      <IconButton\n        icon={ArrowLeftIcon}\n        size=\"medium\"\n        accessibilityLabel={backButton.accessibilityLabel}\n        onClick={backButton.onClick}\n      />\n    </BaseBox>\n  ) : null;\n\n  const appBar = (\n    <BaseBox\n      ref={ref as never}\n      display=\"grid\"\n      gridTemplateColumns=\"minmax(0, 1fr) auto\"\n      alignItems=\"center\"\n      columnGap={APP_BAR_ACTIONS_GAP}\n      position={position ?? (isSticky ? 'sticky' : 'relative')}\n      top={top ?? (isSticky ? '0px' : undefined)}\n      width={width ?? '100%'}\n      height={makeSize(APP_BAR_HEIGHT)}\n      paddingX={paddingX ?? APP_BAR_PADDING_X}\n      paddingY={paddingY ?? APP_BAR_PADDING_Y}\n      zIndex={zIndex ?? componentZIndices.topnav}\n      backgroundColor={resolvedBackgroundColor}\n      {...metaAttribute({ name: MetaConstants.AppBar, testID })}\n      {...makeAccessible({ role: 'banner', label: accessibilityLabel })}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" minWidth=\"0px\">\n        {backButtonElement && backButton?.tooltip ? (\n          <Tooltip content={backButton.tooltip.content} placement={backButton.tooltip.placement}>\n            {backButtonElement}\n          </Tooltip>\n        ) : (\n          backButtonElement\n        )}\n        {children}\n      </BaseBox>\n    </BaseBox>\n  );\n\n  return (\n    <AppBarContext.Provider value={{ colorScheme, themeTokens, variant }}>\n      {/* AppBar forces a fixed color scheme for the surface so foreground tokens (text/icons)\n       contrast against the static-black surface. Children inherit the same theme. */}\n      <BladeProvider themeTokens={themeTokens} colorScheme={resolvedColorScheme}>\n        {appBar}\n      </BladeProvider>\n    </AppBarContext.Provider>\n  );\n};\n\n/**\n * ### AppBar\n *\n * Top-of-screen application/page header for mobile and compact desktop surfaces.\n *\n * ---\n *\n * #### Usage\n *\n * ```jsx\n * <AppBar backButton={{ onClick: goBack, accessibilityLabel: 'Go back' }}>\n *   <AppBarLeading title=\"Mavenshop\" logo={<MerchantLogo />} trustBadgeVariant=\"default\" />\n *   <AppBarActions>\n *     <IconButton icon={UserIcon} accessibilityLabel=\"Profile\" onClick={openProfile} />\n *   </AppBarActions>\n * </AppBar>\n * ```\n */\nconst AppBar = assignWithoutSideEffects(React.forwardRef(_AppBar), {\n  componentId: MetaConstants.AppBar,\n});\n\nconst _AppBarLeading = ({\n  title,\n  logo,\n  trustBadgeVariant,\n  trustBadgeLabel,\n  testID,\n  ...rest\n}: AppBarLeadingProps): React.ReactElement => {\n  const appBarContext = useAppBarContext();\n  const isNeutral = (appBarContext?.variant ?? 'neutral') === 'neutral';\n  const titleColor = isNeutral ? 'surface.text.staticWhite.normal' : 'surface.text.gray.normal';\n  const showFullBadge = trustBadgeVariant === 'default';\n  const showIconBadge = trustBadgeVariant === 'icon-only';\n  const stackFullBadgeBelowLogo = showFullBadge && Boolean(logo) && !title;\n  const hasTitleColumn = Boolean(title) || (showFullBadge && !logo);\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      gap={APP_BAR_LEADING_GAP}\n      flex={1}\n      minWidth=\"0px\"\n      overflow=\"hidden\"\n      {...metaAttribute({ name: MetaConstants.AppBarLeading, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {logo ? (\n        stackFullBadgeBelowLogo ? (\n          <BaseBox\n            display=\"flex\"\n            flexDirection=\"column\"\n            alignItems=\"flex-start\"\n            minWidth=\"0px\"\n            maxWidth=\"100%\"\n          >\n            <BaseBox display=\"flex\" alignItems=\"center\" minWidth=\"0px\" maxWidth=\"100%\">\n              {logo}\n            </BaseBox>\n            <BaseBox\n              display=\"flex\"\n              alignItems=\"center\"\n              marginTop=\"spacing.1\"\n              minWidth=\"0px\"\n              maxWidth=\"100%\"\n            >\n              <TrustBadge variant=\"default\" label={trustBadgeLabel} />\n            </BaseBox>\n          </BaseBox>\n        ) : (\n          <BaseBox display=\"flex\" alignItems=\"center\" minWidth=\"0px\" maxWidth=\"100%\">\n            {logo}\n          </BaseBox>\n        )\n      ) : null}\n      {hasTitleColumn ? (\n        <BaseBox display=\"flex\" flexDirection=\"column\" minWidth=\"0px\">\n          {title ? (\n            <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.3\">\n              <Text size=\"large\" weight=\"semibold\" color={titleColor} truncateAfterLines={1}>\n                {title}\n              </Text>\n              {showIconBadge ? <TrustBadge variant=\"icon-only\" label={trustBadgeLabel} /> : null}\n            </BaseBox>\n          ) : null}\n          {showFullBadge && !stackFullBadgeBelowLogo ? (\n            <BaseBox\n              display=\"flex\"\n              alignItems=\"center\"\n              marginTop=\"spacing.1\"\n              minWidth=\"0px\"\n              maxWidth=\"100%\"\n            >\n              <TrustBadge variant=\"default\" label={trustBadgeLabel} />\n            </BaseBox>\n          ) : null}\n        </BaseBox>\n      ) : showIconBadge ? (\n        <TrustBadge variant=\"icon-only\" label={trustBadgeLabel} />\n      ) : null}\n    </BaseBox>\n  );\n};\n\nconst AppBarLeading = assignWithoutSideEffects(_AppBarLeading, {\n  componentId: MetaConstants.AppBarLeading,\n});\n\nconst _AppBarActions = ({ children, testID, ...rest }: AppBarActionsProps): React.ReactElement => {\n  const appBarContext = useAppBarContext();\n  const { colorScheme, themeTokens } = useTheme();\n\n  const actions = (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      gap={APP_BAR_ACTIONS_GAP}\n      flexShrink={0}\n      marginLeft=\"auto\"\n      {...metaAttribute({ name: MetaConstants.AppBarActions, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n\n  if (appBarContext) {\n    return (\n      <BladeProvider\n        themeTokens={appBarContext.themeTokens}\n        colorScheme={appBarContext.variant === 'neutral' ? 'dark' : appBarContext.colorScheme}\n      >\n        {actions}\n      </BladeProvider>\n    );\n  }\n\n  return (\n    <BladeProvider themeTokens={themeTokens} colorScheme={colorScheme}>\n      {actions}\n    </BladeProvider>\n  );\n};\n\nconst AppBarActions = assignWithoutSideEffects(_AppBarActions, {\n  componentId: MetaConstants.AppBarActions,\n});\n\nexport { AppBar, AppBarLeading, AppBarActions };\n"],"names":["_AppBar","_ref","ref","children","backButton","_ref$variant","variant","_ref$isSticky","isSticky","accessibilityLabel","backgroundColor","position","top","zIndex","width","paddingX","paddingY","testID","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","colorScheme","themeTokens","resolvedBackgroundColor","APP_BAR_BACKGROUND_COLOR","resolvedColorScheme","backButtonElement","_jsx","BaseBox","display","alignItems","flexShrink","marginRight","APP_BAR_BACK_BUTTON_GAP","IconButton","icon","ArrowLeftIcon","size","onClick","appBar","_objectSpread","gridTemplateColumns","columnGap","APP_BAR_ACTIONS_GAP","undefined","height","makeSize","APP_BAR_HEIGHT","APP_BAR_PADDING_X","APP_BAR_PADDING_Y","componentZIndices","topnav","metaAttribute","name","MetaConstants","AppBar","makeAccessible","role","label","getStyledProps","makeAnalyticsAttribute","_jsxs","flexDirection","minWidth","tooltip","Tooltip","content","placement","AppBarContext","Provider","value","BladeProvider","assignWithoutSideEffects","React","forwardRef","componentId","_AppBarLeading","_ref2","_appBarContext$varian","title","logo","trustBadgeVariant","trustBadgeLabel","_excluded2","appBarContext","useAppBarContext","isNeutral","titleColor","showFullBadge","showIconBadge","stackFullBadgeBelowLogo","Boolean","hasTitleColumn","gap","APP_BAR_LEADING_GAP","flex","overflow","AppBarLeading","maxWidth","marginTop","TrustBadge","Text","weight","color","truncateAfterLines","_AppBarActions","_ref3","_excluded3","_useTheme2","actions","marginLeft","AppBarActions"],"mappings":"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"}

package/build/lib/web/development/components/AppBar/AppBarContext.js

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+var AppBarContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Returns the AppBar context if inside an AppBar, otherwise null.
+ * Stores the original app colorScheme so that overlay components
+ * (Menu, Popover, etc.) rendered inside AppBar can reset back to
+ * the app's colorScheme instead of inheriting AppBar's forced theme.
+ */
+var useAppBarContext = function useAppBarContext() {
+  return React__default.useContext(AppBarContext);
+};
+
+export { AppBarContext, useAppBarContext };
+//# sourceMappingURL=AppBarContext.js.map

package/build/lib/web/development/components/AppBar/AppBarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarContext.js","sources":["../../../../../../src/components/AppBar/AppBarContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { AppBarProps } from './types';\nimport type { ColorSchemeNames, ThemeTokens } from '~tokens/theme';\n\ntype AppBarContextProps = {\n  colorScheme: ColorSchemeNames;\n  themeTokens: ThemeTokens;\n  variant?: AppBarProps['variant'];\n};\n\nconst AppBarContext = React.createContext<AppBarContextProps | null>(null);\n\n/**\n * Returns the AppBar context if inside an AppBar, otherwise null.\n * Stores the original app colorScheme so that overlay components\n * (Menu, Popover, etc.) rendered inside AppBar can reset back to\n * the app's colorScheme instead of inheriting AppBar's forced theme.\n */\nconst useAppBarContext = (): AppBarContextProps | null => {\n  return React.useContext(AppBarContext);\n};\n\nexport type { AppBarContextProps };\nexport { AppBarContext, useAppBarContext };\n"],"names":["AppBarContext","React","createContext","useAppBarContext","useContext"],"mappings":";;AAUA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAAoC;AACxD,EAAA,OAAOF,cAAK,CAACG,UAAU,CAACJ,aAAa,CAAC,CAAA;AACxC;;;;"}

package/build/lib/web/development/components/AppBar/appBarTokens.js

@@ -0,0 +1,59 @@
+import '../../tokens/global/index.js';
+import { size } from '../../tokens/global/size.js';
+
+/**
+ * Height of the AppBar bar.
+ *
+ * Maps to Figma frame height (`size[64]` → 64px).
+ */
+var APP_BAR_HEIGHT = size[64];
+
+/**
+ * Surface background color per AppBar variant.
+ *
+ * - `neutral`: transparent surface (matches Figma — the AppBar has no background
+ *   of its own and sits directly over the page). Foreground stays light via the
+ *   forced dark color scheme so it remains legible over a dark page.
+ * - `subtle`: gray surface that adapts to an embedded/light page context.
+ */
+var APP_BAR_BACKGROUND_COLOR = {
+  neutral: 'transparent',
+  subtle: 'surface.background.gray.intense'
+};
+
+/**
+ * Horizontal padding of the AppBar surface.
+ *
+ * Figma: 20px on mobile, 24px on desktop → `spacing.5` / `spacing.6`.
+ */
+var APP_BAR_PADDING_X = {
+  base: 'spacing.5',
+  m: 'spacing.6'
+};
+
+/**
+ * Vertical padding of the AppBar surface.
+ *
+ * Figma: 4px → `spacing.3` keeps the 64px height comfortable with the medium IconButton.
+ */
+var APP_BAR_PADDING_Y = 'spacing.3';
+
+/**
+ * Gap between the back button and AppBarLeading content.
+ *
+ * Figma: 12px → `spacing.4`.
+ */
+var APP_BAR_BACK_BUTTON_GAP = 'spacing.4';
+
+/**
+ * Gap between leading items (logo, title, badge).
+ */
+var APP_BAR_LEADING_GAP = 'spacing.3';
+
+/**
+ * Gap between trailing action items.
+ */
+var APP_BAR_ACTIONS_GAP = 'spacing.3';
+
+export { APP_BAR_ACTIONS_GAP, APP_BAR_BACKGROUND_COLOR, APP_BAR_BACK_BUTTON_GAP, APP_BAR_HEIGHT, APP_BAR_LEADING_GAP, APP_BAR_PADDING_X, APP_BAR_PADDING_Y };
+//# sourceMappingURL=appBarTokens.js.map

package/build/lib/web/development/components/AppBar/appBarTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appBarTokens.js","sources":["../../../../../../src/components/AppBar/appBarTokens.ts"],"sourcesContent":["import type { AppBarProps } from './types';\nimport { size } from '~tokens/global';\nimport type { BaseBoxProps, SpacingValueType } from '~components/Box/BaseBox/types';\n\n/**\n * Height of the AppBar bar.\n *\n * Maps to Figma frame height (`size[64]` → 64px).\n */\nexport const APP_BAR_HEIGHT = size[64];\n\n/**\n * Surface background color per AppBar variant.\n *\n * - `neutral`: transparent surface (matches Figma — the AppBar has no background\n *   of its own and sits directly over the page). Foreground stays light via the\n *   forced dark color scheme so it remains legible over a dark page.\n * - `subtle`: gray surface that adapts to an embedded/light page context.\n */\nexport const APP_BAR_BACKGROUND_COLOR: Record<\n  NonNullable<AppBarProps['variant']>,\n  BaseBoxProps['backgroundColor']\n> = {\n  neutral: 'transparent',\n  subtle: 'surface.background.gray.intense',\n};\n\n/**\n * Horizontal padding of the AppBar surface.\n *\n * Figma: 20px on mobile, 24px on desktop → `spacing.5` / `spacing.6`.\n */\nexport const APP_BAR_PADDING_X: BaseBoxProps['paddingX'] = {\n  base: 'spacing.5',\n  m: 'spacing.6',\n};\n\n/**\n * Vertical padding of the AppBar surface.\n *\n * Figma: 4px → `spacing.3` keeps the 64px height comfortable with the medium IconButton.\n */\nexport const APP_BAR_PADDING_Y: BaseBoxProps['paddingY'] = 'spacing.3';\n\n/**\n * Gap between the back button and AppBarLeading content.\n *\n * Figma: 12px → `spacing.4`.\n */\nexport const APP_BAR_BACK_BUTTON_GAP: SpacingValueType = 'spacing.4';\n\n/**\n * Gap between leading items (logo, title, badge).\n */\nexport const APP_BAR_LEADING_GAP: SpacingValueType = 'spacing.3';\n\n/**\n * Gap between trailing action items.\n */\nexport const APP_BAR_ACTIONS_GAP: SpacingValueType = 'spacing.3';\n"],"names":["APP_BAR_HEIGHT","size","APP_BAR_BACKGROUND_COLOR","neutral","subtle","APP_BAR_PADDING_X","base","m","APP_BAR_PADDING_Y","APP_BAR_BACK_BUTTON_GAP","APP_BAR_LEADING_GAP","APP_BAR_ACTIONS_GAP"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;IACaA,cAAc,GAAGC,IAAI,CAAC,EAAE,EAAC;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,wBAGZ,GAAG;AACFC,EAAAA,OAAO,EAAE,aAAa;AACtBC,EAAAA,MAAM,EAAE,iCAAA;AACV,EAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMC,iBAA2C,GAAG;AACzDC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,CAAC,EAAE,WAAA;AACL,EAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMC,iBAA2C,GAAG,YAAW;;AAEtE;AACA;AACA;AACA;AACA;AACO,IAAMC,uBAAyC,GAAG,YAAW;;AAEpE;AACA;AACA;AACO,IAAMC,mBAAqC,GAAG,YAAW;;AAEhE;AACA;AACA;AACO,IAAMC,mBAAqC,GAAG;;;;"}

package/build/lib/web/development/components/AppBar/index.js

@@ -0,0 +1,3 @@
+export { AppBar, AppBarActions, AppBarLeading } from './AppBar.web.js';
+export { useAppBarContext } from './AppBarContext.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/AppBar/index.js.map

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

package/build/lib/web/development/components/Avatar/AvatarGroup.web.js

@@ -4,7 +4,9 @@ import React__default from 'react';
 import { StyledAvatarGroup } from './StyledAvatarGroup.js';
 import { StyledAvatar } from './StyledAvatar.js';
 import { AvatarGroupProvider } from './AvatarGroupContext.js';
-import { AvatarButton } from './AvatarButton.js';
+import { avatarTextSizeMapping } from './avatarTokens.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
 import '../Box/styledProps/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
@@ -18,15 +20,20 @@ import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { Heading } from '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["children", "size", "maxCount", "testID"];
+var _excluded = ["children", "size", "density", "maxCount", "testID"];
 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 _AvatarGroup = function _AvatarGroup(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$density = _ref.density,
+    density = _ref$density === void 0 ? 'compact' : _ref$density,
     maxCount = _ref.maxCount,
     testID = _ref.testID,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -42,6 +49,7 @@ var _AvatarGroup = function _AvatarGroup(_ref) {
     })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
       role: "group",
       size: size,
+      density: density,
       children: React__default.Children.map(children, function (child, index) {
         if (true) {
           // throw error if child is not an Avatar
@@ -54,18 +62,34 @@ var _AvatarGroup = function _AvatarGroup(_ref) {
         }
         if (maxCount && maxCount <= childrenCount) {
           if (index === maxCount) {
+            var overflowText = "+".concat(String(childrenCount - maxCount));
             return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({}, metaAttribute({
               name: MetaConstants.Avatar,
               testID: testID
             })), {}, {
-              backgroundColor: "surface.background.gray.intense",
+              backgroundColor: "surface.background.gray.subtle",
               size: size,
               variant: "circle",
-              children: /*#__PURE__*/jsx(AvatarButton, {
-                variant: "circle",
-                color: "neutral",
-                size: size,
-                children: "+".concat(String(childrenCount - maxCount))
+              children: /*#__PURE__*/jsx(BaseBox, {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                height: "100%",
+                children: size === 'xlarge' ? /*#__PURE__*/jsx(Heading, {
+                  size: "small",
+                  weight: "semibold",
+                  color: "interactive.text.neutral.muted",
+                  textAlign: "center",
+                  children: overflowText
+                }) : /*#__PURE__*/jsx(Text, {
+                  size: avatarTextSizeMapping[size],
+                  weight: "semibold",
+                  color: "interactive.text.neutral.muted",
+                  textAlign: "center",
+                  children: overflowText
+                })
               })
             }));
           }

package/build/lib/web/development/components/Avatar/AvatarGroup.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.web.js","sources":["../../../../../../src/components/Avatar/AvatarGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarGroupProps, AvatarGroupContextType } from './types';\nimport { StyledAvatarGroup } from './StyledAvatarGroup';\nimport { StyledAvatar } from './StyledAvatar';\nimport { AvatarGroupProvider } 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 { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _AvatarGroup = ({\n  children,\n  size = 'medium',\n  maxCount,\n  testID,\n  ...rest\n}: AvatarGroupProps): React.ReactElement => {\n  const contextValue: AvatarGroupContextType = {\n    size,\n  };\n  const childrenCount = React.Children.count(children);\n\n  return (\n    <AvatarGroupProvider value={contextValue}>\n      <StyledAvatarGroup\n        {...metaAttribute({ name: MetaConstants.AvatarGroup, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        role=\"group\"\n        size={size}\n      >\n        {React.Children.map(children, (child, index) => {\n          if (__DEV__) {\n            // throw error if child is not an Avatar\n            if (!isValidAllowedChildren(child, 'Avatar')) {\n              throwBladeError({\n                moduleName: 'AvatarGroup',\n                message: `Only \"Avatar\" component is allowed as a children.`,\n              });\n            }\n          }\n\n          if (maxCount && maxCount <= childrenCount) {\n            if (index === maxCount) {\n              return (\n                <StyledAvatar\n                  {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n                  backgroundColor=\"surface.background.gray.intense\"\n                  size={size}\n                  variant=\"circle\"\n                >\n                  <AvatarButton variant=\"circle\" color=\"neutral\" size={size}>\n                    {`+${String(childrenCount - maxCount)}`}\n                  </AvatarButton>\n                </StyledAvatar>\n              );\n            }\n\n            if (index > maxCount) {\n              return null;\n            }\n          }\n\n          return child;\n        })}\n      </StyledAvatarGroup>\n    </AvatarGroupProvider>\n  );\n};\n\n/**\n * ### AvatarGroup Component\n * \n * The AvatarGroup component is used to group Avatars together.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n  const App = () => {\n    return (\n      <AvatarGroup>\n        <Avatar name=\"Kamlesh Chandnani\" />\n        <Avatar name=\"Rama Krushna Behera\" />\n        <Avatar name=\"Chaitanya Vikas Deorukhkar\" />\n        <Avatar name=\"Anurag Hazra\" />\n        <Avatar name=\"Nitin Kumar\" />\n      </AvatarGroup>\n    );\n  }\n * ```\n *\n *  ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatargroup AvatarGroup Documentation}\n * \n */\nconst AvatarGroup = assignWithoutSideEffects(_AvatarGroup, {\n  displayName: 'AvatarGroup',\n  componentId: 'AvatarGroup',\n});\n\nexport { AvatarGroup };\nexport type { AvatarGroupProps };\n"],"names":["_AvatarGroup","_ref","children","_ref$size","size","maxCount","testID","rest","_objectWithoutProperties","_excluded","contextValue","childrenCount","React","Children","count","_jsx","AvatarGroupProvider","value","StyledAvatarGroup","_objectSpread","metaAttribute","name","MetaConstants","AvatarGroup","getStyledProps","makeAnalyticsAttribute","role","map","child","index","isValidAllowedChildren","throwBladeError","moduleName","message","StyledAvatar","Avatar","backgroundColor","variant","AvatarButton","color","concat","String","assignWithoutSideEffects","displayName","componentId"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.web.js","sources":["../../../../../../src/components/Avatar/AvatarGroup.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarGroupProps, AvatarGroupContextType } from './types';\nimport { StyledAvatarGroup } from './StyledAvatarGroup';\nimport { StyledAvatar } from './StyledAvatar';\nimport { AvatarGroupProvider } from './AvatarGroupContext';\nimport { avatarTextSizeMapping } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Heading, Text } from '~components/Typography';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _AvatarGroup = ({\n  children,\n  size = 'medium',\n  density = 'compact',\n  maxCount,\n  testID,\n  ...rest\n}: AvatarGroupProps): React.ReactElement => {\n  const contextValue: AvatarGroupContextType = {\n    size,\n  };\n  const childrenCount = React.Children.count(children);\n\n  return (\n    <AvatarGroupProvider value={contextValue}>\n      <StyledAvatarGroup\n        {...metaAttribute({ name: MetaConstants.AvatarGroup, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        role=\"group\"\n        size={size}\n        density={density}\n      >\n        {React.Children.map(children, (child, index) => {\n          if (__DEV__) {\n            // throw error if child is not an Avatar\n            if (!isValidAllowedChildren(child, 'Avatar')) {\n              throwBladeError({\n                moduleName: 'AvatarGroup',\n                message: `Only \"Avatar\" component is allowed as a children.`,\n              });\n            }\n          }\n\n          if (maxCount && maxCount <= childrenCount) {\n            if (index === maxCount) {\n              const overflowText = `+${String(childrenCount - maxCount)}`;\n              return (\n                <StyledAvatar\n                  {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n                  backgroundColor=\"surface.background.gray.subtle\"\n                  size={size}\n                  variant=\"circle\"\n                >\n                  <BaseBox\n                    display=\"flex\"\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    justifyContent=\"center\"\n                    width=\"100%\"\n                    height=\"100%\"\n                  >\n                    {size === 'xlarge' ? (\n                      <Heading\n                        size=\"small\"\n                        weight=\"semibold\"\n                        color=\"interactive.text.neutral.muted\"\n                        textAlign=\"center\"\n                      >\n                        {overflowText}\n                      </Heading>\n                    ) : (\n                      <Text\n                        size={avatarTextSizeMapping[size]}\n                        weight=\"semibold\"\n                        color=\"interactive.text.neutral.muted\"\n                        textAlign=\"center\"\n                      >\n                        {overflowText}\n                      </Text>\n                    )}\n                  </BaseBox>\n                </StyledAvatar>\n              );\n            }\n\n            if (index > maxCount) {\n              return null;\n            }\n          }\n\n          return child;\n        })}\n      </StyledAvatarGroup>\n    </AvatarGroupProvider>\n  );\n};\n\n/**\n * ### AvatarGroup Component\n * \n * The AvatarGroup component is used to group Avatars together.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n  const App = () => {\n    return (\n      <AvatarGroup>\n        <Avatar name=\"Kamlesh Chandnani\" />\n        <Avatar name=\"Rama Krushna Behera\" />\n        <Avatar name=\"Chaitanya Vikas Deorukhkar\" />\n        <Avatar name=\"Anurag Hazra\" />\n        <Avatar name=\"Nitin Kumar\" />\n      </AvatarGroup>\n    );\n  }\n * ```\n *\n *  ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatargroup AvatarGroup Documentation}\n * \n */\nconst AvatarGroup = assignWithoutSideEffects(_AvatarGroup, {\n  displayName: 'AvatarGroup',\n  componentId: 'AvatarGroup',\n});\n\nexport { AvatarGroup };\nexport type { AvatarGroupProps };\n"],"names":["_AvatarGroup","_ref","children","_ref$size","size","_ref$density","density","maxCount","testID","rest","_objectWithoutProperties","_excluded","contextValue","childrenCount","React","Children","count","_jsx","AvatarGroupProvider","value","StyledAvatarGroup","_objectSpread","metaAttribute","name","MetaConstants","AvatarGroup","getStyledProps","makeAnalyticsAttribute","role","map","child","index","isValidAllowedChildren","throwBladeError","moduleName","message","overflowText","concat","String","StyledAvatar","Avatar","backgroundColor","variant","BaseBox","display","flexDirection","alignItems","justifyContent","width","height","Heading","weight","color","textAlign","Text","avatarTextSizeMapping","assignWithoutSideEffects","displayName","componentId"],"mappings":"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"}

package/build/lib/web/development/components/Avatar/StyledAvatarGroup.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
-import { avatarSizeTokens } from './avatarTokens.js';
+import { avatarGroupDensityOverlapTokens } from './avatarTokens.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/index.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -10,12 +10,14 @@ var StyledAvatarGroup = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledAvatarGroup",
   componentId: "sc-1fkrhuq-0"
 })(function (_ref) {
-  var size = _ref.size;
+  var size = _ref.size,
+    density = _ref.density;
+  var overlap = avatarGroupDensityOverlapTokens[density][size];
   return _defineProperty({
     display: 'inline-flex',
     flexDirection: 'row'
   }, "> *:not(:first-child)", {
-    marginLeft: "-".concat(makeSize(avatarSizeTokens[size] / 2)),
+    marginLeft: "-".concat(makeSize(overlap)),
     zIndex: 2
   });
 });

package/build/lib/web/development/components/Avatar/StyledAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledAvatarGroup.js","sources":["../../../../../../src/components/Avatar/StyledAvatarGroup.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { AvatarGroupProps } from './types';\nimport { avatarSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize } from '~utils';\n\nconst StyledAvatarGroup = styled(BaseBox)<{ size: NonNullable<AvatarGroupProps['size']> }>(\n  ({ size }) => {\n    return {\n      display: 'inline-flex',\n      flexDirection: 'row',\n\n      [`> *:not(:first-child)`]: {\n        marginLeft: `-${makeSize(avatarSizeTokens[size] / 2)}`,\n        zIndex: 2,\n      },\n    };\n  },\n);\n\nexport { StyledAvatarGroup };\n"],"names":["StyledAvatarGroup","styled","BaseBox","withConfig","displayName","componentId","_ref","size","_defineProperty","display","flexDirection","marginLeft","concat","makeSize","avatarSizeTokens","zIndex"],"mappings":";;;;;;;;AAMA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACvC,CAAA,CAAA,UAAAC,IAAA,EAAc;AAAA,EAAA,IAAXC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAA;AACL,EAAA,OAAAC,eAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,aAAa;AACtBC,IAAAA,aAAa,EAAE,KAAA;GAEY,EAAA,uBAAA,EAAA;AACzBC,IAAAA,UAAU,EAAAC,GAAAA,CAAAA,MAAA,CAAMC,QAAQ,CAACC,gBAAgB,CAACP,IAAI,CAAC,GAAG,CAAC,CAAC,CAAE;AACtDQ,IAAAA,MAAM,EAAE,CAAA;GACT,CAAA,CAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"StyledAvatarGroup.js","sources":["../../../../../../src/components/Avatar/StyledAvatarGroup.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { AvatarGroupProps } from './types';\nimport { avatarGroupDensityOverlapTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize } from '~utils';\n\nconst StyledAvatarGroup = styled(BaseBox)<{\n  size: NonNullable<AvatarGroupProps['size']>;\n  density: NonNullable<AvatarGroupProps['density']>;\n}>(({ size, density }) => {\n  const overlap = avatarGroupDensityOverlapTokens[density][size];\n\n  return {\n    display: 'inline-flex',\n    flexDirection: 'row',\n\n    [`> *:not(:first-child)`]: {\n      marginLeft: `-${makeSize(overlap)}`,\n      zIndex: 2,\n    },\n  };\n});\n\nexport { StyledAvatarGroup };\n"],"names":["StyledAvatarGroup","styled","BaseBox","withConfig","displayName","componentId","_ref","size","density","overlap","avatarGroupDensityOverlapTokens","_defineProperty","display","flexDirection","marginLeft","concat","makeSize","zIndex"],"mappings":";;;;;;;;AAMA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAGtC,CAAA,CAAA,UAAAC,IAAA,EAAuB;AAAA,EAAA,IAApBC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO,CAAA;EACjB,IAAMC,OAAO,GAAGC,+BAA+B,CAACF,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AAE9D,EAAA,OAAAI,eAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,aAAa;AACtBC,IAAAA,aAAa,EAAE,KAAA;GAEY,EAAA,uBAAA,EAAA;AACzBC,IAAAA,UAAU,MAAAC,MAAA,CAAMC,QAAQ,CAACP,OAAO,CAAC,CAAE;AACnCQ,IAAAA,MAAM,EAAE,CAAA;GACT,CAAA,CAAA;AAEL,CAAC;;;;"}

package/build/lib/web/development/components/Avatar/avatarTokens.js

@@ -110,6 +110,29 @@ var avatarTopAddonOffsets = {
     }
   }
 };
+var avatarGroupDensityOverlapTokens = {
+  compact: {
+    xsmall: size[20] / 2,
+    small: size[28] / 2,
+    medium: size[36] / 2,
+    large: size[48] / 2,
+    xlarge: size[56] / 2
+  },
+  normal: {
+    xsmall: 14,
+    small: 16,
+    medium: 16,
+    large: 16,
+    xlarge: 16
+  },
+  comfortable: {
+    xsmall: 8,
+    small: 8,
+    medium: 8,
+    large: 8,
+    xlarge: 8
+  }
+};
 
-export { avatarBorderRadiusTokens, avatarColorTokens, avatarIconSizeTokens, avatarSizeTokens, avatarTextSizeMapping, avatarToBottomAddonSize, avatarToIndicatorSize, avatarTopAddonOffsets };
+export { avatarBorderRadiusTokens, avatarColorTokens, avatarGroupDensityOverlapTokens, avatarIconSizeTokens, avatarSizeTokens, avatarTextSizeMapping, avatarToBottomAddonSize, avatarToIndicatorSize, avatarTopAddonOffsets };
 //# sourceMappingURL=avatarTokens.js.map

package/build/lib/web/development/components/Avatar/avatarTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatarTokens.js","sources":["../../../../../../src/components/Avatar/avatarTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst avatarSizeTokens = {\n  xsmall: size[20],\n  small: size[28],\n  medium: size[36],\n  large: size[48],\n  xlarge: size[56],\n} as const;\n\nconst avatarIconSizeTokens = {\n  xsmall: 'small',\n  small: 'medium',\n  medium: 'medium',\n  large: 'large',\n  xlarge: 'xlarge',\n} as const;\n\nconst avatarTextSizeMapping = {\n  xsmall: 'xsmall',\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  xlarge: 'medium',\n} as const;\n\nconst avatarColorTokens = {\n  text: {\n    primary: 'interactive.text.primary.normal',\n    positive: 'interactive.text.positive.normal',\n    negative: 'interactive.text.negative.normal',\n    notice: 'interactive.text.notice.normal',\n    information: 'interactive.text.information.normal',\n    neutral: 'interactive.text.neutral.normal',\n  },\n  background: {\n    primary: 'interactive.background.primary.faded',\n    positive: 'interactive.background.positive.faded',\n    negative: 'interactive.background.negative.faded',\n    notice: 'interactive.background.notice.faded',\n    information: 'interactive.background.information.faded',\n    neutral: 'interactive.background.neutral.faded',\n  },\n} as const;\n\nconst avatarBorderRadiusTokens = {\n  circle: 'max',\n  square: {\n    xsmall: 'xsmall',\n    small: 'xsmall',\n    medium: 'small',\n    large: 'small',\n    xlarge: 'medium',\n  },\n} as const;\n\nconst avatarToBottomAddonSize = {\n  xsmall: 'xsmall',\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  xlarge: 'large',\n} as const;\n\nconst avatarToIndicatorSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'medium',\n  large: 'medium',\n  xlarge: 'large',\n} as const;\n\nconst avatarTopAddonOffsets = {\n  circle: {\n    xsmall: {\n      right: '0px',\n      top: '0px',\n    },\n    small: {\n      right: '1px',\n      top: '1px',\n    },\n    medium: {\n      right: '1px',\n      top: '2px',\n    },\n    large: {\n      right: '4px',\n      top: '2px',\n    },\n    xlarge: {\n      right: '4px',\n      top: '2px',\n    },\n  },\n  square: {\n    xsmall: {\n      right: '-2px',\n      top: '-2px',\n    },\n    small: {\n      right: '-2px',\n      top: '-2px',\n    },\n    medium: {\n      right: '-2px',\n      top: '-2px',\n    },\n    large: {\n      right: '-2px',\n      top: '-2px',\n    },\n    xlarge: {\n      right: '-2px',\n      top: '-2px',\n    },\n  },\n} as const;\n\nexport {\n  avatarSizeTokens,\n  avatarIconSizeTokens,\n  avatarTextSizeMapping,\n  avatarColorTokens,\n  avatarBorderRadiusTokens,\n  avatarToBottomAddonSize,\n  avatarToIndicatorSize,\n  avatarTopAddonOffsets,\n};\n"],"names":["avatarSizeTokens","xsmall","size","small","medium","large","xlarge","avatarIconSizeTokens","avatarTextSizeMapping","avatarColorTokens","text","primary","positive","negative","notice","information","neutral","background","avatarBorderRadiusTokens","circle","square","avatarToBottomAddonSize","avatarToIndicatorSize","avatarTopAddonOffsets","right","top"],"mappings":"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"}
+{"version":3,"file":"avatarTokens.js","sources":["../../../../../../src/components/Avatar/avatarTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst avatarSizeTokens = {\n  xsmall: size[20],\n  small: size[28],\n  medium: size[36],\n  large: size[48],\n  xlarge: size[56],\n} as const;\n\nconst avatarIconSizeTokens = {\n  xsmall: 'small',\n  small: 'medium',\n  medium: 'medium',\n  large: 'large',\n  xlarge: 'xlarge',\n} as const;\n\nconst avatarTextSizeMapping = {\n  xsmall: 'xsmall',\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  xlarge: 'medium',\n} as const;\n\nconst avatarColorTokens = {\n  text: {\n    primary: 'interactive.text.primary.normal',\n    positive: 'interactive.text.positive.normal',\n    negative: 'interactive.text.negative.normal',\n    notice: 'interactive.text.notice.normal',\n    information: 'interactive.text.information.normal',\n    neutral: 'interactive.text.neutral.normal',\n  },\n  background: {\n    primary: 'interactive.background.primary.faded',\n    positive: 'interactive.background.positive.faded',\n    negative: 'interactive.background.negative.faded',\n    notice: 'interactive.background.notice.faded',\n    information: 'interactive.background.information.faded',\n    neutral: 'interactive.background.neutral.faded',\n  },\n} as const;\n\nconst avatarBorderRadiusTokens = {\n  circle: 'max',\n  square: {\n    xsmall: 'xsmall',\n    small: 'xsmall',\n    medium: 'small',\n    large: 'small',\n    xlarge: 'medium',\n  },\n} as const;\n\nconst avatarToBottomAddonSize = {\n  xsmall: 'xsmall',\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  xlarge: 'large',\n} as const;\n\nconst avatarToIndicatorSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'medium',\n  large: 'medium',\n  xlarge: 'large',\n} as const;\n\nconst avatarTopAddonOffsets = {\n  circle: {\n    xsmall: {\n      right: '0px',\n      top: '0px',\n    },\n    small: {\n      right: '1px',\n      top: '1px',\n    },\n    medium: {\n      right: '1px',\n      top: '2px',\n    },\n    large: {\n      right: '4px',\n      top: '2px',\n    },\n    xlarge: {\n      right: '4px',\n      top: '2px',\n    },\n  },\n  square: {\n    xsmall: {\n      right: '-2px',\n      top: '-2px',\n    },\n    small: {\n      right: '-2px',\n      top: '-2px',\n    },\n    medium: {\n      right: '-2px',\n      top: '-2px',\n    },\n    large: {\n      right: '-2px',\n      top: '-2px',\n    },\n    xlarge: {\n      right: '-2px',\n      top: '-2px',\n    },\n  },\n} as const;\n\nconst avatarGroupDensityOverlapTokens = {\n  compact: {\n    xsmall: size[20] / 2,\n    small: size[28] / 2,\n    medium: size[36] / 2,\n    large: size[48] / 2,\n    xlarge: size[56] / 2,\n  },\n  normal: {\n    xsmall: 14,\n    small: 16,\n    medium: 16,\n    large: 16,\n    xlarge: 16,\n  },\n  comfortable: {\n    xsmall: 8,\n    small: 8,\n    medium: 8,\n    large: 8,\n    xlarge: 8,\n  },\n} as const;\n\nexport {\n  avatarSizeTokens,\n  avatarIconSizeTokens,\n  avatarTextSizeMapping,\n  avatarColorTokens,\n  avatarBorderRadiusTokens,\n  avatarToBottomAddonSize,\n  avatarToIndicatorSize,\n  avatarTopAddonOffsets,\n  avatarGroupDensityOverlapTokens,\n};\n"],"names":["avatarSizeTokens","xsmall","size","small","medium","large","xlarge","avatarIconSizeTokens","avatarTextSizeMapping","avatarColorTokens","text","primary","positive","negative","notice","information","neutral","background","avatarBorderRadiusTokens","circle","square","avatarToBottomAddonSize","avatarToIndicatorSize","avatarTopAddonOffsets","right","top","avatarGroupDensityOverlapTokens","compact","normal","comfortable"],"mappings":"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"}

package/build/lib/web/development/components/Badge/Badge.js

@@ -12,9 +12,11 @@ import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/index.js';
 import '../../utils/logger/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/useTruncationTitle/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
+import { useTruncationTitle } from '../../utils/useTruncationTitle/useTruncationTitle.web.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
@@ -76,6 +78,11 @@ var _Badge = function _Badge(_ref2, ref) {
     backgroundColor = _getColorProps.backgroundColor,
     iconColor = _getColorProps.iconColor,
     textColor = _getColorProps.textColor;
+  var _useTruncationTitle = useTruncationTitle({
+      content: childrenString
+    }),
+    containerRef = _useTruncationTitle.containerRef,
+    textRef = _useTruncationTitle.textRef;
   var badgeTextSizes = {
     xsmall: {
       variant: 'body',
@@ -107,6 +114,7 @@ var _Badge = function _Badge(_ref2, ref) {
       size: size,
       textAlign: 'left',
       children: /*#__PURE__*/jsxs(BaseBox, {
+        ref: containerRef,
         paddingX: horizontalPadding[size],
         display: "flex",
         flexDirection: "row",
@@ -119,7 +127,9 @@ var _Badge = function _Badge(_ref2, ref) {
             color: iconColor,
             size: iconSize[size]
           })
-        }) : null, /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, badgeTextSizes[size]), {}, {
+        }) : null, /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
+          ref: textRef
+        }, badgeTextSizes[size]), {}, {
           weight: emphasis === 'intense' ? 'regular' : 'medium',
           truncateAfterLines: 1,
           color: textColor,

package/build/lib/web/development/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport type { StyledBadgeProps } from './types';\nimport { StyledBadge } from './StyledBadge';\nimport { textHorizontalMargin, iconSize, horizontalPadding, badgeHeight } from './badgeTokens';\nimport type { IconComponent, IconProps } from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type {\n  DataAnalyticsAttribute,\n  BladeElementRef,\n  StringChildrenType,\n  TestID,\n} from '~utils/types';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { isReactNative, makeSize } from '~utils';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype BadgeProps = {\n  /**\n   * Sets the label for the badge.\n   *\n   */\n  children: StringChildrenType;\n  /**\n   * Sets the color of the badge.\n   *\n   * @default 'neutral'\n   */\n  color?: FeedbackColors | 'primary';\n  /**\n   * Sets the contrast of the badge.\n   *\n   * @default 'subtle'\n   */\n  emphasis?: SubtleOrIntense;\n  /**\n   * Sets the size of the badge.\n   *\n   * @default 'medium'\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  /**\n   * Icon to be displayed in the badge.\n   * Accepts a component of type `IconComponent` from Blade.\n   *\n   */\n  icon?: IconComponent;\n} & TestID &\n  StyledPropsBlade &\n  DataAnalyticsAttribute;\n\ntype ColorProps = {\n  iconColor: IconProps['color'];\n  textColor: BaseTextProps['color'];\n  backgroundColor: StyledBadgeProps['backgroundColor'];\n};\n\nconst getColorProps = ({\n  color,\n  emphasis,\n}: {\n  color: NonNullable<BadgeProps['color']>;\n  emphasis: NonNullable<BadgeProps['emphasis']>;\n}): ColorProps => {\n  const props: ColorProps = {\n    iconColor: 'feedback.icon.neutral.intense',\n    textColor: 'feedback.text.neutral.intense',\n    backgroundColor: 'feedback.background.neutral.subtle',\n  };\n\n  if (color === 'primary') {\n    // primary color badge\n    props.textColor =\n      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `surface.text.primary.normal`;\n    props.iconColor =\n      emphasis === 'intense' ? `surface.icon.staticWhite.normal` : `surface.icon.primary.normal`;\n    props.backgroundColor = `surface.background.primary.${emphasis}`;\n  } else {\n    // feedback colors badge\n    props.textColor =\n      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `feedback.text.${color}.intense`;\n    props.iconColor =\n      emphasis === 'intense' ? `surface.icon.staticWhite.normal` : `feedback.icon.${color}.intense`;\n    props.backgroundColor = `feedback.background.${color}.${emphasis}`;\n  }\n\n  return props;\n};\n\nconst _Badge = (\n  {\n    children,\n    emphasis = 'subtle',\n    icon: Icon,\n    size = 'medium',\n    color = 'neutral',\n    testID,\n    ...props\n  }: BadgeProps,\n  ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n  const childrenString = getStringFromReactText(children);\n  if (__DEV__) {\n    if (!childrenString?.trim()) {\n      throwBladeError({\n        message: 'Text as children is required for Badge.',\n        moduleName: 'Badge',\n      });\n    }\n  }\n\n  const { backgroundColor, iconColor, textColor } = getColorProps({\n    color,\n    emphasis,\n  });\n\n  const badgeTextSizes = {\n    xsmall: {\n      variant: 'body',\n      size: 'xsmall',\n    },\n    small: {\n      variant: 'body',\n      size: 'xsmall',\n    },\n    medium: {\n      variant: 'body',\n      size: 'small',\n    },\n    large: {\n      variant: 'body',\n      size: 'small',\n    },\n  } as const;\n\n  return (\n    <BaseBox\n      ref={ref as never}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...metaAttribute({ name: MetaConstants.Badge, testID })}\n      {...getStyledProps(props)}\n      {...makeAnalyticsAttribute(props)}\n    >\n      <StyledBadge\n        height={makeSize(badgeHeight[size])}\n        backgroundColor={backgroundColor}\n        size={size}\n        textAlign={'left' as never}\n      >\n        <BaseBox\n          paddingX={horizontalPadding[size]}\n          display=\"flex\"\n          flexDirection=\"row\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          overflow=\"hidden\"\n        >\n          {Icon ? (\n            <BaseBox display=\"flex\">\n              <Icon color={iconColor} size={iconSize[size]} />\n            </BaseBox>\n          ) : null}\n          <Text\n            {...badgeTextSizes[size]}\n            weight={emphasis === 'intense' ? 'regular' : 'medium'}\n            truncateAfterLines={1}\n            color={textColor}\n            marginX={textHorizontalMargin[size]}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </StyledBadge>\n    </BaseBox>\n  );\n};\n\nconst Badge = assignWithoutSideEffects(React.forwardRef(_Badge), {\n  displayName: 'Badge',\n  componentId: 'Badge',\n});\n\nexport type { BadgeProps };\nexport { Badge };\n"],"names":["getColorProps","_ref","color","emphasis","props","iconColor","textColor","backgroundColor","concat","_Badge","_ref2","ref","children","_ref2$emphasis","Icon","icon","_ref2$size","size","_ref2$color","testID","_objectWithoutProperties","_excluded","childrenString","getStringFromReactText","trim","throwBladeError","message","moduleName","_getColorProps","badgeTextSizes","xsmall","variant","small","medium","large","_jsx","BaseBox","_objectSpread","display","isReactNative","metaAttribute","name","MetaConstants","Badge","getStyledProps","makeAnalyticsAttribute","StyledBadge","height","makeSize","badgeHeight","textAlign","_jsxs","paddingX","horizontalPadding","flexDirection","justifyContent","alignItems","overflow","iconSize","Text","weight","truncateAfterLines","marginX","textHorizontalMargin","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport type { StyledBadgeProps } from './types';\nimport { StyledBadge } from './StyledBadge';\nimport { textHorizontalMargin, iconSize, horizontalPadding, badgeHeight } from './badgeTokens';\nimport type { IconComponent, IconProps } from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type {\n  DataAnalyticsAttribute,\n  BladeElementRef,\n  StringChildrenType,\n  TestID,\n} from '~utils/types';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { isReactNative, makeSize } from '~utils';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\n\ntype BadgeProps = {\n  /**\n   * Sets the label for the badge.\n   *\n   */\n  children: StringChildrenType;\n  /**\n   * Sets the color of the badge.\n   *\n   * @default 'neutral'\n   */\n  color?: FeedbackColors | 'primary';\n  /**\n   * Sets the contrast of the badge.\n   *\n   * @default 'subtle'\n   */\n  emphasis?: SubtleOrIntense;\n  /**\n   * Sets the size of the badge.\n   *\n   * @default 'medium'\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  /**\n   * Icon to be displayed in the badge.\n   * Accepts a component of type `IconComponent` from Blade.\n   *\n   */\n  icon?: IconComponent;\n} & TestID &\n  StyledPropsBlade &\n  DataAnalyticsAttribute;\n\ntype ColorProps = {\n  iconColor: IconProps['color'];\n  textColor: BaseTextProps['color'];\n  backgroundColor: StyledBadgeProps['backgroundColor'];\n};\n\nconst getColorProps = ({\n  color,\n  emphasis,\n}: {\n  color: NonNullable<BadgeProps['color']>;\n  emphasis: NonNullable<BadgeProps['emphasis']>;\n}): ColorProps => {\n  const props: ColorProps = {\n    iconColor: 'feedback.icon.neutral.intense',\n    textColor: 'feedback.text.neutral.intense',\n    backgroundColor: 'feedback.background.neutral.subtle',\n  };\n\n  if (color === 'primary') {\n    // primary color badge\n    props.textColor =\n      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `surface.text.primary.normal`;\n    props.iconColor =\n      emphasis === 'intense' ? `surface.icon.staticWhite.normal` : `surface.icon.primary.normal`;\n    props.backgroundColor = `surface.background.primary.${emphasis}`;\n  } else {\n    // feedback colors badge\n    props.textColor =\n      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `feedback.text.${color}.intense`;\n    props.iconColor =\n      emphasis === 'intense' ? `surface.icon.staticWhite.normal` : `feedback.icon.${color}.intense`;\n    props.backgroundColor = `feedback.background.${color}.${emphasis}`;\n  }\n\n  return props;\n};\n\nconst _Badge = (\n  {\n    children,\n    emphasis = 'subtle',\n    icon: Icon,\n    size = 'medium',\n    color = 'neutral',\n    testID,\n    ...props\n  }: BadgeProps,\n  ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n  const childrenString = getStringFromReactText(children);\n  if (__DEV__) {\n    if (!childrenString?.trim()) {\n      throwBladeError({\n        message: 'Text as children is required for Badge.',\n        moduleName: 'Badge',\n      });\n    }\n  }\n\n  const { backgroundColor, iconColor, textColor } = getColorProps({\n    color,\n    emphasis,\n  });\n\n  const { containerRef, textRef } = useTruncationTitle({\n    content: childrenString,\n  });\n\n  const badgeTextSizes = {\n    xsmall: {\n      variant: 'body',\n      size: 'xsmall',\n    },\n    small: {\n      variant: 'body',\n      size: 'xsmall',\n    },\n    medium: {\n      variant: 'body',\n      size: 'small',\n    },\n    large: {\n      variant: 'body',\n      size: 'small',\n    },\n  } as const;\n\n  return (\n    <BaseBox\n      ref={ref as never}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...metaAttribute({ name: MetaConstants.Badge, testID })}\n      {...getStyledProps(props)}\n      {...makeAnalyticsAttribute(props)}\n    >\n      <StyledBadge\n        height={makeSize(badgeHeight[size])}\n        backgroundColor={backgroundColor}\n        size={size}\n        textAlign={'left' as never}\n      >\n        <BaseBox\n          ref={containerRef as never}\n          paddingX={horizontalPadding[size]}\n          display=\"flex\"\n          flexDirection=\"row\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          overflow=\"hidden\"\n        >\n          {Icon ? (\n            <BaseBox display=\"flex\">\n              <Icon color={iconColor} size={iconSize[size]} />\n            </BaseBox>\n          ) : null}\n          <Text\n            ref={textRef as never}\n            {...badgeTextSizes[size]}\n            weight={emphasis === 'intense' ? 'regular' : 'medium'}\n            truncateAfterLines={1}\n            color={textColor}\n            marginX={textHorizontalMargin[size]}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </StyledBadge>\n    </BaseBox>\n  );\n};\n\nconst Badge = assignWithoutSideEffects(React.forwardRef(_Badge), {\n  displayName: 'Badge',\n  componentId: 'Badge',\n});\n\nexport type { BadgeProps };\nexport { Badge };\n"],"names":["getColorProps","_ref","color","emphasis","props","iconColor","textColor","backgroundColor","concat","_Badge","_ref2","ref","children","_ref2$emphasis","Icon","icon","_ref2$size","size","_ref2$color","testID","_objectWithoutProperties","_excluded","childrenString","getStringFromReactText","trim","throwBladeError","message","moduleName","_getColorProps","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","badgeTextSizes","xsmall","variant","small","medium","large","_jsx","BaseBox","_objectSpread","display","isReactNative","metaAttribute","name","MetaConstants","Badge","getStyledProps","makeAnalyticsAttribute","StyledBadge","height","makeSize","badgeHeight","textAlign","_jsxs","paddingX","horizontalPadding","flexDirection","justifyContent","alignItems","overflow","iconSize","Text","weight","truncateAfterLines","marginX","textHorizontalMargin","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/development/components/BaseHeaderFooter/BaseFooter.js

@@ -6,11 +6,13 @@ import '../Box/BaseBox/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/index.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 var _excluded = ["children", "showDivider", "metaComponentName", "padding", "testID"];
@@ -33,6 +35,7 @@ var _BaseFooter = function _BaseFooter(_ref) {
         base: 'spacing.5',
         m: 'spacing.6'
       },
+      width: getPlatformType() === 'react-native' ? '100%' : undefined,
       children: children
     }))]
   });

package/build/lib/web/development/components/BaseHeaderFooter/BaseFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseFooter.js","sources":["../../../../../../src/components/BaseHeaderFooter/BaseFooter.tsx"],"sourcesContent":["import React from 'react';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport type { BoxProps } from '~components/Box';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype BaseFooterProps = {\n  children: React.ReactNode;\n  metaComponentName?: string;\n  showDivider?: boolean;\n  padding?: BoxProps['padding'];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _BaseFooter = ({\n  children,\n  showDivider = true,\n  metaComponentName,\n  padding,\n  testID,\n  ...rest\n}: BaseFooterProps): React.ReactElement => {\n  return (\n    <>\n      {showDivider && <Divider />}\n      <BaseBox\n        {...metaAttribute({ name: metaComponentName, testID })}\n        {...makeAnalyticsAttribute(rest)}\n        padding={padding ?? { base: 'spacing.5', m: 'spacing.6' }}\n      >\n        {children}\n      </BaseBox>\n    </>\n  );\n};\n\nconst BaseFooter = assignWithoutSideEffects(_BaseFooter, {\n  componentId: 'BaseFooter',\n});\n\nexport type { BaseFooterProps };\nexport { BaseFooter };\n"],"names":["_BaseFooter","_ref","children","_ref$showDivider","showDivider","metaComponentName","padding","testID","rest","_objectWithoutProperties","_excluded","_jsxs","_Fragment","_jsx","Divider","BaseBox","_objectSpread","metaAttribute","name","makeAnalyticsAttribute","base","m","BaseFooter","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,gBAAA,GAAAF,IAAA,CACRG,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,iBAAiB,GAAAJ,IAAA,CAAjBI,iBAAiB;IACjBC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,MAAM,GAAAN,IAAA,CAANM,MAAM;AACHC,IAAAA,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;EAEP,oBACEC,IAAA,CAAAC,QAAA,EAAA;IAAAV,QAAA,EAAA,CACGE,WAAW,iBAAIS,GAAA,CAACC,OAAO,EAAA,EAAE,CAAC,eAC3BD,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACFC,aAAa,CAAC;AAAEC,MAAAA,IAAI,EAAEb,iBAAiB;AAAEE,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,EAClDY,sBAAsB,CAACX,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCF,MAAAA,OAAO,EAAEA,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAPA,OAAO,GAAI;AAAEc,QAAAA,IAAI,EAAE,WAAW;AAAEC,QAAAA,CAAC,EAAE,WAAA;OAAc;AAAAnB,MAAAA,QAAA,EAEzDA,QAAAA;AAAQ,KAAA,CACF,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEP,CAAC,CAAA;AAED,IAAMoB,UAAU,gBAAGC,wBAAwB,CAACvB,WAAW,EAAE;AACvDwB,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}
+{"version":3,"file":"BaseFooter.js","sources":["../../../../../../src/components/BaseHeaderFooter/BaseFooter.tsx"],"sourcesContent":["import React from 'react';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport type { BoxProps } from '~components/Box';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { getPlatformType } from '~utils';\n\ntype BaseFooterProps = {\n  children: React.ReactNode;\n  metaComponentName?: string;\n  showDivider?: boolean;\n  padding?: BoxProps['padding'];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _BaseFooter = ({\n  children,\n  showDivider = true,\n  metaComponentName,\n  padding,\n  testID,\n  ...rest\n}: BaseFooterProps): React.ReactElement => {\n  return (\n    <>\n      {showDivider && <Divider />}\n      <BaseBox\n        {...metaAttribute({ name: metaComponentName, testID })}\n        {...makeAnalyticsAttribute(rest)}\n        padding={padding ?? { base: 'spacing.5', m: 'spacing.6' }}\n        width={getPlatformType() === 'react-native' ? '100%' : undefined}\n      >\n        {children}\n      </BaseBox>\n    </>\n  );\n};\n\nconst BaseFooter = assignWithoutSideEffects(_BaseFooter, {\n  componentId: 'BaseFooter',\n});\n\nexport type { BaseFooterProps };\nexport { BaseFooter };\n"],"names":["_BaseFooter","_ref","children","_ref$showDivider","showDivider","metaComponentName","padding","testID","rest","_objectWithoutProperties","_excluded","_jsxs","_Fragment","_jsx","Divider","BaseBox","_objectSpread","metaAttribute","name","makeAnalyticsAttribute","base","m","width","getPlatformType","undefined","BaseFooter","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,gBAAA,GAAAF,IAAA,CACRG,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,iBAAiB,GAAAJ,IAAA,CAAjBI,iBAAiB;IACjBC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,MAAM,GAAAN,IAAA,CAANM,MAAM;AACHC,IAAAA,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;EAEP,oBACEC,IAAA,CAAAC,QAAA,EAAA;IAAAV,QAAA,EAAA,CACGE,WAAW,iBAAIS,GAAA,CAACC,OAAO,EAAA,EAAE,CAAC,eAC3BD,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACFC,aAAa,CAAC;AAAEC,MAAAA,IAAI,EAAEb,iBAAiB;AAAEE,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,EAClDY,sBAAsB,CAACX,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCF,MAAAA,OAAO,EAAEA,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAPA,OAAO,GAAI;AAAEc,QAAAA,IAAI,EAAE,WAAW;AAAEC,QAAAA,CAAC,EAAE,WAAA;OAAc;MAC1DC,KAAK,EAAEC,eAAe,EAAE,KAAK,cAAc,GAAG,MAAM,GAAGC,SAAU;AAAAtB,MAAAA,QAAA,EAEhEA,QAAAA;AAAQ,KAAA,CACF,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEP,CAAC,CAAA;AAED,IAAMuB,UAAU,gBAAGC,wBAAwB,CAAC1B,WAAW,EAAE;AACvD2B,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js

@@ -85,6 +85,7 @@ var _BaseMenuItem = function _BaseMenuItem(_ref, ref) {
     }, props), {}, {
       children: children ? children : /*#__PURE__*/jsxs(Box, {
         display: "flex",
+        flexDirection: "row",
         alignItems: "flex-start",
         width: "100%",
         justifyContent: "flex-start",

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { itemFirstRowHeight } from './tokens';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\nimport { makeSize } from '~utils';\n\nconst menuItemTitleColor = {\n  negative: {\n    default: 'feedback.text.negative.intense',\n    disabled: 'interactive.text.gray.disabled',\n  },\n  normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n  default: 'interactive.text.gray.muted',\n  disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n  {\n    title,\n    description,\n    as,\n    leading,\n    trailing,\n    titleSuffix,\n    isDisabled,\n    selectionType = 'single',\n    isSelected,\n    isVisible = true,\n    color,\n    role = 'menuitem',\n    children,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { containerRef, textRef } = useTruncationTitle({ content: title });\n  return (\n    <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n      <StyledMenuItemContainer\n        ref={ref as never}\n        as={as}\n        type=\"button\"\n        disabled={isDisabled}\n        {...makeAccessible({\n          role,\n          current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n          disabled: isDisabled,\n          selected: isSelected,\n        })}\n        color={color}\n        isVisible={isVisible}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        selectionType={selectionType}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <Box display=\"flex\" alignItems=\"flex-start\" width=\"100%\" justifyContent=\"flex-start\">\n            <Box\n              display=\"flex\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              height={makeSize(itemFirstRowHeight)}\n            >\n              {leading}\n            </Box>\n            <Box\n              paddingLeft={leading ? 'spacing.3' : 'spacing.0'}\n              paddingRight=\"spacing.3\"\n              display=\"flex\"\n              flexDirection=\"column\"\n            >\n              <Box\n                display=\"flex\"\n                alignItems=\"center\"\n                flexDirection=\"row\"\n                height={makeSize(itemFirstRowHeight)}\n                ref={containerRef as never}\n              >\n                <BaseText\n                  as=\"p\"\n                  ref={textRef as never}\n                  truncateAfterLines={1}\n                  wordBreak=\"break-all\"\n                  {...getTextProps({\n                    size: 'medium',\n                    color:\n                      menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][\n                        isDisabled ? 'disabled' : 'default'\n                      ],\n                    weight: 'regular',\n                  })}\n                >\n                  {title}\n                </BaseText>\n                {titleSuffix}\n              </Box>\n              <Box>\n                {description ? (\n                  <Text\n                    color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}\n                    size=\"small\"\n                  >\n                    {description}\n                  </Text>\n                ) : null}\n              </Box>\n            </Box>\n            <Box marginLeft=\"auto\">{trailing}</Box>\n          </Box>\n        )}\n      </StyledMenuItemContainer>\n    </BaseMenuItemContext.Provider>\n  );\n};\n\nconst BaseMenuItem = React.forwardRef(_BaseMenuItem);\n\nexport { BaseMenuItem };\n"],"names":["menuItemTitleColor","negative","disabled","normal","menuItemDescriptionColor","_BaseMenuItem","_ref","ref","title","description","as","leading","trailing","titleSuffix","isDisabled","_ref$selectionType","selectionType","isSelected","_ref$isVisible","isVisible","color","_ref$role","role","children","props","_objectWithoutProperties","_excluded","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","_jsx","BaseMenuItemContext","Provider","value","StyledMenuItemContainer","_objectSpread","type","makeAccessible","current","undefined","selected","_jsxs","Box","display","alignItems","width","justifyContent","height","makeSize","itemFirstRowHeight","paddingLeft","paddingRight","flexDirection","BaseText","truncateAfterLines","wordBreak","getTextProps","size","weight","Text","marginLeft","BaseMenuItem","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { itemFirstRowHeight } from './tokens';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\nimport { makeSize } from '~utils';\n\nconst menuItemTitleColor = {\n  negative: {\n    default: 'feedback.text.negative.intense',\n    disabled: 'interactive.text.gray.disabled',\n  },\n  normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n  default: 'interactive.text.gray.muted',\n  disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n  {\n    title,\n    description,\n    as,\n    leading,\n    trailing,\n    titleSuffix,\n    isDisabled,\n    selectionType = 'single',\n    isSelected,\n    isVisible = true,\n    color,\n    role = 'menuitem',\n    children,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { containerRef, textRef } = useTruncationTitle({ content: title });\n  return (\n    <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n      <StyledMenuItemContainer\n        ref={ref as never}\n        as={as}\n        type=\"button\"\n        disabled={isDisabled}\n        {...makeAccessible({\n          role,\n          current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n          disabled: isDisabled,\n          selected: isSelected,\n        })}\n        color={color}\n        isVisible={isVisible}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        selectionType={selectionType}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"flex-start\"\n            width=\"100%\"\n            justifyContent=\"flex-start\"\n          >\n            <Box\n              display=\"flex\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              height={makeSize(itemFirstRowHeight)}\n            >\n              {leading}\n            </Box>\n            <Box\n              paddingLeft={leading ? 'spacing.3' : 'spacing.0'}\n              paddingRight=\"spacing.3\"\n              display=\"flex\"\n              flexDirection=\"column\"\n            >\n              <Box\n                display=\"flex\"\n                alignItems=\"center\"\n                flexDirection=\"row\"\n                height={makeSize(itemFirstRowHeight)}\n                ref={containerRef as never}\n              >\n                <BaseText\n                  as=\"p\"\n                  ref={textRef as never}\n                  truncateAfterLines={1}\n                  wordBreak=\"break-all\"\n                  {...getTextProps({\n                    size: 'medium',\n                    color:\n                      menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][\n                        isDisabled ? 'disabled' : 'default'\n                      ],\n                    weight: 'regular',\n                  })}\n                >\n                  {title}\n                </BaseText>\n                {titleSuffix}\n              </Box>\n              <Box>\n                {description ? (\n                  <Text\n                    color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}\n                    size=\"small\"\n                  >\n                    {description}\n                  </Text>\n                ) : null}\n              </Box>\n            </Box>\n            <Box marginLeft=\"auto\">{trailing}</Box>\n          </Box>\n        )}\n      </StyledMenuItemContainer>\n    </BaseMenuItemContext.Provider>\n  );\n};\n\nconst BaseMenuItem = React.forwardRef(_BaseMenuItem);\n\nexport { BaseMenuItem };\n"],"names":["menuItemTitleColor","negative","disabled","normal","menuItemDescriptionColor","_BaseMenuItem","_ref","ref","title","description","as","leading","trailing","titleSuffix","isDisabled","_ref$selectionType","selectionType","isSelected","_ref$isVisible","isVisible","color","_ref$role","role","children","props","_objectWithoutProperties","_excluded","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","_jsx","BaseMenuItemContext","Provider","value","StyledMenuItemContainer","_objectSpread","type","makeAccessible","current","undefined","selected","_jsxs","Box","display","flexDirection","alignItems","width","justifyContent","height","makeSize","itemFirstRowHeight","paddingLeft","paddingRight","BaseText","truncateAfterLines","wordBreak","getTextProps","size","weight","Text","marginLeft","BaseMenuItem","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,kBAAkB,GAAG;AACzBC,EAAAA,QAAQ,EAAE;AACR,IAAA,SAAA,EAAS,gCAAgC;AACzCC,IAAAA,QAAQ,EAAE,gCAAA;GACX;AACDC,EAAAA,MAAM,EAAE;AAAE,IAAA,SAAA,EAAS,8BAA8B;AAAED,IAAAA,QAAQ,EAAE,gCAAA;AAAiC,GAAA;AAChG,CAAU,CAAA;AAEV,IAAME,wBAAwB,GAAG;AAC/B,EAAA,SAAA,EAAS,6BAA6B;AACtCF,EAAAA,QAAQ,EAAE,gCAAA;AACZ,CAAU,CAAA;;AAEV;;AAEA,IAAMG,aAAiF,GAAG,SAApFA,aAAiFA,CAAAC,IAAA,EAiBrFC,GAAG,EACoB;AAAA,EAAA,IAhBrBC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IACFC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,WAAW,GAAAP,IAAA,CAAXO,WAAW;IACXC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IAAAC,kBAAA,GAAAT,IAAA,CACVU,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,kBAAA;IACxBE,UAAU,GAAAX,IAAA,CAAVW,UAAU;IAAAC,cAAA,GAAAZ,IAAA,CACVa,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,cAAA;IAChBE,KAAK,GAAAd,IAAA,CAALc,KAAK;IAAAC,SAAA,GAAAf,IAAA,CACLgB,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,SAAA;IACjBE,QAAQ,GAAAjB,IAAA,CAARiB,QAAQ;AACLC,IAAAA,KAAK,GAAAC,wBAAA,CAAAnB,IAAA,EAAAoB,SAAA,CAAA,CAAA;EAIV,IAAAC,mBAAA,GAAkCC,kBAAkB,CAAC;AAAEC,MAAAA,OAAO,EAAErB,KAAAA;AAAM,KAAC,CAAC;IAAhEsB,YAAY,GAAAH,mBAAA,CAAZG,YAAY;IAAEC,OAAO,GAAAJ,mBAAA,CAAPI,OAAO,CAAA;AAC7B,EAAA,oBACEC,GAAA,CAACC,mBAAmB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEf,MAAAA,KAAK,EAALA,KAAK;AAAEN,MAAAA,UAAU,EAAVA,UAAAA;KAAa;IAAAS,QAAA,eACzDS,GAAA,CAACI,uBAAuB,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACtB9B,MAAAA,GAAG,EAAEA,GAAa;AAClBG,MAAAA,EAAE,EAAEA,EAAG;AACP4B,MAAAA,IAAI,EAAC,QAAQ;AACbpC,MAAAA,QAAQ,EAAEY,UAAAA;AAAW,KAAA,EACjByB,cAAc,CAAC;AACjBjB,MAAAA,IAAI,EAAJA,IAAI;MACJkB,OAAO,EAAElB,IAAI,KAAK,UAAU,IAAIA,IAAI,KAAK,kBAAkB,GAAGL,UAAU,GAAGwB,SAAS;AACpFvC,MAAAA,QAAQ,EAAEY,UAAU;AACpB4B,MAAAA,QAAQ,EAAEzB,UAAAA;AACZ,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACFG,MAAAA,KAAK,EAAEA,KAAM;AACbD,MAAAA,SAAS,EAAEA,SAAU;AACrBF,MAAAA,UAAU,EAAEA,UAAW;AACvBH,MAAAA,UAAU,EAAEA,UAAW;AACvBE,MAAAA,aAAa,EAAEA,aAAAA;AAAc,KAAA,EACzBQ,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAD,MAAAA,QAAA,EAERA,QAAQ,GACPA,QAAQ,gBAERoB,IAAA,CAACC,GAAG,EAAA;AACFC,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,aAAa,EAAC,KAAK;AACnBC,QAAAA,UAAU,EAAC,YAAY;AACvBC,QAAAA,KAAK,EAAC,MAAM;AACZC,QAAAA,cAAc,EAAC,YAAY;QAAA1B,QAAA,EAAA,cAE3BS,GAAA,CAACY,GAAG,EAAA;AACFC,UAAAA,OAAO,EAAC,MAAM;AACdI,UAAAA,cAAc,EAAC,QAAQ;AACvBF,UAAAA,UAAU,EAAC,QAAQ;AACnBG,UAAAA,MAAM,EAAEC,QAAQ,CAACC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAEpCZ,OAAAA;AAAO,SACL,CAAC,eACNgC,IAAA,CAACC,GAAG,EAAA;AACFS,UAAAA,WAAW,EAAE1C,OAAO,GAAG,WAAW,GAAG,WAAY;AACjD2C,UAAAA,YAAY,EAAC,WAAW;AACxBT,UAAAA,OAAO,EAAC,MAAM;AACdC,UAAAA,aAAa,EAAC,QAAQ;UAAAvB,QAAA,EAAA,cAEtBoB,IAAA,CAACC,GAAG,EAAA;AACFC,YAAAA,OAAO,EAAC,MAAM;AACdE,YAAAA,UAAU,EAAC,QAAQ;AACnBD,YAAAA,aAAa,EAAC,KAAK;AACnBI,YAAAA,MAAM,EAAEC,QAAQ,CAACC,kBAAkB,CAAE;AACrC7C,YAAAA,GAAG,EAAEuB,YAAsB;AAAAP,YAAAA,QAAA,gBAE3BS,GAAA,CAACuB,QAAQ,EAAAlB,aAAA,CAAAA,aAAA,CAAA;AACP3B,cAAAA,EAAE,EAAC,GAAG;AACNH,cAAAA,GAAG,EAAEwB,OAAiB;AACtByB,cAAAA,kBAAkB,EAAE,CAAE;AACtBC,cAAAA,SAAS,EAAC,WAAA;AAAW,aAAA,EACjBC,YAAY,CAAC;AACfC,cAAAA,IAAI,EAAE,QAAQ;AACdvC,cAAAA,KAAK,EACHpB,kBAAkB,CAACoB,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAC9DN,UAAU,GAAG,UAAU,GAAG,SAAS,CACpC;AACH8C,cAAAA,MAAM,EAAE,SAAA;AACV,aAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAArC,cAAAA,QAAA,EAEDf,KAAAA;aACO,CAAA,CAAC,EACVK,WAAW,CAAA;AAAA,WACT,CAAC,eACNmB,GAAA,CAACY,GAAG,EAAA;AAAArB,YAAAA,QAAA,EACDd,WAAW,gBACVuB,GAAA,CAAC6B,IAAI,EAAA;cACHzC,KAAK,EAAEhB,wBAAwB,CAACU,UAAU,GAAG,UAAU,GAAG,SAAS,CAAE;AACrE6C,cAAAA,IAAI,EAAC,OAAO;AAAApC,cAAAA,QAAA,EAEXd,WAAAA;AAAW,aACR,CAAC,GACL,IAAA;AAAI,WACL,CAAC,CAAA;AAAA,SACH,CAAC,eACNuB,GAAA,CAACY,GAAG,EAAA;AAACkB,UAAAA,UAAU,EAAC,MAAM;AAAAvC,UAAAA,QAAA,EAAEX,QAAAA;AAAQ,SAAM,CAAC,CAAA;OACpC,CAAA;KAEgB,CAAA,CAAA;AAAC,GACE,CAAC,CAAA;AAEnC,CAAC,CAAA;AAED,IAAMmD,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC5D,aAAa;;;;"}