@cambly/syntax-core 10.34.0 → 10.36.0

package/dist/__chunks/{PIB5AHP5.js → 4A6OSK3V.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   useAvatarGroup
-} from "./4325RESS.js";
+} from "./BKBUTHI5.js";
 import {
   Box_default
-} from "./GCE2CI4A.js";
+} from "./J6DAGNNN.js";
 import {
   __spreadValues
 } from "./UWGNJENA.js";
@@ -13,7 +13,7 @@ import {
 import classNames from "classnames";
 
 // css-module:./Avatar.module.css#css-module
-var Avatar_module_default = { "avatar": "_avatar_uoljx_1", "avatarImage": "_avatarImage_uoljx_5", "avatarImageOutline": "_avatarImageOutline_uoljx_13", "xs": "_xs_uoljx_17", "sm": "_sm_uoljx_22", "md": "_md_uoljx_27", "lg": "_lg_uoljx_32", "xl": "_xl_uoljx_37" };
+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" };
 
 // src/Avatar/Avatar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,15 +21,13 @@ 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 },
-  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 }
+  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 }
 };
 var sizeToMargin = {
   xs: -10,
   sm: -14,
   md: -22,
-  lg: -28,
-  xl: -28
+  lg: -28
 };
 function AvatarInternal({
   accessibilityLabel,
@@ -125,4 +123,4 @@ var Avatar_default = Avatar;
 export {
   Avatar_default
 };
-//# sourceMappingURL=PIB5AHP5.js.map
+//# sourceMappingURL=4A6OSK3V.js.map

package/dist/__chunks/4A6OSK3V.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} as const;\n\nconst sizeToMargin = {\n  xs: -10,\n  sm: -14,\n  md: -22,\n  lg: -28,\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\";\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   *\n   * @defaultValue `md`\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\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_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\"}"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADkC3S,SACE,KADF;AA5BJ,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;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,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,MAyBmB;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/{MLUQYLT2.cjs → 52L4VM3G.cjs}

@@ -4,10 +4,10 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
+var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
 
 
-var _XCSW34UMcjs = require('./XCSW34UM.cjs');
+var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
 
 
 var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
@@ -71,7 +71,7 @@ var RadioButton = ({
           }
         ),
         checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _RJ3ZYLJScjs.Box_default,
+          _DB7KX3J2cjs.Box_default,
           {
             backgroundColor: error ? "destructive900" : "gray900",
             width: size === "md" ? 12 : 8,
@@ -113,7 +113,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XCSW34UMcjs.Typography_default,
+          _XCGRNBQHcjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=MLUQYLT2.cjs.map
+//# sourceMappingURL=52L4VM3G.cjs.map

package/dist/__chunks/{W74F2R45.cjs → 5A5IBIPC.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _TNVQI6LFcjs = require('./TNVQI6LF.cjs');
+var _ALD77RKFcjs = require('./ALD77RKF.cjs');
 
 
-var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
+var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
 
 
 var _X2SDR4SDcjs = require('./X2SDR4SD.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_uoljx_1", "avatarImage": "_avatarImage_uoljx_5", "avatarImageOutline": "_avatarImageOutline_uoljx_13", "xs": "_xs_uoljx_17", "sm": "_sm_uoljx_22", "md": "_md_uoljx_27", "lg": "_lg_uoljx_32", "xl": "_xl_uoljx_37" };
+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" };
 
 // src/Avatar/Avatar.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -21,15 +21,13 @@ 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 },
-  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 }
+  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 }
 };
 var sizeToMargin = {
   xs: -10,
   sm: -14,
   md: -22,
-  lg: -28,
-  xl: -28
+  lg: -28
 };
 function AvatarInternal({
   accessibilityLabel,
@@ -51,8 +49,8 @@ function AvatarInternal({
         )
       }
     ),
-    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _RJ3ZYLJScjs.Box_default,
+    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _DB7KX3J2cjs.Box_default,
       {
         display: "flex",
         alignItems: "center",
@@ -76,10 +74,10 @@ var Avatar = ({
   size = "md",
   src
 }) => {
-  const avatarGroupContext = _TNVQI6LFcjs.useAvatarGroup.call(void 0, );
+  const avatarGroupContext = _ALD77RKFcjs.useAvatarGroup.call(void 0, );
   if (avatarGroupContext !== null) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _RJ3ZYLJScjs.Box_default,
+      _DB7KX3J2cjs.Box_default,
       {
         position: "relative",
         dangerouslySetInlineStyle: {
@@ -88,7 +86,7 @@ var Avatar = ({
           }
         },
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _RJ3ZYLJScjs.Box_default,
+          _DB7KX3J2cjs.Box_default,
           {
             display: "flex",
             alignItems: "center",
@@ -125,4 +123,4 @@ var Avatar_default = Avatar;
 
 
 exports.Avatar_default = Avatar_default;
-//# sourceMappingURL=W74F2R45.cjs.map
+//# sourceMappingURL=5A5IBIPC.cjs.map

package/dist/__chunks/5A5IBIPC.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,eAAc;;;ADkC3S,SACE,KADF;AA5BJ,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;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,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,MAyBmB;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} as const;\n\nconst sizeToMargin = {\n  xs: -10,\n  sm: -14,\n  md: -22,\n  lg: -28,\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\";\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   *\n   * @defaultValue `md`\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\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_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\"}"]}

package/dist/__chunks/{4HCWQMZO.cjs → 6PNFY6W6.cjs}

@@ -4,26 +4,26 @@
 var _C5XPZTFOcjs = require('./C5XPZTFO.cjs');
 
 
-var _4E7A4J3Kcjs = require('./4E7A4J3K.cjs');
+var _S5CYISJEcjs = require('./S5CYISJE.cjs');
 
 
 var _DMA6PPUZcjs = require('./DMA6PPUZ.cjs');
 
 
-var _MI5OUDV4cjs = require('./MI5OUDV4.cjs');
+var _L2CARKP7cjs = require('./L2CARKP7.cjs');
 
 
-var _SND6HHALcjs = require('./SND6HHAL.cjs');
+var _JHUEQO5Qcjs = require('./JHUEQO5Q.cjs');
 
 
-var _KNFEGYQMcjs = require('./KNFEGYQM.cjs');
+var _QVR3OSXWcjs = require('./QVR3OSXW.cjs');
 
 
 
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
+var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
 
 // src/RichSelect/RichSelectBox.tsx
 
@@ -125,7 +125,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
       });
     }, []);
     const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _RJ3ZYLJScjs.Box_default, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _DB7KX3J2cjs.Box_default, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _reactariacomponents.ListBox,
         {
@@ -144,7 +144,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
         }
       ),
       !autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _RJ3ZYLJScjs.Box_default,
+        _DB7KX3J2cjs.Box_default,
         {
           backgroundColor: "white",
           display: "flex",
@@ -159,9 +159,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
             }
           },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DMA6PPUZcjs.Divider, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DMA6PPUZcjs.Divider, {}) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _RJ3ZYLJScjs.Box_default,
