@delmaredigital/payload-puck 0.1.0 → 0.1.2

package/dist/editor/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { IconArrowLeft, IconPointer, IconHandClick, IconCheck, IconAlertTriangle, IconEye, IconExternalLink, IconLoader2, IconDeviceFloppy, IconUpload, IconX, IconHistory, IconChevronDown, IconRotate } from '@tabler/icons-react';
+import { ArrowLeft, MousePointer, MousePointerClick, Check, AlertTriangle, Eye, ExternalLink, Loader2, Save, Upload, X, History, ChevronDown, RotateCcw } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { memo, useCallback, useMemo, useEffect, useState, useRef, createContext, createElement } from 'react';
@@ -28,7 +28,7 @@ var __export = (target, all) => {
 };
 function LoadingState({ message = "Loading editor..." }) {
   return /* @__PURE__ */ jsx("div", { className: "h-screen flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-    /* @__PURE__ */ jsx(IconLoader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }),
+    /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }),
     /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: message })
   ] }) });
 }
@@ -156,9 +156,9 @@ var init_VersionHistory = __esm({
             disabled,
             className: `${secondaryBtn} disabled:opacity-50 disabled:cursor-not-allowed`,
             children: [
-              /* @__PURE__ */ jsx(IconHistory, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsx(History, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "History",
-              /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 ml-1 flex-shrink-0" })
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 ml-1 flex-shrink-0" })
             ]
           }
         ),
@@ -179,7 +179,7 @@ var init_VersionHistory = __esm({
                         type: "button",
                         onClick: () => setIsOpen(false),
                         className: "text-gray-400 hover:text-gray-600 transition-colors p-1",
-                        children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+                        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
                       }
                     )
                   ]
@@ -189,7 +189,7 @@ var init_VersionHistory = __esm({
                 "div",
                 {
                   className: "flex items-center justify-center p-8",
-                  children: /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin text-gray-400" })
+                  children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" })
                 }
               ) : error ? /* @__PURE__ */ jsx(
                 "div",
@@ -256,12 +256,12 @@ var init_VersionHistory = __esm({
                         disabled: isRestoring,
                         className: "text-xs font-medium text-blue-600 hover:text-blue-800 transition-colors disabled:opacity-50 flex items-center gap-1 px-2 py-1 flex-shrink-0",
                         children: [
-                          isRestoring ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(IconRotate, { className: "h-3 w-3" }),
+                          isRestoring ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
                           "Restore"
                         ]
                       }
                     ),
-                    index === 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-400 flex-shrink-0", children: /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4" }) })
+                    index === 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-400 flex-shrink-0", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
                   ]
                 },
                 version.id
@@ -340,7 +340,7 @@ var init_HeaderActions = __esm({
             onClick: onBack,
             className: cn(btnBase, "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"),
             children: [
-              /* @__PURE__ */ jsx(IconArrowLeft, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Back"
             ]
           }
@@ -380,7 +380,7 @@ var init_HeaderActions = __esm({
                 !isInteractive ? "bg-blue-500 text-white border-blue-500" : "bg-gray-100 text-gray-500 border-gray-200"
               ),
               children: [
-                /* @__PURE__ */ jsx(IconPointer, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx(MousePointer, { className: "h-3.5 w-3.5" }),
                 "Edit"
               ]
             }
@@ -395,14 +395,14 @@ var init_HeaderActions = __esm({
                 isInteractive ? "bg-blue-500 text-white border-blue-500" : "bg-gray-100 text-gray-500 border-gray-200"
               ),
               children: [
-                /* @__PURE__ */ jsx(IconHandClick, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx(MousePointerClick, { className: "h-3.5 w-3.5" }),
                 "Interactive"
               ]
             }
           )
         ] }),
         lastSaved && !saveError && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-1 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx(IconCheck, { className: "h-3 w-3 flex-shrink-0" }),
+          /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 flex-shrink-0" }),
           "Saved ",
           lastSaved.toLocaleTimeString()
         ] }),
