@cambly/syntax-core 15.4.0 → 15.6.0

package/dist/RichSelect/RichSelectList.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _6SSJ3CDBcjs = require('../__chunks/6SSJ3CDB.cjs');
+var _RD4EXZDZcjs = require('../__chunks/RD4EXZDZ.cjs');
 require('../__chunks/LNLOBEMH.cjs');
 require('../__chunks/SSGQWZJG.cjs');
 require('../__chunks/J27AGJQB.cjs');
 require('../__chunks/PIQO2LH2.cjs');
-require('../__chunks/YABPX4OU.cjs');
+require('../__chunks/RU5JUMYC.cjs');
 require('../__chunks/5CSS7BNE.cjs');
 require('../__chunks/OY5QYJVA.cjs');
 require('../__chunks/42SRFCQL.cjs');
@@ -46,5 +46,5 @@ require('../__chunks/E5P6WRJD.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _6SSJ3CDBcjs.RichSelectList_default;
+exports.default = _RD4EXZDZcjs.RichSelectList_default;
 //# sourceMappingURL=RichSelectList.cjs.map

package/dist/RichSelect/RichSelectList.js

@@ -1,12 +1,12 @@
 "use client"
 import {
   RichSelectList_default
-} from "../__chunks/DQYOOTXB.js";
+} from "../__chunks/7PXG7CRK.js";
 import "../__chunks/ZYWRMB4F.js";
 import "../__chunks/QAH73IJZ.js";
 import "../__chunks/5HEC7ASW.js";
 import "../__chunks/T6T5FJWJ.js";
-import "../__chunks/Z6GHCMWB.js";
+import "../__chunks/CUUBDICM.js";
 import "../__chunks/5RXHG6S5.js";
 import "../__chunks/4X7ZC3WT.js";
 import "../__chunks/YAZOHZLW.js";

package/dist/SelectList/SelectList.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _XCOZDXFIcjs = require('../__chunks/XCOZDXFI.cjs');
-require('../__chunks/YABPX4OU.cjs');
+var _I7BXC2FHcjs = require('../__chunks/I7BXC2FH.cjs');
+require('../__chunks/RU5JUMYC.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/KJLBDAZH.cjs');
 require('../__chunks/JVGX637E.cjs');
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _XCOZDXFIcjs.SelectList;
+exports.default = _I7BXC2FHcjs.SelectList;
 //# sourceMappingURL=SelectList.cjs.map

package/dist/SelectList/SelectList.js

@@ -1,8 +1,8 @@
 "use client"
 import {
   SelectList
-} from "../__chunks/WFV332GO.js";
-import "../__chunks/Z6GHCMWB.js";
+} from "../__chunks/YPL2E6XO.js";
+import "../__chunks/CUUBDICM.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/65PMWIHY.js";
 import "../__chunks/SPQ7DQHG.js";

package/dist/Tabs/TabButton.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _AOBL3JUXcjs = require('../__chunks/AOBL3JUX.cjs');
+var _J7224OUTcjs = require('../__chunks/J7224OUT.cjs');
 require('../__chunks/3UEOKPM2.cjs');
 require('../__chunks/JVGBP6LO.cjs');
 require('../__chunks/NFSZQICF.cjs');
@@ -17,5 +17,5 @@ require('../__chunks/K4AUV2VK.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _AOBL3JUXcjs.TabButton;
+exports.default = _J7224OUTcjs.TabButton;
 //# sourceMappingURL=TabButton.cjs.map

package/dist/Tabs/TabButton.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   TabButton
-} from "../__chunks/VC5WSVCY.js";
+} from "../__chunks/OMWNK5SA.js";
 import "../__chunks/77FFPQY6.js";
 import "../__chunks/5JQ6C2XV.js";
 import "../__chunks/CB66GOW7.js";

package/dist/Tabs/TabLink.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _VFJQUEUDcjs = require('../__chunks/VFJQUEUD.cjs');
+var _MDQYGGZOcjs = require('../__chunks/MDQYGGZO.cjs');
 require('../__chunks/JVGBP6LO.cjs');
 require('../__chunks/NFSZQICF.cjs');
 require('../__chunks/KJLBDAZH.cjs');
