@bolio-ui/core 3.0.0-alpha.2 → 3.0.0

package/dist/chunk-CY5KTINE.js

@@ -0,0 +1,107 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk26KDVRFSjs = require('./chunk-26KDVRFS.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Alert/Alert.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Alert/Alert.module.css.bolio-css-module-source
+var Alert_module_css_default = { "alert": "Alert-module_alert__Ghxl7", "icon": "Alert-module_icon__hcZdu", "body": "Alert-module_body__SuUYD", "title": "Alert-module_title__8yipK", "close": "Alert-module_close__ZPg5d" };
+
+// core/Alert/Alert.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var AlertComponent = _react2.default.forwardRef(
+  ({
+    children,
+    type = "default",
+    title,
+    icon,
+    filled = false,
+    light = false,
+    subtle = false,
+    onClose,
+    closeLabel = "Close",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const { color, borderColor, bgColor } = _react.useMemo.call(void 0, 
+      () => _chunk26KDVRFSjs.getStatusColor.call(void 0, type, { filled, light, subtle }, theme),
+      [type, filled, light, subtle, theme]
+    );
+    const alertStyle = {
+      border: `1px solid ${borderColor}`,
+      color,
+      backgroundColor: bgColor,
+      borderRadius: theme.layout.radius,
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0.75)} ${SCALES.pr(1)} ${SCALES.pb(0.75)} ${SCALES.pl(1)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        role: type === "error" || type === "warning" ? "alert" : "status",
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Alert_module_css_default.alert, className),
+        ...props,
+        style: alertStyle,
+        children: [
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Alert_module_css_default.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Alert_module_css_default.body, children: [
+            title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Alert_module_css_default.title, children: title }),
+            children
+          ] }),
+          onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              className: Alert_module_css_default.close,
+              "aria-label": closeLabel,
+              onClick: onClose,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertComponent.displayName = "BolioUIAlert";
+var Alert = _chunkMAICNLTYjs.with_scale_default.call(void 0, AlertComponent);
+var Alert_default = Alert;
+
+// core/Alert/index.ts
+var Alert_default2 = Alert_default;
+
+
+
+exports.Alert_default = Alert_default2;

package/dist/{chunk-IJGIEX5J.js → chunk-DEMQXB46.js}

@@ -13,6 +13,9 @@ var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -57,6 +60,7 @@ var ColorInputComponent = _react2.default.forwardRef(
     ...props
   }, ref) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
     const generatedId = _react.useId.call(void 0, );
     const inputId = props.id || generatedId;
