@gitlab/ui 86.12.1 → 86.13.0

package/dist/tailwind.css

@@ -1,2 +1,2 @@
-.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#4c4b51))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#28272d))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#4c4b51)}.gl-text-gray-900{color:var(--gray-900,#28272d)}.gl-text-gray-950{color:var(--gray-950,#18171d)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#18171d))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}.gl-font-monospace{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.gl-border-b-solid{border-bottom-style:solid}.gl-border-t-solid{border-top-style:solid}
+*,:after,:before{--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:#3b82f680;--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-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-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:#3b82f680;--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-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::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:#3b82f680;--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-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.gl-border{border-color:var(--gray-100,#dcdcde);border-style:solid}.gl-border-t{border-top-color:var(--gray-100,#dcdcde);border-top-style:solid}.gl-border-b{border-bottom-color:var(--gray-100,#dcdcde);border-bottom-style:solid}.gl-border-l{border-left-color:var(--gray-100,#dcdcde);border-left-style:solid}.gl-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.gl-pointer-events-none{pointer-events:none}.gl-pointer-events-auto{pointer-events:auto}.gl-invisible{visibility:hidden}.gl-collapse{visibility:collapse}.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.\!gl-z-9999{z-index:9999!important}.gl-z-200{z-index:200}.gl-float-right{float:right}.\!gl-m-0{margin:0!important}.gl-m-0{margin:0}.gl-m-7{margin:2rem}.gl-m-auto{margin:auto}.\!gl-mx-2{margin-left:.25rem!important;margin-right:.25rem!important}.-gl-mx-1{margin-left:-.125rem;margin-right:-.125rem}.-gl-mx-4{margin-left:-.75rem;margin-right:-.75rem}.-gl-my-1{margin-bottom:-.125rem;margin-top:-.125rem}.-gl-my-3{margin-bottom:-.5rem;margin-top:-.5rem}.gl-mx-2{margin-left:.25rem;margin-right:.25rem}.gl-mx-4{margin-left:.75rem;margin-right:.75rem}.gl-mx-auto{margin-left:auto;margin-right:auto}.gl-my-0{margin-bottom:0;margin-top:0}.gl-my-3{margin-bottom:.5rem;margin-top:.5rem}.gl-my-5{margin-bottom:1rem;margin-top:1rem}.\!gl-mt-2{margin-top:.25rem!important}.-gl-ml-2{margin-left:-.25rem}.-gl-mr-3{margin-right:-.5rem}.-gl-mt-2{margin-top:-.25rem}.gl-mb-0{margin-bottom:0}.gl-mb-2{margin-bottom:.25rem}.gl-mb-3{margin-bottom:.5rem}.gl-mb-4{margin-bottom:.75rem}.gl-mb-5{margin-bottom:1rem}.gl-mb-8{margin-bottom:2.5rem}.gl-ml-2{margin-left:.25rem}.gl-ml-3{margin-left:.5rem}.gl-ml-5{margin-left:1rem}.gl-ml-6{margin-left:1.5rem}.gl-ml-auto{margin-left:auto}.gl-mr-1{margin-right:.125rem}.gl-mr-2{margin-right:.25rem}.gl-mr-3{margin-right:.5rem}.gl-mr-4{margin-right:.75rem}.gl-mr-auto{margin-right:auto}.gl-mt-0{margin-top:0}.gl-mt-2{margin-top:.25rem}.gl-mt-3{margin-top:.5rem}.gl-mt-4{margin-top:.75rem}.gl-mt-5{margin-top:1rem}.\!gl-block{display:block!important}.gl-block{display:block}.gl-inline-block{display:inline-block}.\!gl-flex{display:flex!important}.gl-flex{display:flex}.gl-inline-flex{display:inline-flex}.gl-table{display:table}.\!gl-hidden{display:none!important}.gl-hidden{display:none}.\!gl-h-full{height:100%!important}.gl-h-0{height:0}.gl-h-11{height:4rem}.gl-h-13{height:6rem}.gl-h-5{height:1rem}.gl-h-auto{height:auto}.gl-h-full{height:100%}.gl-max-h-full{max-height:100%}.gl-min-h-8{min-height:2.5rem}.\!gl-w-31{width:15.5rem!important}.\!gl-w-auto{width:auto!important}.gl-w-1\/2{width:50%}.gl-w-10{width:3.5rem}.gl-w-20{width:10rem}.gl-w-30{width:15rem}.gl-w-4\/10{width:40%}.gl-w-5{width:1rem}.gl-w-full{width:100%}.gl-max-w-1\/2{max-width:50%}.gl-max-w-75{max-width:37.5rem}.gl-max-w-full{max-width:100%}.gl-flex-shrink-0{flex-shrink:0}.gl-flex-grow,.gl-grow{flex-grow:1}.gl-basis-0{flex-basis:0}.-gl-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\!gl-cursor-not-allowed{cursor:not-allowed!important}.\!gl-cursor-text{cursor:text!important}.gl-cursor-default{cursor:default}.gl-cursor-pointer{cursor:pointer}.gl-cursor-text{cursor:text}.gl-list-none{list-style-type:none}.gl-flex-row{flex-direction:row}.gl-flex-col{flex-direction:column}.gl-flex-wrap{flex-wrap:wrap}.gl-flex-nowrap{flex-wrap:nowrap}.gl-items-start{align-items:flex-start}.gl-items-end{align-items:flex-end}.gl-items-center{align-items:center}.gl-items-baseline{align-items:baseline}.\!gl-justify-start{justify-content:flex-start!important}.gl-justify-start{justify-content:flex-start}.gl-justify-end{justify-content:flex-end}.gl-justify-center{justify-content:center}.gl-justify-between{justify-content:space-between}.gl-gap-2{gap:.25rem}.gl-gap-3{gap:.5rem}.gl-gap-4{gap:.75rem}.gl-gap-5{gap:1rem}.gl-gap-6{gap:1.5rem}.gl-gap-x-3{column-gap:.5rem}.gl-self-start{align-self:flex-start}.gl-overflow-hidden{overflow:hidden}.gl-overflow-visible{overflow:visible}.gl-overflow-y-auto{overflow-y:auto}.gl-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!gl-text-ellipsis{text-overflow:ellipsis!important}.gl-text-ellipsis{text-overflow:ellipsis}.\!gl-whitespace-normal{white-space:normal!important}.gl-whitespace-normal{white-space:normal}.gl-whitespace-nowrap{white-space:nowrap}.gl-whitespace-pre-line{white-space:pre-line}.\!gl-rounded-base{border-radius:.25rem!important}.\!gl-rounded-none{border-radius:0!important}.gl-rounded-base{border-radius:.25rem}.gl-rounded-full{border-radius:50%}.gl-rounded-lg{border-radius:.5rem}.gl-rounded-bl-none{border-bottom-left-radius:0}.gl-rounded-br-none{border-bottom-right-radius:0}.gl-rounded-tr-none{border-top-right-radius:0}.gl-border,.gl-border-1{border-width:1px}.\!gl-border-b-0{border-bottom-width:0!important}.gl-border-b{border-bottom-width:1px}.gl-border-b-0{border-bottom-width:0}.gl-border-b-1{border-bottom-width:1px}.gl-border-l{border-left-width:1px}.gl-border-t,.gl-border-t-1{border-top-width:1px}.gl-border-solid{border-style:solid}.\!gl-border-none{border-style:none!important}.gl-border-none{border-style:none}.gl-border-gray-200{border-color:var(--gray-200,#bfbfc3)}.gl-border-gray-50{border-color:var(--gray-50,#ececef)}.gl-border-red-500{border-color:var(--red-500,#dd2b0e)}.gl-border-b-gray-200{border-bottom-color:var(--gray-200,#bfbfc3)}.gl-border-t-gray-200{border-top-color:var(--gray-200,#bfbfc3)}.\!gl-bg-data-viz-green-700{background-color:var(--data-viz-green-700,#366800)!important}.\!gl-bg-data-viz-magenta-950{background-color:var(--data-viz-magenta-950,#541d31)!important}.\!gl-bg-gray-10{background-color:var(--gray-10,#fbfafd)!important}.\!gl-bg-transparent{background-color:initial!important}.gl-bg-blue-100{background-color:var(--blue-100,#cbe2f9)}.gl-bg-data-viz-blue-500{background-color:var(--data-viz-blue-500,#617ae2)}.gl-bg-gray-10{background-color:var(--gray-10,#fbfafd)}.gl-bg-gray-50{background-color:var(--gray-50,#ececef)}.gl-bg-gray-900{background-color:var(--gray-900,#28272d)}.gl-bg-gray-950{background-color:var(--gray-950,#18171d)}.gl-bg-green-100{background-color:var(--green-100,#c3e6cd)}.gl-bg-purple-50{background-color:var(--purple-50,#f4f0ff)}.gl-bg-red-100{background-color:var(--red-100,#fdd4cd)}.gl-bg-red-50{background-color:var(--red-50,#fcf1ef)}.gl-bg-transparent{background-color:initial}.gl-bg-white{background-color:var(--white,#fff)}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#4c4b51))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#28272d))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.\!gl-p-0{padding:0!important}.\!gl-p-2{padding:.25rem!important}.\!gl-p-4{padding:.75rem!important}.gl-p-0{padding:0}.gl-p-1{padding:.125rem}.gl-p-2{padding:.25rem}.gl-p-3{padding:.5rem}.gl-p-4{padding:.75rem}.gl-p-5{padding:1rem}.gl-p-7{padding:2rem}.\!gl-px-2{padding-left:.25rem!important;padding-right:.25rem!important}.\!gl-px-3{padding-left:.5rem!important;padding-right:.5rem!important}.\!gl-py-2{padding-bottom:.25rem!important;padding-top:.25rem!important}.\!gl-py-4{padding-bottom:.75rem!important;padding-top:.75rem!important}.gl-px-1{padding-left:.125rem;padding-right:.125rem}.gl-px-2{padding-left:.25rem;padding-right:.25rem}.gl-px-4{padding-left:.75rem;padding-right:.75rem}.gl-px-5{padding-left:1rem;padding-right:1rem}.gl-py-2{padding-bottom:.25rem;padding-top:.25rem}.gl-py-3{padding-bottom:.5rem;padding-top:.5rem}.gl-py-6{padding-bottom:1.5rem;padding-top:1.5rem}.\!gl-pl-9{padding-left:3rem!important}.\!gl-pr-7{padding-right:2rem!important}.\!gl-pr-9{padding-right:3rem!important}.\!gl-pt-0{padding-top:0!important}.gl-pb-2{padding-bottom:.25rem}.gl-pl-0{padding-left:0}.gl-pl-2{padding-left:.25rem}.gl-pl-3{padding-left:.5rem}.gl-pl-4{padding-left:.75rem}.gl-pl-5{padding-left:1rem}.gl-pl-6{padding-left:1.5rem}.gl-pl-7{padding-left:2rem}.gl-pr-2{padding-right:.25rem}.gl-pr-5{padding-right:1rem}.gl-pr-6{padding-right:1.5rem}.gl-pr-8{padding-right:2.5rem}.gl-pt-1{padding-top:.125rem}.gl-pt-2{padding-top:.25rem}.gl-pt-3{padding-top:.5rem}.gl-pt-4{padding-top:.75rem}.\!gl-text-left{text-align:left!important}.gl-text-left{text-align:left}.gl-text-center{text-align:center}.gl-text-right{text-align:right}.gl-align-top{vertical-align:top}.gl-align-bottom{vertical-align:bottom}.\!gl-align-text-bottom{vertical-align:text-bottom!important}.gl-font-regular{font-family:var(--default-regular-font,"GitLab Sans"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}.\!gl-text-sm{font-size:.75rem!important}.gl-text-base{font-size:.875rem}.gl-text-lg{font-size:1rem}.gl-text-size-h-display{font-size:1.75rem}.gl-text-size-h2{font-size:1.1875rem}.gl-text-sm{font-size:.75rem}.gl-text-xs{font-size:.625rem}.gl-font-bold{font-weight:600}.gl-font-normal{font-weight:400}.gl-italic{font-style:italic}.gl-leading-1{line-height:1}.gl-leading-20{line-height:1.25rem}.gl-leading-36{line-height:2.25rem}.gl-leading-normal{line-height:1rem}.\!gl-text-gray-500{color:var(--gray-500,#737278)!important}.\!gl-text-red-500{color:var(--red-500,#dd2b0e)!important}.\!gl-text-white{color:var(--white,#fff)!important}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#4c4b51)}.gl-text-gray-900{color:var(--gray-900,#28272d)}.gl-text-gray-950{color:var(--gray-950,#18171d)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-inherit{color:inherit}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#18171d))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}.\!gl-opacity-0{opacity:0!important}.gl-opacity-10{opacity:1}.\!gl-shadow-inner-1-gray-100{--tw-shadow:inset 0 0 0 1px var(--gray-100,#dcdcde)!important;--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)!important}.\!gl-shadow-inner-1-gray-100,.\!gl-shadow-inner-1-gray-400{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.\!gl-shadow-inner-1-gray-400{--tw-shadow:inset 0 0 0 1px var(--gray-400,#89888d)!important;--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)!important}.\!gl-shadow-inner-1-red-500{--tw-shadow:inset 0 0 0 1px var(--red-500,#dd2b0e)!important;--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)!important}.\!gl-shadow-inner-1-red-500,.\!gl-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.\!gl-shadow-none{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important}.gl-shadow-inner-1-gray-400{--tw-shadow:inset 0 0 0 1px var(--gray-400,#89888d);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.gl-shadow-inner-1-gray-400,.gl-shadow-inner-1-red-300{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.gl-shadow-inner-1-red-300{--tw-shadow:inset 0 0 0 1px var(--red-300,#f57f6c);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.gl-shadow-inner-1-red-500{--tw-shadow:inset 0 0 0 1px var(--red-500,#dd2b0e);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.gl-shadow-inner-1-red-500,.gl-shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.gl-shadow-md{--tw-shadow:0 2px 8px var(--gl-shadow-color-default,#05050629),0 0 2px var(--gl-shadow-color-default,#05050629);--tw-shadow-colored:0 2px 8px var(--tw-shadow-color),0 0 2px var(--tw-shadow-color)}.gl-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.gl-outline-none{outline:2px solid #0000;outline-offset:2px}.gl-transition-all{transition-duration:.2s;transition-property:all;transition-timing-function:ease}.gl-font-monospace{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.gl-break-anywhere{overflow-wrap:anywhere;word-break:normal}.gl-border-b-solid{border-bottom-style:solid}.gl-border-t-solid{border-top-style:solid}.hover\:\!gl-cursor-not-allowed:hover{cursor:not-allowed!important}.hover\:gl-cursor-pointer:hover{cursor:pointer}.focus\:\!gl-shadow-inner-2-blue-400:focus{--tw-shadow:inset 0 0 0 2px var(--blue-400,#428fdc)!important;--tw-shadow-colored:inset 0 0 0 2px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}@media (min-width:576px){.sm\:gl-block{display:block}.sm\:\!gl-hidden{display:none!important}.sm\:gl-flex-nowrap{flex-wrap:nowrap}.sm\:gl-gap-3{gap:.5rem}}
 /*# sourceMappingURL=tailwind.css.map */

package/dist/tailwind.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB,CAAnB,mBAAA,gMAAmB,CAAnB,2BAAmB,CAAnB,mBAAA,yBAAmB,CAAnB,mBAAA,sBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
+{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,iBAAA,uBAAc,CAAd,uBAAc,CAAd,kBAAc,CAAd,kBAAc,CAAd,aAAc,CAAd,aAAc,CAAd,aAAc,CAAd,cAAc,CAAd,cAAc,CAAd,YAAc,CAAd,YAAc,CAAd,iBAAc,CAAd,qCAAc,CAAd,6BAAc,CAAd,4BAAc,CAAd,2BAAc,CAAd,cAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,iBAAc,CAAd,0BAAc,CAAd,2BAAc,CAAd,yBAAc,CAAd,iCAAc,CAAd,0BAAc,CAAd,qBAAc,CAAd,6BAAc,CAAd,WAAc,CAAd,iBAAc,CAAd,eAAc,CAAd,gBAAc,CAAd,iBAAc,CAAd,aAAc,CAAd,eAAc,CAAd,YAAc,CAAd,kBAAc,CAAd,oBAAc,CAAd,0BAAc,CAAd,wBAAc,CAAd,yBAAc,CAAd,0BAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,wBAAc,CAAd,qBAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,oBAAc,CAAd,oBAAc,CAAd,mBAAA,uBAAc,CAAd,uBAAc,CAAd,kBAAc,CAAd,kBAAc,CAAd,aAAc,CAAd,aAAc,CAAd,aAAc,CAAd,cAAc,CAAd,cAAc,CAAd,YAAc,CAAd,YAAc,CAAd,iBAAc,CAAd,qCAAc,CAAd,6BAAc,CAAd,4BAAc,CAAd,2BAAc,CAAd,cAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,iBAAc,CAAd,0BAAc,CAAd,2BAAc,CAAd,yBAAc,CAAd,iCAAc,CAAd,0BAAc,CAAd,qBAAc,CAAd,6BAAc,CAAd,WAAc,CAAd,iBAAc,CAAd,eAAc,CAAd,gBAAc,CAAd,iBAAc,CAAd,aAAc,CAAd,eAAc,CAAd,YAAc,CAAd,kBAAc,CAAd,oBAAc,CAAd,0BAAc,CAAd,wBAAc,CAAd,yBAAc,CAAd,0BAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,wBAAc,CAAd,qBAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,oBAAc,CAAd,oBAAc,CAAd,WAAA,uBAAc,CAAd,uBAAc,CAAd,kBAAc,CAAd,kBAAc,CAAd,aAAc,CAAd,aAAc,CAAd,aAAc,CAAd,cAAc,CAAd,cAAc,CAAd,YAAc,CAAd,YAAc,CAAd,iBAAc,CAAd,qCAAc,CAAd,6BAAc,CAAd,4BAAc,CAAd,2BAAc,CAAd,cAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,iBAAc,CAAd,0BAAc,CAAd,2BAAc,CAAd,yBAAc,CAAd,iCAAc,CAAd,0BAAc,CAAd,qBAAc,CAAd,6BAAc,CAAd,WAAc,CAAd,iBAAc,CAAd,eAAc,CAAd,gBAAc,CAAd,iBAAc,CAAd,aAAc,CAAd,eAAc,CAAd,YAAc,CAAd,kBAAc,CAAd,oBAAc,CAAd,0BAAc,CAAd,wBAAc,CAAd,yBAAc,CAAd,0BAAc,CAAd,sBAAc,CAAd,uBAAc,CAAd,wBAAc,CAAd,qBAAc,CAAd,mBAAc,CAAd,qBAAc,CAAd,oBAAc,CAAd,oBAAc,CACd,WAAA,oCAAA,CAAA,kBAAoB,CAApB,aAAA,wCAAA,CAAA,sBAAoB,CAApB,aAAA,2CAAA,CAAA,yBAAoB,CAApB,aAAA,yCAAA,CAAA,uBAAoB,CACpB,YAAA,kBAAmB,CAAnB,cAAA,CAAA,UAAmB,CAAnB,WAAmB,CAAnB,eAAmB,CAAnB,SAAmB,CAAnB,iBAAmB,CAAnB,kBAAmB,CAAnB,SAAmB,CAAnB,wBAAA,mBAAmB,CAAnB,wBAAA,mBAAmB,CAAnB,cAAA,iBAAmB,CAAnB,aAAA,mBAAmB,CAAnB,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,aAAA,sBAAmB,CAAnB,UAAA,WAAmB,CAAnB,gBAAA,WAAmB,CAAnB,UAAA,kBAAmB,CAAnB,QAAA,QAAmB,CAAnB,QAAA,WAAmB,CAAnB,WAAA,WAAmB,CAAnB,WAAA,4BAAmB,CAAnB,6BAAmB,CAAnB,UAAA,oBAAmB,CAAnB,qBAAmB,CAAnB,UAAA,mBAAmB,CAAnB,oBAAmB,CAAnB,UAAA,sBAAA,CAAA,mBAAmB,CAAnB,UAAA,oBAAA,CAAA,iBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,mBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,mBAAmB,CAAnB,YAAA,gBAAmB,CAAnB,iBAAmB,CAAnB,SAAA,eAAA,CAAA,YAAmB,CAAnB,SAAA,mBAAA,CAAA,gBAAmB,CAAnB,SAAA,kBAAA,CAAA,eAAmB,CAAnB,WAAA,2BAAmB,CAAnB,UAAA,mBAAmB,CAAnB,UAAA,mBAAmB,CAAnB,UAAA,kBAAmB,CAAnB,SAAA,eAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,SAAA,iBAAmB,CAAnB,SAAA,gBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,YAAA,gBAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,YAAA,iBAAmB,CAAnB,SAAA,YAAmB,CAAnB,SAAA,iBAAmB,CAAnB,SAAA,gBAAmB,CAAnB,SAAA,iBAAmB,CAAnB,SAAA,eAAmB,CAAnB,YAAA,uBAAmB,CAAnB,UAAA,aAAmB,CAAnB,iBAAA,oBAAmB,CAAnB,WAAA,sBAAmB,CAAnB,SAAA,YAAmB,CAAnB,gBAAA,mBAAmB,CAAnB,UAAA,aAAmB,CAAnB,aAAA,sBAAmB,CAAnB,WAAA,YAAmB,CAAnB,aAAA,qBAAmB,CAAnB,QAAA,QAAmB,CAAnB,SAAA,WAAmB,CAAnB,SAAA,WAAmB,CAAnB,QAAA,WAAmB,CAAnB,WAAA,WAAmB,CAAnB,WAAA,WAAmB,CAAnB,eAAA,eAAmB,CAAnB,YAAA,iBAAmB,CAAnB,WAAA,uBAAmB,CAAnB,aAAA,oBAAmB,CAAnB,WAAA,SAAmB,CAAnB,SAAA,YAAmB,CAAnB,SAAA,WAAmB,CAAnB,SAAA,WAAmB,CAAnB,YAAA,SAAmB,CAAnB,QAAA,UAAmB,CAAnB,WAAA,UAAmB,CAAnB,eAAA,aAAmB,CAAnB,aAAA,iBAAmB,CAAnB,eAAA,cAAmB,CAAnB,kBAAA,aAAmB,CAAnB,uBAAA,WAAmB,CAAnB,YAAA,YAAmB,CAAnB,sBAAA,sBAAmB,CAAnB,6LAAmB,CAAnB,yBAAA,4BAAmB,CAAnB,kBAAA,qBAAmB,CAAnB,mBAAA,cAAmB,CAAnB,mBAAA,cAAmB,CAAnB,gBAAA,WAAmB,CAAnB,cAAA,oBAAmB,CAAnB,aAAA,kBAAmB,CAAnB,aAAA,qBAAmB,CAAnB,cAAA,cAAmB,CAAnB,gBAAA,gBAAmB,CAAnB,gBAAA,sBAAmB,CAAnB,cAAA,oBAAmB,CAAnB,iBAAA,kBAAmB,CAAnB,mBAAA,oBAAmB,CAAnB,oBAAA,oCAAmB,CAAnB,kBAAA,0BAAmB,CAAnB,gBAAA,wBAAmB,CAAnB,mBAAA,sBAAmB,CAAnB,oBAAA,6BAAmB,CAAnB,UAAA,UAAmB,CAAnB,UAAA,SAAmB,CAAnB,UAAA,UAAmB,CAAnB,UAAA,QAAmB,CAAnB,UAAA,UAAmB,CAAnB,YAAA,gBAAmB,CAAnB,eAAA,qBAAmB,CAAnB,oBAAA,eAAmB,CAAnB,qBAAA,gBAAmB,CAAnB,oBAAA,eAAmB,CAAnB,aAAA,eAAmB,CAAnB,sBAAmB,CAAnB,kBAAmB,CAAnB,oBAAA,gCAAmB,CAAnB,kBAAA,sBAAmB,CAAnB,wBAAA,4BAAmB,CAAnB,sBAAA,kBAAmB,CAAnB,sBAAA,kBAAmB,CAAnB,wBAAA,oBAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,yBAAmB,CAAnB,iBAAA,oBAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,eAAA,mBAAmB,CAAnB,oBAAA,2BAAmB,CAAnB,oBAAA,4BAAmB,CAAnB,oBAAA,yBAAmB,CAAnB,wBAAA,gBAAmB,CAAnB,iBAAA,+BAAmB,CAAnB,aAAA,uBAAmB,CAAnB,eAAA,qBAAmB,CAAnB,eAAA,uBAAmB,CAAnB,aAAA,qBAAmB,CAAnB,4BAAA,oBAAmB,CAAnB,iBAAA,kBAAmB,CAAnB,kBAAA,2BAAmB,CAAnB,gBAAA,iBAAmB,CAAnB,oBAAA,oCAAmB,CAAnB,mBAAA,mCAAmB,CAAnB,mBAAA,mCAAmB,CAAnB,sBAAA,2CAAmB,CAAnB,sBAAA,wCAAmB,CAAnB,4BAAA,4DAAmB,CAAnB,8BAAA,8DAAmB,CAAnB,iBAAA,iDAAmB,CAAnB,qBAAA,kCAAmB,CAAnB,gBAAA,wCAAmB,CAAnB,yBAAA,iDAAmB,CAAnB,eAAA,uCAAmB,CAAnB,eAAA,uCAAmB,CAAnB,gBAAA,wCAAmB,CAAnB,gBAAA,wCAAmB,CAAnB,iBAAA,yCAAmB,CAAnB,iBAAA,yCAAmB,CAAnB,eAAA,uCAAmB,CAAnB,cAAA,sCAAmB,CAAnB,mBAAA,wBAAmB,CAAnB,aAAA,kCAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,UAAA,mBAAmB,CAAnB,UAAA,wBAAmB,CAAnB,UAAA,wBAAmB,CAAnB,QAAA,SAAmB,CAAnB,QAAA,eAAmB,CAAnB,QAAA,cAAmB,CAAnB,QAAA,aAAmB,CAAnB,QAAA,cAAmB,CAAnB,QAAA,YAAmB,CAAnB,QAAA,YAAmB,CAAnB,WAAA,6BAAmB,CAAnB,8BAAmB,CAAnB,WAAA,4BAAmB,CAAnB,6BAAmB,CAAnB,WAAA,+BAAA,CAAA,4BAAmB,CAAnB,WAAA,+BAAA,CAAA,4BAAmB,CAAnB,SAAA,oBAAmB,CAAnB,qBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,oBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,oBAAmB,CAAnB,SAAA,iBAAmB,CAAnB,kBAAmB,CAAnB,SAAA,qBAAA,CAAA,kBAAmB,CAAnB,SAAA,oBAAA,CAAA,iBAAmB,CAAnB,SAAA,qBAAA,CAAA,kBAAmB,CAAnB,WAAA,2BAAmB,CAAnB,WAAA,4BAAmB,CAAnB,WAAA,4BAAmB,CAAnB,WAAA,uBAAmB,CAAnB,SAAA,qBAAmB,CAAnB,SAAA,cAAmB,CAAnB,SAAA,mBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,SAAA,iBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,SAAA,iBAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,oBAAmB,CAAnB,SAAA,mBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,SAAA,iBAAmB,CAAnB,SAAA,kBAAmB,CAAnB,gBAAA,yBAAmB,CAAnB,cAAA,eAAmB,CAAnB,gBAAA,iBAAmB,CAAnB,eAAA,gBAAmB,CAAnB,cAAA,kBAAmB,CAAnB,iBAAA,qBAAmB,CAAnB,wBAAA,oCAAmB,CAAnB,iBAAA,2OAAmB,CAAnB,cAAA,0BAAmB,CAAnB,cAAA,iBAAmB,CAAnB,YAAA,cAAmB,CAAnB,wBAAA,iBAAmB,CAAnB,iBAAA,mBAAmB,CAAnB,YAAA,gBAAmB,CAAnB,YAAA,iBAAmB,CAAnB,cAAA,eAAmB,CAAnB,gBAAA,eAAmB,CAAnB,WAAA,iBAAmB,CAAnB,cAAA,aAAmB,CAAnB,eAAA,mBAAmB,CAAnB,eAAA,mBAAmB,CAAnB,mBAAA,gBAAmB,CAAnB,oBAAA,uCAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,iBAAA,iCAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,iBAAA,aAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB,CAAnB,gBAAA,mBAAmB,CAAnB,eAAA,SAAmB,CAAnB,8BAAA,6DAAmB,CAAnB,oEAAmB,CAAnB,4DAAA,4GAAmB,CAAnB,8BAAA,6DAAmB,CAAnB,oEAAmB,CAAnB,6BAAA,4DAAmB,CAAnB,oEAAmB,CAAnB,+CAAA,4GAAmB,CAAnB,kBAAA,+BAAmB,CAAnB,uCAAmB,CAAnB,4BAAA,mDAAmB,CAAnB,0DAAmB,CAAnB,uDAAA,kGAAmB,CAAnB,2BAAA,kDAAmB,CAAnB,0DAAmB,CAAnB,2BAAA,kDAAmB,CAAnB,0DAAmB,CAAnB,yCAAA,kGAAmB,CAAnB,cAAA,+GAAmB,CAAnB,mFAAmB,CAAnB,gBAAA,qBAAmB,CAAnB,6BAAmB,CAAnB,kGAAmB,CAAnB,iBAAA,uBAAmB,CAAnB,kBAAmB,CAAnB,mBAAA,uBAAA,CAAA,uBAAmB,CAAnB,+BAAmB,CAAnB,mBAAA,gMAAmB,CAAnB,2BAAmB,CAAnB,mBAAA,sBAAmB,CAAnB,iBAAmB,CAAnB,mBAAA,yBAAmB,CAAnB,mBAAA,sBAAmB,CAFnB,sCAAA,4BAGA,CAHA,gCAAA,cAGA,CAHA,2CAAA,6DAGA,CAHA,oEAGA,CAHA,4GAGA,CAHA,yBAAA,cAAA,aAGA,CAHA,iBAAA,sBAGA,CAHA,oBAAA,gBAGA,CAHA,cAAA,SAGA,CAAA","file":"tailwind.css","sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"]}

package/dist/tokens/tokens_story.js

@@ -54,7 +54,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-m-0 gl-list-none gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-text-inherit",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-inherit"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/tokens_table.js

@@ -113,17 +113,17 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3 gl-mb-5"},[_c('gl-form-input',{attrs:{"placeholder":"Type to search"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"id":"component-listbox","selected":_vm.selectedMode,"items":_vm.modes},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedMode),callback:function ($$v) {_vm.selectedMode=$$v;},expression:"selectedMode"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"filter":_vm.filter,"items":_vm.items,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.name }); },"hover":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-mb-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-form-input',{attrs:{"placeholder":"Type to search"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"id":"component-listbox","selected":_vm.selectedMode,"items":_vm.modes},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedMode),callback:function ($$v) {_vm.selectedMode=$$v;},expression:"selectedMode"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"filter":_vm.filter,"items":_vm.items,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.name }); },"hover":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
 var ref_item = ref.item;
 var name = ref_item.name;
 var deprecated = ref_item.deprecated;
 var description = ref_item.description;
-return [_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n      ")]),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e(),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
+return [_c('code',{staticClass:"gl-text-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n      ")]),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e(),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
 var ref_item = ref.item;
 var type = ref_item.type;
 var value = ref_item.value;
 var valueLabel = ref_item.valueLabel;
-return [_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-w-5 gl-h-5 gl-rounded-base",style:({ 'background-color': value })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v(_vm._s(valueLabel))])])]}}])})],1)};
+return [_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-h-5 gl-w-5 gl-rounded-base",style:({ 'background-color': value })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-base gl-text-strong"},[_vm._v(_vm._s(valueLabel))])])]}}])})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/utils/charts/constants.js

