@cambly/syntax-core 20.6.0 → 21.0.0

package/dist/__chunks/5JUNB754.cjs

@@ -1,15 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// src/Button/constants/textVariant.ts
-var textVariant = {
-  sm: 100,
-  md: 200,
-  lg: 300,
-  xl: 500
-};
-var textVariant_default = textVariant;
-
-
-
-exports.textVariant_default = textVariant_default;
-//# sourceMappingURL=5JUNB754.cjs.map

package/dist/__chunks/5JUNB754.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"names":[],"mappings":";;;AAAA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAO,sBAAQ","sourcesContent":["const textVariant = {\n  sm: 100,\n  md: 200,\n  lg: 300,\n  xl: 500,\n} as const;\n\nexport default textVariant;\n"]}

package/dist/__chunks/67K5GWKL.cjs

@@ -1,143 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-var _JVGX637Ecjs = require('./JVGX637E.cjs');
-
-
-
-
-var _XJVLA3PAcjs = require('./XJVLA3PA.cjs');
-
-
-var _XLUVINJWcjs = require('./XLUVINJW.cjs');
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-
-var _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
-
-
-var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
-
-
-var _NOELZTQXcjs = require('./NOELZTQX.cjs');
-
-// src/SelectList/SelectList.tsx
-
-
-
-var _react = require('react');
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-
-// css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_p5tv4_1", "opacityOverlay": "_opacityOverlay_p5tv4_7", "selectWrapper": "_selectWrapper_p5tv4_11", "selectBox": "_selectBox_p5tv4_16", "selectBoxCambio": "_selectBoxCambio_p5tv4_30", "selectMouseFocusStyling": "_selectMouseFocusStyling_p5tv4_38", "unselected": "_unselected_p5tv4_43", "selected": "_selected_p5tv4_47", "darkBackground": "_darkBackground_p5tv4_51", "arrowIcon": "_arrowIcon_p5tv4_63", "selectErrorCambio": "_selectErrorCambio_p5tv4_77", "selectColorwhite": "_selectColorwhite_p5tv4_83", "transparentInputError": "_transparentInputError_p5tv4_89", "transparenInputError": "_transparenInputError_p5tv4_94" };
-
-// src/SelectList/SelectList.tsx
-var _jsxruntime = require('react/jsx-runtime');
-function SelectList({
-  children,
-  "data-testid": dataTestId,
-  disabled: disabledProp = false,
-  errorText,
-  helperText,
-  id,
-  label,
-  on,
-  onChange,
-  onClick,
-  placeholderText,
-  selectedValue = ""
-}) {
-  const reactId = _react.useId.call(void 0, );
-  const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-  const disabled = !isHydrated || disabledProp;
-  const selectId = id != null ? id : reactId;
-  const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
-  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
-  const textColor = on === "darkBackground" ? "white" : "gray900";
-  const errorTextColor = on !== "darkBackground" ? "destructive-lightBackground" : "destructive-darkBackground";
-  const handleKeyDown = (event) => {
-    if (disabled || onClick == null)
-      return;
-    if (event.key === "Enter" || event.key === " " || event.key === "Space") {
-      onClick(event);
-    }
-  };
-  const getArrowIconColor = () => {
-    if (errorText) {
-      return _XJVLA3PAcjs.ColorBaseDestructive700;
-    } else {
-      if (on === "darkBackground") {
-        return _XJVLA3PAcjs.ColorCambioWhite100;
-      } else {
-        return _XJVLA3PAcjs.ColorBaseGray700;
-      }
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled
-      }),
-      children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size: 100, color: textColor, children: label }) }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "select",
-            {
-              id: selectId,
-              "data-testid": dataTestId,
-              disabled,
-              className: _classnames2.default.call(void 0, SelectList_module_default.selectBox, SelectList_module_default.selectBoxCambio, {
-                [SelectList_module_default.unselected]: !selectedValue && !errorText,
-                [SelectList_module_default.selected]: selectedValue && !errorText,
-                [SelectList_module_default.selectErrorCambio]: errorText && on === "lightBackground",
-                [SelectList_module_default.transparentInputError]: errorText && on === "darkBackground",
-                [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-                // for focus keyboard
-                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible,
-                // for focus mouse
-                [SelectList_module_default.darkBackground]: on === "darkBackground"
-              }),
-              onChange,
-              onClick,
-              onKeyDown: handleKeyDown,
-              value: placeholderText && !selectedValue ? placeholderText : selectedValue,
-              onFocus: () => setIsFocused(true),
-              onBlur: () => setIsFocused(false),
-              children: [
-                placeholderText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { disabled: true, value: placeholderText, children: placeholderText }),
-                children
-              ]
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "svg",
-            {
-              focusable: "false",
-              "aria-hidden": "true",
-              viewBox: "0 0 24 24",
-              width: 24,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
-                {
-                  fill: getArrowIconColor(),
-                  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"
-                }
-              )
-            }
-          ) })
-        ] }),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size: 100, color: errorText ? errorTextColor : textColor, children: errorText ? errorText : helperText }) })
-      ]
-    }
-  );
-}
-SelectList.Option = _JVGX637Ecjs.SelectOption_default;
-
-
-
-exports.SelectList = SelectList;
-//# sourceMappingURL=67K5GWKL.cjs.map

