@herca/r-kit 0.0.83 → 0.0.84

package/dist/clients.js

@@ -13126,6 +13126,7 @@ var PreviewItem = ({
 };
 
 // src/components/input-file/input-file.tsx
+import clsx5 from "clsx";
 import { jsx as jsx415, jsxs as jsxs79 } from "react/jsx-runtime";
 var defaultExtractUrl = (res) => {
   if (res !== null && typeof res === "object" && "url" in res && typeof res.url === "string") {
@@ -13158,7 +13159,8 @@ var InputFile = forwardRef2(
     uploadConfig,
     onUploadSuccess,
     onRemoveFile,
-    onClear
+    onClear,
+    selectedFilesClassName
   }, ref) => {
     const inputRef = useRef4(null);
     const replaceInputRef = useRef4(null);
@@ -13569,7 +13571,7 @@ var InputFile = forwardRef2(
           className: "hidden"
         }
       ),
-      files.length > 0 && /* @__PURE__ */ jsxs79("div", { className: "flex flex-col gap-3", children: [
+      files.length > 0 && /* @__PURE__ */ jsxs79("div", { className: clsx5("flex flex-col gap-3", selectedFilesClassName), children: [
         /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx415(
             Text,
@@ -13892,11 +13894,11 @@ var InputOTP = ({
   const fullPattern = FULL_PATTERNS[type];
   const hasError = Array.isArray(errorMessages) ? errorMessages.length > 0 : typeof errorMessages === "string" && errorMessages.length > 0;
   const values = React402.useMemo(() => {
-    const chars = value.split("");
-    return Array.from({ length }, (_2, i) => chars[i] ?? "");
+    const chars = value?.split("");
+    return Array.from({ length }, (_2, i) => chars?.[i] ?? "");
   }, [value, length]);
   React402.useEffect(() => {
-    if (value.length === length && previousValueRef.current.length !== length) {
+    if (value?.length === length && previousValueRef.current != void 0 && previousValueRef.current.length !== length) {
       onComplete?.(value);
     }
     previousValueRef.current = value;
@@ -14021,6 +14023,7 @@ var InputOTP = ({
             name !== void 0 && name.length > 0 && /* @__PURE__ */ jsx417("input", { type: "hidden", name, value, required }),
             values.map((char, i) => {
               const displayValue = mask && char.length > 0 ? "\u2022" : char;
+              console.log(displayValue);
               const inputId = i === 0 ? fieldId : `${fieldId}-${i}`;
               const computedAriaLabel = ariaLabel !== void 0 ? ariaLabel(i, length) : `Digit ${i + 1} of ${length}`;
               return /* @__PURE__ */ jsxs81(React402.Fragment, { children: [
@@ -14031,7 +14034,7 @@ var InputOTP = ({
                       inputsRef.current[i] = el;
                     },
                     id: inputId,
-                    value: displayValue,
+                    value: char,
                     disabled,
                     readOnly,
                     required: required && i === 0,
@@ -14139,7 +14142,7 @@ function useCopy() {
 }
 
 // src/components/table/table.tsx
-import clsx5 from "clsx";
+import clsx6 from "clsx";
 import { createContext as createContext3, useContext as useContext3, useState as useState9 } from "react";
 
 // src/components/table/table-variants.ts
@@ -14196,7 +14199,7 @@ function Table({
   return /* @__PURE__ */ jsx419(TableContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx419(
     "table",
     {
-      className: clsx5(
+      className: clsx6(
         className,
         "overflow-hidden",
         (variant === "bordered" || variant == "stripped" || variant == "hovered" || variant === "wrapped-row-bordered") && "border-separate border-spacing-0",
@@ -14218,7 +14221,7 @@ function TableBody({ children, className }) {
   return /* @__PURE__ */ jsx419(
     "tbody",
     {
-      className: clsx5(
+      className: clsx6(
         (isBordered || isStripped || isHovered) && "[&>tr:last-child>td:first-child]:rounded-bl-lg [&>tr:last-child>td:last-child]:rounded-br-lg",
         isWrapped && "[&>tr>td:first-child]:border-l-0!",
         className
@@ -14242,7 +14245,7 @@ function TableRow({
   return /* @__PURE__ */ jsx419(TableRowContext.Provider, { value: { isLast }, children: /* @__PURE__ */ jsx419(
     "tr",
     {
-      className: clsx5(
+      className: clsx6(
         TableVariants({ tableRow: variant }),
         "[&>th:first-child]:rounded-tl-lg [&>th:last-child]:rounded-tr-lg",
         Boolean(isLast) && "border-b-0!",
@@ -14267,7 +14270,7 @@ function TableCellHead({
   return /* @__PURE__ */ jsx419("th", { className: cn(className, "px-4 py-3"), children: value !== void 0 ? /* @__PURE__ */ jsxs82(
     "button",
     {
-      className: clsx5(
+      className: clsx6(
         "flex items-center gap-2.5",
         !!onClick && "cursor-pointer"
       ),
@@ -14347,7 +14350,7 @@ function TablePagination({
   return /* @__PURE__ */ jsxs82(
     "div",
     {
-      className: clsx5(
+      className: clsx6(
         "flex w-full items-center justify-between md:flex-nowrap",
         wrapperClassName
       ),
@@ -14367,7 +14370,7 @@ function TablePagination({
             /* @__PURE__ */ jsx419(
               DropdownTrigger,
               {
-                className: clsx5("outline-none", dropdownTriggerClassName),
+                className: clsx6("outline-none", dropdownTriggerClassName),
                 children: /* @__PURE__ */ jsx419(
                   Input,
                   {
@@ -14391,7 +14394,7 @@ function TablePagination({
             /* @__PURE__ */ jsx419(
               DropdownContent,
               {
-                className: clsx5(
+                className: clsx6(
                   "w-19 gap-0 rounded-lg p-1 shadow-sm",
                   dropdownContentClassName
                 ),
@@ -14399,7 +14402,7 @@ function TablePagination({
                 children: perPages.map((item) => /* @__PURE__ */ jsx419(
                   DropdownItem,
                   {
-                    className: clsx5(
+                    className: clsx6(
                       value === item && "bg-primary-50 border-primary-300",
                       "justify-center rounded-sm! border-0",
                       dropdownItemClassName
@@ -14453,7 +14456,7 @@ function TablePagination({
                   e.preventDefault();
                   numberOnClick?.(item);
                 },
-                className: clsx5(
+                className: clsx6(
                   "grid size-9 cursor-pointer place-items-center rounded-lg",
                   active ? "bg-primary-1000 hover:bg-primary-1000 *:text-white" : "hover:bg-primary-50 *:text-gray-700"
                 ),
@@ -14669,7 +14672,7 @@ var ButtonNavigator = ({
 };
 
 // src/components/calendar/partials/calendar-grid.tsx
-import clsx8 from "clsx";
+import clsx9 from "clsx";
 
 // src/components/calendar/partials/button-more.tsx
 import { jsx as jsx421, jsxs as jsxs83 } from "react/jsx-runtime";
@@ -14691,7 +14694,7 @@ function ButtonMore({ count, onClick }) {
 }
 
 // src/components/calendar/partials/calendar-day-item.tsx
-import clsx6 from "clsx";
+import clsx7 from "clsx";
 
 // src/components/calendar/helpers/create-date-style-helpers.ts
 function createDateStyleHelpers({
@@ -14814,7 +14817,7 @@ function CalendarDayItem({
       style: styleHelpers.getDayStyle(),
       onClick: () => onClick(day),
       disabled: isDisabled && isCurrentMonth,
-      className: clsx6(
+      className: clsx7(
         date_size_map[size ?? "md"],
         styleHelpers.getCursorClass(),
         styleHelpers.getTextColorClass(),
@@ -14837,7 +14840,7 @@ function CalendarDayItem({
         /* @__PURE__ */ jsx422(
           "h5",
           {
-            className: clsx6(
+            className: clsx7(
               "font-metropolis text-xs transition-colors",
               variant === "default" && "grid size-8 place-items-center justify-center rounded-full",
               //prettier-ignore
@@ -14875,7 +14878,7 @@ function CalendarDayItem({
 
 // src/components/calendar/partials/event-bar.tsx
 import { useState as useState10 } from "react";
-import clsx7 from "clsx";
+import clsx8 from "clsx";
 import { Fragment as Fragment7, jsx as jsx423, jsxs as jsxs85 } from "react/jsx-runtime";
 function EventBar({
   segment,
@@ -14921,7 +14924,7 @@ function EventBar({
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       onMouseMove: (e) => handleMouseMove(e, isMouseEventOnChildren),
-      className: clsx7(
+      className: clsx8(
         "relative mx-0.5 mt-1 flex items-center justify-between gap-3 overflow-hidden rounded p-1 text-[11px] leading-5 font-medium md:p-1.5",
         onClick && "cursor-pointer"
       ),
@@ -14978,7 +14981,7 @@ function EventBar({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx423(Text, { variant: "t3", className: clsx7("text-gray-800"), children: segment?.event?.tooltip?.label ?? segment.event.label })
+                /* @__PURE__ */ jsx423(Text, { variant: "t3", className: clsx8("text-gray-800"), children: segment?.event?.tooltip?.label ?? segment.event.label })
               ] })
             ] })
           }
@@ -15014,7 +15017,7 @@ function CalendarGrid({
   return /* @__PURE__ */ jsx424(
     "div",
     {
-      className: clsx8(
+      className: clsx9(
         "relative",
         variant === "compact" && size === "sm" && "space-y-1"
       ),
@@ -15105,7 +15108,7 @@ function CalendarGrid({
         return /* @__PURE__ */ jsxs86(
           "div",
           {
-            className: clsx8(
+            className: clsx9(
               "relative",
               variant === "default" && "border-b border-gray-300 last:border-b-0!",
               //prettier-ignore
@@ -15115,7 +15118,7 @@ function CalendarGrid({
               /* @__PURE__ */ jsx424(
                 "div",
                 {
-                  className: clsx8(
+                  className: clsx9(
                     "grid w-full grid-cols-7",
                     variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0",
                     //prettier-ignore
@@ -15403,7 +15406,7 @@ function NavigatorButton({
 }
 
 // src/components/calendar/partials/days-of-week.tsx
-import clsx9 from "clsx";
+import clsx10 from "clsx";
 import { Fragment as Fragment8, jsx as jsx427, jsxs as jsxs88 } from "react/jsx-runtime";
 var day_of_week_size = {
   sm: "t2",
@@ -15421,7 +15424,7 @@ function DaysOfWeek({
   return /* @__PURE__ */ jsxs88(
     "div",
     {
-      className: clsx9(
+      className: clsx10(
         "grid justify-items-center",
         variant === "compact" && "calendar-cols mb-3 gap-x-1 *:text-center!",
         variant === "default" && "w-full bg-gray-100 *:p-3 *:w-full *:text-start! *:border-r *:border-gray-300 *:last:border-r-0",
@@ -15442,7 +15445,7 @@ function DaysOfWeek({
             as: "h5",
             weight: variant === "compact" ? "medium" : "semibold",
             value: day,
-            className: clsx9(
+            className: clsx10(
               variant === "compact" && "text-gray-600!",
               variant === "default" && "text-gray-900! uppercase"
             ),
@@ -15456,7 +15459,7 @@ function DaysOfWeek({
 }
 
 // src/components/calendar/calendar.tsx
-import clsx10 from "clsx";
+import clsx11 from "clsx";
 
 // src/components/calendar/constants.tsx
 var typeOptions = [
@@ -15643,7 +15646,7 @@ var Calendar2 = ({
       setSelectedType(type);
     }
   }, [type]);
-  return /* @__PURE__ */ jsx428(Fragment9, { children: /* @__PURE__ */ jsxs89("div", { className: clsx10(variant === "default" && "flex flex-col gap-2"), children: [
+  return /* @__PURE__ */ jsx428(Fragment9, { children: /* @__PURE__ */ jsxs89("div", { className: clsx11(variant === "default" && "flex flex-col gap-2"), children: [
     variant === "default" && /* @__PURE__ */ jsxs89("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ jsxs89("div", { className: "*:cursor-pointer", children: [
@@ -15716,7 +15719,7 @@ var Calendar2 = ({
                     setSelectedType(option.value);
                     onTypeChange?.(option.value);
                   },
-                  className: clsx10(
+                  className: clsx11(
                     (selectedType === option.value || index === selectedTypeIndex) && "bg-primary-50!"
                   ),
                   children: /* @__PURE__ */ jsx428(Text, { className: "text-gray-900", children: option.label })
@@ -15920,7 +15923,7 @@ var parseMonthName = (monthStr) => {
 };
 
 // src/components/date-picker/date-picker.tsx
-import clsx11 from "clsx";
+import clsx12 from "clsx";
 import { jsx as jsx429, jsxs as jsxs90 } from "react/jsx-runtime";
 var DatePicker = ({
   format = "DD-MM-YYYY",
@@ -15942,7 +15945,9 @@ var DatePicker = ({
   size = "md",
   showController = true,
   align = "start",
-  containerClassName
+  containerClassName,
+  placeholder,
+  isClearable = false
 }) => {
   const [selectedDate, setSelectedDate] = useState12(
     controlledValue || null
@@ -16172,7 +16177,7 @@ var DatePicker = ({
     "div",
     {
       ref: containerRef,
-      className: clsx11("relative flex max-w-sm flex-col", containerClassName),
+      className: clsx12("relative flex max-w-sm flex-col", containerClassName),
       children: /* @__PURE__ */ jsxs90(
         Dropdown,
         {
@@ -16185,18 +16190,40 @@ var DatePicker = ({
             }
           },
           children: [
-            /* @__PURE__ */ jsx429(DropdownTrigger, { asChild: Boolean(trigger), children: Boolean(trigger) === false ? /* @__PURE__ */ jsx429(
+            /* @__PURE__ */ jsx429(DropdownTrigger, { asChild: true, children: Boolean(trigger) === false ? /* @__PURE__ */ jsx429(
               Input,
               {
-                type: "text",
                 mergedAddon: true,
+                type: "text",
                 className: "pl-0",
-                leftAddonClassName: "pr-1!",
-                leftAddon: /* @__PURE__ */ jsx429(Icon_default, { name: "calendar", className: "text-gray-900" }),
-                placeholder: mode === "range" ? `${formatConfig.placeholder} - ${formatConfig.placeholder}` : formatConfig.placeholder,
+                leftAddonClassName: "pr-1! shrink-0",
                 onChange: handleInputChange2,
                 value: inputValue,
-                readOnly: mode === "range"
+                readOnly: mode === "range",
+                leftAddon: /* @__PURE__ */ jsx429(Icon_default, { name: "calendar", className: "text-gray-900", size: 24 }),
+                rightAddonClassName: "shrink-0",
+                rightAddon: isClearable && inputValue && /* @__PURE__ */ jsx429(
+                  "button",
+                  {
+                    className: "shrink-0 cursor-pointer",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setInputValue("");
+                      controlledOnRangeChange?.({ start: null, end: null });
+                      controlledOnChange?.(null);
+                    },
+                    children: /* @__PURE__ */ jsx429(
+                      Icon_default,
+                      {
+                        name: "times-circle",
+                        size: 20,
+                        className: "shrink-0 text-gray-900"
+                      }
+                    )
+                  }
+                ),
+                placeholder: placeholder !== void 0 ? placeholder : mode === "range" ? `${formatConfig.placeholder} - ${formatConfig.placeholder}` : formatConfig.placeholder
               }
             ) : trigger }),
             /* @__PURE__ */ jsx429(
@@ -16204,7 +16231,7 @@ var DatePicker = ({
               {
                 align,
                 sideOffset: 5,
-                className: clsx11("z-10 overflow-hidden p-0", wrapperClassName),
+                className: clsx12("z-10 overflow-hidden p-0", wrapperClassName),
                 children: /* @__PURE__ */ jsx429("div", { className: "top-full z-10", children: mode === "single" ? /* @__PURE__ */ jsx429(
                   Calendar2,
                   {
@@ -16630,7 +16657,7 @@ var Switch = ({
 };
 
 // src/components/toast/toast-card.tsx
-import clsx12 from "clsx";
+import clsx13 from "clsx";
 
 // src/components/toast/toast-variants.ts
 import { cva as cva11 } from "class-variance-authority";
@@ -16684,7 +16711,7 @@ function ToastCard({
   return /* @__PURE__ */ jsxs92(
     "div",
     {
-      className: clsx12(
+      className: clsx13(
         "flex max-w-81.75 min-w-81.75 items-center justify-between rounded-lg px-3 py-2 shadow-[0px_2px_10px_0px_#6B728033]",
         variant === "outline" && "border border-gray-500",
         variant === "outline" && color !== "primary" && color !== "secondary" && "bg-white!",
@@ -16699,7 +16726,7 @@ function ToastCard({
             {
               name: icon,
               size: iconSize,
-              className: clsx12(
+              className: clsx13(
                 variant === "outline" && color === "primary" && "text-primary-1000!",
                 variant === "outline" && color === "secondary" && "text-white!",
                 ToastVariants({ text: color })
@@ -16709,7 +16736,7 @@ function ToastCard({
           /* @__PURE__ */ jsxs92(
             "div",
             {
-              className: clsx12(
+              className: clsx13(
                 "flex flex-col",
                 variant === "outline" && color === "primary" && "text-primary-1000!",
                 variant === "outline" && color === "secondary" && "text-white!",
@@ -16737,7 +16764,7 @@ function ToastCard({
             {
               name: "times",
               size: 20,
-              className: clsx12(
+              className: clsx13(
                 ToastVariants({ text: color }),
                 variant === "outline" && color === "primary" && "text-primary-1000!",
                 variant === "outline" && color === "secondary" && "text-white!"
@@ -16752,7 +16779,7 @@ function ToastCard({
 
 // src/components/toast/toast-provider.tsx
 import { useState as useState14, useCallback as useCallback2 } from "react";
-import clsx13 from "clsx";
+import clsx14 from "clsx";
 
 // src/components/toast/toast-context.ts
 import { createContext as createContext4 } from "react";
@@ -16804,7 +16831,7 @@ function ToastProvider({
     /* @__PURE__ */ jsx434(
       "div",
       {
-        className: clsx13(
+        className: clsx14(
           "fixed z-50 flex flex-col gap-3 duration-300",
           position === "top-right" && "top-4 right-4",
           position === "top-left" && "top-4 left-4",
@@ -16921,7 +16948,7 @@ function RoundedSpinner({
 }
 
 // src/components/select/select.tsx
-import clsx14 from "clsx";
+import clsx15 from "clsx";
 
 // src/components/select/selectSize.ts
 import { cva as cva12 } from "class-variance-authority";
@@ -17342,7 +17369,7 @@ function Select({
                 onLoadMore !== void 0 && /* @__PURE__ */ jsx436(
                   "div",
                   {
-                    className: clsx14(
+                    className: clsx15(
                       "flex h-5 items-center justify-center py-2 duration-300"
                     ),
                     children: isLoadingMore === true && /* @__PURE__ */ jsx436(RoundedSpinner, { size: 20, color: "primary" })
@@ -17903,7 +17930,7 @@ TabsContent.displayName = "TabsContent";
 
 // src/components/button-group/button-group.tsx
 import { createContext as createContext6, useContext as useContext6 } from "react";
-import clsx15 from "clsx";
+import clsx16 from "clsx";
 import { jsx as jsx439 } from "react/jsx-runtime";
 var ButtonGroupContext = createContext6(null);
 var ButtonGroup = ({
@@ -17916,7 +17943,7 @@ var ButtonGroup = ({
   return /* @__PURE__ */ jsx439(ButtonGroupContext.Provider, { value: { size, color, variant, direction }, children: /* @__PURE__ */ jsx439(
     "div",
     {
-      className: clsx15(
+      className: clsx16(
         "flex *:rounded-none",
         direction === "horizontal" ? "flex-row items-center *:first:rounded-tl-lg *:first:rounded-bl-lg *:last:rounded-tr-lg *:last:rounded-br-lg" : "flex-col items-stretch *:first:rounded-tl-lg *:first:rounded-tr-lg *:last:rounded-br-lg *:last:rounded-bl-lg"
       ),
@@ -17937,7 +17964,7 @@ var ButtonGroupItem = ({
   const isTertiary = variant === "tertiary";
   const isVertical = direction === "vertical";
   const isHorizontal = direction === "horizontal";
-  const borderDirectionClass = clsx15(
+  const borderDirectionClass = clsx16(
     isHorizontal && "border-l-0 first:border-l",
     isVertical && "border-t-0 first:border-t"
   );
@@ -17958,8 +17985,8 @@ var ButtonGroupItem = ({
       size: context?.size,
       color: color ?? context?.color,
       variant: context?.variant,
-      className: clsx15(
-        isDefault && clsx15(
+      className: clsx16(
+        isDefault && clsx16(
           isHorizontal && "border-r border-white last:border-r-0",
           isVertical && "border-b border-white last:border-b-0"
         ),
@@ -17992,7 +18019,7 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { dracula } from "@uiw/codemirror-theme-dracula";
 import CodeMirror from "@uiw/react-codemirror";
-import clsx21 from "clsx";
+import clsx22 from "clsx";
 import { useEffect as useEffect21, useState as useState24 } from "react";
 
 // node_modules/orderedmap/dist/index.js
@@ -34961,7 +34988,7 @@ function AdvanceGroup({
 
 // src/components/text-editor/partials/alignment-group.tsx
 import { useEditorState } from "@tiptap/react";
-import clsx16 from "clsx";
+import clsx17 from "clsx";
 import { Fragment as Fragment12, jsx as jsx443, jsxs as jsxs97 } from "react/jsx-runtime";
 function AlignmentGroup({
   editor,
@@ -35019,7 +35046,7 @@ function AlignmentGroup({
         DropdownItem,
         {
           onClick: () => editor.chain().focus().setTextAlign(align.align).run(),
-          className: clsx16(
+          className: clsx17(
             "rounded-md border-transparent py-1",
             activeState[align.align] && "bg-primary-50 border-primary-300"
           ),
@@ -35058,11 +35085,11 @@ function AlignmentGroup({
 
 // src/components/text-editor/partials/formatting-group.tsx
 import { useEditorState as useEditorState2 } from "@tiptap/react";
-import clsx18 from "clsx";
+import clsx19 from "clsx";
 import { useEffect as useEffect17, useState as useState19 } from "react";
 
 // src/components/text-editor/partials/color-picker-button.tsx
-import clsx17 from "clsx";
+import clsx18 from "clsx";
 import { jsx as jsx444, jsxs as jsxs98 } from "react/jsx-runtime";
 function ColorPickerButton({
   id,
@@ -35075,7 +35102,7 @@ function ColorPickerButton({
     /* @__PURE__ */ jsx444(
       "div",
       {
-        className: clsx17(
+        className: clsx18(
           "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
           disabled && "opacity-50"
         ),
@@ -35202,7 +35229,7 @@ function FormattingGroup({
             fontSizes.map((size, index) => /* @__PURE__ */ jsx445(
               DropdownItem,
               {
-                className: clsx18(
+                className: clsx19(
                   "flex justify-start rounded-md border-transparent py-1",
                   displayFontSize === size && "bg-primary-50 border-primary-300"
                 ),
@@ -35228,7 +35255,7 @@ function FormattingGroup({
               "div",
               {
                 title: "Heading",
-                className: clsx18(
+                className: clsx19(
                   "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
                   (disabled || activeState.isInYoutube || activeState.isInImage) && "opacity-50"
                 ),
@@ -35247,7 +35274,7 @@ function FormattingGroup({
                     {
                       name: "angle-down-small",
                       size: 18,
-                      className: clsx18(activeState.activeHeading && "ml-1")
+                      className: clsx19(activeState.activeHeading && "ml-1")
                     }
                   )
                 ]
@@ -35259,7 +35286,7 @@ function FormattingGroup({
           /* @__PURE__ */ jsx445(
             DropdownItem,
             {
-              className: clsx18(
+              className: clsx19(
                 "rounded-md border-transparent py-1",
                 activeState.activeParagraph && "bg-primary-50 border-primary-300"
               ),
@@ -35272,7 +35299,7 @@ function FormattingGroup({
           headings.map((head, index) => /* @__PURE__ */ jsx445(
             DropdownItem,
             {
-              className: clsx18(
+              className: clsx19(
                 "rounded-md border-transparent py-1",
                 activeState.activeHeading === head.level && "bg-primary-50 border-primary-300"
               ),
@@ -35328,7 +35355,7 @@ function FormattingGroup({
               "div",
               {
                 title: "Line Height",
-                className: clsx18(
+                className: clsx19(
                   "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
                   (disabled || activeState.isInYoutube || activeState.isInImage) && "opacity-50"
                 ),
@@ -35384,7 +35411,7 @@ function FormattingGroup({
               lineHeights.map((size, index) => /* @__PURE__ */ jsx445(
                 DropdownItem,
                 {
-                  className: clsx18(
+                  className: clsx19(
                     "flex justify-center rounded-md border-transparent py-1",
                     displayLineHeight === size && "bg-primary-50 border-primary-300"
                   ),
@@ -35546,7 +35573,7 @@ import { useState as useState23 } from "react";
 
 // src/components/kbd/kbd.tsx
 import "react";
-import clsx19 from "clsx";
+import clsx20 from "clsx";
 
 // src/components/kbd/kbd-variants.ts
 import { cva as cva13 } from "class-variance-authority";
@@ -35682,7 +35709,7 @@ function Kbd({ size, variant, color, className, ...props }) {
   return /* @__PURE__ */ jsx447(
     "kbd",
     {
-      className: clsx19(kbdVariants({ size, variant, color }), className),
+      className: clsx20(kbdVariants({ size, variant, color }), className),
       ...props
     }
   );
@@ -36478,7 +36505,7 @@ function InsertGroup({
 
 // src/components/text-editor/partials/table-group.tsx
 import { useEditorState as useEditorState5 } from "@tiptap/react";
-import clsx20 from "clsx";
+import clsx21 from "clsx";
 import { jsx as jsx451, jsxs as jsxs104 } from "react/jsx-runtime";
 function TableGroup({
   editor,
@@ -36583,7 +36610,7 @@ function TableGroup({
           "div",
           {
             title: "Heading",
-            className: clsx20(
+            className: clsx21(
               "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
               activeState.isInTable && "bg-primary-1000",
               (disabled || activeState.isInYoutube || activeState.isInImage) && "opacity-50"
@@ -36594,7 +36621,7 @@ function TableGroup({
                 {
                   name: "table",
                   size: 18,
-                  className: clsx20(
+                  className: clsx21(
                     activeState.isInTable ? "text-white" : "text-gray-900"
                   )
                 }
@@ -36604,7 +36631,7 @@ function TableGroup({
                 {
                   name: "angle-down-small",
                   size: 17,
-                  className: clsx20(
+                  className: clsx21(
                     activeState.isInTable ? "text-white" : "text-gray-900"
                   )
                 }
@@ -36626,7 +36653,7 @@ function TableGroup({
             {
               onClick: () => action.onClick(),
               disabled: Boolean(action.disabled) || action.requiresTable && !activeState.isInTable,
-              className: clsx20(
+              className: clsx21(
                 "rounded-md border-transparent py-1 disabled:opacity-50",
                 Boolean(action.active) && "bg-primary-50 border-primary-300"
               ),
@@ -36643,7 +36670,7 @@ function TableGroup({
             {
               onClick: () => action.onClick(),
               disabled: Boolean(action.disabled) || action.requiresTable && !activeState.isInTable,
-              className: clsx20(
+              className: clsx21(
                 "rounded-md border-transparent py-1 disabled:opacity-50",
                 Boolean(action.active) && "bg-primary-50 border-primary-300"
               ),
@@ -36660,7 +36687,7 @@ function TableGroup({
             {
               onClick: () => action.onClick(),
               disabled: Boolean(action.disabled) || action.requiresTable && !activeState.isInTable,
-              className: clsx20(
+              className: clsx21(
                 "rounded-md border-transparent py-1 disabled:opacity-50",
                 Boolean(action.active) && "bg-primary-50 border-primary-300"
               ),
@@ -36794,7 +36821,7 @@ function TextEditor({
       children: /* @__PURE__ */ jsxs105(
         "div",
         {
-          className: clsx21(
+          className: clsx22(
             "relative flex w-full flex-col rounded-xl border",
             errorMessages !== void 0 ? "border-danger-500" : "border-gray-300"
           ),
@@ -36802,7 +36829,7 @@ function TextEditor({
             /* @__PURE__ */ jsx452(
               "div",
               {
-                className: clsx21(
+                className: clsx22(
                   "sticky top-0 z-10 rounded-t-xl bg-white",
                   toolbarClassName
                 ),
@@ -36848,7 +36875,7 @@ function TextEditor({
               DragHandleComponent,
               {
                 editor,
-                className: clsx21("relative z-20", dragHandleClassName),
+                className: clsx22("relative z-20", dragHandleClassName),
                 ...dragHandleProps,
                 children: /* @__PURE__ */ jsx452("div", { className: "custom-drag-handle absolute left-0" })
               }
@@ -36860,7 +36887,7 @@ function TextEditor({
                 extensions: [html()],
                 onChange: (value2) => setHtmlValue(value2),
                 theme: dracula,
-                className: clsx21(isHtmlMode ? "block" : "hidden")
+                className: clsx22(isHtmlMode ? "block" : "hidden")
               }
             ),
             /* @__PURE__ */ jsx452(
@@ -36869,7 +36896,7 @@ function TextEditor({
                 placeholder,
                 disabled,
                 editor,
-                className: clsx21(
+                className: clsx22(
                   "*:min-h-100 *:translate-y-1 *:px-5 *:py-2 *:outline-none",
                   textEditorClassName,
                   isHtmlMode && "hidden"