@cambly/syntax-core 10.34.0 → 10.36.0

package/dist/__chunks/XCGRNBQH.cjs.map

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

package/dist/__chunks/{VKL4RHBK.js → Y3D5XFML.js}

@@ -1,41 +1,18 @@
 "use client"
 import {
   Box_default
-} from "./GCE2CI4A.js";
+} from "./J6DAGNNN.js";
 import {
   Typography_default
-} from "./YAM7DAOZ.js";
+} from "./2IXPTAJD.js";
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
 
 // src/Badge/Badge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var badgeColorClassicToCambio = {
-  gray200: "gray370",
-  gray900: "gray870",
-  destructive700: "destructive300",
-  orange700: "orange",
-  yellow700: "tan",
-  success700: "success300",
-  primary700: "sky",
-  purple700: "lilac",
-  sky: "sky",
-  success300: "success300",
-  destructive300: "destructive300",
-  orange: "orange",
-  tan: "tan",
-  gray370: "gray370",
-  gray870: "gray870",
-  lilac: "lilac",
-  thistle: "thistle",
-  pink: "pink"
-};
 var textColorForBackgroundColor = (color) => {
   switch (color) {
-    case "gray200":
-    case "yellow700":
-      return "gray900";
     case "gray370":
     case "destructive300":
     case "orange":
@@ -53,16 +30,15 @@ var textColorForBackgroundColor = (color) => {
 var Badge = ({
   icon: Icon,
   text,
-  color = "primary700"
+  color = "sky"
 }) => {
-  const mappedColor = badgeColorClassicToCambio[color];
   return /* @__PURE__ */ jsx(
     Box_default,
     {
       display: "inlineFlex",
       paddingX: 2,
       rounding: "sm",
-      backgroundColor: mappedColor,
+      backgroundColor: color,
       alignItems: "center",
       justifyContent: "center",
       minHeight: 24,
@@ -71,13 +47,13 @@ var Badge = ({
         {
           size: 100,
           weight: "medium",
-          color: textColorForBackgroundColor(mappedColor),
+          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 }),
             /* @__PURE__ */ jsx(
               Typography_default,
               {
-                color: textColorForBackgroundColor(mappedColor),
+                color: textColorForBackgroundColor(color),
                 size: 100,
                 weight: "medium",
                 children: text
@@ -94,4 +70,4 @@ var Badge_default = Badge;
 export {
   Badge_default
 };
-//# sourceMappingURL=VKL4RHBK.js.map
+//# sourceMappingURL=Y3D5XFML.js.map

package/dist/__chunks/Y3D5XFML.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst badgeColor = [\n  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"sky\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      rounding={\"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n    >\n      <Typography\n        size={100}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} />}\n          <Typography\n            color={textColorForBackgroundColor(color)}\n            size={100}\n            weight=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0ExH,SACW,KADX;AAzDR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAemB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,YACvC;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/{KZR322YX.cjs → YICZLNHI.cjs}

@@ -1,41 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
+var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
 
 
-var _XCSW34UMcjs = require('./XCSW34UM.cjs');
+var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
 
 // src/Badge/Badge.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var badgeColorClassicToCambio = {
-  gray200: "gray370",
-  gray900: "gray870",
-  destructive700: "destructive300",
-  orange700: "orange",
-  yellow700: "tan",
-  success700: "success300",
-  primary700: "sky",
-  purple700: "lilac",
-  sky: "sky",
-  success300: "success300",
-  destructive300: "destructive300",
-  orange: "orange",
-  tan: "tan",
-  gray370: "gray370",
-  gray870: "gray870",
-  lilac: "lilac",
-  thistle: "thistle",
-  pink: "pink"
-};
 var textColorForBackgroundColor = (color) => {
   switch (color) {
-    case "gray200":
-    case "yellow700":
-      return "gray900";
     case "gray370":
     case "destructive300":
     case "orange":
@@ -53,31 +30,30 @@ var textColorForBackgroundColor = (color) => {
 var Badge = ({
   icon: Icon,
   text,
-  color = "primary700"
+  color = "sky"
 }) => {
-  const mappedColor = badgeColorClassicToCambio[color];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _RJ3ZYLJScjs.Box_default,
+    _DB7KX3J2cjs.Box_default,
     {
       display: "inlineFlex",
       paddingX: 2,
       rounding: "sm",
-      backgroundColor: mappedColor,
+      backgroundColor: color,
       alignItems: "center",
       justifyContent: "center",
       minHeight: 24,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _XCSW34UMcjs.Typography_default,
+        _XCGRNBQHcjs.Typography_default,
         {
           size: 100,
           weight: "medium",
-          color: textColorForBackgroundColor(mappedColor),
-          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _RJ3ZYLJScjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+          color: textColorForBackgroundColor(color),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _DB7KX3J2cjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
             Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _XCSW34UMcjs.Typography_default,
+              _XCGRNBQHcjs.Typography_default,
               {
-                color: textColorForBackgroundColor(mappedColor),
+                color: textColorForBackgroundColor(color),
                 size: 100,
                 weight: "medium",
                 children: text
@@ -94,4 +70,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=KZR322YX.cjs.map
+//# sourceMappingURL=YICZLNHI.cjs.map

package/dist/__chunks/YICZLNHI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0ExH,SACW,KADX;AAzDR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAemB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,YACvC;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst badgeColor = [\n  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"sky\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      rounding={\"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n    >\n      <Typography\n        size={100}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} />}\n          <Typography\n            color={textColorForBackgroundColor(color)}\n            size={100}\n            weight=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"]}

package/dist/colors/backgroundColor.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _M3PAAPMIcjs = require('../__chunks/M3PAAPMI.cjs');
+var _RAL6R27Scjs = require('../__chunks/RAL6R27S.cjs');
 require('../__chunks/KZT53ITQ.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.backgroundColor = _M3PAAPMIcjs.backgroundColor;
+exports.backgroundColor = _RAL6R27Scjs.backgroundColor;
 //# sourceMappingURL=backgroundColor.cjs.map

package/dist/colors/backgroundColor.d.ts

@@ -1,5 +1,5 @@
-import { CambioColor } from '../constants.js';
+import { Color } from '../constants.js';
 
-declare function backgroundColor(color: (typeof CambioColor)[number], on: "lightBackground" | "darkBackground"): string;
+declare function backgroundColor(color: (typeof Color)[number], on: "lightBackground" | "darkBackground"): string;
 
 export { backgroundColor };

package/dist/colors/backgroundColor.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   backgroundColor
-} from "../__chunks/DEXL5BXD.js";
+} from "../__chunks/T6PXFSRX.js";
 import "../__chunks/PUTZ53EC.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/colors/border.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _BYVURUTUcjs = require('../__chunks/BYVURUTU.cjs');
+var _C3KZXHTVcjs = require('../__chunks/C3KZXHTV.cjs');
 require('../__chunks/KZT53ITQ.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.border = _BYVURUTUcjs.border;
+exports.border = _C3KZXHTVcjs.border;
 //# sourceMappingURL=border.cjs.map

package/dist/colors/border.d.ts

@@ -1,5 +1,5 @@
-import { CambioColor } from '../constants.js';
+import { Color } from '../constants.js';
 
-declare function border(color: (typeof CambioColor)[number], on: "lightBackground" | "darkBackground"): string | null;
+declare function border(color: (typeof Color)[number], on: "lightBackground" | "darkBackground"): string | null;
 
 export { border };

package/dist/colors/border.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   border
-} from "../__chunks/6CZHUML6.js";
+} from "../__chunks/ECA33JJ5.js";
 import "../__chunks/PUTZ53EC.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/colors/foregroundColor.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _LBA34HLFcjs = require('../__chunks/LBA34HLF.cjs');
+var _MKZONAGTcjs = require('../__chunks/MKZONAGT.cjs');
 require('../__chunks/KZT53ITQ.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.foregroundColor = _LBA34HLFcjs.foregroundColor;
+exports.foregroundColor = _MKZONAGTcjs.foregroundColor;
 //# sourceMappingURL=foregroundColor.cjs.map

package/dist/colors/foregroundColor.d.ts

@@ -1,5 +1,5 @@
-import { CambioColor } from '../constants.js';
+import { Color } from '../constants.js';
 
-declare function foregroundColor(color: (typeof CambioColor)[number], on: "lightBackground" | "darkBackground"): string;
+declare function foregroundColor(color: (typeof Color)[number], on: "lightBackground" | "darkBackground"): string;
 
 export { foregroundColor };

package/dist/colors/foregroundColor.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   foregroundColor
-} from "../__chunks/423C767D.js";
+} from "../__chunks/UVQS6LU3.js";
 import "../__chunks/PUTZ53EC.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/constants.cjs

@@ -3,21 +3,6 @@ require('./__chunks/X2SDR4SD.cjs');
 
 // src/constants.ts
 var Color = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "branded",
-  "destructive-primary",
-  "destructive-secondary",
-  "destructive-tertiary",
-  "gray200",
-  "gray700",
-  "gray800",
-  "gray900",
-  "white",
-  "inherit"
-];
-var CambioColor = [
   "primary",
   "secondary",
   "tertiary",
@@ -33,6 +18,5 @@ var Size = ["sm", "md", "lg"];
 
 
 
-
-exports.CambioColor = CambioColor; exports.Color = Color; exports.Size = Size;
+exports.Color = Color; exports.Size = Size;
 //# sourceMappingURL=constants.cjs.map

package/dist/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts"],"names":[],"mappings":";;;;AAAO,IAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,OAAO,CAAC,MAAM,MAAM,IAAI","sourcesContent":["export const Color = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"branded\",\n  \"destructive-primary\",\n  \"destructive-secondary\",\n  \"destructive-tertiary\",\n  \"gray200\",\n  \"gray700\",\n  \"gray800\",\n  \"gray900\",\n  \"white\",\n  \"inherit\",\n] as const;\n\nexport const CambioColor = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"branded\",\n  \"success-primary\",\n  \"success-secondary\",\n  \"success-tertiary\",\n  \"destructive-primary\",\n  \"destructive-secondary\",\n  \"destructive-tertiary\",\n];\n\nexport const Size = [\"sm\", \"md\", \"lg\"] as const;\n"]}
+{"version":3,"sources":["../src/constants.ts"],"names":[],"mappings":";;;;AAAO,IAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,OAAO,CAAC,MAAM,MAAM,IAAI","sourcesContent":["export const Color = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"branded\",\n  \"success-primary\",\n  \"success-secondary\",\n  \"success-tertiary\",\n  \"destructive-primary\",\n  \"destructive-secondary\",\n  \"destructive-tertiary\",\n];\n\nexport const Size = [\"sm\", \"md\", \"lg\"] as const;\n"]}

package/dist/constants.d.ts

@@ -1,5 +1,4 @@
-declare const Color: readonly ["primary", "secondary", "tertiary", "branded", "destructive-primary", "destructive-secondary", "destructive-tertiary", "gray200", "gray700", "gray800", "gray900", "white", "inherit"];
-declare const CambioColor: string[];
+declare const Color: string[];
 declare const Size: readonly ["sm", "md", "lg"];
 
-export { CambioColor, Color, Size };
+export { Color, Size };

package/dist/constants.js

@@ -3,21 +3,6 @@ import "./__chunks/UWGNJENA.js";
 
 // src/constants.ts
 var Color = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "branded",
-  "destructive-primary",
-  "destructive-secondary",
-  "destructive-tertiary",
-  "gray200",
-  "gray700",
-  "gray800",
-  "gray900",
-  "white",
-  "inherit"
-];
-var CambioColor = [
   "primary",
   "secondary",
   "tertiary",
@@ -31,7 +16,6 @@ var CambioColor = [
 ];
 var Size = ["sm", "md", "lg"];
 export {
-  CambioColor,
   Color,
   Size
 };

package/dist/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const Color = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"branded\",\n  \"destructive-primary\",\n  \"destructive-secondary\",\n  \"destructive-tertiary\",\n  \"gray200\",\n  \"gray700\",\n  \"gray800\",\n  \"gray900\",\n  \"white\",\n  \"inherit\",\n] as const;\n\nexport const CambioColor = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"branded\",\n  \"success-primary\",\n  \"success-secondary\",\n  \"success-tertiary\",\n  \"destructive-primary\",\n  \"destructive-secondary\",\n  \"destructive-tertiary\",\n];\n\nexport const Size = [\"sm\", \"md\", \"lg\"] as const;\n"],"mappings":";;;;AAAO,IAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,OAAO,CAAC,MAAM,MAAM,IAAI;","names":[]}
+{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const Color = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"branded\",\n  \"success-primary\",\n  \"success-secondary\",\n  \"success-tertiary\",\n  \"destructive-primary\",\n  \"destructive-secondary\",\n  \"destructive-tertiary\",\n];\n\nexport const Size = [\"sm\", \"md\", \"lg\"] as const;\n"],"mappings":";;;;AAAO,IAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,OAAO,CAAC,MAAM,MAAM,IAAI;","names":[]}

package/dist/index.cjs

@@ -1,85 +1,85 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _W74F2R45cjs = require('./__chunks/W74F2R45.cjs');
+var _5A5IBIPCcjs = require('./__chunks/5A5IBIPC.cjs');
 
 
-var _TNVQI6LFcjs = require('./__chunks/TNVQI6LF.cjs');
+var _ALD77RKFcjs = require('./__chunks/ALD77RKF.cjs');
 
 
-var _BEKUOSKUcjs = require('./__chunks/BEKUOSKU.cjs');
+var _2Y7Y6KGWcjs = require('./__chunks/2Y7Y6KGW.cjs');
 
 
-var _KZR322YXcjs = require('./__chunks/KZR322YX.cjs');
+var _YICZLNHIcjs = require('./__chunks/YICZLNHI.cjs');
 
 
-var _2MQDGNBMcjs = require('./__chunks/2MQDGNBM.cjs');
+var _C2F5LYEQcjs = require('./__chunks/C2F5LYEQ.cjs');
 
 
-var _HAI43LQ2cjs = require('./__chunks/HAI43LQ2.cjs');
+var _272LSIIScjs = require('./__chunks/272LSIIS.cjs');
 
 
-var _XCI3DO6Fcjs = require('./__chunks/XCI3DO6F.cjs');
+var _TY6VF7DFcjs = require('./__chunks/TY6VF7DF.cjs');
 
 
-var _ZQRUOZFXcjs = require('./__chunks/ZQRUOZFX.cjs');
+var _CGBH73TMcjs = require('./__chunks/CGBH73TM.cjs');
 require('./__chunks/HUIHS6RN.cjs');
-require('./__chunks/E32CAKEB.cjs');
+require('./__chunks/MARZTIPV.cjs');
 require('./__chunks/THM3NAFO.cjs');
 
 
-var _HNXMVFBHcjs = require('./__chunks/HNXMVFBH.cjs');
+var _EMUPGJ7Icjs = require('./__chunks/EMUPGJ7I.cjs');
 
 
-var _RLKQCGMZcjs = require('./__chunks/RLKQCGMZ.cjs');
+var _WBKZQ5CYcjs = require('./__chunks/WBKZQ5CY.cjs');
 require('./__chunks/4UJE5GMH.cjs');
 
 
-var _XXSRBAIEcjs = require('./__chunks/XXSRBAIE.cjs');
-require('./__chunks/4HCWQMZO.cjs');
+var _UGIRVBGYcjs = require('./__chunks/UGIRVBGY.cjs');
+require('./__chunks/6PNFY6W6.cjs');
 
 
 var _C5XPZTFOcjs = require('./__chunks/C5XPZTFO.cjs');
 
 
-var _4E7A4J3Kcjs = require('./__chunks/4E7A4J3K.cjs');
+var _S5CYISJEcjs = require('./__chunks/S5CYISJE.cjs');
 require('./__chunks/3P2PWHOU.cjs');
 require('./__chunks/5JUNB754.cjs');
 require('./__chunks/UAXX2ZEQ.cjs');
 
 
 var _DMA6PPUZcjs = require('./__chunks/DMA6PPUZ.cjs');
-require('./__chunks/MI5OUDV4.cjs');
+require('./__chunks/L2CARKP7.cjs');
 
 
-var _ESGHXEEAcjs = require('./__chunks/ESGHXEEA.cjs');
+var _DOQ5YEJ4cjs = require('./__chunks/DOQ5YEJ4.cjs');
 
 
-var _YJI76DU2cjs = require('./__chunks/YJI76DU2.cjs');
-require('./__chunks/N7WA46RL.cjs');
-require('./__chunks/BNBE2XVM.cjs');
+var _S77S5MVXcjs = require('./__chunks/S77S5MVX.cjs');
+require('./__chunks/CA6LTZL7.cjs');
+require('./__chunks/76LTWV2Q.cjs');
 
 
-var _5VVFGPW6cjs = require('./__chunks/5VVFGPW6.cjs');
+var _PROA22UKcjs = require('./__chunks/PROA22UK.cjs');
 
 
-var _5PL5GKUKcjs = require('./__chunks/5PL5GKUK.cjs');
-require('./__chunks/BSSH5WJ4.cjs');
-require('./__chunks/SND6HHAL.cjs');
+var _3UEOKPM2cjs = require('./__chunks/3UEOKPM2.cjs');
+require('./__chunks/VBSPIS4Y.cjs');
+require('./__chunks/JHUEQO5Q.cjs');
 require('./__chunks/MF7LLV7V.cjs');
-require('./__chunks/KNFEGYQM.cjs');
+require('./__chunks/QVR3OSXW.cjs');
 
 
-var _MLUQYLT2cjs = require('./__chunks/MLUQYLT2.cjs');
+var _52L4VM3Gcjs = require('./__chunks/52L4VM3G.cjs');
 require('./__chunks/XLUVINJW.cjs');
 require('./__chunks/RYUXG4AS.cjs');
-require('./__chunks/LBA34HLF.cjs');
-require('./__chunks/BYVURUTU.cjs');
-require('./__chunks/M3PAAPMI.cjs');
+require('./__chunks/MKZONAGT.cjs');
+require('./__chunks/C3KZXHTV.cjs');
+require('./__chunks/RAL6R27S.cjs');
 require('./__chunks/KZT53ITQ.cjs');
 
 
-var _3RDV2SM7cjs = require('./__chunks/3RDV2SM7.cjs');
+var _7IV2L4B4cjs = require('./__chunks/7IV2L4B4.cjs');
 require('./__chunks/PLUVW6AM.cjs');
 require('./__chunks/IL22HCBF.cjs');
 
@@ -87,16 +87,17 @@ require('./__chunks/IL22HCBF.cjs');
 var _ASFZDRJJcjs = require('./__chunks/ASFZDRJJ.cjs');
 
 
-var _EOHYUABJcjs = require('./__chunks/EOHYUABJ.cjs');
+var _FPDQA475cjs = require('./__chunks/FPDQA475.cjs');
 require('./__chunks/WFVGNGEP.cjs');
 
 
-var _RJ3ZYLJScjs = require('./__chunks/RJ3ZYLJS.cjs');
-require('./__chunks/45TMKSJQ.cjs');
+var _DB7KX3J2cjs = require('./__chunks/DB7KX3J2.cjs');
 
+require('./__chunks/CHDS4D44.cjs');
 
 
-var _XCSW34UMcjs = require('./__chunks/XCSW34UM.cjs');
+
+var _XCGRNBQHcjs = require('./__chunks/XCGRNBQH.cjs');
 require('./__chunks/QT6IRCGW.cjs');
 
 require('./__chunks/K4AUV2VK.cjs');
@@ -131,5 +132,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _W74F2R45cjs.Avatar_default; exports.AvatarGroup = _TNVQI6LFcjs.AvatarGroup; exports.Badge = _KZR322YXcjs.Badge_default; exports.Box = _RJ3ZYLJScjs.Box_default; exports.Button = _4E7A4J3Kcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _BEKUOSKUcjs.Card; exports.Checkbox = _HAI43LQ2cjs.Checkbox_default; exports.Chip = _ESGHXEEAcjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _ZQRUOZFXcjs.Heading_default; exports.IconButton = _5VVFGPW6cjs.IconButton_default; exports.LinkButton = _2MQDGNBMcjs.LinkButton_default; exports.Modal = _XCI3DO6Fcjs.Modal; exports.Popover = _YJI76DU2cjs.Popover_default; exports.RadioButton = _MLUQYLT2cjs.RadioButton_default; exports.RichSelectList = _XXSRBAIEcjs.RichSelectList_default; exports.SelectList = _RLKQCGMZcjs.SelectList; exports.TapArea = _5PL5GKUKcjs.TapArea_default; exports.TextArea = _HNXMVFBHcjs.TextArea_default; exports.TextField = _EOHYUABJcjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _3RDV2SM7cjs.Tooltip_default; exports.Typography = _XCSW34UMcjs.Typography_default;
+exports.Avatar = _5A5IBIPCcjs.Avatar_default; exports.AvatarGroup = _ALD77RKFcjs.AvatarGroup; exports.Badge = _YICZLNHIcjs.Badge_default; exports.Box = _DB7KX3J2cjs.Box_default; exports.Button = _S5CYISJEcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _2Y7Y6KGWcjs.Card; exports.Checkbox = _272LSIIScjs.Checkbox_default; exports.Chip = _DOQ5YEJ4cjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _CGBH73TMcjs.Heading_default; exports.IconButton = _PROA22UKcjs.IconButton_default; exports.LinkButton = _C2F5LYEQcjs.LinkButton_default; exports.Modal = _TY6VF7DFcjs.Modal; exports.Popover = _S77S5MVXcjs.Popover_default; exports.RadioButton = _52L4VM3Gcjs.RadioButton_default; exports.RichSelectList = _UGIRVBGYcjs.RichSelectList_default; exports.SelectList = _WBKZQ5CYcjs.SelectList; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _EMUPGJ7Icjs.TextArea_default; exports.TextField = _FPDQA475cjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _7IV2L4B4cjs.Tooltip_default; exports.Typography = _XCGRNBQHcjs.Typography_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.css

@@ -1,34 +1,30 @@
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data */
-._avatar_uoljx_1 {
+._avatar_19vv1_1 {
   box-sizing: border-box;
 }
-._avatarImage_uoljx_5 {
+._avatarImage_19vv1_5 {
   box-sizing: border-box;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;
 }
-._avatarImageOutline_uoljx_13 {
+._avatarImageOutline_19vv1_13 {
   border: 1px solid var(--color-cambio-gray-100);
 }
-._xs_uoljx_17 {
+._xs_19vv1_17 {
   width: 24px;
   height: 24px;
 }
-._sm_uoljx_22 {
+._sm_19vv1_22 {
   width: 32px;
   height: 32px;
 }
-._md_uoljx_27 {
+._md_19vv1_27 {
   width: 48px;
   height: 48px;
 }
-._lg_uoljx_32 {
-  width: 64px;
-  height: 64px;
-}
-._xl_uoljx_37 {
+._lg_19vv1_32 {
   width: 64px;
   height: 64px;
 }