package/dist/__chunks/67K5GWKL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray700,\n  ColorCambioWhite100,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  on,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Indicate whether the component renders on a light or dark background. Changes the color of the text\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLSelectElement>) => void;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLSelectElement> = (\n    event,\n  ) => {\n    if (disabled || onClick == null) return;\n    if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n      onClick(event);\n    }\n  };\n\n  const getArrowIconColor = () => {\n    if (errorText) {\n      return ColorBaseDestructive700;\n    } else {\n      if (on === \"darkBackground\") {\n        return ColorCambioWhite100;\n      } else {\n        return ColorBaseGray700;\n      }\n    }\n  };\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color={textColor}>\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles.selectBoxCambio, {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectErrorCambio]: errorText && on === \"lightBackground\",\n            [styles.transparentInputError]:\n              errorText && on === \"darkBackground\",\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            [styles.darkBackground]: on === \"darkBackground\",\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={24}\n          >\n            <path\n              fill={getArrowIconColor()}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography size={100} color={errorText ? errorTextColor : textColor}>\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_p5tv4_1\",\"opacityOverlay\":\"_opacityOverlay_p5tv4_7\",\"selectWrapper\":\"_selectWrapper_p5tv4_11\",\"selectBox\":\"_selectBox_p5tv4_16\",\"selectBoxCambio\":\"_selectBoxCambio_p5tv4_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_p5tv4_38\",\"unselected\":\"_unselected_p5tv4_43\",\"selected\":\"_selected_p5tv4_47\",\"darkBackground\":\"_darkBackground_p5tv4_51\",\"arrowIcon\":\"_arrowIcon_p5tv4_63\",\"selectErrorCambio\":\"_selectErrorCambio_p5tv4_77\",\"selectColorwhite\":\"_selectColorwhite_p5tv4_83\",\"transparentInputError\":\"_transparentInputError_p5tv4_89\",\"transparenInputError\":\"_transparenInputError_p5tv4_94\"}"]}

package/dist/__chunks/6KSVCCCB.cjs

@@ -1,38 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-// css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_6o6o0_1", "horizontal": "_horizontal_6o6o0_5", "vertical": "_vertical_6o6o0_9", "smallGap": "_smallGap_6o6o0_13", "mediumGap": "_mediumGap_6o6o0_17", "largeGap": "_largeGap_6o6o0_21", "orientationhorizontalSmall": "_orientationhorizontalSmall_6o6o0_27", "orientationverticalSmall": "_orientationverticalSmall_6o6o0_31", "orientationhorizontalLarge": "_orientationhorizontalLarge_6o6o0_38", "orientationverticalLarge": "_orientationverticalLarge_6o6o0_42" };
-
-// src/ButtonGroup/ButtonGroup.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _jsxruntime = require('react/jsx-runtime');
-var gap = {
-  sm: ButtonGroup_module_default.smallGap,
-  md: ButtonGroup_module_default.mediumGap,
-  lg: ButtonGroup_module_default.largeGap
-};
-var ButtonGroup = ({
-  orientation = "horizontal",
-  size = "md",
-  children,
-  smOrientation,
-  lgOrientation
-}) => {
-  const classnames = _classnames2.default.call(void 0, 
-    ButtonGroup_module_default.buttonGroup,
-    gap[size],
-    smOrientation != null && ButtonGroup_module_default[`orientation${smOrientation}Small`],
-    lgOrientation != null && ButtonGroup_module_default[`orientation${lgOrientation}Large`],
-    {
-      [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
-      [ButtonGroup_module_default.vertical]: orientation === "vertical"
-    }
-  );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classnames, children });
-};
-var ButtonGroup_default = ButtonGroup;
-
-
-
-exports.ButtonGroup_default = ButtonGroup_default;
-//# sourceMappingURL=6KSVCCCB.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./ButtonGroup.module.css#css-module","../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;AAAsG,IAAO,6BAAQ,EAAC,eAAc,wBAAuB,cAAa,uBAAsB,YAAW,qBAAoB,YAAW,sBAAqB,aAAY,uBAAsB,YAAW,sBAAqB,8BAA6B,wCAAuC,4BAA2B,sCAAqC,8BAA6B,wCAAuC,4BAA2B,qCAAoC;;;ACGtkB,OAAO,gBAAgB;AA8Dd;AA5DT,IAAM,MAAM;AAAA,EACV,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AACb;AAKA,IAAM,cAAc,CAAC;AAAA,EACnB,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAiCoB;AAClB,QAAM,aAAa;AAAA,IACjB,2BAAO;AAAA,IACP,IAAI,IAAI;AAAA,IACR,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE;AAAA,MACE,CAAC,2BAAO,UAAU,GAAG,gBAAgB;AAAA,MACrC,CAAC,2BAAO,QAAQ,GAAG,gBAAgB;AAAA,IACrC;AAAA,EACF;AAEA,SAAO,oBAAC,SAAI,WAAW,YAAa,UAAS;AAC/C;AAEA,IAAO,sBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_6o6o0_1\",\"horizontal\":\"_horizontal_6o6o0_5\",\"vertical\":\"_vertical_6o6o0_9\",\"smallGap\":\"_smallGap_6o6o0_13\",\"mediumGap\":\"_mediumGap_6o6o0_17\",\"largeGap\":\"_largeGap_6o6o0_21\",\"orientationhorizontalSmall\":\"_orientationhorizontalSmall_6o6o0_27\",\"orientationverticalSmall\":\"_orientationverticalSmall_6o6o0_31\",\"orientationhorizontalLarge\":\"_orientationhorizontalLarge_6o6o0_38\",\"orientationverticalLarge\":\"_orientationverticalLarge_6o6o0_42\"}","import { type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { type Size } from \"../constants\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  sm: styles.smallGap,\n  md: styles.mediumGap,\n  lg: styles.largeGap,\n} as const;\n\n/**\n * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.\n */\nconst ButtonGroup = ({\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n  smOrientation,\n  lgOrientation,\n}: {\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   *\n   * Responsive props:\n   * `smOrientation`\n   * `lgOrientation`\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group defines the spacing between each button\n   *\n   * * `sm`: 4px\n   * * `md`: 8px\n   * * `lg`: 12px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n  /**\n   * Bottom margin on sm (480px) or larger viewports.\n   */\n  smOrientation?: typeof orientation;\n  /**\n   * Bottom margin on lg (960px) or larger viewports.\n   */\n  lgOrientation?: typeof orientation;\n}): ReactElement => {\n  const classnames = classNames(\n    styles.buttonGroup,\n    gap[size],\n    smOrientation != null && styles[`orientation${smOrientation}Small`],\n    lgOrientation != null && styles[`orientation${lgOrientation}Large`],\n    {\n      [styles.horizontal]: orientation === \"horizontal\",\n      [styles.vertical]: orientation === \"vertical\",\n    },\n  );\n\n  return <div className={classnames}>{children}</div>;\n};\n\nexport default ButtonGroup;\n"]}

