@simple-builder/react 1.2.10 → 1.3.0

package/dist/{build-container-client-O3HCUDB7.js → build-container-client-NXIMV3RF.js}

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-require('./chunk-GVPZDUDM.js');
-var chunkWQ376VV2_js = require('./chunk-WQ376VV2.js');
-var chunkTPRY6DEO_js = require('./chunk-TPRY6DEO.js');
+require('./chunk-WI3YU7TV.js');
+var chunkYKPZPQ5D_js = require('./chunk-YKPZPQ5D.js');
+var chunk2CPAROZB_js = require('./chunk-2CPAROZB.js');
 var React25 = require('react');
 var lucideReact = require('lucide-react');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
@@ -75,8 +75,8 @@ var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
 var AlertDialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    className: chunkTPRY6DEO_js.cn(
-      "sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
+    className: chunk2CPAROZB_js.cn(
+      "sb:fixed sb:inset-0 sb:z-50 sb:bg-background/80 sb:backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
       className
     ),
     ...props,
@@ -88,8 +88,8 @@ var AlertDialogContent = React25__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Content,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
+    className: chunk2CPAROZB_js.cn(
+      "sb:fixed sb:font-roboto sb:left-[50%] sb:top-[50%] sb:z-50 sb:grid sb:w-full sb:max-w-lg sb:translate-x-[-50%] sb:translate-y-[-50%] sb:gap-4 sb:border sb:bg-background sb:p-6 sb:shadow-lg sb:duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sb:sm:rounded-lg",
       className
     ),
     ...props
@@ -102,8 +102,8 @@ var AlertDialogFooter = ({
 }) => /* @__PURE__ */ React25__namespace.createElement(
   "div",
   {
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:flex-col-reverse sb:sm:flex-row sb:sm:justify-end sb:sm:gap-2",
       className
     ),
     ...props
@@ -114,7 +114,7 @@ var AlertDialogTitle = React25__namespace.forwardRef(({ className, ...props }, r
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb-text-lg sb-font-semibold", className),
+    className: chunk2CPAROZB_js.cn("sb:text-lg sb:font-semibold", className),
     ...props
   }
 ));
@@ -123,7 +123,7 @@ var AlertDialogDescription = React25__namespace.forwardRef(({ className, ...prop
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb-text-sm sb-text-muted-foreground", className),
+    className: chunk2CPAROZB_js.cn("sb:text-sm sb:text-muted-foreground", className),
     ...props
   }
 ));
@@ -132,7 +132,7 @@ var AlertDialogAction = React25__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(chunkWQ376VV2_js.buttonVariants(), className),
+    className: chunk2CPAROZB_js.cn(chunkYKPZPQ5D_js.buttonVariants(), className),
     ...props
   }
 ));
@@ -141,9 +141,9 @@ var AlertDialogCancel = React25__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      chunkWQ376VV2_js.buttonVariants({ variant: "outline" }),
-      "sb-mt-2 sm:sb-mt-0",
+    className: chunk2CPAROZB_js.cn(
+      chunkYKPZPQ5D_js.buttonVariants({ variant: "outline" }),
+      "sb:mt-2 sb:sm:mt-0",
       className
     ),
     ...props
