@frontify/guideline-blocks-settings 0.28.6 → 0.29.1

package/dist/styles.css

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

package/dist/utilities/color/getReadableColor.es.js

@@ -1,12 +1,12 @@
-import n, { readability as d } from "@ctrl/tinycolor";
+import { TinyColor as n, readability as c } from "@ctrl/tinycolor";
 import { toShortRgba as i } from "./toShortRgba.es.js";
-const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((e) => r == null ? void 0 : r.hasOwnProperty(e)), a = (r, o) => {
-  const e = s(r) ? i(r) : r, p = s(o) ? i(o) : o;
-  let t = n(e);
-  const c = n(p);
-  for (; d(t, c) < 4.5; )
-    t = t.darken(1);
-  return t.toRgbString();
+const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((t) => r == null ? void 0 : r.hasOwnProperty(t)), a = (r, e) => {
+  const t = s(r) ? i(r) : r, p = s(e) ? i(e) : e;
+  let o = new n(t);
+  const d = new n(p);
+  for (; c(o, d) < 4.5; )
+    o = o.darken(1);
+  return o.toRgbString();
 };
 export {
   a as getReadableColor

package/dist/utilities/color/getReadableColor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport tinycolor, { ColorInput, readability } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n        ? toShortRgba(backgroundColor)\n        : (backgroundColor as ColorInput);\n    let parsedTextColor = tinycolor(inputTextColor);\n    const parsedBackgroundColor = tinycolor(inputBackgroundColor);\n\n    //darken the text color until readability is good\n    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n        parsedTextColor = parsedTextColor.darken(1);\n    }\n\n    return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","tinycolor","parsedBackgroundColor","readability"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACH,MAAAI,IAAkBC,EAAUJ,CAAc;AACxC,QAAAK,IAAwBD,EAAUF,CAAoB;AAG5D,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACvC,IAAAF,IAAAA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB;AAC3B;"}
+{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n        ? toShortRgba(backgroundColor)\n        : (backgroundColor as ColorInput);\n    let parsedTextColor = new TinyColor(inputTextColor);\n    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);\n\n    //darken the text color until readability is good\n    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n        parsedTextColor = parsedTextColor.darken(1);\n    }\n\n    return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","TinyColor","parsedBackgroundColor","readability"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACH,MAAAI,IAAkB,IAAIC,EAAUJ,CAAc;AAC5C,QAAAK,IAAwB,IAAID,EAAUF,CAAoB;AAGhE,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACvC,IAAAF,IAAAA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB;AAC3B;"}

package/dist/utilities/color/isDark.es.js

@@ -1,7 +1,7 @@
-import n from "@ctrl/tinycolor";
+import { TinyColor as n } from "@ctrl/tinycolor";
 import { toShortRgba as s } from "./toShortRgba.es.js";
 const i = (r) => typeof r == "object" && ["red", "green", "blue"].every((o) => r == null ? void 0 : r.hasOwnProperty(o)), y = (r, e) => {
-  const o = i(r) ? s(r) : r, t = n(o);
+  const o = i(r) ? s(r) : r, t = new n(o);
   return e ? t.getBrightness() < e : t.isDark() || t.getAlpha() > 0.25 && t.getAlpha() < 1;
 };
 export {

package/dist/utilities/color/isDark.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport tinycolor, { ColorInput } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n    const parsedColor = tinycolor(inputColor);\n\n    if (threshold) {\n        return parsedColor.getBrightness() < threshold;\n    }\n\n    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","tinycolor"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAcC,EAAUH,CAAU;AAExC,SAAID,IACOG,EAAY,cAAkB,IAAAH,IAGlCG,EAAY,OAAa,KAAAA,EAAY,aAAa,QAAQA,EAAY,SAAa,IAAA;AAC9F;"}
+{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n    const parsedColor = new TinyColor(inputColor);\n\n    if (threshold) {\n        return parsedColor.getBrightness() < threshold;\n    }\n\n    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","TinyColor"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAc,IAAIC,EAAUH,CAAU;AAE5C,SAAID,IACOG,EAAY,cAAkB,IAAAH,IAGlCG,EAAY,OAAa,KAAAA,EAAY,aAAa,QAAQA,EAAY,SAAa,IAAA;AAC9F;"}

package/dist/utilities/color/setAlpha.es.js

@@ -1,5 +1,5 @@
-import r from "@ctrl/tinycolor";
-const n = (t, o) => r(o).setAlpha(t).toRgbString();
+import { TinyColor as r } from "@ctrl/tinycolor";
+const n = (t, o) => new r(o).setAlpha(t).toRgbString();
 export {
   n as setAlpha
 };

package/dist/utilities/color/setAlpha.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"setAlpha.es.js","sources":["../../../src/utilities/color/setAlpha.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport tinycolor from '@ctrl/tinycolor';\n\n/**\n * Sets alpha value and returns rgba string.\n *\n * @param {string} color Rgb or hex string.\n * @returns {String} To be used as css value.\n */\n\nexport const setAlpha = (alpha: number, color?: string): string => {\n    return tinycolor(color).setAlpha(alpha).toRgbString();\n};\n"],"names":["setAlpha","alpha","color","tinycolor"],"mappings":";AAWa,MAAAA,IAAW,CAACC,GAAeC,MAC7BC,EAAUD,CAAK,EAAE,SAASD,CAAK,EAAE;"}
+{"version":3,"file":"setAlpha.es.js","sources":["../../../src/utilities/color/setAlpha.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/**\n * Sets alpha value and returns rgba string.\n *\n * @param {string} color Rgb or hex string.\n * @returns {String} To be used as css value.\n */\n\nexport const setAlpha = (alpha: number, color?: string): string => {\n    return new TinyColor(color).setAlpha(alpha).toRgbString();\n};\n"],"names":["setAlpha","alpha","color","TinyColor"],"mappings":";AAWa,MAAAA,IAAW,CAACC,GAAeC,MAC7B,IAAIC,EAAUD,CAAK,EAAE,SAASD,CAAK,EAAE;"}

package/dist/utilities/color/toColorObject.es.js

@@ -1,9 +1,9 @@
-import c from "@ctrl/tinycolor";
-const a = (o) => {
-  const { r, g: t, b: e, a: n } = c(o);
-  return { red: r, green: t, blue: e, alpha: n };
+import { TinyColor as l } from "@ctrl/tinycolor";
+const b = (o) => {
+  const { r, g: e, b: t, a: n } = new l(o);
+  return { red: r, green: e, blue: t, alpha: n };
 };
 export {
-  a as toColorObject
+  b as toColorObject
 };
 //# sourceMappingURL=toColorObject.es.js.map

package/dist/utilities/color/toColorObject.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\n\n/**\n * Maps color strings to color objects.\n *\n * @param {String} String representing color\n * @returns {Color} Color object\n */\n\nexport const toColorObject = (colorString: string): Color => {\n    const { r, g, b, a } = tinycolor(colorString);\n    return { red: r, green: g, blue: b, alpha: a };\n};\n"],"names":["toColorObject","colorString","g","b","a","tinycolor"],"mappings":";AAYa,MAAAA,IAAgB,CAACC,MAA+B;AACzD,QAAM,EAAE,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,MAAMC,EAAUJ,CAAW;AACrC,SAAA,EAAE,KAAK,GAAG,OAAOC,GAAG,MAAMC,GAAG,OAAOC;AAC/C;"}
+{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/**\n * Maps color strings to color objects.\n *\n * @param {String} String representing color\n * @returns {Color} Color object\n */\n\nexport const toColorObject = (colorString: string): Color => {\n    const { r, g, b, a } = new TinyColor(colorString);\n    return { red: r, green: g, blue: b, alpha: a };\n};\n"],"names":["toColorObject","colorString","g","b","a","TinyColor"],"mappings":";AAYa,MAAAA,IAAgB,CAACC,MAA+B;AACnD,QAAA,EAAE,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,MAAM,IAAIC,EAAUJ,CAAW;AACzC,SAAA,EAAE,KAAK,GAAG,OAAOC,GAAG,MAAMC,GAAG,OAAOC;AAC/C;"}

package/dist/utilities/color/toHex8String.es.js

@@ -1,7 +1,7 @@
-import t from "@ctrl/tinycolor";
+import { TinyColor as t } from "@ctrl/tinycolor";
 import { toShortRgba as r } from "./toShortRgba.es.js";
-const n = (o) => t(r(o)).toHex8String();
+const e = (o) => new t(r(o)).toHex8String();
 export {
-  n as toHex8String
+  e as toHex8String
 };
 //# sourceMappingURL=toHex8String.es.js.map

package/dist/utilities/color/toHex8String.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toHex8String.es.js","sources":["../../../src/utilities/color/toHex8String.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toHex8String = (color: Color): string => tinycolor(toShortRgba(color)).toHex8String();\n"],"names":["toHex8String","color","tinycolor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyBC,EAAUC,EAAYF,CAAK,CAAC,EAAE,aAAa;"}
+{"version":3,"file":"toHex8String.es.js","sources":["../../../src/utilities/color/toHex8String.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();\n"],"names":["toHex8String","color","TinyColor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,aAAa;"}

package/dist/utilities/color/toHexString.es.js

@@ -1,7 +1,7 @@
-import t from "@ctrl/tinycolor";
+import { TinyColor as t } from "@ctrl/tinycolor";
 import { toShortRgba as r } from "./toShortRgba.es.js";
-const n = (o) => t(r(o)).toHexString();
+const e = (o) => new t(r(o)).toHexString();
 export {
-  n as toHexString
+  e as toHexString
 };
 //# sourceMappingURL=toHexString.es.js.map

package/dist/utilities/color/toHexString.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toHexString.es.js","sources":["../../../src/utilities/color/toHexString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n */\nexport const toHexString = (color: Color): string => tinycolor(toShortRgba(color)).toHexString();\n"],"names":["toHexString","color","tinycolor","toShortRgba"],"mappings":";;AASa,MAAAA,IAAc,CAACC,MAAyBC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}
+{"version":3,"file":"toHexString.es.js","sources":["../../../src/utilities/color/toHexString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n */\nexport const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();\n"],"names":["toHexString","color","TinyColor","toShortRgba"],"mappings":";;AASa,MAAAA,IAAc,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}

package/dist/utilities/color/toRgbaString.es.js

@@ -1,7 +1,7 @@
-import t from "@ctrl/tinycolor";
+import { TinyColor as t } from "@ctrl/tinycolor";
 import { toShortRgba as r } from "./toShortRgba.es.js";
-const m = (o) => t(r(o)).toRgbString();
+const n = (o) => new t(r(o)).toRgbString();
 export {
-  m as toRgbaString
+  n as toRgbaString
 };
 //# sourceMappingURL=toRgbaString.es.js.map

package/dist/utilities/color/toRgbaString.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toRgbaString.es.js","sources":["../../../src/utilities/color/toRgbaString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport tinycolor from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to rgba string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toRgbaString = (color: Color): string => tinycolor(toShortRgba(color)).toRgbString();\n"],"names":["toRgbaString","color","tinycolor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyBC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}
+{"version":3,"file":"toRgbaString.es.js","sources":["../../../src/utilities/color/toRgbaString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to rgba string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();\n"],"names":["toRgbaString","color","TinyColor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}

package/package.json

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

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

@@ -4,7 +4,7 @@ import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { Attachments as AttachmentsComponent } from './Attachments';
 import { AttachmentsProps } from './types';
-import { SinonStub } from 'cypress/types/sinon';
+import type { SinonStub } from 'sinon';
 
 const FlyoutButtonSelector = '[data-test-id="attachments-flyout-button"]';
 const AssetInputSelector = '[data-test-id="asset-input-placeholder"]';

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { joinClassNames } from '../../utilities';
 import { Toolbar } from './Toolbar';
 import { BlockItemWrapperProps, ToolbarItem } from './types';
@@ -15,7 +15,7 @@ export const BlockItemWrapper = ({
     shouldFillContainer,
     outlineOffset = 2,
     shouldBeShown = false,
-}: PropsWithChildren<BlockItemWrapperProps>) => {
+}: BlockItemWrapperProps) => {
     const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);
     const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);
     const wrapperRef = useRef<HTMLDivElement>(null);

package/src/components/BlockItemWrapper/types.ts

@@ -1,8 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { MenuItemStyle } from '@frontify/fondue';
+import type { ReactNode } from 'react';
 
 export type BlockItemWrapperProps = {
+    children: ReactNode;
     shouldHideWrapper?: boolean;
     shouldHideComponent?: boolean;
     toolbarItems: (ToolbarItem | undefined)[];

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

@@ -9,7 +9,7 @@ import {
 } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { LinkSelector } from './LinkSelector';
-import { SinonStub } from 'cypress/types/sinon';
+import type { SinonStub } from 'sinon';
 
 const LinkSelectorSelector = '[data-test-id="internal-link-selector"]';
 const LinkSelectorButtonSelector = '[data-test-id="internal-link-selector"] > button';

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

@@ -3,7 +3,7 @@
 import { DocumentApiDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
 import { PluginComposer } from '@frontify/fondue';
 import { mount } from 'cypress/react18';
-import { SinonStub } from 'cypress/types/sinon';
+import type { SinonStub } from 'sinon';
 import { ButtonPlugin, LinkPlugin, RichTextEditor, TextStyles } from '.';
 import { convertToRteValue } from '../../helpers';
 

package/src/components/RichTextEditor/SerializedText.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import type { CSSProperties } from 'react';
 import { LINK_PLUGIN } from './LinkPlugin/id';
 import { BlockButtonStyles } from './ButtonPlugin';
 
-export const enum TextStyles {
+export enum TextStyles {
     heading1 = 'heading1',
     heading2 = 'heading2',
     heading3 = 'heading3',
@@ -19,7 +19,6 @@ export const enum TextStyles {
 }
 export const BlockStyles: Record<string, CSSProperties & { hover?: CSSProperties }> = {
     [TextStyles.heading1]: {
-        display: 'inline-block',
         fontSize: 'var(--f-theme-settings-heading1-font-size)',
         lineHeight: 'var(--f-theme-settings-heading1-line-height)',
         marginTop: 'var(--f-theme-settings-heading1-margin-top)',

package/src/utilities/color/getReadableColor.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import tinycolor, { ColorInput, readability } from '@ctrl/tinycolor';
+import { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 import { Color } from '@frontify/sidebar-settings';
 
@@ -22,8 +22,8 @@ export const getReadableColor = (textColor: unknown, backgroundColor: unknown):
     const inputBackgroundColor = isRgbaLongFormat(backgroundColor)
         ? toShortRgba(backgroundColor)
         : (backgroundColor as ColorInput);
-    let parsedTextColor = tinycolor(inputTextColor);
-    const parsedBackgroundColor = tinycolor(inputBackgroundColor);
+    let parsedTextColor = new TinyColor(inputTextColor);
+    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);
 
     //darken the text color until readability is good
     while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {

package/src/utilities/color/isDark.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import tinycolor, { ColorInput } from '@ctrl/tinycolor';
+import { ColorInput, TinyColor } from '@ctrl/tinycolor';
 import { toShortRgba } from './toShortRgba';
 import { Color } from '@frontify/sidebar-settings';
 
@@ -19,7 +19,7 @@ const isRgbaLongFormat = (value: unknown): value is Color => {
 
 export const isDark = (color: unknown, threshold?: number): boolean => {
     const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);
-    const parsedColor = tinycolor(inputColor);
+    const parsedColor = new TinyColor(inputColor);
 
     if (threshold) {
         return parsedColor.getBrightness() < threshold;

package/src/utilities/color/setAlpha.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 
 /**
  * Sets alpha value and returns rgba string.
@@ -10,5 +10,5 @@ import tinycolor from '@ctrl/tinycolor';
  */
 
 export const setAlpha = (alpha: number, color?: string): string => {
-    return tinycolor(color).setAlpha(alpha).toRgbString();
+    return new TinyColor(color).setAlpha(alpha).toRgbString();
 };