@wix/ricos 11.22.0 → 11.23.1

package/dist/es/ricos-common-plugins/layout/layouts-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ricos-common-plugins/layout/layouts.scss"],
-  "sourcesContent": ["var styleDataHash = '06f4c060';  \nexport const injectCss = (() => {\n  var css = `.fGySc{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:1}.gJbC5{left:0;pointer-events:none;position:absolute;right:0}.ZlH1B{background-color:var(--ricos-internal-layout-top-divider-color,currentColor);top:0;transform:scale(var(--ricos-internal-layout-top-divider-flip,1),-1)}.mbQfT{background-color:var(--ricos-internal-layout-bottom-divider-color,currentColor);bottom:0;transform:scaleX(var(--ricos-internal-layout-bottom-divider-flip,1))}._2hEBU{--ricos-internal-layout-cell-outline-color:#a8caff;background:var(--ricos-internal-layout-backdrop-gradient,var(--ricos-internal-layout-backdrop-color,transparent));outline:1.5px solid transparent;padding-bottom:var(--ricos-internal-layout-backdrop-padding-bottom,0);padding-top:var(--ricos-internal-layout-backdrop-padding-top,0);position:relative}._2hEBU.dyS04,._2hEBU:hover{outline-color:var(--ricos-internal-layout-cell-outline-color)}._2hEBU:hover .hIoPS ._1RZ4g{outline-color:var(--ricos-internal-layout-cell-outline-color)}._2hEBU:before{background-image:var(--ricos-internal-layout-backdrop-image-src);background-position:var(--ricos-internal-layout-backdrop-image-position);background-repeat:no-repeat;background-size:var(--ricos-internal-layout-backdrop-image-scaling);bottom:0;clip-path:inset(0);content:\"\";filter:var(--ricos-internal-layout-backdrop-image-blur,none);left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}._2hEBU:after{background:var(--ricos-internal-layout-backdrop-overlay,transparent);bottom:0;clip-path:inset(0);content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._2hEBU.Op-26{margin:0}*+._2hEBU{margin-top:20px}._2hEBU ._6JmnB{display:none}._2hEBU .k8eQt:has(.-kglS.E9VVp)+._6JmnB,._2hEBU .k8eQt:has(.-kglS.KUC93)+._6JmnB,._2hEBU .k8eQt:has(.-kglS.NC-1P)+._6JmnB,._2hEBU .k8eQt:has(.-kglS.OCcYb)+._6JmnB{display:block}._2hEBU ._1yrFl{align-items:center;background:#fff;border:1px solid #dfe5eb;border-radius:50%;bottom:-12px;box-shadow:0 2px 4px 0 rgba(23,25,28,.1);cursor:grab;display:flex;height:24px;justify-content:center;left:50%;padding:0;position:absolute;transform:translate(-50%,100%);width:24px;z-index:4}._2hEBU ._1yrFl:active{cursor:grabbing}._2hEBU.kQ1lV{margin-top:0}._2hEBU .hGb5r{background:#116dff;bottom:0;left:calc(var(--ricos-internal-layout-drop-cursor-position) - 1px);position:absolute;top:0;width:2px;z-index:5}._2hEBU .hGb5r:before{border:2px solid #116dff;border-radius:50%;content:\"\";height:6px;left:-2px;position:absolute;top:-5px;width:6px}._2hEBU.P9adx{outline-color:transparent!important}._2hEBU.P9adx:hover,._2hEBU.P9adx:hover .hIoPS ._1RZ4g{outline-color:transparent!important}._2hEBU.P9adx .TKPSi,._2hEBU.P9adx ._4Mqcv,._2hEBU.P9adx ._6JmnB{display:none!important}._2hEBU.AsoHU:has(.Oca1l){margin-bottom:40px}._2hEBU.AsoHU[data-breakout=normal]{--ricos-internal-paywall-divider-outer-start:var(--ricos-breakout-normal-padding-start,0);--ricos-internal-paywall-divider-outer-end:var(--ricos-breakout-normal-padding-end,0)}._2hEBU.AsoHU[data-breakout=fullWidth]{--ricos-internal-paywall-divider-outer-start:var(--ricos-breakout-full-width-padding-start,0);--ricos-internal-paywall-divider-outer-end:var(--ricos-breakout-full-width-padding-end,0)}._2hEBU.AsoHU .Oca1l{align-items:center;color:var(--ricos-text-color-low,#646464);display:flex;font-size:12px;font-weight:500;gap:6px;inset-inline-end:var(--ricos-internal-paywall-divider-outer-end,0);inset-inline-start:var(--ricos-internal-paywall-divider-outer-start,0);line-height:18px;margin-top:12px;padding-inline-end:var(--ricos-breakout-normal-padding-end,0);padding-inline-start:var(--ricos-breakout-normal-padding-start,0);pointer-events:none;position:absolute;text-transform:uppercase;top:100%;user-select:none}._2hEBU.AsoHU .Oca1l:after,._2hEBU.AsoHU .Oca1l:before{background:rgba(var(--ricos-text-color-tuple,33,33,33),.15);content:\"\";flex:1;height:1px}._2hEBU.AsoHU .z7g2X{align-items:center;display:flex;gap:3px;padding-inline-end:6px;white-space:nowrap}._2hEBU.AsoHU .I0xKQ{flex-shrink:0}.k8eQt{--ricos-internal-layout-display:grid;--ricos-internal-layout-handler-cursor:col-resize;--ricos-internal-layout-handler-color:#116dff;clear:both;margin:0 auto;position:relative;width:min(100%,var(--ricos-internal-resize-width,var(--ricos-internal-layout-width,initial)));z-index:2}.-kglS{display:var(--ricos-internal-layout-display,grid);flex-wrap:wrap;gap:var(--ricos-internal-layout-gap,20px);grid-template-columns:var(--ricos-internal-layout-grid-template,var(--ricos-internal-layout-column-template));justify-content:var(--ricos-internal-layout-justify-content,auto);position:relative;transition:grid-template-columns .1s ease-out;width:100%;will-change:grid-template-columns;z-index:2}[data-layout-banner] .-kglS{grid-template-columns:var(--ricos-internal-layout-column-template)!important}[data-layout-banner] .-kglS.KUC93{transition:none!important}.-kglS.L2WbI,.-kglS._37Xd6 .hIoPS{background:var(--ricos-internal-layout-background-gradient,var(--ricos-internal-layout-background-color,transparent));border:var(--ricos-internal-layout-border-width,0) solid var(--ricos-internal-layout-border-color);border-radius:var(--ricos-internal-layout-border-radius,0)}.-kglS.L2WbI:before,.-kglS._37Xd6 .hIoPS:before{background-image:var(--ricos-internal-layout-background-image-src);background-position:var(--ricos-internal-layout-background-image-position);background-repeat:no-repeat;background-size:var(--ricos-internal-layout-background-image-scaling);bottom:0;clip-path:inset(0 round var(--ricos-internal-layout-border-radius,0));content:\"\";filter:var(--ricos-internal-layout-background-image-blur,none);left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}.-kglS.L2WbI:after,.-kglS._37Xd6 .hIoPS:after{background:var(--ricos-internal-layout-background-overlay,transparent);bottom:0;clip-path:inset(0 round var(--ricos-internal-layout-border-radius,0));content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}@supports not (contain:inline-size){@media only screen and (max-width:480px){.-kglS{gap:min(20px,var(--ricos-internal-layout-gap,20px))}}}@container (width < 480px){.-kglS:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)){gap:min(20px,var(--ricos-internal-layout-gap,20px))}}@media (width < 480px){.-kglS:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .-kglS{gap:min(20px,var(--ricos-internal-layout-gap,20px))}}.-kglS.BVCHR{--ricos-internal-layout-display:flex;--ricos-internal-layout-justify-content:center;--ricos-internal-layout-cell-min-width:100%;--ricos-internal-layout-cell-height:auto}.-kglS.BVCHR .TKPSi{display:none}.-kglS.KUC93{transition:none!important}.-kglS.KUC93,.-kglS.KUC93 *{user-select:none!important}.-kglS.a227I{--ricos-layout-handler-color:#e62214;--ricos-layout-handler-cursor:e-resize}.-kglS.dJ3l8{--ricos-layout-handler-color:#e62214;--ricos-layout-handler-cursor:w-resize}.-kglS.KUC93 .hIoPS ._1RZ4g,.-kglS.NC-1P .hIoPS ._1RZ4g,.-kglS.OCcYb .hIoPS ._1RZ4g,.-kglS.ke7NY .hIoPS ._1RZ4g,.-kglS:focus .hIoPS ._1RZ4g,.-kglS:hover .hIoPS ._1RZ4g{outline-color:var(--ricos-internal-layout-cell-outline-color)}.-kglS .hIoPS{display:flex;flex-direction:column;height:var(--ricos-internal-layout-cell-height,100%);max-width:var(--ricos-internal-layout-cell-min-width,auto);min-width:min(100%,var(--ricos-internal-layout-cell-min-width,0));position:relative;z-index:3}.-kglS .hIoPS ._1RZ4g{display:flex;flex-direction:column;flex-grow:1;justify-content:var(--ricos-internal-layout-cell-vertical-alignment);outline:1.5px solid transparent;padding:var(--ricos-internal-layout-cell-padding-top,12px) var(--ricos-internal-layout-cell-padding-right,0) var(--ricos-internal-layout-cell-padding-bottom,12px) var(--ricos-internal-layout-cell-padding-left,0);position:relative;z-index:2}@supports not (contain:inline-size){@media only screen and (max-width:480px){.-kglS .hIoPS ._1RZ4g{padding:min(16px,var(--ricos-internal-layout-cell-padding-top,16px)) min(16px,var(--ricos-internal-layout-cell-padding-right,16px)) min(16px,var(--ricos-internal-layout-cell-padding-bottom,16px)) min(16px,var(--ricos-internal-layout-cell-padding-left,16px))}}}@container (width < 480px){.-kglS .hIoPS ._1RZ4g:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)){padding:min(16px,var(--ricos-internal-layout-cell-padding-top,16px)) min(16px,var(--ricos-internal-layout-cell-padding-right,16px)) min(16px,var(--ricos-internal-layout-cell-padding-bottom,16px)) min(16px,var(--ricos-internal-layout-cell-padding-left,16px))}}@media (width < 480px){.-kglS .hIoPS ._1RZ4g:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .-kglS .hIoPS ._1RZ4g{padding:min(16px,var(--ricos-internal-layout-cell-padding-top,16px)) min(16px,var(--ricos-internal-layout-cell-padding-right,16px)) min(16px,var(--ricos-internal-layout-cell-padding-bottom,16px)) min(16px,var(--ricos-internal-layout-cell-padding-left,16px))}}.-kglS .hIoPS ._4Mqcv{align-items:center;background:#fff;border-radius:18px;box-shadow:0 0 6px rgba(0,6,36,.05);box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#000624;cursor:grab;display:none;height:18px;justify-content:center;left:50%;margin:0;outline:1px solid rgba(0,6,36,.302);padding:0 12px;position:absolute;top:0;transform:translate(-50%,-50%);transition:color .15s ease,background-color .15s ease;width:42px;z-index:3}.-kglS .hIoPS ._4Mqcv:hover{background:#116dff;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.-kglS .hIoPS ._4Mqcv:active{background:#0f62e6;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.-kglS .hIoPS ._4Mqcv:active{cursor:grabbing}.-kglS .hIoPS ._4Mqcv:before{bottom:-1px;content:\"\";height:1px;left:0;position:absolute;right:0}.-kglS.OCcYb:after{background-color:rgba(17,109,255,.1);bottom:0;content:\"\";left:0;opacity:1;outline:1.5px solid #116dff;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.-kglS.OCcYb .hIoPS ._1RZ4g{outline-color:rgba(17,109,255,.2)}.-kglS.OCcYb .hIoPS ._4Mqcv{display:none}.-kglS .hIoPS.l1-S5{background-color:rgba(17,109,255,.1);z-index:4}.-kglS .hIoPS.l1-S5 ._1RZ4g{outline-color:#116dff}.-kglS .hIoPS.l1-S5 ._4Mqcv{background:#116dff;box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline:none;transition:color .15s ease,background-color .15s ease}.-kglS .hIoPS.l1-S5 ._4Mqcv:hover{background:#0f62e6;color:#fff}.-kglS .hIoPS.l1-S5 ._4Mqcv:active{background:#084ebd;color:#fff}.-kglS .hIoPS.l1-S5 .ricos-selection,.-kglS .hIoPS.l1-S5 ::selection,.-kglS.KUC93 .hIoPS .ricos-selection,.-kglS.KUC93 .hIoPS ::selection,.-kglS.OCcYb .hIoPS .ricos-selection,.-kglS.OCcYb .hIoPS ::selection{background-color:transparent!important}.-kglS.KUC93 .ricos-selection,.-kglS.OCcYb .ricos-selection{background-color:transparent!important}.-kglS.KUC93 ._4Mqcv,.-kglS.NC-1P ._4Mqcv,.-kglS.OCcYb ._4Mqcv,.-kglS.ke7NY ._4Mqcv{display:flex;z-index:4}.TKPSi{--ricos-internal-resize-handler-width:max(15px,var(--ricos-internal-layout-gap,0px));--ricos-internal-resize-handler-background-start:calc(50% - 1px);--ricos-internal-resize-handler-background-end:calc(50% + 1px);bottom:-1px;display:flex;left:calc(var(--ricos-internal-resize-handler-width)/2*-1);position:absolute!important;top:0;transform:translateX(max(-50%,var(--ricos-internal-layout-gap,0px)/2 * -1));width:var(--ricos-internal-resize-handler-width);z-index:3}.-kglS:not(.KUC93) .TKPSi:hover,.TKPSi:active{background:linear-gradient(90deg,transparent,transparent var(--ricos-internal-resize-handler-background-start),var(--ricos-internal-layout-handler-color) var(--ricos-internal-resize-handler-background-start),var(--ricos-internal-layout-handler-color) var(--ricos-internal-resize-handler-background-end),transparent var(--ricos-internal-resize-handler-background-end));cursor:var(--ricos-internal-layout-handler-cursor)}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"sectionDividerClip\": \"fGySc\",\n  \"sectionDivider\": \"gJbC5\",\n  \"sectionDividerTop\": \"ZlH1B\",\n  \"sectionDividerBottom\": \"mbQfT\",\n  \"layoutWrapper\": \"_2hEBU\",\n  \"withVerticalResize\": \"dyS04\",\n  \"cell\": \"hIoPS\",\n  \"cellContent\": \"_1RZ4g\",\n  \"breakoutMargin\": \"Op-26\",\n  \"layoutHandlerWrapper\": \"_6JmnB\",\n  \"layoutContainer\": \"k8eQt\",\n  \"layout\": \"-kglS\",\n  \"layoutSelected\": \"OCcYb\",\n  \"dragging\": \"E9VVp\",\n  \"resizing\": \"KUC93\",\n  \"inLayout\": \"NC-1P\",\n  \"layoutHandler\": \"_1yrFl\",\n  \"bannerMargin\": \"kQ1lV\",\n  \"dropCursor\": \"hGb5r\",\n  \"disabled\": \"P9adx\",\n  \"resizeHandler\": \"TKPSi\",\n  \"columnHandlerContainer\": \"_4Mqcv\",\n  \"paywall\": \"AsoHU\",\n  \"paywallDivider\": \"Oca1l\",\n  \"paywallDividerLabel\": \"z7g2X\",\n  \"paywallDividerIcon\": \"I0xKQ\",\n  \"designOnLayout\": \"L2WbI\",\n  \"designOnCell\": \"_37Xd6\",\n  \"mobile\": \"BVCHR\",\n  \"invalidLeft\": \"a227I\",\n  \"invalidRight\": \"dJ3l8\",\n  \"draggingOver\": \"ke7NY\",\n  \"cellSelected\": \"l1-S5\"\n};"],
+  "sourcesContent": ["var styleDataHash = '2374b84e';  \nexport const injectCss = (() => {\n  var css = `._66eB-{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:1}.Riy07{left:0;pointer-events:none;position:absolute;right:0}.z9hDj{background-color:var(--ricos-internal-layout-top-divider-color,currentColor);top:0;transform:scale(var(--ricos-internal-layout-top-divider-flip,1),-1)}.-PfwV{background-color:var(--ricos-internal-layout-bottom-divider-color,currentColor);bottom:0;transform:scaleX(var(--ricos-internal-layout-bottom-divider-flip,1))}.g3jqy{--ricos-internal-layout-cell-outline-color:#a8caff;background:var(--ricos-internal-layout-backdrop-gradient,var(--ricos-internal-layout-backdrop-color,transparent));outline:1.5px solid transparent;padding-bottom:var(--ricos-internal-layout-backdrop-padding-bottom,0);padding-top:var(--ricos-internal-layout-backdrop-padding-top,0);position:relative}.g3jqy.NLxxy,.g3jqy:hover{outline-color:var(--ricos-internal-layout-cell-outline-color)}.g3jqy:hover .LXhQo .sJoD7{outline-color:var(--ricos-internal-layout-cell-outline-color)}.g3jqy:before{background-image:var(--ricos-internal-layout-backdrop-image-src);background-position:var(--ricos-internal-layout-backdrop-image-position);background-repeat:no-repeat;background-size:var(--ricos-internal-layout-backdrop-image-scaling);bottom:0;clip-path:inset(0);content:\"\";filter:var(--ricos-internal-layout-backdrop-image-blur,none);left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}.g3jqy:after{background:var(--ricos-internal-layout-backdrop-overlay,transparent);bottom:0;clip-path:inset(0);content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.g3jqy._1w-QL{margin:0}*+.g3jqy{margin-top:20px}.g3jqy ._0CXdh{display:none}.g3jqy .fo-2y:has(._86l-h.-TR33)+._0CXdh,.g3jqy .fo-2y:has(._86l-h.IOEk3)+._0CXdh,.g3jqy .fo-2y:has(._86l-h.qu8DS)+._0CXdh,.g3jqy .fo-2y:has(._86l-h.uPh5f)+._0CXdh{display:block}.g3jqy .R70Fl{align-items:center;background:#fff;border:1px solid #dfe5eb;border-radius:50%;bottom:-12px;box-shadow:0 2px 4px 0 rgba(23,25,28,.1);cursor:grab;display:flex;height:24px;justify-content:center;left:50%;padding:0;position:absolute;transform:translate(-50%,100%);width:24px;z-index:4}.g3jqy .R70Fl:active{cursor:grabbing}.g3jqy.V9g-a{margin-top:0}.g3jqy .WOvbV{background:#116dff;bottom:0;left:calc(var(--ricos-internal-layout-drop-cursor-position) - 1px);position:absolute;top:0;width:2px;z-index:5}.g3jqy .WOvbV:before{border:2px solid #116dff;border-radius:50%;content:\"\";height:6px;left:-2px;position:absolute;top:-5px;width:6px}.g3jqy.AkvId{outline-color:transparent!important}.g3jqy.AkvId:hover,.g3jqy.AkvId:hover .LXhQo .sJoD7{outline-color:transparent!important}.g3jqy.AkvId .TA2qb,.g3jqy.AkvId ._0CXdh,.g3jqy.AkvId .s-HOq{display:none!important}.g3jqy._0g1oE:has(.a6QWv){margin-bottom:40px}.g3jqy._0g1oE[data-breakout=normal]{--ricos-internal-paywall-divider-outer-start:var(--ricos-breakout-normal-padding-start,0);--ricos-internal-paywall-divider-outer-end:var(--ricos-breakout-normal-padding-end,0)}.g3jqy._0g1oE[data-breakout=fullWidth]{--ricos-internal-paywall-divider-outer-start:var(--ricos-breakout-full-width-padding-start,0);--ricos-internal-paywall-divider-outer-end:var(--ricos-breakout-full-width-padding-end,0)}.g3jqy._0g1oE .a6QWv{align-items:center;color:var(--ricos-text-color,#212121);display:flex;font-size:12px;font-weight:500;gap:6px;inset-inline-end:var(--ricos-internal-paywall-divider-outer-end,0);inset-inline-start:var(--ricos-internal-paywall-divider-outer-start,0);line-height:18px;margin-top:12px;padding-inline-end:var(--ricos-breakout-normal-padding-end,0);padding-inline-start:var(--ricos-breakout-normal-padding-start,0);pointer-events:none;position:absolute;text-transform:uppercase;top:100%;user-select:none}.g3jqy._0g1oE .a6QWv:after,.g3jqy._0g1oE .a6QWv:before{background:rgba(var(--ricos-text-color-tuple,33,33,33),.2);content:\"\";flex:1;height:1px}@supports (color:rgb(from #000 r g b/0.1)){.g3jqy._0g1oE .a6QWv:after,.g3jqy._0g1oE .a6QWv:before{background:rgb(from var(--ricos-text-color,#212121) r g b/.2)}}.g3jqy._0g1oE .xU84W{align-items:center;display:flex;gap:3px;padding-inline-end:6px;white-space:nowrap}.g3jqy._0g1oE .hMh-8{flex-shrink:0}.fo-2y{--ricos-internal-layout-display:grid;--ricos-internal-layout-handler-cursor:col-resize;--ricos-internal-layout-handler-color:#116dff;clear:both;margin:0 auto;position:relative;width:min(100%,var(--ricos-internal-resize-width,var(--ricos-internal-layout-width,initial)));z-index:2}._86l-h{display:var(--ricos-internal-layout-display,grid);flex-wrap:wrap;gap:var(--ricos-internal-layout-gap,20px);grid-template-columns:var(--ricos-internal-layout-grid-template,var(--ricos-internal-layout-column-template));justify-content:var(--ricos-internal-layout-justify-content,auto);position:relative;transition:grid-template-columns .1s ease-out;width:100%;will-change:grid-template-columns;z-index:2}[data-layout-banner] ._86l-h{grid-template-columns:var(--ricos-internal-layout-column-template)!important}[data-layout-banner] ._86l-h.uPh5f{transition:none!important}._86l-h._1-P2H,._86l-h.ay8D- .LXhQo{background:var(--ricos-internal-layout-background-gradient,var(--ricos-internal-layout-background-color,transparent));border:var(--ricos-internal-layout-border-width,0) solid var(--ricos-internal-layout-border-color);border-radius:var(--ricos-internal-layout-border-radius,0)}._86l-h._1-P2H:before,._86l-h.ay8D- .LXhQo:before{background-image:var(--ricos-internal-layout-background-image-src);background-position:var(--ricos-internal-layout-background-image-position);background-repeat:no-repeat;background-size:var(--ricos-internal-layout-background-image-scaling);bottom:0;clip-path:inset(0 round var(--ricos-internal-layout-border-radius,0));content:\"\";filter:var(--ricos-internal-layout-background-image-blur,none);left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}._86l-h._1-P2H:after,._86l-h.ay8D- .LXhQo:after{background:var(--ricos-internal-layout-background-overlay,transparent);bottom:0;clip-path:inset(0 round var(--ricos-internal-layout-border-radius,0));content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}@supports not (contain:inline-size){@media only screen and (max-width:480px){._86l-h{gap:min(20px,var(--ricos-internal-layout-gap,20px))}}}@container (width < 480px){._86l-h:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)){gap:min(20px,var(--ricos-internal-layout-gap,20px))}}@media (width < 480px){._86l-h:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) ._86l-h{gap:min(20px,var(--ricos-internal-layout-gap,20px))}}._86l-h._3Jo32{--ricos-internal-layout-display:flex;--ricos-internal-layout-justify-content:center;--ricos-internal-layout-cell-min-width:100%;--ricos-internal-layout-cell-height:auto}._86l-h._3Jo32 .TA2qb{display:none}._86l-h.uPh5f{transition:none!important}._86l-h.uPh5f,._86l-h.uPh5f *{user-select:none!important}._86l-h.jn62t{--ricos-layout-handler-color:#e62214;--ricos-layout-handler-cursor:e-resize}._86l-h.YAAdI{--ricos-layout-handler-color:#e62214;--ricos-layout-handler-cursor:w-resize}._86l-h.IOEk3 .LXhQo .sJoD7,._86l-h.qu8DS .LXhQo .sJoD7,._86l-h.u53D- .LXhQo .sJoD7,._86l-h.uPh5f .LXhQo .sJoD7,._86l-h:focus .LXhQo .sJoD7,._86l-h:hover .LXhQo .sJoD7{outline-color:var(--ricos-internal-layout-cell-outline-color)}._86l-h .LXhQo{display:flex;flex-direction:column;height:var(--ricos-internal-layout-cell-height,100%);max-width:var(--ricos-internal-layout-cell-min-width,auto);min-width:min(100%,var(--ricos-internal-layout-cell-min-width,0));position:relative;z-index:3}._86l-h .LXhQo .sJoD7{display:flex;flex-direction:column;flex-grow:1;justify-content:var(--ricos-internal-layout-cell-vertical-alignment);outline:1.5px solid transparent;padding:var(--ricos-internal-layout-cell-padding-top,12px) var(--ricos-internal-layout-cell-padding-right,0) var(--ricos-internal-layout-cell-padding-bottom,12px) var(--ricos-internal-layout-cell-padding-left,0);position:relative;z-index:2}@supports not (contain:inline-size){@media only screen and (max-width:480px){._86l-h .LXhQo .sJoD7{padding:min(16px,var(--ricos-internal-layout-cell-padding-top,16px)) min(16px,var(--ricos-internal-layout-cell-padding-right,16px)) min(16px,var(--ricos-internal-layout-cell-padding-bottom,16px)) min(16px,var(--ricos-internal-layout-cell-padding-left,16px))}}}@container (width < 480px){._86l-h .LXhQo .sJoD7:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)){padding:min(16px,var(--ricos-internal-layout-cell-padding-top,16px)) min(16px,var(--ricos-internal-layout-cell-padding-right,16px)) min(16px,var(--ricos-internal-layout-cell-padding-bottom,16px)) min(16px,var(--ricos-internal-layout-cell-padding-left,16px))}}@media (width < 480px){._86l-h .LXhQo .sJoD7:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) ._86l-h .LXhQo .sJoD7{padding:min(16px,var(--ricos-internal-layout-cell-padding-top,16px)) min(16px,var(--ricos-internal-layout-cell-padding-right,16px)) min(16px,var(--ricos-internal-layout-cell-padding-bottom,16px)) min(16px,var(--ricos-internal-layout-cell-padding-left,16px))}}._86l-h .LXhQo .s-HOq{align-items:center;background:#fff;border-radius:18px;box-shadow:0 0 6px rgba(0,6,36,.05);box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#000624;cursor:grab;display:none;height:18px;justify-content:center;left:50%;margin:0;outline:1px solid rgba(0,6,36,.302);padding:0 12px;position:absolute;top:0;transform:translate(-50%,-50%);transition:color .15s ease,background-color .15s ease;width:42px;z-index:3}._86l-h .LXhQo .s-HOq:hover{background:#116dff;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}._86l-h .LXhQo .s-HOq:active{background:#0f62e6;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}._86l-h .LXhQo .s-HOq:active{cursor:grabbing}._86l-h .LXhQo .s-HOq:before{bottom:-1px;content:\"\";height:1px;left:0;position:absolute;right:0}._86l-h.qu8DS:after{background-color:rgba(17,109,255,.1);bottom:0;content:\"\";left:0;opacity:1;outline:1.5px solid #116dff;pointer-events:none;position:absolute;right:0;top:0;z-index:2}._86l-h.qu8DS .LXhQo .sJoD7{outline-color:rgba(17,109,255,.2)}._86l-h.qu8DS .LXhQo .s-HOq{display:none}._86l-h .LXhQo.YJpPR{background-color:rgba(17,109,255,.1);z-index:4}._86l-h .LXhQo.YJpPR .sJoD7{outline-color:#116dff}._86l-h .LXhQo.YJpPR .s-HOq{background:#116dff;box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline:none;transition:color .15s ease,background-color .15s ease}._86l-h .LXhQo.YJpPR .s-HOq:hover{background:#0f62e6;color:#fff}._86l-h .LXhQo.YJpPR .s-HOq:active{background:#084ebd;color:#fff}._86l-h .LXhQo.YJpPR .ricos-selection,._86l-h .LXhQo.YJpPR ::selection,._86l-h.qu8DS .LXhQo .ricos-selection,._86l-h.qu8DS .LXhQo ::selection,._86l-h.uPh5f .LXhQo .ricos-selection,._86l-h.uPh5f .LXhQo ::selection{background-color:transparent!important}._86l-h.qu8DS .ricos-selection,._86l-h.uPh5f .ricos-selection{background-color:transparent!important}._86l-h.IOEk3 .s-HOq,._86l-h.qu8DS .s-HOq,._86l-h.u53D- .s-HOq,._86l-h.uPh5f .s-HOq{display:flex;z-index:4}.TA2qb{--ricos-internal-resize-handler-width:max(15px,var(--ricos-internal-layout-gap,0px));--ricos-internal-resize-handler-background-start:calc(50% - 1px);--ricos-internal-resize-handler-background-end:calc(50% + 1px);bottom:-1px;display:flex;left:calc(var(--ricos-internal-resize-handler-width)/2*-1);position:absolute!important;top:0;transform:translateX(max(-50%,var(--ricos-internal-layout-gap,0px)/2 * -1));width:var(--ricos-internal-resize-handler-width);z-index:3}.TA2qb:active,._86l-h:not(.uPh5f) .TA2qb:hover{background:linear-gradient(90deg,transparent,transparent var(--ricos-internal-resize-handler-background-start),var(--ricos-internal-layout-handler-color) var(--ricos-internal-resize-handler-background-start),var(--ricos-internal-layout-handler-color) var(--ricos-internal-resize-handler-background-end),transparent var(--ricos-internal-resize-handler-background-end));cursor:var(--ricos-internal-layout-handler-cursor)}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"sectionDividerClip\": \"_66eB-\",\n  \"sectionDivider\": \"Riy07\",\n  \"sectionDividerTop\": \"z9hDj\",\n  \"sectionDividerBottom\": \"-PfwV\",\n  \"layoutWrapper\": \"g3jqy\",\n  \"withVerticalResize\": \"NLxxy\",\n  \"cell\": \"LXhQo\",\n  \"cellContent\": \"sJoD7\",\n  \"breakoutMargin\": \"_1w-QL\",\n  \"layoutHandlerWrapper\": \"_0CXdh\",\n  \"layoutContainer\": \"fo-2y\",\n  \"layout\": \"_86l-h\",\n  \"layoutSelected\": \"qu8DS\",\n  \"dragging\": \"-TR33\",\n  \"resizing\": \"uPh5f\",\n  \"inLayout\": \"IOEk3\",\n  \"layoutHandler\": \"R70Fl\",\n  \"bannerMargin\": \"V9g-a\",\n  \"dropCursor\": \"WOvbV\",\n  \"disabled\": \"AkvId\",\n  \"resizeHandler\": \"TA2qb\",\n  \"columnHandlerContainer\": \"s-HOq\",\n  \"paywall\": \"_0g1oE\",\n  \"paywallDivider\": \"a6QWv\",\n  \"paywallDividerLabel\": \"xU84W\",\n  \"paywallDividerIcon\": \"hMh-8\",\n  \"designOnLayout\": \"_1-P2H\",\n  \"designOnCell\": \"ay8D-\",\n  \"mobile\": \"_3Jo32\",\n  \"invalidLeft\": \"jn62t\",\n  \"invalidRight\": \"YAAdI\",\n  \"draggingOver\": \"u53D-\",\n  \"cellSelected\": \"YJpPR\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,kBAAQ;AAAA,EACb,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
   "names": []
 }

