@cambly/syntax-core 15.6.0 → 16.0.0

package/dist/__chunks/{CUUBDICM.js.map → HAXNGRII.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 05 Jun 2024 22:57:02 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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 14 Jun 2024 18:08:33 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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{6AOPOPJT.cjs → J2D7XRV7.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
+var _42SXZKBGcjs = require('./42SXZKBG.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -16,7 +16,7 @@ var _react = require('react');
 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" };
+var TextField_module_default = { "textfield": "_textfield_1of18_1", "label": "_label_1of18_22", "md": "_md_1of18_26", "height": "_height_1of18_30", "inputError": "_inputError_1of18_34" };
 
 // src/TextArea/TextArea.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -54,8 +54,8 @@ var TextArea = _react.forwardRef.call(void 0,
         },
         position: "relative",
         children: [
-          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3BGIBVCRcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3BGIBVCRcjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               "data-testid": dataTestId,
@@ -78,10 +78,10 @@ var TextArea = _react.forwardRef.call(void 0,
             }
           ) }),
           (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _3BGIBVCRcjs.Typography_default,
+            _42SXZKBGcjs.Typography_default,
             {
               size: 100,
-              color: errorText ? "destructive-primary" : "gray700",
+              color: errorText ? "destructive-darkBackground" : "gray700",
               children: errorText || helperText
             }
           ) })
@@ -95,4 +95,4 @@ var TextArea_default = TextArea;
 
 
 exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=6AOPOPJT.cjs.map
+//# sourceMappingURL=J2D7XRV7.cjs.map

package/dist/__chunks/{6AOPOPJT.cjs.map → J2D7XRV7.cjs.map}

@@ -1 +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,SAeQ,KAfR;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,QAER;AAAA,mBACC,oBAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UAEF,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 && (\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        )}\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\"}"]}
+{"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,SAeQ,KAfR;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,QAER;AAAA,mBACC,oBAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UAEF,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,+BAA+B;AAAA,cAEjD,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 && (\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        )}\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-darkBackground\" : \"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_1of18_1\",\"label\":\"_label_1of18_22\",\"md\":\"_md_1of18_26\",\"height\":\"_height_1of18_30\",\"inputError\":\"_inputError_1of18_34\"}"]}

