@razorpay/blade 11.17.1 → 11.18.1

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

@@ -0,0 +1,125 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import 'react';
+import { StyledAvatar } from './StyledAvatar.js';
+import { useAvatarGroupContext } from './AvatarGroupContext.js';
+import { AvatarButton } from './AvatarButton.js';
+import '../Box/styledProps/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/logger/index.js';
+import '../Icons/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import UserIcon from '../Icons/UserIcon/UserIcon.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["name", "color", "size", "variant", "icon", "href", "target", "rel", "src", "alt", "srcSet", "crossOrigin", "referrerPolicy", "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 getInitials = function getInitials(name) {
+  // Combine first and last name initials
+  var names = name.trim().toUpperCase().split(' ');
+  if (names.length === 1) {
+    return names[0].substring(0, 2);
+  }
+  return names[0][0] + names[names.length - 1][0];
+};
+var _Avatar = function _Avatar(_ref) {
+  var _groupProps$size;
+  var name = _ref.name,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'neutral' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
+    icon = _ref.icon,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    src = _ref.src,
+    alt = _ref.alt,
+    srcSet = _ref.srcSet,
+    crossOrigin = _ref.crossOrigin,
+    referrerPolicy = _ref.referrerPolicy,
+    testID = _ref.testID,
+    styledProps = _objectWithoutProperties(_ref, _excluded);
+  if (true) {
+    if (src && !alt && !name) {
+      throwBladeError({
+        moduleName: 'Avatar',
+        message: '"alt" or "name" prop is required when the "src" prop is provided.'
+      });
+    }
+  }
+  var groupProps = useAvatarGroupContext();
+  var avatarSize = (_groupProps$size = groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
+  var commonButtonProps = {
+    variant: variant,
+    color: color,
+    size: avatarSize,
+    href: href,
+    target: target,
+    rel: rel
+  };
+  var getChildrenToRender = function getChildrenToRender() {
+    if (src) {
+      return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
+        imgProps: {
+          src: src,
+          alt: alt !== null && alt !== void 0 ? alt : name,
+          srcSet: srcSet,
+          crossOrigin: crossOrigin,
+          referrerPolicy: referrerPolicy
+        }
+      }));
+    }
+    if (name && !src) {
+      return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
+        children: getInitials(name)
+      }));
+    }
+    return /*#__PURE__*/jsx(AvatarButton, _objectSpread(_objectSpread({}, commonButtonProps), {}, {
+      icon: icon !== null && icon !== void 0 ? icon : UserIcon
+    }));
+  };
+  return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+    name: MetaConstants.Avatar,
+    testID: testID
+  })), getStyledProps(styledProps)), {}, {
+    backgroundColor: "surface.background.gray.intense",
+    variant: variant,
+    size: avatarSize,
+    children: getChildrenToRender()
+  }));
+};
+
+/**
+ * ### Avatar Component
+ * 
+ * An avatar component is a standardized visual representation of a user or entity.
+ * 
+ * ---
+ * 
+ * #### Usage
+ * 
+ * ```jsx
+  <Avatar name="Nitin Kumar" src="https://avatars.githubusercontent.com/u/46647141?v=4" /> 
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}
+ * 
+ */
+var Avatar = /*#__PURE__*/assignWithoutSideEffects(_Avatar, {
+  displayName: 'Avatar',
+  componentId: 'Avatar'
+});
+
+export { Avatar };
+//# sourceMappingURL=Avatar.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.web.js","sources":["../../../../../../src/components/Avatar/Avatar.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport type { AvatarProps } from './types';\nimport { StyledAvatar } from './StyledAvatar';\nimport { useAvatarGroupContext } from './AvatarGroupContext';\nimport { AvatarButton } from './AvatarButton';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { UserIcon } from '~components/Icons';\n\nconst getInitials = (name: string): string => {\n  // Combine first and last name initials\n  const names = name.trim().toUpperCase().split(' ');\n\n  if (names.length === 1) {\n    return names[0].substring(0, 2);\n  }\n  return names[0][0] + names[names.length - 1][0];\n};\n\nconst _Avatar = ({\n  name,\n  color = 'neutral',\n  size = 'medium',\n  variant = 'circle',\n  icon,\n  href,\n  target,\n  rel,\n  // Image Props\n  src,\n  alt,\n  srcSet,\n  crossOrigin,\n  referrerPolicy,\n  testID,\n  ...styledProps\n}: AvatarProps): ReactElement => {\n  if (__DEV__) {\n    if (src && !alt && !name) {\n      throwBladeError({\n        moduleName: 'Avatar',\n        message: '\"alt\" or \"name\" prop is required when the \"src\" prop is provided.',\n      });\n    }\n  }\n\n  const groupProps = useAvatarGroupContext();\n  const avatarSize = groupProps?.size ?? size;\n\n  const commonButtonProps = {\n    variant,\n    color,\n    size: avatarSize,\n    href,\n    target,\n    rel,\n  };\n\n  const getChildrenToRender = (): React.ReactElement => {\n    if (src) {\n      return (\n        <AvatarButton\n          {...commonButtonProps}\n          imgProps={{\n            src,\n            alt: alt ?? name,\n            srcSet,\n            crossOrigin,\n            referrerPolicy,\n          }}\n        />\n      );\n    }\n\n    if (name && !src) {\n      return <AvatarButton {...commonButtonProps}>{getInitials(name)}</AvatarButton>;\n    }\n\n    return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;\n  };\n\n  return (\n    <StyledAvatar\n      {...metaAttribute({ name: MetaConstants.Avatar, testID })}\n      {...getStyledProps(styledProps)}\n      backgroundColor=\"surface.background.gray.intense\"\n      variant={variant}\n      size={avatarSize}\n    >\n      {getChildrenToRender()}\n    </StyledAvatar>\n  );\n};\n\n/**\n * ### Avatar Component\n * \n * An avatar component is a standardized visual representation of a user or entity.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n  <Avatar name=\"Nitin Kumar\" src=\"https://avatars.githubusercontent.com/u/46647141?v=4\" /> \n * ```\n *\n *  ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatar Avatar Documentation}\n * \n */\nconst Avatar = assignWithoutSideEffects(_Avatar, {\n  displayName: 'Avatar',\n  componentId: 'Avatar',\n});\n\nexport { Avatar };\nexport type { AvatarProps };\n"],"names":["getInitials","name","names","trim","toUpperCase","split","length","substring","_Avatar","_ref","_groupProps$size","_ref$color","color","_ref$size","size","_ref$variant","variant","icon","href","target","rel","src","alt","srcSet","crossOrigin","referrerPolicy","testID","styledProps","_objectWithoutProperties","_excluded","throwBladeError","moduleName","message","groupProps","useAvatarGroupContext","avatarSize","commonButtonProps","getChildrenToRender","_jsx","AvatarButton","_objectSpread","imgProps","children","UserIcon","StyledAvatar","metaAttribute","MetaConstants","Avatar","getStyledProps","backgroundColor","assignWithoutSideEffects","displayName","componentId"],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'react';
+import { StyledAvatarButton } from './StyledAvatarButton.js';
+import { avatarIconSizeTokens, avatarTextSizeMapping } from './avatarTokens.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/makeAccessible/index.js';
+import '../Typography/index.js';
+import { getTextColorToken } from '../Button/BaseButton/BaseButton.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { Heading } from '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AvatarButton = function AvatarButton(_ref) {
+  var href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'neutral' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    Icon = _ref.icon,
+    imgProps = _ref.imgProps,
+    children = _ref.children;
+  var isLink = Boolean(href);
+  var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
+  var iconColor = getTextColorToken({
+    property: 'icon',
+    variant: 'secondary',
+    color: color,
+    state: 'default'
+  });
+  var textColor = getTextColorToken({
+    property: 'text',
+    variant: 'secondary',
+    color: color,
+    state: 'default'
+  });
+  return /*#__PURE__*/jsx(StyledAvatarButton, {
+    as: href ? 'a' : 'button',
+    size: size,
+    color: color,
+    href: href,
+    variant: variant,
+    target: target,
+    rel: rel !== null && rel !== void 0 ? rel : defaultRel,
+    accessibilityProps: _objectSpread({}, makeAccessible({
+      role: isLink ? 'link' : 'button'
+    })),
+    children: /*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 1,
+      height: "100%",
+      children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/jsx(Icon, {
+          size: avatarIconSizeTokens[size],
+          color: iconColor
+        })
+      }) : null, imgProps !== null && imgProps !== void 0 && imgProps.src ? /*#__PURE__*/jsx("img", _objectSpread({}, imgProps)) : null, size === 'xlarge' ? /*#__PURE__*/jsx(Heading, {
+        size: avatarTextSizeMapping[size],
+        weight: "semibold",
+        color: textColor,
+        children: children
+      }) : /*#__PURE__*/jsx(Text, {
+        size: avatarTextSizeMapping[size],
+        weight: "semibold",
+        color: textColor,
+        children: children
+      })]
+    })
+  });
+};
+
+export { AvatarButton };
+//# sourceMappingURL=AvatarButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\n\nconst AvatarButton = ({\n  href,\n  target,\n  rel,\n  variant = 'circle',\n  color = 'neutral',\n  size = 'medium',\n  icon: Icon,\n  imgProps,\n  children,\n}: AvatarButtonProps): React.ReactElement => {\n  const isLink = Boolean(href);\n  const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n  const iconColor = getTextColorToken({\n    property: 'icon',\n    variant: 'secondary',\n    color,\n    state: 'default',\n  }) as IconColor;\n  const textColor = getTextColorToken({\n    property: 'text',\n    variant: 'secondary',\n    color,\n    state: 'default',\n  }) as BaseTextProps['color'];\n\n  return (\n    <StyledAvatarButton\n      as={href ? 'a' : 'button'}\n      size={size}\n      color={color}\n      href={href}\n      variant={variant}\n      target={target}\n      rel={rel ?? defaultRel}\n      accessibilityProps={{\n        ...makeAccessible({\n          role: isLink ? 'link' : 'button',\n        }),\n      }}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        zIndex={1}\n        height=\"100%\"\n      >\n        {Icon ? (\n          <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n            <Icon size={avatarIconSizeTokens[size]} color={iconColor} />\n          </BaseBox>\n        ) : null}\n\n        {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}\n        {imgProps?.src ? <img {...imgProps} /> : null}\n\n        {size === 'xlarge' ? (\n          <Heading size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n            {children}\n          </Heading>\n        ) : (\n          <Text size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n            {children}\n          </Text>\n        )}\n      </BaseBox>\n    </StyledAvatarButton>\n  );\n};\n\nexport { AvatarButton };\n"],"names":["AvatarButton","_ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","isLink","Boolean","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","as","accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text"],"mappings":"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"}

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

