@frontify/guideline-blocks-settings 0.28.3 → 0.28.5

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-3{margin-top:.75rem}.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-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-red-65{--tw-text-opacity: 1;color:rgb(229 33 68 / var(--tw-text-opacity))}.tw-text-text{color:var(--text-color)}.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-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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.28.3",
+  "version": "0.28.5",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -22,12 +22,12 @@
     "./styles": "./dist/styles.css"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.22.10",
     "@frontify/eslint-config-typescript": "^0.16.1",
     "@testing-library/react": "^14.0.0",
     "@types/escape-html": "^1.0.2",
-    "@types/node": "^20.4.7",
-    "@types/react": "^18.2.18",
+    "@types/node": "^18.17.4",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/sinon": "^10.0.16",
     "@vitejs/plugin-react": "^4.0.4",
@@ -36,19 +36,19 @@
     "cypress-real-events": "^1.10.0",
     "eslint": "^8.46.0",
     "eslint-plugin-notice": "^0.9.10",
-    "happy-dom": "^10.7.0",
+    "happy-dom": "^10.9.0",
     "mitt": "^3.0.1",
     "msw": "^1.2.3",
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.27.2",
+    "rollup": "^3.28.0",
     "sinon": "15.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vite-plugin-dts": "^3.5.0",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.1",
     "vite-plugin-externals": "^0.6.2",
     "vitest": "^0.34.1"
   },
@@ -57,15 +57,15 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@frontify/fondue": "12.0.0-beta.296",
+    "@frontify/fondue": "12.0.0-beta.304",
     "@react-aria/focus": "^3.13.0",
     "@react-stately/overlays": "^3.6.0",
     "@udecode/plate": "^21",
     "escape-html": "^1.0.3",
     "slate": "^0.94.1",
     "slate-react": "^0.97.1",
-    "@frontify/app-bridge": "3.0.0-beta.86",
-    "@frontify/sidebar-settings": "0.6.1"
+    "@frontify/app-bridge": "3.0.0-beta.88",
+    "@frontify/sidebar-settings": "0.6.3"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/Attachments/Attachments.tsx