@@ -415,7 +415,7 @@ var init_HeaderActions = __esm({
             },
             className: "flex items-center gap-1.5 px-2.5 py-1.5 bg-red-50 border border-red-200 rounded-md text-red-700 text-xs font-medium",
             children: [
-              /* @__PURE__ */ jsx(IconAlertTriangle, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
               "Error"
             ]
           }
@@ -432,7 +432,7 @@ var init_HeaderActions = __esm({
                 onClick: (e) => e.stopPropagation(),
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-red-50", children: [
-                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconAlertTriangle, { className: "h-5 w-5 text-red-600" }) }),
+                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-red-600" }) }),
                     /* @__PURE__ */ jsxs("div", { children: [
                       /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Save Failed" }),
                       /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Unable to save your changes" })
@@ -464,7 +464,7 @@ var init_HeaderActions = __esm({
               "px-3 py-1.5 bg-blue-600 text-white border border-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             children: [
-              /* @__PURE__ */ jsx(IconEye, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Preview"
             ]
           }
@@ -476,7 +476,7 @@ var init_HeaderActions = __esm({
             onClick: onPreview,
             className: cn(btnBase, "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"),
             children: [
-              /* @__PURE__ */ jsx(IconExternalLink, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "View"
             ]
           }
@@ -500,7 +500,7 @@ var init_HeaderActions = __esm({
               "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             children: [
-              isSaving ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(IconDeviceFloppy, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Save"
             ]
           }
@@ -516,7 +516,7 @@ var init_HeaderActions = __esm({
               "px-3 py-1.5 bg-blue-600 text-white border border-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             children: [
-              isSaving ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
               "Publish"
             ]
           }
@@ -851,7 +851,7 @@ function transformValueToCSS(transform) {
 }
 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()}`);
@@ -877,7 +877,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);
@@ -893,24 +893,41 @@ function responsiveValueToCSS(value, converter, uniqueId) {
 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");
@@ -1178,7 +1195,7 @@ var init_shared = __esm({
       baseline: "items-baseline"
     };
     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 },
@@ -1442,7 +1459,7 @@ var init_dialog = __esm({
           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" })
             ] })
           ]
@@ -1465,7 +1482,7 @@ var init_dialog = __esm({
             /* @__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" })
             ] })
           ]
@@ -2883,7 +2900,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" })
         }
       )
     ] }),
@@ -3411,7 +3428,7 @@ function AccordionItem({
         children: [
           /* @__PURE__ */ jsx("span", { children: item.title }),
           /* @__PURE__ */ jsx(
-            IconChevronDown,
+            ChevronDown,
             {
               className: cn2(
                 "h-4 w-4 shrink-0 transition-transform duration-200",
@@ -3761,7 +3778,7 @@ var init_PreviewModal = __esm({
                     className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 rounded-md transition-colors",
                     title: "Close preview (Esc)",
                     children: [
-                      /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                       "Close Preview"
                     ]
                   }
@@ -3774,7 +3791,7 @@ var init_PreviewModal = __esm({
                     className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors",
                     title: "Open published page in new tab",
                     children: [
-                      /* @__PURE__ */ jsx(IconExternalLink, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
                       "View Page"
                     ]
                   }
@@ -3797,7 +3814,7 @@ var init_PreviewModal = __esm({
                 onClick: (e) => e.stopPropagation(),
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-amber-50", children: [
-                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconAlertTriangle, { className: "h-5 w-5 text-amber-600" }) }),
+                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-amber-600" }) }),
                     /* @__PURE__ */ jsxs("div", { children: [
                       /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Navigate away?" }),
                       /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "This will close the preview" })

package/dist/fields/index.d.mts

@@ -1,5 +1,5 @@
-import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-DMAF1AcH.mjs';
-export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-DMAF1AcH.mjs';
+import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-DeNKN95N.mjs';
+export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-DeNKN95N.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { CustomField } from '@measured/puck';
@@ -437,7 +437,7 @@ declare function createBackgroundField(config?: {
  * ResponsiveField - Generic wrapper for breakpoint-specific field overrides
  *
  * This component wraps any existing field to provide responsive overrides
- * at different breakpoints (base, sm, md, lg, xl). It uses sparse storage,
+ * at different breakpoints (xs, sm, md, lg, xl). It uses sparse storage,
  * only storing values for breakpoints that have explicit overrides.
  */
 
@@ -452,7 +452,7 @@ interface ResponsiveFieldProps<T> {
         onChange: (v: T | null) => void;
         readOnly?: boolean;
     }) => React__default.ReactNode;
-    /** Default value for the base breakpoint */
+    /** Default value for the xs breakpoint */
     defaultValue?: T;
 }
 declare const ResponsiveField: <T>(props: ResponsiveFieldProps<T>) => React__default.ReactElement;

package/dist/fields/index.d.ts

@@ -1,5 +1,5 @@
-import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-DMAF1AcH.js';
-export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-DMAF1AcH.js';
+import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-DeNKN95N.js';
+export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-DeNKN95N.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { CustomField } from '@measured/puck';
@@ -437,7 +437,7 @@ declare function createBackgroundField(config?: {
  * ResponsiveField - Generic wrapper for breakpoint-specific field overrides
  *
  * This component wraps any existing field to provide responsive overrides
- * at different breakpoints (base, sm, md, lg, xl). It uses sparse storage,
+ * at different breakpoints (xs, sm, md, lg, xl). It uses sparse storage,
  * only storing values for breakpoints that have explicit overrides.
  */
 
@@ -452,7 +452,7 @@ interface ResponsiveFieldProps<T> {
         onChange: (v: T | null) => void;
         readOnly?: boolean;
     }) => React__default.ReactNode;
-    /** Default value for the base breakpoint */
+    /** Default value for the xs breakpoint */
     defaultValue?: T;
 }
 declare const ResponsiveField: <T>(props: ResponsiveFieldProps<T>) => React__default.ReactElement;