@@ -0,0 +1,114 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+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 '../Box/styledProps/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/logger/index.js';
+import '../../utils/isValidAllowedChildren/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["children", "size", "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,
+    maxCount = _ref.maxCount,
+    testID = _ref.testID,
+    styledProps = _objectWithoutProperties(_ref, _excluded);
+  var contextValue = {
+    size: size
+  };
+  var childrenCount = React__default.Children.count(children);
+  return /*#__PURE__*/jsx(AvatarGroupProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsx(StyledAvatarGroup, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+      name: MetaConstants.AvatarGroup,
+      testID: testID
+    })), getStyledProps(styledProps)), {}, {
+      role: "group",
+      size: size,
+      children: React__default.Children.map(children, function (child, index) {
+        if (true) {
+          // throw error if child is not an Avatar
+          if (!isValidAllowedChildren(child, 'Avatar')) {
+            throwBladeError({
+              moduleName: 'AvatarGroup',
+              message: "Only \"Avatar\" component is allowed as a children."
+            });
+          }
+        }
+        if (maxCount && maxCount <= childrenCount) {
+          if (index === maxCount) {
+            return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({}, metaAttribute({
+              name: MetaConstants.Avatar,
+              testID: testID
+            })), {}, {
+              backgroundColor: "surface.background.gray.intense",
+              size: size,
+              variant: "circle",
+              children: /*#__PURE__*/jsx(AvatarButton, {
+                variant: "circle",
+                color: "neutral",
+                size: size,
+                children: "+".concat(String(childrenCount - maxCount))
+              })
+            }));
+          }
+          if (index > maxCount) {
+            return null;
+          }
+        }
+        return child;
+      })
+    }))
+  });
+};
+
+/**
+ * ### AvatarGroup Component
+ * 
+ * The AvatarGroup component is used to group Avatars together.
+ * 
+ * ---
+ * 
+ * #### Usage
+ * 
+ * ```jsx
+  const App = () => {
+    return (
+      <AvatarGroup>
+        <Avatar name="Kamlesh Chandnani" />
+        <Avatar name="Rama Krushna Behera" />
+        <Avatar name="Chaitanya Vikas Deorukhkar" />
+        <Avatar name="Anurag Hazra" />
+        <Avatar name="Nitin Kumar" />
+      </AvatarGroup>
+    );
+  }
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatargroup AvatarGroup Documentation}
+ * 
+ */
+var AvatarGroup = /*#__PURE__*/assignWithoutSideEffects(_AvatarGroup, {
+  displayName: 'AvatarGroup',
+  componentId: 'AvatarGroup'
+});
+
+export { AvatarGroup };
+//# sourceMappingURL=AvatarGroup.web.js.map

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