@@ -122,9 +126,9 @@ var ColorInputComponent = _react2.default.forwardRef(
       "--colorinput-focus-border": colors.focusBorder,
       "--colorinput-placeholder": colors.placeholderColor,
       "--colorinput-color": colors.color,
-      "--colorinput-popup-bg": theme.palette.background,
+      "--colorinput-popup-bg": surface.bg,
       "--colorinput-popup-border": theme.palette.border,
-      "--colorinput-shadow": theme.expressiveness.shadowMedium
+      "--colorinput-shadow": surface.shadow
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",

package/dist/{chunk-3S6G7WGK.js → chunk-DYYSUJ35.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkFL6J36B7js = require('./chunk-FL6J36B7.js');
+var _chunkFLUNRVVGjs = require('./chunk-FLUNRVVG.js');
 
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
@@ -64,7 +64,7 @@ var ContextMenuComponent = _react2.default.forwardRef(
           children,
           point && // a new point opens a new menu, so it is placed there
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkFL6J36B7js.Menu_default,
+            _chunkFLUNRVVGjs.Menu_default,
             {
               visible: true,
               onVisibleChange: (visible) => change(visible),

package/dist/chunk-EUYSKHRS.js

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/surface.ts
+var getSurface = (theme, shadow = theme.expressiveness.shadowMedium) => {
+  const dark = theme.type === "dark";
+  return {
+    bg: dark ? theme.palette.accents_3 : theme.palette.background,
+    hover: dark ? theme.palette.accents_4 : theme.palette.accents_2,
+    shadow: dark ? `0 2px 6px rgb(0 0 0 / 40%), ${shadow}` : shadow
+  };
+};
+
+
+
+exports.getSurface = getSurface;

package/dist/{chunk-FL6J36B7.js → chunk-FLUNRVVG.js}

@@ -1,11 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAG2NWQYLjs = require('./chunk-AG2NWQYL.js');
+var _chunkWCTANCLGjs = require('./chunk-WCTANCLG.js');
 
 
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -130,13 +133,14 @@ var MenuList = ({
     const isCharacter = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
     if (isCharacter) typeahead(event.key, items, index);
   };
+  const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
   const listStyle = {
     "--menu-list-font-size": SCALES.font(0.875),
     "--menu-list-color": theme.palette.foreground,
-    "--menu-list-bg": theme.palette.background,
+    "--menu-list-bg": surface.bg,
     "--menu-list-border-color": theme.palette.border,
     "--menu-list-radius": theme.layout.radius,
-    "--menu-list-shadow": theme.expressiveness.shadowMedium
+    "--menu-list-shadow": surface.shadow
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuListContext.Provider, { value: { openSub, setOpenSub }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -228,7 +232,7 @@ var MenuComponent = _react2.default.forwardRef(
             onKeyDown: keyDownHandler
           }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkAG2NWQYLjs.dropdown_default,
+            _chunkWCTANCLGjs.dropdown_default,
             {
               parent: wrapperRef,
               visible,
@@ -321,7 +325,7 @@ var MenuItemBase = _react2.default.forwardRef(
     };
     const itemStyle = {
       "--menu-item-color": theme.palette.foreground,
-      "--menu-item-focus-bg": theme.palette.accents_2,
+      "--menu-item-focus-bg": _chunkEUYSKHRSjs.getSurface.call(void 0, theme).hover,
       "--menu-item-error-color": theme.palette.error,
       "--menu-item-error-focus-bg": theme.palette.errorLight,
       "--menu-item-error-focus-color": theme.palette.errorDark,

package/dist/chunk-FQWH4PDK.js

@@ -0,0 +1,165 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Chip/Chip.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Chip/ChipContext.ts
+
+var ChipContext = _react2.default.createContext(null);
+var useChipContext = () => _react2.default.useContext(ChipContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Chip/Chip.module.css.bolio-css-module-source
+var Chip_module_css_default = { "chip": "Chip-module_chip__r494r", "input": "Chip-module_input__GhNGk", "text": "Chip-module_text__sYRMh" };
+
+// core/Chip/Chip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ChipComponent = _react2.default.forwardRef(
+  ({
+    value,
+    checked: customChecked,
+    initialChecked = false,
+    onChange,
+    type = "primary",
+    disabled = false,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const group = useChipContext();
+    const [selfChecked, setSelfChecked] = _react.useState.call(void 0, initialChecked);
+    const checked = group ? group.value.includes(value) : customChecked !== void 0 ? customChecked : selfChecked;
+    const changeHandler = (event) => {
+      if (group) {
+        if (group.toggle) group.toggle(value);
+        return;
+      }
+      setSelfChecked(event.target.checked);
+      if (onChange) onChange(event.target.checked);
+    };
+    const { bg, color, border } = _chunkGJZT47MPjs.getVariantColors.call(void 0, theme.palette, type, "light");
+    const chipStyle = {
+      height: SCALES.height(2),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--chip-color": theme.palette.accents_6,
+      "--chip-border": theme.palette.accents_3,
+      "--chip-hover-bg": theme.palette.accents_1,
+      "--chip-checked-bg": bg,
+      "--chip-checked-color": color,
+      "--chip-checked-border": border,
+      "--chip-focus": theme.palette[type],
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Chip_module_css_default.chip, className), style: chipStyle, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          ref,
+          type: group && !group.multiple ? "radio" : "checkbox",
+          className: Chip_module_css_default.input,
+          name: group == null ? void 0 : group.name,
+          value,
+          checked,
+          disabled: disabled || (group == null ? void 0 : group.disabled),
+          onChange: changeHandler,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: Chip_module_css_default.text, children: [
+        checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            width: "14",
+            height: "14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m5 12 5 5L20 7" })
+          }
+        ),
+        children
+      ] })
+    ] });
+  }
+);
+ChipComponent.displayName = "BolioUIChip";
+var Chip = _chunkMAICNLTYjs.with_scale_default.call(void 0, ChipComponent);
+var Chip_default = Chip;
+
+// core/Chip/ChipGroup.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Chip/ChipGroup.module.css.bolio-css-module-source
+var ChipGroup_module_css_default = { "group": "ChipGroup-module_group__6ARIk" };
+
+// core/Chip/ChipGroup.tsx
+
+var ChipGroup = _react2.default.forwardRef(
+  ({
+    value: customValue,
+    initialValue = [],
+    onChange,
+    multiple = false,
+    disabled = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const name = _react.useId.call(void 0, );
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
+    const value = customValue !== void 0 ? customValue : selfValue;
+    const providerValue = _react.useMemo.call(void 0, 
+      () => ({
+        name,
+        multiple,
+        value,
+        disabled,
+        toggle: (chip) => {
+          const next = !multiple ? [chip] : value.includes(chip) ? value.filter((v) => v !== chip) : [...value, chip];
+          setSelfValue(next);
+          if (onChange) onChange(next);
+        }
+      }),
+      [name, multiple, value, disabled, onChange]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChipContext.Provider, { value: providerValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: multiple ? "group" : "radiogroup",
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ChipGroup_module_css_default.group, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ChipGroup.displayName = "BolioUIChipGroup";
+var ChipGroup_default = ChipGroup;
+
+// core/Chip/index.ts
+Chip_default.Group = ChipGroup_default;
+var Chip_default2 = Chip_default;
+
+
+
+exports.Chip_default = Chip_default2;

package/dist/chunk-FSO65ZAH.js

@@ -0,0 +1,249 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+
+
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Mention/Mention.tsx
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Mention/Mention.module.css.bolio-css-module-source
+var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94" };
+
+// core/Mention/Mention.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var getLabel = (option) => {
+  var _a;
+  return (_a = option.label) != null ? _a : option.value;
+};
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var MentionComponent = _react2.default.forwardRef(
+  ({
+    options,
+    trigger = "@",
+    value: customValue,
+    initialValue = "",
+    onChange,
+    onSelect,
+    placeholder,
+    rows = 3,
+    disabled = false,
+    type = "default",
+    emptyText = "No results",
+    className = "",
+    onKeyDown,
+    onBlur,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {});
+    const baseId = _react.useId.call(void 0, );
+    const listId = `${baseId}-list`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const field = _react.useRef.call(void 0, null);
+    const setRef = (node) => {
+      field.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
+    const text = isControlled ? customValue : selfValue;
+    const [caret, setCaret] = _react.useState.call(void 0, text.length);
+    const [dismissed, setDismissed] = _react.useState.call(void 0, false);
+    const [activeIndex, setActiveIndex] = _react.useState.call(void 0, -1);
+    const pendingCaret = _react.useRef.call(void 0, null);
+    const token = _react.useMemo.call(void 0, () => {
+      const t = escapeRegExp(trigger);
+      const match = new RegExp(`(^|\\s)${t}([^\\s${t}]*)$`).exec(
+        text.slice(0, caret)
+      );
+      return match ? { query: match[2], start: caret - match[2].length - trigger.length } : null;
+    }, [text, caret, trigger]);
+    const visible = _react.useMemo.call(void 0, 
+      () => token ? options.filter(
+        (option) => getLabel(option).toLowerCase().includes(token.query.toLowerCase())
+      ) : [],
+      [options, token]
+    );
+    const open = !!token && !dismissed && !disabled;
+    const expanded = open && visible.length > 0;
+    _react.useEffect.call(void 0, () => {
+      setActiveIndex(
+        open ? visible.findIndex((option) => !option.disabled) : -1
+      );
+    }, [open, token == null ? void 0 : token.query]);
+    _react.useEffect.call(void 0, () => {
+      var _a, _b;
+      if (activeIndex < 0) return;
+      (_b = (_a = document.getElementById(optionId(activeIndex))) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [activeIndex]);
+    _react.useLayoutEffect.call(void 0, () => {
+      if (pendingCaret.current === null || !field.current) return;
+      field.current.setSelectionRange(
+        pendingCaret.current,
+        pendingCaret.current
+      );
+      pendingCaret.current = null;
+    }, [text]);
+    const update = (next) => {
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const choose = (option) => {
+      if (option.disabled || !token) return;
+      const inserted = `${trigger}${option.value} `;
+      const next = text.slice(0, token.start) + inserted + text.slice(caret);
+      const position = token.start + inserted.length;
+      pendingCaret.current = position;
+      setCaret(position);
+      update(next);
+      if (onSelect) onSelect(option);
+    };
+    const changeHandler = (event) => {
+      setCaret(event.target.selectionStart);
+      setDismissed(false);
+      update(event.target.value);
+    };
+    const move = (direction) => {
+      const count = visible.length;
+      let index = activeIndex;
+      for (let step = 0; step < count; step++) {
+        index = (index + direction + count) % count;
+        if (!visible[index].disabled) return setActiveIndex(index);
+      }
+    };
+    const keyDownHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented || !expanded) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        move(event.key === "ArrowDown" ? 1 : -1);
+      } else if ((event.key === "Enter" || event.key === "Tab") && activeIndex >= 0) {
+        event.preventDefault();
+        choose(visible[activeIndex]);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setDismissed(true);
+      }
+    };
+    const syncCaret = (event) => {
+      const next = event.currentTarget.selectionStart;
+      if (next !== caret) {
+        setCaret(next);
+        setDismissed(false);
+      }
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setDismissed(true);
+    };
+    const mentionStyle = {
+      "--mention-font-size": SCALES.font(0.875),
+      "--mention-width": SCALES.width(1, "100%"),
+      "--mention-height": SCALES.height(1, "auto"),
+      "--mention-margin-top": SCALES.mt(0),
+      "--mention-margin-right": SCALES.mr(0),
+      "--mention-margin-bottom": SCALES.mb(0),
+      "--mention-margin-left": SCALES.ml(0),
+      "--mention-text-color": theme.palette.foreground,
+      "--mention-bg": surface.bg,
+      "--mention-border-color": theme.palette.border,
+      "--mention-radius": theme.layout.radius,
+      "--mention-field-color": colors.color,
+      "--mention-field-bg": colors.bgColor,
+      "--mention-field-border": colors.borderColor,
+      "--mention-field-hover-bg": colors.hoverBgColor,
+      "--mention-field-hover-border": colors.hoverBorder,
+      "--mention-focus-border-color": colors.focusBorder,
+      "--mention-placeholder-color": colors.placeholderColor,
+      "--mention-shadow": surface.shadow,
+      "--mention-active-bg": surface.hover,
+      "--mention-empty-color": theme.palette.accents_5,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Mention_module_css_default.mention, className),
+        style: mentionStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "textarea",
+            {
+              ref: setRef,
+              "aria-autocomplete": "list",
+              "aria-controls": expanded ? listId : void 0,
+              "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              value: text,
+              rows,
+              placeholder,
+              disabled,
+              onChange: changeHandler,
+              onKeyDown: keyDownHandler,
+              onKeyUp: syncCaret,
+              onClick: syncCaret,
+              onSelect: syncCaret,
+              onBlur: blurHandler,
+              className: Mention_module_css_default.field,
+              ...props
+            }
+          ),
+          expanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { id: listId, role: "listbox", className: Mention_module_css_default.list, children: visible.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "li",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": index === activeIndex,
+              "aria-disabled": option.disabled || void 0,
+              className: _chunk5KUROAEPjs.joinClasses.call(void 0, Mention_module_css_default.option, {
+                [Mention_module_css_default.active]: index === activeIndex,
+                [Mention_module_css_default.disabled]: option.disabled
+              }),
+              onMouseDown: (event) => {
+                event.preventDefault();
+                choose(option);
+              },
+              onMouseMove: () => !option.disabled && setActiveIndex(index),
+              children: getLabel(option)
+            },
+            option.value
+          )) }),
+          open && visible.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Mention_module_css_default.empty, children: emptyText })
+        ]
+      }
+    );
+  }
+);
+MentionComponent.displayName = "BolioUIMention";
+var Mention = _chunkMAICNLTYjs.with_scale_default.call(void 0, MentionComponent);
+var Mention_default = Mention;
+
+// core/Mention/index.ts
+var Mention_default2 = Mention_default;
+
+
+
+exports.Mention_default = Mention_default2;