@cambly/syntax-core 12.3.0 → 12.5.0

package/dist/index.js

@@ -1,105 +1,109 @@
 "use client"
+import {
+  Badge_default
+} from "./__chunks/PDVLGG4C.js";
 import {
   Avatar_default
 } from "./__chunks/JUQWWD2D.js";
 import {
   AvatarGroup
 } from "./__chunks/T32LVZ6S.js";
+import {
+  Checkbox_default
+} from "./__chunks/62PHRDGW.js";
 import {
   Card
 } from "./__chunks/535SBVS5.js";
-import {
-  Badge_default
-} from "./__chunks/RMDRDNHT.js";
 import {
   LinkButton_default
-} from "./__chunks/ITALBBTF.js";
+} from "./__chunks/COREQINY.js";
 import {
-  Checkbox_default
-} from "./__chunks/OPJKUJKD.js";
+  Icon_default
+} from "./__chunks/TELGW53W.js";
 import {
   Modal
-} from "./__chunks/KUPD7W7N.js";
+} from "./__chunks/NCV3QLVA.js";
+import "./__chunks/HVA7R2EL.js";
 import {
   Heading_default
-} from "./__chunks/HWDLLEM4.js";
+} from "./__chunks/EGLA4ZQ6.js";
 import "./__chunks/QQT35OLE.js";
 import "./__chunks/NMX5UDLV.js";
-import "./__chunks/HVA7R2EL.js";
+import {
+  TextField
+} from "./__chunks/D2WZPJL3.js";
 import {
   TextArea_default
-} from "./__chunks/RJY5SH6N.js";
+} from "./__chunks/36CGIMVN.js";
+import "./__chunks/4U4UW4AK.js";
 import {
   SelectList
-} from "./__chunks/DGFZT7SO.js";
+} from "./__chunks/JEGPGWID.js";
 import "./__chunks/Y47XTR6M.js";
 import {
   RichSelectList_default
-} from "./__chunks/PBOPUXSQ.js";
-import "./__chunks/7TTYWZJV.js";
+} from "./__chunks/ZOLQZLRM.js";
+import "./__chunks/DJL67KQ3.js";
 import {
   ButtonGroup_default
 } from "./__chunks/BOX3VY3Q.js";
 import {
   Button_default
-} from "./__chunks/UX5KRRO4.js";
+} from "./__chunks/7EM2GOIC.js";
 import "./__chunks/Z5ZUAP2B.js";
 import "./__chunks/QSC7CAQA.js";
 import "./__chunks/C7PW7CPK.js";
 import {
   Divider
 } from "./__chunks/TK2EQ6QG.js";
-import "./__chunks/2QPXNLJ6.js";
+import "./__chunks/TQ7D5O7L.js";
 import {
   Chip_default
-} from "./__chunks/FHLZXSCX.js";
+} from "./__chunks/Q6657TAT.js";
 import {
   Popover_default
-} from "./__chunks/H4L7P2Y7.js";
-import "./__chunks/FVGIQTM2.js";
+} from "./__chunks/Y67FDYEF.js";
+import "./__chunks/NPZBG5AK.js";
 import "./__chunks/TZGJS522.js";
 import {
   IconButton_default
-} from "./__chunks/MEOMWLNG.js";
+} from "./__chunks/4JFE4NWI.js";
 import {
   TapArea_default
 } from "./__chunks/77FFPQY6.js";
-import "./__chunks/RKDG6SCA.js";
-import "./__chunks/Y4BEP7DV.js";
+import "./__chunks/X747TBQO.js";
+import "./__chunks/HN2MMSUI.js";
 import "./__chunks/DDUJFFG7.js";
-import "./__chunks/52WECBHV.js";
+import "./__chunks/Q7N54CYS.js";
+import "./__chunks/ODMJANSX.js";
 import {
   RadioButton_default
-} from "./__chunks/AN6SGUNO.js";
+} from "./__chunks/4SYTZR75.js";
 import "./__chunks/KKADUD65.js";
-import "./__chunks/ODMJANSX.js";
+import {
+  Box_default
+} from "./__chunks/M36V23WR.js";
 import "./__chunks/UVQS6LU3.js";
 import "./__chunks/ECA33JJ5.js";
 import "./__chunks/T6PXFSRX.js";
 import "./__chunks/PUTZ53EC.js";
 import {
   Tooltip_default
-} from "./__chunks/S2S77Y7G.js";
+} from "./__chunks/LL5Q6ZDS.js";
 import "./__chunks/ZOWOFYUE.js";
 import "./__chunks/AVREYFSM.js";
