@cambly/syntax-core 10.12.0 → 10.14.0

package/dist/__chunks/{SFJT2TM2.cjs → OXXXLEUD.cjs}

@@ -15,11 +15,11 @@ var _HWQUS53Mcjs = require('./HWQUS53M.cjs');
 
 
 
-var _RKEF7WKZcjs = require('./RKEF7WKZ.cjs');
+var _HCM63U3Jcjs = require('./HCM63U3J.cjs');
 
 
 
-var _A4O4F3KKcjs = require('./A4O4F3KK.cjs');
+var _QWMAWIWIcjs = require('./QWMAWIWI.cjs');
 
 
 var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
@@ -48,11 +48,12 @@ var LinkButton = _react.forwardRef.call(void 0,
     fullWidth = false,
     startIcon: StartIcon,
     endIcon: EndIcon,
+    on = "lightBackground",
     onClick
   }, ref) => {
     const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
-    const foregroundColorClass = themeName === "classic" ? _RKEF7WKZcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _RKEF7WKZcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color));
-    const backgroundColorClass = themeName === "classic" ? _A4O4F3KKcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _A4O4F3KKcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color));
+    const foregroundColorClass = themeName === "classic" ? _HCM63U3Jcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _HCM63U3Jcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const backgroundColorClass = themeName === "classic" ? _QWMAWIWIcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _QWMAWIWIcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "a",
       {
@@ -122,4 +123,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=SFJT2TM2.cjs.map
+//# sourceMappingURL=OXXXLEUD.cjs.map

package/dist/__chunks/OXXXLEUD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADsJpL,SA4BI,KA5BJ;AA/BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,GAAG,EAAE;AAElD,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,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GACrB,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,cAAc,aAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WAAW,cAAc,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\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   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\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      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(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          themeName === \"classic\"\n            ? buttonStyles[size]\n            : buttonStyles[`${size}Cambio`],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && themeName === \"classic\" && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\n        )}\n        <Typography\n          size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n        >\n          <span\n            // Temporary - until we have cambio colors on Typogrphay\n            className={foregroundColorClass}\n            style={{ fontWeight: 500 }}\n          >\n            {text}\n          </span>\n        </Typography>\n        {EndIcon && themeName === \"classic\" && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              iconSize[size],\n              foregroundColorClass,\n            )}\n          />\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/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}

package/dist/__chunks/{XF2RTSNO.js → PX3OQSL4.js}

@@ -4,23 +4,23 @@ import {
 } from "./JZ2Q7R2R.js";
 import {
   Button_default
-} from "./YGM4Z46I.js";
+} from "./NKWR4CYF.js";
 import {
   Divider
 } from "./FWQWL53Q.js";
 import {
   RichSelectChip_default
-} from "./QQSNF45I.js";
+} from "./4FB7KTL3.js";
 import {
   RichSelectSection_default
 } from "./53I23AHM.js";
 import {
   RichSelectRadioButton_default
-} from "./CTBXXNZP.js";
+} from "./T5U2CKTE.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
-} from "./3AAZZWKY.js";
+} from "./ODMJANSX.js";
 import {
   Box_default
 } from "./YGKZCJF5.js";
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=XF2RTSNO.js.map
+//# sourceMappingURL=PX3OQSL4.js.map

