@cambly/syntax-core 10.3.0 → 10.5.0

package/dist/__chunks/M7BTHQDK.cjs

@@ -0,0 +1,268 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+
+var _5TKLFG5Ycjs = require('./5TKLFG5Y.cjs');
+
+
+var _QNBZ64IEcjs = require('./QNBZ64IE.cjs');
+
+
+var _IJVFSOXUcjs = require('./IJVFSOXU.cjs');
+
+
+var _PZYWUTMWcjs = require('./PZYWUTMW.cjs');
+
+
+
+var _SXTAJU6Ncjs = require('./SXTAJU6N.cjs');
+
+
+var _FMSI35YScjs = require('./FMSI35YS.cjs');
+
+
+var _2RCQTGOZcjs = require('./2RCQTGOZ.cjs');
+
+
+var _NDJRETMMcjs = require('./NDJRETMM.cjs');
+
+
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
+
+
+var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.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_3ifov_1", "opacityOverlay": "_opacityOverlay_3ifov_7", "outerTextContainer": "_outerTextContainer_3ifov_11", "selectWrapper": "_selectWrapper_3ifov_16", "selectBox": "_selectBox_3ifov_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_3ifov_37", "unselected": "_unselected_3ifov_42", "selected": "_selected_3ifov_46", "arrowIcon": "_arrowIcon_3ifov_50", "sm": "_sm_3ifov_64", "md": "_md_3ifov_70", "lg": "_lg_3ifov_76", "selectError": "_selectError_3ifov_82" };
+
+// src/RichSelect/RichSelectList.tsx
+var _reactaria = require('react-aria');
+var _jsxruntime = require('react/jsx-runtime');
+var NOOP = () => void 0;
+var iconSize = {
+  sm: 20,
+  md: 24,
+  lg: 24
+};
+function RichSelectList(props) {
+  const _a = props, {
+    autosave,
+    children,
+    "data-testid": dataTestId,
+    disabled: disabledProp = false,
+    errorText,
+    helperText,
+    label,
+    onChange,
+    onClick = NOOP,
+    placeholderText,
+    selectTextValue,
+    selectedValues: selectedValuesProp,
+    defaultSelectedValues: defaultSelectedValuesProp,
+    size = "md"
+  } = _a, richSelectBoxProps = _I64JGYX7cjs.__objRest.call(void 0, _a, [
+    "autosave",
+    "children",
+    "data-testid",
+    "disabled",
+    "errorText",
+    "helperText",
+    "label",
+    "onChange",
+    "onClick",
+    "placeholderText",
+    "selectTextValue",
+    "selectedValues",
+    "defaultSelectedValues",
+    "size"
+  ]);
+  const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+  const disabled = !isHydrated || disabledProp;
+  const overlayHandlerRef = _react.useRef.call(void 0, {});
+  const selectedKeysProp = _react.useMemo.call(void 0, 
+    () => _5TKLFG5Ycjs.convertSelection.call(void 0, selectedValuesProp),
+    [selectedValuesProp]
+  );
+  const defaultSelectedKeys = _react.useMemo.call(void 0, 
+    () => _5TKLFG5Ycjs.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].map(String))) != null ? _a2 : placeholderText;
+    if (selectedKeys === "all")
+      return "all";
+    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
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactariacomponents.Provider,
+    {
+      values: [
+        [_5TKLFG5Ycjs.RichSelectBoxContext, { autoFocus: true }],
+        [_IJVFSOXUcjs.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
+          }),
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _reactariacomponents.Label,
+              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                "data-testid": [dataTestId, "label"].filter(Boolean).join("-"),
+                className: _classnames2.default.call(void 0, 
+                  SelectList_module_default.selectContainer,
+                  SelectList_module_default.outerTextContainer
+                )
+              }, 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, _ZX5KONS2cjs.Typography_default, { size: 100, color: "gray700", children: label })
+              })
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _QNBZ64IEcjs.Popover_default,
+              {
+                ref: overlayHandlerRef,
+                disabled,
+                accessibilityLabel: label,
+                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, 
+                    _5SMR5MWYcjs.Box_default,
+                    {
+                      padding: autosave ? void 0 : 5,
+                      dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _5TKLFG5Ycjs.RichSelectBox_default,
+                        _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                          autosave,
+                          selectedValues: selectedKeys,
+                          defaultSelectedValues: defaultSelectedKeys,
+                          onChange: (selected) => setSelectedKeys(new Set(selected)),
+                          accessibilityLabel: label
+                        }, richSelectBoxProps), {
+                          children
+                        })
+                      )
+                    }
+                  )
+                ),
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _PZYWUTMWcjs.TapArea_default,
+                  _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                    "data-testid": dataTestId,
+                    disabled,
+                    onClick,
+                    rounding: size === "lg" ? "lg" : "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[size], {
+                            [SelectList_module_default.unselected]: !errorText && selectedKeys !== "all" && !selectedKeys.size,
+                            [SelectList_module_default.selected]: !errorText && (selectedKeys === "all" || selectedKeys.size),
+                            [SelectList_module_default.selectError]: errorText
+                          }),
+                          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: iconSize[size],
+                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            "path",
+                            {
+                              fill: errorText ? _SXTAJU6Ncjs.ColorBaseDestructive700 : _SXTAJU6Ncjs.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"
+                            }
+                          )
+                        }
+                      ) })
+                    ] })
+                  })
+                )
+              }
+            ),
+            (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _ZX5KONS2cjs.Typography_default,
+              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                size: 100,
+                color: errorText ? "destructive-primary" : "gray700"
+              }, errorText ? errorMessageProps : descriptionProps), {
+                children: errorText ? errorText : helperText
+              })
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+var RichSelectList_default = Object.assign(RichSelectList, {
+  Section: _FMSI35YScjs.RichSelectSection_default,
+  Chip: _NDJRETMMcjs.RichSelectChip_default,
+  RadioButton: _2RCQTGOZcjs.RichSelectRadioButton_default
+});
+
+
+
+exports.RichSelectList_default = RichSelectList_default;
+//# sourceMappingURL=M7BTHQDK.cjs.map

