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

package/dist/__chunks/2GVCDQZ4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:../Button/Button.module.css#css-module","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACDoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,uBAAsB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,kBAAiB,6BAA4B,8BAA6B,yCAAwC,6BAA4B,wCAAuC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACA5nB,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFwGnL,SAwBI,KAxBJ;AAlBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,eAAe,GAAG,UAAU;AAAA,YAC1C,CAAC,sBAAa,0BAA0B,GACtC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC;AAAA;AAAA,UACzD;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,0BAA0B,KAAK;AAAA,cACtC,MAAM,oBAAY,IAAI;AAAA,cAEtB,8BAAC,UAAK,OAAO,EAAE,YAAY,IAAI,GAAI,gBAAK;AAAA;AAAA,UAC1C;AAAA,UACC,WACC,oBAAC,WAAQ,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA,IAEvE;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport backgroundColor from \"../colors/backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport foregroundTypographyColor from \"../colors/foregroundTypographyColor\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\n\nimport styles from \"./LinkButton.module.css\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\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  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColor(color),\n          backgroundColor(color),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.secondaryBorder]: color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && (\n          <StartIcon\n            className={classNames(buttonStyles.icon, iconSize[size])}\n          />\n        )}\n        <Typography\n          color={foregroundTypographyColor(color)}\n          size={textVariant[size]}\n        >\n          <span style={{ fontWeight: 500 }}>{text}</span>\n        </Typography>\n        {EndIcon && (\n          <EndIcon className={classNames(buttonStyles.icon, iconSize[size])} />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1xp8u_1\",\"buttonGap\":\"_buttonGap_1xp8u_10\",\"fullWidth\":\"_fullWidth_1xp8u_51\",\"sm\":\"_sm_1xp8u_55\",\"md\":\"_md_1xp8u_61\",\"lg\":\"_lg_1xp8u_67\",\"icon\":\"_icon_1xp8u_73\",\"smIcon\":\"_smIcon_1xp8u_77\",\"mdIcon\":\"_mdIcon_1xp8u_84\",\"lgIcon\":\"_lgIcon_1xp8u_91\",\"secondaryBorder\":\"_secondaryBorder_1xp8u_98\",\"tertiaryBorder\":\"_tertiaryBorder_1xp8u_102\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1xp8u_106\",\"tertiaryDestructiveBorder\":\"_tertiaryDestructiveBorder_1xp8u_110\",\"loading\":\"_loading_1xp8u_124\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1xp8u_1\",\"loadingCircle\":\"_loadingCircle_1xp8u_128\"}","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}

package/dist/__chunks/2HUCEVZV.js

