@cambly/syntax-core 20.6.0 → 21.0.0

package/dist/__chunks/JKEJPSO2.cjs

@@ -1,289 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-var _IJHKE2Y3cjs = require('./IJHKE2Y3.cjs');
-
-
-var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
-
-
-
-
-var _XJVLA3PAcjs = require('./XJVLA3PA.cjs');
-
-
-
-
-var _AFOQ6JVBcjs = require('./AFOQ6JVB.cjs');
-
-
-var _VDLYCYDQcjs = require('./VDLYCYDQ.cjs');
-
-
-var _WKADTHRKcjs = require('./WKADTHRK.cjs');
-
-
-var _J2QDHB6Icjs = require('./J2QDHB6I.cjs');
-
-
-var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-
-var _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
-
-
-var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
-
-
-
-
-var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
-
-// src/RichSelect/RichSelectList.tsx
-
-
-
-
-var _react = require('react');
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-
-
-
-var _reactariacomponents = require('react-aria-components');
-var _utils = require('@react-stately/utils');
-var _interactions = require('@react-aria/interactions');
-
-// css-module:../SelectList/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/RichSelect/RichSelectList.tsx
-var _reactaria = require('react-aria');
-var _jsxruntime = require('react/jsx-runtime');
-var NOOP = () => void 0;
-function RichSelectList(props) {
-  const _a = props, {
-    autosave,
-    children,
-    "data-testid": dataTestId,
-    disabled: disabledProp = false,
-    errorText,
-    helperText,
-    label,
-    id,
-    onChange,
-    onClick = NOOP,
-    placeholderText,
-    selectTextValue,
-    selectedValues: selectedValuesProp,
-    defaultSelectedValues: defaultSelectedValuesProp,
-    color = "white"
-  } = _a, richSelectBoxProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, [
-    "autosave",
-    "children",
-    "data-testid",
-    "disabled",
-    "errorText",
-    "helperText",
-    "label",
-    "id",
-    "onChange",
-    "onClick",
-    "placeholderText",
-    "selectTextValue",
-    "selectedValues",
-    "defaultSelectedValues",
-    "color"
-  ]);
-  const reactId = _react.useId.call(void 0, );
-  const inputId = id != null ? id : reactId;
-  const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-  const disabled = !isHydrated || disabledProp;
-  const overlayHandlerRef = _react.useRef.call(void 0, {});
-  const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _AFOQ6JVBcjs.convertSelection.call(void 0, selectedValuesProp),
-    [selectedValuesProp]
-  );
-  const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _AFOQ6JVBcjs.convertSelection.call(void 0, 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) => {
-      var _a2, _b;
-      const _value = value === "all" ? "all" : [...value].map(String);
-      onChange(_value);
-      if (!autosave)
-        (_b = (_a2 = overlayHandlerRef.current).close) == null ? void 0 : _b.call(_a2);
-    }
-  );
-  const selectedTextValue = _react.useMemo.call(void 0, () => {
-    var _a2;
-    if (selectTextValue)
-      return (_a2 = selectTextValue(
-        selectedKeys === "all" ? "all" : [...selectedKeys].map(String)
-      )) != null ? _a2 : placeholderText;
-    if (selectedKeys === "all")
-      return "All selected";
-    if (selectedKeys.size)
-      return `${selectedKeys.size} selected`;
-    return placeholderText;
-  }, [selectTextValue, selectedKeys, placeholderText]);
-  const fieldRef = _react.useRef.call(void 0, null);
-  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = _reactaria.useField.call(void 0, {
-    label,
-    // this is the label for the select box
-    description: helperText,
-    errorMessage: errorText
-  });
-  const textColor = {
-    white: "gray700",
-    clear: "white"
-  };
-  const getArrowIconColor = () => {
-    if (errorText) {
-      return _XJVLA3PAcjs.ColorBaseDestructive700;
-    } else {
-      if (color === "clear") {
-        return _XJVLA3PAcjs.ColorCambioWhite100;
-      } else {
-        return _XJVLA3PAcjs.ColorBaseGray700;
-      }
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _reactariacomponents.Provider,
-    {
-      values: [
-        [_AFOQ6JVBcjs.RichSelectBoxContext, { autoFocus: true }],
-        [_OKT24L6Dcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
-        // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
-      ],
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        "div",
-        {
-          className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
-            [SelectList_module_default.opacityOverlay]: disabled
-          }),
-          onClick,
-          children: [
-            label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _reactariacomponents.Label,
-              _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
-                "data-testid": [dataTestId, "label"].filter(Boolean).join("-")
-              }, labelProps), {
-                onClick: () => {
-                  var _a2;
-                  if (disabled)
-                    return;
-                  (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
-                  _interactions.setInteractionModality.call(void 0, "keyboard");
-                },
-                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[color], children: label }) })
-              })
-            ) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _IJHKE2Y3cjs.Popover_default,
-              {
-                ref: overlayHandlerRef,
-                disabled,
-                content: (
-                  // 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
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _QODNNCT2cjs.Box_default,
-                    {
-                      padding: autosave ? void 0 : 5,
-                      dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
-                      role: "menu",
-                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _AFOQ6JVBcjs.RichSelectBox_default,
-                        _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
-                          autosave,
-                          selectedValues: selectedKeys,
-                          defaultSelectedValues: defaultSelectedKeys,
-                          onChange: (selected) => setSelectedKeys(new Set(selected))
-                        }, richSelectBoxProps), {
-                          accessibilityLabel: inputId,
-                          children
-                        })
-                      )
-                    }
-                  )
-                ),
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _3UEOKPM2cjs.TapArea_default,
-                  _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
-                    "data-testid": dataTestId,
-                    disabled,
-                    onClick,
-                    rounding: "md"
-                  }, fieldProps), {
-                    ref: fieldRef,
-                    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "div",
-                        {
-                          className: _classnames2.default.call(void 0, 
-                            SelectList_module_default.selectBox,
-                            SelectList_module_default.selectBoxCambio,
-                            {
-                              [SelectList_module_default.unselected]: !errorText && selectedKeys !== "all" && !selectedKeys.size,
-                              [SelectList_module_default.selected]: !errorText && (selectedKeys === "all" || selectedKeys.size),
-                              [SelectList_module_default.selectErrorCambio]: errorText,
-                              [SelectList_module_default[`selectColor${color}`]]: color
-                            }
-                          ),
-                          children: selectedTextValue
-                        }
-                      ),
-                      /* @__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,
-              _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
-                size: 100,
-                color: errorText ? "destructive-primary" : textColor[color]
-              }, errorText ? errorMessageProps : descriptionProps), {
-                children: errorText ? errorText : helperText
-              })
-            ) })
-          ]
-        }
-      )
-    }
-  );
-}
-var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _VDLYCYDQcjs.RichSelectSection_default,
-  Chip: _J2QDHB6Icjs.RichSelectChip_default,
-  RadioButton: _WKADTHRKcjs.RichSelectRadioButton_default
-});
-
-
-
-exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=JKEJPSO2.cjs.map

package/dist/__chunks/JKEJPSO2.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  ColorBaseGray700,\n  ColorCambioWhite100,\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   * Color of the select box\n   * @defaultValue white\n   */\n  color?: \"white\" | \"clear\";\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    color = \"white\",\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  const textColor = {\n    white: \"gray700\",\n    clear: \"white\",\n  } as const;\n\n  const getArrowIconColor = () => {\n    if (errorText) {\n      return ColorBaseDestructive700;\n    } else {\n      if (color === \"clear\") {\n        return ColorCambioWhite100;\n      } else {\n        return ColorBaseGray700;\n      }\n    }\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={textColor[color]}>\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                    [styles[`selectColor${color}`]]: color,\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={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          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : textColor[color]}\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_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/JVGX637E.cjs