package/dist/es/ricos-common-plugins/layout/paywall-toolbar-button.js

@@ -0,0 +1,74 @@
+import React, { useContext, useEffect, useState } from "react";
+import { RicosContext } from "./../../ricos-context/index.js";
+import {
+  getIsModalOpen,
+  useModalService,
+  useModalState
+} from "./../../ricos-modals/modal-service-provider.js";
+import { ToolbarButton as ToolbarButtonComponent } from "./../../_shared/toolbar-button/toolbar-button.js";
+const PAYWALL_TOOLBAR_PANEL_ID = "paywallToolbarPanel";
+const DATA_HOOK = "paywall-toolbar-button";
+const PaywallToolbarButton = ({
+  button: { icon, label, onClick },
+  toolbarItem
+}) => {
+  const { isMobile } = useContext(RicosContext);
+  const modalService = useModalService();
+  const [referenceElement, setReferenceElement] = useState(null);
+  const isOpen = useModalState(getIsModalOpen(PAYWALL_TOOLBAR_PANEL_ID));
+  const close = () => modalService.closeModal(PAYWALL_TOOLBAR_PANEL_ID);
+  useEffect(
+    () => () => {
+      modalService.isModalOpen(PAYWALL_TOOLBAR_PANEL_ID) && close();
+    },
+    [modalService]
+  );
+  return /* @__PURE__ */ React.createElement(
+    ToolbarButtonComponent,
+    {
+      ref: setReferenceElement,
+      prefix: icon,
+      label,
+      active: isOpen,
+      onClick: () => onClick({
+        referenceElement,
+        isMobile,
+        close,
+        togglePanel: ({ Component, componentProps }) => isOpen ? close() : modalService.openModal({
+          id: PAYWALL_TOOLBAR_PANEL_ID,
+          type: "exclusive",
+          Component,
+          componentProps,
+          layout: isMobile ? "drawer" : "floating",
+          positioning: {
+            referenceElement: referenceElement ?? void 0,
+            placement: "bottom"
+          }
+        })
+      }),
+      dataHook: DATA_HOOK,
+      tabIndex: toolbarItem.presentation.tabIndex
+    }
+  );
+};
+const getPaywallToolbarButton = (services) => services.plugins.getConfig("PAYWALL").toolbarButton;
+const createPaywallToolbarButton = (services, visible) => ({
+  id: "paywallToolbarButton",
+  type: "modal",
+  icon: () => null,
+  tooltip: "",
+  dataHook: DATA_HOOK,
+  attributes: { visible },
+  renderer: (toolbarItem) => {
+    const button = getPaywallToolbarButton(services);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, button && /* @__PURE__ */ React.createElement(PaywallToolbarButton, { button, toolbarItem }));
+  },
+  command: () => {
+  }
+});
+export {
+  PAYWALL_TOOLBAR_PANEL_ID,
+  createPaywallToolbarButton,
+  getPaywallToolbarButton
+};
+//# sourceMappingURL=paywall-toolbar-button.js.map

