@cambly/syntax-core 10.35.0 → 10.36.0

package/dist/__chunks/{HHOEMHQE.cjs.map → VBSPIS4Y.cjs.map}

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

package/dist/__chunks/{GNJNJVEO.cjs → WBKZQ5CY.cjs}

@@ -5,7 +5,7 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _HHOEMHQEcjs = require('./HHOEMHQE.cjs');
+var _VBSPIS4Ycjs = require('./VBSPIS4Y.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -14,7 +14,7 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
 
 
-var _XCSW34UMcjs = require('./XCSW34UM.cjs');
+var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -45,8 +45,7 @@ function SelectList({
   onChange,
   onClick,
   placeholderText,
-  selectedValue = "",
-  size = "md"
+  selectedValue = ""
 }) {
   const reactId = _react.useId.call(void 0, );
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
@@ -61,13 +60,12 @@ function SelectList({
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCSW34UMcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCGRNBQHcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "select",
             {
               id: selectId,
-              "data-size": size,
               "data-testid": dataTestId,
               disabled,
               className: _classnames2.default.call(void 0, SelectList_module_default.selectBox, SelectList_module_default.selectBoxCambio, {
@@ -100,7 +98,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _HHOEMHQEcjs.ColorBaseDestructive700 : _HHOEMHQEcjs.ColorBaseGray800,
+                  fill: errorText ? _VBSPIS4Ycjs.ColorBaseDestructive700 : _VBSPIS4Ycjs.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"
                 }
               )
@@ -108,7 +106,7 @@ function SelectList({
           ) })
         ] }),
         (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XCSW34UMcjs.Typography_default,
+          _XCGRNBQHcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -124,4 +122,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=GNJNJVEO.cjs.map
+//# sourceMappingURL=WBKZQ5CY.cjs.map

package/dist/__chunks/WBKZQ5CY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAEP,OAAO,gBAAgB;;;ACP6E,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,iBAAgB,2BAA0B,aAAY,uBAAsB,mBAAkB,6BAA4B,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,qBAAoB,8BAA6B;;;ADkG/gB,cAOJ,YAPI;AA5EG,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GA+CiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UACd,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,iBAAiB;AAAA,gBAC9D,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,iBAAiB,GAAG;AAAA,gBAC5B,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,cAClD,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO;AAAA,cAEP;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,0BAA0B;AAAA,kBAC5C,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,sBAAY,YAAY;AAAA;AAAA,QAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS","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\";\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}: {\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}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\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      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\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(styles.selectBox, styles.selectBoxCambio, {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectErrorCambio]: errorText,\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\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={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={1}>\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_1f379_1\",\"opacityOverlay\":\"_opacityOverlay_1f379_7\",\"selectWrapper\":\"_selectWrapper_1f379_11\",\"selectBox\":\"_selectBox_1f379_16\",\"selectBoxCambio\":\"_selectBoxCambio_1f379_32\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1f379_41\",\"unselected\":\"_unselected_1f379_46\",\"selected\":\"_selected_1f379_50\",\"arrowIcon\":\"_arrowIcon_1f379_54\",\"selectErrorCambio\":\"_selectErrorCambio_1f379_68\"}"]}

package/dist/__chunks/{OWUHE3QB.js → WHQ73FAY.js}

@@ -4,7 +4,7 @@ import {
 } from "./J6DAGNNN.js";
 import {
   Typography_default
-} from "./YAM7DAOZ.js";
+} from "./2IXPTAJD.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -88,4 +88,4 @@ var Chip_default = Chip;
 export {
   Chip_default
 };
-//# sourceMappingURL=OWUHE3QB.js.map
+//# sourceMappingURL=WHQ73FAY.js.map

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

package/dist/__chunks/{XCSW34UM.cjs → XCGRNBQH.cjs}

@@ -32,16 +32,6 @@ function textColor(color) {
       return _QT6IRCGWcjs.colors_module_default.cambioBlackColor;
   }
 }
-function convertWeight(weight) {
-  switch (weight) {
-    case "interactive":
-      return "medium";
-    case "heavy":
-      return "regular";
-    default:
-      return weight;
-  }
-}
 var Typography = _react.forwardRef.call(void 0, function Typography2({
   align = "start",
   as = "div",
@@ -59,7 +49,6 @@ var Typography = _react.forwardRef.call(void 0, function Typography2({
   weight = "regular"
 }, ref) {
   const Tag = as;
-  const weightStyles = Typography_module_default[`${convertWeight(weight)}`];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     Tag,
     {
@@ -67,7 +56,7 @@ var Typography = _react.forwardRef.call(void 0, function Typography2({
       className: _classnames2.default.call(void 0, 
         Typography_module_default.typography,
         Typography_module_default[align],
-        weightStyles,
+        Typography_module_default[weight],
         fontStyle === "serif" ? Typography_module_default.serif : Typography_module_default.sansSerif,
         textColor(color),
         inline && Typography_module_default.inline,
@@ -91,4 +80,4 @@ var Typography_default = Typography;
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=XCSW34UM.cjs.map
+//# sourceMappingURL=XCGRNBQH.cjs.map

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/{XIKD47WC.js → Y3D5XFML.js}

@@ -4,38 +4,15 @@ import {
 } 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=XIKD47WC.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/{525TQTCQ.cjs → YICZLNHI.cjs}

@@ -4,38 +4,15 @@
 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, 
     _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),
+          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=525TQTCQ.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":[]}