+              _DB7KX3J2cjs.Box_default,
               {
                 paddingY: 5,
                 marginTop: -5,
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                 justifyContent: "end",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _C5XPZTFOcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _4E7A4J3Kcjs.Button_default,
+                    _S5CYISJEcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _4E7A4J3Kcjs.Button_default,
+                    _S5CYISJEcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
   }
 );
 var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _SND6HHALcjs.RichSelectSection_default,
-  Chip: _MI5OUDV4cjs.RichSelectChip_default,
-  RadioButton: _KNFEGYQMcjs.RichSelectRadioButton_default
+  Section: _JHUEQO5Qcjs.RichSelectSection_default,
+  Chip: _L2CARKP7cjs.RichSelectChip_default,
+  RadioButton: _QVR3OSXWcjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=4HCWQMZO.cjs.map
+//# sourceMappingURL=6PNFY6W6.cjs.map

package/dist/__chunks/{BNBE2XVM.cjs → 76LTWV2Q.cjs}

@@ -10,7 +10,7 @@ var _PLUVW6AMcjs = require('./PLUVW6AM.cjs');
 var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
-var _45TMKSJQcjs = require('./45TMKSJQ.cjs');
+var _CHDS4D44cjs = require('./CHDS4D44.cjs');
 
 
 var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
@@ -61,7 +61,7 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
         _QT6IRCGWcjs.colors_module_default.whiteBackgroundColor,
         _PLUVW6AMcjs.padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
         _PLUVW6AMcjs.padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
-        _45TMKSJQcjs.rounding_module_default.roundingmd,
+        _CHDS4D44cjs.rounding_module_default.roundingmd,
         elevation_module_default.elevation400BoxShadow,
         _MF7LLV7Vcjs.layout_module_default.fullMaxHeight,
         _MF7LLV7Vcjs.layout_module_default.visibilityVisible,
@@ -77,4 +77,4 @@ var Dialog_default = Dialog;
 
 
 exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
-//# sourceMappingURL=BNBE2XVM.cjs.map
+//# sourceMappingURL=76LTWV2Q.cjs.map

package/dist/__chunks/{RCEIKIN5.js → 77FFPQY6.js}

@@ -1,10 +1,7 @@
 "use client"
-import {
-  roundingCambio
-} from "./GCE2CI4A.js";
 import {
   rounding_module_default
-} from "./EB7WKQ35.js";
+} from "./KBIW5XV4.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -99,7 +96,7 @@ var TapArea = forwardRef(
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
     const isHoveredOrFocussed = !disabled && (hovered || focussed);