-import {
-  ThemeProvider
-} from "./__chunks/CAEGAJQ2.js";
-import {
-  TextField
-} from "./__chunks/QF7K6PY3.js";
-import "./__chunks/4U4UW4AK.js";
-import {
-  Box_default
-} from "./__chunks/M36V23WR.js";
 import "./__chunks/4U4UW4AK.js";
 import "./__chunks/KBIW5XV4.js";
 import "./__chunks/4U4UW4AK.js";
 import {
   Typography_default
-} from "./__chunks/RXXGDO2J.js";
+} from "./__chunks/V562ZHQ7.js";
+import "./__chunks/ZVJGV6GH.js";
 import "./__chunks/S6TNP7G5.js";
 import "./__chunks/4U4UW4AK.js";
+import {
+  ThemeProvider
+} from "./__chunks/CAEGAJQ2.js";
 import "./__chunks/JB65NEXK.js";
 import "./__chunks/BWPNF6RD.js";
 import "./__chunks/SVZOETLJ.js";
@@ -119,6 +123,7 @@ export {
   Chip_default as Chip,
   Divider,
   Heading_default as Heading,
+  Icon_default as Icon,
   IconButton_default as IconButton,
   LinkButton_default as LinkButton,
   Modal,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "12.3.0",
+  "version": "12.5.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -28,8 +28,8 @@
     "react": "18.2.0",
     "tsup": "6.7.0",
     "typescript": "5.0.4",
-    "@cambly/syntax-tsconfig": "1.4.1",
-    "@cambly/eslint-config-syntax": "1.4.0"
+    "@cambly/eslint-config-syntax": "1.4.0",
+    "@cambly/syntax-tsconfig": "1.4.1"
   },
   "publishConfig": {
     "access": "public"

package/dist/__chunks/4GZL7Q7G.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0ExH,SACW,KADX;AAzDR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,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,MAemB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,YACvC;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ","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  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\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 = \"sky\",\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 \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      rounding={\"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n    >\n      <Typography\n        size={100}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\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=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"]}

package/dist/__chunks/5E23KLF4.cjs.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;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACAte,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFyHpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,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,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,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,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\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-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * The size of the button\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\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   */\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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\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          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.disabled]: loading,\n          },\n        )}\n        onClick={onClick}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        {!loading && text && (\n          <Typography size={textVariant[size]} weight=\"medium\">\n            <span\n              // Temporary - until we have cambio colors on Typogrphay\n              className={foregroundColorClass}\n            >\n              {text}\n            </span>\n          </Typography>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(buttonStyles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={buttonStyles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}

package/dist/__chunks/AC3JZOEZ.cjs.map

@@ -1 +0,0 @@
-{"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,UAAS,oBAAmB,cAAa,uBAAsB;;;ADoF5P,SAcQ,KAdR;AAtEW,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,QAAQ;AACV,GAmDiB;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,WAAW,yBAAO,WAAW,yBAAO,IAAI,yBAAO,QAAQ;AAAA,cAChE,CAAC,yBAAO,UAAU,GAAG;AAAA,YACvB,CAAC;AAAA,YACD,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  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   * 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(styles.textfield, styles.md, styles.height, {\n          [styles.inputError]: errorText,\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_wgza3_1\",\"label\":\"_label_wgza3_22\",\"md\":\"_md_wgza3_26\",\"height\":\"_height_wgza3_30\",\"inputError\":\"_inputError_wgza3_34\"}"]}

package/dist/__chunks/AN6SGUNO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n          [styles.smBase]: size === \"sm\",\n          [styles.mdBase]: size === \"md\",\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;ADuFrvB,SAWE,KAXF;AAzEJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;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,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/ANY6BV2W.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ADuIpkB,SAsBI,KAtBJ;AA7BN,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,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,kBAAkB,UAAU,aAAa;AAC/C,UAAM,aAAa,CAAC,cAAc,YAAY;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YAC9C,CAAC,sBAAO,QAAQ,GAAG;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cAEC,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;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","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 { backgroundColor } from \"../colors/backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\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   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * The size of the button\n   *\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   * 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   */\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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\n    const disabledPrimary = color === \"primary\" && disabled;\n    const isDisabled = !isHydrated || disabled || loading;\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          styles[size],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]: size === \"lg\" || size === \"md\",\n            [styles.disabled]: isDisabled,\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography size={textVariant[size]} weight=\"medium\">\n              <span\n                className={classNames(\n                  foregroundColorClass,\n                  disabledPrimary && styles.disabledPrimary,\n                )}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}"]}

