@cambly/syntax-core 12.2.0 → 12.4.0

package/dist/__chunks/{ANY6BV2W.cjs → S2VK4XNL.cjs}

@@ -10,6 +10,9 @@ var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
 var _BHN2OODFcjs = require('./BHN2OODF.cjs');
 
 
+var _FESAFV44cjs = require('./FESAFV44.cjs');
+
+
 var _MKZONAGTcjs = require('./MKZONAGT.cjs');
 
 
@@ -19,10 +22,7 @@ var _C3KZXHTVcjs = require('./C3KZXHTV.cjs');
 var _RAL6R27Scjs = require('./RAL6R27S.cjs');
 
 
-var _FESAFV44cjs = require('./FESAFV44.cjs');
-
-
-var _UUIXG3PQcjs = require('./UUIXG3PQ.cjs');
+var _GUACYIXBcjs = require('./GUACYIXB.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -89,10 +89,11 @@ var Button = _react.forwardRef.call(void 0,
                 Button_module_default.icon,
                 _BHN2OODFcjs.iconSize_default[size],
                 disabledPrimary && Button_module_default.disabledPrimary
-              )
+              ),
+              size
             }
           ),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UUIXG3PQcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
               className: _classnames2.default.call(void 0, 
@@ -109,7 +110,8 @@ var Button = _react.forwardRef.call(void 0,
                 Button_module_default.icon,
                 _BHN2OODFcjs.iconSize_default[size],
                 disabledPrimary && Button_module_default.disabledPrimary
-              )
+              ),
+              size
             }
           ),
           loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -143,4 +145,4 @@ var Button_default = Button;
 
 
 exports.Button_default = Button_default;
-//# sourceMappingURL=ANY6BV2W.cjs.map
+//# sourceMappingURL=S2VK4XNL.cjs.map

package/dist/__chunks/S2VK4XNL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAuC;AACvD,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;;;AD4IpkB,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,cACA;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,cACA;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, type ComponentProps } 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\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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            size={size}\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            size={size}\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/{M3KSATCF.cjs → SFZ2MHPA.cjs}

@@ -4,7 +4,7 @@
 var _FESAFV44cjs = require('./FESAFV44.cjs');
 
 
-var _UUIXG3PQcjs = require('./UUIXG3PQ.cjs');
+var _GUACYIXBcjs = require('./GUACYIXB.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -75,8 +75,8 @@ var Chip = _react.forwardRef.call(void 0,
         "aria-pressed": selected,
         onClick: onChange,
         children: [
-          Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UUIXG3PQcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
+          Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles, size: "sm" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
         ]
       }
     );
@@ -88,4 +88,4 @@ var Chip_default = Chip;
 
 
 exports.Chip_default = Chip_default;
-//# sourceMappingURL=M3KSATCF.cjs.map
+//# sourceMappingURL=SFZ2MHPA.cjs.map

package/dist/__chunks/SFZ2MHPA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAoC;AAChE,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;;;ADoHxf,SASW,KATX;AA5GN,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;AA6CA,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,MAAK,MAAK;AAAA,UAChD,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, type ComponentProps } 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\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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} size=\"sm\" />}\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/{XMP55GA2.cjs → T5NFBPT6.cjs}

@@ -4,7 +4,7 @@
 var _FESAFV44cjs = require('./FESAFV44.cjs');
 
 
-var _UUIXG3PQcjs = require('./UUIXG3PQ.cjs');
+var _GUACYIXBcjs = require('./GUACYIXB.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -13,7 +13,7 @@ var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 var _react = require('react');
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "textarea": "_textarea_zkjej_1" };
+var TextArea_module_default = { "textarea": "_textarea_1sb0v_1", "resizenone": "_resizenone_1sb0v_6", "resizehorizontal": "_resizehorizontal_1sb0v_10", "resizevertical": "_resizevertical_1sb0v_14", "resizeboth": "_resizeboth_1sb0v_18" };
 
 // css-module:../TextField/TextField.module.css#css-module
 var TextField_module_default = { "textfield": "_textfield_wgza3_1", "label": "_label_wgza3_22", "md": "_md_wgza3_26", "height": "_height_wgza3_30", "inputError": "_inputError_wgza3_34" };
