@cambly/syntax-core 18.0.0 → 18.2.0

package/dist/__chunks/{UBAA32TM.js → AMJC67S3.js}

@@ -7,7 +7,7 @@ import {
 } from "./5JQ6C2XV.js";
 import {
   TabInternal
-} from "./S5TZEGC2.js";
+} from "./RD3RAVVX.js";
 import {
   Box_default
 } from "./65PMWIHY.js";
@@ -64,4 +64,4 @@ function TabButton({
 export {
   TabButton
 };
-//# sourceMappingURL=UBAA32TM.js.map
+//# sourceMappingURL=AMJC67S3.js.map

package/dist/__chunks/{IV5QSSO4.js → BIOXMBD5.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   TabLink_default
-} from "./KYXPL6OL.js";
+} from "./PAHHQT3S.js";
 import {
   TabButton
-} from "./UBAA32TM.js";
+} from "./AMJC67S3.js";
 import {
   Tabs_module_default
 } from "./5JQ6C2XV.js";
@@ -50,4 +50,4 @@ Tabs.Link = TabLink_default;
 export {
   Tabs
 };
-//# sourceMappingURL=IV5QSSO4.js.map
+//# sourceMappingURL=BIOXMBD5.js.map

package/dist/__chunks/{F3JXKWZG.cjs → C3FW5QDG.cjs}

@@ -4,7 +4,7 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _VFJHU2CGcjs = require('./VFJHU2CG.cjs');
+var _FEFAG4KTcjs = require('./FEFAG4KT.cjs');
 
 
 var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
@@ -100,7 +100,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _VFJHU2CGcjs.Typography_default,
+          _FEFAG4KTcjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray900",
@@ -116,4 +116,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=F3JXKWZG.cjs.map
+//# sourceMappingURL=C3FW5QDG.cjs.map

package/dist/__chunks/{XEVPN6M6.js → C56KH2IB.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Button_default
-} from "./DM2B3B6S.js";
+} from "./IAPKNBLZ.js";
 import {
   Divider
 } from "./YAZOHZLW.js";
@@ -10,13 +10,13 @@ import {
 } from "./BOX3VY3Q.js";
 import {
   RichSelectSection_default
-} from "./W55HCJ36.js";
+} from "./YPUA2AJT.js";
 import {
   RichSelectRadioButton_default
-} from "./XIQP2P6K.js";
+} from "./GBEKI532.js";
 import {
   RichSelectChip_default
-} from "./U7V5GZJN.js";
+} from "./4R4H3FEY.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=XEVPN6M6.js.map
+//# sourceMappingURL=C56KH2IB.js.map