@@ -15,5 +15,5 @@ require('../__chunks/SVA2ABQQ.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _VFJQUEUDcjs.TabLink_default;
+exports.default = _MDQYGGZOcjs.TabLink_default;
 //# sourceMappingURL=TabLink.cjs.map

package/dist/Tabs/TabLink.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   TabLink_default
-} from "../__chunks/LMZJHS5E.js";
+} from "../__chunks/ZAB5SOZP.js";
 import "../__chunks/5JQ6C2XV.js";
 import "../__chunks/CB66GOW7.js";
 import "../__chunks/65PMWIHY.js";

package/dist/Tabs/Tabs.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _JQ6MLSETcjs = require('../__chunks/JQ6MLSET.cjs');
-require('../__chunks/VFJQUEUD.cjs');
-require('../__chunks/AOBL3JUX.cjs');
+var _ONTB6T6Kcjs = require('../__chunks/ONTB6T6K.cjs');
+require('../__chunks/MDQYGGZO.cjs');
+require('../__chunks/J7224OUT.cjs');
 require('../__chunks/3UEOKPM2.cjs');
 require('../__chunks/JVGBP6LO.cjs');
 require('../__chunks/NFSZQICF.cjs');
@@ -19,5 +19,5 @@ require('../__chunks/K4AUV2VK.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _JQ6MLSETcjs.Tabs;
+exports.default = _ONTB6T6Kcjs.Tabs;
 //# sourceMappingURL=Tabs.cjs.map

package/dist/Tabs/Tabs.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   Tabs
-} from "../__chunks/GZXNR3JK.js";
-import "../__chunks/LMZJHS5E.js";
-import "../__chunks/VC5WSVCY.js";
+} from "../__chunks/4DZD4SDJ.js";
+import "../__chunks/ZAB5SOZP.js";
+import "../__chunks/OMWNK5SA.js";
 import "../__chunks/77FFPQY6.js";
 import "../__chunks/5JQ6C2XV.js";
 import "../__chunks/CB66GOW7.js";

package/dist/__chunks/{GZXNR3JK.js → 4DZD4SDJ.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   TabLink_default
-} from "./LMZJHS5E.js";
+} from "./ZAB5SOZP.js";
 import {
   TabButton
-} from "./VC5WSVCY.js";
+} from "./OMWNK5SA.js";
 import {
   Tabs_module_default
 } from "./5JQ6C2XV.js";
@@ -50,4 +50,4 @@ Tabs.Link = TabLink_default;
 export {
   Tabs
 };
-//# sourceMappingURL=GZXNR3JK.js.map
+//# sourceMappingURL=4DZD4SDJ.js.map

package/dist/__chunks/{DQYOOTXB.js → 7PXG7CRK.js}

