@delmaredigital/payload-puck 0.1.0 → 0.1.1

package/dist/fields/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import * as React12 from 'react';
 import { memo, createContext, useState, useCallback, useEffect, useRef, useContext } from 'react';
-import { IconX, IconChevronDown, IconChevronUp, IconCheck, IconPhoto, IconLink, IconSearch, IconLoader2, IconAlertCircle, IconUpload, IconBold, IconItalic, IconUnderline, IconStrikethrough, IconSuperscript, IconSubscript, IconLetterP, IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconTextSize, IconList, IconListNumbers, IconBlockquote, IconAlignLeft, IconAlignCenter, IconAlignRight, IconAlignJustified, IconPalette, IconHighlight, IconSeparatorHorizontal, IconCornerDownLeft, IconClearFormatting, IconCode, IconArrowsMaximize, IconLinkOff, IconBorderTop, IconBorderRight, IconBorderBottom, IconBorderLeft, IconArrowsHorizontal, IconContainer, IconAdjustments, IconLayoutAlignLeft, IconLayoutAlignCenter, IconLayoutAlignRight, IconLayoutDistributeHorizontal, IconSpacingHorizontal, IconLayoutAlignTop, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconArrowsVertical, IconTrash, IconPlus, IconEyeOff, IconRotate, IconResize, Icon3dCubeSphere, IconChevronRight, IconDeviceDesktop, IconDeviceLaptop, IconDeviceTablet, IconDeviceMobile, IconDevices, IconEye, IconLock, IconLockOpen } from '@tabler/icons-react';
+import { X, ChevronDown, ChevronUp, Check, Image, Link, Search, Loader2, AlertCircle, Upload, Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Pilcrow, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, ALargeSmall, List, ListOrdered, Quote, AlignLeft, AlignCenter, AlignRight, AlignJustify, Palette, Highlighter, Minus, CornerDownLeft, RemoveFormatting, Code, Maximize2, Unlink, ArrowUp, ArrowRight, ArrowDown, ArrowLeft, MoveHorizontal, Container, SlidersHorizontal, Square, AlignStartHorizontal, AlignCenterHorizontal, AlignEndHorizontal, AlignHorizontalDistributeCenter, GripHorizontal, AlignStartVertical, AlignCenterVertical, AlignEndVertical, MoveVertical, Trash2, Plus, EyeOff, RotateCw, Box, ChevronRight, Monitor, Laptop, Tablet, Smartphone, Eye, Lock, Unlock } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -15,8 +15,8 @@ import TextAlign from '@tiptap/extension-text-align';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import Highlight from '@tiptap/extension-highlight';
-import Superscript from '@tiptap/extension-superscript';
-import Subscript from '@tiptap/extension-subscript';
+import Superscript$1 from '@tiptap/extension-superscript';
+import Subscript$1 from '@tiptap/extension-subscript';
 import { Extension } from '@tiptap/core';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
@@ -752,7 +752,7 @@ function transformValueToCSS(transform) {
   return Object.keys(style).length > 0 ? style : void 0;
 }
 var BREAKPOINTS = [
-  { key: "base", label: "Base", minWidth: null },
+  { key: "xs", label: "XS", minWidth: null },
   { key: "sm", label: "SM", minWidth: 640 },
   { key: "md", label: "MD", minWidth: 768 },
   { key: "lg", label: "LG", minWidth: 1024 },
@@ -760,7 +760,7 @@ var BREAKPOINTS = [
 ];
 function isResponsiveValue(value) {
   if (!value || typeof value !== "object") return false;
-  return "base" in value;
+  return "xs" in value;
 }
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
@@ -786,7 +786,7 @@ function responsiveValueToCSS(value, converter, uniqueId) {
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
-    if (bp.key === "base") {
+    if (bp.key === "xs") {
       baseStyles = cssProps;
     } else {
       const styleString = cssPropertiesToString(cssProps);
@@ -800,29 +800,50 @@ function responsiveValueToCSS(value, converter, uniqueId) {
   return { baseStyles, mediaQueryCSS: mediaQueries.join("\n") };
 }
 var DEFAULT_VISIBILITY = {
-  base: true
+  xs: true,
+  sm: true,
+  md: true,
+  lg: true,
+  xl: true
 };
 function visibilityValueToCSS(visibility, uniqueId) {
   if (!visibility) return "";
   const mediaQueries = [];
-  if (visibility.base === false) {
-    mediaQueries.push(`.${uniqueId} { display: none; }`);
+  const breakpointWidths = {
+    xs: null,
+    // 0px
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+  };
+  const getNextBreakpointWidth = (bp) => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const index = order.indexOf(bp);
+    if (index === -1 || index === order.length - 1) return null;
+    return breakpointWidths[order[index + 1]];
+  };
+  if (visibility.xs === false) {
+    const nextWidth = getNextBreakpointWidth("xs");
+    if (nextWidth) {
+      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
+    } else {
+      mediaQueries.push(`.${uniqueId} { display: none; }`);
+    }
   }
-  let lastVisibility = visibility.base;
   BREAKPOINTS.slice(1).forEach((bp) => {
-    const bpValue = visibility[bp.key];
-    if (bpValue === void 0) return;
-    if (bpValue !== lastVisibility) {
-      if (bpValue === false) {
+    if (visibility[bp.key] === false) {
+      const minWidth = breakpointWidths[bp.key];
+      const maxWidth = getNextBreakpointWidth(bp.key);
+      if (minWidth && maxWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: none; } }`
+          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
         );
-      } else {
+      } else if (minWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: block; } }`
+          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
         );
       }
-      lastVisibility = bpValue;
     }
   });
   return mediaQueries.join("\n");
@@ -1277,7 +1298,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
       children: [
         children,
         /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
@@ -1300,7 +1321,7 @@ var DialogContentFullscreen = React12.forwardRef(({ className, children, hideClo
         /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: accessibleTitle }),
         children,
         !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
@@ -1574,10 +1595,10 @@ function MediaFieldInner({
               onClick: handleRemove,
               className: "absolute -top-2 -right-2 p-1 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity",
               "aria-label": "Remove image",
-              children: /* @__PURE__ */ jsx(IconX, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
             }
           )
-        ] }) : /* @__PURE__ */ jsx("div", { className: "w-24 h-24 bg-muted rounded-md border border-dashed border-input flex items-center justify-center", children: /* @__PURE__ */ jsx(IconPhoto, { className: "h-8 w-8 text-muted-foreground" }) }),
+        ] }) : /* @__PURE__ */ jsx("div", { className: "w-24 h-24 bg-muted rounded-md border border-dashed border-input flex items-center justify-center", children: /* @__PURE__ */ jsx(Image, { className: "h-8 w-8 text-muted-foreground" }) }),
         !readOnly && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -1601,7 +1622,7 @@ function MediaFieldInner({
         ] })
       ] }),
       value?.url && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(IconLink, { className: "h-3 w-3 flex-shrink-0" }),