package/dist/__chunks/FHLZXSCX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nfunction typographyColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  if (on === \"darkBackground\") {\n    if (selected) {\n      return \"gray900\";\n    } else {\n      return \"white\";\n    }\n  } else {\n    if (selected) {\n      return \"white\";\n    } else {\n      return \"gray900\";\n    }\n  }\n}\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      text,\n      on = \"lightBackground\",\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const selectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.selectedChip\n        : styles.selectedChipOnDarkBackground;\n\n    const deselectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.deselectedChip\n        : styles.deselectedChipOnDarkBackground;\n\n    const chipStyles = classnames(styles.chip, styles.sm, {\n      [selectedChipStyle]: selected,\n      [deselectedChipStyle]: !selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n\n    const color = useMemo(\n      () => typographyColor({ selected, on }),\n      [selected, on],\n    );\n\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography size={100} color={color} weight=\"medium\">\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_b9vyr_1\",\"disabled\":\"_disabled_b9vyr_12\",\"deselectedChip\":\"_deselectedChip_b9vyr_17\",\"deselectedChipOnDarkBackground\":\"_deselectedChipOnDarkBackground_b9vyr_21\",\"selectedChip\":\"_selectedChip_b9vyr_25\",\"selectedChipOnDarkBackground\":\"_selectedChipOnDarkBackground_b9vyr_29\",\"icon\":\"_icon_b9vyr_33\",\"selectedIcon\":\"_selectedIcon_b9vyr_41\",\"sm\":\"_sm_b9vyr_45\",\"forceFocus\":\"_forceFocus_b9vyr_52\"}"],"mappings":";;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,kBAAiB,4BAA2B,kCAAiC,4CAA2C,gBAAe,0BAAyB,gCAA+B,0CAAyC,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,cAAa,uBAAsB;;;ADiHxf,SASW,KATX;AA1GN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGwB;AACtB,MAAI,OAAO,kBAAkB;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AA2CA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,oBACJ,OAAO,oBACH,oBAAO,eACP,oBAAO;AAEb,UAAM,sBACJ,OAAO,oBACH,oBAAO,iBACP,oBAAO;AAEb,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI;AAAA,MACpD,CAAC,iBAAiB,GAAG;AAAA,MACrB,CAAC,mBAAmB,GAAG,CAAC;AAAA,MACxB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,UAAU,GAAG,CAAC;AAAA,MACtC,CAAC,UAAU,EAAE;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB,8BAAC,sBAAW,MAAM,KAAK,OAAc,QAAO,UACzC,gBACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}