@@ -8,7 +8,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./Z6GHCMWB.js";
+} from "./CUUBDICM.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
@@ -181,6 +181,7 @@ function RichSelectList(props) {
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
+                      role: "menu",
                       children: /* @__PURE__ */ jsx(
                         RichSelectBox_default,
                         __spreadProps(__spreadValues({
@@ -266,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=DQYOOTXB.js.map
+//# sourceMappingURL=7PXG7CRK.js.map

package/dist/__chunks/7PXG7CRK.js.map

@@ -0,0 +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"]}

package/dist/__chunks/{Z6GHCMWB.js → CUUBDICM.js}

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

package/dist/__chunks/{Z6GHCMWB.js.map → CUUBDICM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 29 May 2024 16:18:20 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 ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"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 Wed, 05 Jun 2024 22:57:02 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 ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{XCOZDXFI.cjs → I7BXC2FH.cjs}

@@ -2,7 +2,7 @@
 
 
 
-var _YABPX4OUcjs = require('./YABPX4OU.cjs');
+var _RU5JUMYCcjs = require('./RU5JUMYC.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -98,7 +98,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _YABPX4OUcjs.ColorBaseDestructive700 : _YABPX4OUcjs.ColorBaseGray800,
+                  fill: errorText ? _RU5JUMYCcjs.ColorBaseDestructive700 : _RU5JUMYCcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
@@ -122,4 +122,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=XCOZDXFI.cjs.map
+//# sourceMappingURL=I7BXC2FH.cjs.map

package/dist/__chunks/{AOBL3JUX.cjs → J7224OUT.cjs}

@@ -23,7 +23,7 @@ function TabButton({
   itemCount,
   accessibilityLabel,
   "data-testid": dataTestId,
-  on
+  on = "lightBackground"
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -64,4 +64,4 @@ function TabButton({
 
 
 exports.TabButton = TabButton;
-//# sourceMappingURL=AOBL3JUX.cjs.map
+//# sourceMappingURL=J7224OUT.cjs.map

package/dist/__chunks/J7224OUT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AAmDb;AA7CK,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,KAAK;AACP,GAaiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,QACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,QACrB,CAAC,oBAAO,2BAA2B,GACjC,YAAY,OAAO;AAAA,MACvB,CAAC;AAAA,MACD,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,8BAAC,eAAI,SAAQ,QAAO,WAAU,OAAM,YAAW,UAAS,QAAO,QAC7D;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA,UAAS;AAAA,UACT,eAAa;AAAA,UACb;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ","sourcesContent":["import { type ReactElement, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\nimport TapArea from \"../TapArea/TapArea\";\nimport TabInternal from \"./TabInternal\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\nexport default function TabButton({\n  text,\n  onClick,\n  selected,\n  endContent,\n  itemCount,\n  accessibilityLabel,\n  \"data-testid\": dataTestId,\n  on = \"lightBackground\",\n}: ComponentProps<typeof TabInternal> & {\n  /**\n   * The onClick event for the button\n   */\n  onClick: () => void;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <div\n      role=\"tab\"\n      className={classnames({\n        [styles.unselectedTab]: !selected,\n        [styles.selectedTabOnLightBackground]:\n          selected && on === \"lightBackground\",\n        [styles.selectedTabOnDarkBackground]:\n          selected && on === \"darkBackground\",\n      })}\n      style={{\n        height: \"100%\",\n      }}\n    >\n      <Box display=\"flex\" direction=\"row\" alignItems=\"center\" height=\"100%\">\n        <TapArea\n          fullWidth={false}\n          onClick={onClick}\n          rounding=\"md\"\n          data-testid={dataTestId}\n          accessibilityLabel={accessibilityLabel}\n        >\n          <TabInternal\n            text={text}\n            selected={selected}\n            endContent={endContent}\n            itemCount={itemCount}\n            on={on}\n          />\n        </TapArea>\n      </Box>\n    </div>\n  );\n}\n"]}

package/dist/__chunks/{VFJQUEUD.cjs → MDQYGGZO.cjs}

@@ -22,7 +22,7 @@ var TabLink = _react.forwardRef.call(void 0,
     target,
     rel,
     "data-testid": dataTestId,
-    on,
+    on = "lightBackground",
     onClick,
     selected,
     endContent,
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 
 
 exports.TabLink_default = TabLink_default;
-//# sourceMappingURL=VFJQUEUD.cjs.map
+//# sourceMappingURL=MDQYGGZO.cjs.map

package/dist/__chunks/MDQYGGZO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AAEP,OAAO,gBAAgB;AAsEX;AAxCZ,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW;AAAA,UACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,UACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,UACrB,CAAC,oBAAO,yBAAyB,GAC/B,YAAY,OAAO;AAAA,QACvB,CAAC;AAAA,QACD,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QAEA,8BAAC,eAAI,SAAQ,QAAO,YAAW,UAAS,QAAO,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,oBAAO;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ","sourcesContent":["import {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport TabInternal from \"./TabInternal\";\nimport classnames from \"classnames\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\ntype TabLinkProps = ComponentProps<typeof TabInternal> & {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The link that the Tab should route to.\n   *\n   */\n  href: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      on = \"lightBackground\",\n      onClick,\n      selected,\n      endContent,\n      itemCount,\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <div\n        role=\"tab\"\n        className={classnames({\n          [styles.unselectedTab]: !selected,\n          [styles.selectedTabOnLightBackground]:\n            selected && on === \"lightBackground\",\n          [styles.selectedTabDarkBackground]:\n            selected && on === \"darkBackground\",\n        })}\n        style={{\n          height: \"100%\",\n        }}\n      >\n        <Box display=\"flex\" alignItems=\"center\" height=\"100%\">\n          <a\n            href={href}\n            data-testid={dataTestId}\n            target={target}\n            ref={ref}\n            rel={rel}\n            onClick={onClick}\n            className={styles.link}\n          >\n            <TabInternal\n              text={text}\n              selected={selected}\n              endContent={endContent}\n              itemCount={itemCount}\n              on={on}\n            />\n          </a>\n        </Box>\n      </div>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n\nexport default TabLink;\n"]}

package/dist/__chunks/{VC5WSVCY.js → OMWNK5SA.js}

@@ -23,7 +23,7 @@ function TabButton({
   itemCount,
   accessibilityLabel,
   "data-testid": dataTestId,
-  on
+  on = "lightBackground"
 }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -64,4 +64,4 @@ function TabButton({
 export {
   TabButton
 };
-//# sourceMappingURL=VC5WSVCY.js.map
+//# sourceMappingURL=OMWNK5SA.js.map

package/dist/__chunks/OMWNK5SA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabButton.tsx"],"sourcesContent":["import { type ReactElement, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\nimport TapArea from \"../TapArea/TapArea\";\nimport TabInternal from \"./TabInternal\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\nexport default function TabButton({\n  text,\n  onClick,\n  selected,\n  endContent,\n  itemCount,\n  accessibilityLabel,\n  \"data-testid\": dataTestId,\n  on = \"lightBackground\",\n}: ComponentProps<typeof TabInternal> & {\n  /**\n   * The onClick event for the button\n   */\n  onClick: () => void;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <div\n      role=\"tab\"\n      className={classnames({\n        [styles.unselectedTab]: !selected,\n        [styles.selectedTabOnLightBackground]:\n          selected && on === \"lightBackground\",\n        [styles.selectedTabOnDarkBackground]:\n          selected && on === \"darkBackground\",\n      })}\n      style={{\n        height: \"100%\",\n      }}\n    >\n      <Box display=\"flex\" direction=\"row\" alignItems=\"center\" height=\"100%\">\n        <TapArea\n          fullWidth={false}\n          onClick={onClick}\n          rounding=\"md\"\n          data-testid={dataTestId}\n          accessibilityLabel={accessibilityLabel}\n        >\n          <TabInternal\n            text={text}\n            selected={selected}\n            endContent={endContent}\n            itemCount={itemCount}\n            on={on}\n          />\n        </TapArea>\n      </Box>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AAmDb;AA7CK,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,KAAK;AACP,GAaiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,QACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,QACrB,CAAC,oBAAO,2BAA2B,GACjC,YAAY,OAAO;AAAA,MACvB,CAAC;AAAA,MACD,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,8BAAC,eAAI,SAAQ,QAAO,WAAU,OAAM,YAAW,UAAS,QAAO,QAC7D;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA,UAAS;AAAA,UACT,eAAa;AAAA,UACb;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/{JQ6MLSET.cjs → ONTB6T6K.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _VFJQUEUDcjs = require('./VFJQUEUD.cjs');
+var _MDQYGGZOcjs = require('./MDQYGGZO.cjs');
 
 
-var _AOBL3JUXcjs = require('./AOBL3JUX.cjs');
+var _J7224OUTcjs = require('./J7224OUT.cjs');
 
 
 var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
@@ -44,10 +44,10 @@ function Tabs({
     }
   );
 }
-Tabs.Button = _AOBL3JUXcjs.TabButton;
-Tabs.Link = _VFJQUEUDcjs.TabLink_default;
+Tabs.Button = _J7224OUTcjs.TabButton;
+Tabs.Link = _MDQYGGZOcjs.TabLink_default;
 
 
 
 exports.Tabs = Tabs;
-//# sourceMappingURL=JQ6MLSET.cjs.map
+//# sourceMappingURL=ONTB6T6K.cjs.map

package/dist/__chunks/{6SSJ3CDB.cjs → RD4EXZDZ.cjs}

@@ -8,7 +8,7 @@ var _J27AGJQBcjs = require('./J27AGJQB.cjs');
 
 
 
-var _YABPX4OUcjs = require('./YABPX4OU.cjs');
+var _RU5JUMYCcjs = require('./RU5JUMYC.cjs');
 
 
 
@@ -181,6 +181,7 @@ function RichSelectList(props) {
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
+                      role: "menu",
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         _5CSS7BNEcjs.RichSelectBox_default,
                         _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
@@ -231,7 +232,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _YABPX4OUcjs.ColorBaseDestructive700 : _YABPX4OUcjs.ColorBaseGray800,
+                              fill: errorText ? _RU5JUMYCcjs.ColorBaseDestructive700 : _RU5JUMYCcjs.ColorBaseGray800,
                               d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                             }
                           )
@@ -266,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=6SSJ3CDB.cjs.map
+//# sourceMappingURL=RD4EXZDZ.cjs.map

package/dist/__chunks/RD4EXZDZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","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\"}"]}

package/dist/__chunks/{YABPX4OU.cjs → RU5JUMYC.cjs}

@@ -8,4 +8,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=YABPX4OU.cjs.map
+//# sourceMappingURL=RU5JUMYC.cjs.map

package/dist/__chunks/{YABPX4OU.cjs.map → RU5JUMYC.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 29 May 2024 16:18:20 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 ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 05 Jun 2024 22:57:02 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 ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"]}

package/dist/__chunks/{WFV332GO.js → YPL2E6XO.js}

@@ -2,7 +2,7 @@
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./Z6GHCMWB.js";
+} from "./CUUBDICM.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -122,4 +122,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=WFV332GO.js.map
+//# sourceMappingURL=YPL2E6XO.js.map

package/dist/__chunks/{LMZJHS5E.js → ZAB5SOZP.js}

@@ -22,7 +22,7 @@ var TabLink = forwardRef(
     target,
     rel,
     "data-testid": dataTestId,
-    on,
+    on = "lightBackground",
     onClick,
     selected,
     endContent,
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 export {
   TabLink_default
 };
-//# sourceMappingURL=LMZJHS5E.js.map
+//# sourceMappingURL=ZAB5SOZP.js.map

package/dist/__chunks/ZAB5SOZP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport TabInternal from \"./TabInternal\";\nimport classnames from \"classnames\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\ntype TabLinkProps = ComponentProps<typeof TabInternal> & {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The link that the Tab should route to.\n   *\n   */\n  href: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      on = \"lightBackground\",\n      onClick,\n      selected,\n      endContent,\n      itemCount,\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <div\n        role=\"tab\"\n        className={classnames({\n          [styles.unselectedTab]: !selected,\n          [styles.selectedTabOnLightBackground]:\n            selected && on === \"lightBackground\",\n          [styles.selectedTabDarkBackground]:\n            selected && on === \"darkBackground\",\n        })}\n        style={{\n          height: \"100%\",\n        }}\n      >\n        <Box display=\"flex\" alignItems=\"center\" height=\"100%\">\n          <a\n            href={href}\n            data-testid={dataTestId}\n            target={target}\n            ref={ref}\n            rel={rel}\n            onClick={onClick}\n            className={styles.link}\n          >\n            <TabInternal\n              text={text}\n              selected={selected}\n              endContent={endContent}\n              itemCount={itemCount}\n              on={on}\n            />\n          </a>\n        </Box>\n      </div>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n\nexport default TabLink;\n"],"mappings":";;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AAEP,OAAO,gBAAgB;AAsEX;AAxCZ,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW;AAAA,UACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,UACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,UACrB,CAAC,oBAAO,yBAAyB,GAC/B,YAAY,OAAO;AAAA,QACvB,CAAC;AAAA,QACD,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QAEA,8BAAC,eAAI,SAAQ,QAAO,YAAW,UAAS,QAAO,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,oBAAO;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}

package/dist/index.cjs

@@ -31,10 +31,10 @@ var _X34FPOWIcjs = require('./__chunks/X34FPOWI.cjs');
 var _V4M5XFJNcjs = require('./__chunks/V4M5XFJN.cjs');
 
 
-var _XCOZDXFIcjs = require('./__chunks/XCOZDXFI.cjs');
+var _I7BXC2FHcjs = require('./__chunks/I7BXC2FH.cjs');
 
 
-var _6SSJ3CDBcjs = require('./__chunks/6SSJ3CDB.cjs');
+var _RD4EXZDZcjs = require('./__chunks/RD4EXZDZ.cjs');
 
 
 var _LNLOBEMHcjs = require('./__chunks/LNLOBEMH.cjs');
@@ -43,7 +43,7 @@ require('./__chunks/J27AGJQB.cjs');
 
 
 var _PIQO2LH2cjs = require('./__chunks/PIQO2LH2.cjs');
-require('./__chunks/YABPX4OU.cjs');
+require('./__chunks/RU5JUMYC.cjs');
 require('./__chunks/5CSS7BNE.cjs');
 
 
@@ -78,9 +78,9 @@ var _6AOPOPJTcjs = require('./__chunks/6AOPOPJT.cjs');
 require('./__chunks/WFVGNGEP.cjs');
 
 
-var _JQ6MLSETcjs = require('./__chunks/JQ6MLSET.cjs');
-require('./__chunks/VFJQUEUD.cjs');
-require('./__chunks/AOBL3JUX.cjs');
+var _ONTB6T6Kcjs = require('./__chunks/ONTB6T6K.cjs');
+require('./__chunks/MDQYGGZO.cjs');
+require('./__chunks/J7224OUT.cjs');
 
 
 var _3UEOKPM2cjs = require('./__chunks/3UEOKPM2.cjs');
@@ -145,5 +145,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _RC7EMZ6Ncjs.Avatar_default; exports.AvatarGroup = _5COVOOB3cjs.AvatarGroup; exports.Badge = _M7KSUTKJcjs.Badge_default; exports.Box = _KJLBDAZHcjs.Box_default; exports.Button = _OY5QYJVAcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _G63LXNMKcjs.Card; exports.Checkbox = _CDU5TH7Ycjs.Checkbox_default; exports.Chip = _NJ7VV2CHcjs.Chip_default; exports.Divider = _42SRFCQLcjs.Divider; exports.Heading = _ZJS5MEKEcjs.Heading_default; exports.Icon = _V4M5XFJNcjs.Icon_default; exports.IconButton = _PIQO2LH2cjs.IconButton_default; exports.LinkButton = _X34FPOWIcjs.LinkButton_default; exports.Modal = _HM6JHSTRcjs.Modal; exports.Popover = _LNLOBEMHcjs.Popover_default; exports.RadioButton = _JAW252M7cjs.RadioButton_default; exports.RichSelectList = _6SSJ3CDBcjs.RichSelectList_default; exports.SelectList = _XCOZDXFIcjs.SelectList; exports.Tabs = _JQ6MLSETcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _6AOPOPJTcjs.TextArea_default; exports.TextField = _NVHCU2COcjs.TextField; exports.ThemeProvider = _7JET5NNKcjs.ThemeProvider; exports.Tooltip = _JEP2SN7Wcjs.Tooltip_default; exports.Typography = _3BGIBVCRcjs.Typography_default;
+exports.Avatar = _RC7EMZ6Ncjs.Avatar_default; exports.AvatarGroup = _5COVOOB3cjs.AvatarGroup; exports.Badge = _M7KSUTKJcjs.Badge_default; exports.Box = _KJLBDAZHcjs.Box_default; exports.Button = _OY5QYJVAcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _G63LXNMKcjs.Card; exports.Checkbox = _CDU5TH7Ycjs.Checkbox_default; exports.Chip = _NJ7VV2CHcjs.Chip_default; exports.Divider = _42SRFCQLcjs.Divider; exports.Heading = _ZJS5MEKEcjs.Heading_default; exports.Icon = _V4M5XFJNcjs.Icon_default; exports.IconButton = _PIQO2LH2cjs.IconButton_default; exports.LinkButton = _X34FPOWIcjs.LinkButton_default; exports.Modal = _HM6JHSTRcjs.Modal; exports.Popover = _LNLOBEMHcjs.Popover_default; exports.RadioButton = _JAW252M7cjs.RadioButton_default; exports.RichSelectList = _RD4EXZDZcjs.RichSelectList_default; exports.SelectList = _I7BXC2FHcjs.SelectList; exports.Tabs = _ONTB6T6Kcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _6AOPOPJTcjs.TextArea_default; exports.TextField = _NVHCU2COcjs.TextField; exports.ThemeProvider = _7JET5NNKcjs.ThemeProvider; exports.Tooltip = _JEP2SN7Wcjs.Tooltip_default; exports.Typography = _3BGIBVCRcjs.Typography_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -31,10 +31,10 @@ import {
 } from "./__chunks/K2RGVD55.js";
 import {
   SelectList
-} from "./__chunks/WFV332GO.js";
+} from "./__chunks/YPL2E6XO.js";
 import {
   RichSelectList_default
-} from "./__chunks/DQYOOTXB.js";
+} from "./__chunks/7PXG7CRK.js";
 import {
   Popover_default
 } from "./__chunks/ZYWRMB4F.js";
@@ -43,7 +43,7 @@ import "./__chunks/5HEC7ASW.js";
 import {
   IconButton_default
 } from "./__chunks/T6T5FJWJ.js";
-import "./__chunks/Z6GHCMWB.js";
+import "./__chunks/CUUBDICM.js";
 import "./__chunks/5RXHG6S5.js";
 import {
   Button_default
@@ -78,9 +78,9 @@ import {
 import "./__chunks/4U4UW4AK.js";
 import {
   Tabs
-} from "./__chunks/GZXNR3JK.js";
-import "./__chunks/LMZJHS5E.js";
-import "./__chunks/VC5WSVCY.js";
+} from "./__chunks/4DZD4SDJ.js";
+import "./__chunks/ZAB5SOZP.js";
+import "./__chunks/OMWNK5SA.js";
 import {
   TapArea_default
 } from "./__chunks/77FFPQY6.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "15.4.0",
+  "version": "15.6.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -28,8 +28,8 @@
     "react": "18.2.0",
     "tsup": "6.7.0",
     "typescript": "5.0.4",
-    "@cambly/syntax-tsconfig": "1.4.1",
-    "@cambly/eslint-config-syntax": "1.4.0"
+    "@cambly/eslint-config-syntax": "1.4.0",
+    "@cambly/syntax-tsconfig": "1.4.1"
   },
   "publishConfig": {
     "access": "public"

package/dist/__chunks/6SSJ3CDB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","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            >\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\"}"]}

package/dist/__chunks/AOBL3JUX.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Tabs/TabButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AAmDb;AA7CK,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AACF,GAaiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,QACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,QACrB,CAAC,oBAAO,2BAA2B,GACjC,YAAY,OAAO;AAAA,MACvB,CAAC;AAAA,MACD,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,8BAAC,eAAI,SAAQ,QAAO,WAAU,OAAM,YAAW,UAAS,QAAO,QAC7D;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA,UAAS;AAAA,UACT,eAAa;AAAA,UACb;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ","sourcesContent":["import { type ReactElement, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\nimport TapArea from \"../TapArea/TapArea\";\nimport TabInternal from \"./TabInternal\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\nexport default function TabButton({\n  text,\n  onClick,\n  selected,\n  endContent,\n  itemCount,\n  accessibilityLabel,\n  \"data-testid\": dataTestId,\n  on,\n}: ComponentProps<typeof TabInternal> & {\n  /**\n   * The onClick event for the button\n   */\n  onClick: () => void;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <div\n      role=\"tab\"\n      className={classnames({\n        [styles.unselectedTab]: !selected,\n        [styles.selectedTabOnLightBackground]:\n          selected && on === \"lightBackground\",\n        [styles.selectedTabOnDarkBackground]:\n          selected && on === \"darkBackground\",\n      })}\n      style={{\n        height: \"100%\",\n      }}\n    >\n      <Box display=\"flex\" direction=\"row\" alignItems=\"center\" height=\"100%\">\n        <TapArea\n          fullWidth={false}\n          onClick={onClick}\n          rounding=\"md\"\n          data-testid={dataTestId}\n          accessibilityLabel={accessibilityLabel}\n        >\n          <TabInternal\n            text={text}\n            selected={selected}\n            endContent={endContent}\n            itemCount={itemCount}\n            on={on}\n          />\n        </TapArea>\n      </Box>\n    </div>\n  );\n}\n"]}

package/dist/__chunks/DQYOOTXB.js.map

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

package/dist/__chunks/LMZJHS5E.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport TabInternal from \"./TabInternal\";\nimport classnames from \"classnames\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\ntype TabLinkProps = ComponentProps<typeof TabInternal> & {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The link that the Tab should route to.\n   *\n   */\n  href: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      on,\n      onClick,\n      selected,\n      endContent,\n      itemCount,\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <div\n        role=\"tab\"\n        className={classnames({\n          [styles.unselectedTab]: !selected,\n          [styles.selectedTabOnLightBackground]:\n            selected && on === \"lightBackground\",\n          [styles.selectedTabDarkBackground]:\n            selected && on === \"darkBackground\",\n        })}\n        style={{\n          height: \"100%\",\n        }}\n      >\n        <Box display=\"flex\" alignItems=\"center\" height=\"100%\">\n          <a\n            href={href}\n            data-testid={dataTestId}\n            target={target}\n            ref={ref}\n            rel={rel}\n            onClick={onClick}\n            className={styles.link}\n          >\n            <TabInternal\n              text={text}\n              selected={selected}\n              endContent={endContent}\n              itemCount={itemCount}\n              on={on}\n            />\n          </a>\n        </Box>\n      </div>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n\nexport default TabLink;\n"],"mappings":";;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AAEP,OAAO,gBAAgB;AAsEX;AAxCZ,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW;AAAA,UACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,UACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,UACrB,CAAC,oBAAO,yBAAyB,GAC/B,YAAY,OAAO;AAAA,QACvB,CAAC;AAAA,QACD,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QAEA,8BAAC,eAAI,SAAQ,QAAO,YAAW,UAAS,QAAO,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,oBAAO;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/VC5WSVCY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Tabs/TabButton.tsx"],"sourcesContent":["import { type ReactElement, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\nimport TapArea from \"../TapArea/TapArea\";\nimport TabInternal from \"./TabInternal\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\nexport default function TabButton({\n  text,\n  onClick,\n  selected,\n  endContent,\n  itemCount,\n  accessibilityLabel,\n  \"data-testid\": dataTestId,\n  on,\n}: ComponentProps<typeof TabInternal> & {\n  /**\n   * The onClick event for the button\n   */\n  onClick: () => void;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <div\n      role=\"tab\"\n      className={classnames({\n        [styles.unselectedTab]: !selected,\n        [styles.selectedTabOnLightBackground]:\n          selected && on === \"lightBackground\",\n        [styles.selectedTabOnDarkBackground]:\n          selected && on === \"darkBackground\",\n      })}\n      style={{\n        height: \"100%\",\n      }}\n    >\n      <Box display=\"flex\" direction=\"row\" alignItems=\"center\" height=\"100%\">\n        <TapArea\n          fullWidth={false}\n          onClick={onClick}\n          rounding=\"md\"\n          data-testid={dataTestId}\n          accessibilityLabel={accessibilityLabel}\n        >\n          <TabInternal\n            text={text}\n            selected={selected}\n            endContent={endContent}\n            itemCount={itemCount}\n            on={on}\n          />\n        </TapArea>\n      </Box>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AAmDb;AA7CK,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AACF,GAaiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,QACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,QACrB,CAAC,oBAAO,2BAA2B,GACjC,YAAY,OAAO;AAAA,MACvB,CAAC;AAAA,MACD,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,8BAAC,eAAI,SAAQ,QAAO,WAAU,OAAM,YAAW,UAAS,QAAO,QAC7D;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA,UAAS;AAAA,UACT,eAAa;AAAA,UACb;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/VFJQUEUD.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AAEP,OAAO,gBAAgB;AAsEX;AAxCZ,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW;AAAA,UACpB,CAAC,oBAAO,aAAa,GAAG,CAAC;AAAA,UACzB,CAAC,oBAAO,4BAA4B,GAClC,YAAY,OAAO;AAAA,UACrB,CAAC,oBAAO,yBAAyB,GAC/B,YAAY,OAAO;AAAA,QACvB,CAAC;AAAA,QACD,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QAEA,8BAAC,eAAI,SAAQ,QAAO,YAAW,UAAS,QAAO,QAC7C;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,oBAAO;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ","sourcesContent":["import {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport TabInternal from \"./TabInternal\";\nimport classnames from \"classnames\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\ntype TabLinkProps = ComponentProps<typeof TabInternal> & {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The link that the Tab should route to.\n   *\n   */\n  href: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      on,\n      onClick,\n      selected,\n      endContent,\n      itemCount,\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <div\n        role=\"tab\"\n        className={classnames({\n          [styles.unselectedTab]: !selected,\n          [styles.selectedTabOnLightBackground]:\n            selected && on === \"lightBackground\",\n          [styles.selectedTabDarkBackground]:\n            selected && on === \"darkBackground\",\n        })}\n        style={{\n          height: \"100%\",\n        }}\n      >\n        <Box display=\"flex\" alignItems=\"center\" height=\"100%\">\n          <a\n            href={href}\n            data-testid={dataTestId}\n            target={target}\n            ref={ref}\n            rel={rel}\n            onClick={onClick}\n            className={styles.link}\n          >\n            <TabInternal\n              text={text}\n              selected={selected}\n              endContent={endContent}\n              itemCount={itemCount}\n              on={on}\n            />\n          </a>\n        </Box>\n      </div>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n\nexport default TabLink;\n"]}