@@ -0,0 +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';\n\nconst _AvatarGroup = ({\n  children,\n  size = 'medium',\n  maxCount,\n  testID,\n  ...styledProps\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(styledProps)}\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","styledProps","_objectWithoutProperties","_excluded","contextValue","childrenCount","React","Children","count","_jsx","AvatarGroupProvider","value","StyledAvatarGroup","_objectSpread","metaAttribute","name","MetaConstants","AvatarGroup","getStyledProps","role","map","child","index","isValidAllowedChildren","throwBladeError","moduleName","message","StyledAvatar","Avatar","backgroundColor","variant","AvatarButton","color","concat","String","assignWithoutSideEffects","displayName","componentId"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+var AvatarGroupContext = /*#__PURE__*/React__default.createContext({});
+var AvatarGroupProvider = AvatarGroupContext.Provider;
+var useAvatarGroupContext = function useAvatarGroupContext() {
+  var context = React__default.useContext(AvatarGroupContext);
+  return context;
+};
+
+export { AvatarGroupProvider, useAvatarGroupContext };
+//# sourceMappingURL=AvatarGroupContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupContext.js","sources":["../../../../../../src/components/Avatar/AvatarGroupContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { AvatarGroupContextType } from './types';\n\nconst AvatarGroupContext = React.createContext<AvatarGroupContextType>({});\nconst AvatarGroupProvider = AvatarGroupContext.Provider;\n\nconst useAvatarGroupContext = (): AvatarGroupContextType => {\n  const context = React.useContext(AvatarGroupContext);\n  return context;\n};\n\nexport { useAvatarGroupContext, AvatarGroupProvider };\n"],"names":["AvatarGroupContext","React","createContext","AvatarGroupProvider","Provider","useAvatarGroupContext","context","useContext"],"mappings":";;AAGA,IAAMA,kBAAkB,gBAAGC,cAAK,CAACC,aAAa,CAAyB,EAAE,CAAC,CAAA;AAC1E,IAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,SAAQ;AAEvD,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,GAAiC;AAC1D,EAAA,IAAMC,OAAO,GAAGL,cAAK,CAACM,UAAU,CAACP,kBAAkB,CAAC,CAAA;AACpD,EAAA,OAAOM,OAAO,CAAA;AAChB;;;;"}

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
+
+var StyledAvatar = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "StyledAvatar",
+  componentId: "sc-127ewkg-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    variant = _ref.variant,
+    size = _ref.size;
+  return {
+    display: 'flex',
+    width: makeSize(avatarSizeTokens[size]),
+    height: makeSize(avatarSizeTokens[size]),
+    borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
+    outline: "".concat(makeBorderSize(theme.border.width.thinner), " solid ").concat(theme.colors.surface.border.gray.subtle),
+    '&:hover': {
+      outline: "".concat(makeBorderSize(theme.border.width.thick), " solid ").concat(theme.colors.surface.border.gray.muted),
+      borderColor: theme.colors.surface.border.gray.muted
+    }
+  };
+});
+
+export { StyledAvatar };
+//# sourceMappingURL=StyledAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledAvatar.js","sources":["../../../../../../src/components/Avatar/StyledAvatar.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledAvatarProps } from './types';\nimport { avatarSizeTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize, makeSize } from '~utils';\n\nconst StyledAvatar = styled(BaseBox)<StyledAvatarProps>(({ theme, variant, size }) => {\n  return {\n    display: 'flex',\n    width: makeSize(avatarSizeTokens[size]),\n    height: makeSize(avatarSizeTokens[size]),\n    borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n    outline: `${makeBorderSize(theme.border.width.thinner)} solid ${\n      theme.colors.surface.border.gray.subtle\n    }`,\n\n    '&:hover': {\n      outline: `${makeBorderSize(theme.border.width.thick)} solid ${\n        theme.colors.surface.border.gray.muted\n      }`,\n      borderColor: theme.colors.surface.border.gray.muted,\n    },\n  };\n});\n\nexport { StyledAvatar };\n"],"names":["StyledAvatar","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","variant","size","display","width","makeSize","avatarSizeTokens","height","borderRadius","makeBorderSize","border","radius","avatarBorderRadiusTokens","outline","concat","thinner","colors","surface","gray","subtle","thick","muted","borderColor"],"mappings":";;;;;;;;AAMA,IAAMA,YAAY,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,cAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAoB,CAAA,CAAA,UAAAC,IAAA,EAA8B;AAAA,EAAA,IAA3BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI,CAAA;EAC7E,OAAO;AACLC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,gBAAgB,CAACJ,IAAI,CAAC,CAAC;AACvCK,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,CAACJ,IAAI,CAAC,CAAC;AACxCM,IAAAA,YAAY,EAAEC,cAAc,CAACT,KAAK,CAACU,MAAM,CAACC,MAAM,CAACC,wBAAwB,CAACX,OAAO,CAAC,CAAC,CAAC;IACpFY,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,CAACT,KAAK,CAACU,MAAM,CAACN,KAAK,CAACW,OAAO,CAAC,EAAAD,SAAAA,CAAAA,CAAAA,MAAA,CACpDd,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACC,MAAM,CACvC;AAEF,IAAA,SAAS,EAAE;MACTN,OAAO,EAAA,EAAA,CAAAC,MAAA,CAAKL,cAAc,CAACT,KAAK,CAACU,MAAM,CAACN,KAAK,CAACgB,KAAK,CAAC,EAAAN,SAAAA,CAAAA,CAAAA,MAAA,CAClDd,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAK,CACtC;MACFC,WAAW,EAAEtB,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACP,MAAM,CAACQ,IAAI,CAACG,KAAAA;AAChD,KAAA;GACD,CAAA;AACH,CAAC;;;;"}

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

