@cambly/syntax-core 23.5.1 → 23.6.0

package/dist/__chunks/{372EY6DW.js → JWVVIP4Z.js}

@@ -20,16 +20,20 @@ function Toast({
   heading,
   icon: Icon,
   on = "lightBackground",
+  persistent = false,
   timeout = 5e3,
   zIndex = 0
 }) {
   const [displayToast, setDisplayToast] = useState(true);
   useEffect(() => {
+    if (persistent) {
+      return;
+    }
     const timeoutId = setTimeout(() => {
       setDisplayToast(false);
     }, timeout);
     return () => clearTimeout(timeoutId);
-  }, [timeout]);
+  }, [persistent, timeout]);
   return /* @__PURE__ */ jsxs(
     Box_default,
     {
@@ -75,4 +79,4 @@ function Toast({
 export {
   Toast
 };
-//# sourceMappingURL=372EY6DW.js.map
+//# sourceMappingURL=JWVVIP4Z.js.map

package/dist/__chunks/JWVVIP4Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import { type ComponentProps, useEffect, useState } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nfunction typographyColor({\n  on,\n}: {\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  return on === \"lightBackground\" ? \"white\" : \"gray900\";\n}\n\ntype ToastProps = {\n  /**\n   * The optional text of the toast under the heading\n   */\n  body?: string;\n  /**\n   * Test id for the toast\n   */\n  \"data-testid\"?: string;\n  heading: string;\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n  /**\n   * Indicate whether the toast renders on a light or dark background. Changes the color of the toast\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * If true, the toast will not automatically dismiss\n   *\n   * @defaultValue false\n   */\n  persistent?: boolean;\n  /**\n   * The number of milliseconds to wait before automatically dismissing the toast\n   * If persistent is true, this prop will be ignored and the toast will not automatically dismiss\n   *\n   * @defaultValue 5000\n   */\n  timeout?: number;\n  /**\n   * The z-index of the toast\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n};\n/**\n * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.\n */\n\nexport default function Toast({\n  body,\n  \"data-testid\": dataTestId,\n  heading,\n  icon: Icon,\n  on = \"lightBackground\",\n  persistent = false,\n  timeout = 5000,\n  zIndex = 0,\n}: ToastProps): JSX.Element {\n  const [displayToast, setDisplayToast] = useState<boolean>(true);\n\n  useEffect(() => {\n    if (persistent) {\n      return;\n    }\n    const timeoutId = setTimeout(() => {\n      setDisplayToast(false);\n    }, timeout);\n    return () => clearTimeout(timeoutId);\n  }, [persistent, timeout]);\n\n  return (\n    <Box\n      position=\"fixed\"\n      width=\"fit-content\"\n      marginStart=\"auto\"\n      marginEnd=\"auto\"\n      padding={4}\n      rounding=\"md\"\n      display={displayToast ? \"flex\" : \"none\"}\n      gap={5}\n      alignItems=\"center\"\n      backgroundColor={on === \"lightBackground\" ? \"gray900\" : \"white\"}\n      dangerouslySetInlineStyle={{\n        __style: {\n          left: 0,\n          right: 0,\n          bottom: 50,\n          boxShadow: \"0px 16px 32px 0px rgba(0, 0, 0, 0.25)\",\n          zIndex: zIndex,\n        },\n      }}\n      data-testid={dataTestId}\n    >\n      {Icon && <Icon color={typographyColor({ on })} size={400} />}\n      <Box display=\"flex\" direction=\"column\" gap={1}>\n        <Typography\n          size={300}\n          weight=\"semiBold\"\n          color={typographyColor({ on })}\n        >\n          {heading}\n        </Typography>\n        {body && (\n          <Typography lineClamp={2} color={typographyColor({ on })}>\n            {body}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAA8B,WAAW,gBAAgB;AAyG1C,cACT,YADS;AApGf,SAAS,gBAAgB;AAAA,EACvB;AACF,GAEwB;AACtB,SAAO,OAAO,oBAAoB,UAAU;AAC9C;AAiDe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,MAAM;AAAA,EACN,KAAK;AAAA,EACL,aAAa;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AACX,GAA4B;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,YAAU,MAAM;AACd,QAAI,YAAY;AACd;AAAA,IACF;AACA,UAAM,YAAY,WAAW,MAAM;AACjC,sBAAgB,KAAK;AAAA,IACvB,GAAG,OAAO;AACV,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAS,eAAe,SAAS;AAAA,MACjC,KAAK;AAAA,MACL,YAAW;AAAA,MACX,iBAAiB,OAAO,oBAAoB,YAAY;AAAA,MACxD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA,gBAAQ,oBAAC,QAAK,OAAO,gBAAgB,EAAE,GAAG,CAAC,GAAG,MAAM,KAAK;AAAA,QAC1D,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,KAAK,GAC1C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,OAAO,gBAAgB,EAAE,GAAG,CAAC;AAAA,cAE5B;AAAA;AAAA,UACH;AAAA,UACC,QACC,oBAAC,sBAAW,WAAW,GAAG,OAAO,gBAAgB,EAAE,GAAG,CAAC,GACpD,gBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/{G6U5FCLY.js → OK37RZ2J.js}

@@ -10,4 +10,4 @@ export {
   ColorBaseGray700,
   ColorCambioWhite100
 };
-//# sourceMappingURL=G6U5FCLY.js.map
+//# sourceMappingURL=OK37RZ2J.js.map

package/dist/__chunks/{G6U5FCLY.js.map → OK37RZ2J.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 12 Mar 2026 23:21:27 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\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\";\nexport const SyntaxFontSansSerifBrand = \"'Garnett', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 27 Mar 2026 23:49:45 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\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\";\nexport const SyntaxFontSansSerifBrand = \"'Garnett', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}

package/dist/__chunks/{FHSXAUGX.js → XRGLVHKA.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./G6U5FCLY.js";
+} from "./OK37RZ2J.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -31,7 +31,7 @@ import {
 import classNames from "classnames";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_rxo2v_1", "opacityOverlay": "_opacityOverlay_rxo2v_7", "selectWrapper": "_selectWrapper_rxo2v_11", "selectBox": "_selectBox_rxo2v_16", "selectBoxCambio": "_selectBoxCambio_rxo2v_30", "selectMouseFocusStyling": "_selectMouseFocusStyling_rxo2v_41", "unselected": "_unselected_rxo2v_46", "selected": "_selected_rxo2v_50", "darkBackground": "_darkBackground_rxo2v_54", "arrowIcon": "_arrowIcon_rxo2v_66", "selectErrorCambio": "_selectErrorCambio_rxo2v_80", "selectColorwhite": "_selectColorwhite_rxo2v_86", "transparentInputError": "_transparentInputError_rxo2v_92", "transparenInputError": "_transparenInputError_rxo2v_97" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_tawcj_1", "opacityOverlay": "_opacityOverlay_tawcj_7", "selectWrapper": "_selectWrapper_tawcj_11", "selectBox": "_selectBox_tawcj_16", "selectBoxCambio": "_selectBoxCambio_tawcj_30", "selectColorwhite": "_selectColorwhite_tawcj_42", "selectMouseFocusStyling": "_selectMouseFocusStyling_tawcj_48", "unselected": "_unselected_tawcj_53", "selected": "_selected_tawcj_57", "darkBackground": "_darkBackground_tawcj_61", "arrowIcon": "_arrowIcon_tawcj_73", "selectErrorCambio": "_selectErrorCambio_tawcj_87", "transparentInputError": "_transparentInputError_tawcj_92", "transparenInputError": "_transparenInputError_tawcj_97" };
 
 // src/SelectList/SelectList.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -92,6 +92,7 @@ function SelectList({
               "data-testid": dataTestId,
               disabled,
               className: classNames(SelectList_module_default.selectBox, SelectList_module_default.selectBoxCambio, {
+                [SelectList_module_default.selectColorwhite]: on !== "darkBackground",
                 [SelectList_module_default.unselected]: !selectedValue && !errorText,
                 [SelectList_module_default.selected]: selectedValue && !errorText,
                 [SelectList_module_default.selectErrorCambio]: errorText && on === "lightBackground",
@@ -141,4 +142,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=FHSXAUGX.js.map
+//# sourceMappingURL=XRGLVHKA.js.map

package/dist/__chunks/XRGLVHKA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"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  ColorBaseGray700,\n  ColorCambioWhite100,\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  on,\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   * Indicate whether the component renders on a light or dark background. Changes the color of the text\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLSelectElement>) => void;\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 | ReactElement;\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  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLSelectElement> = (\n    event,\n  ) => {\n    if (disabled || onClick == null) return;\n    if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n      onClick(event);\n    }\n  };\n\n  const getArrowIconColor = () => {\n    if (errorText) {\n      return ColorBaseDestructive700;\n    } else {\n      if (on === \"darkBackground\") {\n        return ColorCambioWhite100;\n      } else {\n        return ColorBaseGray700;\n      }\n    }\n  };\n\n  const labelElement =\n    typeof label === \"string\" ? (\n      <Typography size={100} color={textColor}>\n        {label}\n      </Typography>\n    ) : (\n      label\n    );\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}>{labelElement}</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.selectColorwhite]: on !== \"darkBackground\",\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectErrorCambio]: errorText && on === \"lightBackground\",\n            [styles.transparentInputError]:\n              errorText && on === \"darkBackground\",\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            [styles.darkBackground]: on === \"darkBackground\",\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\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={getArrowIconColor()}\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 size={100} color={errorText ? errorTextColor : textColor}>\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_tawcj_1\",\"opacityOverlay\":\"_opacityOverlay_tawcj_7\",\"selectWrapper\":\"_selectWrapper_tawcj_11\",\"selectBox\":\"_selectBox_tawcj_16\",\"selectBoxCambio\":\"_selectBoxCambio_tawcj_30\",\"selectColorwhite\":\"_selectColorwhite_tawcj_42\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_tawcj_48\",\"unselected\":\"_unselected_tawcj_53\",\"selected\":\"_selected_tawcj_57\",\"darkBackground\":\"_darkBackground_tawcj_61\",\"arrowIcon\":\"_arrowIcon_tawcj_73\",\"selectErrorCambio\":\"_selectErrorCambio_tawcj_87\",\"transparentInputError\":\"_transparentInputError_tawcj_92\",\"transparenInputError\":\"_transparenInputError_tawcj_97\"}"],"mappings":"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","names":[]}

package/dist/index.css

@@ -3071,19 +3071,19 @@
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css/#css-module-data */
-._selectContainer_rxo2v_1 {
+._selectContainer_tawcj_1 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._opacityOverlay_rxo2v_7 {
+._opacityOverlay_tawcj_7 {
   opacity: 0.5;
 }
-._selectWrapper_rxo2v_11 {
+._selectWrapper_tawcj_11 {
   display: flex;
   position: relative;
 }
-._selectBox_rxo2v_16 {
+._selectBox_tawcj_16 {
   align-items: center;
   appearance: none;
   cursor: pointer;
@@ -3103,7 +3103,7 @@
   outline: 0;
   width: 100%;
 }
-._selectBoxCambio_rxo2v_30 {
+._selectBoxCambio_tawcj_30 {
   border-radius: 8px;
   box-sizing: border-box;
   font-size: 16px;
@@ -3113,27 +3113,32 @@
   padding-inline-start: 12px;
   padding-inline-end: 36px;
 }
-._selectMouseFocusStyling_rxo2v_41 {
+._selectColorwhite_tawcj_42 {
+  background-color: var(--color-base-white);
+  border: 1px solid var(--color-cambio-gray-370);
+  color: var(--color-base-gray-700);
+}
+._selectMouseFocusStyling_tawcj_48 {
   border: 1px solid var(--color-base-primary-700);
   box-shadow: 0 0 0 1px var(--color-base-primary-700);
 }
-._unselected_rxo2v_46 {
+._unselected_tawcj_53 {
   color: var(--color-base-gray-700);
 }
-._selected_rxo2v_50 {
+._selected_tawcj_57 {
   color: var(--color-base-gray-800);
 }
-._darkBackground_rxo2v_54 {
+._darkBackground_tawcj_61 {
   background: var(--color-cambio-gray-900);
   border: 1px solid var(--color-cambio-white-40);
   color: var(--color-cambio-white-70);
 }
-._darkBackground_rxo2v_54:focus {
+._darkBackground_tawcj_61:focus {
   outline: none;
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
   color: var(--color-cambio-white-100);
 }
-._arrowIcon_rxo2v_66 {
+._arrowIcon_tawcj_73 {
   display: flex;
   position: absolute;
   inset-inline-end: 0;
@@ -3142,23 +3147,18 @@
   padding-inline-end: 8px;
   pointer-events: none;
 }
-._selectBox_rxo2v_16:disabled {
+._selectBox_tawcj_16:disabled {
   cursor: auto;
 }
-._selectErrorCambio_rxo2v_80 {
+._selectErrorCambio_tawcj_87 {
   color: var(--color-cambio-destructive-900);
   border-color: var(--color-cambio-destructive-700);
 }
-._selectColorwhite_rxo2v_86 {
-  background-color: var(--color-base-white);
-  border: 1px solid var(--color-cambio-gray-370);
-  color: var(--color-base-gray-700);
-}
-._transparentInputError_rxo2v_92 {
+._transparentInputError_tawcj_92 {
   color: var(--color-cambio-destructive-370);
   border: 1px solid var(--color-cambio-destructive-300);
 }
-._transparenInputError_rxo2v_97::placeholder {
+._transparenInputError_tawcj_97::placeholder {
   color: var(--color-cambio-destructive-370);
 }