@cambly/syntax-core 10.7.0-beta.1 → 10.8.0

package/dist/__chunks/{L44YLKF4.cjs.map → P7UEPXTA.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL0E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AD8FvW,SAcQ,KAdR;AAhFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,yBAAO,IAAI;AAAA,cACX,yBAAO,GAAG,YAAY;AAAA,cACtB;AAAA,gBACE,CAAC,yBAAO,UAAU,GAAG;AAAA,cACvB;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ","sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\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    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          styles[size],\n          styles[`${size}Height`],\n          {\n            [styles.inputError]: errorText,\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\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","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"]}
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AD8FxW,SAcQ,KAdR;AAhFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,yBAAO,IAAI;AAAA,cACX,yBAAO,GAAG,YAAY;AAAA,cACtB;AAAA,gBACE,CAAC,yBAAO,UAAU,GAAG;AAAA,cACvB;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ","sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\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    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          styles[size],\n          styles[`${size}Height`],\n          {\n            [styles.inputError]: errorText,\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\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","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"]}

package/dist/__chunks/{4MQD66CF.js → PKXXQ3OV.js}

@@ -12,4 +12,4 @@ var iconSize_default = iconSize;
 export {
   iconSize_default
 };
-//# sourceMappingURL=4MQD66CF.js.map
+//# sourceMappingURL=PKXXQ3OV.js.map

package/dist/__chunks/PKXXQ3OV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nexport default iconSize;\n"],"mappings":";AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,kBAAiB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEntB,IAAM,WAAW;AAAA,EACf,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/{CXXS7665.js → PLF2SHYM.js}

@@ -1,9 +1,9 @@
 import {
   Box_default
-} from "./OETPIE6V.js";
+} from "./I5W7ECUO.js";
 import {
   Typography_default
-} from "./EWZKTMOO.js";
+} from "./TGGJZ5GF.js";
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -50,4 +50,4 @@ var Badge_default = Badge;
 export {
   Badge_default
 };
-//# sourceMappingURL=CXXS7665.js.map
+//# sourceMappingURL=PLF2SHYM.js.map

package/dist/__chunks/PLF2SHYM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst BadgeColor = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof BadgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"primary700\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"primary700\"\n   */\n  color?: (typeof BadgeColor)[number];\n}): JSX.Element => (\n  <Box\n    display=\"inlineBlock\"\n    paddingX={2}\n    paddingY={1}\n    rounding=\"full\"\n    backgroundColor={color}\n  >\n    <Typography color={textColorForBackgroundColor(color)} size={100}>\n      <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n        {Icon && <Icon className={styles.icon} />}\n        <Typography\n          color={textColorForBackgroundColor(color)}\n          size={100}\n          weight=\"bold\"\n        >\n          {text}\n        </Typography>\n      </Box>\n    </Typography>\n  </Box>\n);\n\nexport default Badge;\n"],"mappings":";;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0D1H,SACW,KADX;AA3CN,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAgBE;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAS;AAAA,IACT,iBAAiB;AAAA,IAEjB,8BAAC,sBAAW,OAAO,4BAA4B,KAAK,GAAG,MAAM,KAC3D,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,cAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,4BAA4B,KAAK;AAAA,UACxC,MAAM;AAAA,UACN,QAAO;AAAA,UAEN;AAAA;AAAA,MACH;AAAA,OACF,GACF;AAAA;AACF;AAGF,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/{IOQXUCI4.js → PTWXXDFF.js}

@@ -4,4 +4,4 @@ var layout_module_default = { "fullWidth": "_fullWidth_1ey57_1", "fullMaxWidth":
 export {
   layout_module_default
 };
-//# sourceMappingURL=IOQXUCI4.js.map
+//# sourceMappingURL=PTWXXDFF.js.map

package/dist/__chunks/PTWXXDFF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../layout.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/layout.module.css\"; export default {\"fullWidth\":\"_fullWidth_1ey57_1\",\"fullMaxWidth\":\"_fullMaxWidth_1ey57_5\",\"fullMaxHeight\":\"_fullMaxHeight_1ey57_9\",\"visibilityVisible\":\"_visibilityVisible_1ey57_13\"}"],"mappings":";AAAqF,IAAO,wBAAQ,EAAC,aAAY,sBAAqB,gBAAe,yBAAwB,iBAAgB,0BAAyB,qBAAoB,8BAA6B;","names":[]}