@@ -33,7 +33,8 @@ var TextArea = _react.forwardRef.call(void 0,
     placeholder = "",
     rows = 3,
     value = "",
-    onChange
+    onChange,
+    resize = "none"
   }, forwardedRef) {
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
@@ -53,15 +54,20 @@ var TextArea = _react.forwardRef.call(void 0,
         },
         position: "relative",
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UUIXG3PQcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UUIXG3PQcjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               "data-testid": dataTestId,
               ref: forwardedRef,
-              className: _classnames2.default.call(void 0, TextField_module_default.textfield, TextArea_module_default.textarea, {
-                [TextField_module_default.inputError]: errorText
-              }),
+              className: _classnames2.default.call(void 0, 
+                TextField_module_default.textfield,
+                TextArea_module_default.textarea,
+                TextArea_module_default[`resize${resize}`],
+                {
+                  [TextField_module_default.inputError]: errorText
+                }
+              ),
               id: inputId,
               placeholder,
               maxLength,
@@ -72,7 +78,7 @@ var TextArea = _react.forwardRef.call(void 0,
             }
           ) }),
           (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _UUIXG3PQcjs.Typography_default,
+            _GUACYIXBcjs.Typography_default,
             {
               size: 100,
               color: errorText ? "destructive-primary" : "gray700",
@@ -89,4 +95,4 @@ var TextArea_default = TextArea;
 
 
 exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=XMP55GA2.cjs.map
+//# sourceMappingURL=T5NFBPT6.cjs.map

package/dist/__chunks/T5NFBPT6.cjs.map

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

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./FHLZXSCX.js";
+} from "./Q6657TAT.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=2QPXNLJ6.js.map
+//# sourceMappingURL=TQ7D5O7L.js.map

package/dist/__chunks/{D62L3CWM.cjs → TYPTB7HD.cjs}

@@ -4,16 +4,16 @@
 var _76LTWV2Qcjs = require('./76LTWV2Q.cjs');
 
 
-var _PROA22UKcjs = require('./PROA22UK.cjs');
+var _63XQSPT7cjs = require('./63XQSPT7.cjs');
 
 
-var _PLUVW6AMcjs = require('./PLUVW6AM.cjs');
+var _FESAFV44cjs = require('./FESAFV44.cjs');
 
 
-var _IL22HCBFcjs = require('./IL22HCBF.cjs');
+var _PLUVW6AMcjs = require('./PLUVW6AM.cjs');
 
 
-var _FESAFV44cjs = require('./FESAFV44.cjs');
+var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
 var _E5P6WRJDcjs = require('./E5P6WRJD.cjs');
@@ -130,7 +130,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
                         }
                       },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _PROA22UKcjs.IconButton_default,
+                        _63XQSPT7cjs.IconButton_default,
                         {
                           onClick: () => state.close(),
                           color: "tertiary",
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
 
 
 exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
-//# sourceMappingURL=D62L3CWM.cjs.map
+//# sourceMappingURL=TYPTB7HD.cjs.map

package/dist/__chunks/{RWYADXNX.cjs → UK5I7UHL.cjs}

@@ -8,4 +8,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=RWYADXNX.cjs.map
+//# sourceMappingURL=UK5I7UHL.cjs.map

package/dist/__chunks/{RWYADXNX.cjs.map → UK5I7UHL.cjs.map}

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

package/dist/__chunks/{B7DRDFQ5.js → UTGUC2G6.js}

@@ -5,7 +5,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./JCOCOPM4.js";
+} from "./CGTJ4LLU.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -14,7 +14,7 @@ import {
 } from "./M36V23WR.js";
 import {
   Typography_default
-} from "./RXXGDO2J.js";
+} from "./V562ZHQ7.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -122,4 +122,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=B7DRDFQ5.js.map
+//# sourceMappingURL=UTGUC2G6.js.map

package/dist/__chunks/{RXXGDO2J.js → V562ZHQ7.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
-  colors_module_default
-} from "./S6TNP7G5.js";
+  textColor
+} from "./ZVJGV6GH.js";
 
 // src/Typography/Typography.tsx
 import classNames from "classnames";