package/dist/__chunks/7DGFMDT7.cjs

@@ -1,9 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// css-module:../Tabs/Tabs.module.css#css-module
-var Tabs_module_default = { "tabContainerlightBackground": "_tabContainerlightBackground_b6c60_1", "tabContainerDarkBackground": "_tabContainerDarkBackground_b6c60_5", "tab": "_tab_b6c60_1", "selectedTabOnLightBackground": "_selectedTabOnLightBackground_b6c60_13", "selectedTabOnDarkBackground": "_selectedTabOnDarkBackground_b6c60_17", "unselectedTab": "_unselectedTab_b6c60_21", "link": "_link_b6c60_25" };
-
-
-
-exports.Tabs_module_default = Tabs_module_default;
-//# sourceMappingURL=7DGFMDT7.cjs.map

package/dist/__chunks/7DGFMDT7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:../Tabs/Tabs.module.css#css-module"],"names":[],"mappings":";;;AAAwF,IAAO,sBAAQ,EAAC,+BAA8B,wCAAuC,8BAA6B,uCAAsC,OAAM,gBAAe,gCAA+B,0CAAyC,+BAA8B,yCAAwC,iBAAgB,2BAA0B,QAAO,iBAAgB","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tabs/Tabs.module.css\"; export default {\"tabContainerlightBackground\":\"_tabContainerlightBackground_b6c60_1\",\"tabContainerDarkBackground\":\"_tabContainerDarkBackground_b6c60_5\",\"tab\":\"_tab_b6c60_1\",\"selectedTabOnLightBackground\":\"_selectedTabOnLightBackground_b6c60_13\",\"selectedTabOnDarkBackground\":\"_selectedTabOnDarkBackground_b6c60_17\",\"unselectedTab\":\"_unselectedTab_b6c60_21\",\"link\":\"_link_b6c60_25\"}"]}