@@ -1,26 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// src/SelectList/SelectOption.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var SelectOption = ({
-  "data-testid": dataTestId,
-  value,
-  label,
-  disabled = false,
-  accessibilityLabel
-}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "option",
-  {
-    "aria-label": accessibilityLabel,
-    "data-testid": dataTestId,
-    value,
-    disabled,
-    children: label
-  }
-);
-var SelectOption_default = SelectOption;
-
-
-
-exports.SelectOption_default = SelectOption_default;
-//# sourceMappingURL=JVGX637E.cjs.map

package/dist/__chunks/JVGX637E.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SelectList/SelectOption.tsx"],"names":[],"mappings":";;;AAeE;AAbF,IAAM,eAAe,CAAC;AAAA,EACpB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAOE;AAAA,EAAC;AAAA;AAAA,IACC,cAAY;AAAA,IACZ,eAAa;AAAA,IACb;AAAA,IACA;AAAA,IAEC;AAAA;AACH;AAGF,IAAO,uBAAQ","sourcesContent":["import React, { type ReactElement } from \"react\";\n\nconst SelectOption = ({\n  \"data-testid\": dataTestId,\n  value,\n  label,\n  disabled = false,\n  accessibilityLabel,\n}: {\n  accessibilityLabel?: string;\n  \"data-testid\"?: string;\n  value: string;\n  label: string;\n  disabled?: boolean;\n}): ReactElement => (\n  <option\n    aria-label={accessibilityLabel}\n    data-testid={dataTestId}\n    value={value}\n    disabled={disabled}\n  >\n    {label}\n  </option>\n);\n\nexport default SelectOption;\n"]}

