@razorpay/blade 12.98.1 → 12.111.0

package/build/lib/web/production/components/AppBar/AppBar.web.js

@@ -0,0 +1,278 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import { AppBarContext, useAppBarContext } from './AppBarContext.js';
+import { APP_BAR_BACKGROUND_COLOR, APP_BAR_BACK_BUTTON_GAP, APP_BAR_ACTIONS_GAP, APP_BAR_HEIGHT, APP_BAR_PADDING_X, APP_BAR_PADDING_Y, APP_BAR_LEADING_GAP } from './appBarTokens.js';
+import '../../utils/index.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/metaAttribute/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
+import '../Box/styledProps/index.js';
+import '../BladeProvider/index.js';
+import '../Box/BaseBox/index.js';
+import '../Button/IconButton/index.js';
+import '../Icons/index.js';
+import '../TrustBadge/index.js';
+import '../Tooltip/index.js';
+import '../Typography/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { IconButton } from '../Button/IconButton/IconButton.js';
+import ArrowLeftIcon from '../Icons/ArrowLeftIcon/ArrowLeftIcon.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { Tooltip } from '../Tooltip/Tooltip.web.js';
+import { BladeProvider } from '../BladeProvider/BladeProvider.web.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { TrustBadge } from '../TrustBadge/TrustBadge.web.js';
+import { Text } from '../Typography/Text/Text.js';
+
+var _excluded = ["children", "backButton", "variant", "isSticky", "accessibilityLabel", "backgroundColor", "position", "top", "zIndex", "width", "paddingX", "paddingY", "testID"],
+  _excluded2 = ["title", "logo", "trustBadgeVariant", "trustBadgeLabel", "testID"],
+  _excluded3 = ["children", "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 _AppBar = function _AppBar(_ref, ref) {
+  var children = _ref.children,
+    backButton = _ref.backButton,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
+    _ref$isSticky = _ref.isSticky,
+    isSticky = _ref$isSticky === void 0 ? true : _ref$isSticky,
+    accessibilityLabel = _ref.accessibilityLabel,
+    backgroundColor = _ref.backgroundColor,
+    position = _ref.position,
+    top = _ref.top,
+    zIndex = _ref.zIndex,
+    width = _ref.width,
+    paddingX = _ref.paddingX,
+    paddingY = _ref.paddingY,
+    testID = _ref.testID,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    colorScheme = _useTheme.colorScheme,
+    themeTokens = _useTheme.themeTokens;
+  var resolvedBackgroundColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : APP_BAR_BACKGROUND_COLOR[variant];
+  var resolvedColorScheme = variant === 'neutral' ? 'dark' : colorScheme;
+  var backButtonElement = backButton ? /*#__PURE__*/jsx(BaseBox, {
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    marginRight: APP_BAR_BACK_BUTTON_GAP,
+    children: /*#__PURE__*/jsx(IconButton, {
+      icon: ArrowLeftIcon,
+      size: "medium",
+      accessibilityLabel: backButton.accessibilityLabel,
+      onClick: backButton.onClick
+    })
+  }) : null;
+  var appBar = /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+    alignItems: "center",
+    columnGap: APP_BAR_ACTIONS_GAP,
+    position: position !== null && position !== void 0 ? position : isSticky ? 'sticky' : 'relative',
+    top: top !== null && top !== void 0 ? top : isSticky ? '0px' : undefined,
+    width: width !== null && width !== void 0 ? width : '100%',
+    height: makeSize(APP_BAR_HEIGHT),
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : APP_BAR_PADDING_X,
+    paddingY: paddingY !== null && paddingY !== void 0 ? paddingY : APP_BAR_PADDING_Y,
+    zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : componentZIndices.topnav,
+    backgroundColor: resolvedBackgroundColor
+  }, metaAttribute({
+    name: MetaConstants.AppBar,
+    testID: testID
+  })), makeAccessible({
+    role: 'banner',
+    label: accessibilityLabel
+  })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
+    children: /*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      minWidth: "0px",
+      children: [backButtonElement && backButton !== null && backButton !== void 0 && backButton.tooltip ? /*#__PURE__*/jsx(Tooltip, {
+        content: backButton.tooltip.content,
+        placement: backButton.tooltip.placement,
+        children: backButtonElement
+      }) : backButtonElement, children]
+    })
+  }));
+  return /*#__PURE__*/jsx(AppBarContext.Provider, {
+    value: {
+      colorScheme: colorScheme,
+      themeTokens: themeTokens,
+      variant: variant
+    },
+    children: /*#__PURE__*/jsx(BladeProvider, {
+      themeTokens: themeTokens,
+      colorScheme: resolvedColorScheme,
+      children: appBar
+    })
+  });
+};
+
+/**
+ * ### AppBar
+ *
+ * Top-of-screen application/page header for mobile and compact desktop surfaces.
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * ```jsx
+ * <AppBar backButton={{ onClick: goBack, accessibilityLabel: 'Go back' }}>
+ *   <AppBarLeading title="Mavenshop" logo={<MerchantLogo />} trustBadgeVariant="default" />
+ *   <AppBarActions>
+ *     <IconButton icon={UserIcon} accessibilityLabel="Profile" onClick={openProfile} />
+ *   </AppBarActions>
+ * </AppBar>
+ * ```
+ */
+var AppBar = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_AppBar), {
+  componentId: MetaConstants.AppBar
+});
+var _AppBarLeading = function _AppBarLeading(_ref2) {
+  var _appBarContext$varian;
+  var title = _ref2.title,
+    logo = _ref2.logo,
+    trustBadgeVariant = _ref2.trustBadgeVariant,
+    trustBadgeLabel = _ref2.trustBadgeLabel,
+    testID = _ref2.testID,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var appBarContext = useAppBarContext();
+  var isNeutral = ((_appBarContext$varian = appBarContext === null || appBarContext === void 0 ? void 0 : appBarContext.variant) !== null && _appBarContext$varian !== void 0 ? _appBarContext$varian : 'neutral') === 'neutral';
+  var titleColor = isNeutral ? 'surface.text.staticWhite.normal' : 'surface.text.gray.normal';
+  var showFullBadge = trustBadgeVariant === 'default';
+  var showIconBadge = trustBadgeVariant === 'icon-only';
+  var stackFullBadgeBelowLogo = showFullBadge && Boolean(logo) && !title;
+  var hasTitleColumn = Boolean(title) || showFullBadge && !logo;
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: APP_BAR_LEADING_GAP,
+    flex: 1,
+    minWidth: "0px",
+    overflow: "hidden"
+  }, metaAttribute({
+    name: MetaConstants.AppBarLeading,
+    testID: testID
+  })), makeAnalyticsAttribute(rest)), {}, {
+    children: [logo ? stackFullBadgeBelowLogo ? /*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      minWidth: "0px",
+      maxWidth: "100%",
+      children: [/*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        alignItems: "center",
+        minWidth: "0px",
+        maxWidth: "100%",
+        children: logo
+      }), /*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        alignItems: "center",
+        marginTop: "spacing.1",
+        minWidth: "0px",
+        maxWidth: "100%",
+        children: /*#__PURE__*/jsx(TrustBadge, {
+          variant: "default",
+          label: trustBadgeLabel
+        })
+      })]
+    }) : /*#__PURE__*/jsx(BaseBox, {
+      display: "flex",
+      alignItems: "center",
+      minWidth: "0px",
+      maxWidth: "100%",
+      children: logo
+    }) : null, hasTitleColumn ? /*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      flexDirection: "column",
+      minWidth: "0px",
+      children: [title ? /*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "spacing.3",
+        children: [/*#__PURE__*/jsx(Text, {
+          size: "large",
+          weight: "semibold",
+          color: titleColor,
+          truncateAfterLines: 1,
+          children: title
+        }), showIconBadge ? /*#__PURE__*/jsx(TrustBadge, {
+          variant: "icon-only",
+          label: trustBadgeLabel
+        }) : null]
+      }) : null, showFullBadge && !stackFullBadgeBelowLogo ? /*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        alignItems: "center",
+        marginTop: "spacing.1",
+        minWidth: "0px",
+        maxWidth: "100%",
+        children: /*#__PURE__*/jsx(TrustBadge, {
+          variant: "default",
+          label: trustBadgeLabel
+        })
+      }) : null]
+    }) : showIconBadge ? /*#__PURE__*/jsx(TrustBadge, {
+      variant: "icon-only",
+      label: trustBadgeLabel
+    }) : null]
+  }));
+};
+var AppBarLeading = /*#__PURE__*/assignWithoutSideEffects(_AppBarLeading, {
+  componentId: MetaConstants.AppBarLeading
+});
+var _AppBarActions = function _AppBarActions(_ref3) {
+  var children = _ref3.children,
+    testID = _ref3.testID,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  var appBarContext = useAppBarContext();
+  var _useTheme2 = useTheme(),
+    colorScheme = _useTheme2.colorScheme,
+    themeTokens = _useTheme2.themeTokens;
+  var actions = /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: APP_BAR_ACTIONS_GAP,
+    flexShrink: 0,
+    marginLeft: "auto"
+  }, metaAttribute({
+    name: MetaConstants.AppBarActions,
+    testID: testID
+  })), makeAnalyticsAttribute(rest)), {}, {
+    children: children
+  }));
+  if (appBarContext) {
+    return /*#__PURE__*/jsx(BladeProvider, {
+      themeTokens: appBarContext.themeTokens,
+      colorScheme: appBarContext.variant === 'neutral' ? 'dark' : appBarContext.colorScheme,
+      children: actions
+    });
+  }
+  return /*#__PURE__*/jsx(BladeProvider, {
+    themeTokens: themeTokens,
+    colorScheme: colorScheme,
+    children: actions
+  });
+};
+var AppBarActions = /*#__PURE__*/assignWithoutSideEffects(_AppBarActions, {
+  componentId: MetaConstants.AppBarActions
+});
+
+export { AppBar, AppBarActions, AppBarLeading };
+//# sourceMappingURL=AppBar.web.js.map

package/build/lib/web/production/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/production/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/production/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/production/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/production/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/production/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/production/components/AppBar/index.js.map

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

package/build/lib/web/production/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 (false) {
           // 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/production/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/production/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/production/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/production/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