@@ -21,7 +21,7 @@ import {
     FlyoutPlacement,
     IconCaretDown12,
     IconPaperclip16,
-    Tooltip,
+    LegacyTooltip as Tooltip,
     TooltipPosition,
 } from '@frontify/fondue';
 import { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';

package/src/components/BlockItemWrapper/Toolbar.tsx

@@ -5,7 +5,7 @@ import {
     Flyout,
     IconDotsHorizontal16,
     MenuItemContentSize,
-    Tooltip,
+    LegacyTooltip as Tooltip,
     TooltipPosition,
 } from '@frontify/fondue';
 import { ToolbarProps } from './types';

package/src/components/DownloadButton/DownloadButton.tsx

@@ -2,7 +2,7 @@
 
 import { DownloadButtonProps } from './types';
 import { useFocusRing } from '@react-aria/focus';
-import { FOCUS_STYLE, IconArrowCircleDown16, Tooltip, TooltipPosition } from '@frontify/fondue';
+import { FOCUS_STYLE, IconArrowCircleDown16, LegacyTooltip as Tooltip, TooltipPosition } from '@frontify/fondue';
 import { joinClassNames } from '../../utilities';
 
 export const DownloadButton = ({ onDownload }: DownloadButtonProps) => {

package/src/components/Link/LinkInput.spec.ct.tsx

@@ -0,0 +1,142 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { withAppBridgeBlockStubs } from '@frontify/app-bridge';
+import { mount } from 'cypress/react18';
+import { LinkInput } from './LinkInput';
+import { ButtonSize, CheckboxState } from '@frontify/fondue';
+
+const LINK_INPUT_ID = '[data-test-id="link-input"]';
+const TEXT_INPUT_ID = '[data-test-id="text-input"]';
+const INPUT_LABEL_CONTAINER_ID = '[data-test-id="input-label-container"]';
+const BUTTON_ID = '[data-test-id="button"]';
+const CLEAR_ICON_ID = '[data-test-id="clear-icon"]';
+const CHECKBOX_ID = '[data-test-id="checkbox-input"]';
+
+describe('Link Input', () => {
+    it('renders the link input', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs />);
+        cy.get(LINK_INPUT_ID).should('exist');
+    });
+
+    it('renders the link inpus label, placeholder and info', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs label="Custom Label" info="Custom Info" placeholder="Custom Placeholder" />);
+        cy.get(LINK_INPUT_ID).should('exist');
+        cy.get(INPUT_LABEL_CONTAINER_ID).contains('Custom Label');
+        cy.get(INPUT_LABEL_CONTAINER_ID).contains('Custom Info');
+        cy.get(TEXT_INPUT_ID).should('have.attr', 'placeholder', 'Custom Placeholder');
+    });
+
+    it('renders the link inpu with a valid url', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs url="https://example.com" />);
+        cy.get(LINK_INPUT_ID).should('exist');
+        cy.get(TEXT_INPUT_ID).should('have.value', 'https://example.com');
+    });
+
+    it('renders with clear icon', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs url="https://frontify.com" clearable />);
+
+        cy.get(CLEAR_ICON_ID).should('exist');
+    });
+
+    it('renders without clear icon', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs clearable={false} />);
+
+        cy.get(TEXT_INPUT_ID).click({ force: true });
+        cy.get(TEXT_INPUT_ID).type('https://frontify.com').type('{enter}');
+        cy.get(CLEAR_ICON_ID).should('not.exist');
+    });
+
+    it('toggles checkbox on click', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(
+            <LinkInputWithStubs
+                onToggleTab={cy.stub().as('onToggleTab')}
+                url="https://frontify.com"
+                openInNewTab={false}
+            />,
+        );
+
+        cy.get(CHECKBOX_ID).should('not.be.checked');
+        cy.get(CHECKBOX_ID).click({ force: true });
+        cy.get('@onToggleTab').should('be.called.with', true);
+    });
+
+    it('toggles checkbox on click if its already checked', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs onToggleTab={cy.stub().as('onToggleTab')} url="https://frontify.com" openInNewTab />);
+
+        cy.get(CHECKBOX_ID).should('be.checked');
+        cy.get(CHECKBOX_ID).click({ force: true });
+        cy.get('@onToggleTab').should('be.called.with', false);
+    });
+
+    it('handles "Checked" state from newTab', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(
+            <LinkInputWithStubs
+                onToggleTab={cy.stub().as('onToggleTab')}
+                url="https://frontify.com"
+                newTab={CheckboxState.Checked}
+            />,
+        );
+        cy.get(CHECKBOX_ID).should('be.checked');
+        cy.get(CHECKBOX_ID).click({ force: true });
+        cy.get('@onToggleTab').should('be.called.with', false);
+    });
+
+    it('handles "Unchecked" state from newTab', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(
+            <LinkInputWithStubs
+                onToggleTab={cy.stub().as('onToggleTab')}
+                url="https://frontify.com"
+                newTab={CheckboxState.Unchecked}
+            />,
+        );
+        cy.get(CHECKBOX_ID).should('not.be.checked');
+        cy.get(CHECKBOX_ID).click({ force: true });
+        cy.get('@onToggleTab').should('be.called.with', true);
+    });
+
+    it('types into search field', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs onUrlChange={cy.stub().as('onUrlChange')} />);
+
+        cy.get(TEXT_INPUT_ID).click({ force: true });
+        cy.get(TEXT_INPUT_ID).type('https://frontify.com');
+        cy.get('@onUrlChange').should('be.called.with', 'https://frontify.com');
+    });
+
+    it('shows internal link button', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs />);
+
+        cy.get(BUTTON_ID).should('exist');
+    });
+
+    it('hides internal link button', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs hideInternalLinkButton />);
+
+        cy.get(BUTTON_ID).should('not.exist');
+    });
+
+    it('renders * if input is required', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs required label="Link" />);
+
+        cy.get(INPUT_LABEL_CONTAINER_ID).contains('*');
+    });
+
+    it('renders custom buttonsize', () => {
+        const [LinkInputWithStubs] = withAppBridgeBlockStubs(LinkInput, {});
+        mount(<LinkInputWithStubs buttonSize={ButtonSize.Small} />);
+
+        cy.get(BUTTON_ID).should('have.class', 'tw-text-body-small');
+    });
+});

package/src/components/Link/LinkInput.tsx

