@herca/r-kit 0.0.83 → 0.0.84

package/dist/clients.cjs

@@ -13278,6 +13278,7 @@ var PreviewItem = ({
 };
 
 // src/components/input-file/input-file.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime415 = require("react/jsx-runtime");
 var defaultExtractUrl = (res) => {
   if (res !== null && typeof res === "object" && "url" in res && typeof res.url === "string") {
@@ -13310,7 +13311,8 @@ var InputFile = (0, import_react401.forwardRef)(
     uploadConfig,
     onUploadSuccess,
     onRemoveFile,
-    onClear
+    onClear,
+    selectedFilesClassName
   }, ref) => {
     const inputRef = (0, import_react401.useRef)(null);
     const replaceInputRef = (0, import_react401.useRef)(null);
@@ -13721,7 +13723,7 @@ var InputFile = (0, import_react401.forwardRef)(
           className: "hidden"
         }
       ),
-      files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime415.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime415.jsxs)("div", { className: (0, import_clsx5.default)("flex flex-col gap-3", selectedFilesClassName), children: [
         /* @__PURE__ */ (0, import_jsx_runtime415.jsxs)("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime415.jsx)(
             Text,
@@ -14044,11 +14046,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;
@@ -14173,6 +14175,7 @@ var InputOTP = ({
             name !== void 0 && name.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime417.jsx)("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__ */ (0, import_jsx_runtime417.jsxs)(React402.Fragment, { children: [
@@ -14183,7 +14186,7 @@ var InputOTP = ({
                       inputsRef.current[i] = el;
                     },
                     id: inputId,
-                    value: displayValue,
+                    value: char,
                     disabled,
                     readOnly,
                     required: required && i === 0,
@@ -14291,7 +14294,7 @@ function useCopy() {
 }
 
 // src/components/table/table.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_react404 = require("react");
 
 // src/components/table/table-variants.ts
@@ -14348,7 +14351,7 @@ function Table({
   return /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(TableContext.Provider, { value: { variant }, children: /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
     "table",
     {
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         className,
         "overflow-hidden",
         (variant === "bordered" || variant == "stripped" || variant == "hovered" || variant === "wrapped-row-bordered") && "border-separate border-spacing-0",
@@ -14370,7 +14373,7 @@ function TableBody({ children, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
     "tbody",
     {
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         (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
@@ -14394,7 +14397,7 @@ function TableRow({
   return /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(TableRowContext.Provider, { value: { isLast }, children: /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
     "tr",
     {
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         TableVariants({ tableRow: variant }),
         "[&>th:first-child]:rounded-tl-lg [&>th:last-child]:rounded-tr-lg",
         Boolean(isLast) && "border-b-0!",
@@ -14419,7 +14422,7 @@ function TableCellHead({
   return /* @__PURE__ */ (0, import_jsx_runtime419.jsx)("th", { className: cn(className, "px-4 py-3"), children: value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime419.jsxs)(
     "button",
     {
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         "flex items-center gap-2.5",
         !!onClick && "cursor-pointer"
       ),
@@ -14499,7 +14502,7 @@ function TablePagination({
   return /* @__PURE__ */ (0, import_jsx_runtime419.jsxs)(
     "div",
     {
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         "flex w-full items-center justify-between md:flex-nowrap",
         wrapperClassName
       ),
@@ -14519,7 +14522,7 @@ function TablePagination({
             /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
               DropdownTrigger,
               {
-                className: (0, import_clsx5.default)("outline-none", dropdownTriggerClassName),
+                className: (0, import_clsx6.default)("outline-none", dropdownTriggerClassName),
                 children: /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
                   Input,
                   {
@@ -14543,7 +14546,7 @@ function TablePagination({
             /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
               DropdownContent,
               {
-                className: (0, import_clsx5.default)(
+                className: (0, import_clsx6.default)(
                   "w-19 gap-0 rounded-lg p-1 shadow-sm",
                   dropdownContentClassName
                 ),
@@ -14551,7 +14554,7 @@ function TablePagination({
                 children: perPages.map((item) => /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(
                   DropdownItem,
                   {
-                    className: (0, import_clsx5.default)(
+                    className: (0, import_clsx6.default)(
                       value === item && "bg-primary-50 border-primary-300",
                       "justify-center rounded-sm! border-0",
                       dropdownItemClassName
@@ -14605,7 +14608,7 @@ function TablePagination({
                   e.preventDefault();
                   numberOnClick?.(item);
                 },
-                className: (0, import_clsx5.default)(
+                className: (0, import_clsx6.default)(
                   "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"
                 ),
@@ -14821,7 +14824,7 @@ var ButtonNavigator = ({
 };
 
 // src/components/calendar/partials/calendar-grid.tsx
-var import_clsx8 = __toESM(require("clsx"), 1);
+var import_clsx9 = __toESM(require("clsx"), 1);
 
 // src/components/calendar/partials/button-more.tsx
 var import_jsx_runtime421 = require("react/jsx-runtime");
@@ -14843,7 +14846,7 @@ function ButtonMore({ count, onClick }) {
 }
 
 // src/components/calendar/partials/calendar-day-item.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
+var import_clsx7 = __toESM(require("clsx"), 1);
 
 // src/components/calendar/helpers/create-date-style-helpers.ts
 function createDateStyleHelpers({
@@ -14966,7 +14969,7 @@ function CalendarDayItem({
       style: styleHelpers.getDayStyle(),
       onClick: () => onClick(day),
       disabled: isDisabled && isCurrentMonth,
-      className: (0, import_clsx6.default)(
+      className: (0, import_clsx7.default)(
         date_size_map[size ?? "md"],
         styleHelpers.getCursorClass(),
         styleHelpers.getTextColorClass(),
@@ -14989,7 +14992,7 @@ function CalendarDayItem({
         /* @__PURE__ */ (0, import_jsx_runtime422.jsx)(
           "h5",
           {
-            className: (0, import_clsx6.default)(
+            className: (0, import_clsx7.default)(
               "font-metropolis text-xs transition-colors",
               variant === "default" && "grid size-8 place-items-center justify-center rounded-full",
               //prettier-ignore
@@ -15027,7 +15030,7 @@ function CalendarDayItem({
 
 // src/components/calendar/partials/event-bar.tsx
 var import_react405 = require("react");
-var import_clsx7 = __toESM(require("clsx"), 1);
+var import_clsx8 = __toESM(require("clsx"), 1);
 var import_jsx_runtime423 = require("react/jsx-runtime");
 function EventBar({
   segment,
@@ -15073,7 +15076,7 @@ function EventBar({
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       onMouseMove: (e) => handleMouseMove(e, isMouseEventOnChildren),
-      className: (0, import_clsx7.default)(
+      className: (0, import_clsx8.default)(
         "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"
       ),
@@ -15130,7 +15133,7 @@ function EventBar({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime423.jsx)(Text, { variant: "t3", className: (0, import_clsx7.default)("text-gray-800"), children: segment?.event?.tooltip?.label ?? segment.event.label })
+                /* @__PURE__ */ (0, import_jsx_runtime423.jsx)(Text, { variant: "t3", className: (0, import_clsx8.default)("text-gray-800"), children: segment?.event?.tooltip?.label ?? segment.event.label })
               ] })
             ] })
           }
@@ -15166,7 +15169,7 @@ function CalendarGrid({
   return /* @__PURE__ */ (0, import_jsx_runtime424.jsx)(
     "div",
     {
-      className: (0, import_clsx8.default)(
+      className: (0, import_clsx9.default)(
         "relative",
         variant === "compact" && size === "sm" && "space-y-1"
       ),
@@ -15257,7 +15260,7 @@ function CalendarGrid({
         return /* @__PURE__ */ (0, import_jsx_runtime424.jsxs)(
           "div",
           {
-            className: (0, import_clsx8.default)(
+            className: (0, import_clsx9.default)(
               "relative",
               variant === "default" && "border-b border-gray-300 last:border-b-0!",
               //prettier-ignore
@@ -15267,7 +15270,7 @@ function CalendarGrid({
               /* @__PURE__ */ (0, import_jsx_runtime424.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx8.default)(
+                  className: (0, import_clsx9.default)(
                     "grid w-full grid-cols-7",
                     variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0",
                     //prettier-ignore
@@ -15555,7 +15558,7 @@ function NavigatorButton({
 }
 
 // src/components/calendar/partials/days-of-week.tsx
-var import_clsx9 = __toESM(require("clsx"), 1);
+var import_clsx10 = __toESM(require("clsx"), 1);
 var import_jsx_runtime427 = require("react/jsx-runtime");
 var day_of_week_size = {
   sm: "t2",
@@ -15573,7 +15576,7 @@ function DaysOfWeek({
   return /* @__PURE__ */ (0, import_jsx_runtime427.jsxs)(
     "div",
     {
-      className: (0, import_clsx9.default)(
+      className: (0, import_clsx10.default)(
         "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",
@@ -15594,7 +15597,7 @@ function DaysOfWeek({
             as: "h5",
             weight: variant === "compact" ? "medium" : "semibold",
             value: day,
-            className: (0, import_clsx9.default)(
+            className: (0, import_clsx10.default)(
               variant === "compact" && "text-gray-600!",
               variant === "default" && "text-gray-900! uppercase"
             ),
@@ -15608,7 +15611,7 @@ function DaysOfWeek({
 }
 
 // src/components/calendar/calendar.tsx
-var import_clsx10 = __toESM(require("clsx"), 1);
+var import_clsx11 = __toESM(require("clsx"), 1);
 
 // src/components/calendar/constants.tsx
 var typeOptions = [
@@ -15795,7 +15798,7 @@ var Calendar2 = ({
       setSelectedType(type);
     }
   }, [type]);
-  return /* @__PURE__ */ (0, import_jsx_runtime428.jsx)(import_jsx_runtime428.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime428.jsxs)("div", { className: (0, import_clsx10.default)(variant === "default" && "flex flex-col gap-2"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime428.jsx)(import_jsx_runtime428.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime428.jsxs)("div", { className: (0, import_clsx11.default)(variant === "default" && "flex flex-col gap-2"), children: [
     variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime428.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime428.jsxs)("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime428.jsxs)("div", { className: "*:cursor-pointer", children: [
@@ -15868,7 +15871,7 @@ var Calendar2 = ({
                     setSelectedType(option.value);
                     onTypeChange?.(option.value);
                   },
-                  className: (0, import_clsx10.default)(
+                  className: (0, import_clsx11.default)(
                     (selectedType === option.value || index === selectedTypeIndex) && "bg-primary-50!"
                   ),
                   children: /* @__PURE__ */ (0, import_jsx_runtime428.jsx)(Text, { className: "text-gray-900", children: option.label })
@@ -16072,7 +16075,7 @@ var parseMonthName = (monthStr) => {
 };
 
 // src/components/date-picker/date-picker.tsx
-var import_clsx11 = __toESM(require("clsx"), 1);
+var import_clsx12 = __toESM(require("clsx"), 1);
 var import_jsx_runtime429 = require("react/jsx-runtime");
 var DatePicker = ({
   format = "DD-MM-YYYY",
@@ -16094,7 +16097,9 @@ var DatePicker = ({
   size = "md",
   showController = true,
   align = "start",
-  containerClassName
+  containerClassName,
+  placeholder,
+  isClearable = false
 }) => {
   const [selectedDate, setSelectedDate] = (0, import_react409.useState)(
     controlledValue || null
@@ -16324,7 +16329,7 @@ var DatePicker = ({
     "div",
     {
       ref: containerRef,
-      className: (0, import_clsx11.default)("relative flex max-w-sm flex-col", containerClassName),
+      className: (0, import_clsx12.default)("relative flex max-w-sm flex-col", containerClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime429.jsxs)(
         Dropdown,
         {
@@ -16337,18 +16342,40 @@ var DatePicker = ({
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(DropdownTrigger, { asChild: Boolean(trigger), children: Boolean(trigger) === false ? /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(DropdownTrigger, { asChild: true, children: Boolean(trigger) === false ? /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(
               Input,
               {
-                type: "text",
                 mergedAddon: true,
+                type: "text",
                 className: "pl-0",
-                leftAddonClassName: "pr-1!",
-                leftAddon: /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(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__ */ (0, import_jsx_runtime429.jsx)(Icon_default, { name: "calendar", className: "text-gray-900", size: 24 }),
+                rightAddonClassName: "shrink-0",
+                rightAddon: isClearable && inputValue && /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(
+                  "button",
+                  {
+                    className: "shrink-0 cursor-pointer",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setInputValue("");
+                      controlledOnRangeChange?.({ start: null, end: null });
+                      controlledOnChange?.(null);
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(
+                      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__ */ (0, import_jsx_runtime429.jsx)(
@@ -16356,7 +16383,7 @@ var DatePicker = ({
               {
                 align,
                 sideOffset: 5,
-                className: (0, import_clsx11.default)("z-10 overflow-hidden p-0", wrapperClassName),
+                className: (0, import_clsx12.default)("z-10 overflow-hidden p-0", wrapperClassName),
                 children: /* @__PURE__ */ (0, import_jsx_runtime429.jsx)("div", { className: "top-full z-10", children: mode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(
                   Calendar2,
                   {
@@ -16782,7 +16809,7 @@ var Switch = ({
 };
 
 // src/components/toast/toast-card.tsx
-var import_clsx12 = __toESM(require("clsx"), 1);
+var import_clsx13 = __toESM(require("clsx"), 1);
 
 // src/components/toast/toast-variants.ts
 var import_class_variance_authority11 = require("class-variance-authority");
@@ -16836,7 +16863,7 @@ function ToastCard({
   return /* @__PURE__ */ (0, import_jsx_runtime432.jsxs)(
     "div",
     {
-      className: (0, import_clsx12.default)(
+      className: (0, import_clsx13.default)(
         "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!",
@@ -16851,7 +16878,7 @@ function ToastCard({
             {
               name: icon,
               size: iconSize,
-              className: (0, import_clsx12.default)(
+              className: (0, import_clsx13.default)(
                 variant === "outline" && color === "primary" && "text-primary-1000!",
                 variant === "outline" && color === "secondary" && "text-white!",
                 ToastVariants({ text: color })
@@ -16861,7 +16888,7 @@ function ToastCard({
           /* @__PURE__ */ (0, import_jsx_runtime432.jsxs)(
             "div",
             {
-              className: (0, import_clsx12.default)(
+              className: (0, import_clsx13.default)(
                 "flex flex-col",
                 variant === "outline" && color === "primary" && "text-primary-1000!",
                 variant === "outline" && color === "secondary" && "text-white!",
@@ -16889,7 +16916,7 @@ function ToastCard({
             {
               name: "times",
               size: 20,
-              className: (0, import_clsx12.default)(
+              className: (0, import_clsx13.default)(
                 ToastVariants({ text: color }),
                 variant === "outline" && color === "primary" && "text-primary-1000!",
                 variant === "outline" && color === "secondary" && "text-white!"
@@ -16904,7 +16931,7 @@ function ToastCard({
 
 // src/components/toast/toast-provider.tsx
 var import_react414 = require("react");
-var import_clsx13 = __toESM(require("clsx"), 1);
+var import_clsx14 = __toESM(require("clsx"), 1);
 
 // src/components/toast/toast-context.ts
 var import_react412 = require("react");
@@ -16956,7 +16983,7 @@ function ToastProvider({
     /* @__PURE__ */ (0, import_jsx_runtime434.jsx)(
       "div",
       {
-        className: (0, import_clsx13.default)(
+        className: (0, import_clsx14.default)(
           "fixed z-50 flex flex-col gap-3 duration-300",
           position === "top-right" && "top-4 right-4",
           position === "top-left" && "top-4 left-4",
@@ -17066,7 +17093,7 @@ function RoundedSpinner({
 }
 
 // src/components/select/select.tsx
-var import_clsx14 = __toESM(require("clsx"), 1);
+var import_clsx15 = __toESM(require("clsx"), 1);
 
 // src/components/select/selectSize.ts
 var import_class_variance_authority12 = require("class-variance-authority");
@@ -17487,7 +17514,7 @@ function Select({
                 onLoadMore !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime436.jsx)(
                   "div",
                   {
-                    className: (0, import_clsx14.default)(
+                    className: (0, import_clsx15.default)(
                       "flex h-5 items-center justify-center py-2 duration-300"
                     ),
                     children: isLoadingMore === true && /* @__PURE__ */ (0, import_jsx_runtime436.jsx)(RoundedSpinner, { size: 20, color: "primary" })
@@ -18042,7 +18069,7 @@ TabsContent.displayName = "TabsContent";
 
 // src/components/button-group/button-group.tsx
 var import_react419 = require("react");
-var import_clsx15 = __toESM(require("clsx"), 1);
+var import_clsx16 = __toESM(require("clsx"), 1);
 var import_jsx_runtime439 = require("react/jsx-runtime");
 var ButtonGroupContext = (0, import_react419.createContext)(null);
 var ButtonGroup = ({
@@ -18055,7 +18082,7 @@ var ButtonGroup = ({
   return /* @__PURE__ */ (0, import_jsx_runtime439.jsx)(ButtonGroupContext.Provider, { value: { size, color, variant, direction }, children: /* @__PURE__ */ (0, import_jsx_runtime439.jsx)(
     "div",
     {
-      className: (0, import_clsx15.default)(
+      className: (0, import_clsx16.default)(
         "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"
       ),
@@ -18076,7 +18103,7 @@ var ButtonGroupItem = ({
   const isTertiary = variant === "tertiary";
   const isVertical = direction === "vertical";
   const isHorizontal = direction === "horizontal";
-  const borderDirectionClass = (0, import_clsx15.default)(
+  const borderDirectionClass = (0, import_clsx16.default)(
     isHorizontal && "border-l-0 first:border-l",
     isVertical && "border-t-0 first:border-t"
   );
@@ -18097,8 +18124,8 @@ var ButtonGroupItem = ({
       size: context?.size,
       color: color ?? context?.color,
       variant: context?.variant,
-      className: (0, import_clsx15.default)(
-        isDefault && (0, import_clsx15.default)(
+      className: (0, import_clsx16.default)(
+        isDefault && (0, import_clsx16.default)(
           isHorizontal && "border-r border-white last:border-r-0",
           isVertical && "border-b border-white last:border-b-0"
         ),
@@ -18131,7 +18158,7 @@ var import_react436 = require("@tiptap/react");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
 var import_codemirror_theme_dracula = require("@uiw/codemirror-theme-dracula");
 var import_react_codemirror = __toESM(require("@uiw/react-codemirror"), 1);
-var import_clsx21 = __toESM(require("clsx"), 1);
+var import_clsx22 = __toESM(require("clsx"), 1);
 var import_react437 = require("react");
 
 // node_modules/orderedmap/dist/index.js
@@ -35100,7 +35127,7 @@ function AdvanceGroup({
 
 // src/components/text-editor/partials/alignment-group.tsx
 var import_react423 = require("@tiptap/react");
-var import_clsx16 = __toESM(require("clsx"), 1);
+var import_clsx17 = __toESM(require("clsx"), 1);
 var import_jsx_runtime443 = require("react/jsx-runtime");
 function AlignmentGroup({
   editor,
@@ -35158,7 +35185,7 @@ function AlignmentGroup({
         DropdownItem,
         {
           onClick: () => editor.chain().focus().setTextAlign(align.align).run(),
-          className: (0, import_clsx16.default)(
+          className: (0, import_clsx17.default)(
             "rounded-md border-transparent py-1",
             activeState[align.align] && "bg-primary-50 border-primary-300"
           ),
@@ -35197,11 +35224,11 @@ function AlignmentGroup({
 
 // src/components/text-editor/partials/formatting-group.tsx
 var import_react424 = require("@tiptap/react");
-var import_clsx18 = __toESM(require("clsx"), 1);
+var import_clsx19 = __toESM(require("clsx"), 1);
 var import_react425 = require("react");
 
 // src/components/text-editor/partials/color-picker-button.tsx
-var import_clsx17 = __toESM(require("clsx"), 1);
+var import_clsx18 = __toESM(require("clsx"), 1);
 var import_jsx_runtime444 = require("react/jsx-runtime");
 function ColorPickerButton({
   id,
@@ -35214,7 +35241,7 @@ function ColorPickerButton({
     /* @__PURE__ */ (0, import_jsx_runtime444.jsx)(
       "div",
       {
-        className: (0, import_clsx17.default)(
+        className: (0, import_clsx18.default)(
           "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
           disabled && "opacity-50"
         ),
@@ -35341,7 +35368,7 @@ function FormattingGroup({
             fontSizes.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime445.jsx)(
               DropdownItem,
               {
-                className: (0, import_clsx18.default)(
+                className: (0, import_clsx19.default)(
                   "flex justify-start rounded-md border-transparent py-1",
                   displayFontSize === size && "bg-primary-50 border-primary-300"
                 ),
@@ -35367,7 +35394,7 @@ function FormattingGroup({
               "div",
               {
                 title: "Heading",
-                className: (0, import_clsx18.default)(
+                className: (0, import_clsx19.default)(
                   "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
                   (disabled || activeState.isInYoutube || activeState.isInImage) && "opacity-50"
                 ),
@@ -35386,7 +35413,7 @@ function FormattingGroup({
                     {
                       name: "angle-down-small",
                       size: 18,
-                      className: (0, import_clsx18.default)(activeState.activeHeading && "ml-1")
+                      className: (0, import_clsx19.default)(activeState.activeHeading && "ml-1")
                     }
                   )
                 ]
@@ -35398,7 +35425,7 @@ function FormattingGroup({
           /* @__PURE__ */ (0, import_jsx_runtime445.jsx)(
             DropdownItem,
             {
-              className: (0, import_clsx18.default)(
+              className: (0, import_clsx19.default)(
                 "rounded-md border-transparent py-1",
                 activeState.activeParagraph && "bg-primary-50 border-primary-300"
               ),
@@ -35411,7 +35438,7 @@ function FormattingGroup({
           headings.map((head, index) => /* @__PURE__ */ (0, import_jsx_runtime445.jsx)(
             DropdownItem,
             {
-              className: (0, import_clsx18.default)(
+              className: (0, import_clsx19.default)(
                 "rounded-md border-transparent py-1",
                 activeState.activeHeading === head.level && "bg-primary-50 border-primary-300"
               ),
@@ -35467,7 +35494,7 @@ function FormattingGroup({
               "div",
               {
                 title: "Line Height",
-                className: (0, import_clsx18.default)(
+                className: (0, import_clsx19.default)(
                   "flex items-center gap-1 rounded-lg border border-gray-300 p-2",
                   (disabled || activeState.isInYoutube || activeState.isInImage) && "opacity-50"
                 ),
@@ -35523,7 +35550,7 @@ function FormattingGroup({
               lineHeights.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime445.jsx)(
                 DropdownItem,
                 {
-                  className: (0, import_clsx18.default)(
+                  className: (0, import_clsx19.default)(
                     "flex justify-center rounded-md border-transparent py-1",
                     displayLineHeight === size && "bg-primary-50 border-primary-300"
                   ),
@@ -35685,7 +35712,7 @@ var import_react434 = require("react");
 
 // src/components/kbd/kbd.tsx
 var import_react427 = require("react");
-var import_clsx19 = __toESM(require("clsx"), 1);
+var import_clsx20 = __toESM(require("clsx"), 1);
 
 // src/components/kbd/kbd-variants.ts
 var import_class_variance_authority13 = require("class-variance-authority");
@@ -35821,7 +35848,7 @@ function Kbd({ size, variant, color, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(
     "kbd",
     {
-      className: (0, import_clsx19.default)(kbdVariants({ size, variant, color }), className),
+      className: (0, import_clsx20.default)(kbdVariants({ size, variant, color }), className),
       ...props
     }
   );
@@ -36617,7 +36644,7 @@ function InsertGroup({
 
 // src/components/text-editor/partials/table-group.tsx
 var import_react435 = require("@tiptap/react");
-var import_clsx20 = __toESM(require("clsx"), 1);
+var import_clsx21 = __toESM(require("clsx"), 1);
 var import_jsx_runtime451 = require("react/jsx-runtime");
 function TableGroup({
   editor,
@@ -36722,7 +36749,7 @@ function TableGroup({
           "div",
           {
             title: "Heading",
-            className: (0, import_clsx20.default)(
+            className: (0, import_clsx21.default)(
               "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"
@@ -36733,7 +36760,7 @@ function TableGroup({
                 {
                   name: "table",
                   size: 18,
-                  className: (0, import_clsx20.default)(
+                  className: (0, import_clsx21.default)(
                     activeState.isInTable ? "text-white" : "text-gray-900"
                   )
                 }
@@ -36743,7 +36770,7 @@ function TableGroup({
                 {
                   name: "angle-down-small",
                   size: 17,
-                  className: (0, import_clsx20.default)(
+                  className: (0, import_clsx21.default)(
                     activeState.isInTable ? "text-white" : "text-gray-900"
                   )
                 }
@@ -36765,7 +36792,7 @@ function TableGroup({
             {
               onClick: () => action.onClick(),
               disabled: Boolean(action.disabled) || action.requiresTable && !activeState.isInTable,
-              className: (0, import_clsx20.default)(
+              className: (0, import_clsx21.default)(
                 "rounded-md border-transparent py-1 disabled:opacity-50",
                 Boolean(action.active) && "bg-primary-50 border-primary-300"
               ),
@@ -36782,7 +36809,7 @@ function TableGroup({
             {
               onClick: () => action.onClick(),
               disabled: Boolean(action.disabled) || action.requiresTable && !activeState.isInTable,
-              className: (0, import_clsx20.default)(
+              className: (0, import_clsx21.default)(
                 "rounded-md border-transparent py-1 disabled:opacity-50",
                 Boolean(action.active) && "bg-primary-50 border-primary-300"
               ),
@@ -36799,7 +36826,7 @@ function TableGroup({
             {
               onClick: () => action.onClick(),
               disabled: Boolean(action.disabled) || action.requiresTable && !activeState.isInTable,
-              className: (0, import_clsx20.default)(
+              className: (0, import_clsx21.default)(
                 "rounded-md border-transparent py-1 disabled:opacity-50",
                 Boolean(action.active) && "bg-primary-50 border-primary-300"
               ),
@@ -36933,7 +36960,7 @@ function TextEditor({
       children: /* @__PURE__ */ (0, import_jsx_runtime452.jsxs)(
         "div",
         {
-          className: (0, import_clsx21.default)(
+          className: (0, import_clsx22.default)(
             "relative flex w-full flex-col rounded-xl border",
             errorMessages !== void 0 ? "border-danger-500" : "border-gray-300"
           ),
@@ -36941,7 +36968,7 @@ function TextEditor({
             /* @__PURE__ */ (0, import_jsx_runtime452.jsx)(
               "div",
               {
-                className: (0, import_clsx21.default)(
+                className: (0, import_clsx22.default)(
                   "sticky top-0 z-10 rounded-t-xl bg-white",
                   toolbarClassName
                 ),
@@ -36987,7 +37014,7 @@ function TextEditor({
               import_extension_drag_handle_react.DragHandle,
               {
                 editor,
-                className: (0, import_clsx21.default)("relative z-20", dragHandleClassName),
+                className: (0, import_clsx22.default)("relative z-20", dragHandleClassName),
                 ...dragHandleProps,
                 children: /* @__PURE__ */ (0, import_jsx_runtime452.jsx)("div", { className: "custom-drag-handle absolute left-0" })
               }
@@ -36999,7 +37026,7 @@ function TextEditor({
                 extensions: [(0, import_lang_html.html)()],
                 onChange: (value2) => setHtmlValue(value2),
                 theme: import_codemirror_theme_dracula.dracula,
-                className: (0, import_clsx21.default)(isHtmlMode ? "block" : "hidden")
+                className: (0, import_clsx22.default)(isHtmlMode ? "block" : "hidden")
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime452.jsx)(
@@ -37008,7 +37035,7 @@ function TextEditor({
                 placeholder,
                 disabled,
                 editor,
-                className: (0, import_clsx21.default)(
+                className: (0, import_clsx22.default)(
                   "*:min-h-100 *:translate-y-1 *:px-5 *:py-2 *:outline-none",
                   textEditorClassName,
                   isHtmlMode && "hidden"