@frontify/guideline-blocks-settings 0.32.1 → 0.32.2

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-isolate{isolation:isolate}.tw-z-20{z-index:20}.tw-z-\[60\]{z-index:60}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.-tw-mr-2{margin-right:-.5rem}.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-10{height:2.5rem}.tw-h-6{height:1.5rem}.tw-h-8{height:2rem}.tw-h-\[26px\]{height:26px}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.tw-w-8{width:2rem}.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-none{flex:none}.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-px{gap:1px}.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-divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(var(--line-width) * var(--tw-divide-x-reverse));border-left-width:calc(var(--line-width) * calc(1 - var(--tw-divide-x-reverse)))}.tw-divide-line-strong>:not([hidden])~:not([hidden]){border-color:var(--line-color-strong)}.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-whitespace-pre-wrap{white-space:pre-wrap}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-md{border-radius:.375rem}.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-line-strong{border-color:var(--line-color-strong)}.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-pressed{background-color:var(--box-neutral-color-pressed)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.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-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-px{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-1{padding-bottom:.25rem}.tw-pb-1\.5{padding-bottom:.375rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-3{padding-left:.75rem}.tw-pl-3\.5{padding-left:.875rem}.tw-pl-7{padding-left:1.75rem}.tw-pr-2{padding-right:.5rem}.tw-pr-2\.5{padding-right:.625rem}.tw-pr-3{padding-right:.75rem}.tw-pr-3\.5{padding-right:.875rem}.tw-pt-1{padding-top:.25rem}.tw-pt-1\.5{padding-top:.375rem}.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-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-leading-none{line-height:1}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-inverse{color:var(--box-neutral-inverse-color)}.tw-text-box-neutral-inverse-pressed{color:var(--box-neutral-inverse-color-pressed)}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-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-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-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-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-z-10:focus-visible{z-index:10}.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-cursor-grabbing:active{cursor:grabbing}.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-pressed:active{background-color:var(--box-neutral-color-pressed)}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-color-pressed)}.active\:tw-text-blank-state-pressed:active{--tw-text-opacity: 1;color:rgb(8 8 8 / var(--tw-text-opacity))}.active\:tw-text-box-neutral-inverse-pressed:active{color:var(--box-neutral-inverse-color-pressed)}.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-isolate{isolation:isolate}.tw-z-20{z-index:20}.tw-z-\[2\]{z-index:2}.tw-z-\[60\]{z-index:60}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.-tw-mr-2{margin-right:-.5rem}.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-10{height:2.5rem}.tw-h-6{height:1.5rem}.tw-h-8{height:2rem}.tw-h-9{height:2.25rem}.tw-h-\[26px\]{height:26px}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.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-none{flex:none}.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-grab{cursor:grab!important}.\!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-px{gap:1px}.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-divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(var(--line-width) * var(--tw-divide-x-reverse));border-left-width:calc(var(--line-width) * calc(1 - var(--tw-divide-x-reverse)))}.tw-divide-line-strong>:not([hidden])~:not([hidden]){border-color:var(--line-color-strong)}.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-whitespace-pre-wrap{white-space:pre-wrap}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-md{border-radius:.375rem}.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-button-border{border-color:var(--button-border-color)}.tw-border-line-strong{border-color:var(--line-color-strong)}.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-pressed{background-color:var(--box-neutral-color-pressed)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.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-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-px{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-1{padding-bottom:.25rem}.tw-pb-1\.5{padding-bottom:.375rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-3{padding-left:.75rem}.tw-pl-3\.5{padding-left:.875rem}.tw-pl-7{padding-left:1.75rem}.tw-pr-2{padding-right:.5rem}.tw-pr-2\.5{padding-right:.625rem}.tw-pr-3{padding-right:.75rem}.tw-pr-3\.5{padding-right:.875rem}.tw-pt-1{padding-top:.25rem}.tw-pt-1\.5{padding-top:.375rem}.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-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-leading-none{line-height:1}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-inverse{color:var(--box-neutral-inverse-color)}.tw-text-box-neutral-inverse-pressed{color:var(--box-neutral-inverse-color-pressed)}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-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-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-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-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-z-10:focus-visible{z-index:10}.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-cursor-grabbing:active{cursor:grabbing}.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-pressed:active{background-color:var(--box-neutral-color-pressed)}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-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))}.active\:tw-text-box-neutral-inverse-pressed:active{color:var(--box-neutral-inverse-color-pressed)}.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.32.1",
+  "version": "0.32.2",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -25,6 +25,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.3",
     "@frontify/eslint-config-typescript": "^0.16.2",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.1.2",
     "@types/node": "^18.18.11",
     "@types/react": "^18.2.38",