package/dist/__chunks/{WHZWLLDG.cjs → CW24HTIT.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _VFJHU2CGcjs = require('./VFJHU2CG.cjs');
+var _FEFAG4KTcjs = require('./FEFAG4KT.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -52,7 +52,7 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VFJHU2CGcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FEFAG4KTcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -72,7 +72,7 @@ function TextField({
           }
         ),
         (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _VFJHU2CGcjs.Typography_default,
+          _FEFAG4KTcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-darkBackground" : "gray700",
@@ -87,4 +87,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=WHZWLLDG.cjs.map
+//# sourceMappingURL=CW24HTIT.cjs.map

package/dist/__chunks/{WXBLT2NN.cjs → D3COBORG.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _VFJHU2CGcjs = require('./VFJHU2CG.cjs');
+var _FEFAG4KTcjs = require('./FEFAG4KT.cjs');
 
 
 var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
@@ -40,7 +40,7 @@ var ItemCountIcon = ({
           rounding: "full",
           padding: 1,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _VFJHU2CGcjs.Typography_default,
+            _FEFAG4KTcjs.Typography_default,
             {
               color: on === "lightBackground" ? "white" : "primary",
               weight: "semiBold",
@@ -79,7 +79,7 @@ function TabInternal({
       paddingY: 2,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _VFJHU2CGcjs.Typography_default,
+          _FEFAG4KTcjs.Typography_default,
           {
             size: 0,
             transform: "uppercase",
@@ -98,4 +98,4 @@ function TabInternal({
 
 
 exports.TabInternal = TabInternal;
-//# sourceMappingURL=WXBLT2NN.cjs.map
+//# sourceMappingURL=D3COBORG.cjs.map

package/dist/__chunks/{GBPRX7NM.cjs → EF6R3LRB.cjs}

@@ -7,7 +7,7 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _VFJHU2CGcjs = require('./VFJHU2CG.cjs');
+var _FEFAG4KTcjs = require('./FEFAG4KT.cjs');
 
 
 var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
@@ -113,7 +113,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _VFJHU2CGcjs.Typography_default,
+          _FEFAG4KTcjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=GBPRX7NM.cjs.map
+//# sourceMappingURL=EF6R3LRB.cjs.map

package/dist/__chunks/{WD5XG3NW.js → EGAJ7S43.js}

@@ -8,21 +8,21 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./PGZQZLIJ.js";
+} from "./FTXYKEQI.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./XEVPN6M6.js";
+} from "./C56KH2IB.js";
 import {
   RichSelectSection_default
-} from "./W55HCJ36.js";
+} from "./YPUA2AJT.js";
 import {
   RichSelectRadioButton_default
-} from "./XIQP2P6K.js";
+} from "./GBEKI532.js";
 import {
   RichSelectChip_default
-} from "./U7V5GZJN.js";
+} from "./4R4H3FEY.js";
 import {
   TapArea_default
 } from "./77FFPQY6.js";
@@ -31,7 +31,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./CSXNNFUS.js";
+} from "./HFLM5VGD.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -56,7 +56,7 @@ import { useControlledState } from "@react-stately/utils";
 import { setInteractionModality } from "@react-aria/interactions";
 
 // css-module:../SelectList/SelectList.module.css#css-module
-var SelectList_module_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" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1g9ap_1", "opacityOverlay": "_opacityOverlay_1g9ap_7", "selectWrapper": "_selectWrapper_1g9ap_11", "selectBox": "_selectBox_1g9ap_16", "selectBoxCambio": "_selectBoxCambio_1g9ap_30", "selectMouseFocusStyling": "_selectMouseFocusStyling_1g9ap_38", "unselected": "_unselected_1g9ap_43", "selected": "_selected_1g9ap_47", "arrowIcon": "_arrowIcon_1g9ap_51", "selectErrorCambio": "_selectErrorCambio_1g9ap_65", "selectColorwhite": "_selectColorwhite_1g9ap_71", "selectColorclear": "_selectColorclear_1g9ap_77" };
 
 // src/RichSelect/RichSelectList.tsx
 import { useField } from "react-aria";
@@ -267,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=WD5XG3NW.js.map
+//# sourceMappingURL=EGAJ7S43.js.map

package/dist/__chunks/{WD5XG3NW.js.map → EGAJ7S43.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /**\n   * RichSelectList id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    id,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    ...richSelectBoxProps\n  } = props;\n\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n        onClick={onClick}\n      >\n        {label && (\n          <>\n            <ReactAriaLabel\n              data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n              {...labelProps}\n              onClick={() => {\n                if (disabled) return;\n                fieldRef.current?.focus();\n                setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n              }}\n            >\n              <Box paddingX={1}>\n                <Typography size={100} color=\"gray700\">\n                  {label}\n                </Typography>\n              </Box>\n            </ReactAriaLabel>\n          </>\n        )}\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n              role=\"menu\"\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                {...richSelectBoxProps}\n                accessibilityLabel={inputId}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding=\"md\"\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(\n                  styles.selectBox,\n                  styles.selectBoxCambio,\n                  {\n                    [styles.unselected]:\n                      !errorText &&\n                      selectedKeys !== \"all\" &&\n                      !selectedKeys.size,\n                    [styles.selected]:\n                      !errorText &&\n                      (selectedKeys === \"all\" || selectedKeys.size),\n                    [styles.selectErrorCambio]: errorText,\n                  },\n                )}\n              >\n                {selectedTextValue}\n              </div>\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={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\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          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </Box>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\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":"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","names":["_a"]}
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /**\n   * RichSelectList id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    id,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    ...richSelectBoxProps\n  } = props;\n\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n        onClick={onClick}\n      >\n        {label && (\n          <>\n            <ReactAriaLabel\n              data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n              {...labelProps}\n              onClick={() => {\n                if (disabled) return;\n                fieldRef.current?.focus();\n                setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n              }}\n            >\n              <Box paddingX={1}>\n                <Typography size={100} color=\"gray700\">\n                  {label}\n                </Typography>\n              </Box>\n            </ReactAriaLabel>\n          </>\n        )}\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n              role=\"menu\"\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                {...richSelectBoxProps}\n                accessibilityLabel={inputId}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding=\"md\"\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(\n                  styles.selectBox,\n                  styles.selectBoxCambio,\n                  {\n                    [styles.unselected]:\n                      !errorText &&\n                      selectedKeys !== \"all\" &&\n                      !selectedKeys.size,\n                    [styles.selected]:\n                      !errorText &&\n                      (selectedKeys === \"all\" || selectedKeys.size),\n                    [styles.selectErrorCambio]: errorText,\n                  },\n                )}\n              >\n                {selectedTextValue}\n              </div>\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={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\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          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </Box>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1g9ap_1\",\"opacityOverlay\":\"_opacityOverlay_1g9ap_7\",\"selectWrapper\":\"_selectWrapper_1g9ap_11\",\"selectBox\":\"_selectBox_1g9ap_16\",\"selectBoxCambio\":\"_selectBoxCambio_1g9ap_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1g9ap_38\",\"unselected\":\"_unselected_1g9ap_43\",\"selected\":\"_selected_1g9ap_47\",\"arrowIcon\":\"_arrowIcon_1g9ap_51\",\"selectErrorCambio\":\"_selectErrorCambio_1g9ap_65\",\"selectColorwhite\":\"_selectColorwhite_1g9ap_71\",\"selectColorclear\":\"_selectColorclear_1g9ap_77\"}"],"mappings":"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","names":["_a"]}

package/dist/__chunks/{3D2AJ2QO.js → F5FOZNTK.js}

@@ -2,7 +2,7 @@
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./PGZQZLIJ.js";
+} from "./FTXYKEQI.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -14,7 +14,7 @@ import {
 } from "./SPQ7DQHG.js";
 import {
   Typography_default
-} from "./CSXNNFUS.js";
+} from "./HFLM5VGD.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -30,7 +30,7 @@ import {
 import classNames from "classnames";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_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" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1g9ap_1", "opacityOverlay": "_opacityOverlay_1g9ap_7", "selectWrapper": "_selectWrapper_1g9ap_11", "selectBox": "_selectBox_1g9ap_16", "selectBoxCambio": "_selectBoxCambio_1g9ap_30", "selectMouseFocusStyling": "_selectMouseFocusStyling_1g9ap_38", "unselected": "_unselected_1g9ap_43", "selected": "_selected_1g9ap_47", "arrowIcon": "_arrowIcon_1g9ap_51", "selectErrorCambio": "_selectErrorCambio_1g9ap_65", "selectColorwhite": "_selectColorwhite_1g9ap_71", "selectColorclear": "_selectColorclear_1g9ap_77" };
 
 // src/SelectList/SelectList.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -45,7 +45,8 @@ function SelectList({
   onChange,
   onClick,
   placeholderText,
-  selectedValue = ""
+  selectedValue = "",
+  color = "white"
 }) {
   const reactId = useId();
   const isHydrated = useIsHydrated();
@@ -60,6 +61,10 @@ function SelectList({
       onClick(event);
     }
   };
+  const textColor = {
+    white: "gray700",
+    clear: "white"
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -67,7 +72,7 @@ function SelectList({
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: textColor[color], children: label }) }) }),
         /* @__PURE__ */ jsxs("div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ jsxs(
             "select",
@@ -81,8 +86,9 @@ function SelectList({
                 [SelectList_module_default.selectErrorCambio]: errorText,
                 [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
                 // for focus keyboard
-                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
+                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible,
                 // for focus mouse
+                [SelectList_module_default[`selectColor${color}`]]: color
               }),
               onChange,
               onClick,
@@ -117,7 +123,7 @@ function SelectList({
           Typography_default,
           {
             size: 100,
-            color: errorText ? "destructive-primary" : "gray700",
+            color: errorText ? "destructive-primary" : textColor[color],
             children: errorText ? errorText : helperText
           }
         ) })
@@ -130,4 +136,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=3D2AJ2QO.js.map
+//# sourceMappingURL=F5FOZNTK.js.map

package/dist/__chunks/F5FOZNTK.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  type ComponentProps,\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  color = \"white\",\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?: (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;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Color of the select box\n   * @defaultValue white\n   */\n  color?: \"white\" | \"clear\";\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  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 textColor: Record<\n    NonNullable<ComponentProps<typeof SelectList>[\"color\"]>,\n    ComponentProps<typeof Typography>[\"color\"]\n  > = {\n    white: \"gray700\",\n    clear: \"white\",\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}>\n            <Typography size={100} color={textColor[color]}>\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            [styles[`selectColor${color}`]]: color,\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={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\" : textColor[color]}\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_1g9ap_1\",\"opacityOverlay\":\"_opacityOverlay_1g9ap_7\",\"selectWrapper\":\"_selectWrapper_1g9ap_11\",\"selectBox\":\"_selectBox_1g9ap_16\",\"selectBoxCambio\":\"_selectBoxCambio_1g9ap_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1g9ap_38\",\"unselected\":\"_unselected_1g9ap_43\",\"selected\":\"_selected_1g9ap_47\",\"arrowIcon\":\"_arrowIcon_1g9ap_51\",\"selectErrorCambio\":\"_selectErrorCambio_1g9ap_65\",\"selectColorwhite\":\"_selectColorwhite_1g9ap_71\",\"selectColorclear\":\"_selectColorclear_1g9ap_77\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{VFJHU2CG.cjs → FEFAG4KT.cjs}

@@ -8,7 +8,7 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefau
 var _react = require('react');
 
 // css-module:./Typography.module.css#css-module
-var Typography_module_default = { "typography": "_typography_19wa6_1", "sansSerif": "_sansSerif_19wa6_22", "serif": "_serif_19wa6_27", "size0": "_size0_19wa6_73", "size100": "_size100_19wa6_77", "size200": "_size200_19wa6_81", "size300": "_size300_19wa6_85", "size400": "_size400_19wa6_89", "size700": "_size700_19wa6_93", "size900": "_size900_19wa6_97", "size1100": "_size1100_19wa6_101", "center": "_center_19wa6_125", "forceLeft": "_forceLeft_19wa6_129", "forceRight": "_forceRight_19wa6_133", "start": "_start_19wa6_137", "end": "_end_19wa6_141", "regular": "_regular_19wa6_147", "medium": "_medium_19wa6_151", "semiBold": "_semiBold_19wa6_155", "bold": "_bold_19wa6_159", "underline": "_underline_19wa6_163", "inline": "_inline_19wa6_167", "uppercase": "_uppercase_19wa6_171", "lineClamp": "_lineClamp_19wa6_175", "p100": "_p100_19wa6_184", "p200": "_p200_19wa6_188", "p300": "_p300_19wa6_192", "p400": "_p400_19wa6_196" };
+var Typography_module_default = { "typography": "_typography_1fz2y_1", "sansSerif": "_sansSerif_1fz2y_22", "serif": "_serif_1fz2y_27", "size0": "_size0_1fz2y_73", "size100": "_size100_1fz2y_77", "size200": "_size200_1fz2y_81", "size300": "_size300_1fz2y_85", "size400": "_size400_1fz2y_89", "size700": "_size700_1fz2y_93", "size800": "_size800_1fz2y_97", "size900": "_size900_1fz2y_101", "size1100": "_size1100_1fz2y_105", "center": "_center_1fz2y_133", "forceLeft": "_forceLeft_1fz2y_137", "forceRight": "_forceRight_1fz2y_141", "start": "_start_1fz2y_145", "end": "_end_1fz2y_149", "regular": "_regular_1fz2y_155", "medium": "_medium_1fz2y_159", "semiBold": "_semiBold_1fz2y_163", "bold": "_bold_1fz2y_167", "underline": "_underline_1fz2y_171", "inline": "_inline_1fz2y_175", "uppercase": "_uppercase_1fz2y_179", "lineClamp": "_lineClamp_1fz2y_183", "p100": "_p100_1fz2y_192", "p200": "_p200_1fz2y_196", "p300": "_p300_1fz2y_200", "p400": "_p400_1fz2y_204" };
 
 // src/Typography/Typography.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -61,4 +61,4 @@ var Typography_default = Typography;
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=VFJHU2CG.cjs.map
+//# sourceMappingURL=FEFAG4KT.cjs.map

package/dist/__chunks/FEFAG4KT.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,SAAQ,mBAAkB,WAAU,qBAAoB,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,wBAAuB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,kBAAiB;;;ADqJn9B;AA7IJ,IAAM,aAAa,WAuHjB,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,QAC5B,OAAO,OAAO,0BAAO,IAAI,MAAM;AAAA,MACjC;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\" | \"p\";\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     * * `800`: 46px\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     * * `800`: 63px\n     * * `900`: 76px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 0 | 100 | 200 | 300 | 400 | 700 | 800 | 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        as === \"p\" && styles[`p${size}`],\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_1fz2y_1\",\"sansSerif\":\"_sansSerif_1fz2y_22\",\"serif\":\"_serif_1fz2y_27\",\"size0\":\"_size0_1fz2y_73\",\"size100\":\"_size100_1fz2y_77\",\"size200\":\"_size200_1fz2y_81\",\"size300\":\"_size300_1fz2y_85\",\"size400\":\"_size400_1fz2y_89\",\"size700\":\"_size700_1fz2y_93\",\"size800\":\"_size800_1fz2y_97\",\"size900\":\"_size900_1fz2y_101\",\"size1100\":\"_size1100_1fz2y_105\",\"center\":\"_center_1fz2y_133\",\"forceLeft\":\"_forceLeft_1fz2y_137\",\"forceRight\":\"_forceRight_1fz2y_141\",\"start\":\"_start_1fz2y_145\",\"end\":\"_end_1fz2y_149\",\"regular\":\"_regular_1fz2y_155\",\"medium\":\"_medium_1fz2y_159\",\"semiBold\":\"_semiBold_1fz2y_163\",\"bold\":\"_bold_1fz2y_167\",\"underline\":\"_underline_1fz2y_171\",\"inline\":\"_inline_1fz2y_175\",\"uppercase\":\"_uppercase_1fz2y_179\",\"lineClamp\":\"_lineClamp_1fz2y_183\",\"p100\":\"_p100_1fz2y_192\",\"p200\":\"_p200_1fz2y_196\",\"p300\":\"_p300_1fz2y_200\",\"p400\":\"_p400_1fz2y_204\"}"]}

package/dist/__chunks/{PGZQZLIJ.js → FTXYKEQI.js}

@@ -8,4 +8,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=PGZQZLIJ.js.map
+//# sourceMappingURL=FTXYKEQI.js.map

package/dist/__chunks/{PGZQZLIJ.js.map → FTXYKEQI.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 10 Jul 2024 21:27:52 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 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;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 12 Jul 2024 19:57:36 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 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;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{XIQP2P6K.js → GBEKI532.js}

@@ -4,7 +4,7 @@ import {
 } from "./ODMJANSX.js";
 import {
   RadioButton_default
-} from "./4I22HW55.js";
+} from "./6ZUUHEIX.js";
 import {
   __objRest,
   __spreadProps,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
 export {
   RichSelectRadioButton_default
 };
-//# sourceMappingURL=XIQP2P6K.js.map
+//# sourceMappingURL=GBEKI532.js.map

package/dist/__chunks/{CTYE2DLH.cjs → GW6SAUW3.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _UEN466AGcjs = require('./UEN466AG.cjs');
+var _T6HS7FEYcjs = require('./T6HS7FEY.cjs');
 
 
 var _42SRFCQLcjs = require('./42SRFCQL.cjs');
@@ -10,13 +10,13 @@ var _42SRFCQLcjs = require('./42SRFCQL.cjs');
 var _C5XPZTFOcjs = require('./C5XPZTFO.cjs');
 
 
-var _T2DVTUV3cjs = require('./T2DVTUV3.cjs');
+var _I76WKOLEcjs = require('./I76WKOLE.cjs');
 
 
-var _UUOQGDIPcjs = require('./UUOQGDIP.cjs');
+var _XTZEWLM5cjs = require('./XTZEWLM5.cjs');
 
 
-var _YF4NOEPGcjs = require('./YF4NOEPG.cjs');
+var _2GCUEMYNcjs = require('./2GCUEMYN.cjs');
 
 
 
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                 justifyContent: "end",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _C5XPZTFOcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _UEN466AGcjs.Button_default,
+                    _T6HS7FEYcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _UEN466AGcjs.Button_default,
+                    _T6HS7FEYcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
   }
 );
 var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _T2DVTUV3cjs.RichSelectSection_default,
-  Chip: _YF4NOEPGcjs.RichSelectChip_default,
-  RadioButton: _UUOQGDIPcjs.RichSelectRadioButton_default
+  Section: _I76WKOLEcjs.RichSelectSection_default,
+  Chip: _2GCUEMYNcjs.RichSelectChip_default,
+  RadioButton: _XTZEWLM5cjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=CTYE2DLH.cjs.map
+//# sourceMappingURL=GW6SAUW3.cjs.map

package/dist/__chunks/{YNE2MGFU.cjs → HBHOLWEM.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _VFJHU2CGcjs = require('./VFJHU2CG.cjs');
+var _FEFAG4KTcjs = require('./FEFAG4KT.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -54,8 +54,8 @@ var TextArea = _react.forwardRef.call(void 0,
         },
         position: "relative",
         children: [
-          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VFJHU2CGcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VFJHU2CGcjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FEFAG4KTcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FEFAG4KTcjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               "data-testid": dataTestId,
@@ -78,7 +78,7 @@ var TextArea = _react.forwardRef.call(void 0,
             }
           ) }),
           (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _VFJHU2CGcjs.Typography_default,
+            _FEFAG4KTcjs.Typography_default,
             {
               size: 100,
               color: errorText ? "destructive-darkBackground" : "gray700",
@@ -95,4 +95,4 @@ var TextArea_default = TextArea;
 
 
 exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=YNE2MGFU.cjs.map
+//# sourceMappingURL=HBHOLWEM.cjs.map