package/dist/es/ricos-common-plugins/layout/paywall-toolbar-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ricos-common-plugins/layout/paywall-toolbar-button.tsx"],
+  "sourcesContent": ["import React, { useContext, useEffect, useState } from 'react';\n\nimport type {\n  PaywallPluginEditorConfig,\n  PaywallToolbarButton as PaywallToolbarButtonConfig,\n} from './../../plugin-paywall/plugin-paywall.js';\nimport { RicosContext } from './../../ricos-context/index.js';\nimport {\n  getIsModalOpen,\n  useModalService,\n  useModalState,\n} from './../../ricos-modals/modal-service-provider.js';\nimport type { IToolbarItem, Resolver, RicosServices, ToolbarButton } from './../../ricos-types/index.js';\nimport { ToolbarButton as ToolbarButtonComponent } from './../../_shared/toolbar-button/toolbar-button.js';\n\nexport const PAYWALL_TOOLBAR_PANEL_ID = 'paywallToolbarPanel';\nconst DATA_HOOK = 'paywall-toolbar-button';\n\nconst PaywallToolbarButton = ({\n  button: { icon, label, onClick },\n  toolbarItem,\n}: {\n  button: PaywallToolbarButtonConfig;\n  toolbarItem: IToolbarItem;\n}) => {\n  const { isMobile } = useContext(RicosContext);\n  const modalService = useModalService();\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const isOpen = useModalState(getIsModalOpen(PAYWALL_TOOLBAR_PANEL_ID));\n  const close = () => modalService.closeModal(PAYWALL_TOOLBAR_PANEL_ID);\n\n  // Floating panels only close on an outside click; when the toolbar goes away for another\n  // reason (undo, a programmatic selection change), the panel must not outlive it.\n  useEffect(\n    () => () => {\n      modalService.isModalOpen(PAYWALL_TOOLBAR_PANEL_ID) && close();\n    },\n    [modalService]\n  );\n\n  return (\n    <ToolbarButtonComponent\n      ref={setReferenceElement}\n      prefix={icon}\n      label={label}\n      active={isOpen}\n      onClick={() =>\n        onClick({\n          referenceElement,\n          isMobile,\n          close,\n          togglePanel: ({ Component, componentProps }) =>\n            isOpen\n              ? close()\n              : modalService.openModal({\n                  id: PAYWALL_TOOLBAR_PANEL_ID,\n                  type: 'exclusive',\n                  Component,\n                  componentProps,\n                  layout: isMobile ? 'drawer' : 'floating',\n                  positioning: {\n                    referenceElement: referenceElement ?? undefined,\n                    placement: 'bottom',\n                  },\n                }),\n        })\n      }\n      dataHook={DATA_HOOK}\n      tabIndex={toolbarItem.presentation.tabIndex}\n    />\n  );\n};\n\n// Layout registers before the opt-in paywall plugin, so its config is read at render time.\nexport const getPaywallToolbarButton = (services: RicosServices) =>\n  (services.plugins.getConfig('PAYWALL') as Partial<PaywallPluginEditorConfig>).toolbarButton;\n\nexport const createPaywallToolbarButton = (\n  services: RicosServices,\n  visible: Resolver<boolean>\n): ToolbarButton => ({\n  id: 'paywallToolbarButton',\n  type: 'modal',\n  icon: () => null,\n  tooltip: '',\n  dataHook: DATA_HOOK,\n  attributes: { visible },\n  renderer: toolbarItem => {\n    const button = getPaywallToolbarButton(services);\n    return <>{button && <PaywallToolbarButton button={button} toolbarItem={toolbarItem} />}</>;\n  },\n  command: () => {},\n});\n"],
+  "mappings": "AAAA,OAAO,SAAS,YAAY,WAAW,gBAAgB;AAMvD,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,8BAA8B;AAEjD,MAAM,2BAA2B;AACxC,MAAM,YAAY;AAElB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ,EAAE,MAAM,OAAO,QAAQ;AAAA,EAC/B;AACF,MAGM;AACJ,QAAM,EAAE,SAAS,IAAI,WAAW,YAAY;AAC5C,QAAM,eAAe,gBAAgB;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmC,IAAI;AACvF,QAAM,SAAS,cAAc,eAAe,wBAAwB,CAAC;AACrE,QAAM,QAAQ,MAAM,aAAa,WAAW,wBAAwB;AAIpE;AAAA,IACE,MAAM,MAAM;AACV,mBAAa,YAAY,wBAAwB,KAAK,MAAM;AAAA,IAC9D;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR,SAAS,MACP,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa,CAAC,EAAE,WAAW,eAAe,MACxC,SACI,MAAM,IACN,aAAa,UAAU;AAAA,UACrB,IAAI;AAAA,UACJ,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ,WAAW,WAAW;AAAA,UAC9B,aAAa;AAAA,YACX,kBAAkB,oBAAoB;AAAA,YACtC,WAAW;AAAA,UACb;AAAA,QACF,CAAC;AAAA,MACT,CAAC;AAAA,MAEH,UAAU;AAAA,MACV,UAAU,YAAY,aAAa;AAAA;AAAA,EACrC;AAEJ;AAGO,MAAM,0BAA0B,CAAC,aACrC,SAAS,QAAQ,UAAU,SAAS,EAAyC;AAEzE,MAAM,6BAA6B,CACxC,UACA,aACmB;AAAA,EACnB,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM,MAAM;AAAA,EACZ,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY,EAAE,QAAQ;AAAA,EACtB,UAAU,iBAAe;AACvB,UAAM,SAAS,wBAAwB,QAAQ;AAC/C,WAAO,0DAAG,UAAU,oCAAC,wBAAqB,QAAgB,aAA0B,CAAG;AAAA,EACzF;AAAA,EACA,SAAS,MAAM;AAAA,EAAC;AAClB;",
+  "names": []
+}