package/dist/__chunks/{LHWRDJUE.cjs → QJI4G5FP.cjs}

@@ -79,4 +79,4 @@ var Triggerable_default = Triggerable;
 
 
 exports.Triggerable_default = Triggerable_default;
-//# sourceMappingURL=LHWRDJUE.cjs.map
+//# sourceMappingURL=QJI4G5FP.cjs.map

package/dist/__chunks/{LHWRDJUE.cjs.map → QJI4G5FP.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react-aria-utils/Triggerable.tsx","css-module:./Triggerable.module.css#css-module"],"names":["Triggerable"],"mappings":";;;;;;;;;;AAAA,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,WAAW,cAAc,gBAAgB;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,cAAc,iBAAiB;AACxC,SAAS,2BAA2B;;;ACZsE,IAAO,6BAAQ,EAAC,WAAU,mBAAkB;;;ADiElJ;AA3CJ,SAAS,aAAgB,UAAkC,WAAmB;AAE5E,SAAO,MAAM,aAAa,UAAU;AAAA,IAClC,KAAK,SAAS,MAAM,UAAa,WAAW,SAAS,GAAG,IAAI;AAAA,EAC9D,CAAC;AACH;AAEA,IAAM,cAAc,WAMlB,SAASA,aAAY,OAAO,cAAc;AAC1C,QAAM,EAAE,UAAU,UAAU,WAAW,IAAI;AAC3C,QAAM,gBAAgB,OAAoB,IAAI;AAC9C,QAAM,WAAW,aAA0B,IAAI;AAC/C,QAAM,mBAAmB,oBAAoB,aAAa;AAC1D,QAAM,eAAe,mBAAmB,WAAW;AACnD,QAAM,EAAE,eAAe,IAAI,aAAa,EAAE,WAAW,GAAG,YAAY;AACpE,QAAM,EAAE,YAAY,IAAI;AAAA,IACtB,EAAE,aAAa,QAAQ,WAAW;AAAA,IAClC;AAAA,EACF;AACA,QAAM,EAAE,WAAW,IAAI,SAAS,EAAE,WAAW,CAAC;AAE9C,QACE,qBADM,WAAS,QAAQ,WAAW,QAhDtC,IAiDI,IAD8C,gCAC9C,IAD8C,CAAxC,WAAS,UAAQ,aAAW;AAEpC,QAAM,wBAAwB,EAAE,SAAS,QAAQ,WAAW,QAAQ;AAEpE,QAAM,QAAQ,WAAW,aAAa,UAAU,QAAQ,IAAI;AAC5D,gCAA8B,uBAAuB,UAAU;AAAA,IAC7D,SAAS;AAAA,EACX,CAAC;AAED,QAAM,sBAAsB,WAAW,0BAA0B;AAEjE,sBAAoB,cAAc,OAAO;AAAA,IACvC,MAAM,MAAM,oBAAoB,KAAK;AAAA,IACrC,OAAO,MAAM,oBAAoB,MAAM;AAAA,EACzC,EAAE;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,OACD;AAAA,MACF;AAAA,MACA,mBAAmB,CAAC,IAAI;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,QACE,WAAW,2BAAO;AAAA,QAClB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF,IAdD;AAAA,MAeC,UAAU,mBAAmB,SAAY;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,sBAAQ","sourcesContent":["import React, {\n  forwardRef,\n  useImperativeHandle,\n  type ReactElement,\n  type Ref,\n  type RefAttributes,\n  useContext,\n  useRef,\n} from \"react\";\nimport { mergeProps, useButton, useFocusable, useHover } from \"react-aria\";\nimport { OverlayTriggerStateContext } from \"react-aria-components\";\nimport { useObjectRef, mergeRefs } from \"@react-aria/utils\";\nimport { useHasTabbableChild } from \"@react-aria/focus\";\nimport { useDomRefSyntheticEventBridge } from \"./useDomRefSyntheticEventBridge\";\nimport styles from \"./Triggerable.module.css\";\n\nexport type OverlayHandlerRef = {\n  open?: () => void;\n  close?: () => void;\n};\n\ntype ReactElementWithRef<T = unknown> = ReactElement & RefAttributes<T>;\nfunction cloneWithRef<T>(children: ReactElementWithRef<T>, parentRef: Ref<T>) {\n  // No need for the isValidElement check since children is already typed as a ReactElement\n  return React.cloneElement(children, {\n    ref: children.ref ? mergeRefs<T>(parentRef, children.ref) : parentRef,\n  });\n}\n\nconst Triggerable = forwardRef<\n  OverlayHandlerRef,\n  {\n    children?: ReactElement | (ReactElement & { ref?: Ref<Element> });\n    disabled?: boolean;\n  }\n>(function Triggerable(props, forwardedRef) {\n  const { children, disabled: isDisabled } = props;\n  const wrapperDomRef = useRef<HTMLElement>(null);\n  const childRef = useObjectRef<HTMLElement>(null);\n  const hasTabbableChild = useHasTabbableChild(wrapperDomRef);\n  const focusableRef = hasTabbableChild ? childRef : wrapperDomRef;\n  const { focusableProps } = useFocusable({ isDisabled }, focusableRef);\n  const { buttonProps } = useButton(\n    { elementType: \"span\", isDisabled },\n    focusableRef,\n  );\n  const { hoverProps } = useHover({ isDisabled });\n  // focus handlers are attached to tabbable child if present\n  const { onFocus, onBlur, onKeyDown, onKeyUp, ...otherFocusableProps } =\n    focusableProps;\n  const focusableHandlerProps = { onFocus, onBlur, onKeyDown, onKeyUp };\n  // attach focus handlers to tabbable child if present\n  const child = children ? cloneWithRef(children, childRef) : children;\n  useDomRefSyntheticEventBridge(focusableHandlerProps, childRef, {\n    enabled: hasTabbableChild,\n  });\n\n  const overlayTriggerState = useContext(OverlayTriggerStateContext);\n  // Expose open and close methods from any overlay context to parent component\n  useImperativeHandle(forwardedRef, () => ({\n    open: () => overlayTriggerState.open(),\n    close: () => overlayTriggerState.close(),\n  }));\n\n  return (\n    <span\n      ref={wrapperDomRef}\n      {...mergeProps(\n        buttonProps,\n        hasTabbableChild ? {} : focusableHandlerProps,\n        otherFocusableProps,\n        hoverProps,\n        {\n          className: styles.trigger,\n          style: {\n            display: \"inline-block\",\n            verticalAlign: \"text-top\",\n          },\n        },\n      )}\n      tabIndex={hasTabbableChild ? undefined : 0}\n    >\n      {child}\n    </span>\n  );\n});\n\nexport default Triggerable;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/react-aria-utils/Triggerable.module.css\"; export default {\"trigger\":\"_trigger_1efnf_1\"}"]}
+{"version":3,"sources":["../../src/react-aria-utils/Triggerable.tsx","css-module:./Triggerable.module.css#css-module"],"names":["Triggerable"],"mappings":";;;;;;;;;;AAAA,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,WAAW,cAAc,gBAAgB;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,cAAc,iBAAiB;AACxC,SAAS,2BAA2B;;;ACZuE,IAAO,6BAAQ,EAAC,WAAU,mBAAkB;;;ADiEnJ;AA3CJ,SAAS,aAAgB,UAAkC,WAAmB;AAE5E,SAAO,MAAM,aAAa,UAAU;AAAA,IAClC,KAAK,SAAS,MAAM,UAAa,WAAW,SAAS,GAAG,IAAI;AAAA,EAC9D,CAAC;AACH;AAEA,IAAM,cAAc,WAMlB,SAASA,aAAY,OAAO,cAAc;AAC1C,QAAM,EAAE,UAAU,UAAU,WAAW,IAAI;AAC3C,QAAM,gBAAgB,OAAoB,IAAI;AAC9C,QAAM,WAAW,aAA0B,IAAI;AAC/C,QAAM,mBAAmB,oBAAoB,aAAa;AAC1D,QAAM,eAAe,mBAAmB,WAAW;AACnD,QAAM,EAAE,eAAe,IAAI,aAAa,EAAE,WAAW,GAAG,YAAY;AACpE,QAAM,EAAE,YAAY,IAAI;AAAA,IACtB,EAAE,aAAa,QAAQ,WAAW;AAAA,IAClC;AAAA,EACF;AACA,QAAM,EAAE,WAAW,IAAI,SAAS,EAAE,WAAW,CAAC;AAE9C,QACE,qBADM,WAAS,QAAQ,WAAW,QAhDtC,IAiDI,IAD8C,gCAC9C,IAD8C,CAAxC,WAAS,UAAQ,aAAW;AAEpC,QAAM,wBAAwB,EAAE,SAAS,QAAQ,WAAW,QAAQ;AAEpE,QAAM,QAAQ,WAAW,aAAa,UAAU,QAAQ,IAAI;AAC5D,gCAA8B,uBAAuB,UAAU;AAAA,IAC7D,SAAS;AAAA,EACX,CAAC;AAED,QAAM,sBAAsB,WAAW,0BAA0B;AAEjE,sBAAoB,cAAc,OAAO;AAAA,IACvC,MAAM,MAAM,oBAAoB,KAAK;AAAA,IACrC,OAAO,MAAM,oBAAoB,MAAM;AAAA,EACzC,EAAE;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,OACD;AAAA,MACF;AAAA,MACA,mBAAmB,CAAC,IAAI;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,QACE,WAAW,2BAAO;AAAA,QAClB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF,IAdD;AAAA,MAeC,UAAU,mBAAmB,SAAY;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,sBAAQ","sourcesContent":["import React, {\n  forwardRef,\n  useImperativeHandle,\n  type ReactElement,\n  type Ref,\n  type RefAttributes,\n  useContext,\n  useRef,\n} from \"react\";\nimport { mergeProps, useButton, useFocusable, useHover } from \"react-aria\";\nimport { OverlayTriggerStateContext } from \"react-aria-components\";\nimport { useObjectRef, mergeRefs } from \"@react-aria/utils\";\nimport { useHasTabbableChild } from \"@react-aria/focus\";\nimport { useDomRefSyntheticEventBridge } from \"./useDomRefSyntheticEventBridge\";\nimport styles from \"./Triggerable.module.css\";\n\nexport type OverlayHandlerRef = {\n  open?: () => void;\n  close?: () => void;\n};\n\ntype ReactElementWithRef<T = unknown> = ReactElement & RefAttributes<T>;\nfunction cloneWithRef<T>(children: ReactElementWithRef<T>, parentRef: Ref<T>) {\n  // No need for the isValidElement check since children is already typed as a ReactElement\n  return React.cloneElement(children, {\n    ref: children.ref ? mergeRefs<T>(parentRef, children.ref) : parentRef,\n  });\n}\n\nconst Triggerable = forwardRef<\n  OverlayHandlerRef,\n  {\n    children?: ReactElement | (ReactElement & { ref?: Ref<Element> });\n    disabled?: boolean;\n  }\n>(function Triggerable(props, forwardedRef) {\n  const { children, disabled: isDisabled } = props;\n  const wrapperDomRef = useRef<HTMLElement>(null);\n  const childRef = useObjectRef<HTMLElement>(null);\n  const hasTabbableChild = useHasTabbableChild(wrapperDomRef);\n  const focusableRef = hasTabbableChild ? childRef : wrapperDomRef;\n  const { focusableProps } = useFocusable({ isDisabled }, focusableRef);\n  const { buttonProps } = useButton(\n    { elementType: \"span\", isDisabled },\n    focusableRef,\n  );\n  const { hoverProps } = useHover({ isDisabled });\n  // focus handlers are attached to tabbable child if present\n  const { onFocus, onBlur, onKeyDown, onKeyUp, ...otherFocusableProps } =\n    focusableProps;\n  const focusableHandlerProps = { onFocus, onBlur, onKeyDown, onKeyUp };\n  // attach focus handlers to tabbable child if present\n  const child = children ? cloneWithRef(children, childRef) : children;\n  useDomRefSyntheticEventBridge(focusableHandlerProps, childRef, {\n    enabled: hasTabbableChild,\n  });\n\n  const overlayTriggerState = useContext(OverlayTriggerStateContext);\n  // Expose open and close methods from any overlay context to parent component\n  useImperativeHandle(forwardedRef, () => ({\n    open: () => overlayTriggerState.open(),\n    close: () => overlayTriggerState.close(),\n  }));\n\n  return (\n    <span\n      ref={wrapperDomRef}\n      {...mergeProps(\n        buttonProps,\n        hasTabbableChild ? {} : focusableHandlerProps,\n        otherFocusableProps,\n        hoverProps,\n        {\n          className: styles.trigger,\n          style: {\n            display: \"inline-block\",\n            verticalAlign: \"text-top\",\n          },\n        },\n      )}\n      tabIndex={hasTabbableChild ? undefined : 0}\n    >\n      {child}\n    </span>\n  );\n});\n\nexport default Triggerable;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/react-aria-utils/Triggerable.module.css\"; export default {\"trigger\":\"_trigger_1efnf_1\"}"]}

package/dist/__chunks/{VE23NE5H.cjs → R7VED2O3.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _EMQGSVJTcjs = require('./EMQGSVJT.cjs');
+var _33HJ72Y2cjs = require('./33HJ72Y2.cjs');
 
 
 
@@ -8,11 +8,11 @@ var _PSWX5DBCcjs = require('./PSWX5DBC.cjs');
 
 
 
-var _AZSWRSRLcjs = require('./AZSWRSRL.cjs');
+var _VS4SS6B3cjs = require('./VS4SS6B3.cjs');
 
 
 
-var _V73UH6T4cjs = require('./V73UH6T4.cjs');
+var _MF7Q6ZSWcjs = require('./MF7Q6ZSW.cjs');
 
 
 var _5NIFOD6Kcjs = require('./5NIFOD6K.cjs');
@@ -53,8 +53,8 @@ var IconButton = _react.forwardRef.call(void 0,
   }, ref) => {
     const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
     const { themeName } = _5NIFOD6Kcjs.useTheme.call(void 0, );
-    const foregroundColorClass = themeName === "classic" ? _AZSWRSRLcjs.classicForegroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _AZSWRSRLcjs.cambioForegroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
-    const backgroundColorClass = themeName === "classic" ? _V73UH6T4cjs.classicBackgroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _V73UH6T4cjs.cambioBackgroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    const foregroundColorClass = themeName === "classic" ? _VS4SS6B3cjs.classicForegroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _VS4SS6B3cjs.cambioForegroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    const backgroundColorClass = themeName === "classic" ? _MF7Q6ZSWcjs.classicBackgroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _MF7Q6ZSWcjs.cambioBackgroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
@@ -70,8 +70,8 @@ var IconButton = _react.forwardRef.call(void 0,
           backgroundColorClass,
           themeName === "classic" ? IconButton_module_default[size] : IconButton_module_default[`${size}Cambio`],
           {
-            [_EMQGSVJTcjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
-            [_EMQGSVJTcjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
+            [_33HJ72Y2cjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
+            [_33HJ72Y2cjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
             [IconButton_module_default.iconButtonNoBorder]: themeName === "classic" && !["secondary", "destructive-secondary"].includes(color) || themeName === "cambio"
           }
         ),
@@ -92,4 +92,4 @@ var IconButton_default = IconButton;
 
 
 exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=VE23NE5H.cjs.map
+//# sourceMappingURL=R7VED2O3.cjs.map

package/dist/__chunks/{BULDMP67.cjs.map → R7VED2O3.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLiE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD6JplB;AA5IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA4EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n  sm: styles.smIconCambio,\n  md: styles.mdIconCambio,\n  lg: styles.lgIconCambio,\n  xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"inverse\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.iconButtonNoBorder]:\n              (themeName === \"classic\" &&\n                ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n              themeName === \"cambio\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={\n            themeName === \"classic\"\n              ? classicIconSize[size]\n              : cambioIconSize[size]\n          }\n        />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"]}
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD6JrlB;AA5IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA4EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n  sm: styles.smIconCambio,\n  md: styles.mdIconCambio,\n  lg: styles.lgIconCambio,\n  xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"inverse\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.iconButtonNoBorder]:\n              (themeName === \"classic\" &&\n                ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n              themeName === \"cambio\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={\n            themeName === \"classic\"\n              ? classicIconSize[size]\n              : cambioIconSize[size]\n          }\n        />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"]}

package/dist/__chunks/{N5676ZLQ.js → RMC2RSHW.js}

@@ -1,12 +1,12 @@
 import {
   layout_module_default
-} from "./IOQXUCI4.js";
+} from "./PTWXXDFF.js";
 import {
   Box_module_default
-} from "./TDW36DTR.js";
+} from "./KMIZI5PW.js";
 import {
   Typography_default
-} from "./2DQWGEPP.js";
+} from "./TGGJZ5GF.js";
 
 // src/RichSelect/RichSelectSection.tsx
 import { forwardRef } from "react";