package/dist/__chunks/7KH536I2.cjs

@@ -1,32 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-// src/Modal/Layer.tsx
-var _reactdom = require('react-dom');
-var _jsxruntime = require('react/jsx-runtime');
-function Layer({
-  children,
-  zIndex = 1
-}) {
-  return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _QODNNCT2cjs.Box_default,
-      {
-        "data-testid": "syntax-layer",
-        position: "fixed",
-        dangerouslySetInlineStyle: {
-          __style: { zIndex, inset: 0 }
-        },
-        children
-      }
-    ),
-    document.body
-  ) : null;
-}
-
-
-
-exports.Layer = Layer;
-//# sourceMappingURL=7KH536I2.cjs.map

package/dist/__chunks/7KH536I2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Modal/Layer.tsx"],"names":[],"mappings":";;;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN","sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n  children,\n  zIndex = 1,\n}: {\n  children: ReactElement;\n  zIndex?: number;\n}): ReactPortal | null {\n  return typeof document !== \"undefined\"\n    ? createPortal(\n        <Box\n          data-testid=\"syntax-layer\"\n          position=\"fixed\"\n          dangerouslySetInlineStyle={{\n            __style: { zIndex, inset: 0 },\n          }}\n        >\n          {children}\n        </Box>,\n        document.body,\n      )\n    : null;\n}\n"]}

package/dist/__chunks/A3B4YKGN.cjs

@@ -1,28 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-var _2XIVACBMcjs = require('./2XIVACBM.cjs');
-
-// css-module:./Divider.module.css#css-module
-var Divider_module_default = { "divider": "_divider_1uaon_1", "dividerClassic": "_dividerClassic_1uaon_9" };
-
-// src/Divider/Divider.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _jsxruntime = require('react/jsx-runtime');
-function Divider() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "hr",
-    {
-      className: _classnames2.default.call(void 0, 
-        Divider_module_default.divider,
-        _2XIVACBMcjs.colors_module_default.cambioGray370BackgroundColor
-      )
-    }
-  );
-}
-Divider.displayName = "Divider";
-
-
-
-exports.Divider = Divider;
-//# sourceMappingURL=A3B4YKGN.cjs.map

package/dist/__chunks/A3B4YKGN.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;AAA8F,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,kBAAiB,0BAAyB;;;ACCrL,OAAO,gBAAgB;AAQnB;AAFW,SAAR,UAA+C;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,uBAAO;AAAA,QACP,sBAAY;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1uaon_1\",\"dividerClassic\":\"_dividerClassic_1uaon_9\"}","import styles from \"./Divider.module.css\";\nimport classNames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  return (\n    <hr\n      className={classNames(\n        styles.divider,\n        colorStyles.cambioGray370BackgroundColor,\n      )}\n    />\n  );\n}\n\nDivider.displayName = \"Divider\";\n"]}

package/dist/__chunks/AFOQ6JVB.cjs

