@flux-ui/components 3.0.0-next.72 → 3.0.0-next.74

package/dist/index.css

@@ -440,6 +440,179 @@
 .icon-boxed-warning {
   background: var(--warning-100);
   color: var(--warning-900);
+}.overlay-view {
+  position: fixed;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+}
+
+.overlay-provider {
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.overlay-shade {
+  background: var(--overlay);
+  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
+  pointer-events: none;
+  transition: opacity 600ms var(--swift-out);
+}
+
+.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
+  opacity: 0;
+}
+
+.overlay {
+  position: fixed;
+  display: flex;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+  outline: 0;
+}
+.overlay > .base-pane-structure {
+  display: flex;
+  margin: auto;
+  max-height: min(840px, 100dvh - 180px);
+  width: calc(100dvw - 90px);
+  flex-flow: column nowrap;
+  box-shadow: var(--shadow-lg);
+  overflow: auto;
+  transition: 420ms var(--swift-out);
+  transition-property: filter, scale;
+}
+.overlay > .base-pane-structure .pane-footer {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+}
+.overlay > .base-pane-structure::after {
+  position: absolute;
+  display: block;
+  inset: 0;
+  content: "";
+  background: var(--overlay-secondary);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 600ms var(--swift-out);
+  z-index: 1000;
+}
+.overlay.is-current > .base-pane-structure {
+  pointer-events: auto;
+}
+.overlay:not(.is-current) > .base-pane-structure {
+  filter: blur(3px);
+  scale: 0.95;
+}
+.overlay:not(.is-current) > .base-pane-structure::after {
+  opacity: 1;
+}
+
+.overlay-small {
+}
+.overlay-small > .base-pane-structure {
+  max-width: 420px;
+}
+
+.overlay-medium {
+}
+.overlay-medium > .base-pane-structure {
+  max-width: 540px;
+}
+
+.overlay-large {
+}
+.overlay-large > .base-pane-structure {
+  max-width: 720px;
+}
+
+.slide-over {
+  justify-content: flex-end;
+}
+.slide-over > .base-pane-structure {
+  margin: 9px;
+  max-height: calc(100% - 18px);
+  width: min(100dvw, 720px);
+  contain: paint;
+  transition-duration: 600ms;
+  overflow: auto;
+}
+.slide-over > .base-pane-structure > .pane-header,
+.slide-over > .base-pane-structure > .pane-footer {
+  position: sticky;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header {
+  top: 0;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--gray-100);
+  box-shadow: var(--shadow-xs);
+}
+.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
+  padding-bottom: 0;
+  border-bottom: 0;
+  box-shadow: none;
+}
+.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
+  background: inherit;
+}
+.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
+  position: sticky;
+  top: 60px;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
+  top: 66px;
+}
+.slide-over > .base-pane-structure > .pane-footer {
+  bottom: 0;
+}
+
+.overlay-transition-enter-active,
+.overlay-transition-leave-active {
+  transition: opacity 300ms var(--swift-out);
+}
+.overlay-transition-enter-active > .base-pane-structure,
+.overlay-transition-leave-active > .base-pane-structure {
+  transition: 300ms var(--swift-out);
+  transition-property: opacity, scale;
+}
+
+.overlay-transition-enter-from {
+  opacity: 0;
+}
+.overlay-transition-enter-from > .base-pane-structure {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.overlay-transition-leave-to {
+  opacity: 0;
+}
+.overlay-transition-leave-to > .base-pane-structure {
+  opacity: 0;
+  scale: 0.95;
+}
+
+.slide-over-transition-enter-active,
+.slide-over-transition-leave-active {
+  transition: opacity 480ms var(--swift-out);
+}
+.slide-over-transition-enter-active > .base-pane-structure,
+.slide-over-transition-leave-active > .base-pane-structure {
+  transition: 480ms var(--swift-out);
+  transition-property: opacity, transform;
+}
+
+.slide-over-transition-enter-from,
+.slide-over-transition-leave-to {
+  opacity: 0;
+  transition-delay: 210ms;
+}
+.slide-over-transition-enter-from > .base-pane-structure,
+.slide-over-transition-leave-to > .base-pane-structure {
+  transform: translate3d(100%, 0, 0);
 }.spinner {
   --track: var(--gray-100);
   --value: var(--primary-600);
@@ -665,179 +838,6 @@
 }
 .action-pane-body.pane-body {
   padding: 0;
-}.overlay-view {
-  position: fixed;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-}
-
-.overlay-provider {
-  pointer-events: none;
-  z-index: 10000;
-}
-
-.overlay-shade {
-  background: var(--overlay);
-  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
-  pointer-events: none;
-  transition: opacity 600ms var(--swift-out);
-}
-
-.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
-  opacity: 0;
-}
-
-.overlay {
-  position: fixed;
-  display: flex;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-  outline: 0;
-}
-.overlay > .base-pane-structure {
-  display: flex;
-  margin: auto;
-  max-height: min(840px, 100dvh - 180px);
-  width: calc(100dvw - 90px);
-  flex-flow: column nowrap;
-  box-shadow: var(--shadow-lg);
-  overflow: auto;
-  transition: 420ms var(--swift-out);
-  transition-property: filter, scale;
-}
-.overlay > .base-pane-structure .pane-footer {
-  position: sticky;
-  bottom: 0;
-  margin-top: auto;
-}
-.overlay > .base-pane-structure::after {
-  position: absolute;
-  display: block;
-  inset: 0;
-  content: "";
-  background: var(--overlay-secondary);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 600ms var(--swift-out);
-  z-index: 1000;
-}
-.overlay.is-current > .base-pane-structure {
-  pointer-events: auto;
-}
-.overlay:not(.is-current) > .base-pane-structure {
-  filter: blur(3px);
-  scale: 0.95;
-}
-.overlay:not(.is-current) > .base-pane-structure::after {
-  opacity: 1;
-}
-
-.overlay-small {
-}
-.overlay-small > .base-pane-structure {
-  max-width: 420px;
-}
-
-.overlay-medium {
-}
-.overlay-medium > .base-pane-structure {
-  max-width: 540px;
-}
-
-.overlay-large {
-}
-.overlay-large > .base-pane-structure {
-  max-width: 720px;
-}
-
-.slide-over {
-  justify-content: flex-end;
-}
-.slide-over > .base-pane-structure {
-  margin: 9px;
-  max-height: calc(100% - 18px);
-  width: min(100dvw, 720px);
-  contain: paint;
-  transition-duration: 600ms;
-  overflow: auto;
-}
-.slide-over > .base-pane-structure > .pane-header,
-.slide-over > .base-pane-structure > .pane-footer {
-  position: sticky;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header {
-  top: 0;
-  padding-bottom: 18px;
-  border-bottom: 1px solid var(--gray-100);
-  box-shadow: var(--shadow-xs);
-}
-.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
-  padding-bottom: 0;
-  border-bottom: 0;
-  box-shadow: none;
-}
-.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
-  background: inherit;
-}
-.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
-  position: sticky;
-  top: 60px;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
-  top: 66px;
-}
-.slide-over > .base-pane-structure > .pane-footer {
-  bottom: 0;
-}
-
-.overlay-transition-enter-active,
-.overlay-transition-leave-active {
-  transition: opacity 300ms var(--swift-out);
-}
-.overlay-transition-enter-active > .base-pane-structure,
-.overlay-transition-leave-active > .base-pane-structure {
-  transition: 300ms var(--swift-out);
-  transition-property: opacity, scale;
-}
-
-.overlay-transition-enter-from {
-  opacity: 0;
-}
-.overlay-transition-enter-from > .base-pane-structure {
-  opacity: 0;
-  scale: 0.9;
-}
-
-.overlay-transition-leave-to {
-  opacity: 0;
-}
-.overlay-transition-leave-to > .base-pane-structure {
-  opacity: 0;
-  scale: 0.95;
-}
-
-.slide-over-transition-enter-active,
-.slide-over-transition-leave-active {
-  transition: opacity 480ms var(--swift-out);
-}
-.slide-over-transition-enter-active > .base-pane-structure,
-.slide-over-transition-leave-active > .base-pane-structure {
-  transition: 480ms var(--swift-out);
-  transition-property: opacity, transform;
-}
-
-.slide-over-transition-enter-from,
-.slide-over-transition-leave-to {
-  opacity: 0;
-  transition-delay: 210ms;
-}
-.slide-over-transition-enter-from > .base-pane-structure,
-.slide-over-transition-leave-to > .base-pane-structure {
-  transform: translate3d(100%, 0, 0);
 }.primary-button {
   background: var(--primary-600);
   border-color: var(--primary-700);
@@ -2723,8 +2723,8 @@
 
 .form-field-header {
   display: flex;
-  margin-bottom: 0;
   width: 100%;
+  margin-bottom: 0;
   align-items: center;
   align-self: flex-start;
   gap: 6px;
@@ -2889,9 +2889,9 @@
   border-radius: var(--radius-half);
 }
 .form-input-native::-webkit-color-swatch-wrapper {
+  width: calc(100% + 24px);
   margin: 0 -12px;
   padding: 3px;
-  width: calc(100% + 24px);
 }
 
 .form-input-native-has-icon-leading {
@@ -3858,187 +3858,64 @@
 }
 
 .comment:not(.is-received) .comment-content {
-  border-bottom-right-radius: var(--radius);
-}
-
-.comment.is-received .comment-content {
-  background: var(--gray-50);
-  border-color: var(--gray-200);
-  border-bottom-left-radius: var(--radius);
-}
-
-.comment.is-typing .comment-content {
-  width: min-content;
-}
-
-.comment-typing {
-  display: block;
-  margin: 6px;
-  height: 6px;
-  width: 6px;
-  border-radius: 6px;
-  animation: comment-typing 1s linear infinite both;
-}
-
-.comment-footer {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-end;
-  font-size: 12px;
-  font-weight: 500;
-}
-.comment-footer span {
-  margin-right: auto;
-}
-.comment-footer time {
-  color: var(--foreground-secondary);
-}
-
-@keyframes comment-typing {
-  0%, 80%, 100% {
-    background: var(--gray-200);
-    box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
-    translate: 0 0;
-  }
-  20% {
-    background: var(--gray-200);
-    box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
-    translate: 0 0;
-  }
-  40% {
-    background: var(--gray-300);
-    box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
-    translate: 0 -4px;
-  }
-  60% {
-    background: var(--gray-200);
-    box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
-    translate: 0 0;
-  }
-}.slider {
-  position: relative;
-  display: flex;
-  margin: 6px;
-  flex-flow: column;
-  gap: 9px;
-  touch-action: pan-y;
-}
-.slider.is-disabled {
-  cursor: not-allowed;
-}
-.slider.is-dragging {
-  cursor: grabbing;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  background: var(--surface);
-  background-clip: padding-box;
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius-full);
-  box-shadow: var(--shadow-sm);
-  cursor: grab;
-  outline: 0;
-  translate: -50% -50%;
-  transition: var(--transition-default);
-  transition-property: outline-color, outline-offset;
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
-}
-.slider-thumb:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 2px;
-}
-@media (hover: hover) {
-  .slider-thumb:hover {
-    background-color: var(--surface-hover);
-  }
-}
-.slider-thumb.is-disabled {
-  background-color: var(--surface-disabled);
-  box-shadow: none;
-  pointer-events: none;
-}
-.slider-thumb.is-dragging {
-  box-shadow: var(--shadow-md);
-  cursor: grabbing;
-}
-
-.slider-track {
-  position: relative;
-  height: 12px;
-  background: var(--gray-50);
-  background-clip: padding-box;
-  border-radius: var(--radius-half);
-  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
-}
-
-.slider-track-value {
-  position: absolute;
-  display: block;
-  top: 0;
-  height: inherit;
-  background: var(--primary-600);
-  border-radius: inherit;
-}
-
-.slider.is-disabled .slider-track-value {
-  background: var(--gray-300);
-}
-
-.tick {
-  position: absolute;
-  left: calc(var(--position) * 100% - 1px);
-  bottom: 0;
-  height: 9px;
-  width: 2px;
-  background: var(--gray-300);
-  border-radius: var(--radius-full);
-  color: var(--foreground-prominent);
-  font-size: 10px;
-  font-weight: 600;
-  pointer-events: none;
+  border-bottom-right-radius: var(--radius);
 }
 