package/dist/__chunks/QWMAWIWI.cjs

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+
+var _VKB7KOAHcjs = require('./VKB7KOAH.cjs');
+
+// src/colors/backgroundColor.ts
+function classicBackgroundColor(color) {
+  switch (color) {
+    case "secondary":
+      return _VKB7KOAHcjs.colors_module_default.primary100BackgroundColor;
+    case "destructive-primary":
+      return _VKB7KOAHcjs.colors_module_default.destructive700BackgroundColor;
+    case "destructive-secondary":
+      return _VKB7KOAHcjs.colors_module_default.destructive100BackgroundColor;
+    case "success":
+      return _VKB7KOAHcjs.colors_module_default.success700BackgroundColor;
+    case "tertiary":
+    case "destructive-tertiary":
+      return _VKB7KOAHcjs.colors_module_default.whiteBackgroundColor;
+    case "branded":
+      return _VKB7KOAHcjs.colors_module_default.yellow700BackgroundColor;
+    case "inverse":
+      return _VKB7KOAHcjs.colors_module_default.gray60BackgroundColor;
+    default:
+      return _VKB7KOAHcjs.colors_module_default.primary700BackgroundColor;
+  }
+}
+function cambioBackgroundColor(color, on) {
+  if (on === "lightBackground") {
+    switch (color) {
+      case "primary":
+        return _VKB7KOAHcjs.colors_module_default.cambioBlackBackgroundColor;
+      case "secondary":
+        return _VKB7KOAHcjs.colors_module_default.cambioGray370BackgroundColor;
+      case "tertiary":
+      case "success-tertiary":
+      case "destructive-tertiary":
+        return _VKB7KOAHcjs.colors_module_default.cambioTransparentFullBackgroundColor;
+      case "success-primary":
+        return _VKB7KOAHcjs.colors_module_default.cambioSuccess700BackgroundColor;
+      case "success-secondary":
+        return _VKB7KOAHcjs.colors_module_default.cambioSuccess370BackgroundColor;
+      case "destructive-primary":
+        return _VKB7KOAHcjs.colors_module_default.cambioDestructive700BackgroundColor;
+      case "destructive-secondary":
+        return _VKB7KOAHcjs.colors_module_default.cambioDestructive370BackgroundColor;
+      case "branded":
+        return _VKB7KOAHcjs.colors_module_default.cambioYellow700BackgroundColor;
+      default:
+        return _VKB7KOAHcjs.colors_module_default.cambioBlackBackgroundColor;
+    }
+  } else {
+    switch (color) {
+      case "primary":
+        return _VKB7KOAHcjs.colors_module_default.cambioGray200BackgroundColor;
+      case "secondary":
+        return _VKB7KOAHcjs.colors_module_default.cambioGray870BackgroundColor;
+      case "tertiary":
+      case "success-tertiary":
+      case "destructive-tertiary":
+        return _VKB7KOAHcjs.colors_module_default.cambioTransparentFullBackgroundColor;
+      case "success-primary":
+        return _VKB7KOAHcjs.colors_module_default.cambioSuccess300BackgroundColor;
+      case "success-secondary":
+        return _VKB7KOAHcjs.colors_module_default.cambioSuccess770BackgroundColor;
+      case "destructive-primary":
+        return _VKB7KOAHcjs.colors_module_default.cambioDestructive300BackgroundColor;
+      case "destructive-secondary":
+        return _VKB7KOAHcjs.colors_module_default.cambioDestructive770BackgroundColor;
+      case "branded":
+        return _VKB7KOAHcjs.colors_module_default.cambioYellow700BackgroundColor;
+      default:
+        return _VKB7KOAHcjs.colors_module_default.cambioWhiteBackgroundColor;
+    }
+  }
+}
+
+
+
+
+exports.classicBackgroundColor = classicBackgroundColor; exports.cambioBackgroundColor = cambioBackgroundColor;
+//# sourceMappingURL=QWMAWIWI.cjs.map

package/dist/__chunks/QWMAWIWI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/backgroundColor.ts"],"names":[],"mappings":";;;;;;AAGO,SAAS,uBAAuB,OAAuC;AAC5E,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF;AAEO,SAAS,sBACd,OACA,IACQ;AACR,MAAI,OAAO,mBAAmB;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF,OAAO;AACL,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF;AACF","sourcesContent":["import { type CambioColor, type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function classicBackgroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n      return styles.primary100BackgroundColor;\n    case \"destructive-primary\":\n      return styles.destructive700BackgroundColor;\n    case \"destructive-secondary\":\n      return styles.destructive100BackgroundColor;\n    case \"success\":\n      return styles.success700BackgroundColor;\n    case \"tertiary\":\n    case \"destructive-tertiary\":\n      return styles.whiteBackgroundColor;\n    case \"branded\":\n      return styles.yellow700BackgroundColor;\n    case \"inverse\":\n      return styles.gray60BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n\nexport function cambioBackgroundColor(\n  color: (typeof CambioColor)[number],\n  on: \"lightBackground\" | \"darkBackground\",\n): string {\n  if (on === \"lightBackground\") {\n    switch (color) {\n      case \"primary\":\n        return styles.cambioBlackBackgroundColor;\n      case \"secondary\":\n        return styles.cambioGray370BackgroundColor;\n      case \"tertiary\":\n      case \"success-tertiary\":\n      case \"destructive-tertiary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"success-primary\":\n        return styles.cambioSuccess700BackgroundColor;\n      case \"success-secondary\":\n        return styles.cambioSuccess370BackgroundColor;\n      case \"destructive-primary\":\n        return styles.cambioDestructive700BackgroundColor;\n      case \"destructive-secondary\":\n        return styles.cambioDestructive370BackgroundColor;\n      case \"branded\":\n        return styles.cambioYellow700BackgroundColor;\n      default:\n        return styles.cambioBlackBackgroundColor;\n    }\n  } else {\n    switch (color) {\n      case \"primary\":\n        return styles.cambioGray200BackgroundColor;\n      case \"secondary\":\n        return styles.cambioGray870BackgroundColor;\n      case \"tertiary\":\n      case \"success-tertiary\":\n      case \"destructive-tertiary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"success-primary\":\n        return styles.cambioSuccess300BackgroundColor;\n      case \"success-secondary\":\n        return styles.cambioSuccess770BackgroundColor;\n      case \"destructive-primary\":\n        return styles.cambioDestructive300BackgroundColor;\n      case \"destructive-secondary\":\n        return styles.cambioDestructive770BackgroundColor;\n      case \"branded\":\n        return styles.cambioYellow700BackgroundColor;\n      default:\n        return styles.cambioWhiteBackgroundColor;\n    }\n  }\n}\n"]}