@@ -57,7 +57,7 @@ const CHART_TYPE_BAR = 'bar';
 const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-const HEIGHT_AUTO_CLASSES = 'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
-const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';
+const HEIGHT_AUTO_CLASSES = 'gl-chart-h-auto gl-flex gl-flex-col gl-h-full';
+const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-flex gl-h-full';
 
 export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, CHART_TYPE_BAR, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES, HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET, arrowSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.12.1",
+  "version": "86.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/accordion/accordion_item.vue

@@ -101,7 +101,7 @@ export default {
       <gl-button
         v-gl-collapse-toggle="accordionItemId"
         variant="link"
-        button-text-classes="gl-display-flex"
+        button-text-classes="gl-flex"
         :icon="icon"
       >
         {{ buttonTitle }}
@@ -112,7 +112,7 @@ export default {
       v-model="isVisible"
       :visible="isVisible"
       :accordion="accordion"
-      class="gl-mt-3 gl-font-base"
+      class="gl-mt-3 gl-text-base"
       :data-testid="`accordion-item-collapse-${accordionItemId}`"
     >
       <!-- @slot Item content -->

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -72,10 +72,8 @@ export default {
 <template>
   <div class="gl-avatar-labeled">
     <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
-    <div class="gl-avatar-labeled-labels gl-text-left!" :class="avatarRowLayoutClass">
-      <div
-        class="gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"
-      >
+    <div class="gl-avatar-labeled-labels !gl-text-left" :class="avatarRowLayoutClass">
+      <div class="-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left">
         <gl-link v-if="hasLabelLink" ref="labelLink" :href="labelLink" class="gl-avatar-link">
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>

package/src/components/base/badge/badge.vue

@@ -71,7 +71,7 @@ export default {
     v-bind="$attrs"
     :variant="variant"
     class="gl-badge"
-    :class="{ 'gl-px-2!': !$scopedSlots.default }"
+    :class="{ '!gl-px-2': !$scopedSlots.default }"
     :role="role"
     :aria-label="ariaLabel"
     pill
@@ -80,7 +80,7 @@ export default {
       v-if="icon"
       class="gl-badge-icon"
       :size="iconSizeComputed"
-      :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
+      :class="{ '-gl-ml-2': isCircularIcon }"
       :name="icon"
     />
     <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->

package/src/components/base/banner/banner.vue

@@ -100,11 +100,11 @@ export default {
 
 <template>
   <gl-card
-    class="gl-banner gl-pl-6 gl-pr-8 gl-py-6"
+    class="gl-banner gl-py-6 gl-pl-6 gl-pr-8"
     :class="{
       'gl-banner-introduction': isIntroducing,
     }"
-    body-class="gl-display-flex gl-p-0!"
+    body-class="gl-flex !gl-p-0"
   >
     <div v-if="svgPath" class="gl-banner-illustration">
       <img :src="svgPath" alt="" />

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -219,7 +219,7 @@ export default {
           :src="item.avatarPath"
           :size="16"
           aria-hidden="true"
-          class="gl-breadcrumb-avatar-tile gl-mr-2 gl-rounded-base! gl-border"
+          class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-base"
           shape="rect"
           data-testid="avatar"
         /><span>{{ item.text }}</span>

package/src/components/base/datepicker/datepicker.vue

@@ -369,8 +369,8 @@ export default {
 
 <template>
   <div :class="datepickerClasses">
-    <div v-if="showDefaultField" class="gl-display-flex gl-align-items-start gl-gap-3">
-      <div class="gl-display-flex gl-flex-grow-1 gl-relative">
+    <div v-if="showDefaultField" class="gl-align-items-start gl-flex gl-gap-3">
+      <div class="gl-relative gl-flex gl-grow">
         <!--
       @slot (optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`
       @binding {string} formattedDate
@@ -381,7 +381,7 @@ export default {
             v-model="textInput"
             :name="inputName"
             data-testid="gl-datepicker-input"
-            :class="renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!'"
+            :class="renderClearButton ? '!gl-pr-9' : '!gl-pr-7'"
             :value="formattedDate"
             :placeholder="placeholder"
             :autocomplete="inputAutocomplete"
@@ -408,7 +408,7 @@ export default {
             class="gl-px-2"
             :class="disabled ? 'gl-text-gray-400' : 'gl-text-gray-500'"
           >
-            <gl-icon class="gl-display-block" name="calendar" :size="16" />
+            <gl-icon class="gl-block" name="calendar" :size="16" />
           </span>
           <gl-button
             v-else

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -6,11 +6,11 @@ import GlIcon from '../icon/icon.vue';
 import { datepickerWidthOptionsMap } from '../../../utils/constants';
 
 const CONTAINER_CLASSES = [
-  'gl-display-flex',
-  'gl-align-items-baseline',
+  'gl-flex',
+  'gl-items-baseline',
   'gl-flex-wrap',
-  'gl-sm-flex-nowrap',
-  'gl-sm-gap-3',
+  'sm:gl-flex-nowrap',
+  'sm:gl-gap-3',
 ];
 
 export default {
@@ -272,7 +272,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-daterange-picker gl-gap-5 gl-display-flex">
+  <div class="gl-daterange-picker gl-flex gl-gap-5">
     <div :class="startContainerClasses" data-testid="daterange-picker-start-container">
       <label :class="labelClass">{{ fromLabel }}</label>
 

package/src/components/base/dropdown/dropdown.vue

@@ -262,7 +262,7 @@ export default {
       <div
         v-if="hasSlotContents('header') || headerText"
         class="gl-dropdown-header"
-        :class="{ 'gl-border-b-0!': hideHeaderBorder }"
+        :class="{ '!gl-border-b-0': hideHeaderBorder }"
       >
         <p v-if="headerText" class="gl-dropdown-header-top">
           {{ headerText }}
@@ -272,22 +272,18 @@ export default {
 
       <div
         v-if="hasHighlightedItemsOrClearAll"
-        class="gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"
+        class="gl-flex gl-flex-row gl-items-center gl-justify-between"
       >
         <div
           v-if="hasHighlightedItemsContent && showHighlightedItemsTitle"
-          class="gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start"
+          class="gl-justify-content-flex-start gl-flex gl-grow"
           :class="highlightedItemsTitleClass"
         >
-          <span class="gl-font-weight-bold" data-testid="highlighted-items-title">{{
+          <span class="gl-font-bold" data-testid="highlighted-items-title">{{
             highlightedItemsTitle
           }}</span>
         </div>
-        <div
-          v-if="showClearAll"
-          class="gl-display-flex gl-flex-grow-1 gl-justify-content-end"
-          :class="clearAllTextClass"
-        >
+        <div v-if="showClearAll" class="gl-flex gl-grow gl-justify-end" :class="clearAllTextClass">
           <gl-button
             size="small"
             category="tertiary"

package/src/components/base/dropdown/dropdown_item.vue

@@ -78,7 +78,7 @@ export default {
         return '';
       }
 
-      return 'gl-mt-3 gl-align-self-start';
+      return 'gl-mt-3 gl-self-start';
     },
   },
   methods: {
@@ -95,11 +95,7 @@ export default {
       v-if="shouldShowCheckIcon"
       name="mobile-issue-close"
       data-testid="dropdown-item-checkbox"
-      :class="[
-        'gl-dropdown-item-check-icon',
-        { 'gl-visibility-hidden': !isChecked },
-        checkedClasses,
-      ]"
+      :class="['gl-dropdown-item-check-icon', { 'gl-invisible': !isChecked }, checkedClasses]"
     />
     <gl-icon v-if="iconName" :name="iconName" :class="['gl-dropdown-item-icon', iconColorCss]" />
     <gl-avatar v-if="avatarUrl" :size="32" :src="avatarUrl" />

package/src/components/base/filtered_search/filtered_search.vue

@@ -414,7 +414,7 @@ export default {
         class="gl-filtered-search-scrollable-container"
         :class="{
           'gl-filtered-search-scrollable-container-with-search-button': showSearchButton,
-          'gl-bg-gray-10! gl-inset-border-1-gray-100!': viewOnly,
+          '!gl-bg-gray-10 !gl-shadow-inner-1-gray-100': viewOnly,
         }"
       >
         <div class="gl-filtered-search-scrollable">

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -164,7 +164,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-h-auto gl-filtered-search-term" data-testid="filtered-search-term">
+  <div class="gl-filtered-search-term gl-h-auto" data-testid="filtered-search-term">
     <!--
       Emitted when this term token is clicked.
       @event activate

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -396,7 +396,7 @@ export default {
       </template>
 
       <template #option="{ option }">
-        <div class="gl-display-flex">
+        <div class="gl-flex">
           {{ showFriendlyText ? option.description : option.value }}
           <span v-if="option.description" class="gl-filtered-search-token-operator-description">
             {{ showFriendlyText ? option.value : option.description }}

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -414,7 +414,7 @@ export default {
     class="gl-filtered-search-token-segment"
     :class="{
       'gl-filtered-search-token-segment-active': active,
-      'gl-cursor-text!': viewOnly,
+      '!gl-cursor-text': viewOnly,
     }"
     data-testid="filtered-search-token-segment"
     v-on="viewOnly ? {} : { mousedown: emitIfInactive }"

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -235,13 +235,13 @@ export default {
       :id="suggestionsId"
       ref="suggestionsMenu"
       data-testid="combobox-dropdown"
-      class="dropdown-menu gl-w-full gl-form-combobox-inner gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column"
+      class="dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-pl-0"
       @keydown.down="onArrowDown"
       @keydown.up="onArrowUp"
       @keydown.esc.stop="onEsc"
     >
-      <li class="gl-overflow-y-auto show-dropdown">
-        <ul class="gl-list-style-none gl-pl-0 gl-mb-0">
+      <li class="show-dropdown gl-overflow-y-auto">
+        <ul class="gl-mb-0 gl-list-none gl-pl-0">
           <gl-dropdown-item
             v-for="(result, i) in results"
             ref="results"
@@ -259,7 +259,7 @@ export default {
       </li>
       <gl-dropdown-divider v-if="resultsLength > 0 && actionList.length > 0" />
       <li>
-        <ul class="gl-list-style-none gl-pl-0 gl-mb-0">
+        <ul class="gl-mb-0 gl-list-none gl-pl-0">
           <gl-dropdown-item
             v-for="(action, i) in actionList"
             :key="i + resultsLength"

package/src/components/base/icon/icon.md

@@ -20,7 +20,7 @@ semantically be a button.
 <gl-icon name="eye-slash" :aria-label="__('Confidential issue')" />
 
 <!-- clickable icon, which is borderless and padding-less -->
-<gl-button icon="close" category="tertiary" class="gl-p-0!" aria-label="Close" />
+<gl-button icon="close" category="tertiary" class="!gl-p-0" aria-label="Close" />
 ```
 
 For more information about icons within GitLab, visit the

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -125,7 +125,7 @@ export default {
       >
         <!-- @slot Used to customize the appearance of the "Prev" button -->
         <slot name="previous-button-content">
-          <div class="gl-display-flex gl-align-center">
+          <div class="gl-align-center gl-flex">
             <gl-icon name="chevron-left" />
             {{ prevText }}
           </div>
@@ -139,7 +139,7 @@ export default {
       >
         <!-- @slot Used to customize the appearance of the "Next" button -->
         <slot name="next-button-content">
-          <div class="gl-display-flex gl-align-center">
+          <div class="gl-align-center gl-flex">
             {{ nextText }}
             <gl-icon name="chevron-right" />
           </div>

package/src/components/base/label/label.vue

@@ -137,7 +137,7 @@ export default {
     </component>
     <gl-button
       v-if="showCloseButton"
-      class="gl-label-close gl-p-0!"
+      class="gl-label-close !gl-p-0"
       category="tertiary"
       size="small"
       variant="reset"

package/src/components/base/loading_icon/loading_icon.vue

@@ -88,7 +88,7 @@ export default {
     class="gl-spinner-container"
     role="status"
   >
-    <span class="gl-vertical-align-text-bottom!" :class="spinnerCssClasses"></span>
+    <span class="!gl-align-text-bottom" :class="spinnerCssClasses"></span>
   </component>
   <component :is="rootElementType" v-else :class="dotsCssClasses" role="status" :aria-label="label">
     <span></span>

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -140,7 +140,7 @@
 
   code {
     @include gl-bg-white;
-    @include gl-rounded-0;
+    @include gl-rounded-none;
     @include gl-text-gray-900;
     @include gl-px-0;
     @include gl-py-0;

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -267,7 +267,7 @@ export default {
     },
     panelClasses() {
       return {
-        'gl-display-block!': this.visible,
+        '!gl-block': this.visible,
         [FIXED_WIDTH_CLASS]: !this.fluidWidth,
         'gl-fixed': this.openedYet && this.isFixed,
         'gl-absolute': this.openedYet && !this.isFixed,
@@ -478,7 +478,7 @@ export default {
 <template>
   <component
     :is="wrapperComponent"
-    :class="[$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': block }]"
+    :class="[$options.BASE_DROPDOWN_CLASS, { '!gl-block': block }]"
     @close="close"
   >
     <component

package/src/components/base/new_dropdowns/base_dropdown/constants.js

@@ -1,2 +1,2 @@
-export const FIXED_WIDTH_CLASS = 'gl-w-31!';
+export const FIXED_WIDTH_CLASS = '!gl-w-31';
 export const DEFAULT_OFFSET = 4;

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -112,7 +112,7 @@ template. If you want to render a custom template for items, use the
 ```html
 <gl-disclosure-dropdown :items="items">
   <template #list-item="{ item }">
-    <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+    <span class="gl-flex gl-items-center gl-justify-between">
       {{item.text}}
       <gl-icon v-if="item.icon" :name="item.icon" />
     </span>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -81,11 +81,11 @@ export default {
       v-if="showHeader"
       :id="nameId"
       aria-hidden="true"
-      class="gl-pl-4 gl-py-2 gl-font-sm gl-font-weight-bold"
+      class="gl-py-2 gl-pl-4 gl-text-sm gl-font-bold"
     >
       <slot name="group-label">{{ group.name }}</slot>
     </div>
-    <ul :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-pl-0 gl-list-style-none">
+    <ul :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-list-none gl-pl-0">
       <slot>
         <!-- eslint-disable vue/valid-v-for -->
         <gl-disclosure-dropdown-item

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -30,7 +30,7 @@ export const mockItems = [
       console.log('CLOSED');
     },
     extraAttrs: {
-      class: 'gl-text-red-500!',
+      class: '!gl-text-red-500',
       rel: 'nofollow',
       'data-method': 'put',
     },
@@ -74,7 +74,7 @@ export const mockItemsCustomItem = [
       // eslint-disable-next-line no-console
       console.log('clicked!');
     },
-    wrapperClass: 'gl-sm-display-none!',
+    wrapperClass: 'sm:!gl-hidden',
   },
 ];
 

package/src/components/base/new_dropdowns/listbox/listbox.md

@@ -89,10 +89,10 @@ template. If you want to render a custom template for items, use the
 ```html
 <gl-collapsible-listbox :items="items">
   <template #list-item="{ item }">
-    <span class="gl-display-flex gl-align-items-center">
+    <span class="gl-flex gl-items-center">
       <gl-avatar :size="32" class-="gl-mr-3"/>
-      <span class="gl-display-flex gl-flex-direction-column">
-        <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
+      <span class="gl-flex gl-flex-col">
+        <span class="gl-font-bold gl-whitespace-nowrap">{{ item.text }}</span>
         <span class="gl-text-subtle"> {{ item.secondaryText }}</span>
       </span>
     </span>

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -471,7 +471,7 @@ export default {
       const toggleClasses = [this.toggleClass];
 
       if (!this.hasSelection) {
-        toggleClasses.push('gl-text-gray-500!');
+        toggleClasses.push('!gl-text-gray-500');
       }
       return toggleClasses;
     },
@@ -790,12 +790,12 @@ export default {
 
     <div
       v-if="headerText"
-      class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8"
+      class="gl-flex gl-min-h-8 gl-items-center !gl-p-4"
       :class="$options.HEADER_ITEMS_BORDER_CLASSES"
     >
       <div
         :id="headerId"
-        class="gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2"
+        class="gl-grow gl-pr-2 gl-text-sm gl-font-bold"
         data-testid="listbox-header-text"
       >
         {{ headerText }}
@@ -803,7 +803,7 @@ export default {
       <gl-button
         v-if="showResetButton"
         category="tertiary"
-        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis"
+        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-py-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
         data-testid="listbox-reset-button"
         @click="onResetButtonClicked"
       >
@@ -812,7 +812,7 @@ export default {
       <gl-button
         v-if="showSelectAllButton"
         category="tertiary"
-        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis"
+        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-py-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
         data-testid="listbox-select-all-button"
         @click="onSelectAllButtonClicked"
       >
@@ -919,7 +919,7 @@ export default {
         aria-hidden="true"
         data-testid="bottom-scrim"
       >
-        <div class="bottom-scrim" :class="{ 'gl-rounded-0!': hasFooter }"></div>
+        <div class="bottom-scrim" :class="{ '!gl-rounded-none': hasFooter }"></div>
       </component>
     </component>
     <span
@@ -937,7 +937,7 @@ export default {
     <div
       v-else-if="showNoResultsText"
       aria-live="assertive"
-      class="gl-pl-7 gl-pr-5 gl-py-3 gl-font-base gl-text-gray-600"
+      class="gl-py-3 gl-pl-7 gl-pr-5 gl-text-base gl-text-gray-600"
       data-testid="listbox-no-results-text"
     >
       {{ noResultsText }}

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -25,7 +25,7 @@ export default {
     <li
       :id="nameId"
       role="presentation"
-      class="gl-pl-4 gl-pt-3 gl-pb-2 gl-font-sm gl-font-weight-bold"
+      class="gl-pb-2 gl-pl-4 gl-pt-3 gl-text-sm gl-font-bold"
       :class="{ 'gl-sr-only': textSrOnly }"
     >
       <slot name="group-label">{{ name }}</slot>