@cambly/syntax-core 13.0.0 → 13.1.0

package/dist/__chunks/AVTBLTHP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n  xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n  xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 },\n} as const;\n\nconst sizeToMargin = {\n  xs: -10,\n  sm: -14,\n  md: -22,\n  lg: -28,\n  xl: -34,\n} as const;\n\nfunction AvatarInternal({\n  accessibilityLabel,\n  icon,\n  outline,\n  size = \"md\",\n  src,\n}: {\n  accessibilityLabel: string;\n  icon?: React.ReactElement;\n  outline?: boolean;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  src: string;\n}): ReactElement {\n  return (\n    <div className={classNames(styles.avatar, styles[size])}>\n      <img\n        alt={accessibilityLabel}\n        src={src}\n        className={classNames(\n          styles.avatarImage,\n          outline && styles.avatarImageOutline,\n          styles[size],\n        )}\n      />\n      {icon && (\n        <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n          <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            position=\"absolute\"\n            backgroundColor=\"white\"\n            dangerouslySetInlineStyle={{\n              __style: {\n                border: \"1px solid white\",\n                ...sizeToIconStyles[size],\n              },\n            }}\n            rounding=\"full\"\n          >\n            {icon}\n          </Box>\n        </Box>\n      )}\n    </div>\n  );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * Size of the avatar.\n   *\n   * * `xs`: 24px\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 80px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n}): JSX.Element => {\n  const avatarGroupContext = useAvatarGroup();\n\n  if (avatarGroupContext !== null) {\n    return (\n      <Box\n        position=\"relative\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n          },\n        }}\n      >\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          backgroundColor=\"white\"\n          rounding=\"full\"\n        >\n          <AvatarInternal\n            accessibilityLabel={accessibilityLabel}\n            icon={icon}\n            outline\n            size={avatarGroupContext.size}\n            src={src}\n          />\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <AvatarInternal\n      accessibilityLabel={accessibilityLabel}\n      icon={icon}\n      size={size}\n      src={src}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADoC/T,SACE,KADF;AA9BJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ;AAAA,aACL,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/__chunks/{7TZNQNSO.cjs → CBAKJXVM.cjs}

@@ -5,7 +5,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
 
 
 
-var _XWLWM3FWcjs = require('./XWLWM3FW.cjs');
+var _7TSVTONIcjs = require('./7TSVTONI.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -98,7 +98,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _XWLWM3FWcjs.ColorBaseDestructive700 : _XWLWM3FWcjs.ColorBaseGray800,
+                  fill: errorText ? _7TSVTONIcjs.ColorBaseDestructive700 : _7TSVTONIcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
@@ -122,4 +122,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=7TZNQNSO.cjs.map
+//# sourceMappingURL=CBAKJXVM.cjs.map

package/dist/__chunks/{3JWSFE5Q.js → E5SFZHIE.js}

@@ -5,7 +5,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./47RI4QGK.js";
+} from "./3NABVL3W.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -122,4 +122,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=3JWSFE5Q.js.map
+//# sourceMappingURL=E5SFZHIE.js.map

package/dist/__chunks/{TBFYPXWO.js → HVZ5Z2YC.js}

@@ -19,7 +19,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./47RI4QGK.js";
+} from "./3NABVL3W.js";
 import {
   RichSelectSection_default
 } from "./HN2MMSUI.js";
@@ -266,4 +266,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=TBFYPXWO.js.map
+//# sourceMappingURL=HVZ5Z2YC.js.map

package/dist/__chunks/{CHOHIFJN.cjs → KBFQU5AW.cjs}

@@ -39,4 +39,4 @@ AvatarGroup.displayName = "AvatarGroup";
 
 
 exports.useAvatarGroup = useAvatarGroup; exports.AvatarGroup = AvatarGroup;
-//# sourceMappingURL=CHOHIFJN.cjs.map
+//# sourceMappingURL=KBFQU5AW.cjs.map

package/dist/__chunks/KBFQU5AW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAiED;AAtDN,IAAM,qBAAqB,cAA6C,IAAI;AAErE,SAAS,iBAAgD;AAC9D,QAAM,UAAU,WAAW,kBAAkB;AAC7C,SAAO,CAAC,UAAU,OAAO;AAC3B;AAgBe,SAAR,YAA6B;AAAA,EAClC,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GA0BiB;AACf,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,GACtD;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAgB,gBAAgB,aAAa,UAAU;AAAA,MACvD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,eAAe,gBAAgB,aAAa,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc","sourcesContent":["import {\n  type ReactNode,\n  createContext,\n  useContext,\n  type ReactElement,\n} from \"react\";\nimport Box from \"../Box/Box\";\n\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype Orientation = \"standard\" | \"reverse\";\n\ntype AvatarGroupContextType = {\n  size: Size;\n  orientation: Orientation;\n};\n\nconst AvatarGroupContext = createContext<AvatarGroupContextType | null>(null);\n\nexport function useAvatarGroup(): AvatarGroupContextType | null {\n  const context = useContext(AvatarGroupContext);\n  return !context ? null : context;\n}\n\n/**\n * [AvatarGroup](https://cambly-syntax.vercel.app/?path=/docs/components-avatargroup--docs) is a stack of avatars to represent a group of people\n *\n * Pass in Avatar components as children to the AvatarGroup component. The size prop that is passed into the AvatarGroup component will override Avatar's size prop..\n *\n * Usage:\n *\n * <AvatarGroup size=\"md\" orientation=\"standard\">\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * </AvatarGroup>\n *\n */\nexport default function AvatarGroup({\n  size = \"md\",\n  orientation = \"standard\",\n  children,\n}: {\n  /**\n   * Size of the avatars in the AvatarGroup.\n   *\n   * * `xs`: 24px\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 80px\n   *\n   * @defaultValue `md`\n   */\n  size?: Size;\n  /**\n   * Orientation of the AvatarGroup.\n   * This describes the order of rendering of the Avatar components.\n   * Standard renders the Avatar components with the right component on top.\n   * Reverse renders the Avatar components with the left component on top.\n   *\n   * @defaultValue `standard`\n   */\n  orientation?: Orientation;\n  /**\n   * Avatars to be rendered within the AvatarGroup.\n   */\n  children: ReactNode;\n}): ReactElement {\n  return (\n    <AvatarGroupContext.Provider value={{ size, orientation }}>\n      <Box\n        display=\"flex\"\n        justifyContent={orientation === \"standard\" ? \"start\" : \"end\"}\n        dangerouslySetInlineStyle={{\n          __style: {\n            flexDirection: orientation === \"standard\" ? \"row\" : \"row-reverse\",\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </AvatarGroupContext.Provider>\n  );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}

package/dist/__chunks/{NL4XSQC3.cjs → LLNVYX3N.cjs}

@@ -19,7 +19,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 
 
 
-var _XWLWM3FWcjs = require('./XWLWM3FW.cjs');
+var _7TSVTONIcjs = require('./7TSVTONI.cjs');
 
 
 var _ZTK7E42Pcjs = require('./ZTK7E42P.cjs');
@@ -231,7 +231,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _XWLWM3FWcjs.ColorBaseDestructive700 : _XWLWM3FWcjs.ColorBaseGray800,
+                              fill: errorText ? _7TSVTONIcjs.ColorBaseDestructive700 : _7TSVTONIcjs.ColorBaseGray800,
                               d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                             }
                           )
