@frontify/guideline-blocks-settings 0.28.5 → 0.29.0

package/dist/styles.css

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-pointer-events-none{pointer-events:none}.tw-pointer-events-auto{pointer-events:auto}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-\[calc\(100\%-4px\)\]{bottom:calc(100% - 4px)}.tw-left-0{left:0}.tw-right-\[-3px\]{right:-3px}.tw-top-full{top:100%}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-\[2\]{z-index:2}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mr-1{margin-right:.25rem}.tw-mr-1\.5{margin-right:.375rem}.tw-mr-2{margin-right:.5rem}.tw-mt-1{margin-top:.25rem}.tw-mt-3{margin-top:.75rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-8{margin-top:2rem}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-h-0{height:0px}.tw-h-4{height:1rem}.tw-h-6{height:1.5rem}.tw-h-7{height:1.75rem}.tw-h-8{height:2rem}.tw-h-9{height:2.25rem}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.tw-w-4{width:1rem}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-9{width:2.25rem}.tw-w-\[300px\]{width:300px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-min-w-0{min-width:0px}.tw-min-w-\[400px\]{min-width:400px}.tw-flex-1{flex:1 1 0%}.tw-flex-auto{flex:1 1 auto}.tw-flex-shrink-0{flex-shrink:0}.tw-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-pulse{50%{opacity:.5}}.tw-animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!tw-cursor-not-allowed{cursor:not-allowed!important}.tw-cursor-grab{cursor:grab}.tw-cursor-grabbing{cursor:grabbing}.tw-cursor-pointer{cursor:pointer}.tw-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-break-inside-avoid-column{-moz-column-break-inside:avoid;break-inside:avoid-column}.tw-break-after-column{-moz-column-break-after:column;break-after:column}.tw-flex-row{flex-direction:row}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0px}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.tw-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.tw-self-start{align-self:flex-start}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-text-ellipsis{text-overflow:ellipsis}.tw-whitespace-nowrap{white-space:nowrap}.tw-break-words{overflow-wrap:break-word}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-sm{border-radius:.125rem}.tw-border{border-width:var(--line-width)}.tw-border-b{border-bottom-width:var(--line-width)}.tw-border-b-4{border-bottom-width:4px}.tw-border-l-4{border-left-width:4px}.tw-border-t{border-top-width:var(--line-width)}.tw-border-t-4{border-top-width:4px}.tw-border-solid{border-style:solid}.tw-border-dashed{border-style:dashed}.\!tw-border-red-50{--tw-border-opacity: 1 !important;border-color:rgb(255 128 102 / var(--tw-border-opacity))!important}.tw-border-blank-state-line{--tw-border-opacity: 1;border-color:rgb(163 165 165 / var(--tw-border-opacity))}.tw-border-blank-state-line-hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.tw-border-box-selected-inverse{border-color:var(--box-selected-inverse-color)}.tw-border-button-border{border-color:var(--button-border-color)}.tw-border-b-line{border-bottom-color:var(--line-color)}.tw-border-b-transparent{border-bottom-color:transparent}.tw-border-t-black-10{--tw-border-opacity: 1;border-top-color:rgb(234 235 235 / var(--tw-border-opacity))}.tw-border-t-transparent{border-top-color:transparent}.tw-bg-base{background-color:var(--base-color)}.tw-bg-base-alt{background-color:var(--base-color-alt)}.tw-bg-blank-state-pressed-inverse{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.tw-bg-blank-state-shaded-inverse{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.tw-bg-blank-state-weak-inverse{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-bg-box-neutral-hover{background-color:var(--box-neutral-color-hover)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.tw-bg-box-selected-pressed{background-color:var(--box-selected-color-pressed)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.tw-bg-button-background{background-color:var(--button-background-color)}.tw-bg-button-background-pressed{background-color:var(--button-background-color-pressed)}.tw-bg-red-50{--tw-bg-opacity: 1;background-color:rgb(255 128 102 / var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-p-1{padding:.25rem}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-7{padding:1.75rem}.tw-p-\[6px\]{padding:6px}.tw-px-0{padding-left:0;padding-right:0}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-2\.5{padding-left:.625rem;padding-right:.625rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-\[1px\]{padding-left:1px;padding-right:1px}.tw-py-0{padding-top:0;padding-bottom:0}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-pb-2{padding-bottom:.5rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-7{padding-left:1.75rem}.tw-pt-5{padding-top:1.25rem}.tw-text-left{text-align:left}.tw-text-right{text-align:right}.tw-font-body{font-family:var(--body-family)}.tw-font-sans{font-family:Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}.tw-text-\[13px\]{font-size:13px}.tw-text-body-small{font-size:var(--body-size-small);line-height:var(--body-size-small-line-height)}.tw-text-s{font-size:.875rem;line-height:1rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.813rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-leading-4{line-height:1rem}.tw-leading-5{line-height:1.25rem}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-color)}.tw-text-box-selected-inverse{color:var(--box-selected-inverse-color)}.tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-text-red-60{--tw-text-opacity: 1;color:rgb(255 55 90 / var(--tw-text-opacity))}.tw-text-text{color:var(--text-color)}.tw-text-text-negative{color:var(--text-color-negative)}.tw-text-text-weak{color:var(--text-color-weak)}.\!tw-line-through{text-decoration-line:line-through!important}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-offset-1{outline-offset:1px}.tw-outline-offset-2{outline-offset:2px}.tw-outline-offset-\[1px\]{outline-offset:1px}.tw-outline-box-selected-inverse{outline-color:var(--box-selected-inverse-color)}.tw-outline-line{outline-color:var(--line-color)}.tw-outline-violet-60{outline-color:#825fff}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first\:tw-rounded-bl:first-child{border-bottom-left-radius:var(--radius)}.first\:tw-rounded-tl:first-child{border-top-left-radius:var(--radius)}.first\:tw-rounded-tr:first-child{border-top-right-radius:var(--radius)}.last\:tw-rounded-bl:last-child{border-bottom-left-radius:var(--radius)}.last\:tw-rounded-br:last-child{border-bottom-right-radius:var(--radius)}.last\:tw-rounded-tr:last-child{border-top-right-radius:var(--radius)}.first-of-type\:tw-ml-0:first-of-type{margin-left:0}.focus-within\:tw-opacity-100:focus-within{opacity:1}.focus-within\:tw-outline:focus-within{outline-style:solid}.hover\:tw-border-blank-state-line-hover:hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.hover\:tw-bg-black-10:hover{--tw-bg-opacity: 1;background-color:rgb(234 235 235 / var(--tw-bg-opacity))}.hover\:tw-bg-blank-state-hover-inverse:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:tw-bg-box-neutral-hover:hover{background-color:var(--box-neutral-color-hover)}.hover\:tw-bg-box-neutral-strong-inverse-hover:hover{background-color:var(--box-neutral-strong-inverse-color-hover)}.hover\:tw-bg-box-selected-hover:hover{background-color:var(--box-selected-color-hover)}.hover\:tw-bg-button-background-hover:hover{background-color:var(--button-background-color-hover)}.hover\:tw-bg-button-background-pressed:hover{background-color:var(--button-background-color-pressed)}.hover\:tw-text-blank-state-hover:hover{--tw-text-opacity: 1;color:rgb(26 28 28 / var(--tw-text-opacity))}.hover\:tw-text-box-neutral-inverse-hover:hover{color:var(--box-neutral-inverse-color-hover)}.hover\:tw-outline:hover{outline-style:solid}.focus-visible\:tw-opacity-100:focus-visible{opacity:1}.focus-visible\:tw-ring-blue:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity)) }.active\:tw-border-blank-state-line-hover:active{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.active\:tw-bg-blank-state-pressed-inverse:active{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-color-pressed)}.active\:tw-bg-box-selected-pressed:active{background-color:var(--box-selected-color-pressed)}.active\:tw-bg-button-background-pressed:active{background-color:var(--button-background-color-pressed)}.active\:tw-text-blank-state-pressed:active{--tw-text-opacity: 1;color:rgb(8 8 8 / var(--tw-text-opacity))}.tw-group:hover .group-hover\:tw-text-box-neutral-inverse-hover{color:var(--box-neutral-inverse-color-hover)}.tw-group:hover .group-hover\:tw-opacity-100{opacity:1}.tw-group:focus .group-focus\:tw-opacity-100{opacity:1}.\[\&\:not\(\:first-child\)\]\:tw-border-l-0:not(:first-child){border-left-width:0px}.\[\&\:not\(\:first-child\)\]\:tw-border-t-0:not(:first-child){border-top-width:0px}.\[\&\>\*\]\:tw-pointer-events-none>*{pointer-events:none}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-pointer-events-none{pointer-events:none}.tw-pointer-events-auto{pointer-events:auto}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-\[calc\(100\%-4px\)\]{bottom:calc(100% - 4px)}.tw-left-0{left:0}.tw-right-\[-3px\]{right:-3px}.tw-top-full{top:100%}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-\[2\]{z-index:2}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mr-2{margin-right:.5rem}.tw-mt-1{margin-top:.25rem}.tw-mt-3{margin-top:.75rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-8{margin-top:2rem}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-h-0{height:0px}.tw-h-6{height:1.5rem}.tw-h-7{height:1.75rem}.tw-h-8{height:2rem}.tw-h-9{height:2.25rem}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-9{width:2.25rem}.tw-w-\[300px\]{width:300px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-min-w-0{min-width:0px}.tw-min-w-\[400px\]{min-width:400px}.tw-flex-1{flex:1 1 0%}.tw-flex-auto{flex:1 1 auto}.tw-flex-shrink-0{flex-shrink:0}.tw-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-pulse{50%{opacity:.5}}.tw-animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!tw-cursor-not-allowed{cursor:not-allowed!important}.tw-cursor-grab{cursor:grab}.tw-cursor-grabbing{cursor:grabbing}.tw-cursor-pointer{cursor:pointer}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0px}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.tw-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.tw-self-start{align-self:flex-start}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-text-ellipsis{text-overflow:ellipsis}.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-sm{border-radius:.125rem}.tw-border{border-width:var(--line-width)}.tw-border-b{border-bottom-width:var(--line-width)}.tw-border-b-4{border-bottom-width:4px}.tw-border-l-4{border-left-width:4px}.tw-border-t{border-top-width:var(--line-width)}.tw-border-t-4{border-top-width:4px}.tw-border-solid{border-style:solid}.tw-border-dashed{border-style:dashed}.\!tw-border-red-50{--tw-border-opacity: 1 !important;border-color:rgb(255 128 102 / var(--tw-border-opacity))!important}.tw-border-blank-state-line{--tw-border-opacity: 1;border-color:rgb(163 165 165 / var(--tw-border-opacity))}.tw-border-blank-state-line-hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.tw-border-box-selected-inverse{border-color:var(--box-selected-inverse-color)}.tw-border-button-border{border-color:var(--button-border-color)}.tw-border-b-line{border-bottom-color:var(--line-color)}.tw-border-b-transparent{border-bottom-color:transparent}.tw-border-t-black-10{--tw-border-opacity: 1;border-top-color:rgb(234 235 235 / var(--tw-border-opacity))}.tw-border-t-transparent{border-top-color:transparent}.tw-bg-base{background-color:var(--base-color)}.tw-bg-base-alt{background-color:var(--base-color-alt)}.tw-bg-blank-state-pressed-inverse{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.tw-bg-blank-state-shaded-inverse{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.tw-bg-blank-state-weak-inverse{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-bg-box-neutral-hover{background-color:var(--box-neutral-color-hover)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.tw-bg-box-selected-pressed{background-color:var(--box-selected-color-pressed)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.tw-bg-button-background{background-color:var(--button-background-color)}.tw-bg-button-background-pressed{background-color:var(--button-background-color-pressed)}.tw-bg-red-50{--tw-bg-opacity: 1;background-color:rgb(255 128 102 / var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-p-1{padding:.25rem}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-7{padding:1.75rem}.tw-p-\[6px\]{padding:6px}.tw-px-0{padding-left:0;padding-right:0}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-2\.5{padding-left:.625rem;padding-right:.625rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-\[1px\]{padding-left:1px;padding-right:1px}.tw-py-0{padding-top:0;padding-bottom:0}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-7{padding-left:1.75rem}.tw-pt-5{padding-top:1.25rem}.tw-text-left{text-align:left}.tw-text-right{text-align:right}.tw-font-body{font-family:var(--body-family)}.tw-font-sans{font-family:Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}.tw-text-\[13px\]{font-size:13px}.tw-text-body-small{font-size:var(--body-size-small);line-height:var(--body-size-small-line-height)}.tw-text-s{font-size:.875rem;line-height:1rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.813rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-leading-4{line-height:1rem}.tw-leading-5{line-height:1.25rem}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-color)}.tw-text-box-selected-inverse{color:var(--box-selected-inverse-color)}.tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-text-red-60{--tw-text-opacity: 1;color:rgb(255 55 90 / var(--tw-text-opacity))}.tw-text-text{color:var(--text-color)}.tw-text-text-negative{color:var(--text-color-negative)}.tw-text-text-weak{color:var(--text-color-weak)}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-offset-1{outline-offset:1px}.tw-outline-offset-2{outline-offset:2px}.tw-outline-offset-\[1px\]{outline-offset:1px}.tw-outline-box-selected-inverse{outline-color:var(--box-selected-inverse-color)}.tw-outline-line{outline-color:var(--line-color)}.tw-outline-violet-60{outline-color:#825fff}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first\:tw-rounded-bl:first-child{border-bottom-left-radius:var(--radius)}.first\:tw-rounded-tl:first-child{border-top-left-radius:var(--radius)}.first\:tw-rounded-tr:first-child{border-top-right-radius:var(--radius)}.last\:tw-rounded-bl:last-child{border-bottom-left-radius:var(--radius)}.last\:tw-rounded-br:last-child{border-bottom-right-radius:var(--radius)}.last\:tw-rounded-tr:last-child{border-top-right-radius:var(--radius)}.focus-within\:tw-opacity-100:focus-within{opacity:1}.focus-within\:tw-outline:focus-within{outline-style:solid}.hover\:tw-border-blank-state-line-hover:hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.hover\:tw-bg-black-10:hover{--tw-bg-opacity: 1;background-color:rgb(234 235 235 / var(--tw-bg-opacity))}.hover\:tw-bg-blank-state-hover-inverse:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:tw-bg-box-neutral-hover:hover{background-color:var(--box-neutral-color-hover)}.hover\:tw-bg-box-neutral-strong-inverse-hover:hover{background-color:var(--box-neutral-strong-inverse-color-hover)}.hover\:tw-bg-box-selected-hover:hover{background-color:var(--box-selected-color-hover)}.hover\:tw-bg-button-background-hover:hover{background-color:var(--button-background-color-hover)}.hover\:tw-bg-button-background-pressed:hover{background-color:var(--button-background-color-pressed)}.hover\:tw-text-blank-state-hover:hover{--tw-text-opacity: 1;color:rgb(26 28 28 / var(--tw-text-opacity))}.hover\:tw-text-box-neutral-inverse-hover:hover{color:var(--box-neutral-inverse-color-hover)}.hover\:tw-outline:hover{outline-style:solid}.focus-visible\:tw-opacity-100:focus-visible{opacity:1}.focus-visible\:tw-ring-blue:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity)) }.active\:tw-border-blank-state-line-hover:active{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.active\:tw-bg-blank-state-pressed-inverse:active{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-color-pressed)}.active\:tw-bg-box-selected-pressed:active{background-color:var(--box-selected-color-pressed)}.active\:tw-bg-button-background-pressed:active{background-color:var(--button-background-color-pressed)}.active\:tw-text-blank-state-pressed:active{--tw-text-opacity: 1;color:rgb(8 8 8 / var(--tw-text-opacity))}.tw-group:hover .group-hover\:tw-text-box-neutral-inverse-hover{color:var(--box-neutral-inverse-color-hover)}.tw-group:hover .group-hover\:tw-opacity-100{opacity:1}.tw-group:focus .group-focus\:tw-opacity-100{opacity:1}.\[\&\:not\(\:first-child\)\]\:tw-border-l-0:not(:first-child){border-left-width:0px}.\[\&\:not\(\:first-child\)\]\:tw-border-t-0:not(:first-child){border-top-width:0px}.\[\&\>\*\]\:tw-pointer-events-none>*{pointer-events:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.28.5",
+  "version": "0.29.0",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -22,50 +22,48 @@
     "./styles": "./dist/styles.css"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
+    "@babel/core": "^7.22.11",
     "@frontify/eslint-config-typescript": "^0.16.1",
     "@testing-library/react": "^14.0.0",
-    "@types/escape-html": "^1.0.2",
-    "@types/node": "^18.17.4",
-    "@types/react": "^18.2.20",
+    "@types/node": "^18.17.12",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/sinon": "^10.0.16",
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.14",
     "cypress": "^12.17.3",
-    "cypress-real-events": "^1.10.0",
-    "eslint": "^8.46.0",
+    "cypress-real-events": "^1.10.1",
+    "eslint": "^8.48.0",
     "eslint-plugin-notice": "^0.9.10",
-    "happy-dom": "^10.9.0",
+    "happy-dom": "^10.11.2",
     "mitt": "^3.0.1",
-    "msw": "^1.2.3",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.1",
+    "msw": "^1.2.5",
+    "postcss": "^8.4.29",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.28.0",
+    "rollup": "^3.28.1",
     "sinon": "15.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.1",
+    "vite-plugin-dts": "^3.5.3",
     "vite-plugin-externals": "^0.6.2",
-    "vitest": "^0.34.1"
+    "vitest": "^0.34.3"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.6.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@frontify/fondue": "12.0.0-beta.304",
+    "@frontify/fondue": "12.0.0-beta.312",
     "@react-aria/focus": "^3.13.0",
     "@react-stately/overlays": "^3.6.0",
-    "@udecode/plate": "^21",
-    "escape-html": "^1.0.3",
+    "@udecode/plate": "^21.5.0",
     "slate": "^0.94.1",
-    "slate-react": "^0.97.1",
+    "slate-react": "^0.98.2",
     "@frontify/app-bridge": "3.0.0-beta.88",
-    "@frontify/sidebar-settings": "0.6.3"
+    "@frontify/sidebar-settings": "0.6.5"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/Link/LinkInput.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock } from '@frontify/app-bridge';
+import type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';
 import { ButtonSize, Checkbox, CheckboxState, FormControl, TextInput, TooltipPosition } from '@frontify/fondue';
 import { LinkSelector } from './LinkSelector';
 import { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';
@@ -15,7 +15,7 @@ type LinkInputProps = {
     onUrlChange?: (value: string) => void;
     onToggleTab?: (checked: boolean) => void;
     isValidUrlOrEmpty?: (url: string) => boolean;
-    appBridge: AppBridgeBlock;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
     clearable?: boolean;
     placeholder?: string;
     buttonSize?: ButtonSize;

package/src/components/Link/LinkSelector/DocumentLink.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock } from '@frontify/app-bridge';
+import type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';
 import { useEffect, useState } from 'react';
 import { PageLinks } from './PageLinks';
 import { IconColorFan16, merge } from '@frontify/fondue';
@@ -12,7 +12,7 @@ type DocumentLinkProps = {
         title: string;
         permanentLink: string;
     };
-    appBridge: AppBridgeBlock;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
     itemsToExpandInitially: InitiallyExpandedItems;

package/src/components/Link/LinkSelector/DocumentLinks.tsx

@@ -1,13 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock, Document } from '@frontify/app-bridge';
+import type { AppBridgeBlock, AppBridgeTheme, Document } from '@frontify/app-bridge';
 import { LoadingCircle } from '@frontify/fondue';
 import { ReactElement, useEffect, useState } from 'react';
 import { DocumentLink } from './DocumentLink';
 import { InitiallyExpandedItems } from '../';
 
 type DocumentLinksProps = {
-    appBridge: AppBridgeBlock;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
 };

package/src/components/Link/LinkSelector/LinkSelector.tsx

@@ -1,13 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock } from '@frontify/app-bridge';
+import type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';
 import { Button, ButtonEmphasis, ButtonSize, ButtonStyle, ButtonType, IconLink, Modal } from '@frontify/fondue';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { KeyboardEvent, ReactElement, useEffect, useState } from 'react';
 import { DocumentLinks } from './DocumentLinks';
 
 type LinkSelectorProps = {
-    appBridge: AppBridgeBlock;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
     url: string;
     onUrlChange?: (value: string) => void;
     buttonSize?: ButtonSize;

package/src/components/Link/LinkSelector/PageLink.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock, useDocumentSection } from '@frontify/app-bridge';
+import { AppBridgeBlock, AppBridgeTheme, useDocumentSection } from '@frontify/app-bridge';
 import { merge } from '@frontify/fondue';
 import { useEffect, useState } from 'react';
 import { InitiallyExpandedItems } from '../';
@@ -14,7 +14,7 @@ type DocumentLinkProps = {
     };
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
-    appBridge: AppBridgeBlock;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
     itemsToExpandInitially: InitiallyExpandedItems;
 };
 

package/src/components/Link/LinkSelector/PageLinks.tsx

@@ -1,13 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock, DocumentPage } from '@frontify/app-bridge';
+import type { AppBridgeBlock, AppBridgeTheme, DocumentPage } from '@frontify/app-bridge';
 import { LoadingCircle } from '@frontify/fondue';
 import { ReactElement, useEffect, useState } from 'react';
 import { InitiallyExpandedItems } from '../';
 import { PageLink } from './PageLink';
 
 type PageLinksProps = {
-    appBridge: AppBridgeBlock;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
     documentId: number;
     selectedUrl: string;
     onSelectUrl: (url: string) => void;

package/src/components/RichTextEditor/SerializedText.tsx

@@ -1,15 +1,15 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { useEffect, useState } from 'react';
+import { serializeRawToHtmlAsync } from '@frontify/fondue';
 import { SerializedTextProps } from './types';
-import { serializeRawToHtmlAsync } from './serializer';
 
 export const SerializedText = ({ value = '', gap, columns, show = true, plugins }: SerializedTextProps) => {
     const [html, setHtml] = useState<string | null>(null);
 
     useEffect(() => {
         (async () => {
-            setHtml(await serializeRawToHtmlAsync(value, columns, gap, plugins));
+            setHtml(await serializeRawToHtmlAsync(value, plugins, columns, gap));
         })();
     }, [value, columns, gap, plugins]);
 

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom1Plugin.tsx

@@ -42,9 +42,10 @@ const Custom1MarkupElementNode = ({ element, attributes, children, styles }: Tex
     return (
         <p
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-custom1'])}
+            style={styles}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </p>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom2Plugin.tsx

@@ -42,9 +42,10 @@ const Custom2MarkupElementNode = ({ element, attributes, children, styles }: Tex
     return (
         <p
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-custom2'])}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </p>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom3Plugin.tsx

@@ -43,9 +43,10 @@ const Custom3MarkupElementNode = ({ element, attributes, children, styles }: Tex
     return (
         <p
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-custom3'])}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </p>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading1Plugin.tsx

@@ -41,9 +41,10 @@ const Heading1MarkupElementNode = ({ element, attributes, children, styles }: Te
     return (
         <h1
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-h1'])}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </h1>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading2Plugin.tsx

@@ -39,8 +39,12 @@ class Heading2MarkupElement extends MarkupElement {
 const Heading2MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
     const align = element.align as string;
     return (
-        <h2 {...attributes} className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}>
-            <span style={styles}>{children}</span>
+        <h2
+            {...attributes}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
+        >
+            {children}
         </h2>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading3Plugin.tsx

@@ -39,8 +39,12 @@ class Heading3MarkupElement extends MarkupElement {
 const Heading3MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
     const align = element.align as string;
     return (
-        <h3 {...attributes} className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}>
-            <span style={styles}>{children}</span>
+        <h3
+            {...attributes}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
+        >
+            {children}
         </h3>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading4Plugin.tsx

@@ -40,8 +40,12 @@ class Heading4MarkupElement extends MarkupElement {
 const Heading4MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
     const align = element.align as string;
     return (
-        <h4 {...attributes} className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}>
-            <span style={styles}>{children}</span>
+        <h4
+            {...attributes}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
+        >
+            {children}
         </h4>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/imageCaptionPlugin.tsx

@@ -41,9 +41,10 @@ const ImageCaptionMarkupElementNode = ({ element, attributes, children, styles }
     return (
         <p
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-image-caption'])}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </p>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/imageTitlePlugin.tsx

@@ -41,9 +41,10 @@ const ImageTitleMarkupElementNode = ({ element, attributes, children, styles }:
     return (
         <p
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-image-title'])}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </p>
     );
 };

package/src/components/RichTextEditor/plugins/TextStylePlugins/quotePlugin.tsx

@@ -42,9 +42,10 @@ export const QuoteMarkupElementNode = ({ element, attributes, children, styles }
     return (
         <blockquote
             {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-quote'])}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
+            style={styles}
         >
-            <span style={styles}>{children}</span>
+            {children}
         </blockquote>
     );
 };

package/src/components/RichTextEditor/plugins/styles.ts

@@ -19,7 +19,6 @@ export const enum TextStyles {
 }
 export const BlockStyles: Record<string, CSSProperties & { hover?: CSSProperties }> = {
     [TextStyles.heading1]: {
-        display: 'inline-block',
         fontSize: 'var(--f-theme-settings-heading1-font-size)',
         lineHeight: 'var(--f-theme-settings-heading1-line-height)',
         marginTop: 'var(--f-theme-settings-heading1-margin-top)',

package/dist/components/RichTextEditor/serializer/nodes/button.es.js

@@ -1,17 +0,0 @@
-import { reactCssPropsToCss as s } from "../utlis/reactCssPropsToCss.es.js";
-import { BUTTON_PLUGIN as i } from "../../plugins/ButtonPlugin/createButtonPlugin.es.js";
-const b = (e, n, a, u) => {
-  const l = u[i], o = e.buttonStyle ?? "primary", c = `button${o.charAt(0).toUpperCase()}${o.slice(1)}`, t = l[c], r = s(t);
-  return `<a href="${e.url}"
-                target="${e.target ?? "_blank"}"
-                dir="auto"
-                style="${r}"
-                class="${a}"
-                onmouseenter="this.setAttribute('style', '${r} ${s(t == null ? void 0 : t.hover)}');"
-                onmouseleave="this.setAttribute('style', '${s(t)}');"
-                >${n}</a>`;
-};
-export {
-  b as buttonNode
-};
-//# sourceMappingURL=button.es.js.map

package/dist/components/RichTextEditor/serializer/nodes/button.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/button.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { TElement } from '@udecode/plate';\n\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\nimport { BUTTON_PLUGIN } from '../../plugins';\n\nexport type ButtonStylesType = Record<string, Record<string, CSSProperties & { hover?: CSSProperties }>>;\n\nexport const buttonNode = (node: TElement, children: string, defaultClassNames: string, styles: ButtonStylesType) => {\n    const buttonStyles = styles[BUTTON_PLUGIN];\n    const buttonTypeString = (node.buttonStyle as string) ?? 'primary';\n    const buttonType = `button${buttonTypeString.charAt(0).toUpperCase()}${buttonTypeString.slice(1)}`;\n    const buttonStyle = buttonStyles[buttonType];\n\n    const defaultStyles = reactCssPropsToCss(buttonStyle);\n\n    return `<a href=\"${node.url}\"\n                target=\"${node.target ?? '_blank'}\"\n                dir=\"auto\"\n                style=\"${defaultStyles}\"\n                class=\"${defaultClassNames}\"\n                onmouseenter=\"this.setAttribute('style', '${defaultStyles} ${reactCssPropsToCss(buttonStyle?.hover)}');\"\n                onmouseleave=\"this.setAttribute('style', '${reactCssPropsToCss(buttonStyle)}');\"\n                >${children}</a>`;\n};\n"],"names":["buttonNode","node","children","defaultClassNames","styles","buttonStyles","BUTTON_PLUGIN","buttonTypeString","buttonType","buttonStyle","defaultStyles","reactCssPropsToCss"],"mappings":";;AAUO,MAAMA,IAAa,CAACC,GAAgBC,GAAkBC,GAA2BC,MAA6B;AAC3G,QAAAC,IAAeD,EAAOE,CAAa,GACnCC,IAAoBN,EAAK,eAA0B,WACnDO,IAAa,SAASD,EAAiB,OAAO,CAAC,EAAE,YAAY,CAAC,GAAGA,EAAiB,MAAM,CAAC,CAAC,IAC1FE,IAAcJ,EAAaG,CAAU,GAErCE,IAAgBC,EAAmBF,CAAW;AAE7C,SAAA,YAAYR,EAAK,GAAG;AAAA,0BACLA,EAAK,UAAU,QAAQ;AAAA;AAAA,yBAExBS,CAAa;AAAA,yBACbP,CAAiB;AAAA,4DACkBO,CAAa,IAAIC,EAAmBF,KAAA,gBAAAA,EAAa,KAAK,CAAC;AAAA,4DACvDE,EAAmBF,CAAW,CAAC;AAAA,mBACxEP,CAAQ;AAC3B;"}

package/dist/components/RichTextEditor/serializer/nodes/checkItemNode.es.js

@@ -1,19 +0,0 @@
-import { merge as r } from "@frontify/fondue";
-import { reactCssPropsToCss as i } from "../utlis/reactCssPropsToCss.es.js";
-const w = (t, e, s, c) => `<div dir="auto" disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${s}" style="margin-left:${(t.indent ?? 0) * 24}px;">
-    <div dir="auto" class="tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5">
-        <input
-            class="tw-w-4 tw-h-4 tw-m-0"
-            type="checkbox"
-            ${t.checked ? "checked" : ""}
-            onclick="return false;" />
-    </div>
-    <span dir="auto" class="${r([
-  "tw-flex-1 tw-focus:outline-none",
-  t.checked ? "!tw-line-through" : ""
-])}" style="${i(c[t.children[0].textStyle])}">${e}</span>
-</div>`;
-export {
-  w as checkItemNode
-};
-//# sourceMappingURL=checkItemNode.es.js.map

package/dist/components/RichTextEditor/serializer/nodes/checkItemNode.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkItemNode.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/checkItemNode.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { merge } from '@frontify/fondue';\nimport { TElement } from '@udecode/plate';\n\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\n\nexport const checkItemNode = (\n    node: TElement,\n    children: string,\n    defaultClassNames: string,\n    styles: Record<string, CSSProperties & { hover?: CSSProperties }>,\n) => {\n    return `<div dir=\"auto\" disabled class=\"tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}\" style=\"margin-left:${\n        ((node.indent as number) ?? 0) * 24\n    }px;\">\n    <div dir=\"auto\" class=\"tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5\">\n        <input\n            class=\"tw-w-4 tw-h-4 tw-m-0\"\n            type=\"checkbox\"\n            ${node.checked ? 'checked' : ''}\n            onclick=\"return false;\" />\n    </div>\n    <span dir=\"auto\" class=\"${merge([\n        'tw-flex-1 tw-focus:outline-none',\n        node.checked ? '!tw-line-through' : '',\n    ])}\" style=\"${reactCssPropsToCss(styles[node.children[0].textStyle as string])}\">${children}</span>\n</div>`;\n};\n"],"names":["checkItemNode","node","children","defaultClassNames","styles","merge","reactCssPropsToCss"],"mappings":";;AAQO,MAAMA,IAAgB,CACzBC,GACAC,GACAC,GACAC,MAEO,qFAAqFD,CAAiB,yBACvGF,EAAK,UAAqB,KAAK,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,cAKUA,EAAK,UAAU,YAAY,EAAE;AAAA;AAAA;AAAA,8BAGbI,EAAM;AAAA,EAC5B;AAAA,EACAJ,EAAK,UAAU,qBAAqB;AACvC,CAAA,CAAC,YAAYK,EAAmBF,EAAOH,EAAK,SAAS,CAAC,EAAE,SAAmB,CAAC,CAAC,KAAKC,CAAQ;AAAA;"}

package/dist/components/RichTextEditor/serializer/nodes/default.es.js

@@ -1,32 +0,0 @@
-import { merge as u } from "@frontify/fondue";
-import { reactCssPropsToCss as y } from "../utlis/reactCssPropsToCss.es.js";
-import { TextStyles as $ } from "../../plugins/styles.es.js";
-const e = (r, t, a, p) => {
-  const i = y(a);
-  return r.type === $.heading1 ? `<h1 dir="auto" class="${u([p, "a-h1"])}">${o(
-    t,
-    i
-  )}</h1>` : r.type === $.heading2 ? `<h2 dir="auto" class="${p}">${o(t, i)}</h2>` : r.type === $.heading3 ? `<h3 dir="auto" class="${p}">${o(t, i)}</h3>` : r.type === $.heading4 ? `<h4 dir="auto" class="${p}">${o(t, i)}</h4>` : r.type === $.custom1 ? `<p dir="auto" class="${u([p, "a-custom1"])}">${o(
-    t,
-    i
-  )}</p>` : r.type === $.custom2 ? `<p dir="auto" class="${u([p, "a-custom2"])}">${o(
-    t,
-    i
-  )}</p>` : r.type === $.custom3 ? `<p dir="auto" class="${u([p, "a-custom3"])}">${o(
-    t,
-    i
-  )}</p>` : r.type === $.quote ? `<p dir="auto" class="${u([p, "a-quote"])}">${o(
-    t,
-    i
-  )}</p>` : r.type === $.imageTitle ? `<p dir="auto" class="${u([p, "a-image-title"])}">${o(
-    t,
-    i
-  )}</p>` : r.type === $.imageCaption ? `<p dir="auto" class="${u([p, "a-image-caption"])}">${o(
-    t,
-    i
-  )}</p>` : `<p dir="auto" class="${p}">${o(t, i)}</p>`;
-}, o = (r, t) => `<span dir="auto" style="${t}">${r}</span>`;
-export {
-  e as defaultNode
-};
-//# sourceMappingURL=default.es.js.map

package/dist/components/RichTextEditor/serializer/nodes/default.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"default.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/default.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { merge } from '@frontify/fondue';\nimport { TElement } from '@udecode/plate';\n\nimport { TextStyles } from '../../plugins';\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\n\nexport const defaultNode = (node: TElement, children: string, styles: CSSProperties, defaultClassNames: string) => {\n    const defaultStyles = reactCssPropsToCss(styles);\n\n    if (node.type === TextStyles.heading1) {\n        return `<h1 dir=\"auto\" class=\"${merge([defaultClassNames, 'a-h1'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</h1>`;\n    }\n    if (node.type === TextStyles.heading2) {\n        return `<h2 dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</h2>`;\n    }\n    if (node.type === TextStyles.heading3) {\n        return `<h3 dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</h3>`;\n    }\n    if (node.type === TextStyles.heading4) {\n        return `<h4 dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</h4>`;\n    }\n    if (node.type === TextStyles.custom1) {\n        return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-custom1'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</p>`;\n    }\n    if (node.type === TextStyles.custom2) {\n        return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-custom2'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</p>`;\n    }\n    if (node.type === TextStyles.custom3) {\n        return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-custom3'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</p>`;\n    }\n    if (node.type === TextStyles.quote) {\n        return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-quote'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</p>`;\n    }\n    if (node.type === TextStyles.imageTitle) {\n        return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-image-title'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</p>`;\n    }\n    if (node.type === TextStyles.imageCaption) {\n        return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-image-caption'])}\">${getStyledChild(\n            children,\n            defaultStyles,\n        )}</p>`;\n    }\n\n    return `<p dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</p>`;\n};\n\nconst getStyledChild = (children: string, styles: string) => `<span dir=\"auto\" style=\"${styles}\">${children}</span>`;\n"],"names":["defaultNode","node","children","styles","defaultClassNames","defaultStyles","reactCssPropsToCss","TextStyles","merge","getStyledChild"],"mappings":";;;AASO,MAAMA,IAAc,CAACC,GAAgBC,GAAkBC,GAAuBC,MAA8B;AACzG,QAAAC,IAAgBC,EAAmBH,CAAM;AAE3C,SAAAF,EAAK,SAASM,EAAW,WAClB,yBAAyBC,EAAM,CAACJ,GAAmB,MAAM,CAAC,CAAC,KAAKK;AAAA,IACnEP;AAAA,IACAG;AAAA,EACH,CAAA,UAEDJ,EAAK,SAASM,EAAW,WAClB,yBAAyBH,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC,UAE7FJ,EAAK,SAASM,EAAW,WAClB,yBAAyBH,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC,UAE7FJ,EAAK,SAASM,EAAW,WAClB,yBAAyBH,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC,UAE7FJ,EAAK,SAASM,EAAW,UAClB,wBAAwBC,EAAM,CAACJ,GAAmB,WAAW,CAAC,CAAC,KAAKK;AAAA,IACvEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,UAClB,wBAAwBC,EAAM,CAACJ,GAAmB,WAAW,CAAC,CAAC,KAAKK;AAAA,IACvEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,UAClB,wBAAwBC,EAAM,CAACJ,GAAmB,WAAW,CAAC,CAAC,KAAKK;AAAA,IACvEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,QAClB,wBAAwBC,EAAM,CAACJ,GAAmB,SAAS,CAAC,CAAC,KAAKK;AAAA,IACrEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,aAClB,wBAAwBC,EAAM,CAACJ,GAAmB,eAAe,CAAC,CAAC,KAAKK;AAAA,IAC3EP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,eAClB,wBAAwBC,EAAM,CAACJ,GAAmB,iBAAiB,CAAC,CAAC,KAAKK;AAAA,IAC7EP;AAAA,IACAG;AAAA,EACH,CAAA,SAGE,wBAAwBD,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC;AAChG,GAEMI,IAAiB,CAACP,GAAkBC,MAAmB,2BAA2BA,CAAM,KAAKD,CAAQ;"}

package/dist/components/RichTextEditor/serializer/nodes/link.es.js

@@ -1,15 +0,0 @@
-import p from "escape-html";
-import { LINK_PLUGIN as e } from "../../plugins/LinkPlugin/id.es.js";
-import { reactCssPropsToCss as f } from "../utlis/reactCssPropsToCss.es.js";
-const u = (r, a, s, $) => {
-  var l;
-  if (r.chosenLink) {
-    const { chosenLink: t } = r;
-    return `<a dir="auto" class="${s}" style="${f($[e])}" target=${t != null && t.openInNewTab ? "_blank" : "_self"} href="${p((l = t == null ? void 0 : t.searchResult) == null ? void 0 : l.link)}">${a}</a>`;
-  }
-  return `<a dir="auto" class="${s}" style="${f($[e])}" target="${(r == null ? void 0 : r.target) ?? "_blank"}" href="${p(r.url)}">${a}</a>`;
-};
-export {
-  u as linkNode
-};
-//# sourceMappingURL=link.es.js.map

package/dist/components/RichTextEditor/serializer/nodes/link.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/link.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport escapeHtml from 'escape-html';\nimport { TElement } from '@udecode/plate';\n\nimport { LINK_PLUGIN } from '../../plugins/LinkPlugin/id';\nimport { TLinkElement } from '../../plugins/LinkPlugin/types';\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\n\nexport const linkNode = (\n    node: TElement,\n    children: string,\n    defaultClassNames: string,\n    styles: Record<string, CSSProperties & { hover?: CSSProperties }>,\n) => {\n    if (node.chosenLink) {\n        const { chosenLink } = node as TLinkElement;\n        return `<a dir=\"auto\" class=\"${defaultClassNames}\" style=\"${reactCssPropsToCss(styles[LINK_PLUGIN])}\" target=${\n            chosenLink?.openInNewTab ? '_blank' : '_self'\n        } href=\"${escapeHtml(chosenLink?.searchResult?.link)}\">${children}</a>`;\n    }\n    return `<a dir=\"auto\" class=\"${defaultClassNames}\" style=\"${reactCssPropsToCss(styles[LINK_PLUGIN])}\" target=\"${\n        node?.target ?? '_blank'\n    }\" href=\"${escapeHtml(node.url as string)}\">${children}</a>`;\n};\n"],"names":["linkNode","node","children","defaultClassNames","styles","chosenLink","reactCssPropsToCss","LINK_PLUGIN","escapeHtml","_a"],"mappings":";;;AAUO,MAAMA,IAAW,CACpBC,GACAC,GACAC,GACAC,MACC;;AACD,MAAIH,EAAK,YAAY;AACX,UAAA,EAAE,YAAAI,EAAe,IAAAJ;AAChB,WAAA,wBAAwBE,CAAiB,YAAYG,EAAmBF,EAAOG,CAAW,CAAC,CAAC,YAC/FF,KAAA,QAAAA,EAAY,eAAe,WAAW,OAC1C,UAAUG,GAAWC,IAAAJ,KAAA,gBAAAA,EAAY,iBAAZ,gBAAAI,EAA0B,IAAI,CAAC,KAAKP,CAAQ;AAAA,EACrE;AACA,SAAO,wBAAwBC,CAAiB,YAAYG,EAAmBF,EAAOG,CAAW,CAAC,CAAC,cAC/FN,KAAA,gBAAAA,EAAM,WAAU,QACpB,WAAWO,EAAWP,EAAK,GAAa,CAAC,KAAKC,CAAQ;AAC1D;"}

package/dist/components/RichTextEditor/serializer/nodes/mentionHtmlNode.es.js

@@ -1,12 +0,0 @@
-import n from "react-dom";
-import { MentionMarkupElementNode as o } from "@frontify/fondue";
-const d = (r, { mentionable: e } = {}) => {
-  if (!e)
-    return "";
-  const t = document.createElement("div");
-  return n.render(o(e)({ element: r }), t), t.innerHTML;
-};
-export {
-  d as mentionHtmlNode
-};
-//# sourceMappingURL=mentionHtmlNode.es.js.map

package/dist/components/RichTextEditor/serializer/nodes/mentionHtmlNode.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mentionHtmlNode.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/mentionHtmlNode.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport ReactDOM from 'react-dom';\nimport { TElement, TMentionElement } from '@udecode/plate';\nimport { MappedMentionableItems, MentionMarkupElementNode } from '@frontify/fondue';\n\ntype MentionHtmlNodeProps = { mentionable?: MappedMentionableItems };\n\nexport const mentionHtmlNode = (node: TElement, { mentionable }: MentionHtmlNodeProps = {}) => {\n    if (!mentionable) {\n        return '';\n    }\n\n    const div = document.createElement('div');\n    ReactDOM.render(MentionMarkupElementNode(mentionable)({ element: node as TMentionElement }), div);\n    return div.innerHTML;\n};\n"],"names":["mentionHtmlNode","node","mentionable","div","ReactDOM","MentionMarkupElementNode"],"mappings":";;AAQO,MAAMA,IAAkB,CAACC,GAAgB,EAAE,aAAAC,EAAY,IAA0B,CAAA,MAAO;AAC3F,MAAI,CAACA;AACM,WAAA;AAGL,QAAAC,IAAM,SAAS,cAAc,KAAK;AAC/B,SAAAC,EAAA,OAAOC,EAAyBH,CAAW,EAAE,EAAE,SAASD,EAAA,CAAyB,GAAGE,CAAG,GACzFA,EAAI;AACf;"}