+        /* @__PURE__ */ jsx(Link, { className: "h-3 w-3 flex-shrink-0" }),
         /* @__PURE__ */ jsx("span", { className: "truncate max-w-[280px]", title: value.url, children: value.url })
       ] })
     ] }),
@@ -1646,7 +1667,7 @@ function MediaFieldInner({
         )
       ] }),
       activeTab === "browse" && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-        /* @__PURE__ */ jsx(IconSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -1692,7 +1713,7 @@ function MediaFieldInner({
               onClick: handleLoadMore,
               disabled: loading,
               children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
                 "Loading..."
               ] }) : "Load More"
             }
@@ -1722,15 +1743,15 @@ function MediaFieldInner({
             ] })
           ] }),
           uploadState.error && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-destructive/10 border border-destructive/30 rounded-md text-destructive text-sm flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx(IconAlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
             /* @__PURE__ */ jsx("span", { children: uploadState.error })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsx(Button, { onClick: handleUpload, disabled: uploadState.uploading, children: uploadState.uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
               "Uploading..."
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4 mr-2" }),
+              /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 mr-2" }),
               "Upload & Select"
             ] }) }),
             /* @__PURE__ */ jsx(
@@ -1744,7 +1765,7 @@ function MediaFieldInner({
             )
           ] })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx(IconPhoto, { className: "h-16 w-16 text-muted mx-auto mb-4" }),