package/dist/__chunks/{ZPV4YBFX.cjs → KA6GROBD.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _NJ7VV2CHcjs = require('./NJ7VV2CH.cjs');
+var _4ENILLBCcjs = require('./4ENILLBC.cjs');
 
 
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
@@ -16,7 +16,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var RichSelectChip_default = _react.forwardRef.call(void 0, 
   function RichSelectChip(props, ref) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _NJ7VV2CHcjs.Chip_default,
+      _4ENILLBCcjs.Chip_default,
       {
         text: props.label,
         selected: isSelected,
@@ -31,4 +31,4 @@ var RichSelectChip_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectChip_default = RichSelectChip_default;
-//# sourceMappingURL=ZPV4YBFX.cjs.map
+//# sourceMappingURL=KA6GROBD.cjs.map

package/dist/__chunks/{ONTB6T6K.cjs → KFQOJ7RG.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _MDQYGGZOcjs = require('./MDQYGGZO.cjs');
+var _F7FFR34Lcjs = require('./F7FFR34L.cjs');
 
 
-var _J7224OUTcjs = require('./J7224OUT.cjs');
+var _OJKBVPRVcjs = require('./OJKBVPRV.cjs');
 
 
 var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
@@ -44,10 +44,10 @@ function Tabs({
     }
   );
 }
-Tabs.Button = _J7224OUTcjs.TabButton;
-Tabs.Link = _MDQYGGZOcjs.TabLink_default;
+Tabs.Button = _OJKBVPRVcjs.TabButton;
+Tabs.Link = _F7FFR34Lcjs.TabLink_default;
 
 
 
 exports.Tabs = Tabs;
-//# sourceMappingURL=ONTB6T6K.cjs.map
+//# sourceMappingURL=KFQOJ7RG.cjs.map

package/dist/__chunks/{TLTSRB3H.js → KGGNBWMV.js}

@@ -4,7 +4,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./UXDF6ZIG.js";
+} from "./RCVW5CTF.js";
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -50,7 +50,7 @@ var Badge = ({
           weight: "medium",
           color: textColorForBackgroundColor(color),
           children: /* @__PURE__ */ jsxs(Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
-            Icon && /* @__PURE__ */ jsx(Icon, { className: Badge_module_default.icon, size: "xs" }),
+            Icon && /* @__PURE__ */ jsx(Icon, { className: Badge_module_default.icon, size: 100 }),
             /* @__PURE__ */ jsx(
               Typography_default,
               {
@@ -71,4 +71,4 @@ var Badge_default = Badge;
 export {
   Badge_default
 };
-//# sourceMappingURL=TLTSRB3H.js.map
+//# sourceMappingURL=KGGNBWMV.js.map

package/dist/__chunks/{TLTSRB3H.js.map → KGGNBWMV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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      paddingY={1}\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} size=\"xs\" />}\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;;;AC+ExH,SACW,KADX;AA5DR,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,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,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,MAAK,MAAK;AAAA,YACjD;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":[]}
+{"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 { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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      paddingY={1}\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} size={100} />}\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;;;AC+ExH,SACW,KADX;AA5DR,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,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,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,MAAM,KAAK;AAAA,YAClD;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/L32D5WEG.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+
+var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
+
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
+
+// src/Card/Card.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var Card = _react.forwardRef.call(void 0, function Card2(props, ref) {
+  const _a = props, { children } = _a, cardProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["children"]);
+  const {
+    backgroundColor = "white",
+    size = "roomy",
+    "data-testid": dataTestId
+  } = cardProps;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _KJLBDAZHcjs.Box_default,
+    {
+      rounding: "md",
+      padding: size === "compact" ? 2 : 4,
+      width: "100%",
+      backgroundColor,
+      "data-testid": dataTestId,
+      ref,
+      children
+    }
+  );
+});
+var Card_default = Card;
+
+
+
+exports.Card_default = Card_default;
+//# sourceMappingURL=L32D5WEG.cjs.map

package/dist/__chunks/L32D5WEG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["Card"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAkB;AA4CvB;AAZJ,IAAM,OAAO,WAAsC,SAASA,MAC1D,OACA,KACa;AACb,QAAmC,YAA3B,WApCV,IAoCqC,IAAd,sBAAc,IAAd,CAAb;AACR,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS,SAAS,YAAY,IAAI;AAAA,MAClC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,eAAQ","sourcesContent":["import { forwardRef } from \"react\";\nimport Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\ntype CardProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card which specifies the padding and spacing of the card.\n   *\n   * `compact`: 8px padding\n   * `roomy`: 16px padding\n   *\n   * @defaultValue `roomy`\n   */\n  size?: \"compact\" | \"roomy\";\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  props: CardProps,\n  ref,\n): JSX.Element {\n  const { children, ...cardProps } = props;\n  const {\n    backgroundColor = \"white\",\n    size = \"roomy\",\n    \"data-testid\": dataTestId,\n  } = cardProps;\n\n  return (\n    <Box\n      rounding=\"md\"\n      padding={size === \"compact\" ? 2 : 4}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n});\n\nexport default Card;\n"]}

package/dist/__chunks/{DRQYQTCA.js → NPUDOII6.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./NKGOCFTT.js";
+} from "./E3N5573J.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=DRQYQTCA.js.map
+//# sourceMappingURL=NPUDOII6.js.map

package/dist/__chunks/{JWGD2JGX.js → NVTSF5NY.js}

@@ -17,7 +17,7 @@ function textColor(color) {
     case "destructive-primary":
       return colors_module_default.cambioDestructive900Color;
     case "destructive-darkBackground":
-      return colors_module_default.cambioDestructive100Color;
+      return colors_module_default.cambioDestructive700Color;
     case "success":
       return colors_module_default.cambioSuccess900Color;
     case "success-darkBackground":
@@ -30,4 +30,4 @@ function textColor(color) {
 export {
   textColor
 };
-//# sourceMappingURL=JWGD2JGX.js.map
+//# sourceMappingURL=NVTSF5NY.js.map

package/dist/__chunks/{JWGD2JGX.js.map → NVTSF5NY.js.map}

@@ -1 +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    | \"white-secondary\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"white-secondary\":\n      return colorStyles.cambioWhite70Color;\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,OAWQ;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,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;","names":[]}
+{"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    | \"white-secondary\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"white-secondary\":\n      return colorStyles.cambioWhite70Color;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.cambioDestructive700Color;\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,OAWQ;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,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;","names":[]}

package/dist/__chunks/{X34FPOWI.cjs → O54TUH3V.cjs}

@@ -7,7 +7,8 @@ var _5JUNB754cjs = require('./5JUNB754.cjs');
 var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
 
 
-var _BHN2OODFcjs = require('./BHN2OODF.cjs');
+
+var _4Y7TNMFLcjs = require('./4Y7TNMFL.cjs');
 
 
 var _LZYX5BWDcjs = require('./LZYX5BWD.cjs');
@@ -19,7 +20,7 @@ var _SFBTR56Icjs = require('./SFBTR56I.cjs');
 var _65LHF5WDcjs = require('./65LHF5WD.cjs');
 
 
-var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
+var _42SXZKBGcjs = require('./42SXZKBG.cjs');
 
 // src/LinkButton/LinkButton.tsx
 
@@ -82,13 +83,13 @@ var LinkButton = _react.forwardRef.call(void 0,
             {
               className: _classnames2.default.call(void 0, 
                 Button_module_default.icon,
-                _BHN2OODFcjs.iconSize_default[size],
+                _4Y7TNMFLcjs.materialIconSize[size],
                 foregroundColorClass
               ),
-              size
+              size: _4Y7TNMFLcjs.internalIconSize[size]
             }
           ),
-          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3BGIBVCRcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
               className: foregroundColorClass,
@@ -100,10 +101,10 @@ var LinkButton = _react.forwardRef.call(void 0,
             {
               className: _classnames2.default.call(void 0, 
                 Button_module_default.icon,
-                _BHN2OODFcjs.iconSize_default[size],
+                _4Y7TNMFLcjs.materialIconSize[size],
                 foregroundColorClass
               ),
-              size
+              size: _4Y7TNMFLcjs.internalIconSize[size]
             }
           ),
           loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -137,4 +138,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=X34FPOWI.cjs.map
+//# sourceMappingURL=O54TUH3V.cjs.map

package/dist/__chunks/O54TUH3V.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;;;AFqIpL,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,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;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,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;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 {\n  materialIconSize,\n  internalIconSize,\n} 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              materialIconSize[size],\n              foregroundColorClass,\n            )}\n            size={internalIconSize[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              materialIconSize[size],\n              foregroundColorClass,\n            )}\n            size={internalIconSize[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/{J7224OUT.cjs → OJKBVPRV.cjs}

@@ -7,7 +7,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
 
 
-var _NFSZQICFcjs = require('./NFSZQICF.cjs');
+var _B3O42V6Xcjs = require('./B3O42V6X.cjs');
 
 
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
@@ -46,7 +46,7 @@ function TabButton({
           "data-testid": dataTestId,
           accessibilityLabel,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _NFSZQICFcjs.TabInternal,
+            _B3O42V6Xcjs.TabInternal,
             {
               text,
               selected,
@@ -64,4 +64,4 @@ function TabButton({
 
 
 exports.TabButton = TabButton;
-//# sourceMappingURL=J7224OUT.cjs.map
+//# sourceMappingURL=OJKBVPRV.cjs.map

package/dist/__chunks/{ZAB5SOZP.js → P7YFSOS7.js}

@@ -4,7 +4,7 @@ import {
 } from "./5JQ6C2XV.js";
 import {
   TabInternal
-} from "./CB66GOW7.js";
+} from "./BXKO34RQ.js";
 import {
   Box_default
 } from "./65PMWIHY.js";
@@ -35,7 +35,7 @@ var TabLink = forwardRef(
         className: classnames({
           [Tabs_module_default.unselectedTab]: !selected,
           [Tabs_module_default.selectedTabOnLightBackground]: selected && on === "lightBackground",
-          [Tabs_module_default.selectedTabDarkBackground]: selected && on === "darkBackground"
+          [Tabs_module_default.selectedTabOnDarkBackground]: selected && on === "darkBackground"
         }),
         style: {
           height: "100%"
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 export {
   TabLink_default
 };
-//# sourceMappingURL=ZAB5SOZP.js.map
+//# sourceMappingURL=P7YFSOS7.js.map

package/dist/__chunks/P7YFSOS7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport TabInternal from \"./TabInternal\";\nimport classnames from \"classnames\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\ntype TabLinkProps = ComponentProps<typeof TabInternal> & {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The link that the Tab 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   * 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\nconst TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      on = \"lightBackground\",\n      onClick,\n      selected,\n      endContent,\n      itemCount,\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <div\n        role=\"tab\"\n        className={classnames({\n          [styles.unselectedTab]: !selected,\n          [styles.selectedTabOnLightBackground]:\n            selected && on === \"lightBackground\",\n          [styles.selectedTabOnDarkBackground]:\n            selected && on === \"darkBackground\",\n        })}\n        style={{\n          height: \"100%\",\n        }}\n      >\n        <Box display=\"flex\" alignItems=\"center\" height=\"100%\">\n          <a\n            href={href}\n            data-testid={dataTestId}\n            target={target}\n            ref={ref}\n            rel={rel}\n            onClick={onClick}\n            className={styles.link}\n          >\n            <TabInternal\n              text={text}\n              selected={selected}\n              endContent={endContent}\n              itemCount={itemCount}\n              on={on}\n            />\n          </a>\n        </Box>\n      </div>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n\nexport default TabLink;\n"],"mappings":";;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AAEP,OAAO,gBAAgB;AAsEX;AAxCZ,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW;AAAA,UACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,UACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,UACrB,CAAC,oBAAO,2BAA2B,GACjC,YAAY,OAAO;AAAA,QACvB,CAAC;AAAA,QACD,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QAEA,8BAAC,eAAI,SAAQ,QAAO,YAAW,UAAS,QAAO,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,oBAAO;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/{SW2JQXU6.cjs → POMJQZKJ.cjs}

@@ -17,7 +17,7 @@ function textColor(color) {
     case "destructive-primary":
       return _SVA2ABQQcjs.colors_module_default.cambioDestructive900Color;
     case "destructive-darkBackground":
-      return _SVA2ABQQcjs.colors_module_default.cambioDestructive100Color;
+      return _SVA2ABQQcjs.colors_module_default.cambioDestructive700Color;
     case "success":
       return _SVA2ABQQcjs.colors_module_default.cambioSuccess900Color;
     case "success-darkBackground":
@@ -30,4 +30,4 @@ function textColor(color) {
 
 
 exports.textColor = textColor;
-//# sourceMappingURL=SW2JQXU6.cjs.map
+//# sourceMappingURL=POMJQZKJ.cjs.map

package/dist/__chunks/{SW2JQXU6.cjs.map → POMJQZKJ.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAWQ;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,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","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    | \"white-secondary\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"white-secondary\":\n      return colorStyles.cambioWhite70Color;\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"]}
+{"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAWQ;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,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","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    | \"white-secondary\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"white-secondary\":\n      return colorStyles.cambioWhite70Color;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.cambioDestructive700Color;\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"]}

package/dist/__chunks/{7PXG7CRK.js → Q2KBODSW.js}

@@ -1,28 +1,28 @@
 "use client"
 import {
   Popover_default
-} from "./ZYWRMB4F.js";
+} from "./C22XFS4G.js";
 import {
   DialogContext
 } from "./5HEC7ASW.js";
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./CUUBDICM.js";
+} from "./HAXNGRII.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./5RXHG6S5.js";
+} from "./4C7SU3EM.js";
 import {
   RichSelectSection_default
-} from "./RE6LUYXB.js";
+} from "./CHMPCLBE.js";
 import {
   RichSelectRadioButton_default
-} from "./BS5FRXYG.js";
+} from "./B64Z54QN.js";
 import {
   RichSelectChip_default
-} from "./DRQYQTCA.js";
+} from "./NPUDOII6.js";
 import {
   TapArea_default
 } from "./77FFPQY6.js";
@@ -31,7 +31,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./UXDF6ZIG.js";
+} from "./RCVW5CTF.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -267,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=7PXG7CRK.js.map
+//# sourceMappingURL=Q2KBODSW.js.map

package/dist/__chunks/{UXDF6ZIG.js → RCVW5CTF.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   textColor
-} from "./JWGD2JGX.js";
+} from "./NVTSF5NY.js";
 
 // src/Typography/Typography.tsx
 import classNames from "classnames";