@@ -0,0 +1,80 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import { ButtonSize, Checkbox, CheckboxState, FormControl, TextInput, TooltipPosition } from '@frontify/fondue';
+import { LinkSelector } from './LinkSelector';
+import { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';
+
+type LinkInputProps = {
+    url?: string;
+    info?: string;
+    label?: string;
+    required?: boolean;
+    newTab?: CheckboxState;
+    openInNewTab?: boolean;
+    onUrlChange?: (value: string) => void;
+    onToggleTab?: (checked: boolean) => void;
+    isValidUrlOrEmpty?: (url: string) => boolean;
+    appBridge: AppBridgeBlock;
+    clearable?: boolean;
+    placeholder?: string;
+    buttonSize?: ButtonSize;
+    hideInternalLinkButton?: boolean;
+};
+
+export const LinkInput = ({
+    onUrlChange,
+    onToggleTab,
+    isValidUrlOrEmpty,
+    appBridge,
+    clearable,
+    placeholder,
+    newTab,
+    openInNewTab,
+    url = '',
+    required,
+    info,
+    label,
+    buttonSize,
+    hideInternalLinkButton,
+}: LinkInputProps) => {
+    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);
+    const checkedState = newTab ?? (openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked);
+    return (
+        <div data-test-id="link-input">
+            <FormControl
+                label={{
+                    children: label,
+                    htmlFor: 'url',
+                    required,
+                    tooltip: info ? { content: info, position: TooltipPosition.Top } : undefined,
+                }}
+            >
+                <TextInput
+                    id="url"
+                    value={url}
+                    clearable={clearable}
+                    onChange={onUrlChange}
+                    placeholder={placeholder ?? 'https://example.com'}
+                    focusOnMount
+                />
+            </FormControl>
+            {!isUrlValid && <div className="tw-text-text-negative tw-mt-1 tw-text-s">Please enter a valid URL.</div>}
+
+            {!hideInternalLinkButton && (
+                <div className="tw-mt-3">
+                    <LinkSelector
+                        url={url}
+                        appBridge={appBridge}
+                        onUrlChange={onUrlChange}
+                        buttonSize={buttonSize ?? ButtonSize.Medium}
+                    />
+                </div>
+            )}
+
+            <div className="tw-mt-3">
+                <Checkbox value="new-tab" label="Open in new tab" state={checkedState} onChange={onToggleTab} />
+            </div>
+        </div>
+    );
+};

package/src/components/{RichTextEditor/plugins/shared → Link}/LinkSelector/DocumentLink.tsx

@@ -4,7 +4,7 @@ import { AppBridgeBlock } from '@frontify/app-bridge';
 import { useEffect, useState } from 'react';
 import { PageLinks } from './PageLinks';
 import { IconColorFan16, merge } from '@frontify/fondue';