@@ -266,4 +266,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=NL4XSQC3.cjs.map
+//# sourceMappingURL=LLNVYX3N.cjs.map

package/dist/__chunks/{T32LVZ6S.js → LT6ELZIN.js}

@@ -39,4 +39,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=T32LVZ6S.js.map
+//# sourceMappingURL=LT6ELZIN.js.map

package/dist/__chunks/LT6ELZIN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  createContext,\n  useContext,\n  type ReactElement,\n} from \"react\";\nimport Box from \"../Box/Box\";\n\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype Orientation = \"standard\" | \"reverse\";\n\ntype AvatarGroupContextType = {\n  size: Size;\n  orientation: Orientation;\n};\n\nconst AvatarGroupContext = createContext<AvatarGroupContextType | null>(null);\n\nexport function useAvatarGroup(): AvatarGroupContextType | null {\n  const context = useContext(AvatarGroupContext);\n  return !context ? null : context;\n}\n\n/**\n * [AvatarGroup](https://cambly-syntax.vercel.app/?path=/docs/components-avatargroup--docs) is a stack of avatars to represent a group of people\n *\n * Pass in Avatar components as children to the AvatarGroup component. The size prop that is passed into the AvatarGroup component will override Avatar's size prop..\n *\n * Usage:\n *\n * <AvatarGroup size=\"md\" orientation=\"standard\">\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * </AvatarGroup>\n *\n */\nexport default function AvatarGroup({\n  size = \"md\",\n  orientation = \"standard\",\n  children,\n}: {\n  /**\n   * Size of the avatars in the AvatarGroup.\n   *\n   * * `xs`: 24px\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 80px\n   *\n   * @defaultValue `md`\n   */\n  size?: Size;\n  /**\n   * Orientation of the AvatarGroup.\n   * This describes the order of rendering of the Avatar components.\n   * Standard renders the Avatar components with the right component on top.\n   * Reverse renders the Avatar components with the left component on top.\n   *\n   * @defaultValue `standard`\n   */\n  orientation?: Orientation;\n  /**\n   * Avatars to be rendered within the AvatarGroup.\n   */\n  children: ReactNode;\n}): ReactElement {\n  return (\n    <AvatarGroupContext.Provider value={{ size, orientation }}>\n      <Box\n        display=\"flex\"\n        justifyContent={orientation === \"standard\" ? \"start\" : \"end\"}\n        dangerouslySetInlineStyle={{\n          __style: {\n            flexDirection: orientation === \"standard\" ? \"row\" : \"row-reverse\",\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </AvatarGroupContext.Provider>\n  );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":";;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAiED;AAtDN,IAAM,qBAAqB,cAA6C,IAAI;AAErE,SAAS,iBAAgD;AAC9D,QAAM,UAAU,WAAW,kBAAkB;AAC7C,SAAO,CAAC,UAAU,OAAO;AAC3B;AAgBe,SAAR,YAA6B;AAAA,EAClC,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GA0BiB;AACf,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,GACtD;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAgB,gBAAgB,aAAa,UAAU;AAAA,MACvD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,eAAe,gBAAgB,aAAa,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/__chunks/{JRTUP3VP.cjs → NOQ3DDEP.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _CHOHIFJNcjs = require('./CHOHIFJN.cjs');
+var _KBFQU5AWcjs = require('./KBFQU5AW.cjs');
 
 
 var _FESAFV44cjs = require('./FESAFV44.cjs');