@@ -60,4 +60,4 @@ var Typography_default = Typography;
 export {
   Typography_default
 };
-//# sourceMappingURL=UXDF6ZIG.js.map
+//# sourceMappingURL=RCVW5CTF.js.map

package/dist/__chunks/{V4M5XFJN.cjs → SEJ4BIQG.cjs}

@@ -1,24 +1,24 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _SW2JQXU6cjs = require('./SW2JQXU6.cjs');
+var _POMJQZKJcjs = require('./POMJQZKJ.cjs');
 
 // src/Icon/Icon.tsx
 var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Icon.module.css#css-module
-var Icon_module_default = { "icon": "_icon_1ku5p_1", "iconxs": "_iconxs_1ku5p_8", "iconsm": "_iconsm_1ku5p_13", "iconmd": "_iconmd_1ku5p_18", "iconlg": "_iconlg_1ku5p_23" };
+var Icon_module_default = { "icon": "_icon_1vyva_1", "icon100": "_icon100_1vyva_8", "icon200": "_icon200_1vyva_13", "icon300": "_icon300_1vyva_18", "icon400": "_icon400_1vyva_23", "icon500": "_icon500_1vyva_28", "icon600": "_icon600_1vyva_33", "icon700": "_icon700_1vyva_38", "icon800": "_icon800_1vyva_43", "icon900": "_icon900_1vyva_48", "icon1000": "_icon1000_1vyva_53" };
 
 // src/Icon/Icon.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var Icon = _react.forwardRef.call(void 0, 