@@ -0,0 +1,48 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled from 'styled-components';
+import { avatarSizeTokens, avatarBorderRadiusTokens, avatarColorTokens } from './avatarTokens.js';
+import '../../utils/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../../utils/getFocusRingStyles/index.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
+import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StyledAvatarButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "StyledAvatarButton",
+  componentId: "sc-1w6qflj-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'neutral' : _ref$color;
+  return {
+    textAlign: 'center',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    minHeight: makeSize(avatarSizeTokens[size]),
+    height: makeSize(avatarSizeTokens[size]),
+    width: makeSize(avatarSizeTokens[size]),
+    border: 'none',
+    borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
+    backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),
+    img: {
+      display: 'block',
+      height: avatarSizeTokens[size],
+      width: avatarSizeTokens[size],
+      borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
+      objectFit: 'cover'
+    },
+    '&:focus-visible': _objectSpread({}, getFocusRingStyles({
+      theme: theme
+    }))
+  };
+});
+
+export { StyledAvatarButton };
+//# sourceMappingURL=StyledAvatarButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledAvatarButton.js","sources":["../../../../../../src/components/Avatar/StyledAvatarButton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { AvatarButtonProps } from './types';\nimport { avatarSizeTokens, avatarColorTokens, avatarBorderRadiusTokens } from './avatarTokens';\nimport { makeBorderSize, makeSize } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledAvatarButton = styled.button<AvatarButtonProps>(\n  ({ theme, size = 'medium', variant = 'circle', color = 'neutral' }) => {\n    return {\n      textAlign: 'center',\n      textDecoration: 'none',\n      cursor: 'pointer',\n      minHeight: makeSize(avatarSizeTokens[size]),\n      height: makeSize(avatarSizeTokens[size]),\n      width: makeSize(avatarSizeTokens[size]),\n      border: 'none',\n      borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n      backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),\n\n      img: {\n        display: 'block',\n        height: avatarSizeTokens[size],\n        width: avatarSizeTokens[size],\n        borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),\n        objectFit: 'cover',\n      },\n\n      '&:focus-visible': {\n        ...getFocusRingStyles({ theme }),\n      },\n    };\n  },\n);\n\nexport { StyledAvatarButton };\n"],"names":["StyledAvatarButton","styled","button","withConfig","displayName","componentId","_ref","theme","_ref$size","size","_ref$variant","variant","_ref$color","color","textAlign","textDecoration","cursor","minHeight","makeSize","avatarSizeTokens","height","width","border","borderRadius","makeBorderSize","radius","avatarBorderRadiusTokens","backgroundColor","getIn","colors","avatarColorTokens","background","img","display","objectFit","_objectSpread","getFocusRingStyles"],"mappings":";;;;;;;;;;;;AAOA,IAAMA,kBAAkB,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtC,CAAA,CAAA,UAAAC,IAAA,EAAuE;AAAA,EAAA,IAApEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,SAAA,GAAAF,IAAA,CAAEG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,YAAA,GAAAJ,IAAA,CAAEK,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,YAAA;IAAAE,UAAA,GAAAN,IAAA,CAAEO,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,UAAA,CAAA;EAC9D,OAAO;AACLE,IAAAA,SAAS,EAAE,QAAQ;AACnBC,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,SAAS,EAAEC,QAAQ,CAACC,gBAAgB,CAACV,IAAI,CAAC,CAAC;AAC3CW,IAAAA,MAAM,EAAEF,QAAQ,CAACC,gBAAgB,CAACV,IAAI,CAAC,CAAC;AACxCY,IAAAA,KAAK,EAAEH,QAAQ,CAACC,gBAAgB,CAACV,IAAI,CAAC,CAAC;AACvCa,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,YAAY,EAAEC,cAAc,CAACjB,KAAK,CAACe,MAAM,CAACG,MAAM,CAACC,wBAAwB,CAACf,OAAO,CAAC,CAAC,CAAC;AACpFgB,IAAAA,eAAe,EAAEC,KAAK,CAACrB,KAAK,CAACsB,MAAM,EAAEC,iBAAiB,CAACC,UAAU,CAAClB,KAAK,CAAC,CAAC;AAEzEmB,IAAAA,GAAG,EAAE;AACHC,MAAAA,OAAO,EAAE,OAAO;AAChBb,MAAAA,MAAM,EAAED,gBAAgB,CAACV,IAAI,CAAC;AAC9BY,MAAAA,KAAK,EAAEF,gBAAgB,CAACV,IAAI,CAAC;AAC7Bc,MAAAA,YAAY,EAAEC,cAAc,CAACjB,KAAK,CAACe,MAAM,CAACG,MAAM,CAACC,wBAAwB,CAACf,OAAO,CAAC,CAAC,CAAC;AACpFuB,MAAAA,SAAS,EAAE,OAAA;KACZ;AAED,IAAA,iBAAiB,EAAAC,aAAA,CACZC,EAAAA,EAAAA,kBAAkB,CAAC;AAAE7B,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA;GAEnC,CAAA;AACH,CAAC;;;;"}

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

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

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,49 @@
+import '../../tokens/global/index.js';
+import { size } from '../../tokens/global/size.js';
+
+var avatarSizeTokens = {
+  xsmall: size[20],
+  small: size[28],
+  medium: size[36],
+  large: size[48],
+  xlarge: size[56]
+};
+var avatarIconSizeTokens = {
+  xsmall: 'small',
+  small: 'medium',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'xlarge'
+};
+var avatarTextSizeMapping = {
+  xsmall: 'xsmall',
+  small: 'xsmall',
+  medium: 'small',
+  large: 'medium',
+  xlarge: 'medium'
+};
+var avatarColorTokens = {
+  text: {
+    primary: 'interactive.text.primary.normal',
+    positive: 'interactive.text.positive.normal',
+    negative: 'interactive.text.negative.normal',
+    notice: 'interactive.text.notice.normal',
+    information: 'interactive.text.information.normal',
+    neutral: 'interactive.text.neutral.normal'
+  },
+  background: {
+    primary: 'interactive.background.primary.faded',
+    positive: 'interactive.background.positive.faded',
+    negative: 'interactive.background.negative.faded',
+    notice: 'interactive.background.notice.faded',
+    information: 'interactive.background.information.faded',
+    neutral: 'interactive.background.neutral.faded'
+  }
+};
+var avatarBorderRadiusTokens = {
+  circle: 'max',
+  square: 'medium'
+};
+
+export { avatarBorderRadiusTokens, avatarColorTokens, avatarIconSizeTokens, avatarSizeTokens, avatarTextSizeMapping };
+//# sourceMappingURL=avatarTokens.js.map

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