@@ -1,211 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _6KSVCCCBcjs = require('./6KSVCCCB.cjs');
-
-
-var _BVNFNAUOcjs = require('./BVNFNAUO.cjs');
-
-
-var _A3B4YKGNcjs = require('./A3B4YKGN.cjs');
-
-
-var _VDLYCYDQcjs = require('./VDLYCYDQ.cjs');
-
-
-var _WKADTHRKcjs = require('./WKADTHRK.cjs');
-
-
-var _J2QDHB6Icjs = require('./J2QDHB6I.cjs');
-
-
-
-var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-// src/RichSelect/RichSelectBox.tsx
-
-
-
-
-
-
-
-var _react = require('react');
-var _reactariacomponents = require('react-aria-components');
-var _utils = require('@react-stately/utils');
-var _jsxruntime = require('react/jsx-runtime');
-function isString(val) {
-  return typeof val === "string";
-}
-function isEqualSelection(set1, set2) {
-  if (set1 === set2)
-    return true;
-  if (!set1 && !set2)
-    return true;
-  if (!set1 || !set2)
-    return false;
-  if (isString(set1))
-    return set1 === set2;
-  if (isString(set2))
-    return false;
-  if (set1.size !== set2.size)
-    return false;
-  for (const item of set1) {
-    if (!set2.has(item))
-      return false;
-  }
-  return true;
-}
-function convertSelection(selection, defaultValue) {
-  if (!selection)
-    return defaultValue;
-  if (selection === "all")
-    return "all";
-  return new Set(selection);
-}
-var RichSelectBoxContext = _react.createContext.call(void 0, {});
-var RichSelectBox = _react.forwardRef.call(void 0, 
-  function RichSelectBox2(props, ref) {
-    const {
-      accessibilityLabel,
-      autosave,
-      children,
-      "data-testid": dataTestId,
-      multiple = false,
-      onChange,
-      primaryButtonText,
-      primaryButtonAccessibilityLabel,
-      secondaryButtonText,
-      secondaryButtonAccessibilityLabel,
-      selectedValues: selectedValuesProp,
-      defaultSelectedValues: defaultSelectedValuesProp
-    } = props;
-    const selectedKeysProp = _react.useMemo.call(void 0, 
-      () => convertSelection(selectedValuesProp),
-      [selectedValuesProp]
-    );
-    const defaultSelectedKeys = _react.useMemo.call(void 0, 
-      () => convertSelection(defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
-      [defaultSelectedValuesProp]
-    );
-    const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
-      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
-      defaultSelectedKeys,
-      (value) => {
-        if (isEqualSelection(value, selectedKeys))
-          return;
-        if (value === "all")
-          return onChange("all");
-        onChange([...value].map(String));
-      }
-    );
-    const [stagedKeys, setStagedKeys] = _react.useState.call(void 0, 
-      selectedKeys
-    );
-    const saveChanges = () => setSelectedKeys(stagedKeys);
-    const clearChanges = () => setStagedKeys(/* @__PURE__ */ new Set());
-    const stageChanges = (selectedValues) => {
-      setStagedKeys(selectedValues);
-      if (autosave)
-        setSelectedKeys(selectedValues);
-    };
-    const [disabledKeysComposed, setDisabledKeysComposed] = _react.useState.call(void 0, 
-      /* @__PURE__ */ new Set()
-    );
-    const disableKey = _react.useCallback.call(void 0, (key, _disabled) => {
-      setDisabledKeysComposed((keys) => {
-        if (keys.has(key) === _disabled)
-          return keys;
-        _disabled ? keys.add(key) : keys.delete(key);
-        return new Set(keys);
-      });
-    }, []);
-    const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _reactariacomponents.ListBox,
-        {
-          ref,
-          "aria-label": accessibilityLabel,
-          autoFocus,
-          selectionMode: multiple ? "multiple" : "single",
-          selectionBehavior: multiple ? "toggle" : "replace",
-          shouldFocusWrap: true,
-          orientation: "horizontal",
-          selectedKeys: stagedKeys,
-          onSelectionChange: stageChanges,
-          disabledKeys: disabledKeysComposed,
-          className: _RYUXG4AScjs.RichSelect_module_default.richSelectBox,
-          children
-        }
-      ),
-      !autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _QODNNCT2cjs.Box_default,
-        {
-          backgroundColor: "white",
-          display: "flex",
-          direction: "column",
-          gap: 5,
-          marginTop: 5,
-          justifyContent: "end",
-          position: "sticky",
-          dangerouslySetInlineStyle: {
-            __style: {
-              bottom: 0
-            }
-          },
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _A3B4YKGNcjs.Divider, {}) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _QODNNCT2cjs.Box_default,
-              {
-                paddingY: 5,
-                marginTop: -5,
-                display: "flex",
-                justifyContent: "end",
-                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _6KSVCCCBcjs.ButtonGroup_default, { orientation: "horizontal", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _BVNFNAUOcjs.Button_default,
-                    {
-                      onClick: clearChanges,
-                      color: "secondary",
-                      text: secondaryButtonText,
-                      accessibilityLabel: secondaryButtonAccessibilityLabel,
-                      "data-testid": [dataTestId, "secondary-button"].filter(Boolean).join("-")
-                    }
-                  ),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _BVNFNAUOcjs.Button_default,
-                    {
-                      onClick: saveChanges,
-                      text: primaryButtonText,
-                      accessibilityLabel: primaryButtonAccessibilityLabel,
-                      color: "primary",
-                      "data-testid": [dataTestId, "primary-button"].filter(Boolean).join("-")
-                    }
-                  )
-                ] })
-              }
-            )
-          ]
-        }
-      )
-    ] }) });
-  }
-);
-var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _VDLYCYDQcjs.RichSelectSection_default,
-  Chip: _J2QDHB6Icjs.RichSelectChip_default,
-  RadioButton: _WKADTHRKcjs.RichSelectRadioButton_default
-});
-
-
-
-
-
-exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=AFOQ6JVB.cjs.map