package/setupTests.ts

@@ -1,7 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { afterEach, beforeAll, vi } from 'vitest';
-import { configure } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { cleanup, configure } from '@testing-library/react';
+import { afterEach, beforeAll, expect, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+
+expect.extend(matchers);
 
 vi.stubGlobal('crypto', {
     getRandomValues: vi.fn(),
@@ -13,6 +17,7 @@ beforeAll(() => {
 
 afterEach(() => {
     vi.restoreAllMocks();
+    cleanup();
 });
 
 globalThis.structuredClone = (data: unknown) => JSON.parse(JSON.stringify(data));

package/src/components/Attachments/AttachmentItem.tsx

@@ -8,10 +8,12 @@ import {
     ActionMenu,
     Button,
     ButtonEmphasis,
+    FOCUS_STYLE,
     Flyout,
     FlyoutPlacement,
     IconArrowCircleUp20,
     IconDocument24,
+    IconGrabHandle20,
     IconImage24,
     IconImageStack20,
     IconMusicNote24,
@@ -25,6 +27,7 @@ import {
 } from '@frontify/fondue';
 import { AttachmentItemProps, SortableAttachmentItemProps } from './types';
 import { joinClassNames } from '../../utilities';
+import { useFocusRing } from '@react-aria/focus';
 
 const getDecorator = (type: string) => {
     if (type === 'IMAGE') {
@@ -43,6 +46,7 @@ export const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>
         {
             item,
             isEditing,
+            draggableProps,
             transformStyle,
             isDragging,
             isOverlay,
@@ -58,6 +62,8 @@ export const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>
         const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });
         const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();
 
+        const { focusProps, isFocusVisible } = useFocusRing();
+
         useEffect(() => {
             if (selectedFiles) {
                 uploadFile(selectedFiles[0]);
@@ -111,6 +117,21 @@ export const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>
                             isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',
                         ])}
                     >
+                        <button
+                            {...focusProps}
+                            {...draggableProps}
+                            aria-label="Drag attachment"
+                            className={joinClassNames([
+                                ' tw-border-button-border tw-bg-button-background active:tw-bg-button-background-pressed tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-outline-none tw-font-medium tw-rounded tw-h-9 tw-w-9 ',
+                                isDragging || isOverlay
+                                    ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'
+                                    : 'tw-cursor-grab hover:tw-bg-button-background-hover',
+                                isFocusVisible && FOCUS_STYLE,
+                                isFocusVisible && 'tw-z-[2]',
+                            ])}
+                        >
+                            <IconGrabHandle20 />
+                        </button>
                         <div data-test-id="attachments-actionbar-flyout">
                             <Flyout
                                 placement={FlyoutPlacement.Right}

package/src/components/Attachments/Attachments.spec.ct.tsx

@@ -6,9 +6,10 @@ import { Attachments as AttachmentsComponent } from './Attachments';
 import { AttachmentsProps } from './types';
 import { SinonStub } from 'sinon';
 
-const FlyoutButtonSelector = '[data-test-id="attachments-flyout-button"]';
+const FlyoutButtonSelector = '[data-test-id="attachments-button-trigger"]';
 const AssetInputSelector = '[data-test-id="asset-input-placeholder"]';
 const ActionBarSelector = '[data-test-id="attachments-actionbar"]';
+const DragHandleSelector = '[data-test-id="attachments-actionbar"] > button';
 const FlyoutTriggerSelector = '[data-test-id="attachments-actionbar-flyout"] button';
 const AttachmentItemSelector = '[data-test-id="attachments-item"]';
 const MenuItemSelector = '[data-test-id="menu-item"]';
@@ -139,8 +140,26 @@ describe('Attachments', () => {
         cy.get(FlyoutButtonSelector).click();
         cy.realPress('Tab');
         cy.realPress('Tab');
+        cy.realPress('Tab');
         cy.get(FlyoutTriggerSelector).eq(0).should('have.class', 'focus-visible:tw-ring-blue');
         cy.get(FlyoutTriggerSelector).eq(0).type('{enter}');
         cy.get(MenuItemSelector).should('exist');
     });
+
+    it('reorders items using only keyboard events', () => {
+        const onSortStub = cy.stub();
+        mount(
+            <Attachments
+                appBridge={getAppBridgeBlockStub({ editorState: true })}
+                items={[{ ...AssetDummy.with(1), title: 'Moved item' }, AssetDummy.with(2), AssetDummy.with(3)]}
+                onSorted={onSortStub}
+            />,
+        );
+        cy.get(FlyoutButtonSelector).click();
+        cy.realPress('Tab');
+        cy.realPress('Tab');
+        cy.realPress('Tab');
+        cy.get(DragHandleSelector).eq(0).type(' {downarrow}{downarrow} ');
+        cy.get(AttachmentItemSelector).eq(1).should('contain.text', 'Moved item');
+    });
 });

package/src/components/Attachments/Attachments.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useState } from 'react';
 import {
     DndContext,
     DragEndEvent,
@@ -159,11 +159,15 @@ export const Attachments = ({
                         hug={false}
                         fitContent
                         legacyFooter={false}
-                        trigger={
-                            <TriggerComponent isFlyoutOpen={isFlyoutOpen}>
+                        trigger={(triggerProps, triggerRef) => (
+                            <TriggerComponent
+                                isFlyoutOpen={isFlyoutOpen}
+                                triggerProps={triggerProps}
+                                triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}
+                            >
                                 <div>{items.length > 0 ? items.length : 'Add'}</div>
                             </TriggerComponent>
-                        }
+                        )}
                     >
                         <div className="tw-w-[300px]" data-test-id="attachments-flyout-content">
                             {internalItems.length > 0 && (

package/src/components/Attachments/AttachmentsButtonTrigger.tsx

@@ -6,17 +6,25 @@ import { joinClassNames } from '../../utilities';
 
 import { type AttachmentsTriggerProps } from './types';
 
-export const AttachmentsButtonTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (
-    <div
+export const AttachmentsButtonTrigger = ({
+    children,
+    isFlyoutOpen,
+    triggerProps,
+    triggerRef,
+}: AttachmentsTriggerProps) => (
+    <button
         className={joinClassNames([
             'tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',
             isFlyoutOpen
                 ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'
                 : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',
         ])}
+        {...triggerProps}
+        ref={triggerRef}
+        data-test-id="attachments-button-trigger"
     >
         <IconPaperclip16 />
         {children}
         <IconCaretDown12 />
-    </div>
+    </button>
 );

package/src/components/Attachments/types.ts

@@ -1,11 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { type AppBridgeBlock, type Asset } from '@frontify/app-bridge';
-import { type ReactNode } from 'react';
+import { HTMLAttributes, MutableRefObject, ReactElement, type ReactNode } from 'react';
 
 export type AttachmentsTriggerProps = {
     children: ReactNode;
     isFlyoutOpen: boolean;
+    triggerProps: HTMLAttributes<HTMLButtonElement>;
+    triggerRef: MutableRefObject<HTMLButtonElement>;
 };
 
 export type AttachmentsProps = {
@@ -17,7 +19,7 @@ export type AttachmentsProps = {
     onUpload: (uploadedAttachments: Asset[]) => Promise<void>;
     onBrowse: (browserAttachments: Asset[]) => void;
     onSorted: (sortedAttachments: Asset[]) => void;
-    triggerComponent?: (props: AttachmentsTriggerProps) => JSX.Element;
+    triggerComponent?: (props: AttachmentsTriggerProps) => ReactElement;
 } & ({ isOpen?: never; onOpenChange?: never } | { isOpen: boolean; onOpenChange: (isOpen: boolean) => void });
 
 export type AttachmentItemProps = SortableAttachmentItemProps & {

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -4,8 +4,10 @@ import { type ReactElement, useRef, useState } from 'react';
 
 import { joinClassNames } from '../../utilities';
 
-import { Toolbar, type ToolbarItem } from './Toolbar';
+import { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';
 import { type BlockItemWrapperProps } from './types';
+import { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';
+import { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';
 
 export const BlockItemWrapper = ({
     children,
@@ -13,14 +15,13 @@ export const BlockItemWrapper = ({
     toolbarItems,
     shouldHideWrapper,
     shouldHideComponent = false,
-    isDragging,
+    isDragging = false,
     shouldFillContainer,
     outlineOffset = 2,
     shouldBeShown = false,
     showAttachments = false,
 }: BlockItemWrapperProps): ReactElement => {
-    const [isMenuFlyoutOpen, setIsMenuFlyoutOpen] = useState(shouldBeShown);
-    const [isAttachmentFlyoutOpen, setIsAttachmentFlyoutOpen] = useState(false);
+    const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);
     const wrapperRef = useRef<HTMLDivElement>(null);
 
     if (shouldHideWrapper) {
@@ -30,51 +31,50 @@ export const BlockItemWrapper = ({
 
     const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);
 
-    const shouldToolbarBeVisible = isMenuFlyoutOpen || isAttachmentFlyoutOpen || shouldBeShown;
+    const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;
 
     return (
-        <div
-            ref={wrapperRef}
-            data-test-id="block-item-wrapper"
-            style={{
-                outlineOffset,
-            }}
-            className={joinClassNames([
-                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',
-                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',
-                'hover:tw-outline focus-within:tw-outline',
-                shouldToolbarBeVisible && 'tw-outline',
-                shouldHideComponent && 'tw-opacity-0',
-            ])}
-        >
-            <div
-                style={{
-                    right: -1 - outlineOffset,
-                    bottom: `calc(100% - ${2 + outlineOffset}px)`,
-                }}
-                className={joinClassNames([
-                    'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',
-                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',
-                    'tw-flex tw-justify-end',
-                    shouldToolbarBeVisible && 'tw-opacity-100',
-                ])}
-            >
-                <Toolbar
-                    flyoutMenu={{
-                        items: toolbarFlyoutItems,
-                        isOpen: isMenuFlyoutOpen,
-                        onOpenChange: setIsMenuFlyoutOpen,
+        <DragPreviewContextProvider isDragPreview={isDragging}>
+            <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>
+                <div
+                    ref={wrapperRef}
+                    data-test-id="block-item-wrapper"
+                    style={{
+                        outlineOffset,
                     }}
-                    attachments={{
-                        isEnabled: showAttachments,
-                        isOpen: isAttachmentFlyoutOpen,
-                        onOpenChange: setIsAttachmentFlyoutOpen,
-                    }}
-                    items={items}
-                    isDragging={isDragging}
-                />
-            </div>
-            {children}
-        </div>
+                    className={joinClassNames([
+                        'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',
+                        shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',
+                        'hover:tw-outline focus-within:tw-outline',
+                        shouldToolbarBeVisible && 'tw-outline',
+                        shouldHideComponent && 'tw-opacity-0',
+                    ])}
+                >
+                    <div
+                        style={{
+                            right: -1 - outlineOffset,
+                            bottom: `calc(100% - ${2 + outlineOffset}px)`,
+                        }}
+                        className={joinClassNames([
+                            'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',
+                            'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',
+                            'tw-flex tw-justify-end',
+                            shouldToolbarBeVisible && 'tw-opacity-100',
+                        ])}
+                    >
+                        <Toolbar
+                            flyoutMenu={{
+                                items: toolbarFlyoutItems,
+                            }}
+                            attachments={{
+                                isEnabled: showAttachments,
+                            }}
+                            items={items}
+                        />
+                    </div>
+                    {children}
+                </div>
+            </MultiFlyoutContextProvider>
+        </DragPreviewContextProvider>
     );
 };

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.spec.tsx

@@ -0,0 +1,96 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { AttachmentsProvider } from '../../../../hooks/useAttachments';
+import { DragPreviewContextProvider } from '../context/DragPreviewContext';
+import { MultiFlyoutContextProvider } from '../context/MultiFlyoutContext';
+
+import { AttachmentsToolbarButton } from './AttachmentsToolbarButton';
+
+const TOOLBAR_BUTTON_ID = 'attachments-toolbar-button-trigger';
+const FLYOUT_CONTENT_ID = 'attachments-flyout-content';
+const TOOLTIP_ID = 'tooltip';
+
+const TEST_FLYOUT_ID = 'flyout-id';
+const ASSET_ID = 'attachments';
+
+const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
+    blockId: 2,
+    blockAssets: { [ASSET_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
+    editorState: true,
+});
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('AttachmentsToolbarButton', () => {
+    beforeAll(() => {
+        vi.stubGlobal(
+            'Worker',
+            class Worker {
+                constructor() {}
+                addEventListener() {}
+                terminate() {}
+            },
+        );
+    });
+    it('should disable tooltip and hide flyout when item is in drag preview context', async () => {
+        const { getByTestId, queryByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={vi.fn()}>
+                <DragPreviewContextProvider isDragPreview>
+                    <AttachmentsProvider appBridge={STUB_WITH_THREE_ASSETS} assetId={ASSET_ID}>
+                        <AttachmentsToolbarButton flyoutId={TEST_FLYOUT_ID} />
+                    </AttachmentsProvider>
+                </DragPreviewContextProvider>
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+
+        getByTestId(TOOLBAR_BUTTON_ID).focus();
+
+        await waitFor(() => {
+            expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+            expect(queryByTestId(FLYOUT_CONTENT_ID)).toBeNull();
+        });
+    });
+
+    it('should open flyout onClick', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <DragPreviewContextProvider isDragPreview>
+                    <AttachmentsProvider appBridge={STUB_WITH_THREE_ASSETS} assetId={ASSET_ID}>
+                        <AttachmentsToolbarButton flyoutId={TEST_FLYOUT_ID} />
+                    </AttachmentsProvider>
+                </DragPreviewContextProvider>
+            </MultiFlyoutContextProvider>,
+        );
+
+        await fireEvent.click(getByTestId(TOOLBAR_BUTTON_ID));
+
+        expect(setOpenFlyoutIdsStub).toHaveBeenCalledOnce();
+        const dispatchedStateResult = setOpenFlyoutIdsStub.mock.lastCall[0]([]);
+        expect(dispatchedStateResult).toEqual([TEST_FLYOUT_ID]);
+    });
+
+    it('should open tooltip when item is focused', async () => {
+        const { getByTestId } = render(
+            <AttachmentsProvider appBridge={STUB_WITH_THREE_ASSETS} assetId={ASSET_ID}>
+                <AttachmentsToolbarButton />
+            </AttachmentsProvider>,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+
+        getByTestId(TOOLTIP_ID).focus();
+
+        await waitFor(() => {
+            expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0');
+        });
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useMemoizedId } from '@frontify/fondue';
+
+import { useAttachmentsContext } from '../../../../hooks';
+import { Attachments } from '../../../Attachments';
+import { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';
+
+import { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';
+import { useDragPreviewContext } from '../context/DragPreviewContext';
+
+export const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';
+
+type AttachmentsToolbarButtonProps = { flyoutId?: string };
+
+export const AttachmentsToolbarButton = ({
+    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,
+}: AttachmentsToolbarButtonProps) => {
+    const id = useMemoizedId(flyoutId);
+
+    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =
+        useAttachmentsContext();
+
+    const { isOpen, onOpenChange } = useMultiFlyoutState(id);
+    const isDragPreview = useDragPreviewContext();
+
+    return (
+        <Attachments
+            onUpload={onAttachmentsAdd}
+            onDelete={onAttachmentDelete}
+            onReplaceWithBrowse={onAttachmentReplace}
+            onReplaceWithUpload={onAttachmentReplace}
+            onSorted={onAttachmentsSorted}
+            onBrowse={onAttachmentsAdd}
+            items={attachments}
+            appBridge={appBridge}
+            triggerComponent={AttachmentsToolbarButtonTrigger}
+            isOpen={isOpen && !isDragPreview}
+            onOpenChange={onOpenChange}
+        />
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.spec.tsx

@@ -0,0 +1,44 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';
+import { MutableRefObject } from 'react';
+
+const BUTTON_ID = 'attachments-toolbar-button-trigger';
+
+describe('AttachmentsToolbarButtonTrigger', () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('should apply active styles when flyout is open', async () => {
+        const { getByTestId } = render(
+            <AttachmentsToolbarButtonTrigger
+                isFlyoutOpen
+                triggerProps={{}}
+                triggerRef={{} as MutableRefObject<HTMLButtonElement>}
+            >
+                Button
+            </AttachmentsToolbarButtonTrigger>,
+        );
+
+        expect(getByTestId(BUTTON_ID)).toHaveClass('tw-text-box-neutral-inverse-pressed');
+    });
+    it('should forward trigger props to button', async () => {
+        const onPointerUpStub = vi.fn();
+
+        const { getByTestId } = render(
+            <AttachmentsToolbarButtonTrigger
+                isFlyoutOpen={false}
+                triggerProps={{ onPointerUp: onPointerUpStub }}
+                triggerRef={{} as MutableRefObject<HTMLButtonElement>}
+            >
+                Button
+            </AttachmentsToolbarButtonTrigger>,
+        );
+        await fireEvent.pointerUp(getByTestId(BUTTON_ID));
+
+        expect(onPointerUpStub).toHaveBeenCalledOnce();
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx

@@ -0,0 +1,24 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
+import { type AttachmentsTriggerProps } from '../../../Attachments/types';
+
+import { BaseToolbarButton } from '../BaseToolbarButton';
+
+export const AttachmentsToolbarButtonTrigger = ({
+    children,
+    isFlyoutOpen,
+    triggerProps,
+    triggerRef,
+}: AttachmentsTriggerProps) => (
+    <BaseToolbarButton
+        forceActiveStyle={isFlyoutOpen}
+        data-test-id="attachments-toolbar-button-trigger"
+        {...triggerProps}
+        ref={triggerRef}
+    >
+        <IconPaperclip16 />
+        {children}
+        <IconCaretDown12 />
+    </BaseToolbarButton>
+);

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './AttachmentsToolbarButton';