@cambly/syntax-core 17.0.0 → 18.0.0

package/dist/__chunks/NCSQSUVG.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/ThemeProvider/ThemeProvider.tsx","../../../syntax-design-tokens/dist/json/variables.json"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport variables from \"@cambly/syntax-design-tokens/dist/json/variables.json\";\n\nconst classicToCambioKeyLookup = {\n  \"color-base-black\": \"color-cambio-black\",\n  \"color-base-destructive-100\": \"color-cambio-destructive-100\",\n  \"color-base-destructive-200\": \"color-cambio-destructive-300\",\n  \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n  \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n  \"color-base-destructive-800\": \"color-cambio-destructive-900\",\n  \"color-base-destructive-900\": \"color-cambio-destructive-900\",\n  \"color-base-gray-10\": \"color-cambio-gray-370\",\n  \"color-base-gray-30\": \"color-cambio-gray-370\",\n  \"color-base-gray-60\": \"color-cambio-gray-870\",\n  \"color-base-gray-80\": \"color-cambio-gray-870\",\n  \"color-base-gray-100\": \"color-cambio-gray-100\",\n  \"color-base-gray-200\": \"color-cambio-gray-200\",\n  \"color-base-gray-300\": \"color-cambio-gray-300\",\n  \"color-base-gray-700\": \"color-cambio-gray-700\",\n  \"color-base-gray-800\": \"color-cambio-gray-800\",\n  \"color-base-gray-900\": \"color-cambio-gray-900\",\n  \"color-base-orange-100\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-200\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-300\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-700\": \"color-cambio-orange\",\n  \"color-base-orange-800\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-900\": undefined, // Deprecated - to be deleted\n  \"color-base-primary-100\": \"color-cambio-gray-100\",\n  \"color-base-primary-200\": \"color-cambio-gray-200\",\n  \"color-base-primary-300\": \"color-cambio-gray-300\",\n  \"color-base-primary-700\": \"color-cambio-gray-700\",\n  \"color-base-primary-800\": \"color-cambio-gray-800\",\n  \"color-base-primary-900\": \"color-cambio-gray-900\",\n  \"color-base-success-100\": \"color-cambio-success-100\",\n  \"color-base-success-200\": \"color-cambio-success-300\",\n  \"color-base-success-300\": \"color-cambio-success-300\",\n  \"color-base-success-700\": \"color-cambio-success-700\",\n  \"color-base-success-800\": \"color-cambio-success-900\",\n  \"color-base-success-900\": \"color-cambio-success-900\",\n  \"color-base-purple-100\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-200\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-300\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-700\": \"color-cambio-purple\",\n  \"color-base-purple-800\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-900\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-100\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-200\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-300\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-700\": \"color-cambio-yellow-700\",\n  \"color-base-yellow-800\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-900\": undefined, // Deprecated - to be deleted\n  \"color-base-white\": \"color-cambio-white-100\",\n};\n\nfunction stylesForTheme() {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const tokenVariables: Record<string, string> = variables;\n  return `\n    :root {\n      ${Object.entries(tokenVariables)\n        .map(([key, value]) => {\n          // Replace classic values with cambio ones if they exist\n          if (\n            classicToCambioKeyLookup[\n              key as keyof typeof classicToCambioKeyLookup\n            ]\n          ) {\n            return [\n              key,\n              tokenVariables[\n                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                classicToCambioKeyLookup[\n                  key as keyof typeof classicToCambioKeyLookup\n                ]!\n              ],\n            ];\n          }\n          return [key, value];\n        })\n        .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))\n        .filter(Boolean)\n        .join(\"\\n\")}\n    }\n  `;\n}\n\nexport default function ThemeProvider({\n  children,\n}: {\n  children?: React.ReactNode;\n}): React.ReactElement {\n  const innerStyles = useMemo(() => stylesForTheme(), []);\n\n  return (\n    <>\n      <style\n        dangerouslySetInnerHTML={{ __html: innerStyles }}\n        data-testid=\"themeprovider-style\"\n      ></style>\n      {children}\n    </>\n  );\n}\n","{\n  \"color-base-black\": \"#000000\",\n  \"color-base-destructive-100\": \"#fef3f5\",\n  \"color-base-destructive-200\": \"#fad6de\",\n  \"color-base-destructive-300\": \"#f2a2b2\",\n  \"color-base-destructive-700\": \"#d32a4b\",\n  \"color-base-destructive-800\": \"#81162c\",\n  \"color-base-destructive-900\": \"#55101d\",\n  \"color-base-gray-10\": \"rgba(203, 203, 203, 0.5)\",\n  \"color-base-gray-30\": \"rgba(0, 0, 0, 0.3)\",\n  \"color-base-gray-60\": \"rgba(0, 0, 0, 0.6)\",\n  \"color-base-gray-80\": \"rgba(0, 0, 0, 0.8)\",\n  \"color-base-gray-100\": \"#f7f7f7\",\n  \"color-base-gray-200\": \"#f0f0f0\",\n  \"color-base-gray-300\": \"#d0d0d0\",\n  \"color-base-gray-700\": \"#767676\",\n  \"color-base-gray-800\": \"#353535\",\n  \"color-base-gray-900\": \"#191919\",\n  \"color-base-orange-100\": \"#fdf2f0\",\n  \"color-base-orange-200\": \"#f6cdc4\",\n  \"color-base-orange-300\": \"#ec9987\",\n  \"color-base-orange-700\": \"#c34124\",\n  \"color-base-orange-800\": \"#732818\",\n  \"color-base-orange-900\": \"#4d1a10\",\n  \"color-base-primary-100\": \"#eff6fa\",\n  \"color-base-primary-200\": \"#c1dbe7\",\n  \"color-base-primary-300\": \"#84b7d0\",\n  \"color-base-primary-700\": \"#236482\",\n  \"color-base-primary-800\": \"#274858\",\n  \"color-base-primary-900\": \"#1b303b\",\n  \"color-base-success-100\": \"#eff7f1\",\n  \"color-base-success-200\": \"#bddcc6\",\n  \"color-base-success-300\": \"#81ba92\",\n  \"color-base-success-700\": \"#397b4d\",\n  \"color-base-success-800\": \"#2d4936\",\n  \"color-base-success-900\": \"#1e3124\",\n  \"color-base-purple-100\": \"#f9f5fa\",\n  \"color-base-purple-200\": \"#e8dceb\",\n  \"color-base-purple-300\": \"#cdb4d3\",\n  \"color-base-purple-700\": \"#8b5f95\",\n  \"color-base-purple-800\": \"#523b58\",\n  \"color-base-purple-900\": \"#37273b\",\n  \"color-base-yellow-100\": \"#fdf5d9\",\n  \"color-base-yellow-200\": \"#fbe8a3\",\n  \"color-base-yellow-300\": \"#f8d663\",\n  \"color-base-yellow-700\": \"#ffc929\",\n  \"color-base-yellow-800\": \"#765f1c\",\n  \"color-base-yellow-900\": \"#3b3009\",\n  \"color-base-white\": \"#ffffff\",\n  \"color-cambio-black\": \"#050500\",\n  \"color-cambio-white-40\": \"rgba(255, 255, 255, 0.4)\",\n  \"color-cambio-white-70\": \"rgba(255, 255, 255, 0.7)\",\n  \"color-cambio-white-100\": \"#ffffff\",\n  \"color-cambio-gray-100\": \"#faf4eb\",\n  \"color-cambio-gray-200\": \"#e4dbd3\",\n  \"color-cambio-gray-300\": \"#beb4ab\",\n  \"color-cambio-gray-370\": \"rgba(190, 180, 171, 0.7)\",\n  \"color-cambio-gray-700\": \"#888077\",\n  \"color-cambio-gray-800\": \"#5c554d\",\n  \"color-cambio-gray-870\": \"rgba(92, 85, 77, 0.7)\",\n  \"color-cambio-gray-900\": \"#312b23\",\n  \"color-cambio-destructive-100\": \"#ffdeda\",\n  \"color-cambio-destructive-300\": \"#ff8071\",\n  \"color-cambio-destructive-370\": \"rgba(255, 128, 113, 0.7)\",\n  \"color-cambio-destructive-700\": \"#c93f32\",\n  \"color-cambio-destructive-770\": \"rgba(201, 63, 50, 0.7)\",\n  \"color-cambio-destructive-900\": \"#6d0002\",\n  \"color-cambio-success-100\": \"#daf2c8\",\n  \"color-cambio-success-300\": \"#84ce64\",\n  \"color-cambio-success-370\": \"rgba(132, 206, 100, 0.7)\",\n  \"color-cambio-success-700\": \"#3c7f20\",\n  \"color-cambio-success-770\": \"rgba(60, 127, 32, 0.7)\",\n  \"color-cambio-success-900\": \"#103e00\",\n  \"color-cambio-red\": \"#f56e56\",\n  \"color-cambio-orange\": \"#ff8f57\",\n  \"color-cambio-tan\": \"#ffb47d\",\n  \"color-cambio-cream\": \"#fffad1\",\n  \"color-cambio-purple\": \"#6840a8\",\n  \"color-cambio-lilac\": \"#b59ef0\",\n  \"color-cambio-thistle\": \"#d69ca4\",\n  \"color-cambio-pink\": \"#ffccea\",\n  \"color-cambio-navy\": \"#191142\",\n  \"color-cambio-teal\": \"#44a6cf\",\n  \"color-cambio-slate\": \"#7c9fc6\",\n  \"color-cambio-sky\": \"#b1e8fc\",\n  \"color-cambio-yellow-700\": \"#ffe733\",\n  \"color-cambio-transparent-full\": \"rgba(0, 0, 0, 0)\",\n  \"elevation-400\": \"0px 16px 32px 0px #00000040\",\n  \"syntax-font-sans-serif\": \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\",\n  \"shadow-interactive\": \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\"\n}\n"]}

