@delmaredigital/payload-puck 0.1.0 → 0.1.1

package/dist/config/index.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var AnimatedWrapper = require('../AnimatedWrapper');
 var React = require('react');
-var iconsReact = require('@tabler/icons-react');
+var lucideReact = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -474,7 +474,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 },
@@ -482,7 +482,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()}`);
@@ -508,7 +508,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);
@@ -524,24 +524,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");
@@ -1462,7 +1479,7 @@ function SizeFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),