package/dist/es/ricos-common-plugins/layout/plugin-layout.js

@@ -28,6 +28,7 @@ import {
   PLUGIN_TOOLBAR_SET_AS_HEADER_BUTTON
 } from "./../../_shared/data-hooks.js";
 import { isEdgeBanner } from "./../../_shared/is-edge-banner.js";
+import { isPaywallSelection } from "./../../_shared/paywall/paywall-selection.js";
 import { createAnimationButton } from "./../../_shared/plugin-toolbar/create-animation-button.js";
 import { createDeleteButton } from "./../../_shared/plugin-toolbar/create-delete-button.js";
 import { createSettingsButton } from "./../../_shared/plugin-toolbar/create-settings-button.js";
@@ -64,6 +65,7 @@ import { ThreeColumns } from "./modals/icons/three-columns.js";
 import { TwoColumns } from "./modals/icons/two-columns.js";
 import { LAYOUT_INSERT_MODAL_ID, LayoutInsertModal } from "./modals/layout-insert-modal.js";
 import { createLayoutPresetContent } from "./modals/presets/create-layout-preset-content.js";
+import { createPaywallToolbarButton, getPaywallToolbarButton } from "./paywall-toolbar-button.js";
 import { SectionDividersPanelLazy } from "./section-dividers/section-dividers-panel-lazy.js";
 import {
   createQuickActionBannerLayout,
@@ -237,186 +239,189 @@ const pluginLayout = (config = {
     names: [RicosPluginToolbarNames.LAYOUT],
     isVisible: isToolbarVisible,
     resolveReferenceElement: (tiptapEditor) => getToolbarReferenceElement(tiptapEditor),
-    getButtons: (_, services) => [
-      createSettingsButton({
-        modalId: LAYOUT_SETTINGS_MODAL_ID,
-        showLabel: true,
-        attributes: {
-          selectedNode: selectedNodeResolver
-        },
-        command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
-          toggleLayoutSidePanel(
-            services.modals,
-            {
-              id: LAYOUT_SETTINGS_MODAL_ID,
-              Component: Settings,
-              componentProps: {
-                referenceElement,
-                nodeId: selectedNode.attrs.id,
-                config
-              }
-            },
-            referenceElement,
-            isMobile
-          );
-        },
-        buttonId: "layoutSettings"
-      }),
-      createSeparator(),
-      {
-        id: "layoutSectionDividers",
-        type: "modal",
-        tooltip: "Layouts_SectionDividers_Tooltip",
-        icon: SectionDividerBottomSmall,
-        dataHook: SECTION_DIVIDERS_BUTTON,
-        attributes: {
-          selectedNode: selectedNodeResolver,
-          active: (_2, { modals }) => Boolean(modals?.getModal(SECTION_DIVIDERS_MODAL_ID))
-        },
-        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(SectionDividersButton, { toolbarItem }),
-        command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
-          toggleLayoutSidePanel(
-            services.modals,
-            {
-              id: SECTION_DIVIDERS_MODAL_ID,
-              Component: SectionDividersPanelLazy,
-              componentProps: {
-                referenceElement,
-                nodeId: selectedNode.attrs.id
-              }
-            },
-            referenceElement,
-            isMobile
-          );
-        }
-      },
-      ...config.disableBanner ? [] : [setAsBannerButton],
-      ...config.disableFooter ? [] : [setAsFooterButton],
-      createPluginToolbarButton({
-        id: "layoutVerticalAlignment",
-        type: "dropdown",
-        tooltip: "Layouts_LayoutCellVerticalAlignment_Tooltip",
-        dataHook: LAYOUT_TOOLBAR_VERTICAL_ALIGNMENT_BUTTON,
-        Component: VerticalAlignmentDropdown,
-        getComponentProps: ({ tiptapEditor, modals, attributes }) => {
-          return {
-            onSelect: (verticalAlignment) => {
-              tiptapEditor.chain().focus().setLayoutCellsVerticalAlignment(
-                attributes.selectedNode.attrs.id,
-                verticalAlignment
-              ).run();
-            },
-            dropdownOptions: Object.values(VERTICAL_ALIGNMENT_BUTTONS).map((item) => ({
-              id: item.commandKey,
-              dataHook: item.dataHook,
-              label: services.t(item.tooltip),
-              icon: item.iconSmall,
-              iconMobile: item.icon
-            })),
-            closeModal: () => modals.closeModal(VERTICAL_ALIGNMENT_MODAL_ID),
-            selectedId: attributes.selectedNode.attrs.cellVerticalAlignment || LAYOUT_DEFAULTS.cellVerticalAlignment
-          };
-        },
-        command: ({
-          tiptapEditor,
-          modals,
-          referenceElement,
-          attributes,
-          getComponentProps,
-          publicCommands
-        }) => {
-          const closeModal = () => modals.closeModal(VERTICAL_ALIGNMENT_MODAL_ID);
-          const isModalOpen = modals.isModalOpen(VERTICAL_ALIGNMENT_MODAL_ID);
-          if (isModalOpen) {
-            closeModal();
-            return;
+    getButtons: (_, services) => {
+      const isPaywallButton = (_2, __, editor) => !!getPaywallToolbarButton(services) && !!editor && isPaywallSelection(editor.state.selection);
+      return [
+        createPaywallToolbarButton(services, isPaywallButton),
+        createSeparator({ visible: isPaywallButton }),
+        createSettingsButton({
+          modalId: LAYOUT_SETTINGS_MODAL_ID,
+          showLabel: ({ attributes }) => !attributes.isPaywallButton,
+          attributes: { selectedNode: selectedNodeResolver, isPaywallButton },
+          command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
+            toggleLayoutSidePanel(
+              services.modals,
+              {
+                id: LAYOUT_SETTINGS_MODAL_ID,
+                Component: Settings,
+                componentProps: {
+                  referenceElement,
+                  nodeId: selectedNode.attrs.id,
+                  config
+                }
+              },
+              referenceElement,
+              isMobile
+            );
+          },
+          buttonId: "layoutSettings"
+        }),
+        createSeparator({ visible: (...args) => !isPaywallButton(...args) }),
+        {
+          id: "layoutSectionDividers",
+          type: "modal",
+          tooltip: "Layouts_SectionDividers_Tooltip",
+          icon: SectionDividerBottomSmall,
+          dataHook: SECTION_DIVIDERS_BUTTON,
+          attributes: {
+            selectedNode: selectedNodeResolver,
+            active: (_2, { modals }) => Boolean(modals?.getModal(SECTION_DIVIDERS_MODAL_ID))
+          },
+          renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(SectionDividersButton, { toolbarItem }),
+          command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
+            toggleLayoutSidePanel(
+              services.modals,
+              {
+                id: SECTION_DIVIDERS_MODAL_ID,
+                Component: SectionDividersPanelLazy,
+                componentProps: {
+                  referenceElement,
+                  nodeId: selectedNode.attrs.id
+                }
+              },
+              referenceElement,
+              isMobile
+            );
           }
-          const componentProps = getComponentProps?.({
+        },
+        ...config.disableBanner ? [] : [setAsBannerButton],
+        ...config.disableFooter ? [] : [setAsFooterButton],
+        createPluginToolbarButton({
+          id: "layoutVerticalAlignment",
+          type: "dropdown",
+          tooltip: "Layouts_LayoutCellVerticalAlignment_Tooltip",
+          dataHook: LAYOUT_TOOLBAR_VERTICAL_ALIGNMENT_BUTTON,
+          Component: VerticalAlignmentDropdown,
+          getComponentProps: ({ tiptapEditor, modals, attributes }) => {
+            return {
+              onSelect: (verticalAlignment) => {
+                tiptapEditor.chain().focus().setLayoutCellsVerticalAlignment(
+                  attributes.selectedNode.attrs.id,
+                  verticalAlignment
+                ).run();
+              },
+              dropdownOptions: Object.values(VERTICAL_ALIGNMENT_BUTTONS).map((item) => ({
+                id: item.commandKey,
+                dataHook: item.dataHook,
+                label: services.t(item.tooltip),
+                icon: item.iconSmall,
+                iconMobile: item.icon
+              })),
+              closeModal: () => modals.closeModal(VERTICAL_ALIGNMENT_MODAL_ID),
+              selectedId: attributes.selectedNode.attrs.cellVerticalAlignment || LAYOUT_DEFAULTS.cellVerticalAlignment
+            };
+          },
+          command: ({
             tiptapEditor,
-            attributes,
-            publicCommands,
-            t: services.t,
             modals,
-            languageDir: services.context.languageDir
-          });
-          if (!componentProps) {
-            return;
-          }
-          modals.openModal({
-            id: VERTICAL_ALIGNMENT_MODAL_ID,
-            Component: VerticalAlignmentDropdown,
-            componentProps,
-            layout: services.context.isMobile ? "drawer" : "floating",
-            positioning: { referenceElement, placement: "bottom" }
-          });
-        },
-        attributes: {
-          selectedNode: selectedNodeResolver,
-          verticalAlignment: getVerticalAlignmentResolver
-        },
-        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(VerticalAlignmentButton, { toolbarItem }),
-        getIcon: ({ attributes }) => {
-          const verticalAlignment = attributes.selectedNode.attrs?.cellVerticalAlignment || LAYOUT_DEFAULTS.cellVerticalAlignment;
-          return verticalAlignmentIcons[verticalAlignment];
-        }
-      }),
-      {
-        id: "addCellToTheEnd",
-        type: "toggle",
-        dataHook: LAYOUT_PLUGIN_TOOLBAR_ADD_CELL_BUTTON,
-        tooltip: "Layouts_LayoutAddCell_Tooltip",
-        icon: Add,
-        attributes: {
-          selectedNode: selectedNodeResolver,
-          alwaysVisible: isAlwaysVisible,
-          disabled: (_2, __, editor) => {
-            const selection = editor?.state?.selection;
-            if (!selection) {
-              return true;
+            referenceElement,
+            attributes,
+            getComponentProps,
+            publicCommands
+          }) => {
+            const closeModal = () => modals.closeModal(VERTICAL_ALIGNMENT_MODAL_ID);
+            const isModalOpen = modals.isModalOpen(VERTICAL_ALIGNMENT_MODAL_ID);
+            if (isModalOpen) {
+              closeModal();
+              return;
             }
-            const closest = selection instanceof NodeSelection && selection.node?.type.name === TIPTAP_LAYOUT_TYPE ? selection : findParentNodeClosestToPos(
-              selection.$from,
-              (node) => node.type.name === TIPTAP_LAYOUT_TYPE
-            );
-            return closest?.node.lastChild && editor ? !editor.can().addCellRight(closest.node.lastChild.attrs.id) : true;
+            const componentProps = getComponentProps?.({
+              tiptapEditor,
+              attributes,
+              publicCommands,
+              t: services.t,
+              modals,
+              languageDir: services.context.languageDir
+            });
+            if (!componentProps) {
+              return;
+            }
+            modals.openModal({
+              id: VERTICAL_ALIGNMENT_MODAL_ID,
+              Component: VerticalAlignmentDropdown,
+              componentProps,
+              layout: services.context.isMobile ? "drawer" : "floating",
+              positioning: { referenceElement, placement: "bottom" }
+            });
+          },
+          attributes: {
+            selectedNode: selectedNodeResolver,
+            verticalAlignment: getVerticalAlignmentResolver
+          },
+          renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(VerticalAlignmentButton, { toolbarItem }),
+          getIcon: ({ attributes }) => {
+            const verticalAlignment = attributes.selectedNode.attrs?.cellVerticalAlignment || LAYOUT_DEFAULTS.cellVerticalAlignment;
+            return verticalAlignmentIcons[verticalAlignment];
           }
+        }),
+        {
+          id: "addCellToTheEnd",
+          type: "toggle",
+          dataHook: LAYOUT_PLUGIN_TOOLBAR_ADD_CELL_BUTTON,
+          tooltip: "Layouts_LayoutAddCell_Tooltip",
+          icon: Add,
+          attributes: {
+            selectedNode: selectedNodeResolver,
+            alwaysVisible: isAlwaysVisible,
+            disabled: (_2, __, editor) => {
+              const selection = editor?.state?.selection;
+              if (!selection) {
+                return true;
+              }
+              const closest = selection instanceof NodeSelection && selection.node?.type.name === TIPTAP_LAYOUT_TYPE ? selection : findParentNodeClosestToPos(
+                selection.$from,
+                (node) => node.type.name === TIPTAP_LAYOUT_TYPE
+              );
+              return closest?.node.lastChild && editor ? !editor.can().addCellRight(closest.node.lastChild.attrs.id) : true;
+            }
+          },
+          command: ({ tiptapEditor, attributes: { selectedNode } }) => {
+            tiptapEditor.commands.addCellRight(selectedNode.lastChild.attrs.id);
+          },
+          renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(AddCellButton, { toolbarItem })
         },
-        command: ({ tiptapEditor, attributes: { selectedNode } }) => {
-          tiptapEditor.commands.addCellRight(selectedNode.lastChild.attrs.id);
-        },
-        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(AddCellButton, { toolbarItem })
-      },
-      // the layout toolbar also shows for text selections inside the layout —
-      // resolve the layout like the other buttons, not just NodeSelections
-      createAnimationButton(services, selectedNodeResolver),
-      createSeparator(),
-      createDeleteButton({
-        tooltip: "Layouts_LayoutDelete_Tooltip",
-        attributes: {
-          selectedNode: selectedNodeResolver
-        },
-        command: ({ tiptapEditor, attributes }) => {
-          const layoutId = attributes.selectedNode.attrs.id;
-          const layoutWithPos = findNodeById(tiptapEditor.state.tr, layoutId)[0];
-          if (!layoutWithPos) {
-            return;
-          }
-          const $layoutPos = tiptapEditor.state.doc.resolve(layoutWithPos.pos);
-          const parentTypeName = $layoutPos.parent.type.name;
-          const isInCardWrapper = parentTypeName === TIPTAP_CARD_HEADER_TYPE || parentTypeName === TIPTAP_CARD_FOOTER_TYPE;
-          if (isInCardWrapper) {
-            const wrapperFrom = $layoutPos.before($layoutPos.depth);
-            const wrapperTo = $layoutPos.after($layoutPos.depth);
-            tiptapEditor.chain().focus().command(({ tr }) => {
-              tr.delete(wrapperFrom, wrapperTo);
-              return true;
-            }).run();
-            return;
+        // the layout toolbar also shows for text selections inside the layout —
+        // resolve the layout like the other buttons, not just NodeSelections
+        createAnimationButton(services, selectedNodeResolver),
+        createSeparator(),
+        createDeleteButton({
+          tooltip: "Layouts_LayoutDelete_Tooltip",
+          attributes: {
+            selectedNode: selectedNodeResolver
+          },
+          command: ({ tiptapEditor, attributes }) => {
+            const layoutId = attributes.selectedNode.attrs.id;
+            const layoutWithPos = findNodeById(tiptapEditor.state.tr, layoutId)[0];
+            if (!layoutWithPos) {
+              return;
+            }
+            const $layoutPos = tiptapEditor.state.doc.resolve(layoutWithPos.pos);
+            const parentTypeName = $layoutPos.parent.type.name;
+            const isInCardWrapper = parentTypeName === TIPTAP_CARD_HEADER_TYPE || parentTypeName === TIPTAP_CARD_FOOTER_TYPE;
+            if (isInCardWrapper) {
+              const wrapperFrom = $layoutPos.before($layoutPos.depth);
+              const wrapperTo = $layoutPos.after($layoutPos.depth);
+              tiptapEditor.chain().focus().command(({ tr }) => {
+                tr.delete(wrapperFrom, wrapperTo);
+                return true;
+              }).run();
+              return;
+            }
+            tiptapEditor.commands.deleteNode(layoutId);
           }
-          tiptapEditor.commands.deleteNode(layoutId);
-        }
-      })
-    ]
+        })
+      ];
+    }
   },
   getAddButtons: (_config, services) => config.showInToolbars ? [
     {