package/dist/__chunks/ITALBBTF.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"],"sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\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-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * The size of the button\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\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   */\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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\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          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.disabled]: loading,\n          },\n        )}\n        onClick={onClick}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        {!loading && text && (\n          <Typography size={textVariant[size]} weight=\"medium\">\n            <span\n              // Temporary - until we have cambio colors on Typogrphay\n              className={foregroundColorClass}\n            >\n              {text}\n            </span>\n          </Typography>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(buttonStyles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={buttonStyles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACAte,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFyHpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,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,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,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,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

package/dist/__chunks/M3KSATCF.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,kBAAiB,4BAA2B,kCAAiC,4CAA2C,gBAAe,0BAAyB,gCAA+B,0CAAyC,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,cAAa,uBAAsB;;;ADiHxf,SASW,KATX;AA1GN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGwB;AACtB,MAAI,OAAO,kBAAkB;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AA2CA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,oBACJ,OAAO,oBACH,oBAAO,eACP,oBAAO;AAEb,UAAM,sBACJ,OAAO,oBACH,oBAAO,iBACP,oBAAO;AAEb,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI;AAAA,MACpD,CAAC,iBAAiB,GAAG;AAAA,MACrB,CAAC,mBAAmB,GAAG,CAAC;AAAA,MACxB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,UAAU,GAAG,CAAC;AAAA,MACtC,CAAC,UAAU,EAAE;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB,8BAAC,sBAAW,MAAM,KAAK,OAAc,QAAO,UACzC,gBACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nfunction typographyColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  if (on === \"darkBackground\") {\n    if (selected) {\n      return \"gray900\";\n    } else {\n      return \"white\";\n    }\n  } else {\n    if (selected) {\n      return \"white\";\n    } else {\n      return \"gray900\";\n    }\n  }\n}\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      text,\n      on = \"lightBackground\",\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const selectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.selectedChip\n        : styles.selectedChipOnDarkBackground;\n\n    const deselectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.deselectedChip\n        : styles.deselectedChipOnDarkBackground;\n\n    const chipStyles = classnames(styles.chip, styles.sm, {\n      [selectedChipStyle]: selected,\n      [deselectedChipStyle]: !selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n\n    const color = useMemo(\n      () => typographyColor({ selected, on }),\n      [selected, on],\n    );\n\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography size={100} color={color} weight=\"medium\">\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_b9vyr_1\",\"disabled\":\"_disabled_b9vyr_12\",\"deselectedChip\":\"_deselectedChip_b9vyr_17\",\"deselectedChipOnDarkBackground\":\"_deselectedChipOnDarkBackground_b9vyr_21\",\"selectedChip\":\"_selectedChip_b9vyr_25\",\"selectedChipOnDarkBackground\":\"_selectedChipOnDarkBackground_b9vyr_29\",\"icon\":\"_icon_b9vyr_33\",\"selectedIcon\":\"_selectedIcon_b9vyr_41\",\"sm\":\"_sm_b9vyr_45\",\"forceFocus\":\"_forceFocus_b9vyr_52\"}"]}

package/dist/__chunks/MEOMWLNG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\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?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\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`: 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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      on = \"lightBackground\",\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\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          border(color, on),\n          styles[size],\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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1h8zl_1\",\"sm\":\"_sm_1h8zl_45\",\"md\":\"_md_1h8zl_50\",\"lg\":\"_lg_1h8zl_55\",\"smIcon\":\"_smIcon_1h8zl_60\",\"mdIcon\":\"_mdIcon_1h8zl_67\",\"lgIcon\":\"_lgIcon_1h8zl_74\"}"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAgB,kBAAkB;;;ACFkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADmH9R;AA1GR,IAAM,WAAW;AAAA,EACf,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAkEA,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,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

package/dist/__chunks/PROA22UK.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAgB,kBAAkB;;;ACFkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADmH9R;AA1GR,IAAM,WAAW;AAAA,EACf,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAkEA,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,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\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?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\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`: 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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      on = \"lightBackground\",\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\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          border(color, on),\n          styles[size],\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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1h8zl_1\",\"sm\":\"_sm_1h8zl_45\",\"md\":\"_md_1h8zl_50\",\"lg\":\"_lg_1h8zl_55\",\"smIcon\":\"_smIcon_1h8zl_60\",\"mdIcon\":\"_mdIcon_1h8zl_67\",\"lgIcon\":\"_lgIcon_1h8zl_74\"}"]}

package/dist/__chunks/QF7K6PY3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"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  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   * 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(styles.textfield, styles.md, styles.height, {\n          [styles.inputError]: errorText,\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_wgza3_1\",\"label\":\"_label_wgza3_22\",\"md\":\"_md_wgza3_26\",\"height\":\"_height_wgza3_30\",\"inputError\":\"_inputError_wgza3_34\"}"],"mappings":";;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,uBAAsB;;;ADoF5P,SAcQ,KAdR;AAtEW,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,QAAQ;AACV,GAmDiB;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,WAAW,yBAAO,WAAW,yBAAO,IAAI,yBAAO,QAAQ;AAAA,cAChE,CAAC,yBAAO,UAAU,GAAG;AAAA,YACvB,CAAC;AAAA,YACD,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;","names":[]}

package/dist/__chunks/RMDRDNHT.js.map