@@ -1,151 +0,0 @@
-import {
-  loadingIconSize_default
-} from "./CGFXAKKI.js";
-import {
-  textVariant_default
-} from "./JXZMI4WT.js";
-import {
-  iconSize_default
-} from "./QDQHT3NE.js";
-import {
-  cambioColor,
-  classicColor
-} from "./4W3N77NV.js";
-import {
-  classicSize
-} from "./CUAJNXCA.js";
-import {
-  cambioForegroundColor,
-  classicForegroundColor
-} from "./TT5MGS4F.js";
-import {
-  cambioBackgroundColor,
-  classicBackgroundColor
-} from "./YKRP6D72.js";
-import {
-  useTheme
-} from "./Z3HVCIFG.js";
-import {
-  Box_default
-} from "./LOTC75LA.js";
-import {
-  Typography_default
-} from "./2DQWGEPP.js";
-import {
-  useIsHydrated
-} from "./YJ7YDIGB.js";
-
-// src/Button/Button.tsx
-import { forwardRef } from "react";
-import classNames from "classnames";
-
-// css-module:./Button.module.css#css-module
-var Button_module_default = { "button": "_button_zdkdz_1", "buttonGap": "_buttonGap_zdkdz_9", "fullWidth": "_fullWidth_zdkdz_50", "sm": "_sm_zdkdz_54", "md": "_md_zdkdz_61", "lg": "_lg_zdkdz_68", "smCambio": "_smCambio_zdkdz_75", "mdCambio": "_mdCambio_zdkdz_81", "lgCambio": "_lgCambio_zdkdz_87", "xlCambio": "_xlCambio_zdkdz_93", "icon": "_icon_zdkdz_99", "smIcon": "_smIcon_zdkdz_103", "mdIcon": "_mdIcon_zdkdz_110", "lgIcon": "_lgIcon_zdkdz_117", "secondaryBorder": "_secondaryBorder_zdkdz_124", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_zdkdz_128", "cambioSecondaryBorder": "_cambioSecondaryBorder_zdkdz_132", "cambioSecondaryDestructiveBorder": "_cambioSecondaryDestructiveBorder_zdkdz_136", "cambioSecondarySuccessBorder": "_cambioSecondarySuccessBorder_zdkdz_140", "loading": "_loading_zdkdz_154", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_zdkdz_1", "loadingCircle": "_loadingCircle_zdkdz_158" };
-
-// src/Button/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = forwardRef(
-  ({
-    "data-testid": dataTestId,
-    text,
-    loadingText,
-    color = "primary",
-    size = "md",
-    accessibilityLabel,
-    disabled = false,
-    loading = false,
-    fullWidth = false,
-    startIcon: StartIcon,
-    endIcon: EndIcon,
-    onClick,
-    tooltip,
-    type = "button"
-  }, ref) => {
-    const isHydrated = useIsHydrated();
-    const { themeName } = useTheme();
-    const foregroundColorClass = themeName === "classic" ? classicForegroundColor(classicColor(color)) : cambioForegroundColor(cambioColor(color));
-    const backgroundColorClass = themeName === "classic" ? classicBackgroundColor(classicColor(color)) : cambioBackgroundColor(cambioColor(color));
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-testid": dataTestId,
-        ref,
-        "aria-label": accessibilityLabel,
-        type,
-        title: tooltip,
-        disabled: !isHydrated || disabled || loading,
-        onClick,
-        className: classNames(
-          Button_module_default.button,
-          foregroundColorClass,
-          backgroundColorClass,
-          themeName === "classic" ? Button_module_default[classicSize(size)] : Button_module_default[`${size}Cambio`],
-          {
-            [Button_module_default.fullWidth]: fullWidth,
-            [Button_module_default.buttonGap]: themeName === "classic" && (size === "lg" || size === "md"),
-            [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
-            [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
-            [Button_module_default.cambioSecondaryBorder]: themeName === "cambio" && color === "secondary",
-            [Button_module_default.cambioSecondaryDestructiveBorder]: themeName === "cambio" && (color === "destructive-secondary" || color === "destructive-tertiary"),
-            [Button_module_default.cambioSecondarySuccessBorder]: themeName === "cambio" && color === "success-secondary"
-          }
-        ),
-        children: [
-          !loading && StartIcon && themeName === "classic" && /* @__PURE__ */ jsx(
-            StartIcon,
-            {
-              className: classNames(Button_module_default.icon, iconSize_default[classicSize(size)])
-            }
-          ),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
-            Typography_default,
-            {
-              size: themeName === "classic" ? textVariant_default[classicSize(size)] : textVariant_default[size],
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: foregroundColorClass,
-                  style: { fontWeight: 500 },
-                  children: loading ? loadingText : text
-                }
-              )
-            }
-          ) }),
-          !loading && EndIcon && themeName === "classic" && /* @__PURE__ */ jsx(
-            EndIcon,
-            {
-              className: classNames(Button_module_default.icon, iconSize_default[classicSize(size)])
-            }
-          ),
-          loading && /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: classNames(Button_module_default.loading, foregroundColorClass),
-              viewBox: "22 22 44 44",
-              width: loadingIconSize_default[classicSize(size)],
-              height: loadingIconSize_default[classicSize(size)],
-              children: /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  className: Button_module_default.loadingCircle,
-                  cx: "44",
-                  cy: "44",
-                  r: "20.2",
-                  fill: "none",
-                  strokeWidth: "3.6"
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var Button_default = Button;
-
-export {
-  Button_default
-};
-//# sourceMappingURL=2HUCEVZV.js.map