package/dist/__chunks/{3K37FYOT.cjs → RYUXG4AS.cjs}

@@ -15,7 +15,7 @@ var _react = require('react');
 var _reactariacomponents = require('react-aria-components');
 
 // css-module:./RichSelect.module.css#css-module
-var RichSelect_module_default = { "richSelectItem": "_richSelectItem_8ycz0_1", "richSelectBox": "_richSelectBox_8ycz0_2" };
+var RichSelect_module_default = { "richSelectItem": "_richSelectItem_dvxf4_1", "richSelectBox": "_richSelectBox_dvxf4_2", "label": "_label_dvxf4_6" };
 
 // src/RichSelect/RichSelectItem.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -50,4 +50,4 @@ var RichSelectItem_default = _react.forwardRef.call(void 0, function RichSelectI
 
 
 exports.RichSelect_module_default = RichSelect_module_default; exports.RichSelectItemContext = RichSelectItemContext; exports.RichSelectItem_default = RichSelectItem_default;
-//# sourceMappingURL=3K37FYOT.cjs.map
+//# sourceMappingURL=RYUXG4AS.cjs.map

package/dist/__chunks/RYUXG4AS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectItem.tsx","css-module:./RichSelect.module.css#css-module"],"names":[],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE,eAAe;AAAA,OAEV;;;ACV6F,IAAO,4BAAQ,EAAC,kBAAiB,2BAA0B,iBAAgB,0BAAyB,SAAQ,iBAAgB;;;ADkD5N;AA3BG,IAAM,wBAAwB,cAElC,CAAC,CAAC;AAEL,IAAO,yBAAQ,WASb,SAAS,eAAe,OAAO,KAAmB;AAClD,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,UAAU,eAAe;AAAA,IACzB;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAEhC,QAAM,EAAE,WAAW,IAAI,WAAW,qBAAqB;AACvD,YAAU,MAAM,yCAAa,OAAO,WAAW,CAAC,YAAY,UAAU,KAAK,CAAC;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW,0BAAO;AAAA,MAClB,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC","sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  createContext,\n  useEffect,\n  useContext,\n} from \"react\";\nimport {\n  ListBoxItem as ReactAriaListBoxItem,\n  type ListBoxItemRenderProps,\n} from \"react-aria-components\";\nimport styles from \"./RichSelect.module.css\";\nimport { type Key } from \"react-aria\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nexport type RichSelectItemProps = {\n  \"data-testid\"?: string;\n  value: string;\n  label: string;\n  name?: string;\n  disabled?: boolean;\n};\n\nexport const RichSelectItemContext = createContext<{\n  disableKey?: (key: Key, value: boolean) => void;\n}>({});\n\nexport default forwardRef<\n  HTMLDivElement,\n  RichSelectItemProps & {\n    /** The children of the component. A function may be provided to alter the children based on component state. */\n    children?:\n      | string\n      | ReactElement\n      | ((values: ListBoxItemRenderProps) => ReactElement);\n  }\n>(function RichSelectItem(props, ref): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    value,\n    label,\n    disabled: disabledProp = false,\n    children,\n  } = props;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  const { disableKey } = useContext(RichSelectItemContext);\n  useEffect(() => disableKey?.(value, disabled), [disableKey, disabled, value]);\n  return (\n    <ReactAriaListBoxItem\n      id={value}\n      textValue={label}\n      className={styles.richSelectItem}\n      data-testid={dataTestId}\n      ref={ref}\n    >\n      {children}\n    </ReactAriaListBoxItem>\n  );\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RichSelect/RichSelect.module.css\"; export default {\"richSelectItem\":\"_richSelectItem_dvxf4_1\",\"richSelectBox\":\"_richSelectBox_dvxf4_2\",\"label\":\"_label_dvxf4_6\"}"]}

package/dist/__chunks/{CTBXXNZP.js → T5U2CKTE.js}