@@ -1 +0,0 @@
-{"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  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\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 = \"sky\",\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 \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      rounding={\"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n    >\n      <Typography\n        size={100}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\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=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0ExH,SACW,KADX;AAzDR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,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,MAemB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,YACvC;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/RXXGDO2J.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(\n  color:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"destructive-darkBackground\"\n    | \"success\"\n    | \"success-darkBackground\"\n    | \"white\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.cambioDestructive100Color;\n    case \"success\":\n      return colorStyles.cambioSuccess900Color;\n    case \"success-darkBackground\":\n      return colorStyles.cambioSuccess100Color;\n    // primary / gray900\n    default:\n      return colorStyles.cambioBlackColor;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n  HTMLDivElement,\n  {\n    /**\n     * Aligns the text to the left, right, or center of the container.\n     * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n     *\n     * @defaultValue \"start\"\n     */\n    align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n    /**\n     * DOM element to render as.\n     *\n     * @defaultValue \"div\"\n     */\n    as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    /**\n     * The text to be rendered\n     */\n    children?: ReactNode;\n    /**\n     * The color of the text.\n     *\n     * @defaultValue \"gray900\"\n     */\n    color?:\n      | \"gray900\"\n      | \"gray700\"\n      | \"primary\"\n      | \"destructive-primary\"\n      | \"destructive-darkBackground\"\n      | \"success\"\n      | \"success-darkBackground\"\n      | \"white\"\n      | \"inherit\";\n    /**\n     * Test id for the text\n     */\n    \"data-testid\"?: string;\n    /**\n     * Style of the font\n     *\n     * Classic only supports `sans-serif`\n     *\n     * @defaultValue \"sans-serif\"\n     */\n    fontStyle?: \"serif\" | \"sans-serif\";\n    /**\n     * The id for the element\n     */\n    id?: string;\n    /**\n     * Whether the text should flow inline with other elements.\n     *\n     * @defaultValue false\n     */\n    inline?: boolean;\n    /**\n     * The number of lines we should truncate the text at\n     */\n    lineClamp?: number | undefined;\n    /**\n     * Size of the text.\n     *\n     * Mobile (viewport width <= 480px)::\n     * * `100`: 14px\n     * * `200`: 16px\n     * * `300`: 18px\n     * * `400`: 20px\n     * * `500`: 23px\n     * * `600`: 26px\n     * * `700`: 29px\n     * * `800`: 33px\n     * * `900`: 37px\n     * * `1000`: 41px\n     * * `1100`: 46px\n     *\n     * Desktop (viewport width > 480px):\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `500`: 31px\n     * * `600`: 39px\n     * * `700`: 49px\n     * * `800`: 61px\n     * * `900`: 76px\n     * * `1000`: 95px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n    /**\n     * The tooltip to be displayed when the user hovers the text\n     */\n    tooltip?: string;\n    /**\n     * Whether the text should be transformed to uppercase.\n     *\n     * @defaultValue \"none\"\n     */\n    transform?: \"none\" | \"uppercase\";\n    /**\n     * Whether the text has an underline.\n     *\n     * @defaultValue false\n     */\n    underline?: boolean;\n    /**\n     * Indicates the boldness of the text.\n     *\n     * * `regular`: 400\n     * * `medium`: 510\n     * * `semiBold`: 590\n     * * `bold`: 710\n     *\n     * @defaultValue \"regular\"\n     */\n    weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\";\n  }\n>(function Typography(\n  {\n    align = \"start\",\n    as = \"div\",\n    children,\n    color = \"gray900\",\n    \"data-testid\": dataTestId,\n    fontStyle = \"sans-serif\",\n    id,\n    inline = false,\n    lineClamp = undefined,\n    size = 200,\n    tooltip,\n    transform = \"none\",\n    underline = false,\n    weight = \"regular\",\n  },\n  ref,\n): ReactElement {\n  const Tag = as;\n\n  return (\n    <Tag\n      id={id}\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        fontStyle === \"serif\" ? styles.serif : styles.sansSerif,\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n      ref={ref}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_737nn_1\",\"sansSerif\":\"_sansSerif_737nn_22\",\"serif\":\"_serif_737nn_27\",\"size100\":\"_size100_737nn_73\",\"size200\":\"_size200_737nn_77\",\"size300\":\"_size300_737nn_81\",\"size400\":\"_size400_737nn_85\",\"size500\":\"_size500_737nn_89\",\"size600\":\"_size600_737nn_93\",\"size700\":\"_size700_737nn_97\",\"size800\":\"_size800_737nn_101\",\"size900\":\"_size900_737nn_105\",\"size1000\":\"_size1000_737nn_146\",\"size1100\":\"_size1100_737nn_150\",\"center\":\"_center_737nn_156\",\"forceLeft\":\"_forceLeft_737nn_160\",\"forceRight\":\"_forceRight_737nn_164\",\"start\":\"_start_737nn_168\",\"end\":\"_end_737nn_172\",\"regular\":\"_regular_737nn_178\",\"medium\":\"_medium_737nn_182\",\"semiBold\":\"_semiBold_737nn_186\",\"bold\":\"_bold_737nn_190\",\"underline\":\"_underline_737nn_194\",\"inline\":\"_inline_737nn_198\",\"uppercase\":\"_uppercase_737nn_202\",\"lineClamp\":\"_lineClamp_737nn_206\"}"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,WAAU,sBAAqB,YAAW,uBAAsB,YAAW,uBAAsB,UAAS,qBAAoB,aAAY,wBAAuB,cAAa,yBAAwB,SAAQ,oBAAmB,OAAM,kBAAiB,WAAU,sBAAqB,UAAS,qBAAoB,YAAW,uBAAsB,QAAO,mBAAkB,aAAY,wBAAuB,UAAS,qBAAoB,aAAY,wBAAuB,aAAY,uBAAsB;;;ADyLn7B;AApLJ,SAAS,UACP,OAUQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,WA0HjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,cAAc,UAAU,0BAAO,QAAQ,0BAAO;AAAA,QAC9C,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ;","names":["Typography"]}

package/dist/__chunks/UUIXG3PQ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,WAAU,sBAAqB,YAAW,uBAAsB,YAAW,uBAAsB,UAAS,qBAAoB,aAAY,wBAAuB,cAAa,yBAAwB,SAAQ,oBAAmB,OAAM,kBAAiB,WAAU,sBAAqB,UAAS,qBAAoB,YAAW,uBAAsB,QAAO,mBAAkB,aAAY,wBAAuB,UAAS,qBAAoB,aAAY,wBAAuB,aAAY,uBAAsB;;;ADyLn7B;AApLJ,SAAS,UACP,OAUQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,WA0HjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,cAAc,UAAU,0BAAO,QAAQ,0BAAO;AAAA,QAC9C,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(\n  color:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"destructive-darkBackground\"\n    | \"success\"\n    | \"success-darkBackground\"\n    | \"white\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.cambioDestructive100Color;\n    case \"success\":\n      return colorStyles.cambioSuccess900Color;\n    case \"success-darkBackground\":\n      return colorStyles.cambioSuccess100Color;\n    // primary / gray900\n    default:\n      return colorStyles.cambioBlackColor;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n  HTMLDivElement,\n  {\n    /**\n     * Aligns the text to the left, right, or center of the container.\n     * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n     *\n     * @defaultValue \"start\"\n     */\n    align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n    /**\n     * DOM element to render as.\n     *\n     * @defaultValue \"div\"\n     */\n    as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    /**\n     * The text to be rendered\n     */\n    children?: ReactNode;\n    /**\n     * The color of the text.\n     *\n     * @defaultValue \"gray900\"\n     */\n    color?:\n      | \"gray900\"\n      | \"gray700\"\n      | \"primary\"\n      | \"destructive-primary\"\n      | \"destructive-darkBackground\"\n      | \"success\"\n      | \"success-darkBackground\"\n      | \"white\"\n      | \"inherit\";\n    /**\n     * Test id for the text\n     */\n    \"data-testid\"?: string;\n    /**\n     * Style of the font\n     *\n     * Classic only supports `sans-serif`\n     *\n     * @defaultValue \"sans-serif\"\n     */\n    fontStyle?: \"serif\" | \"sans-serif\";\n    /**\n     * The id for the element\n     */\n    id?: string;\n    /**\n     * Whether the text should flow inline with other elements.\n     *\n     * @defaultValue false\n     */\n    inline?: boolean;\n    /**\n     * The number of lines we should truncate the text at\n     */\n    lineClamp?: number | undefined;\n    /**\n     * Size of the text.\n     *\n     * Mobile (viewport width <= 480px)::\n     * * `100`: 14px\n     * * `200`: 16px\n     * * `300`: 18px\n     * * `400`: 20px\n     * * `500`: 23px\n     * * `600`: 26px\n     * * `700`: 29px\n     * * `800`: 33px\n     * * `900`: 37px\n     * * `1000`: 41px\n     * * `1100`: 46px\n     *\n     * Desktop (viewport width > 480px):\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `500`: 31px\n     * * `600`: 39px\n     * * `700`: 49px\n     * * `800`: 61px\n     * * `900`: 76px\n     * * `1000`: 95px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n    /**\n     * The tooltip to be displayed when the user hovers the text\n     */\n    tooltip?: string;\n    /**\n     * Whether the text should be transformed to uppercase.\n     *\n     * @defaultValue \"none\"\n     */\n    transform?: \"none\" | \"uppercase\";\n    /**\n     * Whether the text has an underline.\n     *\n     * @defaultValue false\n     */\n    underline?: boolean;\n    /**\n     * Indicates the boldness of the text.\n     *\n     * * `regular`: 400\n     * * `medium`: 510\n     * * `semiBold`: 590\n     * * `bold`: 710\n     *\n     * @defaultValue \"regular\"\n     */\n    weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\";\n  }\n>(function Typography(\n  {\n    align = \"start\",\n    as = \"div\",\n    children,\n    color = \"gray900\",\n    \"data-testid\": dataTestId,\n    fontStyle = \"sans-serif\",\n    id,\n    inline = false,\n    lineClamp = undefined,\n    size = 200,\n    tooltip,\n    transform = \"none\",\n    underline = false,\n    weight = \"regular\",\n  },\n  ref,\n): ReactElement {\n  const Tag = as;\n\n  return (\n    <Tag\n      id={id}\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        fontStyle === \"serif\" ? styles.serif : styles.sansSerif,\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n      ref={ref}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_737nn_1\",\"sansSerif\":\"_sansSerif_737nn_22\",\"serif\":\"_serif_737nn_27\",\"size100\":\"_size100_737nn_73\",\"size200\":\"_size200_737nn_77\",\"size300\":\"_size300_737nn_81\",\"size400\":\"_size400_737nn_85\",\"size500\":\"_size500_737nn_89\",\"size600\":\"_size600_737nn_93\",\"size700\":\"_size700_737nn_97\",\"size800\":\"_size800_737nn_101\",\"size900\":\"_size900_737nn_105\",\"size1000\":\"_size1000_737nn_146\",\"size1100\":\"_size1100_737nn_150\",\"center\":\"_center_737nn_156\",\"forceLeft\":\"_forceLeft_737nn_160\",\"forceRight\":\"_forceRight_737nn_164\",\"start\":\"_start_737nn_168\",\"end\":\"_end_737nn_172\",\"regular\":\"_regular_737nn_178\",\"medium\":\"_medium_737nn_182\",\"semiBold\":\"_semiBold_737nn_186\",\"bold\":\"_bold_737nn_190\",\"underline\":\"_underline_737nn_194\",\"inline\":\"_inline_737nn_198\",\"uppercase\":\"_uppercase_737nn_202\",\"lineClamp\":\"_lineClamp_737nn_206\"}"]}

package/dist/__chunks/UX5KRRO4.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 { backgroundColor } from \"../colors/backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\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   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * The size of the button\n   *\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   * 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   */\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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\n    const disabledPrimary = color === \"primary\" && disabled;\n    const isDisabled = !isHydrated || disabled || loading;\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          styles[size],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]: size === \"lg\" || size === \"md\",\n            [styles.disabled]: isDisabled,\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography size={textVariant[size]} weight=\"medium\">\n              <span\n                className={classNames(\n                  foregroundColorClass,\n                  disabledPrimary && styles.disabledPrimary,\n                )}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ADuIpkB,SAsBI,KAtBJ;AA7BN,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,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,kBAAkB,UAAU,aAAa;AAC/C,UAAM,aAAa,CAAC,cAAc,YAAY;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YAC9C,CAAC,sBAAO,QAAQ,GAAG;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cAEC,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;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/WIHMNKU4.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;ADuFrvB,SAWE,KAXF;AAzEJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;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,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n          [styles.smBase]: size === \"sm\",\n          [styles.mdBase]: size === \"md\",\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"]}