package/dist/__chunks/2HUCEVZV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport classicSize from \"./constants/classicSize\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `inverse`\n   *\n   * Cambio only:\n   * * `quaternary`\n   * * `destructive-tertiary`\n   * * `success-primary`\n   * * `success-secondary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"quaternary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"inverse\";\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   * * `xl`: 80px\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   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\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   * The type you want to set for the primitive <button/>\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\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        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\"\n            ? styles[classicSize(size)]\n            : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.cambioSecondaryBorder]:\n              themeName === \"cambio\" && color === \"secondary\",\n            [styles.cambioSecondaryDestructiveBorder]:\n              themeName === \"cambio\" &&\n              (color === \"destructive-secondary\" ||\n                color === \"destructive-tertiary\"),\n            [styles.cambioSecondarySuccessBorder]:\n              themeName === \"cambio\" && color === \"success-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && themeName === \"classic\" && (\n          <StartIcon\n            className={classNames(styles.icon, iconSize[classicSize(size)])}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\"\n                  ? textVariant[classicSize(size)]\n                  : textVariant[size]\n              }\n            >\n              <span\n                // Temporary - until we have cambio colors on Typogrphay\n                className={foregroundColorClass}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && themeName === \"classic\" && (\n          <EndIcon\n            className={classNames(styles.icon, iconSize[classicSize(size)])}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[classicSize(size)]}\n            height={loadingIconSize[classicSize(size)]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_zdkdz_1\",\"buttonGap\":\"_buttonGap_zdkdz_9\",\"fullWidth\":\"_fullWidth_zdkdz_50\",\"sm\":\"_sm_zdkdz_54\",\"md\":\"_md_zdkdz_61\",\"lg\":\"_lg_zdkdz_68\",\"smCambio\":\"_smCambio_zdkdz_75\",\"mdCambio\":\"_mdCambio_zdkdz_81\",\"lgCambio\":\"_lgCambio_zdkdz_87\",\"xlCambio\":\"_xlCambio_zdkdz_93\",\"icon\":\"_icon_zdkdz_99\",\"smIcon\":\"_smIcon_zdkdz_103\",\"mdIcon\":\"_mdIcon_zdkdz_110\",\"lgIcon\":\"_lgIcon_zdkdz_117\",\"secondaryBorder\":\"_secondaryBorder_zdkdz_124\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_zdkdz_128\",\"cambioSecondaryBorder\":\"_cambioSecondaryBorder_zdkdz_132\",\"cambioSecondaryDestructiveBorder\":\"_cambioSecondaryDestructiveBorder_zdkdz_136\",\"cambioSecondarySuccessBorder\":\"_cambioSecondarySuccessBorder_zdkdz_140\",\"loading\":\"_loading_zdkdz_154\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_zdkdz_1\",\"loadingCircle\":\"_loadingCircle_zdkdz_158\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,kBAAiB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,yBAAwB,oCAAmC,oCAAmC,+CAA8C,gCAA+B,2CAA0C,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ADoKj8B,SAmCI,KAnCJ;AAlCN,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,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,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,cAAc,YAAY;AAAA,QACrC;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAO,YAAY,IAAI,CAAC,IACxB,sBAAO,GAAG,YAAY;AAAA,UAC1B;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GACf,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAO,eAAe,GACrB,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAO,0BAA0B,GAChC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAO,qBAAqB,GAC3B,cAAc,YAAY,UAAU;AAAA,YACtC,CAAC,sBAAO,gCAAgC,GACtC,cAAc,aACb,UAAU,2BACT,UAAU;AAAA,YACd,CAAC,sBAAO,4BAA4B,GAClC,cAAc,YAAY,UAAU;AAAA,UACxC;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aAAa,cAAc,aACtC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,MAAM,iBAAS,YAAY,IAAI,CAAC,CAAC;AAAA;AAAA,UAChE;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MACE,cAAc,YACV,oBAAY,YAAY,IAAI,CAAC,IAC7B,oBAAY,IAAI;AAAA,cAGtB;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB,oBAAU,cAAc;AAAA;AAAA,cAC3B;AAAA;AAAA,UACF,GACF;AAAA,UAED,CAAC,WAAW,WAAW,cAAc,aACpC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,MAAM,iBAAS,YAAY,IAAI,CAAC,CAAC;AAAA;AAAA,UAChE;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,YAAY,IAAI,CAAC;AAAA,cACxC,QAAQ,wBAAgB,YAAY,IAAI,CAAC;AAAA,cAEzC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAO;AAAA,kBAClB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;","names":[]}

package/dist/__chunks/2LIL7UH4.mjs