@@ -13,7 +13,7 @@ var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Avatar.module.css#css-module
-var Avatar_module_default = { "avatar": "_avatar_19vv1_1", "avatarImage": "_avatarImage_19vv1_5", "avatarImageOutline": "_avatarImageOutline_19vv1_13", "xs": "_xs_19vv1_17", "sm": "_sm_19vv1_22", "md": "_md_19vv1_27", "lg": "_lg_19vv1_32" };
+var Avatar_module_default = { "avatar": "_avatar_gvbh2_1", "avatarImage": "_avatarImage_gvbh2_5", "avatarImageOutline": "_avatarImageOutline_gvbh2_13", "xs": "_xs_gvbh2_17", "sm": "_sm_gvbh2_22", "md": "_md_gvbh2_27", "lg": "_lg_gvbh2_32", "xl": "_xl_gvbh2_37" };
 
 // src/Avatar/Avatar.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -21,13 +21,15 @@ var sizeToIconStyles = {
   xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },
-  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 }
+  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },
+  xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 }
 };
 var sizeToMargin = {
   xs: -10,
   sm: -14,
   md: -22,
-  lg: -28
+  lg: -28,
+  xl: -34
 };
 function AvatarInternal({
   accessibilityLabel,
@@ -74,7 +76,7 @@ var Avatar = ({
   size = "md",
   src
 }) => {
-  const avatarGroupContext = _CHOHIFJNcjs.useAvatarGroup.call(void 0, );
+  const avatarGroupContext = _KBFQU5AWcjs.useAvatarGroup.call(void 0, );
   if (avatarGroupContext !== null) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _FESAFV44cjs.Box_default,
@@ -123,4 +125,4 @@ var Avatar_default = Avatar;
 
 
 exports.Avatar_default = Avatar_default;
-//# sourceMappingURL=JRTUP3VP.cjs.map
+//# sourceMappingURL=NOQ3DDEP.cjs.map

package/dist/__chunks/NOQ3DDEP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADoC/T,SACE,KADF;AA9BJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ;AAAA,aACL,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ","sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n  xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n  xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 },\n} as const;\n\nconst sizeToMargin = {\n  xs: -10,\n  sm: -14,\n  md: -22,\n  lg: -28,\n  xl: -34,\n} as const;\n\nfunction AvatarInternal({\n  accessibilityLabel,\n  icon,\n  outline,\n  size = \"md\",\n  src,\n}: {\n  accessibilityLabel: string;\n  icon?: React.ReactElement;\n  outline?: boolean;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  src: string;\n}): ReactElement {\n  return (\n    <div className={classNames(styles.avatar, styles[size])}>\n      <img\n        alt={accessibilityLabel}\n        src={src}\n        className={classNames(\n          styles.avatarImage,\n          outline && styles.avatarImageOutline,\n          styles[size],\n        )}\n      />\n      {icon && (\n        <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n          <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            position=\"absolute\"\n            backgroundColor=\"white\"\n            dangerouslySetInlineStyle={{\n              __style: {\n                border: \"1px solid white\",\n                ...sizeToIconStyles[size],\n              },\n            }}\n            rounding=\"full\"\n          >\n            {icon}\n          </Box>\n        </Box>\n      )}\n    </div>\n  );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * Size of the avatar.\n   *\n   * * `xs`: 24px\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 80px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n}): JSX.Element => {\n  const avatarGroupContext = useAvatarGroup();\n\n  if (avatarGroupContext !== null) {\n    return (\n      <Box\n        position=\"relative\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n          },\n        }}\n      >\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          backgroundColor=\"white\"\n          rounding=\"full\"\n        >\n          <AvatarInternal\n            accessibilityLabel={accessibilityLabel}\n            icon={icon}\n            outline\n            size={avatarGroupContext.size}\n            src={src}\n          />\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <AvatarInternal\n      accessibilityLabel={accessibilityLabel}\n      icon={icon}\n      size={size}\n      src={src}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"]}

package/dist/index.cjs

@@ -4,10 +4,10 @@
 var _CQQJROZEcjs = require('./__chunks/CQQJROZE.cjs');
 
 
-var _JRTUP3VPcjs = require('./__chunks/JRTUP3VP.cjs');
+var _NOQ3DDEPcjs = require('./__chunks/NOQ3DDEP.cjs');
 
 
-var _CHOHIFJNcjs = require('./__chunks/CHOHIFJN.cjs');
+var _KBFQU5AWcjs = require('./__chunks/KBFQU5AW.cjs');
 
 
 var _HFWEVQNScjs = require('./__chunks/HFWEVQNS.cjs');
@@ -38,11 +38,11 @@ var _7YBXLFIGcjs = require('./__chunks/7YBXLFIG.cjs');
 require('./__chunks/WFVGNGEP.cjs');
 
 
-var _7TZNQNSOcjs = require('./__chunks/7TZNQNSO.cjs');
+var _CBAKJXVMcjs = require('./__chunks/CBAKJXVM.cjs');
 require('./__chunks/JVGX637E.cjs');
 
 
-var _NL4XSQC3cjs = require('./__chunks/NL4XSQC3.cjs');
+var _LLNVYX3Ncjs = require('./__chunks/LLNVYX3N.cjs');
 require('./__chunks/HN4N2HE2.cjs');
 
 
@@ -71,7 +71,7 @@ var _63XQSPT7cjs = require('./__chunks/63XQSPT7.cjs');
 
 
 var _3UEOKPM2cjs = require('./__chunks/3UEOKPM2.cjs');
-require('./__chunks/XWLWM3FW.cjs');
+require('./__chunks/7TSVTONI.cjs');
 require('./__chunks/ZTK7E42P.cjs');
 require('./__chunks/MF7LLV7V.cjs');
 require('./__chunks/7FBJ7XRE.cjs');
@@ -137,5 +137,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _JRTUP3VPcjs.Avatar_default; exports.AvatarGroup = _CHOHIFJNcjs.AvatarGroup; exports.Badge = _CQQJROZEcjs.Badge_default; exports.Box = _FESAFV44cjs.Box_default; exports.Button = _S2VK4XNLcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _D5AQ3PGBcjs.Card; exports.Checkbox = _HFWEVQNScjs.Checkbox_default; exports.Chip = _SFZ2MHPAcjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _2OJKC2AXcjs.Heading_default; exports.Icon = _XMKQJFU6cjs.Icon_default; exports.IconButton = _63XQSPT7cjs.IconButton_default; exports.LinkButton = _W45CFJI7cjs.LinkButton_default; exports.Modal = _HK7T4244cjs.Modal; exports.Popover = _ELEREGBWcjs.Popover_default; exports.RadioButton = _JW7TVUPBcjs.RadioButton_default; exports.RichSelectList = _NL4XSQC3cjs.RichSelectList_default; exports.SelectList = _7TZNQNSOcjs.SelectList; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _7YBXLFIGcjs.TextArea_default; exports.TextField = _7X4KKISPcjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _7FYS3TSRcjs.Tooltip_default; exports.Typography = _GUACYIXBcjs.Typography_default;
+exports.Avatar = _NOQ3DDEPcjs.Avatar_default; exports.AvatarGroup = _KBFQU5AWcjs.AvatarGroup; exports.Badge = _CQQJROZEcjs.Badge_default; exports.Box = _FESAFV44cjs.Box_default; exports.Button = _S2VK4XNLcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _D5AQ3PGBcjs.Card; exports.Checkbox = _HFWEVQNScjs.Checkbox_default; exports.Chip = _SFZ2MHPAcjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _2OJKC2AXcjs.Heading_default; exports.Icon = _XMKQJFU6cjs.Icon_default; exports.IconButton = _63XQSPT7cjs.IconButton_default; exports.LinkButton = _W45CFJI7cjs.LinkButton_default; exports.Modal = _HK7T4244cjs.Modal; exports.Popover = _ELEREGBWcjs.Popover_default; exports.RadioButton = _JW7TVUPBcjs.RadioButton_default; exports.RichSelectList = _LLNVYX3Ncjs.RichSelectList_default; exports.SelectList = _CBAKJXVMcjs.SelectList; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _7YBXLFIGcjs.TextArea_default; exports.TextField = _7X4KKISPcjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _7FYS3TSRcjs.Tooltip_default; exports.Typography = _GUACYIXBcjs.Typography_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.css

@@ -1,33 +1,37 @@
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data */
-._avatar_19vv1_1 {
+._avatar_gvbh2_1 {
   box-sizing: border-box;
 }
-._avatarImage_19vv1_5 {
+._avatarImage_gvbh2_5 {
   box-sizing: border-box;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;
 }
-._avatarImageOutline_19vv1_13 {
+._avatarImageOutline_gvbh2_13 {
   border: 1px solid var(--color-cambio-gray-100);
 }
-._xs_19vv1_17 {
+._xs_gvbh2_17 {
   width: 24px;
   height: 24px;
 }
-._sm_19vv1_22 {
+._sm_gvbh2_22 {
   width: 32px;
   height: 32px;
 }
-._md_19vv1_27 {
+._md_gvbh2_27 {
   width: 48px;
   height: 48px;
 }
-._lg_19vv1_32 {
+._lg_gvbh2_32 {
   width: 64px;
   height: 64px;
 }
+._xl_gvbh2_37 {
+  width: 80px;
+  height: 80px;
+}
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Box/Box.module.css/#css-module-data */
 ._box_xcjsm_1 {