@@ -12,26 +12,6 @@ var Typography_module_default = { "typography": "_typography_737nn_1", "sansSeri
 
 // src/Typography/Typography.tsx
 import { jsx } from "react/jsx-runtime";
-function textColor(color) {
-  switch (color) {
-    case "gray700":
-      return colors_module_default.cambioGray800Color;
-    case "white":
-      return colors_module_default.cambioWhiteColor;
-    case "inherit":
-      return colors_module_default.inheritColor;
-    case "destructive-primary":
-      return colors_module_default.cambioDestructive900Color;
-    case "destructive-darkBackground":
-      return colors_module_default.cambioDestructive100Color;
-    case "success":
-      return colors_module_default.cambioSuccess900Color;
-    case "success-darkBackground":
-      return colors_module_default.cambioSuccess100Color;
-    default:
-      return colors_module_default.cambioBlackColor;
-  }
-}
 var Typography = forwardRef(function Typography2({
   align = "start",
   as = "div",
@@ -80,4 +60,4 @@ var Typography_default = Typography;
 export {
   Typography_default
 };
-//# sourceMappingURL=RXXGDO2J.js.map
+//# sourceMappingURL=V562ZHQ7.js.map

package/dist/__chunks/V562ZHQ7.js.map

@@ -0,0 +1 @@
+{"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 textColor from \"../colors/textColors\";\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;;;ADwJn7B;AAhJJ,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/{5E23KLF4.cjs → W45CFJI7.cjs}

@@ -19,9 +19,11 @@ var _C3KZXHTVcjs = require('./C3KZXHTV.cjs');
 var _RAL6R27Scjs = require('./RAL6R27S.cjs');
 
 
-var _UUIXG3PQcjs = require('./UUIXG3PQ.cjs');
+var _GUACYIXBcjs = require('./GUACYIXB.cjs');
 
 // src/LinkButton/LinkButton.tsx
+
+
 var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
@@ -82,10 +84,11 @@ var LinkButton = _react.forwardRef.call(void 0,
                 Button_module_default.icon,
                 _BHN2OODFcjs.iconSize_default[size],
                 foregroundColorClass
-              )
+              ),
+              size
             }
           ),
-          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UUIXG3PQcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
               className: foregroundColorClass,
@@ -99,7 +102,8 @@ var LinkButton = _react.forwardRef.call(void 0,
                 Button_module_default.icon,
                 _BHN2OODFcjs.iconSize_default[size],
                 foregroundColorClass
-              )
+              ),
+              size
             }
           ),
           loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -133,4 +137,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=5E23KLF4.cjs.map
+//# sourceMappingURL=W45CFJI7.cjs.map

package/dist/__chunks/W45CFJI7.cjs.map

@@ -0,0 +1 @@
+{"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;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACLqE,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;;;AFkIpL,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,cACA;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,cACA;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 {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} 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\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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            size={size}\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            size={size}\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/{T5LYIWR3.cjs → XF4T4J3B.cjs}

@@ -4,19 +4,19 @@
 var _C5XPZTFOcjs = require('./C5XPZTFO.cjs');
 
 
-var _ANY6BV2Wcjs = require('./ANY6BV2W.cjs');
+var _S2VK4XNLcjs = require('./S2VK4XNL.cjs');
 
 
 var _DMA6PPUZcjs = require('./DMA6PPUZ.cjs');
 
 
-var _JXI2A4FDcjs = require('./JXI2A4FD.cjs');
+var _ID2WKUNHcjs = require('./ID2WKUNH.cjs');
 
 
-var _5AKXXMJGcjs = require('./5AKXXMJG.cjs');
+var _ZTK7E42Pcjs = require('./ZTK7E42P.cjs');
 
 
-var _T6Q66MTPcjs = require('./T6Q66MTP.cjs');
+var _XVSTRGEEcjs = require('./XVSTRGEE.cjs');
 
 
 
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                 justifyContent: "end",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _C5XPZTFOcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _ANY6BV2Wcjs.Button_default,
+                    _S2VK4XNLcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _ANY6BV2Wcjs.Button_default,
+                    _S2VK4XNLcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
   }
 );
 var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _5AKXXMJGcjs.RichSelectSection_default,