+          /* @__PURE__ */ jsx(Image, { className: "h-16 w-16 text-muted mx-auto mb-4" }),
           /* @__PURE__ */ jsxs("label", { className: "cursor-pointer", children: [
             /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx("span", { children: "Select Image" }) }),
             /* @__PURE__ */ jsx(
@@ -1764,7 +1785,7 @@ function MediaFieldInner({
         /* URL Tab */
         /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px]", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md space-y-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
-            /* @__PURE__ */ jsx(IconLink, { className: "h-12 w-12 text-muted-foreground mx-auto mb-2" }),
+            /* @__PURE__ */ jsx(Link, { className: "h-12 w-12 text-muted-foreground mx-auto mb-2" }),
             /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Enter an image URL from an external source" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -1802,10 +1823,10 @@ function MediaFieldInner({
                 onError: handleUrlPreviewError
               }
             ),
-            !urlState.previewLoaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(IconLoader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
+            !urlState.previewLoaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
           ] }),
           urlState.error && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-destructive/10 border border-destructive/30 rounded-md text-destructive text-sm flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx(IconAlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 flex-shrink-0 mt-0.5" }),
             /* @__PURE__ */ jsx("span", { children: urlState.error })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
@@ -1815,7 +1836,7 @@ function MediaFieldInner({
                 onClick: handleUrlSubmit,
                 disabled: !urlState.url || urlState.loading,
                 children: [
-                  /* @__PURE__ */ jsx(IconLink, { className: "h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsx(Link, { className: "h-4 w-4 mr-2" }),
                   "Use This URL"
                 ]
               }
@@ -2025,7 +2046,7 @@ function ColorPickerFieldInner({
           onClick: handleClear,
           title: "Clear color",
           className: "flex items-center justify-center w-8 h-8 rounded border-none bg-transparent cursor-pointer text-muted-foreground flex-shrink-0 hover:bg-accent hover:text-destructive",
-          children: /* @__PURE__ */ jsx(IconX, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -2458,8 +2479,8 @@ function createTiptapExtensions() {
       multicolor: true
     }),
     FontSize,
-    Superscript,
-    Subscript
+    Superscript$1,
+    Subscript$1
   ];
 }
 function TiptapFieldInner({ value, onChange, label, readOnly }) {
@@ -2565,7 +2586,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleBold().run(),
             isActive: formattingState?.isBold,
             title: "Bold",
-            children: /* @__PURE__ */ jsx(IconBold, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Bold, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2574,7 +2595,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleItalic().run(),
             isActive: formattingState?.isItalic,
             title: "Italic",
-            children: /* @__PURE__ */ jsx(IconItalic, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Italic, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2583,7 +2604,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleUnderline().run(),
             isActive: formattingState?.isUnderline,
             title: "Underline",
-            children: /* @__PURE__ */ jsx(IconUnderline, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Underline, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2592,7 +2613,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleStrike().run(),
             isActive: formattingState?.isStrike,
             title: "Strikethrough",
-            children: /* @__PURE__ */ jsx(IconStrikethrough, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Strikethrough, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2601,7 +2622,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleSuperscript().run(),
             isActive: formattingState?.isSuperscript,
             title: "Superscript",
-            children: /* @__PURE__ */ jsx(IconSuperscript, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Superscript, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2610,7 +2631,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleSubscript().run(),
             isActive: formattingState?.isSubscript,
             title: "Subscript",
-            children: /* @__PURE__ */ jsx(IconSubscript, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Subscript, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -2618,8 +2639,8 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           ToolbarDropdown,
           {
             trigger: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
-              formattingState?.isH1 ? /* @__PURE__ */ jsx(IconH1, { className: ICON_SIZE }) : formattingState?.isH2 ? /* @__PURE__ */ jsx(IconH2, { className: ICON_SIZE }) : formattingState?.isH3 ? /* @__PURE__ */ jsx(IconH3, { className: ICON_SIZE }) : formattingState?.isH4 ? /* @__PURE__ */ jsx(IconH4, { className: ICON_SIZE }) : formattingState?.isH5 ? /* @__PURE__ */ jsx(IconH5, { className: ICON_SIZE }) : formattingState?.isH6 ? /* @__PURE__ */ jsx(IconH6, { className: ICON_SIZE }) : /* @__PURE__ */ jsx(IconLetterP, { className: ICON_SIZE }),
-              /* @__PURE__ */ jsx(IconChevronDown, { className: "w-3 h-3" })
+              formattingState?.isH1 ? /* @__PURE__ */ jsx(Heading1, { className: ICON_SIZE }) : formattingState?.isH2 ? /* @__PURE__ */ jsx(Heading2, { className: ICON_SIZE }) : formattingState?.isH3 ? /* @__PURE__ */ jsx(Heading3, { className: ICON_SIZE }) : formattingState?.isH4 ? /* @__PURE__ */ jsx(Heading4, { className: ICON_SIZE }) : formattingState?.isH5 ? /* @__PURE__ */ jsx(Heading5, { className: ICON_SIZE }) : formattingState?.isH6 ? /* @__PURE__ */ jsx(Heading6, { className: ICON_SIZE }) : /* @__PURE__ */ jsx(Pilcrow, { className: ICON_SIZE }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
             ] }),
             title: "Text Type",
             isActive: formattingState?.isH1 || formattingState?.isH2 || formattingState?.isH3 || formattingState?.isH4 || formattingState?.isH5 || formattingState?.isH6,
@@ -2628,7 +2649,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
                 editor.chain().focus().setParagraph().run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconLetterP, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Pilcrow, { className: cn2(ICON_SIZE, "mr-2") }),
                 "Paragraph"
               ] }),
               /* @__PURE__ */ jsx(DropdownSeparator, {}),
@@ -2636,42 +2657,42 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
                 editor.chain().focus().toggleHeading({ level: 1 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconH1, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Heading1, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsx("span", { className: "font-bold text-lg", children: "Heading 1" })
               ] }),
               /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 2 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconH2, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Heading2, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsx("span", { className: "font-bold text-base", children: "Heading 2" })
               ] }),
               /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 3 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconH3, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Heading3, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Heading 3" })
               ] }),
               /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 4 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconH4, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Heading4, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: "Heading 4" })
               ] }),
               /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 5 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconH5, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Heading5, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs", children: "Heading 5" })
               ] }),
               /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => {
                 editor.chain().focus().toggleHeading({ level: 6 }).run();
                 close();
               }, children: [
-                /* @__PURE__ */ jsx(IconH6, { className: cn2(ICON_SIZE, "mr-2") }),
+                /* @__PURE__ */ jsx(Heading6, { className: cn2(ICON_SIZE, "mr-2") }),
                 /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-gray-600", children: "Heading 6" })
               ] })
             ] })
