@orion-studios/payload-studio 0.6.0-beta.172 → 0.6.0-beta.174

package/dist/admin/index.mjs

@@ -7,14 +7,14 @@ import {
   socialMediaConnectionsField,
   themePreferenceField,
   withTooltips
-} from "../chunk-KHK6RTGC.mjs";
+} from "../chunk-JC3UV74N.mjs";
+import "../chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "../chunk-ZTXJG4K5.mjs";
-import "../chunk-W2UOCJDX.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,

package/dist/builder-v2/client.js

@@ -1776,7 +1776,26 @@ var quickVerticalAlignStyles = {
 var negativePaddingCss = `
   .orion-builder-v2-negative-padding {
     display: flow-root;
+    isolation: isolate;
     overflow: visible;
+    position: relative;
+  }
+
+  .orion-builder-v2-negative-padding.is-orion-negative-padding-bottom:not(.is-orion-negative-padding-top),
+  .orion-builder-v2-negative-padding.is-orion-negative-padding-right:not(.is-orion-negative-padding-left) {
+    overflow: hidden;
+  }
+
+  .orion-builder-v2-negative-padding::before {
+    background: var(--orion-negative-padding-background, transparent);
+    content: "";
+    inset: calc(-1 * var(--orion-negative-padding-top, 0px))
+      calc(-1 * var(--orion-negative-padding-right, 0px))
+      calc(-1 * var(--orion-negative-padding-bottom, 0px))
+      calc(-1 * var(--orion-negative-padding-left, 0px));
+    pointer-events: none;
+    position: absolute;
+    z-index: -1;
   }
 
   .orion-builder-v2-negative-padding > * {
@@ -1785,7 +1804,9 @@ var negativePaddingCss = `
     margin-bottom: var(--orion-negative-padding-bottom, 0px) !important;
     margin-left: var(--orion-negative-padding-left, 0px) !important;
     max-width: none !important;
+    position: relative;
     width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
+    z-index: 1;
   }
 `;
 var canvasSelectionCss = `
