@quen-ui/components 1.0.0 → 1.1.0

package/dist/Layout/types.d.ts

@@ -11,6 +11,8 @@ export interface ILayoutContextProps {
     toggleSidebar: () => void;
     /** Toggles desktop sidebar collapse state */
     toggleSliderCollapse: () => void;
+    setIsFooter: (isFooter: boolean) => void;
+    isFooter: boolean;
 }
 export interface ILayoutHeaderProps {
     /** Custom CSS classes */
@@ -30,6 +32,10 @@ export interface ILayoutHeaderProps {
 export interface ILayoutProps {
     /**	Viewport width (px) for mobile/desktop switch */
     breakpoint?: number;
+    /** Custom CSS classes */
+    className?: string;
+    /**	Inline styles */
+    style?: React.CSSProperties;
 }
 export interface ILayoutSidebarProps {
     /** Desktop collapsed state */

package/dist/Menu/MenuItem.cjs.js

@@ -24,6 +24,7 @@ const MenuItem = ({
   const refMenuItem = React.useRef(null);
   const hasChildren = !!item.children?.length;
   const [visible, setVisible] = React.useState(false);
+  const { key: _, ...otherProps } = item;
   const handleMouseEnter = () => {
     setVisible(true);
   };
@@ -42,13 +43,20 @@ const MenuItem = ({
         className: helpers.cnMerge(getItemClassName(item), className),
         active: activeKeys?.includes(getItemKey(item)),
         onClick: getItemOnClick(item),
+        as: item.as,
+        ...otherProps,
         children: [
           getItemLeftContent(item),
           /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
               size,
-              className: helpers.cnMerge({ "quen-ui--menu__item_group": hasChildren && direction === "vertical" }, "quen-ui--menu__item_label"),
+              className: helpers.cnMerge(
+                {
+                  "quen-ui--menu__item_group": hasChildren && direction === "vertical"
+                },
+                "quen-ui--menu__item_label"
+              ),
               children: getItemLabel(item)
             }
           ),

package/dist/Menu/MenuItem.es.js

@@ -23,6 +23,7 @@ const MenuItem = ({
   const refMenuItem = useRef(null);
   const hasChildren = !!item.children?.length;
   const [visible, setVisible] = useState(false);
+  const { key: _, ...otherProps } = item;
   const handleMouseEnter = () => {
     setVisible(true);
   };
@@ -41,13 +42,20 @@ const MenuItem = ({
         className: cnMerge(getItemClassName(item), className),
         active: activeKeys?.includes(getItemKey(item)),
         onClick: getItemOnClick(item),
+        as: item.as,
+        ...otherProps,
         children: [
           getItemLeftContent(item),
           /* @__PURE__ */ jsx(
             Text,
             {
               size,
-              className: cnMerge({ "quen-ui--menu__item_group": hasChildren && direction === "vertical" }, "quen-ui--menu__item_label"),
+              className: cnMerge(
+                {
+                  "quen-ui--menu__item_group": hasChildren && direction === "vertical"
+                },
+                "quen-ui--menu__item_label"
+              ),
               children: getItemLabel(item)
             }
           ),

package/dist/Menu/styles.cjs.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Flex = require("../Flex/Flex.cjs.js");
 const MenuItemStyled = styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "active", "hover", "leftContent", "label"].includes(prop)
 }).attrs((props) => ({
   className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
 }))`
@@ -18,6 +18,7 @@ const MenuItemStyled = styled.button.withConfig({
   transition: background 0.2s ease;
   background: transparent;
   justify-content: flex-start;
+  text-decoration: none;
 
   color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
 
@@ -44,6 +45,7 @@ const MenuItemStyled = styled.button.withConfig({
 
   .quen-ui--menu__item_label {
     width: 100%;
+    text-align: left;
   }
 
   &:hover {

package/dist/Menu/styles.es.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import Flex from "../Flex/Flex.es.js";
 const MenuItemStyled = styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "active", "hover", "leftContent", "label"].includes(prop)
 }).attrs((props) => ({
   className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
 }))`
@@ -16,6 +16,7 @@ const MenuItemStyled = styled.button.withConfig({
   transition: background 0.2s ease;
   background: transparent;
   justify-content: flex-start;
+  text-decoration: none;
 
   color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
 
@@ -42,6 +43,7 @@ const MenuItemStyled = styled.button.withConfig({
 
   .quen-ui--menu__item_label {
     width: 100%;
+    text-align: left;
   }
 
   &:hover {

package/dist/Menu/types.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, JSX } from 'react';
 import { TQuenSize } from '../types/size';
 export interface IMenuDefaultItem {
     /** Unique item identifier */
@@ -15,6 +15,9 @@ export interface IMenuDefaultItem {
     disabled?: boolean;
     /** Custom CSS classes */
     className?: string;
+    /** Renders as custom element (e.g., "a" for links) */
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    [key: string]: any;
 }
 export type TMenuPropGetItemKey<Item> = (item: Item) => string;
 export type TMenuPropGetItemIcon<Item> = (item: Item) => React.ReactNode;

package/dist/Modal/Modal.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const require$$2 = require("react-dom");
+const reactDom = require("react-dom");
 const reactTransitionState = require("react-transition-state");
 const styles = require("./styles.cjs.js");
 const Title = require("../typography/Title/Title.cjs.js");
@@ -25,7 +25,6 @@ const Modal = ({
   width,
   ...props
 }) => {
-  console.log(open);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -51,15 +50,16 @@ const Modal = ({
     };
   }, []);
   React.useEffect(() => {
+    const overflow = document.body.style.overflow;
     if (state.isEnter) {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = overflow;
     };
   }, [state]);
   if (state.isEnter && container) {
-    return require$$2.createPortal(
+    return reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(styles.ModalContainer, { status: state.status, zIndex, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalStyled, { fullScreen, className, size, width, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalHeaderStyled, { children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),

package/dist/Modal/Modal.es.js

@@ -24,7 +24,6 @@ const Modal = ({
   width,
   ...props
 }) => {
-  console.log(open);
   const [state, toggle] = useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -50,11 +49,12 @@ const Modal = ({
     };
   }, []);
   useEffect(() => {
+    const overflow = document.body.style.overflow;
     if (state.isEnter) {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = overflow;
     };
   }, [state]);
   if (state.isEnter && container) {

package/dist/Modal/styles.cjs.js

@@ -58,7 +58,9 @@ const ModalStyled = styled.div.withConfig({
           }
         `};
 `;
-const ModalContentStyled = styled.div`
+const ModalContentStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["scrollable"].includes(prop)
+})`
   ${({ scrollable }) => scrollable && styled.css`
       overflow-y: auto;
       max-height: 60vh;

package/dist/Modal/styles.es.js

@@ -56,7 +56,9 @@ const ModalStyled = styled.div.withConfig({
           }
         `};
 `;
-const ModalContentStyled = styled.div`
+const ModalContentStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["scrollable"].includes(prop)
+})`
   ${({ scrollable }) => scrollable && css`
       overflow-y: auto;
       max-height: 60vh;

package/dist/Notification/NotificationInstance.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const require$$2 = require("react-dom");
+const reactDom = require("react-dom");
 const helpers = require("@quen-ui/helpers");
 const NotificationsStore = require("./NotificationsStore.cjs.js");
 const styles = require("./styles.cjs.js");
@@ -72,7 +72,7 @@ const NotificationInstance = () => {
     setNotifications([...NotificationsStore.data]);
   };
   if (element) {
-    return require$$2.createPortal(
+    return reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         topNotifications.length ? /* @__PURE__ */ jsxRuntime.jsx(
           styles.NotificationsWrapper,

package/dist/RichTextEditor/plugins.cjs.js

@@ -1,35 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const client = require("../_virtual/client.cjs.js");
+const iconsReact = require("@tabler/icons-react");
+const client = require("react-dom/client");
 const theme = require("@quen-ui/theme");
 const RichTextEditorTableControl = require("./RichTextEditorTableControl.cjs.js");
 const RichTextEditorColorControl = require("./RichTextEditorColorControl.cjs.js");
 const helpers = require("./helpers.cjs.js");
-const IconAlignLeft = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignLeft.cjs.js");
-const IconAlignCenter = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignCenter.cjs.js");
-const IconAlignRight = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignRight.cjs.js");
-const IconAlignJustified = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignJustified.cjs.js");
-const IconLink = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconLink.cjs.js");
-const IconImageInPicture = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconImageInPicture.cjs.js");
-const IconTextColor = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconTextColor.cjs.js");
-const IconClearFormatting = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconClearFormatting.cjs.js");
-const IconArrowBackUp = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconArrowBackUp.cjs.js");
-const IconArrowForwardUp = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconArrowForwardUp.cjs.js");
-const IconTable = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconTable.cjs.js");
-const IconBold = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconBold.cjs.js");
-const IconItalic = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconItalic.cjs.js");
-const IconUnderline = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconUnderline.cjs.js");
-const IconStrikethrough = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconStrikethrough.cjs.js");
-const IconHighlight = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconHighlight.cjs.js");
-const IconBlockquote = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconBlockquote.cjs.js");
-const IconH1 = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconH1.cjs.js");
-const IconH2 = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconH2.cjs.js");
-const IconSuperscript = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconSuperscript.cjs.js");
-const IconSubscript = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconSubscript.cjs.js");
-const IconList = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconList.cjs.js");
-const IconListNumbers = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconListNumbers.cjs.js");
-const IconCheckbox = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconCheckbox.cjs.js");
 const onPluginLink = ({ exec }) => {
   const url = window.prompt(
     "Paste the URL (start with http:// or https://):",
@@ -73,7 +50,7 @@ const onTablePlugin = ({
   const handleClose = () => {
     container.remove();
   };
-  const root = client.clientExports.createRoot(container);
+  const root = client.createRoot(container);
   root.render(
     /* @__PURE__ */ jsxRuntime.jsx(
       RichTextEditorTableControl,
@@ -95,7 +72,7 @@ const onColorPickerPlugin = ({
   const currentColor = savedRange ? helpers.getCurrentTextColor(savedRange) : null;
   const container = document.createElement("div");
   document.body.appendChild(container);
-  const root = client.clientExports.createRoot(container);
+  const root = client.createRoot(container);
   const closePopup = () => {
     try {
       root.unmount();
@@ -240,7 +217,7 @@ const insertCheckbox = (editor) => {
 const checkBoxPlugin = {
   key: "checkbox",
   title: "Check list",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconCheckbox.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheckbox, {}),
   action: ({ editor, context }) => {
     editor?.focus();
     const prev = context.getPluginState("checkbox")?.active ?? false;
@@ -276,7 +253,7 @@ const checkBoxPlugin = {
 };
 const boldPlugin = {
   key: "bold",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconBold.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBold, {}),
   title: "Bold (Ctrl/Cmd+B)",
   action: ({ exec, context, editor }) => {
     const prev = context.getPluginState("bold")?.active ?? false;
@@ -290,7 +267,7 @@ const boldPlugin = {
 };
 const italicPlugin = {
   key: "italic",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconItalic.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconItalic, {}),
   title: "Italic (Ctrl/Cmd+I)",
   action: ({ exec, context, editor }) => {
     const prev = context.getPluginState("italic")?.active ?? false;
@@ -304,7 +281,7 @@ const italicPlugin = {
 };
 const underlinePlugin = {
   key: "underline",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconUnderline.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconUnderline, {}),
   title: "Underlined (Ctrl/Cmd+U)",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("underline")?.active ?? false;
@@ -317,7 +294,7 @@ const underlinePlugin = {
 };
 const strikethroughPlugin = {
   key: "strikethrough",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconStrikethrough.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconStrikethrough, {}),
   title: "Strikethrough",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("strikethrough")?.active ?? false;
@@ -330,7 +307,7 @@ const strikethroughPlugin = {
 };
 const highlightPlugin = {
   key: "highlight",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconHighlight.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHighlight, {}),
   title: "Highlight",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("highlight")?.active ?? false;
@@ -347,7 +324,7 @@ const highlightPlugin = {
 };
 const blockquotePlugin = {
   key: "blockquote",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconBlockquote.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconBlockquote, {}),
   title: "Blockquote",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("blockquote")?.active ?? false;
@@ -377,7 +354,7 @@ const blockquotePlugin = {
 };
 const superscriptPlugin = {
   key: "superscript",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconSuperscript.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSuperscript, {}),
   title: "Superscript",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("superscript")?.active ?? false;
@@ -394,7 +371,7 @@ const superscriptPlugin = {
 };
 const h1Plugin = {
   key: "h1",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconH1.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH1, {}),
   title: "H1 heading",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("h1")?.active ?? false;
@@ -416,7 +393,7 @@ const h1Plugin = {
 };
 const h2Plugin = {
   key: "h2",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconH2.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconH2, {}),
   title: "H2 heading",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("h2")?.active ?? false;
@@ -438,7 +415,7 @@ const h2Plugin = {
 };
 const subscriptPlugin = {
   key: "subscript",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconSubscript.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSubscript, {}),
   title: "Subscript",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("subscript")?.active ?? false;
@@ -455,7 +432,7 @@ const subscriptPlugin = {
 };
 const bulletedListPlugin = {
   key: "bulletedList",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconList.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconList, {}),
   title: "Bulleted List",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("bulletedList")?.active ?? false;
@@ -472,7 +449,7 @@ const bulletedListPlugin = {
 };
 const numberedListPlugin = {
   key: "numberedList",
-  label: /* @__PURE__ */ jsxRuntime.jsx(IconListNumbers.default, {}),
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconListNumbers, {}),
   title: "Numbered list",
   action: ({ exec, context }) => {
     const prev = context.getPluginState("numberedList")?.active ?? false;
@@ -502,61 +479,61 @@ const defaultPlugins = [
   numberedListPlugin,
   {
     key: "alignLeft",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignLeft.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignLeft, {}),
     title: "Align left",
     action: ({ exec }) => exec("justifyLeft")
   },
   {
     key: "alignCenter",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignCenter.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignCenter, {}),
     title: "Align center",
     action: ({ exec }) => exec("justifyCenter")
   },
   {
     key: "alignRight",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignRight.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignRight, {}),
     title: "Align right",
     action: ({ exec }) => exec("justifyRight")
   },
   {
     key: "justify",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignJustified.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignJustified, {}),
     title: "Justify",
     action: ({ exec }) => exec("justifyFull")
   },
   {
     key: "link",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconLink.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, {}),
     title: "Paste link (Ctrl/Cmd+K)",
     action: onPluginLink
   },
   {
     key: "image",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconImageInPicture.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconImageInPicture, {}),
     title: "Insert image",
     action: onPluginImage
   },
   {
     key: "textColor",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTextColor, {}),
     title: "Text color",
     action: onColorPickerPlugin
   },
   {
     key: "clear",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconClearFormatting.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconClearFormatting, {}),
     title: "Clear formatting",
     action: onClearFormattingPlugin
   },
   {
     key: "undo",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconArrowBackUp.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowBackUp, {}),
     title: "Undo",
     action: ({ exec }) => exec("undo")
   },
   {
     key: "redo",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconArrowForwardUp.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowForwardUp, {}),
     title: "Redo",
     action: ({ exec }) => exec("redo")
   },
@@ -564,7 +541,7 @@ const defaultPlugins = [
   {
     key: "table",
     title: "Table",
-    label: /* @__PURE__ */ jsxRuntime.jsx(IconTable.default, {}),
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTable, {}),
     action: onTablePlugin
   }
 ];

package/dist/RichTextEditor/plugins.es.js

@@ -1,33 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clientExports } from "../_virtual/client.es.js";
+import { IconAlignLeft, IconAlignCenter, IconAlignRight, IconAlignJustified, IconLink, IconImageInPicture, IconTextColor, IconClearFormatting, IconArrowBackUp, IconArrowForwardUp, IconTable, IconBold, IconItalic, IconUnderline, IconStrikethrough, IconHighlight, IconBlockquote, IconH1, IconH2, IconSuperscript, IconSubscript, IconList, IconListNumbers, IconCheckbox } from "@tabler/icons-react";
+import { createRoot } from "react-dom/client";
 import { QuenUIProvider, QuenUILightTheme } from "@quen-ui/theme";
 import RichTextEditorTableControl from "./RichTextEditorTableControl.es.js";
 import RichTextEditorColorControl from "./RichTextEditorColorControl.es.js";
 import { isCursorInTag, getCurrentTextColor, getCurrentBlock, findClosestAncestorElement, unwrapInlineColorSpans, insertNodeAtSelection, setCursorAtEnd } from "./helpers.es.js";
-import IconAlignLeft from "../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignLeft.es.js";
-import IconAlignCenter from "../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignCenter.es.js";
-import IconAlignRight from "../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignRight.es.js";
-import IconAlignJustified from "../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignJustified.es.js";
-import IconLink from "../node_modules/@tabler/icons-react/dist/esm/icons/IconLink.es.js";
-import IconImageInPicture from "../node_modules/@tabler/icons-react/dist/esm/icons/IconImageInPicture.es.js";
-import IconTextColor from "../node_modules/@tabler/icons-react/dist/esm/icons/IconTextColor.es.js";
-import IconClearFormatting from "../node_modules/@tabler/icons-react/dist/esm/icons/IconClearFormatting.es.js";
-import IconArrowBackUp from "../node_modules/@tabler/icons-react/dist/esm/icons/IconArrowBackUp.es.js";
-import IconArrowForwardUp from "../node_modules/@tabler/icons-react/dist/esm/icons/IconArrowForwardUp.es.js";
-import IconTable from "../node_modules/@tabler/icons-react/dist/esm/icons/IconTable.es.js";
-import IconBold from "../node_modules/@tabler/icons-react/dist/esm/icons/IconBold.es.js";
-import IconItalic from "../node_modules/@tabler/icons-react/dist/esm/icons/IconItalic.es.js";
-import IconUnderline from "../node_modules/@tabler/icons-react/dist/esm/icons/IconUnderline.es.js";
-import IconStrikethrough from "../node_modules/@tabler/icons-react/dist/esm/icons/IconStrikethrough.es.js";
-import IconHighlight from "../node_modules/@tabler/icons-react/dist/esm/icons/IconHighlight.es.js";
-import IconBlockquote from "../node_modules/@tabler/icons-react/dist/esm/icons/IconBlockquote.es.js";
-import IconH1 from "../node_modules/@tabler/icons-react/dist/esm/icons/IconH1.es.js";
-import IconH2 from "../node_modules/@tabler/icons-react/dist/esm/icons/IconH2.es.js";
-import IconSuperscript from "../node_modules/@tabler/icons-react/dist/esm/icons/IconSuperscript.es.js";
-import IconSubscript from "../node_modules/@tabler/icons-react/dist/esm/icons/IconSubscript.es.js";
-import IconList from "../node_modules/@tabler/icons-react/dist/esm/icons/IconList.es.js";
-import IconListNumbers from "../node_modules/@tabler/icons-react/dist/esm/icons/IconListNumbers.es.js";
-import IconCheckbox from "../node_modules/@tabler/icons-react/dist/esm/icons/IconCheckbox.es.js";
 const onPluginLink = ({ exec }) => {
   const url = window.prompt(
     "Paste the URL (start with http:// or https://):",
@@ -71,7 +48,7 @@ const onTablePlugin = ({
   const handleClose = () => {
     container.remove();
   };
-  const root = clientExports.createRoot(container);
+  const root = createRoot(container);
   root.render(
     /* @__PURE__ */ jsx(
       RichTextEditorTableControl,
@@ -93,7 +70,7 @@ const onColorPickerPlugin = ({
   const currentColor = savedRange ? getCurrentTextColor(savedRange) : null;
   const container = document.createElement("div");
   document.body.appendChild(container);
-  const root = clientExports.createRoot(container);
+  const root = createRoot(container);
   const closePopup = () => {
     try {
       root.unmount();

package/dist/index.cjs.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Title = require("./typography/Title/Title.cjs.js");
+const Text = require("./typography/Text/Text.cjs.js");
+const Button = require("./Button/Button.cjs.js");
+const Card = require("./Card/Card.cjs.js");
+const Flex = require("./Flex/Flex.cjs.js");
+const index = require("./Layout/index.cjs.js");
+const index$1 = require("./Tabs/index.cjs.js");
+const Alert = require("./Alert/Alert.cjs.js");
+const Avatar = require("./Avatar/Avatar.cjs.js");
+const Badge = require("./Badge/Badge.cjs.js");
+const types = require("./Badge/types.cjs.js");
+const Breadcrumbs = require("./Breadcrumbs/Breadcrumbs.cjs.js");
+const index$2 = require("./Checkbox/index.cjs.js");
+const Divider = require("./Divider/Divider.cjs.js");
+const Drawer = require("./Drawer/Drawer.cjs.js");
+const Dropdown = require("./Dropdown/Dropdown.cjs.js");
+const TextField = require("./TextField/TextField.cjs.js");
+const Image = require("./Image/Image.cjs.js");
+const Loader = require("./Loader/Loader.cjs.js");
+const InputNumber = require("./InputNumber/InputNumber.cjs.js");
+const Select = require("./Select/Select.cjs.js");
+const Modal = require("./Modal/Modal.cjs.js");
+const NotificationInstance = require("./Notification/NotificationInstance.cjs.js");
+const types$1 = require("./Notification/types.cjs.js");
+const Progress = require("./Progress/Progress.cjs.js");
+const index$3 = require("./RadioButton/index.cjs.js");
+const Switch = require("./Switch/Switch.cjs.js");
+const Tag = require("./Tag/Tag.cjs.js");
+const Textarea = require("./Textarea/Textarea.cjs.js");
+const Tooltip = require("./Tooltip/Tooltip.cjs.js");
+const Menu = require("./Menu/Menu.cjs.js");
+const EmptyState = require("./EmptyState/EmptyState.cjs.js");
+const Pagination = require("./Pagination/Pagination.cjs.js");
+const index$4 = require("./Accordion/index.cjs.js");
+const index$5 = require("./message/index.cjs.js");
+const index$6 = require("./Form/index.cjs.js");
+const Calendar = require("./Calendar/Calendar.cjs.js");
+const InputDate = require("./InputDate/InputDate.cjs.js");
+const Slider = require("./Slider/Slider.cjs.js");
+const index$7 = require("./Skeleton/index.cjs.js");
+const Spoiler = require("./Spoiler/Spoiler.cjs.js");
+const Highlight = require("./Highlight/Highlight.cjs.js");
+const LoadingOverlay = require("./LoadingOverlay/LoadingOverlay.cjs.js");
+const index$8 = require("./ColorPicker/index.cjs.js");
+const RichTextEditor = require("./RichTextEditor/RichTextEditor.cjs.js");
+exports.Title = Title;
+exports.Text = Text;
+exports.Button = Button;
+exports.Card = Card;
+exports.Flex = Flex;
+exports.Layout = index.Layout;
+exports.Tabs = index$1;
+exports.Alert = Alert;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
+exports.BADGE_COLOR = types.BADGE_COLOR;
+exports.Breadcrumbs = Breadcrumbs;
+exports.Checkbox = index$2.Checkbox;
+exports.Divider = Divider;
+exports.Drawer = Drawer;
+exports.Dropdown = Dropdown;
+exports.TextField = TextField;
+exports.Image = Image;
+exports.Loader = Loader;
+exports.InputNumber = InputNumber;
+exports.Select = Select;
+exports.Modal = Modal;
+exports.NotificationInstance = NotificationInstance.NotificationInstance;
+exports.notifications = NotificationInstance.notifications;
+exports.NOTIFICATION_STATUSES = types$1.NOTIFICATION_STATUSES;
+exports.Progress = Progress;
+exports.RadioButton = index$3.RadioButton;
+exports.Switch = Switch;
+exports.Tag = Tag;
+exports.Textarea = Textarea;
+exports.Tooltip = Tooltip;
+exports.Menu = Menu;
+exports.EmptyState = EmptyState;
+exports.Pagination = Pagination;
+exports.Accordion = index$4.Accordion;
+exports.message = index$5.message;
+exports.Form = index$6.Form;
+exports.Calendar = Calendar;
+exports.InputDate = InputDate;
+exports.Slider = Slider;
+exports.Skeleton = index$7.Skeleton;
+exports.Spoiler = Spoiler;
+exports.Highlight = Highlight;
+exports.LoadingOverlay = LoadingOverlay;
+exports.ColorPicker = index$8.ColorPicker;
+exports.RichTextEditor = RichTextEditor;