package/dist/__chunks/K4AUV2VK.cjs

@@ -1,16 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// src/useIsHydrated.tsx
-var _react = require('react');
-function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = _react.useState.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    setIsHydrated(true);
-  }, []);
-  return isHydrated;
-}
-
-
-
-exports.useIsHydrated = useIsHydrated;
-//# sourceMappingURL=K4AUV2VK.cjs.map

package/dist/__chunks/K4AUV2VK.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/useIsHydrated.tsx"],"names":[],"mappings":";;;AAAA,SAAS,WAAW,gBAAgB;AAErB,SAAR,gBAA0C;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,YAAU,MAAM;AACd,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AACL,SAAO;AACT","sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport default function useIsHydrated(): boolean {\n  const [isHydrated, setIsHydrated] = useState(false);\n  useEffect(() => {\n    setIsHydrated(true);\n  }, []);\n  return isHydrated;\n}\n"]}

package/dist/__chunks/KFNK5PLG.cjs

@@ -1,122 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-
-var _UEY7FXLXcjs = require('./UEY7FXLX.cjs');
-
-
-var _RXQBNEFRcjs = require('./RXQBNEFR.cjs');
-
-
-var _2D3DOVVZcjs = require('./2D3DOVVZ.cjs');
-
-
-var _F3SUJGZLcjs = require('./F3SUJGZL.cjs');
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-
-var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
-
-// src/IconButton/IconButton.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _react = require('react');
-
-// css-module:./IconButton.module.css#css-module
-var IconButton_module_default = { "iconButton": "_iconButton_txjkh_1", "sm": "_sm_txjkh_46", "md": "_md_txjkh_51", "lg": "_lg_txjkh_56", "smIcon": "_smIcon_txjkh_61", "mdIcon": "_mdIcon_txjkh_68", "lgIcon": "_lgIcon_txjkh_75" };
-
-// src/IconButton/IconButton.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var sizeToIndicatorSize = {
-  sm: "6px",
-  md: "8px",
-  lg: "10px"
-};
-var sizeToVerticalOffset = {
-  sm: "-1px",
-  md: "-2px",
-  lg: "-3px"
-};
-var IconButton = _react.forwardRef.call(void 0, 
-  ({
-    accessibilityLabel,
-    color = "primary",
-    "data-testid": dataTestId,
-    disabled = false,
-    icon: Icon,
-    size = "md",
-    tooltip,
-    on = "lightBackground",
-    indicatorColor,
-    onClick
-  }, ref) => {
-    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-    const foregroundColorClass = _RXQBNEFRcjs.foregroundColor.call(void 0, color, on);
-    const backgroundColorClass = _F3SUJGZLcjs.backgroundColor.call(void 0, color, on);
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "button",
-      {
-        "aria-label": accessibilityLabel,
-        "data-testid": dataTestId,
-        type: "button",
-        title: tooltip,
-        disabled: !isHydrated || disabled,
-        onClick,
-        className: _classnames2.default.call(void 0, 
-          IconButton_module_default.iconButton,
-          foregroundColorClass,
-          backgroundColorClass,
-          _2D3DOVVZcjs.border.call(void 0, color, on),
-          IconButton_module_default[size]
-        ),
-        ref,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Icon,
-            {
-              className: _UEY7FXLXcjs.materialIconSize[size],
-              size: _UEY7FXLXcjs.internalIconSize[size]
-            }
-          ),
-          indicatorColor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _QODNNCT2cjs.Box_default,
-            {
-              display: "flex",
-              position: "relative",
-              justifyContent: "end",
-              alignItems: "end",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _QODNNCT2cjs.Box_default,
-                {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  position: "absolute",
-                  backgroundColor: indicatorColor,
-                  width: sizeToIndicatorSize[size],
-                  height: sizeToIndicatorSize[size],
-                  "data-testid": "indicator",
-                  rounding: "full",
-                  dangerouslySetInlineStyle: {
-                    __style: {
-                      border: "1px solid white",
-                      transform: `translateY(${sizeToVerticalOffset[size]})`
-                    }
-                  }
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-var IconButton_default = IconButton;
-
-
-
-exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=KFNK5PLG.cjs.map

package/dist/__chunks/KFNK5PLG.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAqC,kBAAkB;;;ACF6C,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;AD2HhS,SAgBE,KAhBF;AA5GN,IAAM,sBAAsB;AAAA,EAC1B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,uBAAuB;AAAA,EAC3B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA6EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,iBAAiB,IAAI;AAAA,cAChC,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UACC,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,YAAW;AAAA,cAEX;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,YAAW;AAAA,kBACX,gBAAe;AAAA,kBACf,UAAS;AAAA,kBACT,iBAAiB;AAAA,kBACjB,OAAO,oBAAoB,IAAI;AAAA,kBAC/B,QAAQ,oBAAoB,IAAI;AAAA,kBAChC,eAAY;AAAA,kBACZ,UAAS;AAAA,kBACT,2BAA2B;AAAA,oBACzB,SAAS;AAAA,sBACP,QAAQ;AAAA,sBACR,WAAW,cAAc,qBAAqB,IAAI;AAAA,oBACpD;AAAA,kBACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { type ComponentProps, forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport {\n  materialIconSize,\n  internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport Box from \"../Box/Box\";\n\nconst sizeToIndicatorSize = {\n  sm: \"6px\",\n  md: \"8px\",\n  lg: \"10px\",\n} as const;\n\nconst sizeToVerticalOffset = {\n  sm: \"-1px\",\n  md: \"-2px\",\n  lg: \"-3px\",\n} as const;\n\ntype Color =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"destructive-primary\"\n  | \"destructive-secondary\"\n  | \"destructive-tertiary\"\n  | \"branded\"\n  | \"success-primary\"\n  | \"success-secondary\"\n  | \"success-tertiary\";\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: Color;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed.\n   *\n   * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Preferred: Syntax icon\n   */\n  icon:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * If specified, will create an indicator (dot) on the top right of the button with the specified color\n   */\n  indicatorColor?: ComponentProps<typeof Box>[\"backgroundColor\"];\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      on = \"lightBackground\",\n      indicatorColor,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          styles[size],\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={materialIconSize[size]}\n          size={internalIconSize[size]}\n        />\n        {indicatorColor && (\n          <Box\n            display=\"flex\"\n            position=\"relative\"\n            justifyContent=\"end\"\n            alignItems=\"end\"\n          >\n            <Box\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              position=\"absolute\"\n              backgroundColor={indicatorColor}\n              width={sizeToIndicatorSize[size]}\n              height={sizeToIndicatorSize[size]}\n              data-testid=\"indicator\"\n              rounding=\"full\"\n              dangerouslySetInlineStyle={{\n                __style: {\n                  border: \"1px solid white\",\n                  transform: `translateY(${sizeToVerticalOffset[size]})`,\n                },\n              }}\n            />\n          </Box>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_txjkh_1\",\"sm\":\"_sm_txjkh_46\",\"md\":\"_md_txjkh_51\",\"lg\":\"_lg_txjkh_56\",\"smIcon\":\"_smIcon_txjkh_61\",\"mdIcon\":\"_mdIcon_txjkh_68\",\"lgIcon\":\"_lgIcon_txjkh_75\"}"]}

package/dist/__chunks/LLFHCGRA.cjs

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// src/react-aria-utils/placement.ts
-var SYNTAX_TO_REACT_ARIA_PLACEMENT = {
-  top: "top start",
-  end: "top end",
-  bottom: "bottom end",
-  start: "bottom start"
-};
-function syntaxToReactAriaPlacement(placement) {
-  if (!placement)
-    return void 0;
-  return SYNTAX_TO_REACT_ARIA_PLACEMENT[placement];
-}
-
-
-
-exports.syntaxToReactAriaPlacement = syntaxToReactAriaPlacement;
-//# sourceMappingURL=LLFHCGRA.cjs.map

package/dist/__chunks/LLFHCGRA.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/react-aria-utils/placement.ts"],"names":[],"mappings":";;;AAIA,IAAM,iCAAwE;AAAA,EAC5E,KAAK;AAAA,EACL,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAAS,2BACd,WACgC;AAChC,MAAI,CAAC;AAAW,WAAO;AACvB,SAAO,+BAA+B,SAAS;AACjD","sourcesContent":["import { type Placement as ReactAriaPlacement } from \"@react-aria/overlays\";\n\nexport type Placement = \"top\" | \"end\" | \"bottom\" | \"start\";\n\nconst SYNTAX_TO_REACT_ARIA_PLACEMENT: Record<Placement, ReactAriaPlacement> = {\n  top: \"top start\",\n  end: \"top end\",\n  bottom: \"bottom end\",\n  start: \"bottom start\",\n} as const;\n\nexport function syntaxToReactAriaPlacement(\n  placement?: Placement,\n): ReactAriaPlacement | undefined {\n  if (!placement) return undefined;\n  return SYNTAX_TO_REACT_ARIA_PLACEMENT[placement];\n}\n"]}

package/dist/__chunks/MENEINOO.cjs

@@ -1,91 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-
-var _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
-
-
-var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
-
-// src/Chip/Chip.tsx
-var _react = require('react');
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-
-// css-module:./Chip.module.css#css-module
-var Chip_module_default = { "chip": "_chip_b9vyr_1", "disabled": "_disabled_b9vyr_12", "deselectedChip": "_deselectedChip_b9vyr_17", "deselectedChipOnDarkBackground": "_deselectedChipOnDarkBackground_b9vyr_21", "selectedChip": "_selectedChip_b9vyr_25", "selectedChipOnDarkBackground": "_selectedChipOnDarkBackground_b9vyr_29", "icon": "_icon_b9vyr_33", "selectedIcon": "_selectedIcon_b9vyr_41", "sm": "_sm_b9vyr_45", "forceFocus": "_forceFocus_b9vyr_52" };
-
-// src/Chip/Chip.tsx
-var _jsxruntime = require('react/jsx-runtime');
-function typographyColor({
-  selected,
-  on
-}) {
-  if (on === "darkBackground") {
-    if (selected) {
-      return "gray900";
-    } else {
-      return "white";
-    }
-  } else {
-    if (selected) {
-      return "white";
-    } else {
-      return "gray900";
-    }
-  }
-}
-var Chip = _react.forwardRef.call(void 0, 
-  ({
-    disabled: disabledProp = false,
-    selected = false,
-    "data-testid": dataTestId,
-    text,
-    on = "lightBackground",
-    onChange,
-    icon: Icon,
-    dangerouslyForceFocusStyles
-  }, ref) => {
-    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-    const disabled = !isHydrated || disabledProp;
-    const selectedChipStyle = on === "lightBackground" ? Chip_module_default.selectedChip : Chip_module_default.selectedChipOnDarkBackground;
-    const deselectedChipStyle = on === "lightBackground" ? Chip_module_default.deselectedChip : Chip_module_default.deselectedChipOnDarkBackground;
-    const chipStyles = _classnames2.default.call(void 0, Chip_module_default.chip, Chip_module_default.sm, {
-      [selectedChipStyle]: selected,
-      [deselectedChipStyle]: !selected,
-      [Chip_module_default.disabled]: disabled,
-      [Chip_module_default.forceFocus]: dangerouslyForceFocusStyles
-    });
-    const iconStyles = _classnames2.default.call(void 0, Chip_module_default.icon, {
-      [Chip_module_default.selectedIcon]: selected
-    });
-    const color = _react.useMemo.call(void 0, 
-      () => typographyColor({ selected, on }),
-      [selected, on]
-    );
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "button",
-      {
-        className: chipStyles,
-        disabled,
-        "data-testid": dataTestId,
-        ref,
-        type: "button",
-        "aria-pressed": selected,
-        onClick: onChange,
-        children: [
-          Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles, size: 100 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
-        ]
-      }
-    );
-  }
-);
-Chip.displayName = "Chip";
-var Chip_default = Chip;
-
-
-
-exports.Chip_default = Chip_default;
-//# sourceMappingURL=MENEINOO.cjs.map

package/dist/__chunks/MENEINOO.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAoC;AAChE,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,kBAAiB,4BAA2B,kCAAiC,4CAA2C,gBAAe,0BAAyB,gCAA+B,0CAAyC,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,cAAa,uBAAsB;;;ADoHxf,SASW,KATX;AA5GN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGwB;AACtB,MAAI,OAAO,kBAAkB;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AA6CA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,oBACJ,OAAO,oBACH,oBAAO,eACP,oBAAO;AAEb,UAAM,sBACJ,OAAO,oBACH,oBAAO,iBACP,oBAAO;AAEb,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI;AAAA,MACpD,CAAC,iBAAiB,GAAG;AAAA,MACrB,CAAC,mBAAmB,GAAG,CAAC;AAAA,MACxB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,UAAU,GAAG,CAAC;AAAA,MACtC,CAAC,UAAU,EAAE;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY,MAAM,KAAK;AAAA,UACjD,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB,8BAAC,sBAAW,MAAM,KAAK,OAAc,QAAO,UACzC,gBACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef, useMemo, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nfunction typographyColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  if (on === \"darkBackground\") {\n    if (selected) {\n      return \"gray900\";\n    } else {\n      return \"white\";\n    }\n  } else {\n    if (selected) {\n      return \"white\";\n    } else {\n      return \"gray900\";\n    }\n  }\n}\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      text,\n      on = \"lightBackground\",\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const selectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.selectedChip\n        : styles.selectedChipOnDarkBackground;\n\n    const deselectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.deselectedChip\n        : styles.deselectedChipOnDarkBackground;\n\n    const chipStyles = classnames(styles.chip, styles.sm, {\n      [selectedChipStyle]: selected,\n      [deselectedChipStyle]: !selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n\n    const color = useMemo(\n      () => typographyColor({ selected, on }),\n      [selected, on],\n    );\n\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} size={100} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography size={100} color={color} weight=\"medium\">\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_b9vyr_1\",\"disabled\":\"_disabled_b9vyr_12\",\"deselectedChip\":\"_deselectedChip_b9vyr_17\",\"deselectedChipOnDarkBackground\":\"_deselectedChipOnDarkBackground_b9vyr_21\",\"selectedChip\":\"_selectedChip_b9vyr_25\",\"selectedChipOnDarkBackground\":\"_selectedChipOnDarkBackground_b9vyr_29\",\"icon\":\"_icon_b9vyr_33\",\"selectedIcon\":\"_selectedIcon_b9vyr_41\",\"sm\":\"_sm_b9vyr_45\",\"forceFocus\":\"_forceFocus_b9vyr_52\"}"]}