@@ -2681,7 +2702,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
         /* @__PURE__ */ jsx(
           ToolbarDropdown,
           {
-            trigger: /* @__PURE__ */ jsx(IconTextSize, { className: ICON_SIZE }),
+            trigger: /* @__PURE__ */ jsx(ALargeSmall, { className: ICON_SIZE }),
             title: "Font Size",
             children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(DropdownLabel, { children: "Presets" }),
@@ -2767,7 +2788,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleBulletList().run(),
             isActive: formattingState?.isBulletList,
             title: "Bullet List",
-            children: /* @__PURE__ */ jsx(IconList, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(List, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2776,7 +2797,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleOrderedList().run(),
             isActive: formattingState?.isOrderedList,
             title: "Numbered List",
-            children: /* @__PURE__ */ jsx(IconListNumbers, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(ListOrdered, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2785,7 +2806,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().toggleBlockquote().run(),
             isActive: formattingState?.isBlockquote,
             title: "Blockquote",
-            children: /* @__PURE__ */ jsx(IconBlockquote, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Quote, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -2795,7 +2816,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("left").run(),
             isActive: formattingState?.isAlignLeft,
             title: "Align Left",
-            children: /* @__PURE__ */ jsx(IconAlignLeft, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(AlignLeft, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2804,7 +2825,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("center").run(),
             isActive: formattingState?.isAlignCenter,
             title: "Align Center",
-            children: /* @__PURE__ */ jsx(IconAlignCenter, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(AlignCenter, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2813,7 +2834,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("right").run(),
             isActive: formattingState?.isAlignRight,
             title: "Align Right",
-            children: /* @__PURE__ */ jsx(IconAlignRight, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(AlignRight, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2822,7 +2843,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
             onClick: () => editor.chain().focus().setTextAlign("justify").run(),
             isActive: formattingState?.isAlignJustify,
             title: "Justify",
-            children: /* @__PURE__ */ jsx(IconAlignJustified, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(AlignJustify, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -2833,7 +2854,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
               onClick: () => setIsLinkPopoverOpen(!isLinkPopoverOpen),
               isActive: formattingState?.isLink,
               title: "Add Link",
-              children: /* @__PURE__ */ jsx(IconLink, { className: ICON_SIZE })
+              children: /* @__PURE__ */ jsx(Link, { className: ICON_SIZE })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -2849,7 +2870,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
         /* @__PURE__ */ jsx(
           ToolbarDropdown,
           {
-            trigger: /* @__PURE__ */ jsx(IconPalette, { className: ICON_SIZE }),
+            trigger: /* @__PURE__ */ jsx(Palette, { className: ICON_SIZE }),
             title: "Text Color",
             children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => {
@@ -2906,7 +2927,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
         /* @__PURE__ */ jsx(
           ToolbarDropdown,
           {
-            trigger: /* @__PURE__ */ jsx(IconHighlight, { className: ICON_SIZE }),
+            trigger: /* @__PURE__ */ jsx(Highlighter, { className: ICON_SIZE }),
             title: "Highlight",
             isActive: formattingState?.isHighlight,
             children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2937,7 +2958,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           {
             onClick: () => editor.chain().focus().setHorizontalRule().run(),
             title: "Horizontal Rule",
-            children: /* @__PURE__ */ jsx(IconSeparatorHorizontal, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(Minus, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2945,7 +2966,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           {
             onClick: () => editor.chain().focus().setHardBreak().run(),
             title: "Hard Break (Shift+Enter)",
-            children: /* @__PURE__ */ jsx(IconCornerDownLeft, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(CornerDownLeft, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsx("div", { className: TOOLBAR_DIVIDER }),
@@ -2954,7 +2975,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
           {
             onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(),
             title: "Clear Formatting",
-            children: /* @__PURE__ */ jsx(IconClearFormatting, { className: ICON_SIZE })
+            children: /* @__PURE__ */ jsx(RemoveFormatting, { className: ICON_SIZE })
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -2977,7 +2998,7 @@ function TiptapFieldInner({ value, onChange, label, readOnly }) {
               !showSource && "bg-transparent"
             ),
             children: [
-              /* @__PURE__ */ jsx(IconCode, { className: ICON_SIZE }),
+              /* @__PURE__ */ jsx(Code, { className: ICON_SIZE }),
               "Source"
             ]
           }
@@ -3107,7 +3128,7 @@ function TiptapModal({ isOpen, onClose, value, onChange, title }) {
                         justifyContent: "center"
                       },
                       title: "Close (Esc)",
-                      children: /* @__PURE__ */ jsx(IconX, { size: 20 })
+                      children: /* @__PURE__ */ jsx(X, { size: 20 })
                     }
                   )
                 ]
@@ -3234,7 +3255,7 @@ function TiptapModalFieldInner({ value, onChange, label }) {
               },
               title: "Open full-screen editor",
               children: [
-                /* @__PURE__ */ jsx(IconArrowsMaximize, { size: 14 }),
+                /* @__PURE__ */ jsx(Maximize2, { size: 14 }),
                 "Expand"
               ]
             }
@@ -3350,7 +3371,7 @@ function PaddingFieldInner({
             isLinked ? "" : "text-muted-foreground"
           ),
           title: isLinked ? "Click to unlink (set sides individually)" : "Click to link (all sides same value)",
-          children: isLinked ? /* @__PURE__ */ jsx(IconLink, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconLinkOff, { className: "h-4 w-4" })
+          children: isLinked ? /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -3490,7 +3511,7 @@ function MarginFieldInner({
             isLinked ? "" : "text-muted-foreground"
           ),
           title: isLinked ? "Click to unlink (set sides individually)" : "Click to link (all sides same value)",
-          children: isLinked ? /* @__PURE__ */ jsx(IconLink, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconLinkOff, { className: "h-4 w-4" })
+          children: isLinked ? /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -3557,7 +3578,7 @@ var SelectTrigger = React12.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
@@ -3571,7 +3592,7 @@ var SelectScrollUpButton = React12.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(IconChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -3584,7 +3605,7 @@ var SelectScrollDownButton = React12.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(IconChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -3635,7 +3656,7 @@ var SelectItem = React12.forwardRef(({ className, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
     ]
   }
@@ -3727,7 +3748,7 @@ function BorderFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Clear border",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -3830,7 +3851,7 @@ function BorderFieldInner({
               currentValue.sides.top && "bg-primary hover:bg-primary/90"
             ),
             title: "Top border",
-            children: /* @__PURE__ */ jsx(IconBorderTop, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -3845,7 +3866,7 @@ function BorderFieldInner({
               currentValue.sides.right && "bg-primary hover:bg-primary/90"
             ),
             title: "Right border",
-            children: /* @__PURE__ */ jsx(IconBorderRight, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -3860,7 +3881,7 @@ function BorderFieldInner({
               currentValue.sides.bottom && "bg-primary hover:bg-primary/90"
             ),
             title: "Bottom border",
-            children: /* @__PURE__ */ jsx(IconBorderBottom, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -3875,7 +3896,7 @@ function BorderFieldInner({
               currentValue.sides.left && "bg-primary hover:bg-primary/90"
             ),
             title: "Left border",
-            children: /* @__PURE__ */ jsx(IconBorderLeft, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
           }
         )
       ] }),
@@ -3979,14 +4000,14 @@ function WidthFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [
-      { mode: "full", icon: IconArrowsHorizontal, title: "Full width (100%)" },
-      { mode: "contained", icon: IconContainer, title: "Contained (centered with max-width)" },
-      { mode: "custom", icon: IconAdjustments, title: "Custom width settings" }
+      { mode: "full", icon: MoveHorizontal, title: "Full width (100%)" },
+      { mode: "contained", icon: Container, title: "Contained (centered with max-width)" },
+      { mode: "custom", icon: SlidersHorizontal, title: "Custom width settings" }
     ].map(({ mode, icon: Icon2, title }) => {
       const isActive = currentValue.mode === mode;
       return /* @__PURE__ */ jsxs(
@@ -4073,9 +4094,9 @@ function WidthFieldInner({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground flex-shrink-0", children: "Align:" }),
         /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [
-          { alignment: "left", icon: IconLayoutAlignLeft, title: "Align left" },
-          { alignment: "center", icon: IconLayoutAlignCenter, title: "Align center" },
-          { alignment: "right", icon: IconLayoutAlignRight, title: "Align right" }
+          { alignment: "left", icon: AlignLeft, title: "Align left" },
+          { alignment: "center", icon: AlignCenter, title: "Align center" },
+          { alignment: "right", icon: AlignRight, title: "Align right" }
         ].map(({ alignment, icon: Icon2, title }) => {
           const isActive = currentValue.alignment === alignment;
           const isDisabled = readOnly || currentValue.mode === "full";
@@ -4382,14 +4403,14 @@ function DimensionsFieldInner({
     });
   }, [advancedMode, currentValue, onChange]);
   const modeConfig = [
-    { mode: "full", icon: IconArrowsHorizontal, label: "Full", title: "Full width (100%)" },
-    { mode: "contained", icon: IconContainer, label: "Contain", title: "Contained (centered with max-width)" },
-    { mode: "custom", icon: IconAdjustments, label: "Custom", title: "Custom width settings" }
+    { mode: "full", icon: MoveHorizontal, label: "Full", title: "Full width (100%)" },
+    { mode: "contained", icon: Square, label: "Contain", title: "Contained (centered with max-width)" },
+    { mode: "custom", icon: SlidersHorizontal, label: "Custom", title: "Custom width settings" }
   ];
   const alignmentConfig = [
-    { alignment: "left", icon: IconLayoutAlignLeft, title: "Align left" },
-    { alignment: "center", icon: IconLayoutAlignCenter, title: "Align center" },
-    { alignment: "right", icon: IconLayoutAlignRight, title: "Align right" }
+    { alignment: "left", icon: AlignStartHorizontal, title: "Align left" },
+    { alignment: "center", icon: AlignCenterHorizontal, title: "Align center" },
+    { alignment: "right", icon: AlignEndHorizontal, title: "Align right" }
   ];
   const showWidthControls = currentValue.mode !== "full";
   showHeightControls && (advancedMode || currentValue.minHeight?.enabled || currentValue.maxHeight?.enabled);
@@ -4405,7 +4426,7 @@ function DimensionsFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -4608,10 +4629,10 @@ function DimensionsFieldInner({
         disabled: readOnly,
         className: "w-full text-xs text-muted-foreground hover:text-foreground",
         children: advancedMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(IconChevronUp, { className: "h-3.5 w-3.5 mr-1" }),
+          /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5 mr-1" }),
           "Hide Advanced"
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3.5 w-3.5 mr-1" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 mr-1" }),
           "Show Advanced"
         ] })
       }
@@ -4666,7 +4687,7 @@ function LockedTextField({
             transition: "all 0.15s ease"
           },
           title: isLocked ? "Click to unlock" : "Click to lock",
-          children: isLocked ? /* @__PURE__ */ jsx(IconLock, { size: 14 }) : /* @__PURE__ */ jsx(IconLockOpen, { size: 14 })
+          children: isLocked ? /* @__PURE__ */ jsx(Lock, { size: 14 }) : /* @__PURE__ */ jsx(Unlock, { size: 14 })
         }
       )
     ] }),
@@ -4695,7 +4716,7 @@ function LockedTextField({
         }
       ),
       isLocked && /* @__PURE__ */ jsx(
-        IconLock,
+        Lock,
         {
           size: 14,
           style: {
@@ -4750,7 +4771,7 @@ function LockedRadioField({
             transition: "all 0.15s ease"
           },
           title: isLocked ? "Click to unlock" : "Click to lock",
-          children: isLocked ? /* @__PURE__ */ jsx(IconLock, { size: 14 }) : /* @__PURE__ */ jsx(IconLockOpen, { size: 14 })
+          children: isLocked ? /* @__PURE__ */ jsx(Lock, { size: 14 }) : /* @__PURE__ */ jsx(Unlock, { size: 14 })
         }
       )
     ] }),
@@ -4862,9 +4883,9 @@ function AlignmentFieldInner({
     onChange(null);
   }, [onChange]);
   const alignments = [
-    { value: "left", icon: IconLayoutAlignLeft, title: "Align left" },
-    { value: "center", icon: IconLayoutAlignCenter, title: "Align center" },
-    { value: "right", icon: IconLayoutAlignRight, title: "Align right" }
+    { value: "left", icon: AlignLeft, title: "Align left" },
+    { value: "center", icon: AlignCenter, title: "Align center" },
+    { value: "right", icon: AlignRight, title: "Align right" }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -4878,7 +4899,7 @@ function AlignmentFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -4936,11 +4957,11 @@ function JustifyContentFieldInner({
     onChange(null);
   }, [onChange]);
   const options = [
-    { value: "flex-start", icon: IconLayoutAlignLeft, title: "Start" },
-    { value: "center", icon: IconLayoutAlignCenter, title: "Center" },
-    { value: "flex-end", icon: IconLayoutAlignRight, title: "End" },
-    { value: "space-between", icon: IconLayoutDistributeHorizontal, title: "Space Between" },
-    { value: "space-around", icon: IconSpacingHorizontal, title: "Space Around" }
+    { value: "flex-start", icon: AlignLeft, title: "Start" },
+    { value: "center", icon: AlignCenter, title: "Center" },
+    { value: "flex-end", icon: AlignRight, title: "End" },
+    { value: "space-between", icon: AlignHorizontalDistributeCenter, title: "Space Between" },
+    { value: "space-around", icon: GripHorizontal, title: "Space Around" }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -4954,7 +4975,7 @@ function JustifyContentFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -4996,10 +5017,10 @@ function AlignItemsFieldInner({
     onChange(null);
   }, [onChange]);
   const options = [
-    { value: "flex-start", icon: IconLayoutAlignTop, title: "Start" },
-    { value: "center", icon: IconLayoutAlignMiddle, title: "Center" },
-    { value: "flex-end", icon: IconLayoutAlignBottom, title: "End" },
-    { value: "stretch", icon: IconArrowsVertical, title: "Stretch" }
+    { value: "flex-start", icon: AlignStartVertical, title: "Start" },
+    { value: "center", icon: AlignCenterVertical, title: "Center" },
+    { value: "flex-end", icon: AlignEndVertical, title: "End" },
+    { value: "stretch", icon: MoveVertical, title: "Stretch" }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -5013,7 +5034,7 @@ function AlignItemsFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -5087,9 +5108,9 @@ function VerticalAlignmentFieldInner({
     onChange(null);
   }, [onChange]);
   const options = [
-    { value: "flex-start", icon: IconLayoutAlignTop, title: "Top" },
-    { value: "center", icon: IconLayoutAlignMiddle, title: "Center" },
-    { value: "flex-end", icon: IconLayoutAlignBottom, title: "Bottom" }
+    { value: "flex-start", icon: AlignStartVertical, title: "Top" },
+    { value: "center", icon: AlignCenterVertical, title: "Center" },
+    { value: "flex-end", icon: AlignEndVertical, title: "Bottom" }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -5103,7 +5124,7 @@ function VerticalAlignmentFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -5208,7 +5229,7 @@ function SizeFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -5485,7 +5506,7 @@ function GradientStopEditorInner({
           onClick: () => onDelete(index),
           className: "p-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded flex-shrink-0",
           title: "Remove stop",
-          children: /* @__PURE__ */ jsx(IconTrash, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -5699,7 +5720,7 @@ function GradientEditorInner({ value, onChange, readOnly }) {
             onClick: handleAddStop,
             className: "h-6 text-xs px-2",
             children: [
-              /* @__PURE__ */ jsx(IconPlus, { className: "w-3 h-3 mr-1" }),
+              /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
               "Add Stop"
             ]
           }
@@ -6188,7 +6209,7 @@ function BackgroundFieldInner({
           onClick: handleClear,
           title: "Clear background",
           className: "flex items-center justify-center w-6 h-6 rounded border-none bg-transparent cursor-pointer text-muted-foreground hover:bg-accent hover:text-destructive",
-          children: /* @__PURE__ */ jsx(IconX, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -6336,11 +6357,11 @@ function createBackgroundField(config = {}) {
   };
 }
 var BREAKPOINT_ICONS = {
-  base: IconDevices,
-  sm: IconDeviceMobile,
-  md: IconDeviceTablet,
-  lg: IconDeviceLaptop,
-  xl: IconDeviceDesktop
+  xs: Smartphone,
+  sm: Smartphone,
+  md: Tablet,
+  lg: Laptop,
+  xl: Monitor
 };
 function BreakpointTab({
   breakpoint,
@@ -6380,17 +6401,17 @@ function ResponsiveFieldInner({
   renderInnerField,
   defaultValue
 }) {
-  const [activeBreakpoint, setActiveBreakpoint] = useState("base");
+  const [activeBreakpoint, setActiveBreakpoint] = useState("xs");
   const getCurrentValue = useCallback(() => {
     if (!value) return defaultValue ?? null;
-    if (activeBreakpoint === "base") {
-      return value.base ?? defaultValue ?? null;
+    if (activeBreakpoint === "xs") {
+      return value.xs ?? defaultValue ?? null;
     }
     const override = value[activeBreakpoint];
     if (override !== void 0) {
       return override;
     }
-    const breakpointOrder = ["xl", "lg", "md", "sm", "base"];
+    const breakpointOrder = ["xl", "lg", "md", "sm", "xs"];
     const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
     for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
       const bp = breakpointOrder[i];
@@ -6404,18 +6425,18 @@ function ResponsiveFieldInner({
   const hasOverride = useCallback(
     (breakpoint) => {
       if (!value) return false;
-      if (breakpoint === "base") return value.base !== void 0;
+      if (breakpoint === "xs") return value.xs !== void 0;
       return value[breakpoint] !== void 0;
     },
     [value]
   );
   const handleInnerChange = useCallback(
     (newValue) => {
-      if (activeBreakpoint === "base") {
+      if (activeBreakpoint === "xs") {
         if (newValue === null && defaultValue !== void 0) {
-          onChange({ ...value, base: defaultValue });
+          onChange({ ...value, xs: defaultValue });
         } else if (newValue !== null) {
-          onChange({ ...value, base: newValue });
+          onChange({ ...value, xs: newValue });
         }
       } else {
         if (newValue === null) {
@@ -6423,11 +6444,11 @@ function ResponsiveFieldInner({
           delete newResponsive[activeBreakpoint];
           onChange(newResponsive);
         } else {
-          const base = value?.base ?? defaultValue;
-          if (base === void 0) return;
+          const xs = value?.xs ?? defaultValue;
+          if (xs === void 0) return;
           onChange({
             ...value,
-            base,
+            xs,
             [activeBreakpoint]: newValue
           });
         }
@@ -6436,7 +6457,7 @@ function ResponsiveFieldInner({
     [value, onChange, activeBreakpoint, defaultValue]
   );
   const handleClearOverride = useCallback(() => {
-    if (activeBreakpoint === "base" || !value) return;
+    if (activeBreakpoint === "xs" || !value) return;
     const newResponsive = { ...value };
     delete newResponsive[activeBreakpoint];
     onChange(newResponsive);
@@ -6445,7 +6466,7 @@ function ResponsiveFieldInner({
     onChange(null);
   }, [onChange]);
   const currentValue = getCurrentValue();
-  const isOverrideBreakpoint = activeBreakpoint !== "base";
+  const isOverrideBreakpoint = activeBreakpoint !== "xs";
   const currentHasOverride = hasOverride(activeBreakpoint);
   const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-3", children: [
@@ -6467,7 +6488,7 @@ function ResponsiveFieldInner({
           onClick: handleClearAll,
           className: "text-muted-foreground hover:text-destructive",
           title: "Clear all values",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -6485,10 +6506,10 @@ function ResponsiveFieldInner({
       bp.key
     )) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { children: activeBreakpoint === "base" ? "Default for all screen sizes" : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: activeBreakpoint === "xs" ? "Extra small screens (0-639px)" : /* @__PURE__ */ jsxs(Fragment, { children: [
         BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth,
         "px and up",
-        !currentHasOverride && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from base)" })
+        !currentHasOverride && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from xs)" })
       ] }) }),
       isOverrideBreakpoint && currentHasOverride && !readOnly && /* @__PURE__ */ jsx(
         Button,
@@ -6541,18 +6562,17 @@ function createResponsiveField(config) {
   };
 }
 var BREAKPOINT_ICONS2 = {
-  base: IconDevices,
-  sm: IconDeviceMobile,
-  md: IconDeviceTablet,
-  lg: IconDeviceLaptop,
-  xl: IconDeviceDesktop
+  xs: Smartphone,
+  sm: Smartphone,
+  md: Tablet,
+  lg: Laptop,
+  xl: Monitor
 };
 function VisibilityToggle({
   breakpoint,
   label,
   minWidth,
   isVisible,
-  isInherited,
   onClick,
   disabled
 }) {
@@ -6563,18 +6583,16 @@ function VisibilityToggle({
       type: "button",
       onClick,
       disabled,
-      title: `${label}${minWidth ? ` (${minWidth}px+)` : ""}: ${isVisible ? "Visible" : "Hidden"}${isInherited ? " (inherited)" : ""}`,
+      title: `${label}${minWidth ? ` (${minWidth}px+)` : ""}: ${isVisible ? "Visible" : "Hidden"}`,
       className: cn2(
         "relative flex flex-col items-center justify-center gap-0.5 p-2 rounded-md transition-all flex-1 min-w-[52px]",
-        isVisible ? "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20 border border-emerald-500/30" : "bg-red-500/10 text-red-500 hover:bg-red-500/20 border border-red-500/30",
-        isInherited && "opacity-60",
+        isVisible ? "bg-emerald-500/15 text-emerald-600 hover:bg-emerald-500/25 border border-emerald-500/40" : "bg-red-500/15 text-red-500 hover:bg-red-500/25 border border-red-500/40",
         disabled && "opacity-50 cursor-not-allowed"
       ),
       children: [
         /* @__PURE__ */ jsx(DeviceIcon, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium", children: label }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1", children: isVisible ? /* @__PURE__ */ jsx(IconEye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(IconEyeOff, { className: "h-3 w-3" }) }),
-        isInherited && /* @__PURE__ */ jsx("span", { className: "absolute -bottom-0.5 left-1/2 -translate-x-1/2 text-[8px] text-muted-foreground", children: "\u2022" })
+        /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1", children: isVisible ? /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(EyeOff, { className: "h-3 w-3" }) })
       ]
     }
   );
@@ -6585,85 +6603,46 @@ function ResponsiveVisibilityFieldInner({
   label,
   readOnly
 }) {
-  const getEffectiveVisibility = useCallback(
+  const getVisibility = useCallback(
     (breakpoint) => {
       const val = value ?? DEFAULT_VISIBILITY;
-      if (breakpoint === "base") {
-        return { visible: val.base, inherited: false };
-      }
-      const explicitValue = val[breakpoint];
-      if (explicitValue !== void 0) {
-        return { visible: explicitValue, inherited: false };
-      }
-      const breakpointOrder = ["xl", "lg", "md", "sm", "base"];
-      const currentIndex = breakpointOrder.indexOf(breakpoint);
-      for (let i = currentIndex + 1; i < breakpointOrder.length; i++) {
-        const bp = breakpointOrder[i];
-        const bpValue = val[bp];
-        if (bpValue !== void 0) {
-          return { visible: bpValue, inherited: true };
-        }
-      }
-      return { visible: val.base, inherited: true };
+      return val[breakpoint] ?? true;
     },
     [value]
   );
   const toggleVisibility = useCallback(
     (breakpoint) => {
-      const current = getEffectiveVisibility(breakpoint);
-      const newVisible = !current.visible;
-      if (breakpoint === "base") {
-        onChange({
-          ...value ?? DEFAULT_VISIBILITY,
-          base: newVisible
-        });
-      } else {
-        const newValue = {
-          ...value ?? DEFAULT_VISIBILITY,
-          [breakpoint]: newVisible
-        };
-        onChange(newValue);
-      }
+      const currentVisible = getVisibility(breakpoint);
+      const newValue = {
+        ...value ?? DEFAULT_VISIBILITY,
+        [breakpoint]: !currentVisible
+      };
+      onChange(newValue);
     },
-    [value, onChange, getEffectiveVisibility]
+    [value, onChange, getVisibility]
   );
-  const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
-  const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => {
-    const { visible } = getEffectiveVisibility(bp.key);
-    return !visible;
-  });
+  const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => !getVisibility(bp.key));
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
-        overrideCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: [
-          overrideCount,
-          " override",
-          overrideCount !== 1 ? "s" : ""
-        ] })
-      ] }),
+      label && /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
       hasHiddenBreakpoints && /* @__PURE__ */ jsxs("span", { className: "text-xs text-amber-600 flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(IconEyeOff, { className: "h-3 w-3" }),
-        "Hidden"
+        /* @__PURE__ */ jsx(EyeOff, { className: "h-3 w-3" }),
+        "Partially hidden"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: BREAKPOINTS.map((bp) => {
-      const { visible, inherited } = getEffectiveVisibility(bp.key);
-      return /* @__PURE__ */ jsx(
-        VisibilityToggle,
-        {
-          breakpoint: bp.key,
-          label: bp.label,
-          minWidth: bp.minWidth,
-          isVisible: visible,
-          isInherited: inherited,
-          onClick: () => toggleVisibility(bp.key),
-          disabled: readOnly
-        },
-        bp.key
-      );
-    }) }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Click to toggle visibility. Changes cascade to larger breakpoints." })
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: BREAKPOINTS.map((bp) => /* @__PURE__ */ jsx(
+      VisibilityToggle,
+      {
+        breakpoint: bp.key,
+        label: bp.label,
+        minWidth: bp.minWidth,
+        isVisible: getVisibility(bp.key),
+        onClick: () => toggleVisibility(bp.key),
+        disabled: readOnly
+      },
+      bp.key
+    )) }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Toggle visibility per screen size. Each breakpoint is independent." })
   ] });
 }
 var ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner);
@@ -6713,7 +6692,7 @@ function CollapsibleSection({ title, defaultOpen = false, children }) {
         className: "w-full flex items-center justify-between px-3 py-2 bg-muted/30 hover:bg-muted/50 transition-colors",
         children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }),
-          isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(IconChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
@@ -6847,7 +6826,7 @@ function AnimationFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -7273,7 +7252,7 @@ function TransformFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset transform",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),
@@ -7287,7 +7266,7 @@ function TransformFieldInner({
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3 bg-muted/30 rounded-md", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-        /* @__PURE__ */ jsx(IconRotate, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(RotateCw, { className: "h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Rotate" })
       ] }),
       /* @__PURE__ */ jsx(
@@ -7305,7 +7284,7 @@ function TransformFieldInner({
     /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3 bg-muted/30 rounded-md", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconResize, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Scale" })
         ] }),
         !readOnly && /* @__PURE__ */ jsx(
@@ -7317,7 +7296,7 @@ function TransformFieldInner({
             onClick: handleScaleLockToggle,
             className: "h-6 w-6",
             title: currentValue.scaleLocked ? "Click to unlink X and Y scale" : "Click to link X and Y scale",
-            children: currentValue.scaleLocked ? /* @__PURE__ */ jsx(IconLink, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(IconLinkOff, { className: "h-3 w-3" })
+            children: currentValue.scaleLocked ? /* @__PURE__ */ jsx(Link, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Unlink, { className: "h-3 w-3" })
           }
         )
       ] }),
@@ -7449,10 +7428,10 @@ function TransformFieldInner({
           className: "w-full flex items-center justify-between p-3 bg-muted/30 hover:bg-muted/50 transition-colors",
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Icon3dCubeSphere, { className: "h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(Box, { className: "h-4 w-4 text-muted-foreground" }),
               /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium cursor-pointer", children: "3D Transforms" })
             ] }),
-            show3D ? /* @__PURE__ */ jsx(IconChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(IconChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+            show3D ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
           ]
         }
       ),