-import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+import { InitiallyExpandedItems } from '../';
 
 type DocumentLinkProps = {
     document: {

package/src/components/{RichTextEditor/plugins/shared → Link}/LinkSelector/DocumentLinks.tsx

@@ -3,8 +3,8 @@
 import { AppBridgeBlock, Document } from '@frontify/app-bridge';
 import { LoadingCircle } from '@frontify/fondue';
 import { ReactElement, useEffect, useState } from 'react';
-import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
 import { DocumentLink } from './DocumentLink';
+import { InitiallyExpandedItems } from '../';
 
 type DocumentLinksProps = {
     appBridge: AppBridgeBlock;

package/src/components/{RichTextEditor/plugins/shared → Link}/LinkSelector/LinkSelector.tsx

@@ -9,10 +9,16 @@ import { DocumentLinks } from './DocumentLinks';
 type LinkSelectorProps = {
     appBridge: AppBridgeBlock;
     url: string;
-    onUrlChange: (value: string) => void;
+    onUrlChange?: (value: string) => void;
+    buttonSize?: ButtonSize;
 };
 
-export const LinkSelector = ({ appBridge, url, onUrlChange }: LinkSelectorProps): ReactElement => {
+export const LinkSelector = ({
+    appBridge,
+    url,
+    onUrlChange,
+    buttonSize = ButtonSize.Medium,
+}: LinkSelectorProps): ReactElement => {
     const { open: openLinkTree, isOpen: isLinkTreeOpen, close: closeLinkTree } = useOverlayTriggerState({});
     const [selectedUrl, setSelectedUrl] = useState<string>(url);
 
@@ -33,7 +39,7 @@ export const LinkSelector = ({ appBridge, url, onUrlChange }: LinkSelectorProps)
     }, [url, selectedUrl]);
 
     const saveLink = () => {
-        onUrlChange(selectedUrl);
+        onUrlChange?.(selectedUrl);
         closeLinkTree();
     };
 
@@ -41,7 +47,7 @@ export const LinkSelector = ({ appBridge, url, onUrlChange }: LinkSelectorProps)
         <div data-test-id="internal-link-selector" onKeyDown={onPressEnter}>
             <Button
                 icon={<IconLink />}
-                size={ButtonSize.Medium}
+                size={buttonSize}
                 type={ButtonType.Button}
                 style={ButtonStyle.Default}
                 emphasis={ButtonEmphasis.Default}

package/src/components/{RichTextEditor/plugins/shared → Link}/LinkSelector/PageLink.tsx

@@ -3,7 +3,7 @@
 import { AppBridgeBlock, useDocumentSection } from '@frontify/app-bridge';
 import { merge } from '@frontify/fondue';
 import { useEffect, useState } from 'react';
-import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+import { InitiallyExpandedItems } from '../';
 import { SectionLink } from './SectionLink';
 
 type DocumentLinkProps = {

package/src/components/{RichTextEditor/plugins/shared → Link}/LinkSelector/PageLinks.tsx

@@ -3,7 +3,7 @@
 import { AppBridgeBlock, DocumentPage } from '@frontify/app-bridge';
 import { LoadingCircle } from '@frontify/fondue';
 import { ReactElement, useEffect, useState } from 'react';
-import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+import { InitiallyExpandedItems } from '../';
 import { PageLink } from './PageLink';
 
 type PageLinksProps = {
@@ -30,7 +30,13 @@ export const PageLinks = ({
         appBridge
             .getDocumentPagesByDocumentId(documentId)
             .then((_pages) => {
-                setPages(_pages);
+                const pagesWithCategories = _pages
+                    .filter((page) => !!page.category)
+                    .sort((a, b) =>
+                        a.category.sort === b.category.sort ? a.sort - b.sort : a.category.sort - b.category.sort,
+                    );
+                const pagesWithoutCategories = _pages.filter((page) => !page.category).sort((a, b) => a.sort - b.sort);
+                setPages([...pagesWithCategories, ...pagesWithoutCategories]);
             })
             .finally(() => {
                 setIsLoading(false);

package/src/components/Link/index.ts

@@ -0,0 +1,6 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './LinkSelector';
+export * from './LinkInput';
+export * from './utils';
+export * from './types';

package/src/components/Link/types.ts

@@ -0,0 +1,6 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export type InitiallyExpandedItems = {
+    documentId?: number;
+    pageId?: number;
+};

package/src/components/{RichTextEditor/plugins/LinkPlugin → Link}/utils/getUrl.ts

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { ELEMENT_LINK, PlateEditor, getAboveNode } from '@udecode/plate';
-import { TLinkElement } from '../types';
+import { TLinkElement } from '../../RichTextEditor/plugins/LinkPlugin/types';
 
 const getLinkNode = (editor: PlateEditor, cb: (link: TLinkElement) => string): string => {
     const linkNode = getAboveNode<TLinkElement>(editor, { match: { type: ELEMENT_LINK } });
@@ -24,7 +24,3 @@ export const getUrl = (editor: PlateEditor) => {
 export const getUrlFromLinkOrLegacyLink = (link: TLinkElement): string => {
     return link.url || link.chosenLink?.searchResult?.link || '';
 };
-
-export const getUrlFromEditor = (editor: PlateEditor) => {
-    return getLinkNode(editor, getUrlFromLinkOrLegacyLink);
-};

package/src/components/{RichTextEditor/plugins/LinkPlugin → Link}/utils/index.ts

@@ -2,3 +2,4 @@
 
 export * from './getUrl';
 export * from './relativeUrlRegex';
+export * from './url';

package/src/components/{RichTextEditor/plugins/LinkPlugin → Link}/utils/url.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { addHttps } from '../../../../../helpers';
+import { addHttps } from '../../../helpers';
 import { relativeUrlRegex } from './relativeUrlRegex';
 
 export const isValidUrl = (url: string) => {
@@ -16,6 +16,6 @@ export const isValidUrl = (url: string) => {
     }
 };
 
-export const isValidUrlOrEmpty = (url: string) => {
+export const isValidUrlOrEmpty = (url: string): boolean => {
     return isValidUrl(addHttps(url)) || url === '';
 };

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts

@@ -11,7 +11,7 @@ import { getButtonStyle } from '../../../utils/getButtonStyle';
 import { AppBridgeBlock } from '@frontify/app-bridge';
 import { CheckboxState } from '@frontify/fondue';
 import { addHttps } from '../../../../../../../helpers';
-import { isValidUrlOrEmpty } from '../../../../LinkPlugin/utils/url';
+import { isValidUrlOrEmpty } from '../../../../../../Link/utils/url';
 
 const initialState: InsertModalStateProps = {
     url: '',

package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts

@@ -4,7 +4,7 @@ import { AppBridgeBlock } from '@frontify/app-bridge';
 import { Plugin, PluginProps } from '@frontify/fondue';
 import { RangeBeforeOptions, createPluginFactory } from '@udecode/plate';
 import type { CSSProperties } from 'react';
-import { isValidUrl } from '../LinkPlugin/utils/url';
+import { isValidUrl } from '../../../Link/utils/url';
 import { ButtonMarkupElement } from './ButtonMarkupElement';
 import { ButtonButton } from './components/ButtonButton';
 import { CustomFloatingButton } from './components/FloatingButton/CustomFloatingButton';

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.ts

@@ -26,7 +26,7 @@ import {
     useVirtualFloatingLink,
 } from '@udecode/plate';
 import { useCallback, useEffect } from 'react';
-import { getUrlFromEditor } from '../../utils';
+import { getUrlFromEditor } from '../../../';
 
 export const useFloatingLinkEdit = ({ floatingOptions, ...props }: FloatingLinkProps): HTMLPropsAs<'div'> => {
     const editor = useEditorRef();

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.tsx

@@ -6,14 +6,13 @@ import {
     ButtonEmphasis,
     ButtonSize,
     ButtonStyle,
-    Checkbox,
     FormControl,
     IconCheckMark20,
     TextInput,
 } from '@frontify/fondue';
 import { FC, ReactNode } from 'react';
-import { LinkSelector } from '../../../shared/LinkSelector';
 import { InsertModalStateProps } from './types';
+import { LinkInput } from '../../../../../Link/LinkInput';
 
 type InsertModalProps = {
     state: InsertModalStateProps;
@@ -23,7 +22,7 @@ type InsertModalProps = {
     onCancel: () => void;
     onSave: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => void;
     hasValues: boolean;
-    isValidUrlOrEmpty: (url: string) => boolean | undefined;
+    isValidUrlOrEmpty: (url: string) => boolean;
     testId?: string;
     children?: ReactNode;
     appBridge: AppBridgeBlock;
@@ -55,31 +54,15 @@ export const InsertModal: FC<InsertModalProps> = ({
 
         {children}
 
-        <div className="tw-pt-5">
-            <FormControl
-                label={{
-                    children: 'URL',
-                    htmlFor: 'url',
-                    required: true,
-                }}
-            >
-                <TextInput
-                    id="url"
-                    value={state.url}
-                    placeholder="https://example.com"
-                    focusOnMount
-                    onChange={onUrlChange}
-                />
-            </FormControl>
-            {!isValidUrlOrEmpty(state?.url) && <div className="tw-text-red-65 tw-mt-3">Please enter a valid URL.</div>}
-        </div>
-
-        <div className="tw-mt-3">
-            <LinkSelector url={state.url} appBridge={appBridge} onUrlChange={onUrlChange} />
-        </div>
-
-        <div className="tw-mt-3">
-            <Checkbox value="new-tab" label="Open in new tab" state={state.newTab} onChange={onToggleTab} />
+        <div className="tw-mt-5">
+            <LinkInput
+                url={state.url}
+                newTab={state.newTab}
+                onUrlChange={onUrlChange}
+                onToggleTab={onToggleTab}
+                isValidUrlOrEmpty={isValidUrlOrEmpty}
+                appBridge={appBridge}
+            />
         </div>
         <div className="tw-mt-3">
             <div className={'tw-pt-5 tw-flex tw-gap-x-3 tw-justify-end tw-border-t tw-border-t-black-10'}>

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/types.ts

@@ -9,8 +9,3 @@ export type InsertModalStateProps = {
     text: string;
     newTab: CheckboxState;
 };
-
-export type InitiallyExpandedItems = {
-    documentId: number | undefined;
-    pageId: number | undefined;
-};