@@ -2002,6 +2023,8 @@ var negativePaddingSides = ["top", "bottom", "left", "right"];
 var negativePaddingSideFromProperty = (property) => property.startsWith("padding-") ? property.replace(/^padding-/, "") : "";
 var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${side}`;
 var negativePaddingVariableForSide = (side) => `--orion-negative-padding-${side}`;
+var negativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
+var negativePaddingBackgroundVariable = "--orion-negative-padding-background";
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2591,11 +2614,21 @@ function GrapesPageEditor({
       if (side) {
         selected.removeStyle?.(negativePaddingVariableForSide(side));
         selected.removeAttributes?.(negativePaddingAttributeForSide(side));
+        selected.removeClass?.(`is-orion-negative-padding-${side}`);
         const attrs = selected.getAttributes?.() || {};
         const hasOtherNegativePadding = negativePaddingSides.some(
           (paddingSide) => paddingSide !== side && Boolean(attrs[negativePaddingAttributeForSide(paddingSide)])
         );
         if (!hasOtherNegativePadding) {
+          const negativePaddingBackground = firstString(
+            attrs[negativePaddingBackgroundAttribute],
+            selected.getStyle?.()[negativePaddingBackgroundVariable]
+          );
+          if (negativePaddingBackground) {
+            selected.addStyle?.({ "background-color": negativePaddingBackground });
+          }
+          selected.removeStyle?.(negativePaddingBackgroundVariable);
+          selected.removeAttributes?.(negativePaddingBackgroundAttribute);
           selected.removeClass?.("orion-builder-v2-negative-padding");
         }
       }
@@ -2623,9 +2656,23 @@ function GrapesPageEditor({
     if (isPadding) {
       const side = negativePaddingSideFromProperty(property);
       const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
+      const currentStyle = selected.getStyle?.() || {};
+      const backgroundColor = firstString(
+        currentStyle[negativePaddingBackgroundVariable],
+        selected.getAttributes?.()[negativePaddingBackgroundAttribute],
+        getStyleColorValue(currentStyle, "background-color")
+      );
       selected.addClass?.("orion-builder-v2-negative-padding");
-      selected.addAttributes?.({ [negativePaddingAttributeForSide(side)]: negativeStyleValue });
+      selected.addClass?.(`is-orion-negative-padding-${side}`);
+      selected.addAttributes?.({
+        ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
+        [negativePaddingAttributeForSide(side)]: negativeStyleValue
+      });
       selected.addStyle?.({
+        ...backgroundColor ? {
+          [negativePaddingBackgroundVariable]: backgroundColor,
+          "background-color": "transparent"
+        } : {},
         [negativePaddingVariableForSide(side)]: negativeStyleValue,
         [property]: "0px"
       });

package/dist/builder-v2/client.mjs

@@ -1652,7 +1652,26 @@ var quickVerticalAlignStyles = {
 var negativePaddingCss = `
   .orion-builder-v2-negative-padding {
     display: flow-root;
+    isolation: isolate;
     overflow: visible;
+    position: relative;
+  }
+
+  .orion-builder-v2-negative-padding.is-orion-negative-padding-bottom:not(.is-orion-negative-padding-top),
+  .orion-builder-v2-negative-padding.is-orion-negative-padding-right:not(.is-orion-negative-padding-left) {
+    overflow: hidden;
+  }
+
+  .orion-builder-v2-negative-padding::before {
+    background: var(--orion-negative-padding-background, transparent);
+    content: "";
+    inset: calc(-1 * var(--orion-negative-padding-top, 0px))
+      calc(-1 * var(--orion-negative-padding-right, 0px))
+      calc(-1 * var(--orion-negative-padding-bottom, 0px))
+      calc(-1 * var(--orion-negative-padding-left, 0px));
+    pointer-events: none;
+    position: absolute;
+    z-index: -1;
   }
 
   .orion-builder-v2-negative-padding > * {
@@ -1661,7 +1680,9 @@ var negativePaddingCss = `
     margin-bottom: var(--orion-negative-padding-bottom, 0px) !important;
     margin-left: var(--orion-negative-padding-left, 0px) !important;
     max-width: none !important;
+    position: relative;
     width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
+    z-index: 1;
   }
 `;
 var canvasSelectionCss = `
@@ -1878,6 +1899,8 @@ var negativePaddingSides = ["top", "bottom", "left", "right"];
 var negativePaddingSideFromProperty = (property) => property.startsWith("padding-") ? property.replace(/^padding-/, "") : "";
 var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${side}`;
 var negativePaddingVariableForSide = (side) => `--orion-negative-padding-${side}`;
+var negativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
+var negativePaddingBackgroundVariable = "--orion-negative-padding-background";
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2467,11 +2490,21 @@ function GrapesPageEditor({
       if (side) {
         selected.removeStyle?.(negativePaddingVariableForSide(side));
         selected.removeAttributes?.(negativePaddingAttributeForSide(side));
+        selected.removeClass?.(`is-orion-negative-padding-${side}`);
         const attrs = selected.getAttributes?.() || {};
         const hasOtherNegativePadding = negativePaddingSides.some(
           (paddingSide) => paddingSide !== side && Boolean(attrs[negativePaddingAttributeForSide(paddingSide)])
         );
         if (!hasOtherNegativePadding) {
+          const negativePaddingBackground = firstString(
+            attrs[negativePaddingBackgroundAttribute],
+            selected.getStyle?.()[negativePaddingBackgroundVariable]
+          );
+          if (negativePaddingBackground) {
+            selected.addStyle?.({ "background-color": negativePaddingBackground });
+          }
+          selected.removeStyle?.(negativePaddingBackgroundVariable);
+          selected.removeAttributes?.(negativePaddingBackgroundAttribute);
           selected.removeClass?.("orion-builder-v2-negative-padding");
         }
       }
@@ -2499,9 +2532,23 @@ function GrapesPageEditor({
     if (isPadding) {
       const side = negativePaddingSideFromProperty(property);
       const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
+      const currentStyle = selected.getStyle?.() || {};
+      const backgroundColor = firstString(
+        currentStyle[negativePaddingBackgroundVariable],
+        selected.getAttributes?.()[negativePaddingBackgroundAttribute],
+        getStyleColorValue(currentStyle, "background-color")
+      );
       selected.addClass?.("orion-builder-v2-negative-padding");
-      selected.addAttributes?.({ [negativePaddingAttributeForSide(side)]: negativeStyleValue });
+      selected.addClass?.(`is-orion-negative-padding-${side}`);
+      selected.addAttributes?.({
+        ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
+        [negativePaddingAttributeForSide(side)]: negativeStyleValue
+      });
       selected.addStyle?.({
+        ...backgroundColor ? {
+          [negativePaddingBackgroundVariable]: backgroundColor,
+          "background-color": "transparent"
+        } : {},
         [negativePaddingVariableForSide(side)]: negativeStyleValue,
         [property]: "0px"
       });

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   admin_exports
-} from "./chunk-KHK6RTGC.mjs";
+} from "./chunk-JC3UV74N.mjs";
+import {
+  blocks_exports
+} from "./chunk-JQAHXYAM.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
 import {
   studio_pages_exports
-} from "./chunk-7HME6R2V.mjs";
+} from "./chunk-NGLIA2OE.mjs";
+import "./chunk-OQSEJXC4.mjs";
 import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
-import "./chunk-OQSEJXC4.mjs";
-import {
-  admin_app_exports
-} from "./chunk-RKTIFEUY.mjs";
-import "./chunk-W2UOCJDX.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/dist/studio-pages/index.mjs

@@ -7,7 +7,8 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-7HME6R2V.mjs";
+} from "../chunk-NGLIA2OE.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -15,7 +16,6 @@ import {
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
 import "../chunk-ADIIWIYL.mjs";
-import "../chunk-OQSEJXC4.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.172",
+  "version": "0.6.0-beta.174",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package/dist/{chunk-KHK6RTGC.mjs → chunk-JC3UV74N.mjs}

@@ -1,12 +1,12 @@
+import {
+  adminNavIcons
+} from "./chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "./chunk-ZTXJG4K5.mjs";
-import {
-  adminNavIcons
-} from "./chunk-W2UOCJDX.mjs";
 import {
   __export,
   __require

package/dist/{chunk-7HME6R2V.mjs → chunk-NGLIA2OE.mjs}

@@ -1,3 +1,6 @@
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -11,9 +14,6 @@ import {
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";