-.tick-large {
-}
-.tick-large :is(span) {
-  position: relative;
-  display: inline-block;
-  translate: -50% -100%;
+.comment.is-received .comment-content {
+  background: var(--gray-50);
+  border-color: var(--gray-200);
+  border-bottom-left-radius: var(--radius);
 }
 
-.tick-small {
-  height: 6px;
-  opacity: 0.5;
+.comment.is-typing .comment-content {
+  width: min-content;
 }
 
-.ticks {
-  position: relative;
+.comment-typing {
   display: block;
-  height: 21px;
-}.coordinate-picker {
-  position: relative;
-  aspect-ratio: 5/3;
-  background: var(--gray-50);
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius-half);
-  z-index: 0;
+  margin: 6px;
+  height: 6px;
+  width: 6px;
+  border-radius: 6px;
+  animation: comment-typing 1s linear infinite both;
 }
 
-.coordinate-picker-thumb {
-  z-index: 1;
+.comment-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: flex-end;
+  font-size: 12px;
+  font-weight: 500;
 }
-.coordinate-picker-thumb.is-disabled {
-  counter-reset: t;
+.comment-footer span {
+  margin-right: auto;
 }
-.coordinate-picker-thumb.is-dragging {
-  counter-reset: t;
+.comment-footer time {
+  color: var(--foreground-secondary);
+}
+
+@keyframes comment-typing {
+  0%, 80%, 100% {
+    background: var(--gray-200);
+    box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
+    translate: 0 0;
+  }
+  20% {
+    background: var(--gray-200);
+    box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
+    translate: 0 0;
+  }
+  40% {
+    background: var(--gray-300);
+    box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
+    translate: 0 -4px;
+  }
+  60% {
+    background: var(--gray-200);
+    box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
+    translate: 0 0;
+  }
 }.filter {
   max-height: 50dvh;
   max-width: 100%;
@@ -4455,6 +4332,112 @@
 .expandable-body > .menu > :where(.divider, .separator) {
   margin-left: 18px;
   margin-right: 18px;
+}.slider {
+  position: relative;
+  display: flex;
+  margin: 6px;
+  flex-flow: column;
+  gap: 9px;
+  touch-action: pan-y;
+}
+.slider.is-disabled {
+  cursor: not-allowed;
+}
+.slider.is-dragging {
+  cursor: grabbing;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  background: var(--surface);
+  background-clip: padding-box;
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-sm);
+  cursor: grab;
+  outline: 0;
+  translate: -50% -50%;
+  transition: var(--transition-default);
+  transition-property: outline-color, outline-offset;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.slider-thumb:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
+}
+@media (hover: hover) {
+  .slider-thumb:hover {
+    background-color: var(--surface-hover);
+  }
+}
+.slider-thumb.is-disabled {
+  background-color: var(--surface-disabled);
+  box-shadow: none;
+  pointer-events: none;
+}
+.slider-thumb.is-dragging {
+  box-shadow: var(--shadow-md);
+  cursor: grabbing;
+}
+
+.slider-track {
+  position: relative;
+  height: 12px;
+  background: var(--gray-50);
+  background-clip: padding-box;
+  border-radius: var(--radius-half);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
+}
+
+.slider-track-value {
+  position: absolute;
+  display: block;
+  top: 0;
+  height: inherit;
+  background: var(--primary-600);
+  border-radius: inherit;
+}
+
+.slider.is-disabled .slider-track-value {
+  background: var(--gray-300);
+}
+
+.tick {
+  position: absolute;
+  left: calc(var(--position) * 100% - 1px);
+  bottom: 0;
+  height: 9px;
+  width: 2px;
+  background: var(--gray-300);
+  border-radius: var(--radius-full);
+  color: var(--foreground-prominent);
+  font-size: 10px;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.tick-large {
+}
+.tick-large :is(span) {
+  position: relative;
+  display: inline-block;
+  translate: -50% -100%;
+}
+
+.tick-small {
+  height: 6px;
+  opacity: 0.5;
+}
+
+.ticks {
+  position: relative;
+  display: block;
+  height: 21px;
 }.tree-node {
   display: flex;
   width: 100%;
@@ -4485,12 +4468,12 @@
   pointer-events: none;
 }
 .tree-indent.has-line::before {
-  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 9px;
   width: 1px;
+  content: "";
   background: var(--surface-stroke);
 }
 
@@ -4502,21 +4485,21 @@
   pointer-events: none;
 }
 .tree-connector:not(.is-last)::before {
-  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 9px;
   width: 1px;
+  content: "";
   background: var(--surface-stroke);
 }
 .tree-connector::after {
-  content: "";
   position: absolute;
   top: 0;
   bottom: 50%;
   left: 9px;
   right: 0;
+  content: "";
   border-left: 1px solid var(--surface-stroke);
   border-bottom: 1px solid var(--surface-stroke);
   border-bottom-left-radius: 6px;
@@ -4616,6 +4599,23 @@
 
 .separator-vertical {
   width: 1px;
+}.coordinate-picker {
+  position: relative;
+  aspect-ratio: 5/3;
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-half);
+  z-index: 0;
+}
+
+.coordinate-picker-thumb {
+  z-index: 1;
+}
+.coordinate-picker-thumb.is-disabled {
+  counter-reset: t;
+}
+.coordinate-picker-thumb.is-dragging {
+  counter-reset: t;
 }.color-picker {
   --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
   display: flex;
@@ -6645,10 +6645,11 @@ tfoot .table-cell {
 }.segmented-control {
   position: relative;
   align-items: center;
-  gap: 1px;
+  gap: 3px;
+  padding: 3px;
   background: var(--gray-50);
   border: 1px solid var(--surface-stroke);
-  border-radius: var(--radius);
+  border-radius: var(--radius-full);
 }
 
 .segmented-control-fill {
@@ -6662,60 +6663,89 @@ tfoot .table-cell {
 
 .segmented-control-highlight {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 3px;
+  bottom: 3px;
   background: var(--surface);
-  border-radius: calc(var(--radius) - 2px);
-  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-md);
   outline: 1px solid var(--surface-stroke);
   pointer-events: none;
   transition: 300ms var(--swift-out);
   transition-property: left, width;
-  translate: -1px 0;
 }
 
 .segmented-control-item {
+  position: relative;
   display: flex;
-  height: 36px;
-  padding-left: 12px;
-  padding-right: 12px;
   align-items: center;
   flex: 1 1 0;
-  gap: 9px;
   justify-content: center;
   background: none;
   border: 0;
-  border-radius: var(--radius);
+  border-radius: var(--radius-full);
   color: var(--foreground);
   cursor: pointer;
   font-weight: 500;
   text-align: center;
-  transition: 300ms var(--swift-out);
-  transition-property: background, color;
+  transition: color 300ms var(--swift-out);
+  white-space: nowrap;
 }
 @media (hover: hover) {
   .segmented-control-item:hover {
-    background: var(--gray-100);
+    color: var(--foreground-prominent);
   }
 }
+.segmented-control-item {
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.segmented-control-item:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 3px;
+}
 .segmented-control-item.is-active {
-  background: none;
   color: var(--foreground-prominent);
   cursor: default;
 }
+.segmented-control-item:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
 .segmented-control-item > * {
   position: relative;
+  z-index: 1;
 }
-
-.segmented-control-separator {
+.segmented-control-item + .segmented-control-item::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -2px;
   height: 15px;
   width: 1px;
-  flex-shrink: 0;
   background: var(--surface-stroke);
   transition: opacity 300ms var(--swift-out);
+  translate: 0 -50%;
 }
-.segmented-control-separator.is-active {
+.segmented-control-item.is-active::before, .segmented-control-item.is-active + .segmented-control-item::before {
   opacity: 0;
+}
+
+.is-small {
+  height: 30px;
+  padding: 0 12px;
+  gap: 9px;
+}
+
+.is-medium {
+  height: 36px;
+  padding: 0 15px;
+  gap: 9px;
+}
+
+.is-large {
+  height: 48px;
+  padding: 0 21px;
+  gap: 12px;
 }.split-view {
   display: grid;
   width: 100%;