package/dist/__chunks/M7BTHQDK.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} 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\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = Omit<\n  RichSelectBoxProps,\n  \"accessibilityLabel\"\n> & {\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  /** 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?: string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\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    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\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 selectTextValue([...selectedKeys].map(String)) ?? placeholderText;\n    if (selectedKeys === \"all\") return \"all\";\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      >\n        <ReactAriaLabel\n          data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n          className={classNames(\n            styles.selectContainer,\n            styles.outerTextContainer,\n          )}\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          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </ReactAriaLabel>\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          accessibilityLabel={label}\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                accessibilityLabel={label}\n                {...richSelectBoxProps}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(styles.selectBox, styles[size], {\n                  [styles.unselected]:\n                    !errorText && selectedKeys !== \"all\" && !selectedKeys.size,\n                  [styles.selected]:\n                    !errorText && (selectedKeys === \"all\" || selectedKeys.size),\n                  [styles.selectError]: errorText,\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={iconSize[size]}\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          <div className={styles.outerTextContainer}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </div>\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_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"]}

package/dist/__chunks/NDJRETMM.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _QQWCNTE4cjs = require('./QQWCNTE4.cjs');
+
+
+var _GYI2PBXYcjs = require('./GYI2PBXY.cjs');
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+// src/RichSelect/RichSelectChip.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var RichSelectChip_default = _react.forwardRef.call(void 0, 
+  function RichSelectChip(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GYI2PBXYcjs.RichSelectItem_default, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _QQWCNTE4cjs.Chip_default,
+      {
+        text: props.label,
+        selected: isSelected,
+        disabled: isDisabled,
+        dangerouslyForceFocusStyles: isFocusVisible,
+        onChange: () => void 0
+      }
+    ) }));
+  }
+);
+
+
+
+exports.RichSelectChip_default = RichSelectChip_default;
+//# sourceMappingURL=NDJRETMM.cjs.map

