@lindle/linoardo 1.0.49 → 1.0.51

package/dist/index.cjs

@@ -1,13 +1,16 @@
 'use strict';
 
-var React = require('react');
+var React15 = require('react');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
-var react = require('@tiptap/react');
+var CodeBlockLowlight = require('@tiptap/extension-code-block-lowlight');
 var StarterKit = require('@tiptap/starter-kit');
-var marked = require('marked');
+var Underline = require('@tiptap/extension-underline');
+var react = require('@tiptap/react');
+var lowlight$1 = require('lowlight');
 var TurndownService = require('turndown');
+var marked = require('marked');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -29,8 +32,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
+var CodeBlockLowlight__default = /*#__PURE__*/_interopDefault(CodeBlockLowlight);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+var Underline__default = /*#__PURE__*/_interopDefault(Underline);
 var TurndownService__default = /*#__PURE__*/_interopDefault(TurndownService);
 
 // src/Containment/Button/index.tsx
@@ -41,7 +46,7 @@ var iconBaseClasses = {
 };
 
 // src/Containment/Button/states.button.ts
-var base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
+var base = "btn-base  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
 var blackAndWhitePaletteClasses = {
   solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
   outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white dark:border-white dark:text-white dark:bg-transparent dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
@@ -138,9 +143,7 @@ var resolveIconClassName = (icon) => {
   }
   const [library, providedName] = icon;
   const normalizedLibrary = library.trim();
-  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
-    normalizedLibrary
-  ];
+  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
   const iconName = providedName.trim();
   if (!iconName) {
     return baseClasses.join(" ");
@@ -169,7 +172,7 @@ var iconOnlyIconSizeClasses = {
   large: "text-xl",
   "x-large": "text-2xl"
 };
-var ButtonBase = React__namespace.forwardRef(
+var ButtonBase = React15__namespace.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -226,13 +229,13 @@ var ButtonBase = React__namespace.forwardRef(
 );
 ButtonBase.displayName = "Button";
 var isButtonElement = (element) => {
-  if (!React__namespace.isValidElement(element)) {
+  if (!React15__namespace.isValidElement(element)) {
     return false;
   }
   const elementType = element.type;
   return element.type === ButtonBase || elementType.displayName === ButtonBase.displayName;
 };
-var ButtonGroup = React__namespace.forwardRef((props, ref) => {
+var ButtonGroup = React15__namespace.forwardRef((props, ref) => {
   const {
     variant,
     color,
@@ -252,11 +255,11 @@ var ButtonGroup = React__namespace.forwardRef((props, ref) => {
   const blockClass = block ? "w-full [&>*]:flex-1" : void 0;
   const attachedClass = attached ? vertical ? "[&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none" : "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none" : void 0;
   const enhanceChild = (child) => {
-    if (!React__namespace.isValidElement(child)) {
+    if (!React15__namespace.isValidElement(child)) {
       return child;
     }
     if (isButtonElement(child)) {
-      return React__namespace.cloneElement(child, {
+      return React15__namespace.cloneElement(child, {
         variant: child.props.variant ?? variant,
         color: child.props.color ?? color,
         size: child.props.size ?? size,
@@ -267,14 +270,14 @@ var ButtonGroup = React__namespace.forwardRef((props, ref) => {
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React__namespace.Children.map(child.props.children, enhanceChild);
+      const nestedChildren = React15__namespace.Children.map(child.props.children, enhanceChild);
       if (nestedChildren !== child.props.children) {
-        return React__namespace.cloneElement(child, void 0, nestedChildren);
+        return React15__namespace.cloneElement(child, void 0, nestedChildren);
       }
     }
     return child;
   };
-  const resolvedChildren = React__namespace.Children.map(children, enhanceChild);
+  const resolvedChildren = React15__namespace.Children.map(children, enhanceChild);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -405,7 +408,7 @@ var chipSizeClasses = {
   large: "h-8 text-sm px-3",
   "x-large": "h-9 text-base px-3.5"
 };
-var Chip = React.forwardRef(
+var Chip = React15.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -602,7 +605,7 @@ var Badge = ({
   className,
   ...rest
 }) => {
-  const hasChildren = React__namespace.Children.count(children) > 0;
+  const hasChildren = React15__namespace.Children.count(children) > 0;
   const iconClassName = resolveIconClassName3(icon);
   const isNumberContent = typeof content === "number" && Number.isFinite(content);
   let displayValue = content;
@@ -743,7 +746,7 @@ var accentClasses = {
     indicator: "bg-gray-900 dark:bg-gray-100"
   }
 };
-var ListItem = React__namespace.forwardRef((props, ref) => {
+var ListItem = React15__namespace.forwardRef((props, ref) => {
   const {
     component,
     href,
@@ -868,13 +871,13 @@ var listRoundedClasses = {
   pill: "rounded-full"
 };
 var isListItemElement = (element) => {
-  if (!React__namespace.isValidElement(element)) {
+  if (!React15__namespace.isValidElement(element)) {
     return false;
   }
   const elementType = element.type;
   return element.type === Item_default || elementType.displayName === Item_default.displayName;
 };
-var List = React__namespace.forwardRef((props, ref) => {
+var List = React15__namespace.forwardRef((props, ref) => {
   const {
     variant = "solid",
     density = "default",
@@ -896,11 +899,11 @@ var List = React__namespace.forwardRef((props, ref) => {
   const navClass = nav ? "py-1" : void 0;
   const accentColor = color;
   const enhanceChild = (child) => {
-    if (!React__namespace.isValidElement(child)) {
+    if (!React15__namespace.isValidElement(child)) {
       return child;
     }
     if (isListItemElement(child)) {
-      return React__namespace.cloneElement(child, {
+      return React15__namespace.cloneElement(child, {
         density: child.props.density ?? density,
         lines: child.props.lines ?? lines,
         nav: child.props.nav ?? nav,
@@ -910,14 +913,14 @@ var List = React__namespace.forwardRef((props, ref) => {
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React__namespace.Children.map(child.props.children, enhanceChild);
+      const nestedChildren = React15__namespace.Children.map(child.props.children, enhanceChild);
       if (nestedChildren !== child.props.children) {
-        return React__namespace.cloneElement(child, void 0, nestedChildren);
+        return React15__namespace.cloneElement(child, void 0, nestedChildren);
       }
     }
     return child;
   };
-  const resolvedChildren = React__namespace.Children.map(children, enhanceChild);
+  const resolvedChildren = React15__namespace.Children.map(children, enhanceChild);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -956,7 +959,7 @@ var offsetClasses = {
 var menuWrapperBaseClasses = "absolute z-50";
 var menuBaseClasses = "min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700/80 dark:bg-gray-900/95 dark:text-gray-100 dark:shadow-black/30 dark:ring-white/10 dark:focus-visible:ring-offset-gray-900";
 var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px] dark:bg-black/50";
-var Menu = React__namespace.forwardRef((props, ref) => {
+var Menu = React15__namespace.forwardRef((props, ref) => {
   const {
     activator,
     children,
@@ -1090,7 +1093,7 @@ var traverseNode = (node, value) => {
   if (node === null || node === void 0 || typeof node === "boolean" || typeof node === "string" || typeof node === "number") {
     return { node, changed: false };
   }
-  if (!React.isValidElement(node)) {
+  if (!React15.isValidElement(node)) {
     return { node, changed: false };
   }
   const element = node;
@@ -1103,7 +1106,7 @@ var traverseNode = (node, value) => {
     return { node, changed: false };
   }
   const injectedProps = shouldInject ? { [EXPANSION_PANEL_CONTEXT_PROP]: value } : void 0;
-  const cloned = mappedChildren === void 0 ? React.cloneElement(element, injectedProps) : React.cloneElement(element, injectedProps, mappedChildren);
+  const cloned = mappedChildren === void 0 ? React15.cloneElement(element, injectedProps) : React15.cloneElement(element, injectedProps, mappedChildren);
   return { node: cloned, changed: true };
 };
 var injectExpansionPanelContext = (children, value) => traverseNode(children, value).node;
@@ -1269,7 +1272,7 @@ var ExpansionPanelItemInner = (props) => {
     }
   );
 };
-var ExpansionPanelItem = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
+var ExpansionPanelItem = React15.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
 ExpansionPanelItem.displayName = "ExpansionPanelItem";
 markExpansionPanelItem(ExpansionPanelItem);
 var ExpansionPanelItem_default = ExpansionPanelItem;
@@ -1334,18 +1337,12 @@ var ExpansionPanelInner = (props, forwardedRef) => {
     {
       ...rest,
       ref: forwardedRef,
-      className: tailwindMerge.twMerge(
-        "expansion-panel flex w-full flex-col text-gray-900 dark:text-gray-100",
-        variantClass,
-        shapeClass,
-        layoutClass,
-        className
-      ),
+      className: tailwindMerge.twMerge("expansion-panel flex w-full flex-col text-gray-900 dark:text-gray-100", variantClass, shapeClass, layoutClass, className),
       children: enhancedChildren
     }
   );
 };
-var ExpansionPanelBase = React.forwardRef(ExpansionPanelInner);
+var ExpansionPanelBase = React15.forwardRef(ExpansionPanelInner);
 var ExpansionPanel = Object.assign(ExpansionPanelBase, {
   Item: ExpansionPanelItem_default
 });
@@ -1361,7 +1358,7 @@ var resolveSizeValue = (value) => {
   }
   return typeof value === "number" ? `${value}px` : value;
 };
-var Dialog = React__namespace.forwardRef((props, forwardedRef) => {
+var Dialog = React15__namespace.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
@@ -1486,7 +1483,7 @@ var resolveSizeValue2 = (value) => {
   }
   return typeof value === "number" ? `${value}px` : value;
 };
-var Drawer = React__namespace.forwardRef((props, ref) => {
+var Drawer = React15__namespace.forwardRef((props, ref) => {
   const {
     location = "left",
     floating = false,
@@ -1587,7 +1584,7 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 var overlayBaseClasses4 = "inset-0 z-[55] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
 var scrimClasses = "bg-gray-900/55 dark:bg-black/70 backdrop-blur-[2px]";
-var Overlay = React__namespace.forwardRef((props, ref) => {
+var Overlay = React15__namespace.forwardRef((props, ref) => {
   const {
     open,
     keepMounted = false,
@@ -1675,7 +1672,7 @@ var arrowPlacementClasses = {
   "right-start": "right-full top-4 translate-x-1/2",
   "right-end": "right-full bottom-4 translate-x-1/2"
 };
-var ToolTip = React__namespace.forwardRef((props, forwardedRef) => {
+var ToolTip = React15__namespace.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
@@ -1792,7 +1789,7 @@ var elevationClasses = {
   5: "shadow-xl",
   6: "shadow-2xl"
 };
-var CardRoot = React.forwardRef(function Card({ className, children, variant = "solid", padding = "md", overflow = "hidden", interactive = false, dividers = true, elevation = 0, ...rest }, ref) {
+var CardRoot = React15.forwardRef(function Card({ className, children, variant = "solid", padding = "md", overflow = "hidden", interactive = false, dividers = true, elevation = 0, ...rest }, ref) {
   const variantClass = variantClasses[variant] ?? variantClasses.solid;
   const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
   const overflowClass = overflowClasses[overflow] ?? overflowClasses.hidden;
@@ -1863,13 +1860,13 @@ var Card2 = Object.assign(CardRoot, {
 });
 var Card_default = Card2;
 function applyDividers(children, dividers) {
-  return React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) return child;
+  return React15.Children.map(children, (child) => {
+    if (!React15.isValidElement(child)) return child;
     if (isDividerSection(child)) {
-      return React.cloneElement(child, { dividers: child.props.dividers ?? dividers });
+      return React15.cloneElement(child, { dividers: child.props.dividers ?? dividers });
     }
     if (hasNestedChildren(child)) {
-      return React.cloneElement(child, {
+      return React15.cloneElement(child, {
         children: applyDividers(child.props.children, dividers)
       });
     }
@@ -1903,7 +1900,7 @@ var variantClasses2 = {
   underlined: "rounded-xl bg-white/20 backdrop-opacity-5 border-b border-white/40 dark:bg-slate-900/30 dark:border-white/20",
   sharp: "rounded-none bg-white/40 backdrop-opacity-5 border border-white/30 dark:bg-slate-900/50 dark:border-white/10"
 };
-var Block = React__namespace.forwardRef(function Block2({ className, variant = "solid", blur = "sm", interactive = false, children, ...rest }, ref) {
+var Block = React15__namespace.forwardRef(function Block2({ className, variant = "solid", blur = "sm", interactive = false, children, ...rest }, ref) {
   const variantClass = variantClasses2[variant] ?? variantClasses2.solid;
   const blurClass = blurClasses[blur] ?? blurClasses.sm;
   const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
@@ -1961,10 +1958,10 @@ var MasonryBase = (props, ref) => {
   const renderedItems = items && items.length ? items.map((item, index) => {
     const content = resolveItemContent(item, index, renderItem);
     return wrapItem(content, resolveItemKey(item, index, getKey));
-  }) : React__namespace.Children.map(children, (child, index) => wrapItem(child, resolveChildKey(child, index))) ?? null;
+  }) : React15__namespace.Children.map(children, (child, index) => wrapItem(child, resolveChildKey(child, index))) ?? null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, role, className: tailwindMerge.twMerge(masonryBaseClass, className), style: layoutStyle, children: renderedItems });
 };
-var Masonry = React__namespace.forwardRef(MasonryBase);
+var Masonry = React15__namespace.forwardRef(MasonryBase);
 Masonry.displayName = "Masonry";
 var Masonry_default = Masonry;
 function toCssLength(value) {
@@ -1989,13 +1986,13 @@ function resolveColumnCount(column, maxColumn, hasColumnWidth) {
 }
 function resolveItemKey(item, index, getKey) {
   if (getKey) return getKey(item, index);
-  if (React__namespace.isValidElement(item) && item.key != null) {
+  if (React15__namespace.isValidElement(item) && item.key != null) {
     return item.key;
   }
   return index;
 }
 function resolveChildKey(child, index) {
-  if (React__namespace.isValidElement(child) && child.key != null) {
+  if (React15__namespace.isValidElement(child) && child.key != null) {
     return child.key;
   }
   return index;
@@ -2021,7 +2018,7 @@ var hasMarker2 = (type) => {
   return false;
 };
 var isTabsTabElement = (element) => {
-  if (!React.isValidElement(element)) {
+  if (!React15.isValidElement(element)) {
     return false;
   }
   return hasMarker2(element.type);
@@ -2113,7 +2110,7 @@ var panelVariantClasses = {
   pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4 dark:border-gray-700 dark:bg-gray-900/90"
 };
 var isExtraContentObject = (value) => {
-  return !!value && typeof value === "object" && !React__namespace.isValidElement(value) && ("left" in value || "right" in value);
+  return !!value && typeof value === "object" && !React15__namespace.isValidElement(value) && ("left" in value || "right" in value);
 };
 var resolveFirstEnabledTab = (tabs) => tabs.find((tab) => !tab.disabled)?.value;
 var clampActive = (value, tabs) => {
@@ -2140,7 +2137,7 @@ var collectTabs = (children, tabsId) => {
       return;
     }
     if (!isTabsTabElement(node)) {
-      if (React__namespace.isValidElement(node)) {
+      if (React15__namespace.isValidElement(node)) {
         const props = node.props;
         if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
           walk(props.children);
@@ -2184,7 +2181,7 @@ var injectTabs = (children, context, tabs) => {
       });
       return changed ? next : node;
     }
-    if (!React__namespace.isValidElement(node)) {
+    if (!React15__namespace.isValidElement(node)) {
       return node;
     }
     if (isTabsTabElement(node)) {
@@ -2200,14 +2197,14 @@ var injectTabs = (children, context, tabs) => {
         __tabsTabId: tab.tabId,
         __tabsPanelId: tab.panelId
       };
-      return React__namespace.cloneElement(node, injectedProps);
+      return React15__namespace.cloneElement(node, injectedProps);
     }
     if (node.props) {
       const props = node.props;
       if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
         const mappedChildren = walk(props.children);
         if (mappedChildren !== props.children) {
-          return React__namespace.cloneElement(node, void 0, mappedChildren);
+          return React15__namespace.cloneElement(node, void 0, mappedChildren);
         }
       }
     }
@@ -2241,7 +2238,7 @@ var handleTabListKeyDown = (event) => {
   tabs[nextIndex]?.focus();
   event.preventDefault();
 };
-var Tabs = React__namespace.forwardRef((props, ref) => {
+var Tabs = React15__namespace.forwardRef((props, ref) => {
   const {
     activeKey,
     defaultActiveKey,
@@ -2362,7 +2359,7 @@ var Tabs = React__namespace.forwardRef((props, ref) => {
   );
 });
 Tabs.displayName = "Tabs";
-var Tab = React__namespace.forwardRef((props, ref) => {
+var Tab = React15__namespace.forwardRef((props, ref) => {
   const {
     label: _label,
     value,
@@ -2437,7 +2434,7 @@ var AppBar = ({
   children,
   ...rest
 }) => {
-  const [mobileOpen, setMobileOpen] = React__namespace.useState(false);
+  const [mobileOpen, setMobileOpen] = React15__namespace.useState(false);
   const isDark = color === "primary" || color === "dark";
   const isTransparent = color === "transparent";
   const barClass = tailwindMerge.twMerge(
@@ -2710,7 +2707,7 @@ var avatarRadiusMap = {
   sharp: "rounded-none"
 };
 var isDarkVariant = (variant) => variant === "filled";
-var SocialIcons = ({ socials, dark }) => {
+var SocialIcons = ({ socials }) => {
   if (!socials) return null;
   if (Array.isArray(socials) && socials.length === 0) return null;
   const isSocialLinkArray = Array.isArray(socials) && socials.length > 0 && "href" in socials[0];
@@ -2818,14 +2815,14 @@ var ProfileCard = ({
 };
 ProfileCard.displayName = "ProfileCard";
 var ProfileCard_default = ProfileCard;
-var Input = React__namespace.default.forwardRef(
+var Input = React15__namespace.default.forwardRef(
   ({ variant = "outline", size = "medium", rounded = "md", success, error, warn, className, wrapperClassName, label, prepend, append, ...props }, ref) => {
     const { placeholder, onFocus, onBlur, ...inputProps } = props;
-    const reactId = React__namespace.default.useId();
+    const reactId = React15__namespace.default.useId();
     const hasLabel = Boolean(label);
     const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
     const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
-    const [isFocused, setIsFocused] = React__namespace.default.useState(false);
+    const [isFocused, setIsFocused] = React15__namespace.default.useState(false);
     const classBase = "input-base transition-colors duration-200 w-full has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed";
     const inputBase = "peer block w-full min-w-0 border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-0";
     const variantClasses5 = {
@@ -2837,7 +2834,7 @@ var Input = React__namespace.default.forwardRef(
       filled: "rounded border border-gray-200 bg-gray-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/30",
       underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70"
     };
-    const roundedClasses3 = {
+    const roundedClasses4 = {
       sm: "rounded-sm",
       md: "rounded-md",
       lg: "rounded-lg",
@@ -2845,7 +2842,7 @@ var Input = React__namespace.default.forwardRef(
       "2xl": "rounded-2xl",
       "3xl": "rounded-3xl"
     };
-    const sizeClasses5 = {
+    const sizeClasses6 = {
       "x-small": {
         paddingY: "py-2",
         paddingX: "px-2",
@@ -2873,23 +2870,23 @@ var Input = React__namespace.default.forwardRef(
       }
     };
     const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
-    const statusClasses = {
+    const statusClasses2 = {
       error: "border-red-500 focus:border-red-500 focus:ring-red-400",
       warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
       success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
     };
-    const statusMessageClasses = {
+    const statusMessageClasses2 = {
       error: "text-red-600 dark:text-red-300",
       warn: "text-amber-600 dark:text-amber-300",
       success: "text-emerald-600 dark:text-emerald-300"
     };
     const variantClass = variantClasses5[variant] ?? variantClasses5.outline;
-    const toneClass = status ? statusClasses[status.tone] : void 0;
+    const toneClass = status ? statusClasses2[status.tone] : void 0;
     const hasPrepend = typeof prepend === "string" ? prepend.trim().length > 0 : Boolean(prepend);
     const hasAppend = typeof append === "string" ? append.trim().length > 0 : Boolean(append);
-    const sizeConfig = sizeClasses5[size] ?? sizeClasses5.medium;
+    const sizeConfig = sizeClasses6[size] ?? sizeClasses6.medium;
     const sizeClass = [sizeConfig.paddingY, sizeConfig.paddingX, sizeConfig.text].join(" ");
-    const roundedClass = variant === "sharp" || variant === "text" || variant === "underlined" ? "rounded-none" : roundedClasses3[rounded];
+    const roundedClass = variant === "sharp" || variant === "text" || variant === "underlined" ? "rounded-none" : roundedClasses4[rounded];
     const inputName = inputProps.name || reactId;
     const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
     const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
@@ -2944,481 +2941,546 @@ var Input = React__namespace.default.forwardRef(
         ] }),
         hasAppend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: renderAppend })
       ] }),
-      status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
+      status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses2[status.tone]), children: status.message })
     ] });
   }
 );
 Input.displayName = "Input";
 var Input_default = Input;
-
-// src/utils/helpers/randomStr.ts
-var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-function generateString(length = 5) {
-  let result = "";
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-var baseClass = "textarea-base px-3 py-2 focus-visible:outline-none transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
 var variantClasses3 = {
-  outlined: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-slate-900 dark:focus-visible:border-black dark:focus-visible:ring-black/40",
-  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
-  standard: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 dark:border-b-gray-700 dark:focus-visible:border-primary/70"
-};
-var labelBackground = {
-  outlined: "bg-white/90 dark:bg-slate-900",
-  filled: "bg-gray-100 dark:bg-slate-800",
-  standard: "bg-transparent"
-};
-var advancedContainerVariant = {
-  outlined: "rounded border-2 border-black bg-white dark:border-black dark:bg-slate-900",
-  filled: "rounded border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-slate-800",
-  standard: "border-b border-gray-300 bg-transparent dark:border-gray-700"
-};
-var renderMarkdown = (value) => marked.marked.parse(value || "", { async: false });
-var dispatchInputEvent = (element) => {
-  const event = new Event("input", { bubbles: true });
-  element.dispatchEvent(event);
-};
-var toolbarButtonBase = "px-3 py-1 text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50";
-var toolbarButtonActive = "bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100";
-var handleModeToggle = (wrapperId, mode, textareaName, simpleId, advancedInputId) => {
-  if (typeof document === "undefined") return;
-  const wrapper = document.getElementById(wrapperId);
-  const simple = document.getElementById(simpleId);
-  const advancedInput = document.getElementById(advancedInputId);
-  if (wrapper) {
-    wrapper.dataset.mode = mode;
+  solid: "rounded border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
+  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
+  outline: "rounded border-2 border-black bg-white focus-within:border-black focus-within:ring-2 focus-within:ring-black/30 dark:border-black dark:bg-transparent dark:focus-within:border-black dark:focus-within:ring-black/40",
+  text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70",
+  ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-within:bg-white focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-within:bg-slate-700 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/25",
+  filled: "rounded border border-gray-200 bg-gray-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/30",
+  underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70"
+};
+var roundedClasses3 = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl"
+};
+var sizeClasses3 = {
+  "x-small": {
+    paddingY: "py-2",
+    paddingX: "px-2",
+    text: "text-xs"
+  },
+  small: {
+    paddingY: "py-2.5",
+    paddingX: "px-2.5",
+    text: "text-sm"
+  },
+  medium: {
+    paddingY: "py-3",
+    paddingX: "px-3",
+    text: "text-base"
+  },
+  large: {
+    paddingY: "py-3.5",
+    paddingX: "px-3.5",
+    text: "text-lg"
+  },
+  "x-large": {
+    paddingY: "py-4",
+    paddingX: "px-4",
+    text: "text-xl"
   }
-  if (simple) {
-    simple.classList.toggle("hidden", mode !== "simple");
-    simple.name = mode === "simple" ? textareaName : "";
+};
+var statusClasses = {
+  error: "border-red-500 focus:border-red-500 focus:ring-red-400",
+  warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
+  success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
+};
+var statusMessageClasses = {
+  error: "text-red-600 dark:text-red-300",
+  warn: "text-amber-600 dark:text-amber-300",
+  success: "text-emerald-600 dark:text-emerald-300"
+};
+var DEFAULT_TOOLBAR = ["bold", "italic", "underline", "strike", "heading", "bulletList", "orderedList", "blockquote", "codeBlock"];
+var CODE_BLOCK_LANGUAGES = ["ts", "json", "python", "bash"];
+var DEFAULT_CODE_BLOCK_LANGUAGE = CODE_BLOCK_LANGUAGES[0];
+var TEXTAREA_TAB_CHARACTER = "	";
+var lowlight = lowlight$1.createLowlight(lowlight$1.common);
+lowlight.registerAlias({ ts: "typescript" });
+var turndown = new TurndownService__default.default({
+  codeBlockStyle: "fenced",
+  headingStyle: "atx",
+  bulletListMarker: "-"
+});
+var markdownToHtml = (markdown) => {
+  if (!markdown) {
+    return "<p></p>";
   }
-  if (advancedInput) {
-    advancedInput.classList.toggle("hidden", mode !== "advanced");
-    advancedInput.name = mode === "advanced" ? textareaName : "";
+  return marked.marked.parse(markdown);
+};
+var htmlToMarkdown = (html) => turndown.turndown(html).trim();
+var createChangeEvent = (element) => ({
+  target: element,
+  currentTarget: element
+});
+var assignRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
   }
 };
-var TextArea = ({
-  variant = "outlined",
-  label,
-  className,
-  wrapperClassName,
-  id,
-  name,
-  placeholder,
-  rows = 4,
-  allowModeSwitch = true,
-  mode,
-  view = "editor",
-  value,
-  defaultValue,
-  disabled,
-  readOnly,
-  onChange,
-  onInput,
-  ...props
-}) => {
-  const textareaId = id || name || generateString();
-  const textareaName = name || textareaId;
-  const wrapperId = `${textareaId}-wrapper`;
-  const simpleTextareaId = `${textareaId}-simple`;
-  const advancedInputId = `${textareaId}-advanced-input`;
-  const advancedEditorId = `${textareaId}-advanced-editor`;
-  const advancedLabelId = `${textareaId}-advanced-label`;
-  const previewId = `${textareaId}-preview`;
-  const variantClass = variantClasses3[variant] ?? variantClasses3.outlined;
-  const labelPadding = label ? "pt-6" : void 0;
-  const placeholderValue = placeholder ?? (label ? " " : void 0);
-  const placeholderClass = label ? "placeholder-transparent" : void 0;
-  const labelBg = labelBackground[variant] ?? labelBackground.outlined;
-  const focusLabelBg = variant === "filled" ? "peer-focus:bg-gray-100 dark:peer-focus:bg-slate-800" : variant === "standard" ? "peer-focus:bg-transparent" : "peer-focus:bg-white/90 dark:peer-focus:bg-slate-900";
-  const resolvedMode = allowModeSwitch ? mode ?? "simple" : "simple";
-  const resolvedView = view ?? "editor";
-  const showEditor = resolvedView === "editor";
-  const showPreview = resolvedView === "view";
-  const contentValue = typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : "";
-  const isControlled = typeof value === "string";
-  const editorEditable = !(disabled || readOnly);
-  const modeToggleName = `${textareaId}-mode-toggle`;
-  const simpleToggleId = `${modeToggleName}-simple`;
-  const advancedToggleId = `${modeToggleName}-advanced`;
-  const turndownService = React__namespace.default.useMemo(() => {
-    const service = new TurndownService__default.default({
-      codeBlockStyle: "fenced",
-      emDelimiter: "*",
-      strongDelimiter: "**",
-      bulletListMarker: "-"
-    });
-    service.addRule("strikethrough", {
-      filter: (node) => ["DEL", "S", "STRIKE"].includes(node.nodeName),
-      replacement: (content) => `~~${content}~~`
-    });
-    return service;
-  }, []);
-  const hiddenTextareaRef = React__namespace.default.useRef(null);
-  const lastMarkdownRef = React__namespace.default.useRef(contentValue);
-  const editorContentClass = tailwindMerge.twMerge(
-    baseClass,
-    "min-h-45 rounded border-0 bg-transparent outline-none whitespace-pre-wrap wrap-break-words",
-    "[&_p]:m-0 [&_p]:leading-6",
-    "[&_ul]:my-0 [&_ul]:list-disc [&_ul]:pl-5",
-    "[&_ol]:my-0 [&_ol]:list-decimal [&_ol]:pl-5",
-    "[&_li]:my-0",
-    "[&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600",
-    "dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300",
-    "[&_pre]:bg-gray-100 [&_pre]:rounded [&_pre]:p-3 [&_pre]:text-sm [&_pre]:overflow-x-auto",
-    "dark:[&_pre]:bg-slate-800",
-    "[&_code]:font-mono",
-    className,
-    !editorEditable ? "cursor-not-allowed opacity-50" : void 0
-  );
-  const editor = react.useEditor({
-    extensions: [StarterKit__default.default],
-    content: renderMarkdown(contentValue),
-    immediatelyRender: false,
-    editable: editorEditable,
-    editorProps: {
-      attributes: {
-        class: editorContentClass,
-        role: "textbox",
-        "aria-multiline": "true",
-        ...label ? { "aria-labelledby": advancedLabelId } : {}
-      }
-    },
-    onUpdate: ({ editor: currentEditor }) => {
-      const markdown = turndownService.turndown(currentEditor.getHTML());
-      if (markdown === lastMarkdownRef.current) return;
-      lastMarkdownRef.current = markdown;
-      if (!hiddenTextareaRef.current) return;
-      hiddenTextareaRef.current.value = markdown;
-      dispatchInputEvent(hiddenTextareaRef.current);
-    }
-  });
-  React__namespace.default.useEffect(() => {
-    if (!editor) return;
-    editor.setEditable(editorEditable);
-  }, [editor, editorEditable]);
-  React__namespace.default.useEffect(() => {
-    if (!editor) return;
-    editor.setOptions({
+var updateTextareaValue = (element, nextValue, selectionStart, selectionEnd) => {
+  element.value = nextValue;
+  element.setSelectionRange(selectionStart, selectionEnd);
+};
+var indentSelectedLines = (value, selectionStart, selectionEnd) => {
+  const lineStart = value.lastIndexOf("\n", Math.max(0, selectionStart - 1)) + 1;
+  const lineEndIndex = value.indexOf("\n", selectionEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const selectedBlock = value.slice(lineStart, lineEnd);
+  const lines = selectedBlock.split("\n");
+  const indentedBlock = lines.map((line) => `${TEXTAREA_TAB_CHARACTER}${line}`).join("\n");
+  return {
+    nextValue: `${value.slice(0, lineStart)}${indentedBlock}${value.slice(lineEnd)}`,
+    selectionStart: selectionStart + TEXTAREA_TAB_CHARACTER.length,
+    selectionEnd: selectionEnd + lines.length * TEXTAREA_TAB_CHARACTER.length
+  };
+};
+var outdentSelectedLines = (value, selectionStart, selectionEnd) => {
+  const lineStart = value.lastIndexOf("\n", Math.max(0, selectionStart - 1)) + 1;
+  const lineEndIndex = value.indexOf("\n", selectionEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const selectedBlock = value.slice(lineStart, lineEnd);
+  const lines = selectedBlock.split("\n");
+  const updatedLines = lines.map((line) => line.startsWith(TEXTAREA_TAB_CHARACTER) ? line.slice(TEXTAREA_TAB_CHARACTER.length) : line);
+  const removedBeforeSelectionStart = selectionStart === lineStart && !lines[0].startsWith(TEXTAREA_TAB_CHARACTER) ? 0 : lines[0].startsWith(TEXTAREA_TAB_CHARACTER) ? TEXTAREA_TAB_CHARACTER.length : 0;
+  const removedTotal = lines.reduce((count, line) => count + (line.startsWith(TEXTAREA_TAB_CHARACTER) ? TEXTAREA_TAB_CHARACTER.length : 0), 0);
+  return {
+    nextValue: `${value.slice(0, lineStart)}${updatedLines.join("\n")}${value.slice(lineEnd)}`,
+    selectionStart: Math.max(lineStart, selectionStart - removedBeforeSelectionStart),
+    selectionEnd: Math.max(lineStart, selectionEnd - removedTotal)
+  };
+};
+var isCodeBlockLanguage = (value) => CODE_BLOCK_LANGUAGES.includes(value);
+var ToolbarButton = ({ label, active, disabled, onMouseDown }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onMouseDown,
+    className: tailwindMerge.twMerge(
+      "inline-flex min-w-8 items-center justify-center rounded border px-2 py-1 text-xs font-medium transition-colors",
+      active ? "border-primary bg-primary text-white" : "border-gray-300 bg-white text-gray-700 hover:border-gray-400 hover:bg-gray-50 dark:border-slate-600 dark:bg-slate-900 dark:text-gray-200 dark:hover:bg-slate-800",
+      disabled && "cursor-not-allowed opacity-50"
+    ),
+    children: label
+  }
+);
+var TextArea = React15__namespace.default.forwardRef(
+  ({ variant = "outline", size = "medium", rounded = "md", success, error, warn, className, wrapperClassName, label, prepend, append, rows = 4, richText = false, toolbar = DEFAULT_TOOLBAR, ...props }, ref) => {
+    const { placeholder, onFocus, onBlur, onChange, onKeyDown, value, defaultValue, disabled, readOnly, ...textareaProps } = props;
+    const reactId = React15__namespace.default.useId();
+    const hasLabel = Boolean(label);
+    const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
+    const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
+    const [isFocused, setIsFocused] = React15__namespace.default.useState(false);
+    const classBase = "textarea-base transition-colors duration-200 w-full has-[textarea:disabled]:opacity-50 has-[textarea:disabled]:cursor-not-allowed";
+    const textareaBase = "peer block w-full min-w-0 resize-y border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-0";
+    const proseBase = "ProseMirror min-h-[7rem] w-full border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 focus:outline-none [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:italic dark:[&_blockquote]:border-slate-600 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-black [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-white dark:[&_:not(pre)>code]:bg-black dark:[&_:not(pre)>code]:text-white [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-black [&_pre]:p-3 [&_pre]:text-white [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-white [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold";
+    const hiddenTextareaRef = React15__namespace.default.useRef(null);
+    const forwardedRef = React15__namespace.default.useRef(null);
+    const isControlled = value !== void 0;
+    const markdownValue = typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : "";
+    const [internalMarkdown, setInternalMarkdown] = React15__namespace.default.useState(markdownValue);
+    const resolvedMarkdownValue = isControlled ? typeof value === "string" ? value : "" : internalMarkdown;
+    const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
+    const variantClass = variantClasses3[variant] ?? variantClasses3.outline;
+    const toneClass = status ? statusClasses[status.tone] : void 0;
+    const hasPrepend = typeof prepend === "string" ? prepend.trim().length > 0 : Boolean(prepend);
+    const hasAppend = typeof append === "string" ? append.trim().length > 0 : Boolean(append);
+    const sizeConfig = sizeClasses3[size] ?? sizeClasses3.medium;
+    const sizeClass = [sizeConfig.paddingY, sizeConfig.paddingX, sizeConfig.text].join(" ");
+    const roundedClass = variant === "sharp" || variant === "text" || variant === "underlined" ? "rounded-none" : roundedClasses3[rounded];
+    const inputName = textareaProps.name || reactId;
+    const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
+    const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
+    const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
+    const editor = react.useEditor({
+      extensions: [
+        StarterKit__default.default.configure({ heading: { levels: [1, 2] }, codeBlock: false }),
+        CodeBlockLowlight__default.default.configure({
+          defaultLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
+          enableTabIndentation: true,
+          lowlight,
+          HTMLAttributes: {
+            class: "hljs"
+          }
+        }),
+        Underline__default.default
+      ],
+      content: markdownToHtml(resolvedMarkdownValue),
+      editable: richText && !disabled && !readOnly,
+      immediatelyRender: false,
       editorProps: {
-        ...editor.options.editorProps,
         attributes: {
-          ...editor.options.editorProps?.attributes,
-          class: editorContentClass,
-          role: "textbox",
-          "aria-multiline": "true",
-          ...label ? { "aria-labelledby": advancedLabelId } : {}
+          class: tailwindMerge.twMerge(proseBase, placeholderClass),
+          "data-placeholder": placeholderValue ?? ""
+        }
+      },
+      onFocus: () => {
+        if (!richText) {
+          return;
+        }
+        if (hidePlaceholderUntilFocus) {
+          setIsFocused(true);
+        }
+        const target = hiddenTextareaRef.current;
+        if (target) {
+          onFocus?.(createChangeEvent(target));
+        }
+      },
+      onBlur: () => {
+        if (!richText) {
+          return;
+        }
+        if (hidePlaceholderUntilFocus) {
+          setIsFocused(false);
+        }
+        const target = hiddenTextareaRef.current;
+        if (target) {
+          onBlur?.(createChangeEvent(target));
         }
+      },
+      onUpdate: ({ editor: currentEditor }) => {
+        if (!richText) {
+          return;
+        }
+        const nextMarkdown = htmlToMarkdown(currentEditor.getHTML());
+        const target = hiddenTextareaRef.current;
+        setInternalMarkdown(nextMarkdown);
+        if (!target) {
+          return;
+        }
+        target.value = nextMarkdown;
+        onChange?.(createChangeEvent(target));
       }
     });
-  }, [editor, editorContentClass, label, advancedLabelId]);
-  React__namespace.default.useEffect(() => {
-    if (!editor || typeof value !== "string") return;
-    if (value === lastMarkdownRef.current) return;
-    editor.commands.setContent(renderMarkdown(value), { emitUpdate: false });
-    lastMarkdownRef.current = value;
-    if (hiddenTextareaRef.current) {
-      hiddenTextareaRef.current.value = value;
-    }
-  }, [editor, value]);
-  React__namespace.default.useEffect(() => {
-    if (!hiddenTextareaRef.current) return;
-    if (hiddenTextareaRef.current.value === contentValue) return;
-    hiddenTextareaRef.current.value = contentValue;
-  }, [contentValue]);
-  const textareaProps = {
-    ...props,
-    onChange,
-    onInput,
-    disabled,
-    readOnly
-  };
-  const minHeightStyle = rows ? { minHeight: `${rows * 20}px` } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      id: wrapperId,
-      "data-mode": resolvedMode,
-      className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName),
-      children: [
-        allowModeSwitch && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "radio",
-              name: modeToggleName,
-              id: simpleToggleId,
-              value: "simple",
-              defaultChecked: resolvedMode === "simple",
-              className: "peer/simple sr-only",
-              onChange: () => handleModeToggle(wrapperId, "simple", textareaName, simpleTextareaId, advancedInputId)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "radio",
-              name: modeToggleName,
-              id: advancedToggleId,
-              value: "advanced",
-              defaultChecked: resolvedMode === "advanced",
-              className: "peer/advanced sr-only",
-              onChange: () => handleModeToggle(
-                wrapperId,
-                "advanced",
-                textareaName,
-                simpleTextareaId,
-                advancedInputId
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 text-xs font-medium dark:border-gray-700 dark:bg-slate-800", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
-              {
-                htmlFor: simpleToggleId,
-                className: tailwindMerge.twMerge(
-                  "cursor-pointer px-3 py-1 transition-colors",
-                  "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-700",
-                  "peer-checked/simple:bg-white peer-checked/simple:text-gray-900 peer-checked/simple:dark:bg-slate-900 peer-checked/simple:dark:text-gray-100"
-                ),
-                children: "Jednoduch\xFD"
-              }
-            ),
+    const activeCodeBlockLanguage = (() => {
+      const language = editor?.getAttributes("codeBlock").language;
+      if (typeof language === "string" && isCodeBlockLanguage(language)) {
+        return language;
+      }
+      return DEFAULT_CODE_BLOCK_LANGUAGE;
+    })();
+    React15__namespace.default.useEffect(() => {
+      if (!richText) {
+        return;
+      }
+      const target = hiddenTextareaRef.current;
+      if (!target) {
+        return;
+      }
+      target.value = resolvedMarkdownValue;
+      forwardedRef.current = target;
+      assignRef(ref, target);
+    }, [ref, resolvedMarkdownValue, richText]);
+    React15__namespace.default.useEffect(() => {
+      if (!editor || !richText || !isControlled) {
+        return;
+      }
+      const nextMarkdown = typeof value === "string" ? value : "";
+      const currentMarkdown = htmlToMarkdown(editor.getHTML());
+      if (currentMarkdown === nextMarkdown) {
+        return;
+      }
+      editor.commands.setContent(markdownToHtml(nextMarkdown), { emitUpdate: false });
+    }, [editor, isControlled, richText, value]);
+    React15__namespace.default.useEffect(() => {
+      if (!isControlled) {
+        setInternalMarkdown(typeof defaultValue === "string" ? defaultValue : "");
+      }
+    }, [defaultValue, isControlled]);
+    React15__namespace.default.useEffect(() => {
+      if (!editor || !richText) {
+        return;
+      }
+      editor.setEditable(!disabled && !readOnly);
+    }, [disabled, editor, readOnly, richText]);
+    const renderPrepend = hasPrepend ? typeof prepend === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: prepend }) : prepend : null;
+    const renderAppend = hasAppend ? typeof append === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: append }) : append : null;
+    const handleFocus = (event) => {
+      if (hidePlaceholderUntilFocus) setIsFocused(true);
+      onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      if (hidePlaceholderUntilFocus) setIsFocused(false);
+      onBlur?.(event);
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || event.key !== "Tab" || disabled || readOnly) {
+        return;
+      }
+      const target = event.currentTarget;
+      const { selectionStart, selectionEnd, value: currentValue } = target;
+      event.preventDefault();
+      if (selectionStart !== selectionEnd && currentValue.slice(selectionStart, selectionEnd).includes("\n")) {
+        const nextState = event.shiftKey ? outdentSelectedLines(currentValue, selectionStart, selectionEnd) : indentSelectedLines(currentValue, selectionStart, selectionEnd);
+        updateTextareaValue(target, nextState.nextValue, nextState.selectionStart, nextState.selectionEnd);
+        onChange?.(createChangeEvent(target));
+        return;
+      }
+      if (event.shiftKey) {
+        const lineStart = currentValue.lastIndexOf("\n", Math.max(0, selectionStart - 1)) + 1;
+        if (currentValue.slice(lineStart, selectionStart).endsWith(TEXTAREA_TAB_CHARACTER)) {
+          const nextValue2 = `${currentValue.slice(0, selectionStart - TEXTAREA_TAB_CHARACTER.length)}${currentValue.slice(selectionEnd)}`;
+          const nextPosition2 = selectionStart - TEXTAREA_TAB_CHARACTER.length;
+          updateTextareaValue(target, nextValue2, nextPosition2, nextPosition2);
+          onChange?.(createChangeEvent(target));
+        }
+        return;
+      }
+      const nextValue = `${currentValue.slice(0, selectionStart)}${TEXTAREA_TAB_CHARACTER}${currentValue.slice(selectionEnd)}`;
+      const nextPosition = selectionStart + TEXTAREA_TAB_CHARACTER.length;
+      updateTextareaValue(target, nextValue, nextPosition, nextPosition);
+      onChange?.(createChangeEvent(target));
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-full items-start gap-2", classBase, variantClass, roundedClass, toneClass, sizeClass, className), children: [
+        hasPrepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-start pt-0.5", children: renderPrepend }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          richText ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
+              "textarea",
               {
-                htmlFor: advancedToggleId,
-                className: tailwindMerge.twMerge(
-                  "cursor-pointer px-3 py-1 transition-colors",
-                  "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-700",
-                  "peer-checked/advanced:bg-white peer-checked/advanced:text-gray-900 peer-checked/advanced:dark:bg-slate-900 peer-checked/advanced:dark:text-gray-100"
-                ),
-                children: "Pokro\u010Dil\xFD"
+                ...textareaProps,
+                ref: (node) => {
+                  hiddenTextareaRef.current = node;
+                  forwardedRef.current = node;
+                  if (node) {
+                    assignRef(ref, node);
+                  }
+                },
+                id: inputName,
+                name: inputName,
+                rows,
+                value: isControlled ? value : void 0,
+                defaultValue: !isControlled ? defaultValue : void 0,
+                disabled,
+                readOnly: true,
+                tabIndex: -1,
+                "aria-hidden": true,
+                className: "sr-only"
               }
-            )
-          ] }) })
-        ] }),
-        (resolvedMode === "simple" || allowModeSwitch) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: tailwindMerge.twMerge(
-              "relative flex items-start",
-              allowModeSwitch ? "hidden peer-checked/simple:flex peer-checked/advanced:hidden" : void 0
             ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "textarea",
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 border-b border-gray-200 pb-2 dark:border-slate-700", children: [
+              toolbar.includes("bold") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
                 {
-                  ...textareaProps,
-                  id: simpleTextareaId,
-                  name: !allowModeSwitch || resolvedMode === "simple" ? textareaName : "",
-                  rows,
-                  placeholder: placeholderValue,
-                  value,
-                  defaultValue,
-                  className: tailwindMerge.twMerge(
-                    "peer",
-                    baseClass,
-                    variantClass,
-                    labelPadding,
-                    placeholderClass,
-                    className
-                  )
+                  label: "B",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("bold"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleBold().run();
+                  }
                 }
               ),
-              label && /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
+              toolbar.includes("italic") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
                 {
-                  htmlFor: simpleTextareaId,
-                  className: tailwindMerge.twMerge(
-                    "absolute transition-all duration-150 pointer-events-none left-3 text-gray-700 dark:text-gray-200",
-                    "top-0 -translate-y-2/3 text-xs px-1",
-                    labelBg,
-                    focusLabelBg,
-                    "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:text-gray-600 dark:peer-focus:text-gray-300",
-                    "peer-placeholder-shown:top-3 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
-                  ),
-                  children: label
+                  label: "I",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("italic"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleItalic().run();
+                  }
                 }
-              )
-            ]
-          }
-        ),
-        (resolvedMode === "advanced" || allowModeSwitch) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: tailwindMerge.twMerge(
-              "flex flex-col gap-2",
-              allowModeSwitch ? "hidden peer-checked/advanced:flex peer-checked/simple:hidden" : void 0
-            ),
-            children: [
-              label && /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
+              ),
+              toolbar.includes("underline") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
                 {
-                  id: advancedLabelId,
-                  className: "text-sm font-medium text-gray-700 dark:text-gray-200",
-                  children: label
+                  label: "U",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("underline"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleUnderline().run();
+                  }
                 }
               ),
-              showEditor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 text-xs font-medium dark:border-gray-700 dark:bg-slate-800", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("bold") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleBold().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "B"
+              toolbar.includes("strike") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "S",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("strike"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleStrike().run();
                   }
-                ),
+                }
+              ),
+              toolbar.includes("heading") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  ToolbarButton,
                   {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("italic") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleItalic().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "I"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("strike") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleStrike().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "S"
+                    label: "H1",
+                    disabled: !editor?.isEditable,
+                    active: editor?.isActive("heading", { level: 1 }),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      editor?.chain().focus().toggleHeading({ level: 1 }).run();
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  ToolbarButton,
                   {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("bulletList") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleBulletList().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "\u2022 List"
+                    label: "H2",
+                    disabled: !editor?.isEditable,
+                    active: editor?.isActive("heading", { level: 2 }),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      editor?.chain().focus().toggleHeading({ level: 2 }).run();
+                    }
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("orderedList") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleOrderedList().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "1. List"
+                )
+              ] }),
+              toolbar.includes("bulletList") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "List",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("bulletList"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleBulletList().run();
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("blockquote") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleBlockquote().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "Quote"
+                }
+              ),
+              toolbar.includes("orderedList") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "1.",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("orderedList"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleOrderedList().run();
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("code") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleCode().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "Code"
+                }
+              ),
+              toolbar.includes("blockquote") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "Quote",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("blockquote"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleBlockquote().run();
                   }
-                ),
+                }
+              ),
+              toolbar.includes("codeBlock") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  ToolbarButton,
                   {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("codeBlock") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "Code block"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("overflow-hidden", advancedContainerVariant[variant]), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-3 space-y-3", children: [
-                showEditor && /* @__PURE__ */ jsxRuntime.jsx(
-                  react.EditorContent,
-                  {
-                    editor,
-                    id: advancedEditorId,
-                    className: "w-full",
-                    style: minHeightStyle
+                    label: "Code",
+                    disabled: !editor?.isEditable,
+                    active: editor?.isActive("codeBlock"),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      editor?.chain().focus().toggleCodeBlock({ language: activeCodeBlockLanguage }).run();
+                    }
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "sr-only", htmlFor: `${inputName}-code-language`, children: "Code language" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "textarea",
+                  "select",
                   {
-                    ...textareaProps,
-                    ref: hiddenTextareaRef,
-                    id: advancedInputId,
-                    name: !allowModeSwitch || resolvedMode === "advanced" ? textareaName : "",
-                    rows,
-                    placeholder: placeholderValue,
-                    className: "sr-only",
-                    ...isControlled ? { value } : { defaultValue: contentValue }
-                  }
-                ),
-                showPreview && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    id: previewId,
-                    className: tailwindMerge.twMerge(
-                      baseClass,
-                      "min-h-45 rounded border-0 px-0 focus:outline-none whitespace-pre-wrap wrap-break-words",
-                      className
-                    ),
-                    style: minHeightStyle,
-                    dangerouslySetInnerHTML: {
-                      __html: renderMarkdown(contentValue)
-                    }
+                    id: `${inputName}-code-language`,
+                    value: activeCodeBlockLanguage,
+                    disabled: !editor?.isEditable,
+                    className: "min-w-24 rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-900 dark:text-gray-200",
+                    onChange: (event) => {
+                      const language = event.target.value;
+                      if (!isCodeBlockLanguage(language)) {
+                        return;
+                      }
+                      editor?.chain().focus().setCodeBlock({ language }).run();
+                    },
+                    children: CODE_BLOCK_LANGUAGES.map((language) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: language, children: language }, language))
                   }
                 )
-              ] }) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor, className: "pt-3" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ...textareaProps,
+              ref: (node) => {
+                forwardedRef.current = node;
+                assignRef(ref, node);
+              },
+              id: inputName,
+              name: inputName,
+              rows,
+              placeholder: placeholderValue,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              onChange,
+              disabled,
+              readOnly,
+              value,
+              defaultValue,
+              className: tailwindMerge.twMerge(textareaBase, placeholderClass)
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: inputName,
+              className: tailwindMerge.twMerge(
+                "absolute left-0 z-10 transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
+                "-top-2 -translate-y-full text-xs bg-white px-1 dark:bg-slate-900",
+                !richText && "peer-focus:left-0 peer-focus:-top-5 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-gray-600 dark:peer-focus:text-gray-300",
+                !richText && "peer-placeholder-shown:top-3 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:px-0 peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400",
+                !richText && "peer-[&:not(:placeholder-shown)]:left-0 peer-[&:not(:placeholder-shown)]:-top-2 peer-[&:not(:placeholder-shown)]:-translate-y-full peer-[&:not(:placeholder-shown)]:text-xs peer-[&:not(:placeholder-shown)]:bg-white peer-[&:not(:placeholder-shown)]:px-1 peer-[&:not(:placeholder-shown)]:text-gray-700 dark:peer-[&:not(:placeholder-shown)]:bg-slate-900 dark:peer-[&:not(:placeholder-shown)]:text-gray-200",
+                richText && (isFocused || resolvedMarkdownValue) && "-top-2 -translate-y-full text-xs",
+                richText && !(isFocused || resolvedMarkdownValue) && "top-3 translate-y-0 text-sm bg-transparent px-0 text-gray-500 dark:text-gray-400"
+              ),
+              children: label
+            }
+          )
+        ] }),
+        hasAppend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-start pt-0.5", children: renderAppend })
+      ] }),
+      status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
-var baseClass2 = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
+
+// src/utils/helpers/randomStr.ts
+var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+function generateString(length = 5) {
+  let result = "";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
 var variantClasses4 = {
   solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
   sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
@@ -3428,7 +3490,7 @@ var variantClasses4 = {
   filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
   underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70"
 };
-var sizeClasses3 = {
+var sizeClasses4 = {
   "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
   small: { padding: "pl-2.5 pr-9 py-2.5", text: "text-sm" },
   medium: { padding: "pl-3 pr-10 py-3", text: "text-base" },
@@ -3470,7 +3532,7 @@ var resolveIconClassName4 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
-var Select = React__namespace.default.forwardRef(
+var Select = React15__namespace.default.forwardRef(
   ({
     options,
     label,
@@ -3491,12 +3553,13 @@ var Select = React__namespace.default.forwardRef(
     onChange,
     onBlur,
     onFocus,
+    addOptionAction,
     ...props
   }, ref) => {
     const selectId = id || name || generateString();
     const inputName = name || selectId;
     const variantClass = variantClasses4[variant] ?? variantClasses4.outline;
-    const sizeConfig = sizeClasses3[size] ?? sizeClasses3.medium;
+    const sizeConfig = sizeClasses4[size] ?? sizeClasses4.medium;
     const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
     const normalizedOptions = options.map(normalizeOption);
     const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
@@ -3519,6 +3582,13 @@ var Select = React__namespace.default.forwardRef(
         onFocus?.(event);
       }
     };
+    const handleAddOptionActionClick = (event) => {
+      event.preventDefault();
+      if (disabled || !addOptionAction) return;
+      addOptionAction.onClick();
+      const detailsEl = event.currentTarget.closest("details");
+      detailsEl?.removeAttribute("open");
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3534,7 +3604,7 @@ var Select = React__namespace.default.forwardRef(
                 "summary",
                 {
                   className: tailwindMerge.twMerge(
-                    baseClass2,
+                    baseClass,
                     variantClass,
                     sizeClass,
                     "list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden",
@@ -3550,46 +3620,61 @@ var Select = React__namespace.default.forwardRef(
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: normalizedOptions.map((option, index) => {
-                const optionValueStr = String(option.value);
-                const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
-                const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
-                const iconClassName = resolveIconClassName4(option.icon);
-                const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "label",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: [
+                normalizedOptions.map((option, index) => {
+                  const optionValueStr = String(option.value);
+                  const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
+                  const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
+                  const iconClassName = resolveIconClassName4(option.icon);
+                  const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "label",
+                    {
+                      htmlFor: inputId,
+                      className: tailwindMerge.twMerge(
+                        "relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
+                        option.disabled && "cursor-not-allowed opacity-50"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: multiple ? "checkbox" : "radio",
+                            id: inputId,
+                            name: inputName,
+                            value: option.value,
+                            disabled: option.disabled || disabled,
+                            checked: value !== void 0 ? isSelected : void 0,
+                            defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
+                            onChange: handleOptionChange,
+                            onBlur,
+                            ref,
+                            required: required && !multiple,
+                            className: "peer sr-only"
+                          }
+                        ),
+                        iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
+                        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
+                      ]
+                    },
+                    `${optionValueStr}-${index}`
+                  );
+                }),
+                addOptionAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 border-t border-gray-100 pt-1 dark:border-slate-700", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
                   {
-                    htmlFor: inputId,
-                    className: tailwindMerge.twMerge(
-                      "relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
-                      option.disabled && "cursor-not-allowed opacity-50"
-                    ),
+                    type: "button",
+                    className: "flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm font-medium text-primary hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700",
+                    onClick: handleAddOptionActionClick,
+                    disabled,
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
-                        {
-                          type: multiple ? "checkbox" : "radio",
-                          id: inputId,
-                          name: inputName,
-                          value: option.value,
-                          disabled: option.disabled || disabled,
-                          checked: value !== void 0 ? isSelected : void 0,
-                          defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
-                          onChange: handleOptionChange,
-                          onBlur,
-                          ref,
-                          required: required && !multiple,
-                          className: "peer sr-only"
-                        }
-                      ),
-                      iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
-                      /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
+                      /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-plus", "aria-hidden": true }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: addOptionAction.label })
                     ]
-                  },
-                  `${optionValueStr}-${index}`
-                );
-              }) })
+                  }
+                ) })
+              ] })
             ]
           }
         ),
@@ -3668,19 +3753,19 @@ var Slider = ({
   const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);
   const resolvedStep = toNumber(step, 1);
   const isControlled = typeof value === "number";
-  const [internalValue, setInternalValue] = React.useState(
+  const [internalValue, setInternalValue] = React15.useState(
     clamp(
       typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : resolvedMin,
       resolvedMin,
       resolvedMax
     )
   );
-  React.useEffect(() => {
+  React15.useEffect(() => {
     if (isControlled && typeof value === "number") {
       setInternalValue(clamp(value, resolvedMin, resolvedMax));
     }
   }, [isControlled, value, resolvedMin, resolvedMax]);
-  React.useEffect(() => {
+  React15.useEffect(() => {
     if (!isControlled) {
       setInternalValue((prev) => clamp(prev, resolvedMin, resolvedMax));
     }
@@ -3783,7 +3868,7 @@ var thumbActiveClasses = {
   surface: "border-gray-900 shadow-[0_4px_12px_rgba(15,23,42,0.32)]",
   bw: "border-black shadow-[0_4px_12px_rgba(0,0,0,0.32)]"
 };
-var Switch = React.forwardRef(
+var Switch = React15.forwardRef(
   ({
     color = "primary",
     size = "medium",
@@ -3802,10 +3887,10 @@ var Switch = React.forwardRef(
     const focusClass = focusRingClasses[color] ?? focusRingClasses.primary;
     const thumbActive = thumbActiveClasses[color] ?? thumbActiveClasses.primary;
     const isControlled = checked !== void 0;
-    const [internalChecked, setInternalChecked] = React.useState(
+    const [internalChecked, setInternalChecked] = React15.useState(
       Boolean((isControlled ? checked : defaultChecked) ?? false)
     );
-    React.useEffect(() => {
+    React15.useEffect(() => {
       if (isControlled) {
         setInternalChecked(Boolean(checked));
       }
@@ -3878,7 +3963,7 @@ var Switch = React.forwardRef(
 );
 Switch.displayName = "Switch";
 var Switch_default = Switch;
-var sizeClasses4 = {
+var sizeClasses5 = {
   "x-small": "text-xs",
   small: "text-sm",
   medium: "text-base",
@@ -3916,7 +4001,7 @@ var Icon = ({ className, icon, size, color, ...rest }) => {
     }
   }
   const classBase = "mdi";
-  const sizeClass = size ? sizeClasses4[size] ?? sizeClasses4.medium : void 0;
+  const sizeClass = size ? sizeClasses5[size] ?? sizeClasses5.medium : void 0;
   const colorClass = color ? colorClasses2[color] ?? colorClasses2.primary : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx("i", { ...rest, className: tailwindMerge.twMerge(classBase, iconValue, sizeClass, colorClass, className) });
 };
@@ -4040,7 +4125,7 @@ var resolveIconClassName5 = (icon) => {
   return `mdi ${library} ${normalized}`.trim();
 };
 var resolveIconNode2 = (icon, fallbackClassName) => {
-  if (React__namespace.isValidElement(icon)) return icon;
+  if (React15__namespace.isValidElement(icon)) return icon;
   const iconClassName = resolveIconClassName5(icon) ?? fallbackClassName;
   if (!iconClassName) return null;
   const hasBase = iconClassName.split(" ").some((token) => token.trim() === "mdi");
@@ -4172,7 +4257,7 @@ var Notification = ({
 };
 var Notification_default = Notification;
 var useNotification = (defaultMessage) => {
-  const [messages, setMessages] = React.useState([]);
+  const [messages, setMessages] = React15.useState([]);
   const clearNotifications = (key) => {
     setMessages((prev) => key ? prev.filter((notification) => notification.key !== key) : []);
   };
@@ -4309,10 +4394,7 @@ var LineProgress = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: tailwindMerge.twMerge(
-            "h-full rounded-full transition-[width] duration-300 ease-out",
-            status === "active" ? "animate-pulse" : void 0
-          ),
+          className: tailwindMerge.twMerge("h-full rounded-full transition-[width] duration-300 ease-out", status === "active" ? "animate-pulse" : void 0),
           style: barStyle
         }
       ),
@@ -4451,7 +4533,7 @@ var Progress = (props) => {
   const percent = clampPercent(toNumber2(rawPercent));
   const successPercent = clampPercent(toNumber2(success?.percent));
   const status = providedStatus ?? (percent >= 100 ? "success" : "normal");
-  const resolvedClassName = tailwindMerge.twMerge("min-w-[200px]", className);
+  const resolvedClassName = tailwindMerge.twMerge("min-w-50", className);
   if (type === "circle" || type === "dashboard") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CircleProgress,
@@ -4567,7 +4649,7 @@ var resolveIconNode3 = (icon) => {
   const iconClass = resolveIconClassName2(icon);
   return iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClass, "aria-hidden": true }) : null;
 };
-var TimeLineItem = React__namespace.forwardRef((props, ref) => {
+var TimeLineItem = React15__namespace.forwardRef((props, ref) => {
   const {
     title,
     subtitle,
@@ -4686,13 +4768,13 @@ var TimeLineItem = React__namespace.forwardRef((props, ref) => {
 });
 TimeLineItem.displayName = "TimeLine.Item";
 var isTimeLineItem = (child) => {
-  if (!React__namespace.isValidElement(child)) {
+  if (!React15__namespace.isValidElement(child)) {
     return false;
   }
   const elementType = child.type;
   return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;
 };
-var TimeLine = React__namespace.forwardRef((props, ref) => {
+var TimeLine = React15__namespace.forwardRef((props, ref) => {
   const {
     side = "right",
     axis = "center",
@@ -4707,12 +4789,12 @@ var TimeLine = React__namespace.forwardRef((props, ref) => {
     ...rest
   } = props;
   const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;
-  const childArray = React__namespace.Children.toArray(children);
+  const childArray = React15__namespace.Children.toArray(children);
   const resolvedChildren = childArray.map((child, index) => {
     if (!isTimeLineItem(child)) {
       return child;
     }
-    return React__namespace.cloneElement(child, {
+    return React15__namespace.cloneElement(child, {
       __timelineSide: side,
       __timelineAxis: axis,
       __timelineAlign: align,