@@ -0,0 +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: 'medium',\n} as const;\n\nexport {\n  avatarSizeTokens,\n  avatarIconSizeTokens,\n  avatarTextSizeMapping,\n  avatarColorTokens,\n  avatarBorderRadiusTokens,\n};\n"],"names":["avatarSizeTokens","xsmall","size","small","medium","large","xlarge","avatarIconSizeTokens","avatarTextSizeMapping","avatarColorTokens","text","primary","positive","negative","notice","information","neutral","background","avatarBorderRadiusTokens","circle","square"],"mappings":";;;AAEA,IAAMA,gBAAgB,GAAG;AACvBC,EAAAA,MAAM,EAAEC,IAAI,CAAC,EAAE,CAAC;AAChBC,EAAAA,KAAK,EAAED,IAAI,CAAC,EAAE,CAAC;AACfE,EAAAA,MAAM,EAAEF,IAAI,CAAC,EAAE,CAAC;AAChBG,EAAAA,KAAK,EAAEH,IAAI,CAAC,EAAE,CAAC;EACfI,MAAM,EAAEJ,IAAI,CAAC,EAAE,CAAA;AACjB,EAAU;AAEV,IAAMK,oBAAoB,GAAG;AAC3BN,EAAAA,MAAM,EAAE,OAAO;AACfE,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;AAEV,IAAME,qBAAqB,GAAG;AAC5BP,EAAAA,MAAM,EAAE,QAAQ;AAChBE,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;AAEV,IAAMG,iBAAiB,GAAG;AACxBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,iCAAiC;AAC1CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,MAAM,EAAE,gCAAgC;AACxCC,IAAAA,WAAW,EAAE,qCAAqC;AAClDC,IAAAA,OAAO,EAAE,iCAAA;GACV;AACDC,EAAAA,UAAU,EAAE;AACVN,IAAAA,OAAO,EAAE,sCAAsC;AAC/CC,IAAAA,QAAQ,EAAE,uCAAuC;AACjDC,IAAAA,QAAQ,EAAE,uCAAuC;AACjDC,IAAAA,MAAM,EAAE,qCAAqC;AAC7CC,IAAAA,WAAW,EAAE,0CAA0C;AACvDC,IAAAA,OAAO,EAAE,sCAAA;AACX,GAAA;AACF,EAAU;AAEV,IAAME,wBAAwB,GAAG;AAC/BC,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,MAAM,EAAE,QAAA;AACV;;;;"}

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

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

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

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

package/build/lib/web/development/components/Button/BaseButton/BaseButton.js

@@ -471,5 +471,5 @@ var BaseButton = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__defa
   displayName: 'BaseButton'
 });
 
-export { BaseButton as default, getBackgroundColorToken };
+export { BaseButton as default, getBackgroundColorToken, getTextColorToken };
 //# sourceMappingURL=BaseButton.js.map