@@ -1,111 +0,0 @@
-import {
-  Focus_module_default
-} from "./MQPPALTP.mjs";
-import {
-  Typography_default
-} from "./BQUP6OTG.mjs";
-import {
-  useIsHydrated
-} from "./XFKGXL73.mjs";
-import {
-  useFocusVisible
-} from "./FCX7QDZS.mjs";
-
-// src/Checkbox/Checkbox.tsx
-import { useState } from "react";
-import classNames from "classnames";
-
-// css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "mainContainer": "_mainContainer_an7al_1", "inputOverlay": "_inputOverlay_an7al_9", "checkbox": "_checkbox_an7al_17", "disabled": "_disabled_an7al_25", "cursorDisabled": "_cursorDisabled_an7al_29", "cursorEnabled": "_cursorEnabled_an7al_33", "uncheckedBox": "_uncheckedBox_an7al_37", "uncheckedBorder": "_uncheckedBorder_an7al_41", "uncheckedErrorBorder": "_uncheckedErrorBorder_an7al_45", "checkedBox": "_checkedBox_an7al_49", "checkedNonError": "_checkedNonError_an7al_53", "checkedError": "_checkedError_an7al_57", "sm": "_sm_an7al_61", "md": "_md_an7al_67" };
-
-// src/Checkbox/Checkbox.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var typographySize = {
-  sm: 100,
-  md: 200
-};
-var iconWidth = {
-  sm: 12,
-  md: 20
-};
-var Checkbox = ({
-  checked = false,
-  "data-testid": dataTestId,
-  disabled: disabledProp = false,
-  size = "md",
-  label,
-  error = false,
-  onChange
-}) => {
-  const isHydrated = useIsHydrated();
-  const disabled = !isHydrated || disabledProp;
-  const [isFocused, setIsFocused] = useState(false);
-  const { isFocusVisible } = useFocusVisible();
-  const checkboxStyling = classNames(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
-  const uncheckedStyling = classNames(checkboxStyling, Checkbox_module_default.uncheckedBox, {
-    [Checkbox_module_default.uncheckedBorder]: !error,
-    [Checkbox_module_default.uncheckedErrorBorder]: error,
-    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
-  });
-  const checkedStyling = classNames(checkboxStyling, Checkbox_module_default.checkedBox, {
-    [Checkbox_module_default.checkedNonError]: !error,
-    [Checkbox_module_default.checkedError]: error,
-    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
-  });
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: classNames(
-        Checkbox_module_default.mainContainer,
-        Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
-        {
-          [Checkbox_module_default.disabled]: disabled
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#fff",
-            d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            "data-testid": dataTestId,
-            type: "checkbox",
-            className: classNames(
-              Checkbox_module_default.inputOverlay,
-              Checkbox_module_default[size],
-              Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
-            ),
-            checked,
-            onChange,
-            disabled,
-            onFocus: () => {
-              setIsFocused(true);
-            },
-            onBlur: () => {
-              setIsFocused(false);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Typography_default,
-          {
-            size: typographySize[size],
-            color: error ? "destructive-primary" : "gray800",
-            children: label
-          }
-        )
-      ]
-    }
-  );
-};
-var Checkbox_default = Checkbox;
-
-export {
-  Checkbox_default
-};
-//# sourceMappingURL=2LIL7UH4.mjs.map

