@youcan/celeste 0.6.52 → 0.6.54

package/dist/celeste.css

@@ -2118,20 +2118,315 @@ to {
 }
 .celeste-checkbox-label-link-button[data-v-ad0a5759] {
   margin-top: var(--spacing-10);
-}.celeste-dropdown-empty-list[data-v-450bfb63] {
+}.celeste-color-area[data-v-bcf02776] {
+  position: relative;
+  width: 240px;
+  height: 232px;
+  border-radius: var(--radius-8);
+  background: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), var(--170188f0);
+}[data-v-521e5832] .celeste-popover-content-wrapper {
+  z-index: 50;
+  min-width: 200px;
+  max-width: 400px;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  animation: var(--animation-fast) ease-out forwards;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  opacity: 0;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  scale: 0.95;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper[data-state=open] {
+  animation-name: open-521e5832;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper[data-state=closed] {
+  animation-name: close-521e5832;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow {
+  display: block;
+  position: relative;
+  width: 16px;
+  height: 8px;
+  overflow: hidden;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-2);
+  background-color: var(--color-bg-white-0);
+  rotate: 45deg;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-close-button {
+  position: absolute;
+  z-index: 50;
+  inset-inline-end: var(--spacing-16);
+  inset-block-start: var(--spacing-16);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content {
   display: flex;
-  align-items: center;
-  padding: var(--spacing-8);
+  flex-direction: column;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
+  margin: var(--spacing-0);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
+  margin-block-end: var(--spacing-8);
+  color: var(--color-text-strong-950);
+  font: var(--label-md);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
-}.celeste-dropdown-items-group[data-v-66b5c9e4] {
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
+  box-sizing: border-box;
+  margin-block-end: var(--spacing-16);
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: 50%;
+  color: var(--color-icon-sub-600);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
+  width: 32px;
+  height: 32px;
+  padding: var(--spacing-6);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
+  width: 40px;
+  height: 40px;
+  padding: var(--spacing-6);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
+  width: 48px;
+  height: 48px;
+  padding: var(--spacing-12);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
+  width: 56px;
+  height: 56px;
+  padding: var(--spacing-14);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
+  width: 64px;
+  height: 64px;
+  padding: var(--spacing-16);
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
+  width: 100%;
+  height: 100%;
+}
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-footer {
   display: flex;
-  flex-direction: column;
+  padding: var(--spacing-16);
+  border-block-start: 1px solid var(--color-stroke-soft-200);
+}
+@keyframes open-521e5832 {
+to {
+    opacity: 1;
+    scale: 1;
+}
+}
+@keyframes close-521e5832 {
+from {
+    opacity: 1;
+    scale: 1;
+}
+to {
+    scale: 0.95;
+    opacity: 0;
+}
+}.celeste-popover-trigger[data-v-2664c4cb] {
+  width: -moz-fit-content;
+  width: fit-content;
+  cursor: pointer;
+}[data-v-69b8512e] .celeste-select-content {
+  z-index: 50;
+  max-height: var(--radix-select-content-available-height);
+  overflow-y: scroll;
+  animation: var(--animation-fast) forwards;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  scale: 0.98;
   gap: var(--spacing-4);
 }
-.celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
-  width: auto;
-  height: auto;
+[data-v-69b8512e] .celeste-select-content[data-side=top] {
+  margin-block-start: var(--spacing-4);
+  animation-name: open-top-69b8512e;
+}
+[data-v-69b8512e] .celeste-select-content[data-side=bottom] {
+  margin-block-end: var(--spacing-4);
+  animation-name: open-bottom-69b8512e;
+}
+[data-v-69b8512e] .celeste-select-content[width=full] {
+  width: var(--radix-select-trigger-width);
+}
+[data-v-69b8512e] .celeste-select-content .celeste-select-view-port {
+  padding: var(--spacing-8);
+}
+@keyframes open-bottom-69b8512e {
+to {
+    scale: 1;
+    margin-block-start: var(--spacing-8);
+}
+}
+@keyframes open-top-69b8512e {
+to {
+    scale: 1;
+    margin-block-end: var(--spacing-8);
+}
+}.celeste-select-item[data-v-48e92b74] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-8);
+  gap: var(--spacing-4);
+  border-radius: var(--radius-8);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  cursor: pointer;
+}
+.celeste-select-item[data-v-48e92b74] .celeste-select-icon {
+  flex-shrink: 0;
+  color: var(--color-icon-sub-600);
+}
+.celeste-select-item[data-v-48e92b74]:hover, .celeste-select-item[data-v-48e92b74]:focus {
+  background-color: var(--color-bg-weak-50);
+}
+.celeste-select-item[data-v-48e92b74] > span {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.celeste-select-item[data-disabled][data-v-48e92b74] {
+  color: var(--color-text-disabled-300);
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.celeste-select-item[data-disabled][data-v-48e92b74] i {
+  color: var(--color-icon-disabled-300);
+}
+.celeste-select-item[data-disabled][data-v-48e92b74] .celeste-select-icon > img {
+  opacity: 0.3;
+}.celeste-select-trigger[data-v-039f6664] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-10);
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  cursor: pointer;
+  gap: var(--spacing-8);
+}
+.celeste-select-trigger > i[data-v-039f6664] {
+  transition: rotate var(--animation-fast) ease-out;
+}
+.celeste-select-trigger[data-v-039f6664] .celeste-select-value {
+  flex: 2;
+}
+.celeste-select-trigger[size=xs][data-v-039f6664] {
+  height: 32px;
+}
+.celeste-select-trigger[size=sm][data-v-039f6664] {
+  height: 36px;
+}
+.celeste-select-trigger[size=md][data-v-039f6664] {
+  height: 40px;
+}
+.celeste-select-trigger[variant=compact][data-v-039f6664] {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.celeste-select-trigger[variant=inline][data-v-039f6664] {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: var(--spacing-0);
+  border-radius: 0;
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}
+.celeste-select-trigger[haserror=true][data-v-039f6664] {
+  border-color: var(--color-state-error-base);
+}
+.celeste-select-trigger[aria-expanded=true] > i[data-v-039f6664] {
+  rotate: 180deg;
+}
+.celeste-select-trigger:focus > i[data-v-039f6664] {
+  color: var(--color-icon-strong-950);
+}
+.celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value {
+  color: var(--color-text-sub-600);
+}
+.celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value ~ i {
+  color: var(--color-icon-soft-400);
+}
+.celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-icon {
+  color: var(--color-icon-soft-400);
+}
+.celeste-select-trigger[data-v-039f6664]:disabled {
+  border-color: transparent;
+  background-color: var(--color-bg-weak-50);
+  pointer-events: none;
+}
+.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value {
+  color: var(--color-text-disabled-300);
+}
+.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value i, .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value ~ i {
+  color: var(--color-icon-disabled-400);
+}
+.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value .celeste-select-icon > img {
+  opacity: 0.3;
+}
+.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-icon {
+  color: var(--color-icon-disabled-400);
+}
+.celeste-select-trigger[data-v-039f6664]:not([data-placeholder]) > :first-child.celeste-select-icon {
+  display: none;
+}
+.celeste-select-trigger:hover[variant=inline] > i[data-v-039f6664], .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-icon, .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-value {
+  color: var(--color-text-strong-950);
+}
+.celeste-select-trigger[data-v-039f6664]:hover:not([variant=inline]) {
+  border-color: transparent;
+  background-color: var(--color-bg-weak-50);
+}
+.celeste-select-trigger[data-v-039f6664]:focus:not([variant=inline]) {
+  border-color: var(--color-stroke-strong-950);
+  outline-color: var(--color-stroke-soft-200);
+}.celeste-select-value[data-v-db7cc720] {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  gap: var(--spacing-8);
+}
+.celeste-select-value[data-v-db7cc720] i, .celeste-select-value[data-v-db7cc720] ~ i {
+  flex-shrink: 0;
+  color: var(--color-icon-sub-600);
 }.celeste-text-input-button[data-v-00ed5aef] {
   border: none;
 }
@@ -2233,84 +2528,236 @@ to {
 .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-leading-node) {
   padding-inline-start: 0;
 }
-.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-trailing-node) {
-  padding-inline-end: 0;
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-trailing-node) {
+  padding-inline-end: 0;
+}
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:focus) {
+  --celeste-text-input-border-color: var(--color-stroke-strong-950);
+  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
+  --celeste-text-input-icon-color: var(--color-text-sub-600);
+  --celeste-text-input-affix-color: var(--color-text-sub-600);
+  outline-color: var(--color-stroke-soft-200);
+}
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-8706da95] {
+  --celeste-text-input-border-color: var(--color-state-error-base);
+  outline-color: var(--color-state-error-lighter);
+}
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:disabled) {
+  --celeste-text-input-border-color: transparent;
+  --celeste-text-input-drop-shadow: none;
+  --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
+  --celeste-text-input-affix-color: var(--color-text-disabled-300);
+  --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
+  --celeste-text-input-icon-color: var(--color-text-disabled-300);
+  background-color: var(--color-bg-weak-50);
+  box-shadow: none;
+  color: var(--color-text-disabled-300);
+  pointer-events: none;
+}
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::-moz-placeholder {
+  color: currentcolor;
+}
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::placeholder {
+  color: currentcolor;
+}
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-8706da95] {
+  color: var(--color-text-disabled-300);
+  pointer-events: none;
+}
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
+  --celeste-text-input-border-color: transparent;
+}
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
+  --celeste-text-input-icon-color: var(--color-text-sub-600);
+  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
+  background-color: var(--color-bg-weak-50);
+}
+.celeste-text-input-wrapper .celeste-text-input-icon[data-v-8706da95] {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  transition: all var(--animation-fast) ease-out;
+  color: var(--celeste-text-input-icon-color);
+}
+.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node,
+.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
+  height: calc(var(--input-height) - var(--spacing-2)) !important;
+}
+[dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
+  border-right: 1px solid var(--color-stroke-soft-200) !important;
+  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+}
+[dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
+  border-left: 1px solid var(--color-stroke-soft-200) !important;
+  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+}
+[dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
+  border-left: 1px solid var(--color-stroke-soft-200) !important;
+  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+}
+[dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
+  border-right: 1px solid var(--color-stroke-soft-200) !important;
+  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+}
+.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
+  border-right: 1px solid var(--color-stroke-soft-200) !important;
+  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+}
+.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
+  border-left: 1px solid var(--color-stroke-soft-200) !important;
+  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+}.celeste-color-swatch[data-v-095c22f0] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.celeste-color-swatch .swatch-label[data-v-095c22f0] {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+.celeste-color-swatch .color-palette[data-v-095c22f0] {
+  display: flex;
+  gap: var(--spacing-4);
+  align-items: center;
+}
+.celeste-color-swatch .color-palette .palette-color[data-v-095c22f0] {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin: var(--spacing-4);
+  padding: var(--spacing-4);
+  border-radius: 50%;
+}
+.celeste-color-swatch .color-palette .palette-color[aria-selected=true][data-v-095c22f0] {
+  box-shadow: var(--0829b6e2);
+}
+.celeste-color-swatch .color-palette .palette-color[data-v-095c22f0]:hover {
+  cursor: pointer;
+}.celeste-color-slider .slider-track[data-v-cb479a28] {
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}.celeste-picker-trigger[data-v-5d801c64] {
+  gap: var(--spacing-12);
+}
+.celeste-picker-trigger .celeste-selected-color[data-v-5d801c64] {
+  --color-tile-size: 20px;
+  display: block;
+  width: var(--color-tile-size);
+  height: var(--color-tile-size);
+  border-radius: var(--radius-4);
+  background-color: var(--88e786d6);
+}
+.celeste-color-picker-wrapper[data-v-5d801c64] {
+  display: grid;
+  box-sizing: border-box;
+  width: 272px;
+}
+.celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-16);
+  gap: var(--spacing-12);
+}
+.celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] > * {
+  box-sizing: border-box;
+}
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-5d801c64] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--spacing-4);
+}
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-5d801c64] {
+  text-transform: uppercase;
+}
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] {
+  display: flex;
+  width: 100%;
+  height: 32px;
+}
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64] {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64]:focus-within {
+  z-index: 2;
 }