-    const roundingClasses = rounding !== "none" && rounding_module_default[`rounding${roundingCambio(rounding)}`];
+    const roundingClasses = rounding !== "none" && rounding_module_default[`rounding${rounding}`];
     return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({}, accessibilityProps), {
@@ -136,4 +133,4 @@ var TapArea_default = TapArea;
 export {
   TapArea_default
 };
-//# sourceMappingURL=RCEIKIN5.js.map
+//# sourceMappingURL=77FFPQY6.js.map

package/dist/__chunks/77FFPQY6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  useReducer,\n  type AriaAttributes,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = AriaAttributes & {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * The callback to be called when the tap area is hovered\n   */\n  onMouseEnter?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * The callback to be called when the tap area is no longer hovered\n   */\n  onMouseLeave?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n  (\n    {\n      children,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullWidth = true,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      rounding = \"none\",\n      tabIndex = 0,\n      ...accessibilityProps\n    }: TapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const handleOnMouseEnter: React.MouseEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_ENTER\" });\n      onMouseEnter?.(event);\n    };\n\n    const handleOnMouseLeave: React.MouseEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_LEAVE\" });\n      onMouseLeave?.(event);\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n    const roundingClasses =\n      rounding !== \"none\" && roundingStyles[`rounding${rounding}`];\n\n    return (\n      <div\n        {...accessibilityProps}\n        aria-disabled={disabled || accessibilityProps[\"aria-disabled\"]}\n        aria-label={accessibilityLabel ?? accessibilityProps[\"aria-label\"]}\n        className={classNames(\n          styles.tapArea,\n          styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullWidth && styles.fullWidth,\n          isHoveredOrFocussed && styles.hoveredOrFocussed,\n          roundingClasses,\n        )}\n        data-testid={dataTestId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div className={classNames(styles.overlay, roundingClasses)} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,gBAAgB;;;ACNuE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADyJlT,SAuBI,KAvBJ;AA1FN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE,IAaA,QACG;AAdH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,UAAU,eAAe;AAAA,MACzB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,IArGjB,IA2FI,IAWK,+BAXL,IAWK;AAAA,MAVH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,qBAA8D,CAClE,UACG;AACH,UAAI;AAAU;AACd,eAAS,EAAE,MAAM,cAAc,CAAC;AAChC,mDAAe;AAAA,IACjB;AAEA,UAAM,qBAA8D,CAClE,UACG;AACH,UAAI;AAAU;AACd,eAAS,EAAE,MAAM,cAAc,CAAC;AAChC,mDAAe;AAAA,IACjB;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AACrD,UAAM,kBACJ,aAAa,UAAU,wBAAe,WAAW,UAAU;AAE7D,WACE;AAAA,MAAC;AAAA,uCACK,qBADL;AAAA,QAEC,iBAAe,YAAY,mBAAmB,eAAe;AAAA,QAC7D,cAAY,kDAAsB,mBAAmB,YAAY;AAAA,QACjE,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,UAC9B;AAAA,QACF;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc;AAAA,QACd,cAAc;AAAA,QACd,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB,oBAAC,SAAI,WAAW,WAAW,uBAAO,SAAS,eAAe,GAAG;AAAA,UAE9D;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/{3RDV2SM7.cjs → 7IV2L4B4.cjs}

@@ -7,10 +7,10 @@ var _PLUVW6AMcjs = require('./PLUVW6AM.cjs');
 var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
-var _45TMKSJQcjs = require('./45TMKSJQ.cjs');
+var _CHDS4D44cjs = require('./CHDS4D44.cjs');
 
 
-var _XCSW34UMcjs = require('./XCSW34UM.cjs');
+var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
 
 
 var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
@@ -83,7 +83,7 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
     _QT6IRCGWcjs.colors_module_default.cambioBlackBackgroundColor,
     _PLUVW6AMcjs.padding_module_default.paddingX2,
     _PLUVW6AMcjs.padding_module_default.paddingY2,
-    _45TMKSJQcjs.rounding_module_default.roundingsm,
+    _CHDS4D44cjs.rounding_module_default.roundingsm,
     Tooltip_module_default.tooltip
   ]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -102,7 +102,7 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
         childrenProp,
         (children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, {}),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCSW34UMcjs.Typography_default, { size: 100, color: "white", children }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCGRNBQHcjs.Typography_default, { size: 100, color: "white", children }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _E5P6WRJDcjs.OverlayVisibility,
             {
@@ -162,4 +162,4 @@ var Tooltip_default = Tooltip;
 
 
 exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
-//# sourceMappingURL=3RDV2SM7.cjs.map
+//# sourceMappingURL=7IV2L4B4.cjs.map

package/dist/__chunks/{FRR2K77P.js → 7JPWJT4Z.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   RadioButton_default
-} from "./WBMHYMAT.js";
+} from "./44BDRP6O.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
 export {
   RichSelectRadioButton_default
 };
-//# sourceMappingURL=FRR2K77P.js.map
+//# sourceMappingURL=7JPWJT4Z.js.map

package/dist/__chunks/{TNVQI6LF.cjs → ALD77RKF.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
+var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
 
 // src/AvatarGroup/AvatarGroup.tsx
 
@@ -19,9 +19,8 @@ function AvatarGroup({
   orientation = "standard",
   children
 }) {
-  const parsedSize = size === "xl" ? "lg" : size;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarGroupContext.Provider, { value: { size: parsedSize, orientation }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _RJ3ZYLJScjs.Box_default,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarGroupContext.Provider, { value: { size, orientation }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _DB7KX3J2cjs.Box_default,
     {
       display: "flex",
       justifyContent: orientation === "standard" ? "start" : "end",
@@ -40,4 +39,4 @@ AvatarGroup.displayName = "AvatarGroup";
 
 
 exports.useAvatarGroup = useAvatarGroup; exports.AvatarGroup = AvatarGroup;
-//# sourceMappingURL=TNVQI6LF.cjs.map
+//# sourceMappingURL=ALD77RKF.cjs.map

package/dist/__chunks/ALD77RKF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAgED;AArDN,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,GAyBiB;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\";\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   *\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/{RGOIFORP.js → AWZCK6T3.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Box_default
-} from "./GCE2CI4A.js";
+} from "./J6DAGNNN.js";
 
 // src/Card/Card.tsx
 import { jsx } from "react/jsx-runtime";
@@ -27,4 +27,4 @@ function Card({
 export {
   Card
 };
-//# sourceMappingURL=RGOIFORP.js.map
+//# sourceMappingURL=AWZCK6T3.js.map

package/dist/__chunks/{TSR66LRL.js → B4BYSLWK.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   Box_default
-} from "./GCE2CI4A.js";
+} from "./J6DAGNNN.js";
 import {
   Typography_default
-} from "./YAM7DAOZ.js";
+} from "./2IXPTAJD.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -32,7 +32,6 @@ var TextArea = forwardRef(
     maxLength = 1024,
     placeholder = "",
     rows = 3,
-    size = "md",
     value = "",
     onChange
   }, forwardedRef) {
@@ -59,7 +58,6 @@ var TextArea = forwardRef(
             "textarea",
             {
               "data-testid": dataTestId,
-              "data-size": size,
               ref: forwardedRef,
               className: classNames(TextField_module_default.textfield, TextArea_module_default.textarea, {
                 [TextField_module_default.inputError]: errorText
@@ -91,4 +89,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=TSR66LRL.js.map
+//# sourceMappingURL=B4BYSLWK.js.map

package/dist/__chunks/B4BYSLWK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n        position=\"relative\"\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={100}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(textFieldStyles.textfield, styles.textarea, {\n              [textFieldStyles.inputError]: errorText,\n            })}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_zkjej_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_wgza3_1\",\"label\":\"_label_wgza3_22\",\"md\":\"_md_wgza3_26\",\"height\":\"_height_wgza3_30\",\"inputError\":\"_inputError_wgza3_34\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,oBAAmB;;;ACA5C,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,uBAAsB;;;AFKhQ,OAAO,gBAAgB;AA4EjB,SAcM,KAdN;AAvBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAS;AAAA,QAET;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW,WAAW,yBAAgB,WAAW,wBAAO,UAAU;AAAA,gBAChE,CAAC,yBAAgB,UAAU,GAAG;AAAA,cAChC,CAAC;AAAA,cACD,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}

package/dist/__chunks/{23QITUST.js → BBDZRW7U.js}

@@ -8,4 +8,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=23QITUST.js.map
+//# sourceMappingURL=BBDZRW7U.js.map

package/dist/__chunks/{23QITUST.js.map → BBDZRW7U.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 05 Apr 2024 19:24:55 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 08 Apr 2024 16:35:22 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{4325RESS.js → BKBUTHI5.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Box_default
-} from "./GCE2CI4A.js";
+} from "./J6DAGNNN.js";
 
 // src/AvatarGroup/AvatarGroup.tsx
 import {
@@ -19,8 +19,7 @@ function AvatarGroup({
   orientation = "standard",
   children
 }) {
-  const parsedSize = size === "xl" ? "lg" : size;
-  return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size: parsedSize, orientation }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size, orientation }, children: /* @__PURE__ */ jsx(
     Box_default,
     {
       display: "flex",
@@ -40,4 +39,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=4325RESS.js.map
+//# sourceMappingURL=BKBUTHI5.js.map

package/dist/__chunks/BKBUTHI5.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\";\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   *\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;AAgED;AArDN,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,GAyBiB;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":[]}