@@ -4,7 +4,7 @@ import {
 } from "./3Y55NZKO.js";
 import {
   RichSelectItem_default
-} from "./3AAZZWKY.js";
+} from "./ODMJANSX.js";
 import {
   __objRest,
   __spreadProps,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
 export {
   RichSelectRadioButton_default
 };
-//# sourceMappingURL=CTBXXNZP.js.map
+//# sourceMappingURL=T5U2CKTE.js.map

package/dist/__chunks/{2ZUWZKPV.js → YKGFFSWB.js}

@@ -13,14 +13,33 @@ import {
 } from "./JB65NEXK.js";
 
 // src/Chip/Chip.tsx
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import classnames from "classnames";
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "chip": "_chip_1jp9s_1", "chipClassic": "_chipClassic_1jp9s_10", "chipCambio": "_chipCambio_1jp9s_15", "disabled": "_disabled_1jp9s_20", "deselectedChip": "_deselectedChip_1jp9s_25", "selectedChip": "_selectedChip_1jp9s_29", "deselectedChipCambio": "_deselectedChipCambio_1jp9s_34", "selectedChipCambio": "_selectedChipCambio_1jp9s_38", "icon": "_icon_1jp9s_42", "selectedIcon": "_selectedIcon_1jp9s_50", "sm": "_sm_1jp9s_54", "lg": "_lg_1jp9s_60", "forceFocus": "_forceFocus_1jp9s_67" };
+var Chip_module_default = { "chip": "_chip_1ndh3_1", "chipClassic": "_chipClassic_1ndh3_10", "chipCambio": "_chipCambio_1ndh3_15", "disabled": "_disabled_1ndh3_20", "deselectedChip": "_deselectedChip_1ndh3_25", "selectedChip": "_selectedChip_1ndh3_29", "deselectedChipCambio": "_deselectedChipCambio_1ndh3_34", "deselectedChipCambioOnDarkBackground": "_deselectedChipCambioOnDarkBackground_1ndh3_38", "selectedChipCambio": "_selectedChipCambio_1ndh3_42", "selectedChipCambioOnDarkBackground": "_selectedChipCambioOnDarkBackground_1ndh3_46", "icon": "_icon_1ndh3_50", "selectedIcon": "_selectedIcon_1ndh3_58", "sm": "_sm_1ndh3_62", "lg": "_lg_1ndh3_68", "forceFocus": "_forceFocus_1ndh3_75" };
 
 // src/Chip/Chip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+function typographyColor({