package/dist/__chunks/T5PE7CP5.cjs.map

@@ -1 +0,0 @@
-{"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/X4VZTUXQ.cjs.map

@@ -1 +0,0 @@
-{"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,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,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;;;ADmJj1B;AA3IJ,IAAM,aAAa,WAqHjB,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 textColor from \"../colors/textColors\";\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      | \"white-secondary\"\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     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 19px\n     * * `400`: 25px\n     * * `700`: 38px\n     * * `900`: 55px\n     * * `1100`: 83px\n     *\n     * Desktop (viewport width > 480px):\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `700`: 49px\n     * * `900`: 76px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 0 | 100 | 200 | 300 | 400 | 700 | 900 | 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_innr9_1\",\"sansSerif\":\"_sansSerif_innr9_22\",\"serif\":\"_serif_innr9_27\",\"size0\":\"_size0_innr9_73\",\"size100\":\"_size100_innr9_77\",\"size200\":\"_size200_innr9_82\",\"size300\":\"_size300_innr9_87\",\"size400\":\"_size400_innr9_92\",\"size700\":\"_size700_innr9_97\",\"size900\":\"_size900_innr9_101\",\"size1100\":\"_size1100_innr9_105\",\"center\":\"_center_innr9_129\",\"forceLeft\":\"_forceLeft_innr9_133\",\"forceRight\":\"_forceRight_innr9_137\",\"start\":\"_start_innr9_141\",\"end\":\"_end_innr9_145\",\"regular\":\"_regular_innr9_151\",\"medium\":\"_medium_innr9_155\",\"semiBold\":\"_semiBold_innr9_159\",\"bold\":\"_bold_innr9_163\",\"underline\":\"_underline_innr9_167\",\"inline\":\"_inline_innr9_171\",\"uppercase\":\"_uppercase_innr9_175\",\"lineClamp\":\"_lineClamp_innr9_179\"}"]}

package/dist/__chunks/ZNOK57FQ.js.map

@@ -1 +0,0 @@
-{"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  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\"}"],"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;","names":[]}