package/dist/__chunks/NDJRETMM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectChip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAmC,kBAAqC;AAc9D;AARV,IAAO,yBAAQ;AAAA,EACb,SAAS,eACP,OACA,KACc;AACd,WACE,oBAAC,yDAAmB,QAAnB,EAA0B,KACxB,WAAC,EAAE,YAAY,gBAAgB,WAAW,MACzC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,6BAA6B;AAAA,QAC7B,UAAU,MAAM;AAAA;AAAA,IAClB,IAEJ;AAAA,EAEJ;AACF","sourcesContent":["import React, { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport Chip from \"../Chip/Chip\";\nimport RichSelectItem, { type RichSelectItemProps } from \"./RichSelectItem\";\n\ntype RichSelectChipProps = RichSelectItemProps;\n\nexport default forwardRef<HTMLDivElement, RichSelectChipProps>(\n  function RichSelectChip(\n    props: RichSelectChipProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ): ReactElement {\n    return (\n      <RichSelectItem {...props} ref={ref}>\n        {({ isSelected, isFocusVisible, isDisabled }) => (\n          <Chip\n            text={props.label}\n            selected={isSelected}\n            disabled={isDisabled}\n            dangerouslyForceFocusStyles={isFocusVisible}\n            onChange={() => undefined}\n          />\n        )}\n      </RichSelectItem>\n    );\n  },\n);\n"]}

package/dist/__chunks/{X74O4HUS.js → NRTSRS2D.js}

@@ -3,7 +3,7 @@ import {
 } from "./2O6FDRTF.js";
 import {
   Typography_default
-} from "./F3ZST4RL.js";
+} from "./B2TFERTM.js";
 import {
   useIsHydrated
 } from "./YJ7YDIGB.js";
@@ -23,6 +23,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
+  dangerouslyForceFocusStyles = false,
   disabled: disabledProp = false,
   error = false,
   id,