-  Chip: _JXI2A4FDcjs.RichSelectChip_default,
-  RadioButton: _T6Q66MTPcjs.RichSelectRadioButton_default
+  Section: _ZTK7E42Pcjs.RichSelectSection_default,
+  Chip: _ID2WKUNHcjs.RichSelectChip_default,
+  RadioButton: _XVSTRGEEcjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=T5LYIWR3.cjs.map
+//# sourceMappingURL=XF4T4J3B.cjs.map

package/dist/__chunks/{T6Q66MTP.cjs → XVSTRGEE.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _WIHMNKU4cjs = require('./WIHMNKU4.cjs');
+var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
+var _3QFLV73Acjs = require('./3QFLV73A.cjs');
 
 
 
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
   function RichSelectRadioButton(props, ref) {
     const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _WIHMNKU4cjs.RadioButton_default,
+      _3QFLV73Acjs.RadioButton_default,
       {
         checked: isSelected,
         disabled: isDisabled,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
-//# sourceMappingURL=T6Q66MTP.cjs.map
+//# sourceMappingURL=XVSTRGEE.cjs.map

package/dist/__chunks/{H4L7P2Y7.js → Y67FDYEF.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   ModalDialog_default
-} from "./FVGIQTM2.js";
+} from "./NPZBG5AK.js";
 import {
   Dialog_default
 } from "./TZGJS522.js";
@@ -141,4 +141,4 @@ export {
   AriaPopover,
   Popover_default
 };
-//# sourceMappingURL=H4L7P2Y7.js.map
+//# sourceMappingURL=Y67FDYEF.js.map

package/dist/__chunks/{5AKXXMJG.cjs → ZTK7E42P.cjs}

@@ -7,7 +7,7 @@ var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
 var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
-var _UUIXG3PQcjs = require('./UUIXG3PQ.cjs');
+var _GUACYIXBcjs = require('./GUACYIXB.cjs');
 
 // src/RichSelect/RichSelectSection.tsx
 var _react = require('react');
@@ -39,7 +39,7 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
           }
         ),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UUIXG3PQcjs.Typography_default, { children: label }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GUACYIXBcjs.Typography_default, { children: label }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Collection, { children })
         ]
       }
@@ -50,4 +50,4 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectSection_default = RichSelectSection_default;
-//# sourceMappingURL=5AKXXMJG.cjs.map
+//# sourceMappingURL=ZTK7E42P.cjs.map

package/dist/__chunks/ZVJGV6GH.js

@@ -0,0 +1,31 @@
+"use client"
+import {
+  colors_module_default
+} from "./S6TNP7G5.js";
+
+// src/colors/textColors.ts
+function textColor(color) {
+  switch (color) {
+    case "gray700":
+      return colors_module_default.cambioGray800Color;
+    case "white":
+      return colors_module_default.cambioWhiteColor;
+    case "inherit":
+      return colors_module_default.inheritColor;
+    case "destructive-primary":
+      return colors_module_default.cambioDestructive900Color;
+    case "destructive-darkBackground":
+      return colors_module_default.cambioDestructive100Color;
+    case "success":
+      return colors_module_default.cambioSuccess900Color;
+    case "success-darkBackground":
+      return colors_module_default.cambioSuccess100Color;
+    default:
+      return colors_module_default.cambioBlackColor;
+  }
+}
+
+export {
+  textColor
+};
+//# sourceMappingURL=ZVJGV6GH.js.map

package/dist/__chunks/ZVJGV6GH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/textColors.ts"],"sourcesContent":["import colorStyles from \"../colors/colors.module.css\";\n\nexport default function 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"],"mappings":";;;;;;AAEe,SAAR,UACL,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;","names":[]}

package/dist/colors/textColors.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+
+var _72UQX6IXcjs = require('../__chunks/72UQX6IX.cjs');
+require('../__chunks/QT6IRCGW.cjs');
+require('../__chunks/WFVGNGEP.cjs');
+require('../__chunks/X2SDR4SD.cjs');
+
+
+exports.default = _72UQX6IXcjs.textColor;
+//# sourceMappingURL=textColors.cjs.map