@@ -49,4 +49,4 @@ var RichSelectSection_default = forwardRef(
 export {
   RichSelectSection_default
 };
-//# sourceMappingURL=N5676ZLQ.js.map
+//# sourceMappingURL=RMC2RSHW.js.map

package/dist/__chunks/{K5A7CZTX.js → SCOOHJY4.js}

@@ -1,9 +1,9 @@
 import {
   useAvatarGroup
-} from "./OXTDWWXG.js";
+} from "./ZUFGJYFB.js";
 import {
   Box_default
-} from "./OETPIE6V.js";
+} from "./I5W7ECUO.js";
 import {
   __spreadValues
 } from "./LULBCTQR.js";
@@ -116,4 +116,4 @@ var Avatar_default = Avatar;
 export {
   Avatar_default
 };
-//# sourceMappingURL=K5A7CZTX.js.map
+//# sourceMappingURL=SCOOHJY4.js.map

package/dist/__chunks/{K5A7CZTX.js.map → SCOOHJY4.js.map}

@@ -1 +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  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: 12, marginInlineEnd: 12, height: 16, width: 16 },\n} as const;\n\nconst sizeToMargin = {\n  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -88,\n} as const;\n\nfunction AvatarInternal({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  accessibilityLabel: string;\n  icon?: React.ReactElement;\n  size?: \"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(styles.avatarImage, styles[size])}\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   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"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            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 \"/Users/christian/cambly/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_vflu6_1\",\"avatarImage\":\"_avatarImage_vflu6_5\",\"sm\":\"_sm_vflu6_14\",\"md\":\"_md_vflu6_19\",\"lg\":\"_lg_vflu6_24\",\"xl\":\"_xl_vflu6_29\"}"],"mappings":";;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADgCtP,SACE,KADF;AA1BJ,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,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,IAAI,iBAAiB,IAAI,QAAQ,IAAI,OAAO,GAAG;AAC/D;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,OAAO;AAAA,EACP;AACF,GAKiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW,WAAW,sBAAO,aAAa,sBAAO,IAAI,CAAC;AAAA;AAAA,IACxD;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,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":[]}
+{"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  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: 12, marginInlineEnd: 12, height: 16, width: 16 },\n} as const;\n\nconst sizeToMargin = {\n  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -88,\n} as const;\n\nfunction AvatarInternal({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  accessibilityLabel: string;\n  icon?: React.ReactElement;\n  size?: \"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(styles.avatarImage, styles[size])}\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   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"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            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_vflu6_1\",\"avatarImage\":\"_avatarImage_vflu6_5\",\"sm\":\"_sm_vflu6_14\",\"md\":\"_md_vflu6_19\",\"lg\":\"_lg_vflu6_24\",\"xl\":\"_xl_vflu6_29\"}"],"mappings":";;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADgCvP,SACE,KADF;AA1BJ,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,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,IAAI,iBAAiB,IAAI,QAAQ,IAAI,OAAO,GAAG;AAC/D;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,OAAO;AAAA,EACP;AACF,GAKiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW,WAAW,sBAAO,aAAa,sBAAO,IAAI,CAAC;AAAA;AAAA,IACxD;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,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/{52QJZATG.cjs → SPWDKPHT.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SKKCLMG7cjs = require('./SKKCLMG7.cjs');
+var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
 // src/Card/Card.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -15,7 +15,7 @@ function Card({
     lg: 744
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _SKKCLMG7cjs.Box_default,
+    _SZCVEBN2cjs.Box_default,
     {
       rounding: "lg",
       padding: 5,
@@ -33,4 +33,4 @@ function Card({
 
 
 exports.Card = Card;
-//# sourceMappingURL=52QJZATG.cjs.map
+//# sourceMappingURL=SPWDKPHT.cjs.map

package/dist/__chunks/{SW6BBR4M.js → SSFANAKU.js}

@@ -1,28 +1,28 @@
 import {
   ButtonGroup_default
-} from "./TH7Z7WTQ.js";
+} from "./IISMRA4R.js";
 import {
   Button_default
-} from "./YIZDYHUE.js";
+} from "./5WQ23BQE.js";
 import {
   Divider
-} from "./BXCLZFW3.js";
+} from "./6VWFOSQZ.js";
 import {
   RichSelectChip_default
-} from "./EH5FEWYB.js";
+} from "./LIP6F5HL.js";
 import {
   RichSelectSection_default
-} from "./FJFRNV7T.js";
+} from "./RMC2RSHW.js";
 import {
   RichSelectRadioButton_default
-} from "./JAOPHWQI.js";
+} from "./YCBSKN3Q.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
-} from "./37XWZP7Y.js";
+} from "./Y6L6EOCB.js";
 import {
   Box_default
-} from "./OETPIE6V.js";
+} from "./I5W7ECUO.js";
 
 // src/RichSelect/RichSelectBox.tsx
 import {
@@ -207,4 +207,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=SW6BBR4M.js.map
+//# sourceMappingURL=SSFANAKU.js.map

package/dist/__chunks/{P4BVQ554.cjs → SZCVEBN2.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _ZJGZQ6JTcjs = require('./ZJGZQ6JT.cjs');
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 
 
-var _JEXRUKQMcjs = require('./JEXRUKQM.cjs');
+var _TF76F532cjs = require('./TF76F532.cjs');
 
 
 
@@ -149,7 +149,7 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
       smAlignItems && Box_module_default[`alignItems${smAlignItems}Small`],
       lgAlignItems && Box_module_default[`alignItems${lgAlignItems}Large`],
       alignSelf && Box_module_default[`alignSelf${alignSelf}`],
-      backgroundColor && _JEXRUKQMcjs.colors_module_default[`${backgroundColor}BackgroundColor`],
+      backgroundColor && _TF76F532cjs.colors_module_default[`${backgroundColor}BackgroundColor`],
       direction && Box_module_default[direction],
       smDirection && Box_module_default[`${smDirection}Small`],
       lgDirection && Box_module_default[`${lgDirection}Large`],
@@ -199,7 +199,7 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
       smJustifyContent && Box_module_default[`justifyContent${smJustifyContent}Small`],
       lgJustifyContent && Box_module_default[`justifyContent${lgJustifyContent}Large`],
       position && position !== "static" && Box_module_default[position],
-      rounding && rounding !== "none" && _ZJGZQ6JTcjs.rounding_module_default[`rounding${rounding}`],
+      rounding && rounding !== "none" && _7GJ2SD7Ocjs.rounding_module_default[`rounding${rounding}`],
       overflow && Box_module_default[`overflow${overflow}`],
       overflowX && Box_module_default[`overflowX${overflowX}`],
       overflowY && Box_module_default[`overflowY${overflowY}`]
@@ -226,4 +226,4 @@ var Box_default = Box;
 
 
 exports.Box_default = Box_default;
-//# sourceMappingURL=P4BVQ554.cjs.map
+//# sourceMappingURL=SZCVEBN2.cjs.map