@@ -39,7 +40,7 @@ var RadioButton = ({
   const sharedStyles = classnames(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
-    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
   });
   return /* @__PURE__ */ jsxs(
     "label",
@@ -107,4 +108,4 @@ var RadioButton_default = RadioButton;
 export {
   RadioButton_default
 };
-//# sourceMappingURL=X74O4HUS.js.map
+//# sourceMappingURL=NRTSRS2D.js.map

package/dist/__chunks/NRTSRS2D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const sharedStyles = classnames(styles.background, styles[size], {\n    [styles.errorBorderColor]: error,\n    [styles.borderColor]: !error,\n    [focusStyles.accessibilityOutlineFocus]:\n      (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n  });\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n          [styles.smBase]: size === \"sm\",\n          [styles.mdBase]: size === \"md\",\n        },\n      )}\n    >\n      {checked ? (\n        <div\n          className={classnames(sharedStyles, {\n            [styles.mdCheckedBorder]: size === \"md\",\n            [styles.smCheckedBorder]: size === \"sm\",\n          })}\n        />\n      ) : (\n        <div className={classnames(sharedStyles, styles.neutralBorder)} />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray800\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;AD4FrvB,SAYI,KAZJ;AAhFJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,eAAe,WAAW,2BAAO,YAAY,2BAAO,IAAI,GAAG;AAAA,IAC/D,CAAC,2BAAO,gBAAgB,GAAG;AAAA,IAC3B,CAAC,2BAAO,WAAW,GAAG,CAAC;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,EACrC,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,cAAc;AAAA,cAClC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,cACnC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,YACrC,CAAC;AAAA;AAAA,QACH,IAEA,oBAAC,SAAI,WAAW,WAAW,cAAc,2BAAO,aAAa,GAAG;AAAA,QAElE;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/{BSFWQWVJ.js → PEKXH4DM.js}

@@ -1,6 +1,6 @@
 import {
   Typography_default
-} from "./F3ZST4RL.js";
+} from "./B2TFERTM.js";
 
 // src/Heading/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -33,4 +33,4 @@ var Heading_default = Heading;
 export {
   Heading_default
 };
-//# sourceMappingURL=BSFWQWVJ.js.map
+//# sourceMappingURL=PEKXH4DM.js.map

package/dist/__chunks/PJIXYQPE.js

@@ -0,0 +1,164 @@
+import {
+  padding_module_default
+} from "./652STTPK.js";
+import {
+  Box_module_default
+} from "./KMIZI5PW.js";
+import {
+  rounding_module_default
+} from "./TPMQI44L.js";
+import {
+  Typography_default
+} from "./B2TFERTM.js";
+import {
+  colors_module_default
+} from "./ERXGNP37.js";
+import {
+  syntaxToReactAriaPlacement
+} from "./ARBLKS7D.js";
+import {
+  Triggerable_default
+} from "./JQ6POHCA.js";
+import {
+  OverlayVisibility
+} from "./XKDASN7N.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./LULBCTQR.js";
+
+// src/Tooltip/Tooltip.tsx
+import { forwardRef } from "react";
+import { mergeProps } from "react-aria";
+import {
+  composeRenderProps,
+  OverlayArrow as ReactAriaOverlayArrow,
+  Tooltip as ReactAriaTooltip,
+  TooltipTrigger as ReactAriaTooltipTrigger
+} from "react-aria-components";
+import classNames from "classnames";
+
+// css-module:./Tooltip.module.css#css-module
+var Tooltip_module_default = { "tooltip": "_tooltip_11pyp_1", "arrowPlacementtop": "_arrowPlacementtop_11pyp_5", "arrowPlacementbottom": "_arrowPlacementbottom_11pyp_10" };
+
+// src/Tooltip/Tooltip.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TooltipArrow(props) {
+  return /* @__PURE__ */ jsx(ReactAriaOverlayArrow, __spreadProps(__spreadValues({}, props), { children: ({ placement }) => {
+    if (placement === "center")
+      return null;
+    if (placement === "left")
+      return null;
+    if (placement === "right")
+      return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames([
+          Box_module_default.block,
+          Tooltip_module_default[`arrowPlacement${placement}`]
+        ]),
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: classNames([Box_module_default.block]),
+            width: 40,
+            height: 5,
+            viewBox: "0 0 40 5",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx("path", { d: "M17 0L22 5H12L17 0Z", fill: "currentColor" })
+          }
+        )
+      }
+    );
+  } }));
+}
+var AriaTooltip = forwardRef(function AriaTooltip2(_a, ref) {
+  var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = __objRest(_b, ["children", "onChangeContentVisibility"]);
+  const className = classNames([
+    Box_module_default.box,
+    colors_module_default.gray900Color,
+    colors_module_default.gray900BackgroundColor,
+    padding_module_default.paddingY2,
+    padding_module_default.paddingX3,
+    rounding_module_default.roundingsm,
+    Tooltip_module_default.tooltip
+  ]);
+  return /* @__PURE__ */ jsx(
+    ReactAriaTooltip,
+    __spreadProps(__spreadValues({
+      ref
+    }, mergeProps(
+      {
+        className,
+        offset: 8,
+        crossOffset: 0
+      },
+      otherProps
+    )), {
+      children: composeRenderProps(
+        childrenProp,
+        (children, { isEntering, isExiting }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TooltipArrow, {}),
+          /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "white", children }),
+          /* @__PURE__ */ jsx(
+            OverlayVisibility,
+            {
+              isEntering,
+              isExiting,
+              onChange: onChangeContentVisibility
+            }
+          )
+        ] })
+      )
+    })
+  );
+});
+var Tooltip = forwardRef(function Tooltip2(props, ref) {
+  const {
+    accessibilityLabel,
+    "data-testid": dataTestId,
+    delay = 0,
+    disabled = false,
+    children,
+    content,
+    initialOpen,
+    onChangeContentVisibility,
+    onOpenChange,
+    open,
+    placement = "top"
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    ReactAriaTooltipTrigger,
+    {
+      defaultOpen: initialOpen,
+      delay,
+      closeDelay: 500,
+      isDisabled: disabled,
+      isOpen: open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(Triggerable_default, { children }),
+        /* @__PURE__ */ jsx(
+          AriaTooltip,
+          {
+            ref,
+            placement: syntaxToReactAriaPlacement(placement),
+            "aria-label": accessibilityLabel,
+            "data-testid": dataTestId,
+            onChangeContentVisibility,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+});
+var Tooltip_default = Tooltip;
+
+export {
+  AriaTooltip,
+  Tooltip_default
+};
+//# sourceMappingURL=PJIXYQPE.js.map

package/dist/__chunks/PJIXYQPE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  composeRenderProps,\n  OverlayArrow as ReactAriaOverlayArrow,\n  type OverlayArrowProps as ReactAriaOverlayArrowProps,\n  Tooltip as ReactAriaTooltip,\n  TooltipTrigger as ReactAriaTooltipTrigger,\n  type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {\n  return (\n    <ReactAriaOverlayArrow {...props}>\n      {({ placement }) => {\n        if (placement === \"center\") return null;\n        if (placement === \"left\") return null;\n        if (placement === \"right\") return null;\n        return (\n          <div\n            className={classNames([\n              boxStyles.block,\n              styles[`arrowPlacement${placement}`],\n            ])}\n          >\n            <svg\n              className={classNames([boxStyles.block])}\n              width={40}\n              height={5}\n              viewBox=\"0 0 40 5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n            </svg>\n          </div>\n        );\n      }}\n    </ReactAriaOverlayArrow>\n  );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n  HTMLDivElement,\n  ReactAriaTooltipProps & {\n    /** Optional handler for change of visibility for overlaid content, for analytics timing */\n    onChangeContentVisibility?: (visible: boolean) => void;\n  }\n>(function AriaTooltip(\n  { children: childrenProp, onChangeContentVisibility, ...otherProps },\n  ref,\n): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    colorStyles.gray900Color,\n    colorStyles.gray900BackgroundColor,\n    paddingStyles.paddingY2,\n    paddingStyles.paddingX3,\n    roundingStyles.roundingsm,\n    styles.tooltip,\n  ]);\n  return (\n    <ReactAriaTooltip\n      ref={ref}\n      {...mergeProps(\n        {\n          className,\n          offset: 8,\n          crossOffset: 0,\n        },\n        otherProps,\n      )}\n    >\n      {composeRenderProps(\n        childrenProp,\n        (children, { isEntering, isExiting }) => (\n          <>\n            <TooltipArrow />\n            <Typography size={100} color=\"white\">\n              {children}\n            </Typography>\n            <OverlayVisibility\n              isEntering={isEntering}\n              isExiting={isExiting}\n              onChange={onChangeContentVisibility}\n            />\n          </>\n        ),\n      )}\n    </ReactAriaTooltip>\n  );\n});\n\ntype TooltipProps = {\n  /**\n   * Test id for the floating tooltip\n   */\n  \"data-testid\"?: string;\n  /**\n   * How long a user hovers before tooltip shows (in ms)\n   * @defaultValue 0\n   */\n  delay?: number;\n  /** Optional boolean to disable tooltip trigger behavior */\n  disabled?: boolean;\n  /** Optional aria-label for the tooltip (content element) */\n  accessibilityLabel?: string;\n  /** Required trigger element */\n  children: ReactElement;\n  /** Content to be shown inside the tooltip. */\n  content: ReactNode;\n  /** If set to true the tooltip will render initially open */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of tooltip externally */\n  open?: boolean;\n  /**\n   * Location of the tooltip content relative to anchor element\n   * @defaultValue \"top-end\"\n   */\n  placement?: Placement;\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Tooltip\n    delay={200}\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  props,\n  ref,\n): ReactElement {\n  const {\n    accessibilityLabel,\n    \"data-testid\": dataTestId,\n    delay = 0,\n    disabled = false,\n    children,\n    content,\n    initialOpen,\n    onChangeContentVisibility,\n    onOpenChange,\n    open,\n    placement = \"top\",\n  } = props;\n\n  return (\n    <ReactAriaTooltipTrigger\n      defaultOpen={initialOpen}\n      delay={delay}\n      closeDelay={500}\n      isDisabled={disabled}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {/* transfer focus handlers to child element if it is focusable */}\n      <Triggerable>{children}</Triggerable>\n      <AriaTooltip\n        ref={ref}\n        placement={syntaxToReactAriaPlacement(placement)}\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        onChangeContentVisibility={onChangeContentVisibility}\n      >\n        {content}\n      </AriaTooltip>\n    </ReactAriaTooltipTrigger>\n  );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAqD;AACrE,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,EAEhB,WAAW;AAAA,EACX,kBAAkB;AAAA,OAEb;AAKP,OAAO,gBAAgB;;;ACduE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,qBAAoB,8BAA6B,wBAAuB,iCAAgC;;;AD8CrO,SAgDJ,UAhDI,KAgDJ,YAhDI;AArBd,SAAS,aAAa,OAAiD;AACrE,SACE,oBAAC,wDAA0B,QAA1B,EACE,WAAC,EAAE,UAAU,MAAM;AAClB,QAAI,cAAc;AAAU,aAAO;AACnC,QAAI,cAAc;AAAQ,aAAO;AACjC,QAAI,cAAc;AAAS,aAAO;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,mBAAU;AAAA,UACV,uBAAO,iBAAiB,WAAW;AAAA,QACrC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,CAAC,mBAAU,KAAK,CAAC;AAAA,YACvC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ,IACF;AAEJ;AAOO,IAAM,cAAc,WAMzB,SAASA,aACT,IACA,KACc;AAFd,eAAE,YAAU,cAAc,0BAnE5B,IAmEE,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,sBAAY;AAAA,IACZ,sBAAY;AAAA,IACZ,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,wBAAe;AAAA,IACf,uBAAO;AAAA,EACT,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,OACI;AAAA,MACF;AAAA,QACE;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA;AAAA,IACF,IATD;AAAA,MAWE;AAAA,QACC;AAAA,QACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,sBAAW,MAAM,KAAK,OAAM,SAC1B,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ,CAAC;AAwDD,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MAGA;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,2BAA2B,SAAS;AAAA,YAC/C,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["AriaTooltip","Tooltip"]}

package/dist/__chunks/PTWXXDFF.js

@@ -0,0 +1,7 @@
+// css-module:../layout.module.css#css-module
+var layout_module_default = { "fullWidth": "_fullWidth_1ey57_1", "fullMaxWidth": "_fullMaxWidth_1ey57_5", "fullMaxHeight": "_fullMaxHeight_1ey57_9", "visibilityVisible": "_visibilityVisible_1ey57_13" };
+
+export {
+  layout_module_default
+};
+//# sourceMappingURL=PTWXXDFF.js.map

package/dist/__chunks/PTWXXDFF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../layout.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/layout.module.css\"; export default {\"fullWidth\":\"_fullWidth_1ey57_1\",\"fullMaxWidth\":\"_fullMaxWidth_1ey57_5\",\"fullMaxHeight\":\"_fullMaxHeight_1ey57_9\",\"visibilityVisible\":\"_visibilityVisible_1ey57_13\"}"],"mappings":";AAAqF,IAAO,wBAAQ,EAAC,aAAY,sBAAqB,gBAAe,yBAAwB,iBAAgB,0BAAyB,qBAAoB,8BAA6B;","names":[]}