-  ({ color = "inherit", path, size = "md" }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  ({ color = "inherit", path, size = 200 }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
       className: _classnames2.default.call(void 0, 
         Icon_module_default.icon,
-        _SW2JQXU6cjs.textColor.call(void 0, color),
+        _POMJQZKJcjs.textColor.call(void 0, color),
         Icon_module_default[`icon${size}`]
       ),
       ref,
@@ -34,4 +34,4 @@ var Icon_default = Icon;
 
 
 exports.Icon_default = Icon_default;
-//# sourceMappingURL=V4M5XFJN.cjs.map
+//# sourceMappingURL=SEJ4BIQG.cjs.map

package/dist/__chunks/SEJ4BIQG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"names":[],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAChD,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADwDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,UAAU,KAAK;AAAA,QACf,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./Icon.module.css\";\nimport textColor from \"../colors/textColors\";\nimport type Typography from \"../Typography/Typography\";\n\ntype IconProps = {\n  /**\n   * The color of the Icon.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: ComponentProps<typeof Typography>[\"color\"];\n  /**\n   * The size of the Icon.\n   * * 0: 16px x 16px\n   * * 100: 20px x 20px\n   * * 200: 24px x 24px\n   * * 300: 28px x 28px\n   * * 400: 48px x 48px\n   * * 500: 72px x 72px\n   * * 600: 100px x 100px\n   * * 700: 140px x 140px\n   * * 800: 200px x 200px\n   * * 9000: 280px x 280px\n   *\n   * @defaultValue 200\n   */\n  size?: 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n  /**\n   * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n   */\n  path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n  ({ color = \"inherit\", path, size = 200 }: IconProps, ref) => (\n    <svg\n      className={classnames(\n        styles.icon,\n        textColor(color),\n        styles[`icon${size}`],\n      )}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d={path} />\n    </svg>\n  ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1vyva_1\",\"icon100\":\"_icon100_1vyva_8\",\"icon200\":\"_icon200_1vyva_13\",\"icon300\":\"_icon300_1vyva_18\",\"icon400\":\"_icon400_1vyva_23\",\"icon500\":\"_icon500_1vyva_28\",\"icon600\":\"_icon600_1vyva_33\",\"icon700\":\"_icon700_1vyva_38\",\"icon800\":\"_icon800_1vyva_43\",\"icon900\":\"_icon900_1vyva_48\",\"icon1000\":\"_icon1000_1vyva_53\"}"]}