-.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:focus) {
-  --celeste-text-input-border-color: var(--color-stroke-strong-950);
-  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
-  --celeste-text-input-icon-color: var(--color-text-sub-600);
-  --celeste-text-input-affix-color: var(--color-text-sub-600);
-  outline-color: var(--color-stroke-soft-200);
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] > * {
+  box-sizing: border-box;
+  height: 100%;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-8706da95] {
-  --celeste-text-input-border-color: var(--color-state-error-base);
-  outline-color: var(--color-state-error-lighter);
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-5d801c64] {
+  display: flex;
 }
-.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:disabled) {
-  --celeste-text-input-border-color: transparent;
-  --celeste-text-input-drop-shadow: none;
-  --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
-  --celeste-text-input-affix-color: var(--color-text-disabled-300);
-  --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
-  --celeste-text-input-icon-color: var(--color-text-disabled-300);
-  background-color: var(--color-bg-weak-50);
-  box-shadow: none;
-  color: var(--color-text-disabled-300);
-  pointer-events: none;
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64] {
+  margin-inline-start: -1px;
+  border-radius: 0;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::-moz-placeholder {
-  color: currentcolor;
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:focus-within {
+  z-index: 2;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::placeholder {
-  color: currentcolor;
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child {
+  border-start-end-radius: var(--radius-8);
+  border-end-end-radius: var(--radius-8);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-8706da95] {
-  color: var(--color-text-disabled-300);
-  pointer-events: none;
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4) ~ * {
+  flex: 1;
 }
-.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
-  --celeste-text-input-border-color: transparent;
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(2) {
+  flex: 3;
 }
-.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
-  --celeste-text-input-icon-color: var(--color-text-sub-600);
-  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
-  background-color: var(--color-bg-weak-50);
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child:nth-child(2) {
+  flex: 1;
 }
-.celeste-text-input-wrapper .celeste-text-input-icon[data-v-8706da95] {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  transition: all var(--animation-fast) ease-out;
-  color: var(--celeste-text-input-icon-color);
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-5d801c64]:first-child {
+  border-start-start-radius: var(--radius-8);
+  border-end-start-radius: var(--radius-8);
 }
-.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node,
-.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
-  height: calc(var(--input-height) - var(--spacing-2)) !important;
+.celeste-color-picker-wrapper .celeste-color-swatches[data-v-5d801c64] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--radius-16);
+  border-block-start: 1px solid var(--color-stroke-soft-200);
 }
-[dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
-  border-right: 1px solid var(--color-stroke-soft-200) !important;
-  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+[data-v-5d801c64] .celeste-color-format {
+  text-transform: uppercase;
 }
-[dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
-  border-left: 1px solid var(--color-stroke-soft-200) !important;
-  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+[data-v-5d801c64] .celeste-color-thumb {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--color-bg-white-0), var(--shadow-toggle-switch);
 }
-[dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
-  border-left: 1px solid var(--color-stroke-soft-200) !important;
-  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+[data-v-5d801c64] .celeste-color-slider {
+  --track-height: 8px;
+  width: 100%;
+  padding-block: var(--spacing-4);
 }
-[dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
-  border-right: 1px solid var(--color-stroke-soft-200) !important;
-  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+[data-v-5d801c64] .celeste-color-slider .slider-track {
+  position: relative;
+  width: 100%;
+  height: var(--track-height);
+  border-radius: calc(var(--track-height) / 2);
 }
-.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
-  border-right: 1px solid var(--color-stroke-soft-200) !important;
-  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+[data-v-5d801c64] .celeste-color-slider .slider-track .celeste-color-thumb {
+  top: calc(var(--track-height) / 2);
+}.celeste-dropdown-empty-list[data-v-450bfb63] {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}.celeste-dropdown-items-group[data-v-66b5c9e4] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
 }
-.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
-  border-left: 1px solid var(--color-stroke-soft-200) !important;
-  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+.celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
+  width: auto;
+  height: auto;
 }.celeste-dropdown-input[data-v-bd59a65e] {
   display: flex;
   align-items: center;
@@ -3496,26 +3943,31 @@ to {
   color: var(--color-icon-disabled-300);
 }[data-v-3405639f] {
   box-sizing: border-box;
-}.celeste-hint-text[data-v-37aef9f7] {
+}.celeste-hint-text[data-v-0fde56ef] {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: var(--spacing-4);
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 }
-.celeste-hint-text i[data-v-37aef9f7] {
+.celeste-hint-text i[data-v-0fde56ef] {
+  flex-shrink: 0;
   color: var(--color-icon-soft-400);
 }
-.celeste-hint-text-disabled[data-v-37aef9f7] {
+.celeste-hint-text p[data-v-0fde56ef] {
+  max-width: 65ch;
+  margin: 0;
+}
+.celeste-hint-text-disabled[data-v-0fde56ef] {
   color: var(--color-text-disabled-300);
 }
-.celeste-hint-text-disabled i[data-v-37aef9f7] {
+.celeste-hint-text-disabled i[data-v-0fde56ef] {
   color: var(--color-icon-disabled-300);
 }
-.celeste-hint-text-error[data-v-37aef9f7] {
+.celeste-hint-text-error[data-v-0fde56ef] {
   color: var(--color-state-error-base);
 }
-.celeste-hint-text-error i[data-v-37aef9f7] {
+.celeste-hint-text-error i[data-v-0fde56ef] {
   color: var(--color-state-error-base);
 }[data-v-0dc4a40e] .celeste-tooltip-content {
   display: flex;
@@ -3824,157 +4276,35 @@ to {
   inset-inline-end: var(--spacing-16);
 }
 .celeste-modal-header[data-v-9d299b40]:has(.description) {
-  --modal-header-icon-size: 20px;
-}
-.celeste-modal-header:has(.description) .icon[data-v-9d299b40] {
-  padding: var(--spacing-10);
-  border: 1px solid transparent;
-  border-radius: var(--radius-full);
-}
-.celeste-modal-header:has(.description)[data-dismissible=false] .icon[data-v-9d299b40] {
-  padding: var(--spacing-8);
-  border-radius: var(--radius-10);
-}
-.celeste-modal-header:has(.description)[data-type=default] .icon[data-v-9d299b40] {
-  border-color: var(--color-stroke-soft-200);
-}
-.celeste-modal-header:has(.description)[data-type=success] .icon[data-v-9d299b40] {
-  background: var(--color-state-success-lighter);
-  color: var(--color-state-success-base);
-}
-.celeste-modal-header:has(.description)[data-type=information] .icon[data-v-9d299b40] {
-  background: var(--color-state-information-lighter);
-  color: var(--color-state-information-base);
-}
-.celeste-modal-header:has(.description)[data-type=warning] .icon[data-v-9d299b40] {
-  background: var(--color-state-warning-lighter);
-  color: var(--color-state-warning-base);
-}
-.celeste-modal-header:has(.description)[data-type=error] .icon[data-v-9d299b40] {
-  background: var(--color-state-error-lighter);
-  color: var(--color-state-error-base);
-}[data-v-521e5832] .celeste-popover-content-wrapper {
-  z-index: 50;
-  min-width: 200px;
-  max-width: 400px;
-  transform-origin: var(--radix-popover-content-transform-origin);
-  animation: var(--animation-fast) ease-out forwards;
-  border: 1px solid var(--color-stroke-soft-200);
-  border-radius: var(--radius-16);
-  opacity: 0;
-  background-color: var(--color-bg-white-0);
-  box-shadow: var(--shadow-regular-md);
-  scale: 0.95;
-}
-[data-v-521e5832] .celeste-popover-content-wrapper[data-state=open] {
-  animation-name: open-521e5832;
-}
-[data-v-521e5832] .celeste-popover-content-wrapper[data-state=closed] {
-  animation-name: close-521e5832;
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow {
-  display: block;
-  position: relative;
-  width: 16px;
-  height: 8px;
-  overflow: hidden;
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  width: 16px;
-  height: 16px;
-  transform: translate(-50%, -50%);
-  border: 1px solid var(--color-stroke-soft-200);
-  border-radius: var(--radius-2);
-  background-color: var(--color-bg-white-0);
-  rotate: 45deg;
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-close-button {
-  position: absolute;
-  z-index: 50;
-  inset-inline-end: var(--spacing-16);
-  inset-block-start: var(--spacing-16);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content {
-  display: flex;
-  flex-direction: column;
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
-  margin: var(--spacing-0);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
-  margin-block-end: var(--spacing-8);
-  color: var(--color-text-strong-950);
-  font: var(--label-md);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-sm);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
-  box-sizing: border-box;
-  margin-block-end: var(--spacing-16);
-  border: 1px solid var(--color-stroke-soft-200);
-  border-radius: 50%;
-  color: var(--color-icon-sub-600);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
-  width: 32px;
-  height: 32px;
-  padding: var(--spacing-6);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
-  width: 40px;
-  height: 40px;
-  padding: var(--spacing-6);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
-  width: 48px;
-  height: 48px;
-  padding: var(--spacing-12);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
-  width: 56px;
-  height: 56px;
-  padding: var(--spacing-14);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
-  width: 64px;
-  height: 64px;
-  padding: var(--spacing-16);
-}
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
-  width: 100%;
-  height: 100%;
+  --modal-header-icon-size: 20px;
 }
-[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-footer {
-  display: flex;
-  padding: var(--spacing-16);
-  border-block-start: 1px solid var(--color-stroke-soft-200);
+.celeste-modal-header:has(.description) .icon[data-v-9d299b40] {
+  padding: var(--spacing-10);
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
 }
-@keyframes open-521e5832 {
-to {
-    opacity: 1;
-    scale: 1;
+.celeste-modal-header:has(.description)[data-dismissible=false] .icon[data-v-9d299b40] {
+  padding: var(--spacing-8);
+  border-radius: var(--radius-10);
 }
+.celeste-modal-header:has(.description)[data-type=default] .icon[data-v-9d299b40] {
+  border-color: var(--color-stroke-soft-200);
 }
-@keyframes close-521e5832 {
-from {
-    opacity: 1;
-    scale: 1;
+.celeste-modal-header:has(.description)[data-type=success] .icon[data-v-9d299b40] {
+  background: var(--color-state-success-lighter);
+  color: var(--color-state-success-base);
 }
-to {
-    scale: 0.95;
-    opacity: 0;
+.celeste-modal-header:has(.description)[data-type=information] .icon[data-v-9d299b40] {
+  background: var(--color-state-information-lighter);
+  color: var(--color-state-information-base);
 }
-}.celeste-popover-trigger[data-v-2664c4cb] {
-  width: -moz-fit-content;
-  width: fit-content;
-  cursor: pointer;
+.celeste-modal-header:has(.description)[data-type=warning] .icon[data-v-9d299b40] {
+  background: var(--color-state-warning-lighter);
+  color: var(--color-state-warning-base);
+}
+.celeste-modal-header:has(.description)[data-type=error] .icon[data-v-9d299b40] {
+  background: var(--color-state-error-lighter);
+  color: var(--color-state-error-base);
 }.celeste-progress-bar-wrapper[data-v-850aadb2] {
   --bar-height: 6px;
   display: flex;
@@ -4118,278 +4448,97 @@ to {
   height: 20px;
   color: var(--color-icon-sub-600);
 }
-.celeste-radio-card-preview-image[data-v-5747c91e] {
-  border: none;
-}
-.celeste-radio-card-preview-image i[data-v-5747c91e] {
-  position: absolute;
-  z-index: 0;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  transform: translate(-50%, -50%);
-  color: var(--color-icon-sub-600);
-}
-.celeste-radio-card-preview-image[data-v-5747c91e] img {
-  z-index: 1000;
-}
-.celeste-radio-card-content[data-v-5747c91e] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-.celeste-radio-card-row[data-v-5747c91e] {
-  display: flex;
-  flex-shrink: 1;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-.celeste-radio-card-label[data-v-5747c91e] {
-  flex-shrink: 1;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--color-text-strong-950);
-  font: var(--label-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.celeste-radio-card-sublabel[data-v-5747c91e] {
-  flex-shrink: 1;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.celeste-radio-card-description[data-v-5747c91e] {
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-xs);
-}
-[data-v-5747c91e] .celeste-radio-card-radio {
-  margin-inline-start: auto;
-}
-.celeste-radio-card-disabled[data-v-5747c91e] {
-  cursor: not-allowed;
-}
-.celeste-radio-card-disabled .celeste-radio-card-label[data-v-5747c91e] {
-  color: var(--color-text-sub-600);
-}
-.celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-5747c91e] {
-  color: var(--color-text-soft-400);
-}
-.celeste-radio-card-disabled .celeste-radio-card-description[data-v-5747c91e] {
-  color: var(--color-text-soft-400);
-}.celeste-radio-label[data-v-32cb773e] {
-  display: flex;
-  color: var(--color-text-strong-950);
-  font: var(--paragraph-sm);
-  gap: var(--spacing-8);
-}
-[data-v-32cb773e] .celeste-radio-label-radio {
-  margin-top: var(--spacing-2);
-}
-.celeste-radio-label-row[data-v-32cb773e] {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-.celeste-radio-label-sublabel[data-v-32cb773e] {
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-xs);
-}
-.celeste-radio-label-content[data-v-32cb773e] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: var(--spacing-4);
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-xs);
-}
-.celeste-radio-label-link-button[data-v-32cb773e] {
-  margin-top: var(--spacing-10);
-}[data-v-69b8512e] .celeste-select-content {
-  z-index: 50;
-  max-height: var(--radix-select-content-available-height);
-  overflow-y: scroll;
-  animation: var(--animation-fast) forwards;
-  border: 1px solid var(--color-stroke-soft-200);
-  border-radius: var(--radius-16);
-  background-color: var(--color-bg-white-0);
-  box-shadow: var(--shadow-regular-md);
-  scale: 0.98;
-  gap: var(--spacing-4);
-}
-[data-v-69b8512e] .celeste-select-content[data-side=top] {
-  margin-block-start: var(--spacing-4);
-  animation-name: open-top-69b8512e;
-}
-[data-v-69b8512e] .celeste-select-content[data-side=bottom] {
-  margin-block-end: var(--spacing-4);
-  animation-name: open-bottom-69b8512e;
-}
-[data-v-69b8512e] .celeste-select-content[width=full] {
-  width: var(--radix-select-trigger-width);
-}
-[data-v-69b8512e] .celeste-select-content .celeste-select-view-port {
-  padding: var(--spacing-8);
-}
-@keyframes open-bottom-69b8512e {
-to {
-    scale: 1;
-    margin-block-start: var(--spacing-8);
-}
-}
-@keyframes open-top-69b8512e {
-to {
-    scale: 1;
-    margin-block-end: var(--spacing-8);
-}
-}.celeste-select-item[data-v-48e92b74] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-8);
-  gap: var(--spacing-4);
-  border-radius: var(--radius-8);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  background-color: var(--color-bg-white-0);
-  color: var(--color-text-strong-950);
-  font: var(--paragraph-sm);
-  cursor: pointer;
-}
-.celeste-select-item[data-v-48e92b74] .celeste-select-icon {
-  flex-shrink: 0;
-  color: var(--color-icon-sub-600);
-}
-.celeste-select-item[data-v-48e92b74]:hover, .celeste-select-item[data-v-48e92b74]:focus {
-  background-color: var(--color-bg-weak-50);
-}
-.celeste-select-item[data-v-48e92b74] > span {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-.celeste-select-item[data-disabled][data-v-48e92b74] {
-  color: var(--color-text-disabled-300);
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-.celeste-select-item[data-disabled][data-v-48e92b74] i {
-  color: var(--color-icon-disabled-300);
-}
-.celeste-select-item[data-disabled][data-v-48e92b74] .celeste-select-icon > img {
-  opacity: 0.3;
-}.celeste-select-trigger[data-v-039f6664] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-10);
-  transition: all var(--animation-fast) ease-out;
-  border: 1px solid var(--color-stroke-soft-200);
-  border-radius: var(--radius-10);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  background-color: var(--color-bg-white-0);
-  box-shadow: var(--shadow-regular-xs);
-  cursor: pointer;
-  gap: var(--spacing-8);
-}
-.celeste-select-trigger > i[data-v-039f6664] {
-  transition: rotate var(--animation-fast) ease-out;
-}
-.celeste-select-trigger[data-v-039f6664] .celeste-select-value {
-  flex: 2;
-}
-.celeste-select-trigger[size=xs][data-v-039f6664] {
-  height: 32px;
-}
-.celeste-select-trigger[size=sm][data-v-039f6664] {
-  height: 36px;
-}
-.celeste-select-trigger[size=md][data-v-039f6664] {
-  height: 40px;
-}
-.celeste-select-trigger[variant=compact][data-v-039f6664] {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.celeste-select-trigger[variant=inline][data-v-039f6664] {
-  width: -moz-fit-content;
-  width: fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  padding: var(--spacing-0);
-  border-radius: 0;
-  border-color: transparent;
-  background-color: transparent;
-  box-shadow: none;
-}
-.celeste-select-trigger[haserror=true][data-v-039f6664] {
-  border-color: var(--color-state-error-base);
-}
-.celeste-select-trigger[aria-expanded=true] > i[data-v-039f6664] {
-  rotate: 180deg;
+.celeste-radio-card-preview-image[data-v-5747c91e] {
+  border: none;
 }
-.celeste-select-trigger:focus > i[data-v-039f6664] {
-  color: var(--color-icon-strong-950);
+.celeste-radio-card-preview-image i[data-v-5747c91e] {
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  transform: translate(-50%, -50%);
+  color: var(--color-icon-sub-600);
 }
-.celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value {
-  color: var(--color-text-sub-600);
+.celeste-radio-card-preview-image[data-v-5747c91e] img {
+  z-index: 1000;
 }
-.celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value ~ i {
-  color: var(--color-icon-soft-400);
+.celeste-radio-card-content[data-v-5747c91e] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
 }
-.celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-icon {
-  color: var(--color-icon-soft-400);
+.celeste-radio-card-row[data-v-5747c91e] {
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+  gap: var(--spacing-8);
 }
-.celeste-select-trigger[data-v-039f6664]:disabled {
-  border-color: transparent;
-  background-color: var(--color-bg-weak-50);
-  pointer-events: none;
+.celeste-radio-card-label[data-v-5747c91e] {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-strong-950);
+  font: var(--label-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value {
-  color: var(--color-text-disabled-300);
+.celeste-radio-card-sublabel[data-v-5747c91e] {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value i, .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value ~ i {
-  color: var(--color-icon-disabled-400);
+.celeste-radio-card-description[data-v-5747c91e] {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
 }
-.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value .celeste-select-icon > img {
-  opacity: 0.3;
+[data-v-5747c91e] .celeste-radio-card-radio {
+  margin-inline-start: auto;
 }
-.celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-icon {
-  color: var(--color-icon-disabled-400);
+.celeste-radio-card-disabled[data-v-5747c91e] {
+  cursor: not-allowed;
 }
-.celeste-select-trigger[data-v-039f6664]:not([data-placeholder]) > :first-child.celeste-select-icon {
-  display: none;
+.celeste-radio-card-disabled .celeste-radio-card-label[data-v-5747c91e] {
+  color: var(--color-text-sub-600);
 }
-.celeste-select-trigger:hover[variant=inline] > i[data-v-039f6664], .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-icon, .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-value {
+.celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-5747c91e] {
+  color: var(--color-text-soft-400);
+}
+.celeste-radio-card-disabled .celeste-radio-card-description[data-v-5747c91e] {
+  color: var(--color-text-soft-400);
+}.celeste-radio-label[data-v-32cb773e] {
+  display: flex;
   color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
 }
-.celeste-select-trigger[data-v-039f6664]:hover:not([variant=inline]) {
-  border-color: transparent;
-  background-color: var(--color-bg-weak-50);
+[data-v-32cb773e] .celeste-radio-label-radio {
+  margin-top: var(--spacing-2);
 }
-.celeste-select-trigger[data-v-039f6664]:focus:not([variant=inline]) {
-  border-color: var(--color-stroke-strong-950);
-  outline-color: var(--color-stroke-soft-200);
-}.celeste-select-value[data-v-db7cc720] {
+.celeste-radio-label-row[data-v-32cb773e] {
   display: flex;
   align-items: center;
-  overflow: hidden;
-  color: var(--color-text-strong-950);
-  font: var(--paragraph-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
   gap: var(--spacing-8);
 }
-.celeste-select-value[data-v-db7cc720] i, .celeste-select-value[data-v-db7cc720] ~ i {
-  flex-shrink: 0;
-  color: var(--color-icon-sub-600);
+.celeste-radio-label-sublabel[data-v-32cb773e] {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+.celeste-radio-label-content[data-v-32cb773e] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--spacing-4);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+.celeste-radio-label-link-button[data-v-32cb773e] {
+  margin-top: var(--spacing-10);
 }.show-more-wrapper[data-v-49d51443] .i-celeste-arrow-down-s-line {
   display: none;
 }
@@ -4530,151 +4679,7 @@ to {
   font: var(--subheading-xs);
   text-transform: uppercase;
 }
-.celeste-color-slider .slider-track[data-v-cb479a28] {
-  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-}.celeste-color-swatch[data-v-095c22f0] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-.celeste-color-swatch .swatch-label[data-v-095c22f0] {
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-xs);
-}
-.celeste-color-swatch .color-palette[data-v-095c22f0] {
-  display: flex;
-  gap: var(--spacing-4);
-  align-items: center;
-}
-.celeste-color-swatch .color-palette .palette-color[data-v-095c22f0] {
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  margin: var(--spacing-4);
-  padding: var(--spacing-4);
-  border-radius: 50%;
-}
-.celeste-color-swatch .color-palette .palette-color[aria-selected=true][data-v-095c22f0] {
-  box-shadow: var(--0829b6e2);
-}
-.celeste-color-swatch .color-palette .palette-color[data-v-095c22f0]:hover {
-  cursor: pointer;
-}.celeste-color-area[data-v-bcf02776] {
-  position: relative;
-  width: 240px;
-  height: 232px;
-  border-radius: var(--radius-8);
-  background: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), var(--170188f0);
-}.celeste-picker-trigger[data-v-5d801c64] {
-  gap: var(--spacing-12);
-}
-.celeste-picker-trigger .celeste-selected-color[data-v-5d801c64] {
-  --color-tile-size: 20px;
-  display: block;
-  width: var(--color-tile-size);
-  height: var(--color-tile-size);
-  border-radius: var(--radius-4);
-  background-color: var(--88e786d6);
-}
-.celeste-color-picker-wrapper[data-v-5d801c64] {
-  display: grid;
-  box-sizing: border-box;
-  width: 272px;
-}
-.celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-16);
-  gap: var(--spacing-12);
-}
-.celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] > * {
-  box-sizing: border-box;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-5d801c64] {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: var(--spacing-4);
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-5d801c64] {
-  text-transform: uppercase;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] {
-  display: flex;
-  width: 100%;
-  height: 32px;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64] {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64]:focus-within {
-  z-index: 2;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] > * {
-  box-sizing: border-box;
-  height: 100%;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-5d801c64] {
-  display: flex;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64] {
-  margin-inline-start: -1px;
-  border-radius: 0;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:focus-within {
-  z-index: 2;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child {
-  border-start-end-radius: var(--radius-8);
-  border-end-end-radius: var(--radius-8);
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4) ~ * {
-  flex: 1;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(2) {
-  flex: 3;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child:nth-child(2) {
-  flex: 1;
-}
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-5d801c64]:first-child {
-  border-start-start-radius: var(--radius-8);
-  border-end-start-radius: var(--radius-8);
-}
-.celeste-color-picker-wrapper .celeste-color-swatches[data-v-5d801c64] {
-  display: flex;
-  flex-direction: column;
-  padding: var(--radius-16);
-  border-block-start: 1px solid var(--color-stroke-soft-200);
-}
-[data-v-5d801c64] .celeste-color-format {
-  text-transform: uppercase;
-}
-[data-v-5d801c64] .celeste-color-thumb {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-  box-shadow: 0 0 0 2px var(--color-bg-white-0), var(--shadow-toggle-switch);
-}
-[data-v-5d801c64] .celeste-color-slider {
-  --track-height: 8px;
-  width: 100%;
-  padding-block: var(--spacing-4);
-}
-[data-v-5d801c64] .celeste-color-slider .slider-track {
-  position: relative;
-  width: 100%;
-  height: var(--track-height);
-  border-radius: calc(var(--track-height) / 2);
-}
-[data-v-5d801c64] .celeste-color-slider .slider-track .celeste-color-thumb {
-  top: calc(var(--track-height) / 2);
-}.celeste-rich-editor[data-v-dbc85b1a] {
+.celeste-rich-editor[data-v-dbc85b1a] {
   position: relative;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--spacing-12);