package/dist/__chunks/AFOQ6JVB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectBox.tsx"],"names":["RichSelectBox"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  useContext,\n  useState,\n  useCallback,\n  createContext,\n  useMemo,\n} from \"react\";\nimport { ListBox as ReactAriaListBox } from \"react-aria-components\";\nimport { type Key } from \"react-aria\";\nimport { type Selection } from \"react-stately\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { RichSelectItemContext } from \"./RichSelectItem\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport Button from \"../Button/Button\";\nimport styles from \"./RichSelect.module.css\";\nimport Box from \"../Box/Box\";\nimport Divider from \"../Divider/Divider\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\n\ntype RichSelectChild =\n  | ReactElement<typeof RichSelectChip>\n  | ReactElement<typeof RichSelectRadioButton>\n  | ReactElement<typeof RichSelectSection>;\n\nfunction isString(val: unknown): val is string {\n  return typeof val === \"string\";\n}\n\nfunction isEqualSelection(set1?: Selection, set2?: Selection): boolean {\n  if (set1 === set2) return true;\n  if (!set1 && !set2) return true;\n  if (!set1 || !set2) return false;\n  if (isString(set1)) return set1 === set2;\n  if (isString(set2)) return false;\n  if (set1.size !== set2.size) return false;\n  for (const item of set1) {\n    if (!set2.has(item)) return false;\n  }\n  return true;\n}\n\nexport function convertSelection(\n  selection: \"all\" | Iterable<Key> | undefined,\n  defaultValue?: \"all\" | Set<Key>,\n): \"all\" | Set<Key> | undefined {\n  if (!selection) return defaultValue;\n  if (selection === \"all\") return \"all\";\n  return new Set(selection);\n}\n\nexport type RichSelectBoxProps = {\n  /** aria-label for the list box */\n  accessibilityLabel: string;\n  /** Automatically saves changes when true, shows save/clear buttons when not true */\n  autosave?: boolean;\n  /** Test id for the list box element */\n  \"data-testid\"?: string;\n  /** One or more RichSelectList.<Chip|RadioButton|Section|...> components. */\n  children: RichSelectChild | RichSelectChild[];\n  /** Default selected values */\n  defaultSelectedValues?: Set<Key> | string[] | \"all\";\n  /** Enables multiple selection (multiselect) */\n  multiple?: boolean;\n  /** The callback to be called when options are selected / committed */\n  onChange: (selectedValues: string[] | \"all\") => void;\n  /** Text for primary button (Save). Required: string must be translated */\n  primaryButtonText: string;\n  /** accessibilityLabel for primary Button component (Save). Required: string must be translated */\n  primaryButtonAccessibilityLabel: string;\n  /** Text for primary button (Clear). Required: string must be translated */\n  secondaryButtonText: string;\n  /** accessibilityLabel for secondary Button component (Clear). Required: string must be translated */\n  secondaryButtonAccessibilityLabel: string;\n  /** Value of the currently selected options */\n  selectedValues?: Set<Key> | string[] | \"all\";\n};\n\ntype RichSelectBoxContextType = {\n  /** Automatically focuses RichSelectBox on mount when enabled */\n  autoFocus?: boolean;\n};\nexport const RichSelectBoxContext = createContext<RichSelectBoxContextType>({});\n\n/**\n * [RichSelectBox](https://cambly-syntax.vercel.app/?path=/docs/components-richselectbox--docs) is an element that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectBox\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectBox.Section label=\"Cities\">\n      <RichSelectBox.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectBox.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectBox.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectBox.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectBox.Section>\n  </RichSelectBox>\n ```\n */\nconst RichSelectBox = forwardRef<HTMLDivElement, RichSelectBoxProps>(\n  function RichSelectBox(props, ref): ReactElement {\n    const {\n      accessibilityLabel,\n      autosave,\n      children,\n      \"data-testid\": dataTestId,\n      multiple = false,\n      onChange,\n      primaryButtonText,\n      primaryButtonAccessibilityLabel,\n      secondaryButtonText,\n      secondaryButtonAccessibilityLabel,\n      selectedValues: selectedValuesProp,\n      defaultSelectedValues: defaultSelectedValuesProp,\n    } = props;\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        if (isEqualSelection(value, selectedKeys)) return;\n        // Notify parent about the changes\n        if (value === \"all\") return onChange(\"all\");\n        onChange([...value].map(String));\n      },\n    );\n    const [stagedKeys, setStagedKeys] = useState<Set<Key> | \"all\">(\n      selectedKeys,\n    );\n\n    const saveChanges = () => setSelectedKeys(stagedKeys);\n    const clearChanges = () => setStagedKeys(new Set());\n    const stageChanges = (selectedValues: Selection) => {\n      setStagedKeys(selectedValues);\n      if (autosave) setSelectedKeys(selectedValues);\n    };\n\n    // inject method into context so children can disable themselves\n    // by adding `disabled` attribute (through RichSelectItem)\n    const [disabledKeysComposed, setDisabledKeysComposed] = useState<Set<Key>>(\n      new Set(),\n    );\n    const disableKey = useCallback((key: Key, _disabled: boolean) => {\n      setDisabledKeysComposed((keys) => {\n        if (keys.has(key) === _disabled) return keys;\n        _disabled ? keys.add(key) : keys.delete(key);\n        return new Set(keys);\n      });\n    }, []);\n\n    // higher level context for autoFocus behavior (parent sets when rendering RichSelectBox in overlay)\n    const { autoFocus } = useContext(RichSelectBoxContext);\n\n    return (\n      <RichSelectItemContext.Provider value={{ disableKey }}>\n        <Box>\n          <ReactAriaListBox\n            ref={ref}\n            aria-label={accessibilityLabel}\n            autoFocus={autoFocus}\n            selectionMode={multiple ? \"multiple\" : \"single\"}\n            selectionBehavior={multiple ? \"toggle\" : \"replace\"}\n            shouldFocusWrap={true}\n            orientation=\"horizontal\"\n            selectedKeys={stagedKeys}\n            onSelectionChange={stageChanges}\n            disabledKeys={disabledKeysComposed}\n            className={styles.richSelectBox}\n          >\n            {children}\n          </ReactAriaListBox>\n          {!autosave && (\n            <Box\n              backgroundColor=\"white\"\n              display=\"flex\"\n              direction=\"column\"\n              gap={5}\n              marginTop={5}\n              justifyContent=\"end\"\n              position=\"sticky\"\n              dangerouslySetInlineStyle={{\n                __style: {\n                  bottom: 0,\n                },\n              }}\n            >\n              <Box flex=\"grow\">\n                <Divider />\n              </Box>\n              <Box\n                paddingY={5}\n                marginTop={-5}\n                display=\"flex\"\n                justifyContent=\"end\"\n              >\n                <ButtonGroup orientation=\"horizontal\">\n                  <Button\n                    onClick={clearChanges}\n                    color={\"secondary\"}\n                    text={secondaryButtonText}\n                    accessibilityLabel={secondaryButtonAccessibilityLabel}\n                    data-testid={[dataTestId, \"secondary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                  <Button\n                    onClick={saveChanges}\n                    text={primaryButtonText}\n                    accessibilityLabel={primaryButtonAccessibilityLabel}\n                    color=\"primary\"\n                    data-testid={[dataTestId, \"primary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                </ButtonGroup>\n              </Box>\n            </Box>\n          )}\n        </Box>\n      </RichSelectItemContext.Provider>\n    );\n  },\n);\n\nexport default Object.assign(RichSelectBox, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n"]}