package/dist/__chunks/{K2RGVD55.js → SKVMG4AF.js}

@@ -1,19 +1,19 @@
 "use client"
 import {
   textColor
-} from "./JWGD2JGX.js";
+} from "./NVTSF5NY.js";
 
 // src/Icon/Icon.tsx
 import { forwardRef } from "react";
 import classnames from "classnames";
 
 // css-module:./Icon.module.css#css-module
-var Icon_module_default = { "icon": "_icon_1ku5p_1", "iconxs": "_iconxs_1ku5p_8", "iconsm": "_iconsm_1ku5p_13", "iconmd": "_iconmd_1ku5p_18", "iconlg": "_iconlg_1ku5p_23" };
+var Icon_module_default = { "icon": "_icon_1vyva_1", "icon100": "_icon100_1vyva_8", "icon200": "_icon200_1vyva_13", "icon300": "_icon300_1vyva_18", "icon400": "_icon400_1vyva_23", "icon500": "_icon500_1vyva_28", "icon600": "_icon600_1vyva_33", "icon700": "_icon700_1vyva_38", "icon800": "_icon800_1vyva_43", "icon900": "_icon900_1vyva_48", "icon1000": "_icon1000_1vyva_53" };
 
 // src/Icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
 var Icon = forwardRef(
-  ({ color = "inherit", path, size = "md" }, ref) => /* @__PURE__ */ jsx(
+  ({ color = "inherit", path, size = 200 }, ref) => /* @__PURE__ */ jsx(
     "svg",
     {
       className: classnames(
@@ -34,4 +34,4 @@ var Icon_default = Icon;
 export {
   Icon_default
 };
-//# sourceMappingURL=K2RGVD55.js.map
+//# sourceMappingURL=SKVMG4AF.js.map

package/dist/__chunks/SKVMG4AF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./Icon.module.css\";\nimport textColor from \"../colors/textColors\";\nimport type Typography from \"../Typography/Typography\";\n\ntype IconProps = {\n  /**\n   * The color of the Icon.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: ComponentProps<typeof Typography>[\"color\"];\n  /**\n   * The size of the Icon.\n   * * 0: 16px x 16px\n   * * 100: 20px x 20px\n   * * 200: 24px x 24px\n   * * 300: 28px x 28px\n   * * 400: 48px x 48px\n   * * 500: 72px x 72px\n   * * 600: 100px x 100px\n   * * 700: 140px x 140px\n   * * 800: 200px x 200px\n   * * 9000: 280px x 280px\n   *\n   * @defaultValue 200\n   */\n  size?: 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n  /**\n   * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n   */\n  path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n  ({ color = \"inherit\", path, size = 200 }: IconProps, ref) => (\n    <svg\n      className={classnames(\n        styles.icon,\n        textColor(color),\n        styles[`icon${size}`],\n      )}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d={path} />\n    </svg>\n  ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1vyva_1\",\"icon100\":\"_icon100_1vyva_8\",\"icon200\":\"_icon200_1vyva_13\",\"icon300\":\"_icon300_1vyva_18\",\"icon400\":\"_icon400_1vyva_23\",\"icon500\":\"_icon500_1vyva_28\",\"icon600\":\"_icon600_1vyva_33\",\"icon700\":\"_icon700_1vyva_38\",\"icon800\":\"_icon800_1vyva_43\",\"icon900\":\"_icon900_1vyva_48\",\"icon1000\":\"_icon1000_1vyva_53\"}"],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAChD,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADwDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,UAAU,KAAK;AAAA,QACf,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}