+  themeName,
+  selected,
+  on
+}) {
+  if (themeName === "cambio" && on === "darkBackground") {
+    if (selected) {
+      return "gray900";
+    } else {
+      return "white";
+    }
+  } else {
+    if (selected) {
+      return "white";
+    } else {
+      return "gray900";
+    }
+  }
+}
 var Chip = forwardRef(
   ({
     disabled: disabledProp = false,
@@ -28,6 +47,7 @@ var Chip = forwardRef(
     "data-testid": dataTestId,
     size = "sm",
     text,
+    on = "lightBackground",
     onChange,
     icon: Icon,
     dangerouslyForceFocusStyles
@@ -36,13 +56,15 @@ var Chip = forwardRef(
     const transformedSize = themeName === "cambio" ? "sm" : size;
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
+    const selectedChipCambioStyle = on === "lightBackground" ? Chip_module_default.selectedChipCambio : Chip_module_default.selectedChipCambioOnDarkBackground;
+    const deselectedChipCambioStyle = on === "lightBackground" ? Chip_module_default.deselectedChipCambio : Chip_module_default.deselectedChipCambioOnDarkBackground;
     const chipStyles = classnames(
       Chip_module_default.chip,
       themeName === "classic" ? Chip_module_default.chipClassic : Chip_module_default.chipCambio,
       Chip_module_default[transformedSize],
       {
-        [themeName === "classic" ? Chip_module_default.selectedChip : Chip_module_default.selectedChipCambio]: selected,
-        [themeName === "classic" ? Chip_module_default.deselectedChip : Chip_module_default.deselectedChipCambio]: !selected,
+        [themeName === "classic" ? Chip_module_default.selectedChip : selectedChipCambioStyle]: selected,
+        [themeName === "classic" ? Chip_module_default.deselectedChip : deselectedChipCambioStyle]: !selected,
         [Chip_module_default.disabled]: disabled,
         [Chip_module_default.forceFocus]: dangerouslyForceFocusStyles
       }
@@ -54,6 +76,10 @@ var Chip = forwardRef(
       ["sm"]: 200,
       ["lg"]: 300
     };
+    const color = useMemo(
+      () => typographyColor({ themeName, selected, on }),
+      [themeName, selected, on]
+    );
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -70,7 +96,7 @@ var Chip = forwardRef(
             Typography_default,
             {
               size: themeName === "classic" ? typographySize[transformedSize] : 100,
-              color: selected ? "white" : "gray900",
+              color,
               children: text
             }
           ) })
@@ -85,4 +111,4 @@ var Chip_default = Chip;
 export {
   Chip_default
 };
-//# sourceMappingURL=2ZUWZKPV.js.map
+//# sourceMappingURL=YKGFFSWB.js.map

package/dist/__chunks/YKGFFSWB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction typographyColor({\n  themeName,\n  selected,\n  on,\n}: {\n  themeName: \"cambio\" | \"classic\";\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  if (themeName === \"cambio\" && on === \"darkBackground\") {\n    if (selected) {\n      return \"gray900\";\n    } else {\n      return \"white\";\n    }\n  } else {\n    if (selected) {\n      return \"white\";\n    } else {\n      return \"gray900\";\n    }\n  }\n}\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      on = \"lightBackground\",\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const { themeName } = useTheme();\n    const transformedSize = themeName === \"cambio\" ? \"sm\" : size;\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const selectedChipCambioStyle =\n      on === \"lightBackground\"\n        ? styles.selectedChipCambio\n        : styles.selectedChipCambioOnDarkBackground;\n\n    const deselectedChipCambioStyle =\n      on === \"lightBackground\"\n        ? styles.deselectedChipCambio\n        : styles.deselectedChipCambioOnDarkBackground;\n\n    const chipStyles = classnames(\n      styles.chip,\n      themeName === \"classic\" ? styles.chipClassic : styles.chipCambio,\n      styles[transformedSize],\n      {\n        [themeName === \"classic\"\n          ? styles.selectedChip\n          : selectedChipCambioStyle]: selected,\n        [themeName === \"classic\"\n          ? styles.deselectedChip\n          : deselectedChipCambioStyle]: !selected,\n        [styles.disabled]: disabled,\n        [styles.forceFocus]: dangerouslyForceFocusStyles,\n      },\n    );\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n    const typographySize = {\n      [\"sm\"]: 200,\n      [\"lg\"]: 300,\n    } as const;\n\n    const color = useMemo(\n      () => typographyColor({ themeName, selected, on }),\n      [themeName, selected, on],\n    );\n\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography\n            size={\n              themeName === \"classic\" ? typographySize[transformedSize] : 100\n            }\n            color={color}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_1ndh3_1\",\"chipClassic\":\"_chipClassic_1ndh3_10\",\"chipCambio\":\"_chipCambio_1ndh3_15\",\"disabled\":\"_disabled_1ndh3_20\",\"deselectedChip\":\"_deselectedChip_1ndh3_25\",\"selectedChip\":\"_selectedChip_1ndh3_29\",\"deselectedChipCambio\":\"_deselectedChipCambio_1ndh3_34\",\"deselectedChipCambioOnDarkBackground\":\"_deselectedChipCambioOnDarkBackground_1ndh3_38\",\"selectedChipCambio\":\"_selectedChipCambio_1ndh3_42\",\"selectedChipCambioOnDarkBackground\":\"_selectedChipCambioOnDarkBackground_1ndh3_46\",\"icon\":\"_icon_1ndh3_50\",\"selectedIcon\":\"_selectedIcon_1ndh3_58\",\"sm\":\"_sm_1ndh3_62\",\"lg\":\"_lg_1ndh3_68\",\"forceFocus\":\"_forceFocus_1ndh3_75\"}"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,eAAc,yBAAwB,cAAa,wBAAuB,YAAW,sBAAqB,kBAAiB,4BAA2B,gBAAe,0BAAyB,wBAAuB,kCAAiC,wCAAuC,kDAAiD,sBAAqB,gCAA+B,sCAAqC,gDAA+C,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADiJ1tB,SASW,KATX;AAzIN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIwB;AACtB,MAAI,cAAc,YAAY,OAAO,kBAAkB;AACrD,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAwDA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,UAAM,kBAAkB,cAAc,WAAW,OAAO;AACxD,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,0BACJ,OAAO,oBACH,oBAAO,qBACP,oBAAO;AAEb,UAAM,4BACJ,OAAO,oBACH,oBAAO,uBACP,oBAAO;AAEb,UAAM,aAAa;AAAA,MACjB,oBAAO;AAAA,MACP,cAAc,YAAY,oBAAO,cAAc,oBAAO;AAAA,MACtD,oBAAO,eAAe;AAAA,MACtB;AAAA,QACE,CAAC,cAAc,YACX,oBAAO,eACP,uBAAuB,GAAG;AAAA,QAC9B,CAAC,cAAc,YACX,oBAAO,iBACP,yBAAyB,GAAG,CAAC;AAAA,QACjC,CAAC,oBAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,MACvB;AAAA,IACF;AACA,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AAEA,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,WAAW,UAAU,GAAG,CAAC;AAAA,MACjD,CAAC,WAAW,UAAU,EAAE;AAAA,IAC1B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MACE,cAAc,YAAY,eAAe,eAAe,IAAI;AAAA,cAE9D;AAAA,cAEC;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}

package/dist/__chunks/{VJKUE3B4.cjs → ZDDA4AKB.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _GRYQKIWRcjs = require('./GRYQKIWR.cjs');
+var _MUNI4VXLcjs = require('./MUNI4VXL.cjs');
 
 
-var _3K37FYOTcjs = require('./3K37FYOT.cjs');
+var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
 
@@ -15,8 +15,8 @@ var _react = require('react');
 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, _3K37FYOTcjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _GRYQKIWRcjs.Chip_default,
+    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, 
+      _MUNI4VXLcjs.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=VJKUE3B4.cjs.map
+//# sourceMappingURL=ZDDA4AKB.cjs.map

package/dist/__chunks/{EMWRSUWK.cjs → ZDSY6FEO.cjs}

@@ -5,7 +5,7 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _LISQ2P5Fcjs = require('./LISQ2P5F.cjs');
+var _DA3CET5Gcjs = require('./DA3CET5G.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -33,7 +33,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_plzrz_1", "selectContainerCambio": "_selectContainerCambio_plzrz_7", "opacityOverlay": "_opacityOverlay_plzrz_11", "labelCambio": "_labelCambio_plzrz_15", "selectWrapper": "_selectWrapper_plzrz_26", "selectBox": "_selectBox_plzrz_31", "selectBoxClassic": "_selectBoxClassic_plzrz_45", "selectBoxCambio": "_selectBoxCambio_plzrz_50", "selectMouseFocusStyling": "_selectMouseFocusStyling_plzrz_58", "unselected": "_unselected_plzrz_63", "selected": "_selected_plzrz_67", "arrowIcon": "_arrowIcon_plzrz_71", "sm": "_sm_plzrz_85", "md": "_md_plzrz_91", "lg": "_lg_plzrz_97", "selectError": "_selectError_plzrz_103", "selectErrorCambio": "_selectErrorCambio_plzrz_109" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1o5o7_1", "selectContainerCambio": "_selectContainerCambio_1o5o7_7", "opacityOverlay": "_opacityOverlay_1o5o7_11", "labelCambio": "_labelCambio_1o5o7_15", "selectWrapper": "_selectWrapper_1o5o7_26", "selectBox": "_selectBox_1o5o7_31", "selectBoxClassic": "_selectBoxClassic_1o5o7_47", "selectBoxCambio": "_selectBoxCambio_1o5o7_52", "selectMouseFocusStyling": "_selectMouseFocusStyling_1o5o7_60", "unselected": "_unselected_1o5o7_65", "selected": "_selected_1o5o7_69", "arrowIcon": "_arrowIcon_1o5o7_73", "sm": "_sm_1o5o7_87", "md": "_md_1o5o7_93", "lg": "_lg_1o5o7_99", "selectError": "_selectError_1o5o7_105", "selectErrorCambio": "_selectErrorCambio_1o5o7_111" };
 
 // src/SelectList/SelectList.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -121,7 +121,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _LISQ2P5Fcjs.ColorBaseDestructive700 : _LISQ2P5Fcjs.ColorBaseGray800,
+                  fill: errorText ? _DA3CET5Gcjs.ColorBaseDestructive700 : _DA3CET5Gcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
@@ -145,4 +145,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=EMWRSUWK.cjs.map
+//# sourceMappingURL=ZDSY6FEO.cjs.map

package/dist/__chunks/{EMWRSUWK.cjs.map → ZDSY6FEO.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n        [styles.selectContainerCambio]: themeName === \"cambio\",\n      })}\n    >\n      {label && (\n        <label\n          htmlFor={selectId}\n          className={classNames(themeName === \"cambio\" && styles.labelCambio)}\n        >\n          <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_plzrz_1\",\"selectContainerCambio\":\"_selectContainerCambio_plzrz_7\",\"opacityOverlay\":\"_opacityOverlay_plzrz_11\",\"labelCambio\":\"_labelCambio_plzrz_15\",\"selectWrapper\":\"_selectWrapper_plzrz_26\",\"selectBox\":\"_selectBox_plzrz_31\",\"selectBoxClassic\":\"_selectBoxClassic_plzrz_45\",\"selectBoxCambio\":\"_selectBoxCambio_plzrz_50\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_plzrz_58\",\"unselected\":\"_unselected_plzrz_63\",\"selected\":\"_selected_plzrz_67\",\"arrowIcon\":\"_arrowIcon_plzrz_71\",\"sm\":\"_sm_plzrz_85\",\"md\":\"_md_plzrz_91\",\"lg\":\"_lg_plzrz_97\",\"selectError\":\"_selectError_plzrz_103\",\"selectErrorCambio\":\"_selectErrorCambio_plzrz_109\"}"]}
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n        [styles.selectContainerCambio]: themeName === \"cambio\",\n      })}\n    >\n      {label && (\n        <label\n          htmlFor={selectId}\n          className={classNames(themeName === \"cambio\" && styles.labelCambio)}\n        >\n          <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1o5o7_1\",\"selectContainerCambio\":\"_selectContainerCambio_1o5o7_7\",\"opacityOverlay\":\"_opacityOverlay_1o5o7_11\",\"labelCambio\":\"_labelCambio_1o5o7_15\",\"selectWrapper\":\"_selectWrapper_1o5o7_26\",\"selectBox\":\"_selectBox_1o5o7_31\",\"selectBoxClassic\":\"_selectBoxClassic_1o5o7_47\",\"selectBoxCambio\":\"_selectBoxCambio_1o5o7_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1o5o7_60\",\"unselected\":\"_unselected_1o5o7_65\",\"selected\":\"_selected_1o5o7_69\",\"arrowIcon\":\"_arrowIcon_1o5o7_73\",\"sm\":\"_sm_1o5o7_87\",\"md\":\"_md_1o5o7_93\",\"lg\":\"_lg_1o5o7_99\",\"selectError\":\"_selectError_1o5o7_105\",\"selectErrorCambio\":\"_selectErrorCambio_1o5o7_111\"}"]}

package/dist/colors/backgroundColor.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _A4O4F3KKcjs = require('../__chunks/A4O4F3KK.cjs');
+var _QWMAWIWIcjs = require('../__chunks/QWMAWIWI.cjs');
 require('../__chunks/VKB7KOAH.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
 
-exports.cambioBackgroundColor = _A4O4F3KKcjs.cambioBackgroundColor; exports.classicBackgroundColor = _A4O4F3KKcjs.classicBackgroundColor;
+exports.cambioBackgroundColor = _QWMAWIWIcjs.cambioBackgroundColor; exports.classicBackgroundColor = _QWMAWIWIcjs.classicBackgroundColor;
 //# sourceMappingURL=backgroundColor.cjs.map

package/dist/colors/backgroundColor.d.ts

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

package/dist/colors/backgroundColor.js

@@ -2,7 +2,7 @@
 import {
   cambioBackgroundColor,
   classicBackgroundColor
-} from "../__chunks/Y2OAIOQE.js";
+} from "../__chunks/OFW6A65B.js";
 import "../__chunks/FMQVMNVR.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/colors/foregroundColor.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _RKEF7WKZcjs = require('../__chunks/RKEF7WKZ.cjs');
+var _HCM63U3Jcjs = require('../__chunks/HCM63U3J.cjs');
 require('../__chunks/VKB7KOAH.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
 
-exports.cambioForegroundColor = _RKEF7WKZcjs.cambioForegroundColor; exports.classicForegroundColor = _RKEF7WKZcjs.classicForegroundColor;
+exports.cambioForegroundColor = _HCM63U3Jcjs.cambioForegroundColor; exports.classicForegroundColor = _HCM63U3Jcjs.classicForegroundColor;
 //# sourceMappingURL=foregroundColor.cjs.map

package/dist/colors/foregroundColor.d.ts

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

package/dist/colors/foregroundColor.js

@@ -2,7 +2,7 @@
 import {
   cambioForegroundColor,
   classicForegroundColor
-} from "../__chunks/JVOQF4CG.js";
+} from "../__chunks/JGYZV3JA.js";
 import "../__chunks/FMQVMNVR.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/index.cjs

@@ -13,7 +13,7 @@ var _LLI3KZARcjs = require('./__chunks/LLI3KZAR.cjs');
 var _W7GPAEHPcjs = require('./__chunks/W7GPAEHP.cjs');
 
 
-var _SFJT2TM2cjs = require('./__chunks/SFJT2TM2.cjs');
+var _OXXXLEUDcjs = require('./__chunks/OXXXLEUD.cjs');
 
 
 var _GBZPZQPJcjs = require('./__chunks/GBZPZQPJ.cjs');
@@ -31,35 +31,35 @@ require('./__chunks/BA4JPX36.cjs');
 var _ZFX4HW2Pcjs = require('./__chunks/ZFX4HW2P.cjs');
 
 
-var _EMWRSUWKcjs = require('./__chunks/EMWRSUWK.cjs');
+var _ZDSY6FEOcjs = require('./__chunks/ZDSY6FEO.cjs');
 require('./__chunks/4UJE5GMH.cjs');
 
 
-var _FBF2R2FEcjs = require('./__chunks/FBF2R2FE.cjs');
-require('./__chunks/TYEKVH5D.cjs');
+var _5WZOSAYHcjs = require('./__chunks/5WZOSAYH.cjs');
+require('./__chunks/4TWU6PQA.cjs');
 
 
 var _P3JJQI6Ncjs = require('./__chunks/P3JJQI6N.cjs');
 
 
-var _4JXNDR7Bcjs = require('./__chunks/4JXNDR7B.cjs');
+var _5T5R6ZMDcjs = require('./__chunks/5T5R6ZMD.cjs');
 require('./__chunks/3P2PWHOU.cjs');
 require('./__chunks/5JUNB754.cjs');
 require('./__chunks/54PSDUCD.cjs');
 
 
 var _VDAYXRSAcjs = require('./__chunks/VDAYXRSA.cjs');
-require('./__chunks/VJKUE3B4.cjs');
+require('./__chunks/ZDDA4AKB.cjs');
 
 
-var _GRYQKIWRcjs = require('./__chunks/GRYQKIWR.cjs');
+var _MUNI4VXLcjs = require('./__chunks/MUNI4VXL.cjs');
 
 
-var _BXUTWPRUcjs = require('./__chunks/BXUTWPRU.cjs');
-require('./__chunks/DSMWIJEY.cjs');
+var _EVDDEHP3cjs = require('./__chunks/EVDDEHP3.cjs');
+require('./__chunks/3P4HISCU.cjs');
 
 
-var _7P7YX4X2cjs = require('./__chunks/7P7YX4X2.cjs');
+var _IMYS42TLcjs = require('./__chunks/IMYS42TL.cjs');
 require('./__chunks/WRTSVDQZ.cjs');
 require('./__chunks/VL5ONCQD.cjs');
 require('./__chunks/WFVGNGEP.cjs');
@@ -67,17 +67,17 @@ require('./__chunks/HWQUS53M.cjs');
 
 
 var _UKLQ64N7cjs = require('./__chunks/UKLQ64N7.cjs');
-require('./__chunks/LISQ2P5F.cjs');
+require('./__chunks/DA3CET5G.cjs');
 require('./__chunks/NFDOY7GE.cjs');
 require('./__chunks/MF7LLV7V.cjs');
-require('./__chunks/VJ2AFMKO.cjs');
+require('./__chunks/I5HC6BIK.cjs');
 
 
 var _GPW7ICYPcjs = require('./__chunks/GPW7ICYP.cjs');
 require('./__chunks/XLUVINJW.cjs');
-require('./__chunks/3K37FYOT.cjs');
-require('./__chunks/RKEF7WKZ.cjs');
-require('./__chunks/A4O4F3KK.cjs');
+require('./__chunks/RYUXG4AS.cjs');
+require('./__chunks/HCM63U3J.cjs');
+require('./__chunks/QWMAWIWI.cjs');
 require('./__chunks/VKB7KOAH.cjs');
 
 
@@ -134,5 +134,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _CXD34CNPcjs.Avatar_default; exports.AvatarGroup = _LLI3KZARcjs.AvatarGroup; exports.Badge = _POGPHQGUcjs.Badge_default; exports.Box = _27K33DEMcjs.Box_default; exports.Button = _4JXNDR7Bcjs.Button_default; exports.ButtonGroup = _P3JJQI6Ncjs.ButtonGroup_default; exports.Card = _W7GPAEHPcjs.Card; exports.Checkbox = _GBZPZQPJcjs.Checkbox_default; exports.Chip = _GRYQKIWRcjs.Chip_default; exports.Divider = _VDAYXRSAcjs.Divider; exports.Heading = _XYAY2TL4cjs.Heading_default; exports.IconButton = _7P7YX4X2cjs.IconButton_default; exports.LinkButton = _SFJT2TM2cjs.LinkButton_default; exports.Modal = _YLJDLIHHcjs.Modal; exports.Popover = _BXUTWPRUcjs.Popover_default; exports.RadioButton = _GPW7ICYPcjs.RadioButton_default; exports.RichSelectList = _FBF2R2FEcjs.RichSelectList_default; exports.SelectList = _EMWRSUWKcjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _ZFX4HW2Pcjs.TextArea_default; exports.TextField = _4SUKTRWGcjs.TextField; exports.ThemeProvider = _6W5WRS53cjs.ThemeProvider; exports.Tooltip = _7TGECM7Wcjs.Tooltip_default; exports.Typography = _WGRHH5TFcjs.Typography_default;
+exports.Avatar = _CXD34CNPcjs.Avatar_default; exports.AvatarGroup = _LLI3KZARcjs.AvatarGroup; exports.Badge = _POGPHQGUcjs.Badge_default; exports.Box = _27K33DEMcjs.Box_default; exports.Button = _5T5R6ZMDcjs.Button_default; exports.ButtonGroup = _P3JJQI6Ncjs.ButtonGroup_default; exports.Card = _W7GPAEHPcjs.Card; exports.Checkbox = _GBZPZQPJcjs.Checkbox_default; exports.Chip = _MUNI4VXLcjs.Chip_default; exports.Divider = _VDAYXRSAcjs.Divider; exports.Heading = _XYAY2TL4cjs.Heading_default; exports.IconButton = _IMYS42TLcjs.IconButton_default; exports.LinkButton = _OXXXLEUDcjs.LinkButton_default; exports.Modal = _YLJDLIHHcjs.Modal; exports.Popover = _EVDDEHP3cjs.Popover_default; exports.RadioButton = _GPW7ICYPcjs.RadioButton_default; exports.RichSelectList = _5WZOSAYHcjs.RichSelectList_default; exports.SelectList = _ZDSY6FEOcjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _ZFX4HW2Pcjs.TextArea_default; exports.TextField = _4SUKTRWGcjs.TextField; exports.ThemeProvider = _6W5WRS53cjs.ThemeProvider; exports.Tooltip = _7TGECM7Wcjs.Tooltip_default; exports.Typography = _WGRHH5TFcjs.Typography_default;
 //# sourceMappingURL=index.cjs.map