package/dist/__chunks/2LIL7UH4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const checkboxStyling = classNames(styles.checkbox, styles[size]);\n  const uncheckedStyling = classNames(checkboxStyling, styles.uncheckedBox, {\n    [styles.uncheckedBorder]: !error,\n    [styles.uncheckedErrorBorder]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n  const checkedStyling = classNames(checkboxStyling, styles.checkedBox, {\n    [styles.checkedNonError]: !error,\n    [styles.checkedError]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div className={checked ? checkedStyling : uncheckedStyling}>\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\n              d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray800\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDwE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,gBAAe,0BAAyB,mBAAkB,6BAA4B,wBAAuB,kCAAiC,cAAa,wBAAuB,mBAAkB,6BAA4B,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwFhoB,SAYQ,KAZR;AAhFJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,kBAAkB,WAAW,wBAAO,UAAU,wBAAO,IAAI,CAAC;AAChE,QAAM,mBAAmB,WAAW,iBAAiB,wBAAO,cAAc;AAAA,IACxE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,oBAAoB,GAAG;AAAA,IAC/B,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AACD,QAAM,iBAAiB,WAAW,iBAAiB,wBAAO,YAAY;AAAA,IACpE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,YAAY,GAAG;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,UAAU,iBAAiB,kBACxC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACH,GACH,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/2PBGWM5I.mjs

@@ -1,70 +0,0 @@
-import {
-  useIsHydrated
-} from "./XFKGXL73.mjs";
-import {
-  foregroundColor
-} from "./VSTQZSBF.mjs";
-import {
-  backgroundColor
-} from "./OKF4ABP7.mjs";
-
-// src/IconButton/IconButton.tsx
-import classNames from "classnames";
-import { forwardRef } from "react";
-
-// css-module:./IconButton.module.css#css-module
-var IconButton_module_default = { "iconButton": "_iconButton_1fvmo_1", "sm": "_sm_1fvmo_46", "md": "_md_1fvmo_51", "lg": "_lg_1fvmo_56", "smIcon": "_smIcon_1fvmo_61", "mdIcon": "_mdIcon_1fvmo_68", "lgIcon": "_lgIcon_1fvmo_75", "secondaryBorder": "_secondaryBorder_1fvmo_82", "tertiaryBorder": "_tertiaryBorder_1fvmo_86", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1fvmo_90", "tertiaryDestructiveBorder": "_tertiaryDestructiveBorder_1fvmo_94" };
-
-// src/IconButton/IconButton.tsx
-import { jsx } from "react/jsx-runtime";
-var iconSize = {
-  ["sm"]: IconButton_module_default.smIcon,
-  ["md"]: IconButton_module_default.mdIcon,
-  ["lg"]: IconButton_module_default.lgIcon
-};
-var IconButton = forwardRef(
-  ({
-    accessibilityLabel,
-    color = "primary",
-    "data-testid": dataTestId,
-    disabled = false,
-    icon: Icon,
-    size = "md",
-    tooltip,
-    onClick
-  }, ref) => {
-    const isHydrated = useIsHydrated();
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        "aria-label": accessibilityLabel,
-        "data-testid": dataTestId,
-        type: "button",
-        title: tooltip,
-        disabled: !isHydrated || disabled,
-        onClick,
-        className: classNames(
-          IconButton_module_default.iconButton,
-          foregroundColor(color),
-          backgroundColor(color),
-          IconButton_module_default[size],
-          {
-            [IconButton_module_default.secondaryBorder]: color === "secondary",
-            [IconButton_module_default.tertiaryBorder]: color === "tertiary",
-            [IconButton_module_default.secondaryDestructiveBorder]: color === "destructive-secondary",
-            [IconButton_module_default.tertiaryDestructiveBorder]: color === "destructive-tertiary"
-          }
-        ),
-        ref,
-        children: /* @__PURE__ */ jsx(Icon, { className: iconSize[size] })
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-var IconButton_default = IconButton;
-
-export {
-  IconButton_default
-};
-//# sourceMappingURL=2PBGWM5I.mjs.map

package/dist/__chunks/2PBGWM5I.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\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\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          foregroundColor(color),\n          backgroundColor(color),\n          styles[size],\n          {\n            [styles.secondaryBorder]: color === \"secondary\",\n            [styles.tertiaryBorder]: color === \"tertiary\",\n            [styles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n            [styles.tertiaryDestructiveBorder]:\n              color === \"destructive-tertiary\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\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_1fvmo_1\",\"sm\":\"_sm_1fvmo_46\",\"md\":\"_md_1fvmo_51\",\"lg\":\"_lg_1fvmo_56\",\"smIcon\":\"_smIcon_1fvmo_61\",\"mdIcon\":\"_mdIcon_1fvmo_68\",\"lgIcon\":\"_lgIcon_1fvmo_75\",\"secondaryBorder\":\"_secondaryBorder_1fvmo_82\",\"tertiaryBorder\":\"_tertiaryBorder_1fvmo_86\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1fvmo_90\",\"tertiaryDestructiveBorder\":\"_tertiaryDestructiveBorder_1fvmo_94\"}"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHiE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,kBAAiB,4BAA2B,8BAA6B,wCAAuC,6BAA4B,sCAAqC;;;ADsG7f;AA9FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,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;AAEjC,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,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,cAAc,GAAG,UAAU;AAAA,YACnC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,YACZ,CAAC,0BAAO,yBAAyB,GAC/B,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}