@@ -159,8 +159,8 @@ var PopoverContent = React25__namespace.forwardRef(({ className, align = "center
     ref,
     align,
     sideOffset,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-z-50 sb-w-72 sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb-origin-[--radix-popover-content-transform-origin]",
+    className: chunk2CPAROZB_js.cn(
+      "sb:z-50 sb:w-72 sb:rounded-md sb:border sb:bg-popover sb:text-popover-foreground sb:shadow-md sb:outline-hidden data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb:origin-(--radix-popover-content-transform-origin)",
       className
     ),
     ...props
@@ -260,7 +260,7 @@ var useRichTextEditor = ({
         autocomplete: "off",
         autocorrect: "off",
         autocapitalize: "off",
-        class: chunkTPRY6DEO_js.cn("sb-focus:outline-none", editorClassName)
+        class: chunk2CPAROZB_js.cn("sb-focus:outline-none", editorClassName)
       }
     },
     onCreate: ({ editor: editor2 }) => handleCreate(editor2),
@@ -277,23 +277,23 @@ var DropdownMenuSubTrigger = React25__namespace.forwardRef(({ className, inset,
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-cursor-default sb-select-none sb-items-center sb-gap-2 sb-rounded-sm sb-px-2 sb-py-1.5 sb-text-sm sb-outline-none focus:sb-bg-accent data-[state=open]:sb-bg-accent [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
-      inset && "sb-pl-8",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:cursor-default sb:select-none sb:items-center sb:gap-2 sb:rounded-sm sb:px-2 sb:py-1.5 sb:text-sm sb:outline-hidden sb:focus:bg-accent sb:data-[state=open]:bg-accent sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
+      inset && "sb:pl-8",
       className
     ),
     ...props
   },
   children,
-  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronRight, { className: "sb-ml-auto" })
+  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronRight, { className: "sb:ml-auto" })
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
 var DropdownMenuSubContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   DropdownMenuPrimitive__namespace.SubContent,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-z-50 sb-min-w-[8rem] sb-overflow-hidden sb-rounded-md sb-border sb-bg-popover sb-p-1 sb-text-popover-foreground sb-shadow-lg data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb-origin-[--radix-dropdown-menu-content-transform-origin]",
+    className: chunk2CPAROZB_js.cn(
+      "sb:z-50 sb:min-w-32 sb:overflow-hidden sb:rounded-md sb:border sb:bg-popover sb:p-1 sb:text-popover-foreground sb:shadow-lg data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb:origin-(--radix-dropdown-menu-content-transform-origin)",
       className
     ),
     ...props
@@ -305,9 +305,9 @@ var DropdownMenuContent = React25__namespace.forwardRef(({ className, sideOffset
   {
     ref,
     sideOffset,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-z-50 sb-max-h-[var(--radix-dropdown-menu-content-available-height)] sb-min-w-[8rem] sb-overflow-y-auto sb-overflow-x-hidden sb-rounded-md sb-border sb-bg-popover sb-p-1 sb-text-popover-foreground sb-shadow-md",
-      "data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb-origin-[--radix-dropdown-menu-content-transform-origin]",
+    className: chunk2CPAROZB_js.cn(
+      "sb:z-50 sb:max-h-(--radix-dropdown-menu-content-available-height) sb:min-w-32 sb:overflow-y-auto sb:overflow-x-hidden sb:rounded-md sb:border sb:bg-popover sb:p-1 sb:text-popover-foreground sb:shadow-md",
+      "data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb:origin-(--radix-dropdown-menu-content-transform-origin)",
       className
     ),
     ...props
@@ -318,9 +318,9 @@ var DropdownMenuItem = React25__namespace.forwardRef(({ className, inset, ...pro
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-relative sb-flex sb-cursor-default sb-select-none sb-items-center sb-gap-2 sb-rounded-sm sb-px-2 sb-py-1.5 sb-text-sm sb-outline-none sb-transition-colors focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50 [&>svg]:sb-size-4 [&>svg]:sb-shrink-0",
-      inset && "sb-pl-8",
+    className: chunk2CPAROZB_js.cn(
+      "sb:relative sb:flex sb:cursor-default sb:select-none sb:items-center sb:gap-2 sb:rounded-sm sb:px-2 sb:py-1.5 sb:text-sm sb:outline-hidden sb:transition-colors sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50 sb:[&>svg]:size-4 sb:[&>svg]:shrink-0",
+      inset && "sb:pl-8",
       className
     ),
     ...props
@@ -331,14 +331,14 @@ var DropdownMenuCheckboxItem = React25__namespace.forwardRef(({ className, child
   DropdownMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-relative sb-flex sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none sb-transition-colors focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
+    className: chunk2CPAROZB_js.cn(
+      "sb:relative sb:flex sb:cursor-default sb:select-none sb:items-center sb:rounded-sm sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:outline-hidden sb:transition-colors sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50",
       className
     ),
     checked,
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb-h-4 sb-w-4" }))),
+  /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:absolute sb:left-2 sb:flex sb:h-3.5 sb:w-3.5 sb:items-center sb:justify-center" }, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb:h-4 sb:w-4" }))),
   children
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
@@ -346,13 +346,13 @@ var DropdownMenuRadioItem = React25__namespace.forwardRef(({ className, children
   DropdownMenuPrimitive__namespace.RadioItem,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-relative sb-flex sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none sb-transition-colors focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
+    className: chunk2CPAROZB_js.cn(
+      "sb:relative sb:flex sb:cursor-default sb:select-none sb:items-center sb:rounded-sm sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:outline-hidden sb:transition-colors sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50",
       className
     ),
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Circle, { className: "sb-h-2 sb-w-2 sb-fill-current" }))),
+  /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:absolute sb:left-2 sb:flex sb:h-3.5 sb:w-3.5 sb:items-center sb:justify-center" }, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Circle, { className: "sb:h-2 sb:w-2 sb:fill-current" }))),
   children
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
@@ -360,9 +360,9 @@ var DropdownMenuLabel = React25__namespace.forwardRef(({ className, inset, ...pr
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-px-2 sb-py-1.5 sb-text-sm sb-font-semibold",
-      inset && "sb-pl-8",
+    className: chunk2CPAROZB_js.cn(
+      "sb:px-2 sb:py-1.5 sb:text-sm sb:font-semibold",
+      inset && "sb:pl-8",
       className
     ),
     ...props
@@ -373,7 +373,7 @@ var DropdownMenuSeparator = React25__namespace.forwardRef(({ className, ...props
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb--mx-1 sb-my-1 sb-h-px sb-bg-muted", className),
+    className: chunk2CPAROZB_js.cn("sb:-mx-1 sb:my-1 sb:h-px sb:bg-muted", className),
     ...props
   }
 ));
@@ -385,9 +385,9 @@ var Separator2 = React25__namespace.forwardRef(
       ref,
       decorative,
       orientation,
-      className: chunkTPRY6DEO_js.cn(
-        "sb-shrink-0 sb-bg-border",
-        orientation === "horizontal" ? "sb-h-[1px] sb-w-full" : "sb-h-full sb-w-[1px]",
+      className: chunk2CPAROZB_js.cn(
+        "sb:shrink-0 sb:bg-border",
+        orientation === "horizontal" ? "sb:h-px sb:w-full" : "sb:h-full sb:w-px",
         className
       ),
       ...props
@@ -396,17 +396,17 @@ var Separator2 = React25__namespace.forwardRef(
 );
 Separator2.displayName = SeparatorPrimitive__namespace.Root.displayName;
 var toggleVariants = classVarianceAuthority.cva(
-  "sb-inline-flex sb-items-center sb-justify-center sb-gap-2 sb-rounded-md sb-text-sm sb-font-medium sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
+  "sb:inline-flex sb:items-center sb:justify-center sb:gap-2 sb:rounded-md sb:text-sm sb:font-medium sb:transition-colors sb:hover:bg-muted sb:hover:text-muted-foreground sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:data-[state=on]:bg-accent sb:data-[state=on]:text-accent-foreground sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "sb-bg-transparent",
-        outline: "sb-border sb-border-input sb-bg-transparent sb-shadow-sm hover:sb-bg-accent hover:sb-text-accent-foreground"
+        default: "sb:bg-transparent",
+        outline: "sb:border sb:border-input sb:bg-transparent sb:shadow-sm sb:hover:bg-accent sb:hover:text-accent-foreground"
       },
       size: {
-        default: "sb-h-9 sb-px-2 sb-min-w-9",
-        sm: "sb-h-8 sb-px-1.5 sb-min-w-8",
-        lg: "sb-h-10 sb-px-2.5 sb-min-w-10"
+        default: "sb:h-9 sb:px-2 sb:min-w-9",
+        sm: "sb:h-8 sb:px-1.5 sb:min-w-8",
+        lg: "sb:h-10 sb:px-2.5 sb:min-w-10"
       }
     },
     defaultVariants: {
@@ -419,7 +419,7 @@ var Toggle = React25__namespace.forwardRef(({ className, variant, size, ...props
   TogglePrimitive__namespace.Root,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(toggleVariants({ variant, size, className })),
+    className: chunk2CPAROZB_js.cn(toggleVariants({ variant, size, className })),
     ...props
   }
 ));
@@ -432,7 +432,7 @@ var ToggleGroup = React25__namespace.forwardRef(({ className, variant, size, chi
   ToggleGroupPrimitive__namespace.Root,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb-flex sb-items-center sb-justify-center sb-gap-1", className),
+    className: chunk2CPAROZB_js.cn("sb:flex sb:items-center sb:justify-center sb:gap-1", className),
     ...props
   },
   /* @__PURE__ */ React25__namespace.createElement(ToggleGroupContext.Provider, { value: { variant, size } }, children)
@@ -444,7 +444,7 @@ var ToggleGroupItem = React25__namespace.forwardRef(({ className, children, vari
     ToggleGroupPrimitive__namespace.Item,
     {
       ref,
-      className: chunkTPRY6DEO_js.cn(
+      className: chunk2CPAROZB_js.cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size
@@ -496,7 +496,7 @@ var ColorTool = ({ editor }) => {
     },
     [editor]
   );
-  return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { className: "sb-w-12" }, /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { className: "sb:w-12" }, /* @__PURE__ */ React25__namespace.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -508,33 +508,33 @@ var ColorTool = ({ editor }) => {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className: "sb-size-5",
+      className: "sb:size-5",
       style: { color: selectedColor }
     },
     /* @__PURE__ */ React25__namespace.createElement("path", { d: "M4 20h16" }),
     /* @__PURE__ */ React25__namespace.createElement("path", { d: "m6 16 6-12 6 12" }),
     /* @__PURE__ */ React25__namespace.createElement("path", { d: "M8 12h8" })
-  ), /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb-size-5" }))), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { align: "start", className: "sb-w-full" }, /* @__PURE__ */ React25__namespace.createElement(
+  ), /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb:size-5" }))), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { align: "start", className: "sb:w-full" }, /* @__PURE__ */ React25__namespace.createElement(
     ToggleGroup,
     {
       type: "single",
       value: selectedColor,
       onValueChange: handleColorChange,
-      className: "sb-flex-col sb-gap-1.5"
+      className: "sb:flex-col sb:gap-1.5"
     },
-    PALETTES.map((pallete, i) => /* @__PURE__ */ React25__namespace.createElement("div", { key: i, className: "sb-flex sb-gap-1.5" }, pallete.colors.map((color2, j) => /* @__PURE__ */ React25__namespace.createElement(
+    PALETTES.map((pallete, i) => /* @__PURE__ */ React25__namespace.createElement("div", { key: i, className: "sb:flex sb:gap-1.5" }, pallete.colors.map((color2, j) => /* @__PURE__ */ React25__namespace.createElement(
       ToggleGroupItem,
       {
         tabIndex: 0,
         key: j,
-        className: "sb-relative sb-size-7 sb-rounded-md sb-border sb-p-0",
+        className: "sb:relative sb:size-7 sb:rounded-md sb:border sb:p-0",
         value: color2.cssVar,
         style: { backgroundColor: color2.cssVar }
       },
       selectedColor === color2.cssVar && /* @__PURE__ */ React25__namespace.createElement(
         lu.LuCheck,
         {
-          className: "sb-absolute sb-inset-0 sb-m-auto sb-size-6",
+          className: "sb:absolute sb:inset-0 sb:m-auto sb:size-6",
           style: { color: pallete.inverse }
         }
       )
@@ -545,31 +545,31 @@ var formatActions = [
   {
     label: "Normal Text",
     element: "span",
-    className: "sb-grow"
+    className: "sb:grow"
   },
   {
     label: "Heading 1",
     element: "h1",
     level: 1,
-    className: "sb-m-0 sb-grow sb-text-3xl sb-font-extrabold"
+    className: "sb:m-0 sb:grow sb:text-3xl sb:font-extrabold"
   },
   {
     label: "Heading 2",
     element: "h2",
     level: 2,
-    className: "sb-m-0 sb-grow sb-text-xl sb-font-bold"
+    className: "sb:m-0 sb:grow sb:text-xl sb:font-bold"
   },
   {
     label: "Heading 3",
     element: "h3",
     level: 3,
-    className: "sb-m-0 sb-grow sb-text-lg sb-font-semibold"
+    className: "sb:m-0 sb:grow sb:text-lg sb:font-semibold"
   },
   {
     label: "Heading 4",
     element: "h4",
     level: 4,
-    className: "sb-m-0 sb-grow sb-text-base sb-font-semibold"
+    className: "sb:m-0 sb:grow sb:text-base sb:font-semibold"
   }
 ];
 var ElementTool = ({ editor }) => {
@@ -587,17 +587,17 @@ var ElementTool = ({ editor }) => {
   return /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
     ToolbarButton,
     {
-      className: "sb-w-12 data-[state=open]:sb-bg-accent",
+      className: "sb:w-12 sb:data-[state=open]:bg-accent",
       pressed: isActive
     },
-    /* @__PURE__ */ React25__namespace.createElement(lu.LuHeading, { className: "sb-size-5" }),
-    /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb-size-5" })
+    /* @__PURE__ */ React25__namespace.createElement(lu.LuHeading, { className: "sb:size-5" }),
+    /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb:size-5" })
   )), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, formatActions.map(({ element: Element, ...action }) => /* @__PURE__ */ React25__namespace.createElement(
     DropdownMenuItem,
     {
       key: action.label,
-      className: chunkTPRY6DEO_js.cn({
-        "sb-bg-accent": action.level ? editor.isActive("heading", { level: action.level }) : editor.isActive("paragraph")
+      className: chunk2CPAROZB_js.cn({
+        "sb:bg-accent": action.level ? editor.isActive("heading", { level: action.level }) : editor.isActive("paragraph")
       }),
       onClick: () => handleFormatChange(action.level)
     },
@@ -693,8 +693,8 @@ var DialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref)
   DialogPrimitive__namespace.Overlay,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-fixed sb-inset-0 sb-z-50 sb-bg-black/80 sb- data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
+    className: chunk2CPAROZB_js.cn(
+      "sb:fixed sb:inset-0 sb:z-50 sb:bg-black/80 sb- data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
       className
     ),
     ...props
@@ -705,14 +705,14 @@ var DialogContent = React25__namespace.forwardRef(({ className, children, ...pro
   DialogPrimitive__namespace.Content,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-fixed sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
+    className: chunk2CPAROZB_js.cn(
+      "sb:fixed sb:left-[50%] sb:top-[50%] sb:z-50 sb:grid sb:w-full sb:max-w-lg sb:translate-x-[-50%] sb:translate-y-[-50%] sb:gap-4 sb:border sb:bg-background sb:p-6 sb:shadow-lg sb:duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sb:sm:rounded-lg",
       className
     ),
     ...props
   },
   children,
-  /* @__PURE__ */ React25__namespace.createElement(DialogPrimitive__namespace.Close, { className: "sb-absolute sb-right-4 sb-top-4 sb-rounded-sm sb-opacity-70 sb-ring-offset-background sb-transition-opacity hover:sb-opacity-100 focus:sb-outline-none focus:sb-ring-2 focus:sb-ring-ring focus:sb-ring-offset-2 disabled:sb-pointer-events-none data-[state=open]:sb-bg-accent data-[state=open]:sb-text-muted-foreground" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.X, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-sr-only" }, "Close"))
+  /* @__PURE__ */ React25__namespace.createElement(DialogPrimitive__namespace.Close, { className: "sb:absolute sb:right-4 sb:top-4 sb:rounded-sm sb:opacity-70 sb:ring-offset-background sb:transition-opacity sb:hover:opacity-100 sb:focus:outline-hidden sb:focus:ring-2 sb:focus:ring-ring sb:focus:ring-offset-2 sb:disabled:pointer-events-none sb:data-[state=open]:bg-accent sb:data-[state=open]:text-muted-foreground" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.X, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:sr-only" }, "Close"))
 )));
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
 var DialogHeader = ({
@@ -721,8 +721,8 @@ var DialogHeader = ({
 }) => /* @__PURE__ */ React25__namespace.createElement(
   "div",
   {
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-flex-col sb-space-y-1.5 sb-text-center sm:sb-text-left",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:flex-col sb:gap-1.5 sb:text-center sb:sm:text-left",
       className
     ),
     ...props
@@ -733,8 +733,8 @@ var DialogTitle = React25__namespace.forwardRef(({ className, ...props }, ref) =
   DialogPrimitive__namespace.Title,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-text-lg sb-font-semibold sb-leading-none sb-tracking-tight",
+    className: chunk2CPAROZB_js.cn(
+      "sb:text-lg sb:font-semibold sb:leading-none sb:tracking-tight",
       className
     ),
     ...props
@@ -745,19 +745,19 @@ var DialogDescription = React25__namespace.forwardRef(({ className, ...props },
   DialogPrimitive__namespace.Description,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb-text-sm sb-text-muted-foreground", className),
+    className: chunk2CPAROZB_js.cn("sb:text-sm sb:text-muted-foreground", className),
     ...props
   }
 ));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var labelVariants = classVarianceAuthority.cva(
-  "sb-text-sm sb-font-medium sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
+  "sb:text-sm sb:font-medium sb:leading-none sb:peer-disabled:cursor-not-allowed sb:peer-disabled:opacity-70"
 );
 var Label2 = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   LabelPrimitive__namespace.Root,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(labelVariants(), className),
+    className: chunk2CPAROZB_js.cn(labelVariants(), className),
     ...props
   }
 ));
@@ -796,7 +796,7 @@ var FormItemContext = React25__namespace.createContext(
 );
 var FormItem = React25__namespace.forwardRef(({ className, ...props }, ref) => {
   const id = React25__namespace.useId();
-  return /* @__PURE__ */ React25__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React25__namespace.createElement("div", { ref, className: chunkTPRY6DEO_js.cn("sb-space-y-2", className), ...props }));
+  return /* @__PURE__ */ React25__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React25__namespace.createElement("div", { ref, className: chunk2CPAROZB_js.cn("sb:flex sb:flex-col sb:gap-2", className), ...props }));
 });
 FormItem.displayName = "FormItem";
 var FormLabel = React25__namespace.forwardRef(({ className, ...props }, ref) => {
@@ -805,7 +805,7 @@ var FormLabel = React25__namespace.forwardRef(({ className, ...props }, ref) =>
     Label2,
     {
       ref,
-      className: chunkTPRY6DEO_js.cn(error && "sb-text-destructive", className),
+      className: chunk2CPAROZB_js.cn(error && "sb:text-destructive", className),
       htmlFor: formItemId,
       ...props
     }
@@ -833,7 +833,7 @@ var FormDescription = React25__namespace.forwardRef(({ className, ...props }, re
     {
       ref,
       id: formDescriptionId,
-      className: chunkTPRY6DEO_js.cn("sb-text-[0.8rem] sb-text-muted-foreground", className),
+      className: chunk2CPAROZB_js.cn("sb:text-[0.8rem] sb:text-muted-foreground", className),
       ...props
     }
   );
@@ -850,7 +850,7 @@ var FormMessage = React25__namespace.forwardRef(({ className, children, ...props
     {
       ref,
       id: formMessageId,
-      className: chunkTPRY6DEO_js.cn("sb-text-[0.8rem] sb-font-medium sb-text-destructive", className),
+      className: chunk2CPAROZB_js.cn("sb:text-[0.8rem] sb:font-medium sb:text-destructive", className),
       ...props
     },
     body
@@ -863,8 +863,8 @@ var Input = React25__namespace.forwardRef(
       "input",
       {
         type,
-        className: chunkTPRY6DEO_js.cn(
-          "sb-flex sb-h-9 sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-1 sb-text-base sb-shadow-sm sb-transition-colors file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium file:sb-text-foreground placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50 md:sb-text-sm",
+        className: chunk2CPAROZB_js.cn(
+          "sb:flex sb:h-9 sb:w-full sb:rounded-md sb:border sb:border-input sb:bg-transparent sb:px-3 sb:py-1 sb:text-base sb:shadow-sm sb:transition-colors sb:file:border-0 sb:file:bg-transparent sb:file:text-sm sb:file:font-medium sb:file:text-foreground sb:placeholder:text-muted-foreground sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:cursor-not-allowed sb:disabled:opacity-50 sb:md:text-sm",
           className
         ),
         ref,
@@ -876,15 +876,15 @@ var Input = React25__namespace.forwardRef(
 Input.displayName = "Input";
 var AdvancedInput = React25__namespace.forwardRef(
   ({ prepend, append, ...props }, ref) => {
-    return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React25__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
+    return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:relative" }, /* @__PURE__ */ React25__namespace.createElement(Input, { ref, className: "sb:pl-9 sb:pr-7 sb:text-right", ...props }), prepend && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:absolute sb:font-roboto sb:top-1/2 sb:left-3 sb:-translate-y-1/2" }, prepend), append && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:absolute sb:font-roboto sb:top-1/2 sb:right-3 sb:-translate-y-1/2" }, append));
   }
 );
 AdvancedInput.displayName = "AdvancedInput";
 var Switch = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   SwitchPrimitives__namespace.Root,
   {
-    className: chunkTPRY6DEO_js.cn(
-      "sb-peer sb-inline-flex sb-h-5 sb-w-9 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-shadow-sm sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
+    className: chunk2CPAROZB_js.cn(
+      "sb:peer sb:inline-flex sb:h-5 sb:w-9 sb:shrink-0 sb:cursor-pointer sb:items-center sb:rounded-full sb:border-2 sb:border-transparent sb:shadow-sm sb:transition-colors sb:focus-visible:outline-hidden sb:focus-visible:ring-2 sb:focus-visible:ring-ring sb:focus-visible:ring-offset-2 sb:focus-visible:ring-offset-background sb:disabled:cursor-not-allowed sb:disabled:opacity-50 sb:data-[state=checked]:bg-primary sb:data-[state=unchecked]:bg-input",
       className
     ),
     ...props,
@@ -893,8 +893,8 @@ var Switch = React25__namespace.forwardRef(({ className, ...props }, ref) => /*
   /* @__PURE__ */ React25__namespace.createElement(
     SwitchPrimitives__namespace.Thumb,
     {
-      className: chunkTPRY6DEO_js.cn(
-        "sb-pointer-events-none sb-block sb-h-4 sb-w-4 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-4 data-[state=unchecked]:sb-translate-x-0"
+      className: chunk2CPAROZB_js.cn(
+        "sb:pointer-events-none sb:block sb:h-4 sb:w-4 sb:rounded-full sb:bg-background sb:shadow-lg sb:ring-0 sb:transition-transform sb:data-[state=checked]:translate-x-4 sb:data-[state=unchecked]:translate-x-0"
       )
     }
   )
@@ -930,8 +930,8 @@ var LinkTool = ({ editor }) => {
       pressed: editor.isActive("link"),
       disabled: editor.isActive("codeBlock")
     },
-    /* @__PURE__ */ React25__namespace.createElement(lu.LuLink2, { className: "sb-size-5" })
-  )), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb-w-full sb-min-w-80" }, /* @__PURE__ */ React25__namespace.createElement(LinkForm, { onSave: handleSetLink, defaultText: text })));
+    /* @__PURE__ */ React25__namespace.createElement(lu.LuLink2, { className: "sb:size-5" })
+  )), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb:w-full sb:min-w-80" }, /* @__PURE__ */ React25__namespace.createElement(LinkForm, { onSave: handleSetLink, defaultText: text })));
 };
 var schema = zod.z.object({
   url: zod.z.string().min(0),
@@ -955,7 +955,7 @@ var LinkForm = ({
   const handleSubmit = (values) => {
     onSave(values.url, values.text, values.isNewTab);
   };
-  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-6" }, /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-6" }, /* @__PURE__ */ React25__namespace.createElement(
     FormField,
     {
       control: form.control,
@@ -974,7 +974,7 @@ var LinkForm = ({
     {
       control: form.control,
       name: "isNewTab",
-      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-items-center sb-space-x-2" }, /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:items-center sb:gap-2" }, /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
         Switch,
         {
           checked: field.value,
@@ -982,7 +982,7 @@ var LinkForm = ({
         }
       )), /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Open in new tab")), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
     }
-  ), /* @__PURE__ */ React25__namespace.createElement(chunkWQ376VV2_js.Button, { type: "button", onClick: form.handleSubmit(handleSubmit) }, "Save")));
+  ), /* @__PURE__ */ React25__namespace.createElement(chunkYKPZPQ5D_js.Button, { type: "button", onClick: form.handleSubmit(handleSubmit) }, "Save")));
 };
 var actions3 = [
   {
@@ -1008,7 +1008,7 @@ var ListTool = ({ editor }) => {
 
 // src/features/rich-text-editor/components/toolbar.tsx
 var Toolbar = ({ editor }) => {
-  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-shrink-0 sb-overflow-x-auto sb-border-b sb-border-border sb-p-2" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-w-max sb-items-center sb-gap-px" }, /* @__PURE__ */ React25__namespace.createElement(ElementTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(FormatTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(ColorTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(ListTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(LinkTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(InsertTool, { editor })));
+  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:shrink-0 sb:overflow-x-auto sb:border-b sb:border-border sb:p-2" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:w-max sb:items-center sb:gap-px" }, /* @__PURE__ */ React25__namespace.createElement(ElementTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(FormatTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(ColorTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(ListTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(LinkTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(InsertTool, { editor })));
 };
 var ToolbarSection = ({
   editor,
@@ -1032,18 +1032,18 @@ var ToolbarSection = ({
       disabled: !action.canExecute(editor),
       pressed: action.isActive(editor)
     },
-    /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb-size-5" })
-  )), dropdownActions.length > 0 && /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { pressed: isDropdownActive }, /* @__PURE__ */ React25__namespace.createElement(lu.LuEllipsis, { className: "sb-size-5" }))), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, dropdownActions.map((action) => /* @__PURE__ */ React25__namespace.createElement(
+    /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb:size-5" })
+  )), dropdownActions.length > 0 && /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { pressed: isDropdownActive }, /* @__PURE__ */ React25__namespace.createElement(lu.LuEllipsis, { className: "sb:size-5" }))), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, dropdownActions.map((action) => /* @__PURE__ */ React25__namespace.createElement(
     DropdownMenuItem,
     {
       key: action.label,
-      className: chunkTPRY6DEO_js.cn("sb-flex sb-flex-row sb-items-center sb-gap-2", {
-        "sb-bg-accent": action.isActive(editor)
+      className: chunk2CPAROZB_js.cn("sb:flex sb:flex-row sb:items-center sb:gap-2", {
+        "sb:bg-accent": action.isActive(editor)
       }),
       onClick: () => action.action(editor),
       disabled: !action.canExecute(editor)
     },
-    /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb-size-4" }),
+    /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb:size-4" }),
     /* @__PURE__ */ React25__namespace.createElement("span", null, action.label)
   )))));
 };
@@ -1052,9 +1052,9 @@ var ToolbarButton = React25__namespace.forwardRef(({ className, ...props }, ref)
     Toggle,
     {
       size: "sm",
-      className: chunkTPRY6DEO_js.cn(
-        "sb-size-8 sb-p-0 data-[state=on]:sb-bg-accent",
-        { "sb-bg-accent": props.pressed },
+      className: chunk2CPAROZB_js.cn(
+        "sb:size-8 sb:p-0 sb:data-[state=on]:bg-accent",
+        { "sb:bg-accent": props.pressed },
         className
       ),
       ref,
@@ -1077,7 +1077,7 @@ var RichTextEditor = ({
   const editor = useRichTextEditor({
     value,
     onUpdate: onChange,
-    editorClassName: chunkTPRY6DEO_js.cn("sb-flex-1 sb-px-3 sb-py-1", editorClassName),
+    editorClassName: chunk2CPAROZB_js.cn("sb:flex-1 sb:px-3 sb:py-1", editorClassName),
     ...props
   });
   if (!editor) {
@@ -1086,8 +1086,8 @@ var RichTextEditor = ({
   return /* @__PURE__ */ React25__namespace.createElement(
     "div",
     {
-      className: chunkTPRY6DEO_js.cn(
-        "sb-flex sb-h-auto sb-min-h-72 sb-w-full sb-flex-col sb-rounded-md sb-border sb-border-input sb-shadow-sm focus-within:sb-border-primary",
+      className: chunk2CPAROZB_js.cn(
+        "sb:flex sb:h-auto sb:min-h-72 sb:w-full sb:flex-col sb:rounded-md sb:border sb:border-input sb:shadow-sm sb:focus-within:border-primary",
         className
       )
     },
@@ -1096,8 +1096,8 @@ var RichTextEditor = ({
       react.EditorContent,
       {
         editor,
-        className: chunkTPRY6DEO_js.cn(
-          "sb-editflow prose sb-flex sb-flex-1",
+        className: chunk2CPAROZB_js.cn(
+          "sb-editflow prose sb:flex sb:flex-1",
           editorContentClassName
         )
       }
@@ -1114,44 +1114,44 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: chunkTPRY6DEO_js.cn("sb-p-3 sb-font-roboto", className),
+      className: chunk2CPAROZB_js.cn("sb:p-3 sb:font-roboto", className),
       classNames: {
-        months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
-        month: "sb-space-y-4",
-        caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
-        caption_label: "sb-text-sm sb-font-medium",
-        nav: "sb-space-x-1 sb-flex sb-items-center",
-        nav_button: chunkTPRY6DEO_js.cn(
-          chunkWQ376VV2_js.buttonVariants({ variant: "outline" }),
-          "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
+        months: "sb:flex sb:flex-col sb:sm:flex-row sb:gap-y-4 sb:sm:gap-x-4 sb:sm:gap-y-0",
+        month: "sb:gap-y-4",
+        caption: "sb:flex sb:justify-center sb:pt-1 sb:relative sb:items-center",
+        caption_label: "sb:text-sm sb:font-medium",
+        nav: "sb:gap-x-1 sb:flex sb:items-center",
+        nav_button: chunk2CPAROZB_js.cn(
+          chunkYKPZPQ5D_js.buttonVariants({ variant: "outline" }),
+          "sb:h-7 sb:w-7 sb:bg-transparent sb:p-0 sb:opacity-50 sb:hover:opacity-100"
         ),
-        nav_button_previous: "sb-absolute sb-left-1",
-        nav_button_next: "sb-absolute sb-right-1",
-        table: "sb-w-full sb-border-collapse sb-space-y-1",
-        head_row: "sb-flex",
-        head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
-        row: "sb-flex sb-w-full sb-mt-2",
-        cell: chunkTPRY6DEO_js.cn(
-          "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
-          props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
+        nav_button_previous: "sb:absolute sb:left-1",
+        nav_button_next: "sb:absolute sb:right-1",
+        table: "sb:w-full sb:border-collapse sb:flex sb:flex-col sb:gap-y-1",
+        head_row: "sb:flex",
+        head_cell: "sb:text-muted-foreground sb:rounded-md sb:w-8 sb:font-normal sb:text-[0.8rem]",
+        row: "sb:flex sb:w-full sb:mt-2",
+        cell: chunk2CPAROZB_js.cn(
+          "sb:relative sb:p-0 sb:text-center sb:text-sm sb:focus-within:relative sb:focus-within:z-20 sb:[&:has([aria-selected])]:bg-accent sb:[&:has([aria-selected].day-outside)]:bg-accent/50 sb:[&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "sb:[&:has(>.day-range-end)]:rounded-r-md sb:[&:has(>.day-range-start)]:rounded-l-md sb:first:[&:has([aria-selected])]:rounded-l-md sb:last:[&:has([aria-selected])]:rounded-r-md" : "sb:[&:has([aria-selected])]:rounded-md"
         ),
-        day: chunkTPRY6DEO_js.cn(
-          chunkWQ376VV2_js.buttonVariants({ variant: "ghost" }),
-          "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
+        day: chunk2CPAROZB_js.cn(
+          chunkYKPZPQ5D_js.buttonVariants({ variant: "ghost" }),
+          "sb:h-8 sb:w-8 sb:p-0 sb:font-normal sb:aria-selected:opacity-100"
         ),
         day_range_start: "day-range-start",
         day_range_end: "day-range-end",
-        day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
-        day_today: "sb-bg-accent sb-text-accent-foreground",
-        day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
-        day_disabled: "sb-text-muted-foreground sb-opacity-50",
-        day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
+        day_selected: "sb:bg-primary sb:text-primary-foreground sb:hover:bg-primary sb:hover:text-primary-foreground sb:focus:bg-primary sb:focus:text-primary-foreground",
+        day_today: "sb:bg-accent sb:text-accent-foreground",
+        day_outside: "day-outside sb:text-muted-foreground sb:opacity-50 sb:aria-selected:bg-accent/50 sb:aria-selected:text-muted-foreground sb:aria-selected:opacity-30",
+        day_disabled: "sb:text-muted-foreground sb:opacity-50",
+        day_range_middle: "sb:aria-selected:bg-accent sb:aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames
       },
       components: {
-        IconLeft: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
-        IconRight: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
+        IconLeft: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb:h-4 sb:w-4" }),
+        IconRight: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb:h-4 sb:w-4" })
       },
       ...props
     }
@@ -1172,29 +1172,29 @@ var ColorPicker = (props) => {
     "#FF0000"
   ];
   return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
-    chunkWQ376VV2_js.Button,
+    chunkYKPZPQ5D_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkTPRY6DEO_js.cn(
-        "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
-        !color && "sb-text-muted-foreground",
+      className: chunk2CPAROZB_js.cn(
+        "sb:justify-start sb:text-left sb:font-normal sb:normal-case sb:w-full",
+        !color && "sb:text-muted-foreground",
         className
       )
     },
-    /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React25__namespace.createElement(
+    /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:w-full sb:flex sb:items-center sb:gap-2" }, color ? /* @__PURE__ */ React25__namespace.createElement(
       "div",
       {
-        className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
+        className: "sb:h-4 sb:w-4 sb:rounded sb:bg-center! sb:bg-cover! sb:transition-all sb:border",
         style: { background: color }
       }
-    ) : /* @__PURE__ */ React25__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
-  )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React25__namespace.createElement(
+    ) : /* @__PURE__ */ React25__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:truncate sb:flex-1" }, color ? color : "Kies een kleur"))
+  )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:w-64 sb:p-4 sb:flex sb:flex-wrap sb:gap-1" }, colors.map((s) => /* @__PURE__ */ React25__namespace.createElement(
     "div",
     {
       key: s,
       style: { background: s },
-      className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
+      className: "sb:rounded-md sb:h-6 sb:w-6 sb:cursor-pointer sb:active:scale-105 sb:border",
       onClick: () => onColorChange(s)
     }
   ))));
@@ -1276,41 +1276,41 @@ var MediaInput = (props) => {
       body: JSON.stringify({ src })
     });
   };
-  return /* @__PURE__ */ React25__namespace.createElement("div", { className: chunkTPRY6DEO_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25__namespace.createElement(MediaInputItem, { key: src, className: chunkTPRY6DEO_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React25__namespace.createElement(
-    chunkTPRY6DEO_js.Image,
+  return /* @__PURE__ */ React25__namespace.createElement("div", { className: chunk2CPAROZB_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25__namespace.createElement(MediaInputItem, { key: src, className: chunk2CPAROZB_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React25__namespace.createElement(
+    chunk2CPAROZB_js.Image,
     {
       src,
       alt: "",
       fill: true,
-      className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
+      className: "sb:absolute sb:inset-0 sb:object-cover sb:pointer-events-none"
     }
-  ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React25__namespace.createElement(
+  ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:absolute sb:right-1 sb:top-1 sb:z-30 sb:flex sb:items-center sb:justify-end sb:gap-3 sb:opacity-0 sb:transition-opacity sb:group-hover:opacity-100" }, /* @__PURE__ */ React25__namespace.createElement(
     "button",
     {
-      className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
+      className: "sb:flex sb:h-8 sb:w-8 sb:items-center sb:justify-center sb:rounded-full sb:border sb:bg-secondary sb:text-secondary-foreground sb:opacity-90 sb:shadow sb:transition-opacity sb:hover:opacity-100",
       onClick: () => handleSourceDelete(src)
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb:h-4 sb:w-4" })
   )))), queue.map((_, i) => /* @__PURE__ */ React25__namespace.createElement(
     MediaInputItem,
     {
       key: i,
-      className: chunkTPRY6DEO_js.cn(
-        "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
+      className: chunk2CPAROZB_js.cn(
+        "sb:flex sb:h-28 sb:w-28 sb:items-center sb:justify-center",
         props.itemClassName
       )
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Loader2Icon, { className: "sb:h-6 sb:w-6 sb:animate-spin" })
   )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React25__namespace.createElement(
     "label",
     {
       htmlFor: id,
-      className: chunkTPRY6DEO_js.cn(
-        "sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
+      className: chunk2CPAROZB_js.cn(
+        "sb:flex sb:h-28 sb:w-28 sb:cursor-pointer sb:items-center sb:justify-center sb:rounded-lg sb:border",
         props.itemClassName
       )
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb:h-6 sb:w-6" }),
     /* @__PURE__ */ React25__namespace.createElement(
       "input",
       {
@@ -1319,7 +1319,7 @@ var MediaInput = (props) => {
         onChange: handleFilesAdd,
         multiple,
         accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
-        className: "sb-hidden"
+        className: "sb:hidden"
       }
     )
   ) : null);
@@ -1328,8 +1328,8 @@ var MediaInputItem = (props) => {
   return /* @__PURE__ */ React25__namespace.createElement(
     "div",
     {
-      className: chunkTPRY6DEO_js.cn(
-        "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
+      className: chunk2CPAROZB_js.cn(
+        "sb:relative sb:h-28 sb:w-28 sb:overflow-hidden sb:rounded-lg sb:border",
         props.className
       )
     },
@@ -1351,49 +1351,49 @@ var SelectTrigger = React25__namespace.forwardRef(({ className, children, ...pro
   SelectPrimitive__namespace.Trigger,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-h-10 sb-w-full sb-items-center sb-justify-between sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-2 sb-text-sm sb-ring-offset-background placeholder:sb-text-muted-foreground focus:sb-outline-none focus:sb-ring-2 focus:sb-ring-ring focus:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50 [&>span]:sb-line-clamp-1",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:h-10 sb:w-full sb:items-center sb:justify-between sb:rounded-md sb:border sb:border-input sb:bg-background sb:px-3 sb:py-2 sb:text-sm sb:ring-offset-background sb:placeholder:text-muted-foreground sb:focus:outline-hidden sb:focus:ring-2 sb:focus:ring-ring sb:focus:ring-offset-2 sb:disabled:cursor-not-allowed sb:disabled:opacity-50 sb:[&>span]:line-clamp-1",
       className
     ),
     ...props
   },
   children,
-  /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.Icon, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb-h-4 sb-w-4 sb-opacity-50" }))
+  /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.Icon, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb:h-4 sb:w-4 sb:opacity-50" }))
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
 var SelectScrollUpButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:cursor-default sb:items-center sb:justify-center sb:py-1",
       className
     ),
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronUp, { className: "sb-h-4 sb-w-4" })
+  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronUp, { className: "sb:h-4 sb:w-4" })
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
 var SelectScrollDownButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:cursor-default sb:items-center sb:justify-center sb:py-1",
       className
     ),
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb-h-4 sb-w-4" })
+  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb:h-4 sb:w-4" })
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
 var SelectContent = React25__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
   SelectPrimitive__namespace.Content,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-relative sb-z-50 sb-max-h-96 sb-min-w-[8rem] sb-overflow-hidden sb-rounded-md sb-border sb-bg-popover sb-text-popover-foreground sb-shadow-md data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:sb-translate-y-1 data-[side=left]:sb--translate-x-1 data-[side=right]:sb-translate-x-1 data-[side=top]:sb--translate-y-1",
+    className: chunk2CPAROZB_js.cn(
+      "sb:relative sb:z-50 sb:max-h-96 sb:min-w-32 sb:overflow-hidden sb:rounded-md sb:border sb:bg-popover sb:text-popover-foreground sb:shadow-md data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
+      position === "popper" && "sb:data-[side=bottom]:translate-y-1 sb:data-[side=left]:-translate-x-1 sb:data-[side=right]:translate-x-1 sb:data-[side=top]:-translate-y-1",
       className
     ),
     position,
@@ -1403,9 +1403,9 @@ var SelectContent = React25__namespace.forwardRef(({ className, children, positi
   /* @__PURE__ */ React25__namespace.createElement(
     SelectPrimitive__namespace.Viewport,
     {
-      className: chunkTPRY6DEO_js.cn(
-        "sb-p-1",
-        position === "popper" && "sb-h-[var(--radix-select-trigger-height)] sb-w-full sb-min-w-[var(--radix-select-trigger-width)]"
+      className: chunk2CPAROZB_js.cn(
+        "sb:p-1",
+        position === "popper" && "sb:h-(--radix-select-trigger-height) sb:w-full sb:min-w-(--radix-select-trigger-width)"
       )
     },
     children
@@ -1417,8 +1417,8 @@ var SelectLabel = React25__namespace.forwardRef(({ className, ...props }, ref) =
   SelectPrimitive__namespace.Label,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-font-semibold",
+    className: chunk2CPAROZB_js.cn(
+      "sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:font-semibold",
       className
     ),
     ...props
@@ -1429,13 +1429,13 @@ var SelectItem = React25__namespace.forwardRef(({ className, children, ...props
   SelectPrimitive__namespace.Item,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-relative sb-flex sb-w-full sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
+    className: chunk2CPAROZB_js.cn(
+      "sb:relative sb:flex sb:w-full sb:cursor-default sb:select-none sb:items-center sb:rounded-sm sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:outline-hidden sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50",
       className
     ),
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb-h-4 sb-w-4" }))),
+  /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:absolute sb:left-2 sb:flex sb:h-3.5 sb:w-3.5 sb:items-center sb:justify-center" }, /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb:h-4 sb:w-4" }))),
   /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children)
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
@@ -1443,7 +1443,7 @@ var SelectSeparator = React25__namespace.forwardRef(({ className, ...props }, re
   SelectPrimitive__namespace.Separator,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb--mx-1 sb-my-1 sb-h-px sb-bg-muted", className),
+    className: chunk2CPAROZB_js.cn("sb:-mx-1 sb:my-1 sb:h-px sb:bg-muted", className),
     ...props
   }
 ));
@@ -1453,8 +1453,8 @@ var Textarea = React25__namespace.forwardRef(
     return /* @__PURE__ */ React25__namespace.createElement(
       "textarea",
       {
-        className: chunkTPRY6DEO_js.cn(
-          "sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
+        className: chunk2CPAROZB_js.cn(
+          "sb:flex sb:min-h-[60px] sb:font-roboto sb:w-full sb:rounded-md sb:border sb:border-input sb:bg-transparent sb:px-3 sb:py-2 sb:text-sm sb:shadow-sm sb:placeholder:text-muted-foreground sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:cursor-not-allowed sb:disabled:opacity-50",
           className
         ),
         ref,
@@ -1468,8 +1468,8 @@ Textarea.displayName = "Textarea";
 // src/components/container-item-form.tsx
 var ContainerItemForm = (props) => {
   const { item } = props;
-  const { patchItem } = chunkWQ376VV2_js.useBuilder();
-  const component = chunkTPRY6DEO_js.builder.getComponent(item.component);
+  const { patchItem } = chunkYKPZPQ5D_js.useBuilder();
+  const component = chunk2CPAROZB_js.builder.getComponent(item.component);
   if (!component) {
     throw new Error(
       `[simple-builder]: Component with id ${item.component} not found in container item form component`
@@ -1492,7 +1492,7 @@ var ContainerItemForm = (props) => {
     },
     [patchItem, item.id]
   );
-  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4 sb:p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React25__namespace.createElement(
     RenderFormField,
     {
       key: input.name,
@@ -1500,7 +1500,7 @@ var ContainerItemForm = (props) => {
       input,
       form
     }
-  )), /* @__PURE__ */ React25__namespace.createElement(chunkWQ376VV2_js.Button, { type: "submit", className: "w-full" }, "Opslaan"))));
+  )), /* @__PURE__ */ React25__namespace.createElement(chunkYKPZPQ5D_js.Button, { type: "submit", className: "w-full" }, "Opslaan"))));
 };
 var RenderFormField = (props) => {
   const { type, input, form } = props;
@@ -1509,16 +1509,16 @@ var RenderFormField = (props) => {
     name: input.name
   });
   if (input.multiple) {
-    return /* @__PURE__ */ React25__namespace.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
+    return /* @__PURE__ */ React25__namespace.createElement("fieldset", { className: "sb:flex sb:flex-col sb:gap-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4" }, fieldArray.fields.map(
       (field, i) => type !== "grouped" ? /* @__PURE__ */ React25__namespace.createElement(
         FormField,
         {
           key: field.id,
           control: form.control,
           name: `${input.name}.${i}`,
-          render: ({ field: field2 }) => /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React25__namespace.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })))
+          render: ({ field: field2 }) => /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:items-center sb:gap-3" }, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React25__namespace.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb:h-4 sb:w-4" })))
         }
-      ) : /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React25__namespace.createElement(
+      ) : /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:items-center sb:relative" }, /* @__PURE__ */ React25__namespace.createElement(
         RenderFormField,
         {
           key: field.id,
@@ -1536,23 +1536,23 @@ var RenderFormField = (props) => {
         {
           type: "button",
           onClick: () => fieldArray.remove(i),
-          className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
+          className: "sb:absolute sb:top-2 sb:right-2 sb:text-foreground/70 sb:hover:text-foreground"
         },
-        /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })
+        /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb:h-4 sb:w-4" })
       ))
     ), /* @__PURE__ */ React25__namespace.createElement(
-      chunkWQ376VV2_js.Button,
+      chunkYKPZPQ5D_js.Button,
       {
         type: "button",
         variant: "outline",
         size: "sm",
-        className: chunkTPRY6DEO_js.cn(
-          "sb-w-[89%] sb-border-2 sb-border-dashed sb-text-muted-foreground",
-          type === "grouped" && "sb-w-full"
+        className: chunk2CPAROZB_js.cn(
+          "sb:w-[89%] sb:border-2 sb:border-dashed sb:text-muted-foreground",
+          type === "grouped" && "sb:w-full"
         ),
         onClick: () => fieldArray.append(void 0)
       },
-      /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
+      /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusCircleIcon, { className: "sb:h-4 sb:w-4" })
     )));
   }
   switch (type) {
@@ -1572,7 +1572,7 @@ var RenderFormField = (props) => {
         }
       );
     case "richText":
-      return /* @__PURE__ */ React25__namespace.createElement(Dialog, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunkWQ376VV2_js.Button, { variant: "outline", className: "sb-w-full", type: "button" }, input.friendlyName || input.name, " bewerken"))), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb-max-w-3xl sb-p-0" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-h-full sb-max-h-svh sb-w-full sb-flex-col sm:sb-max-h-[90svh]" }, /* @__PURE__ */ React25__namespace.createElement(DialogHeader, { className: "sb-flex-none sb-border-b sb-p-6" }, /* @__PURE__ */ React25__namespace.createElement(DialogTitle, null, input.friendlyName || input.name, " editor")), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex-1 sb-overflow-y-auto" }, /* @__PURE__ */ React25__namespace.createElement(
+      return /* @__PURE__ */ React25__namespace.createElement(Dialog, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunkYKPZPQ5D_js.Button, { variant: "outline", className: "sb:w-full", type: "button" }, input.friendlyName || input.name, " bewerken"))), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb:max-w-3xl sb:p-0" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:h-full sb:max-h-svh sb:w-full sb:flex-col sb:sm:max-h-[90svh]" }, /* @__PURE__ */ React25__namespace.createElement(DialogHeader, { className: "sb:flex-none sb:border-b sb:p-6" }, /* @__PURE__ */ React25__namespace.createElement(DialogTitle, null, input.friendlyName || input.name, " editor")), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex-1 sb:overflow-y-auto" }, /* @__PURE__ */ React25__namespace.createElement(
         FormField,
         {
           key: input.name,
@@ -1588,11 +1588,11 @@ var RenderFormField = (props) => {
           key: input.name,
           control: form.control,
           name: input.name,
-          render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+          render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb:flex sb:flex-row sb:items-center sb:justify-between sb:space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
         }
       );
     case "grouped":
-      return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React25__namespace.createElement(
+      return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2 sb:w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2 sb:p-3 sb:w-full sb:border sb:rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React25__namespace.createElement(
         RenderFormField,
         {
           key: `${input.name}.${sub.name}`,
@@ -1627,18 +1627,18 @@ var RenderInput = (props) => {
       return /* @__PURE__ */ React25__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
     case "date":
       return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
-        chunkWQ376VV2_js.Button,
+        chunkYKPZPQ5D_js.Button,
         {
           variant: "outline",
           size: "sm",
-          className: chunkTPRY6DEO_js.cn(
-            "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
-            !field.value && "sb-text-muted-foreground"
+          className: chunk2CPAROZB_js.cn(
+            "sb:w-full sb:flex sb:justify-start sb:text-left sb:font-normal",
+            !field.value && "sb:text-muted-foreground"
           )
         },
-        /* @__PURE__ */ React25__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+        /* @__PURE__ */ React25__namespace.createElement(lucideReact.CalendarIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }),
         field.value && !Array.isArray(field.value) ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React25__namespace.createElement("span", null, "Pick a date")
-      )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React25__namespace.createElement(
+      )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:w-auto sb:p-0", align: "start" }, /* @__PURE__ */ React25__namespace.createElement(
         Calendar,
         {
           mode: "single",
@@ -1653,8 +1653,8 @@ var RenderInput = (props) => {
       return /* @__PURE__ */ React25__namespace.createElement(
         MediaInput,
         {
-          className: "sb-grid sb-grid-cols-2 sb-gap-1",
-          itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
+          className: "sb:grid sb:grid-cols-2 sb:gap-1",
+          itemClassName: "sb:aspect-video sb:h-auto sb:w-full",
           multiple: false,
           files: field.value ? [field.value] : [],
           onFilesChange: (files) => field.onChange(files[0]),
@@ -1671,11 +1671,11 @@ var RenderInput = (props) => {
   }
 };
 var Tabs = TabsPrimitive__namespace.Root;
-var tabsListVariants = chunkTPRY6DEO_js.tv({
+var tabsListVariants = chunk2CPAROZB_js.tv({
   variants: {
     variant: {
-      contained: "sb-inline-flex sb-h-10 sb-items-center sb-justify-center sb-rounded-md sb-bg-muted sb-p-1 sb-text-muted-foreground",
-      text: "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6"
+      contained: "sb:inline-flex sb:h-10 sb:items-center sb:justify-center sb:rounded-md sb:bg-muted sb:p-1 sb:text-muted-foreground",
+      text: "sb:flex sb:items-center sb:border-b sb:px-4 sb:gap-6"
     }
   },
   defaultVariants: {
@@ -1691,11 +1691,11 @@ var TabsList = React25__namespace.forwardRef(({ variant, className, ...props },
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var tabsTriggerVariants = chunkTPRY6DEO_js.tv({
+var tabsTriggerVariants = chunk2CPAROZB_js.tv({
   variants: {
     variant: {
-      contained: "sb-inline-flex sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-sm sb-px-3 sb-py-1.5 sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-all focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-bg-background data-[state=active]:sb-text-foreground data-[state=active]:sb-shadow-sm",
-      text: "sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground"
+      contained: "sb:inline-flex sb:items-center sb:justify-center sb:whitespace-nowrap sb:rounded-sm sb:px-3 sb:py-1.5 sb:text-sm sb:font-medium sb:ring-offset-background sb:transition-all sb:focus-visible:outline-hidden sb:focus-visible:ring-2 sb:focus-visible:ring-ring sb:focus-visible:ring-offset-2 sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:data-[state=active]:bg-background sb:data-[state=active]:text-foreground sb:data-[state=active]:shadow-sm",
+      text: "sb:inline-flex sb:font-roboto sb:items-center sb:justify-center sb:whitespace-nowrap sb:py-3 sb:text-sm sb:font-medium sb:transition-all sb:focus-visible:outline-hidden sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:data-[state=active]:border-black sb:border-b-2 sb:border-transparent sb:data-[state=active]:text-foreground sb:text-muted-foreground"
     }
   },
   defaultVariants: {
@@ -1715,8 +1715,8 @@ var TabsContent = React25__namespace.forwardRef(({ className, ...props }, ref) =
   TabsPrimitive__namespace.Content,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
+    className: chunk2CPAROZB_js.cn(
+      "sb:ring-offset-background sb:font-roboto sb:focus-visible:outline-hidden sb:focus-visible:ring-2 sb:focus-visible:ring-ring sb:focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -1754,35 +1754,35 @@ var BackgroundPicker = (props) => {
     return "solid";
   }, [background]);
   return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
-    chunkWQ376VV2_js.Button,
+    chunkYKPZPQ5D_js.Button,
     {
       variant: "outline",
       size: "sm",
-      className: chunkTPRY6DEO_js.cn(
-        "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
-        !background && "sb-text-muted-foreground",
+      className: chunk2CPAROZB_js.cn(
+        "sb:justify-start sb:text-left sb:font-normal sb:normal-case sb:w-full",
+        !background && "sb:text-muted-foreground",
         className
       )
     },
-    /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React25__namespace.createElement(
+    /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:w-full sb:flex sb:items-center sb:gap-2" }, background ? /* @__PURE__ */ React25__namespace.createElement(
       "div",
       {
-        className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
+        className: "sb:h-4 sb:w-4 sb:rounded sb:bg-center! sb:bg-cover! sb:transition-all sb:border",
         style: { background }
       }
-    ) : /* @__PURE__ */ React25__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
-  )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React25__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React25__namespace.createElement(
+    ) : /* @__PURE__ */ React25__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:truncate sb:flex-1" }, background ? background : "Kies een achtergrond"))
+  )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:w-64 sb:p-0" }, /* @__PURE__ */ React25__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb:w-full" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb:flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb:flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb:flex-1", value: "image" }, "Image")), /* @__PURE__ */ React25__namespace.createElement(
     TabsContent,
     {
       value: "solid",
-      className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
+      className: "sb:data-[state=active]:flex sb:flex-wrap sb:gap-1 sb:p-4"
     },
     solids.map((s) => /* @__PURE__ */ React25__namespace.createElement(
       "div",
       {
         key: s,
         style: { background: s },
-        className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
+        className: "sb:rounded-md sb:h-6 sb:w-6 sb:cursor-pointer sb:active:scale-105 sb:border",
         onClick: () => onBackgroundChange(s)
       }
     ))
@@ -1790,7 +1790,7 @@ var BackgroundPicker = (props) => {
     TabsContent,
     {
       value: "gradient",
-      className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
+      className: "sb:data-[state=active]:flex sb:flex-wrap sb:gap-1 sb:p-4"
     },
     gradients.map((s) => /* @__PURE__ */ React25__namespace.createElement(
       "div",
@@ -1801,11 +1801,11 @@ var BackgroundPicker = (props) => {
         onClick: () => onBackgroundChange(s)
       }
     ))
-  ), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React25__namespace.createElement(
+  ), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:p-4 sb:border-b" }, /* @__PURE__ */ React25__namespace.createElement(
     MediaInput,
     {
-      className: "sb-grid sb-grid-cols-2 sb-gap-1",
-      itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
+      className: "sb:grid sb:grid-cols-2 sb:gap-1",
+      itemClassName: "sb:aspect-video sb:h-auto sb:w-full",
       multiple: false,
       onFilesChange: (files) => {
         if (!files.length)
@@ -1817,12 +1817,12 @@ var BackgroundPicker = (props) => {
         "media-input: Error: " + e?.description
       )
     }
-  )), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React25__namespace.createElement(
+  )), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-1 sb:p-4" }, images.map((s) => /* @__PURE__ */ React25__namespace.createElement(
     "div",
     {
       key: s,
       style: { backgroundImage: s },
-      className: "sb-rounded-md sb-bg-cover sb-bg-center sb-aspect-video sb-w-full sb-cursor-pointer sb-border active:sb-scale-105",
+      className: "sb:rounded-md sb:bg-cover sb:bg-center sb:aspect-video sb:w-full sb:cursor-pointer sb:border sb:active:scale-105",
       onClick: () => onBackgroundChange(s)
     }
   )))))));
@@ -1837,14 +1837,14 @@ var SpacingInput = (props) => {
       return;
     props.onChange(stringify(value));
   }, [value, props.onChange]);
-  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-[1fr_auto] sb:gap-3" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:items-center sb:gap-3" }, !indipendent ? /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
     AdvancedInput,
     {
       value: value.left,
       pattern: "\\d+",
       onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
-      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
-      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb:h-4 sb:w-4" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
     }
   ), /* @__PURE__ */ React25__namespace.createElement(
     AdvancedInput,
@@ -1852,8 +1852,8 @@ var SpacingInput = (props) => {
       value: value.top,
       pattern: "\\d+",
       onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
-      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb:h-4 sb:w-4 sb:rotate-90" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
     }
   )) : /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
     AdvancedInput,
@@ -1861,8 +1861,8 @@ var SpacingInput = (props) => {
       value: value.left,
       pattern: "\\d+",
       onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
-      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
-      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
     }
   ), /* @__PURE__ */ React25__namespace.createElement(
     AdvancedInput,
@@ -1870,8 +1870,8 @@ var SpacingInput = (props) => {
       value: value.top,
       pattern: "\\d+",
       onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
-      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
-      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:rotate-90" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
     }
   ), /* @__PURE__ */ React25__namespace.createElement(
     AdvancedInput,
@@ -1879,8 +1879,8 @@ var SpacingInput = (props) => {
       value: value.right,
       pattern: "\\d+",
       onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
-      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
-      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:rotate-180" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
     }
   ), /* @__PURE__ */ React25__namespace.createElement(
     AdvancedInput,
@@ -1888,19 +1888,19 @@ var SpacingInput = (props) => {
       value: value.bottom,
       pattern: "\\d+",
       onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
-      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
-      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:-rotate-90" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
     }
-  ))), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React25__namespace.createElement(
+  ))), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:shrink-0" }, /* @__PURE__ */ React25__namespace.createElement(
     Toggle,
     {
-      className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
+      className: "sb:shrink-0 sb:flex sb:w-8 sb:h-8 sb:p-0",
       variant: "outline",
       size: "sm",
       pressed: indipendent,
       onPressedChange: setIndipendent
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ScanIcon, { className: "sb:h-4 sb:w-4" })
   )));
 };
 var isIndipendent = (value) => {
@@ -1954,7 +1954,7 @@ var designSchema = zod.z.object({
 });
 var ItemDesignForm = (props) => {
   const { item } = props;
-  const component = chunkTPRY6DEO_js.builder.getComponent(item.component);
+  const component = chunk2CPAROZB_js.builder.getComponent(item.component);
   if (!component) {
     throw new Error(
       `[simple-builder]: Component "${item.component}" not found`
@@ -1996,7 +1996,7 @@ var ItemDesignForm = (props) => {
       mobile: getDefaultDeviceValues("mobile")
     }
   });
-  const { patchItem } = chunkWQ376VV2_js.useBuilder();
+  const { patchItem } = chunkYKPZPQ5D_js.useBuilder();
   const onSubmit = React25__namespace.useCallback(
     (values) => {
       const { container, hidden, desktop, mobile } = values;
@@ -2039,14 +2039,14 @@ var ItemDesignForm = (props) => {
     [patchItem, item.id, form.formState.dirtyFields]
   );
   const [device, setDevice] = React25__namespace.useState("desktop");
-  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4 sb:p-4" }, /* @__PURE__ */ React25__namespace.createElement(
     Tabs,
     {
       defaultValue: device,
       onValueChange: (device2) => setDevice(device2)
     },
-    /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Mobiel")))
-  ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React25__namespace.createElement(
+    /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb:h-9 sb:grid sb:w-full sb:grid-cols-2" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb:text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.MonitorIcon, { className: "sb:h-4 sb:w-4 sb:mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb:text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb:h-4 sb:w-4 sb:mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Mobiel")))
+  ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4" }, /* @__PURE__ */ React25__namespace.createElement(
     FormField,
     {
       control: form.control,
@@ -2086,7 +2086,7 @@ var ItemDesignForm = (props) => {
     {
       control: form.control,
       name: "container",
-      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb:flex sb:flex-row sb:items-center sb:justify-between sb:space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
         Switch,
         {
           checked: !field.value,
@@ -2122,16 +2122,16 @@ var ItemDesignForm = (props) => {
         }
       )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
     }
-  )), /* @__PURE__ */ React25__namespace.createElement(chunkWQ376VV2_js.Button, { type: "submit", className: "w-full" }, "Opslaan"))));
+  )), /* @__PURE__ */ React25__namespace.createElement(chunkYKPZPQ5D_js.Button, { type: "submit", className: "w-full" }, "Opslaan"))));
 };
 var ScrollArea = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
-    className: chunkTPRY6DEO_js.cn("sb-relative sb-overflow-hidden", className),
+    className: chunk2CPAROZB_js.cn("sb:relative sb:overflow-hidden", className),
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
+  /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "sb:h-full sb:max-h-[80vh] sb:w-full sb:rounded-[inherit]" }, children),
   /* @__PURE__ */ React25__namespace.createElement(ScrollBar, null),
   /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Corner, null)
 ));
@@ -2141,51 +2141,51 @@ var ScrollBar = React25__namespace.forwardRef(({ className, orientation = "verti
   {
     ref,
     orientation,
-    className: chunkTPRY6DEO_js.cn(
-      "sb-flex sb-touch-none sb-select-none sb-transition-colors",
-      orientation === "vertical" && "sb-h-full sb-w-2.5 sb-border-l sb-border-l-transparent sb-p-[1px]",
-      orientation === "horizontal" && "sb-h-2.5 sb-flex-col sb-border-t sb-border-t-transparent sb-p-[1px]",
+    className: chunk2CPAROZB_js.cn(
+      "sb:flex sb:touch-none sb:select-none sb:transition-colors",
+      orientation === "vertical" && "sb:h-full sb:w-2.5 sb:border-l sb:border-l-transparent sb:p-px",
+      orientation === "horizontal" && "sb:h-2.5 sb:flex-col sb:border-t sb:border-t-transparent sb:p-px",
       className
     ),
     ...props
   },
-  /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
+  /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "sb:relative sb:flex-1 sb:rounded-full sb:bg-border" })
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
 
 // src/components/container-item-toolbar.tsx
 var ContainerItemToolbar = (props) => {
   const { contentId, canBringUp = false, canBringDown = false } = props;
-  const { bringUp, bringDown } = chunkWQ376VV2_js.useBuilder();
-  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React25__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React25__namespace.createElement(
-    chunkWQ376VV2_js.Button,
+  const { bringUp, bringDown } = chunkYKPZPQ5D_js.useBuilder();
+  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:absolute sb:z-20 sb:top-1 sb:right-1 sb:rounded-md sb:shadow sb:flex sb:flex-col sb:gap-1 sb:p-1 sb:bg-card sb:text-card-foreground sb-item-toolbar sb:opacity-0 sb:transition-opacity" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:h-10 sb:p-1 sb:border sb:border-input sb:bg-background sb:rounded-md sb:text-sm sb:font-medium sb:flex sb:gap-1 sb:items-center sb:justify-start" }, /* @__PURE__ */ React25__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React25__namespace.createElement(
+    chunkYKPZPQ5D_js.Button,
     {
       variant: "ghost",
-      className: "sb-w-8 sb-h-8 sb-p-0",
+      className: "sb:w-8 sb:h-8 sb:p-0",
       onClick: () => bringUp(contentId),
       disabled: !canBringUp
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowUp, { className: "sb:h-5 sb:w-5" })
   ), /* @__PURE__ */ React25__namespace.createElement(
-    chunkWQ376VV2_js.Button,
+    chunkYKPZPQ5D_js.Button,
     {
       variant: "ghost",
-      className: "sb-w-8 sb-h-8 sb-p-0",
+      className: "sb:w-8 sb:h-8 sb:p-0",
       onClick: () => bringDown(contentId),
       disabled: !canBringDown
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowDown, { className: "sb:h-5 sb:w-5" })
   ), /* @__PURE__ */ React25__namespace.createElement(DeleteButton, { contentId })));
 };
 var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunkWQ376VV2_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunkYKPZPQ5D_js.Button, { variant: "ghost", className: "sb:w-8 sb:h-8 sb:p-0" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Edit2Icon, { className: "sb:h-5 sb:w-5" }))), /* @__PURE__ */ React25__namespace.createElement(
     PopoverContent,
     {
       side: "left",
       align: "start",
       sideOffset: 16,
       alignOffset: -8,
-      className: "sb-p-0 sb-relative",
+      className: "sb:p-0 sb:relative",
       collisionPadding: 16
     },
     /* @__PURE__ */ React25__namespace.createElement(EditPopoverInner, { id })
@@ -2193,7 +2193,7 @@ var EditButton = ({ id }) => {
 };
 var EditPopoverInner = (props) => {
   const { id } = props;
-  const { getItem } = chunkWQ376VV2_js.useBuilder();
+  const { getItem } = chunkYKPZPQ5D_js.useBuilder();
   const item = getItem(id);
   if (!item) {
     throw new Error(
@@ -2203,18 +2203,18 @@ var EditPopoverInner = (props) => {
   return /* @__PURE__ */ React25__namespace.createElement(Tabs, null, /* @__PURE__ */ React25__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React25__namespace.createElement(ScrollArea, null, /* @__PURE__ */ React25__namespace.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React25__namespace.createElement(ItemDesignForm, { item })));
 };
 var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = chunkWQ376VV2_js.useBuilder();
+  const { deleteContent } = chunkYKPZPQ5D_js.useBuilder();
   return /* @__PURE__ */ React25__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
-    chunkWQ376VV2_js.Button,
+    chunkYKPZPQ5D_js.Button,
     {
       variant: "ghost",
-      className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
+      className: "sb:w-8 sb:h-8 sb:p-0 sb:text-destructive"
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb:h-5 sb:w-5" })
   )), /* @__PURE__ */ React25__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React25__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React25__namespace.createElement(
     AlertDialogAction,
     {
-      className: chunkWQ376VV2_js.buttonVariants({ variant: "destructive" }),
+      className: chunkYKPZPQ5D_js.buttonVariants({ variant: "destructive" }),
       onClick: () => deleteContent(contentId)
     },
     "Verwijderen"
@@ -2230,7 +2230,7 @@ var BuildContainerInner = (props) => {
       "[simple-builder]: Multiple content blocks detected when using property multiple false."
     );
   }
-  return /* @__PURE__ */ React25__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React25__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React25__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React25__namespace.createElement(chunkTPRY6DEO_js.DesignWrapper, { building: true, styles: item.styles }, chunkTPRY6DEO_js.builder.bindComponent(item, true)), /* @__PURE__ */ React25__namespace.createElement(
+  return /* @__PURE__ */ React25__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React25__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React25__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:relative sb-container-item" }, /* @__PURE__ */ React25__namespace.createElement(chunk2CPAROZB_js.DesignWrapper, { building: true, styles: item.styles }, chunk2CPAROZB_js.builder.bindComponent(item, true)), /* @__PURE__ */ React25__namespace.createElement(
     ContainerItemToolbar,
     {
       contentId: item.id,
@@ -2248,15 +2248,15 @@ var BuildContainerInner = (props) => {
 };
 var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
-  const components = chunkTPRY6DEO_js.builder.getComponents();
-  const { addContent } = chunkWQ376VV2_js.useBuilder();
-  return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
+  const components = chunk2CPAROZB_js.builder.getComponents();
+  const { addContent } = chunkYKPZPQ5D_js.useBuilder();
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:p-1" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-2" }, components.map((component) => {
     const Icon2 = component.icon ?? lucideReact.ImageIcon;
     return /* @__PURE__ */ React25__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
-      chunkWQ376VV2_js.Button,
+      chunkYKPZPQ5D_js.Button,
       {
         variant: "ghost",
-        className: "sb-justify-start",
+        className: "sb:justify-start",
         onClick: () => {
           addContent(
             component.name,
@@ -2266,22 +2266,22 @@ var AddContentButton = (props) => {
           );
         }
       },
-      /* @__PURE__ */ React25__namespace.createElement(Icon2, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
+      /* @__PURE__ */ React25__namespace.createElement(Icon2, { className: "sb:mr-2 sb:h-4 sb:w-4 sb:shrink-0" }),
       component.friendlyName ?? component.name
     ));
   }))));
 };
 var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React25__namespace.createElement(chunkWQ376VV2_js.Button, { size: "sm" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
+  return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:justify-center sb:bg-primary/50 p-4" }, /* @__PURE__ */ React25__namespace.createElement(chunkYKPZPQ5D_js.Button, { size: "sm" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }), "Blok Toevoegen")));
 };
 var AddContentDividerButton = (props) => {
-  return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React25__namespace.createElement(
-    chunkWQ376VV2_js.Button,
+  return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:w-full sb:h-1 sb:-my-[2px] sb:bg-primary sb:relative sb:z-20 sb:opacity-0 add-content-divider-button sb:transition-opacity" }, /* @__PURE__ */ React25__namespace.createElement(
+    chunkYKPZPQ5D_js.Button,
     {
       size: "sm",
-      className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
+      className: "sb:absolute sb:left-1/2 sb:top-1/2 sb:-translate-y-1/2 sb:-translate-x-1/2 sb:shadow"
     },
-    /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }),
     "Blok Toevoegen"
   )));
 };