@integration-app/react 2.7.0 → 2.9.0

package/dist/styles.css

@@ -1803,46 +1803,6 @@
       display: none;
 }
 
-    .iap-spinner {
-      --iap-colors-color-palette-1: var(--iap-colors-accent-1);
-      --iap-colors-color-palette-2: var(--iap-colors-accent-2);
-      --iap-colors-color-palette-3: var(--iap-colors-accent-3);
-      --iap-colors-color-palette-4: var(--iap-colors-accent-4);
-      --iap-colors-color-palette-5: var(--iap-colors-accent-5);
-      --iap-colors-color-palette-6: var(--iap-colors-accent-6);
-      --iap-colors-color-palette-7: var(--iap-colors-accent-7);
-      --iap-colors-color-palette-8: var(--iap-colors-accent-8);
-      --iap-colors-color-palette-9: var(--iap-colors-accent-9);
-      --iap-colors-color-palette-10: var(--iap-colors-accent-10);
-      --iap-colors-color-palette-11: var(--iap-colors-accent-11);
-      --iap-colors-color-palette-12: var(--iap-colors-accent-12);
-      --iap-colors-color-palette-a1: var(--iap-colors-accent-a1);
-      --iap-colors-color-palette-a2: var(--iap-colors-accent-a2);
-      --iap-colors-color-palette-a3: var(--iap-colors-accent-a3);
-      --iap-colors-color-palette-a4: var(--iap-colors-accent-a4);
-      --iap-colors-color-palette-a5: var(--iap-colors-accent-a5);
-      --iap-colors-color-palette-a6: var(--iap-colors-accent-a6);
-      --iap-colors-color-palette-a7: var(--iap-colors-accent-a7);
-      --iap-colors-color-palette-a8: var(--iap-colors-accent-a8);
-      --iap-colors-color-palette-a9: var(--iap-colors-accent-a9);
-      --iap-colors-color-palette-a10: var(--iap-colors-accent-a10);
-      --iap-colors-color-palette-a11: var(--iap-colors-accent-a11);
-      --iap-colors-color-palette-a12: var(--iap-colors-accent-a12);
-      --iap-colors-color-palette-default: var(--iap-colors-accent-default);
-      --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
-      --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
-      --iap-colors-color-palette-text: var(--iap-colors-accent-text);
-      display: inline-block;
-      border-radius: var(--iap-radii-full);
-      width: var(--size);
-      height: var(--size);
-      animation: var(--iap-animations-spin);
-      border-width: 2px;
-      border-color: var(--iap-colors-color-palette-default);
-      border-style: solid;
-      animation-duration: var(--iap-durations-slowest);
-}
-
     .iap-skeleton {
       animation: var(--iap-animations-skeleton-pulse);
       border-radius: var(--iap-radii-l3);
@@ -1860,11 +1820,25 @@
       visibility: hidden;
 }
 
-    .iap-input {
-      appearance: none;
-      -webkit-appearance: none;
-      background: none;
-      border-radius: var(--iap-radii-l2);
+    .iap-icon {
+      color: currentcolor;
+      display: inline-block;
+      vertical-align: middle;
+      flex-shrink: 0;
+      line-height: 1em;
+}
+
+    .iap-badge {
+      border-radius: var(--iap-radii-full);
+      display: inline-flex;
+      -webkit-user-select: none;
+      user-select: none;
+      white-space: nowrap;
+      align-items: center;
+      font-weight: var(--iap-font-weights-medium);
+}
+
+    .iap-badge,.iap-input {
       --iap-colors-color-palette-1: var(--iap-colors-accent-1);
       --iap-colors-color-palette-2: var(--iap-colors-accent-2);
       --iap-colors-color-palette-3: var(--iap-colors-accent-3);
@@ -1893,6 +1867,13 @@
       --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
       --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
       --iap-colors-color-palette-text: var(--iap-colors-accent-text);
+}
+
+    .iap-input {
+      appearance: none;
+      -webkit-appearance: none;
+      background: none;
+      border-radius: var(--iap-radii-l2);
       color: var(--iap-colors-fg-default);
       outline: 0;
       position: relative;
@@ -1990,16 +1971,7 @@
       border-color: var(--iap-colors-color-palette-default);
 }
 
-    .iap-icon {
-      color: currentcolor;
-      display: inline-block;
-      vertical-align: middle;
-      flex-shrink: 0;
-      line-height: 1em;
-}
-
-    .iap-badge {
-      border-radius: var(--iap-radii-full);
+    .iap-spinner {
       --iap-colors-color-palette-1: var(--iap-colors-accent-1);
       --iap-colors-color-palette-2: var(--iap-colors-accent-2);
       --iap-colors-color-palette-3: var(--iap-colors-accent-3);
@@ -2028,12 +2000,15 @@
       --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
       --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
       --iap-colors-color-palette-text: var(--iap-colors-accent-text);
-      display: inline-flex;
-      -webkit-user-select: none;
-      user-select: none;
-      white-space: nowrap;
-      align-items: center;
-      font-weight: var(--iap-font-weights-medium);
+      display: inline-block;
+      border-radius: var(--iap-radii-full);
+      width: var(--size);
+      height: var(--size);
+      animation: var(--iap-animations-spin);
+      border-width: 2px;
+      border-color: var(--iap-colors-color-palette-default);
+      border-style: solid;
+      animation-duration: var(--iap-durations-slowest);
 }
 }
 
@@ -2051,7 +2026,7 @@
     height: var(--iap-sizes-5);
 }
 
-  .iap-button--variant_ghost {
+  .iap-button--variant_outline {
     color: var(--iap-colors-color-palette-text);
     --iap-colors-color-palette-light-1: var(--iap-colors-gray-light-1);
     --iap-colors-color-palette-light-2: var(--iap-colors-gray-light-2);
@@ -2129,69 +2104,43 @@
     --iap-colors-color-palette-emphasized: var(--iap-colors-gray-emphasized);
     --iap-colors-color-palette-fg: var(--iap-colors-gray-fg);
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
+    border-width: 1px;
+    border-color: var(--iap-colors-color-palette-a7);
 }
 
-  .iap-button--variant_ghost:is([aria-selected=true], [data-selected]) {
-    background: var(--iap-colors-color-palette-a3);
-}
-
-  .iap-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
+  .iap-button--variant_outline:is(:disabled, [disabled], [data-disabled]) {
     color: var(--iap-colors-fg-disabled);
     cursor: not-allowed;
+    border-color: var(--iap-colors-border-disabled);
 }
 
-  .iap-button--variant_ghost:is(:focus-visible, [data-focus-visible]) {
+  .iap-button--variant_outline:is([aria-selected=true], [data-selected]) {
+    background: var(--iap-colors-accent-default);
+    color: var(--iap-colors-accent-fg);
+    border-color: var(--iap-colors-accent-default);
+}
+
+  .iap-button--variant_outline:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
     outline-offset: 2px;
     outline-color: var(--iap-colors-color-palette-default);
 }
 
-  .iap-button--variant_solid {
-    background: var(--iap-colors-color-palette-default);
-    color: var(--iap-colors-color-palette-fg);
-    --iap-colors-color-palette-1: var(--iap-colors-accent-1);
-    --iap-colors-color-palette-2: var(--iap-colors-accent-2);
-    --iap-colors-color-palette-3: var(--iap-colors-accent-3);
-    --iap-colors-color-palette-4: var(--iap-colors-accent-4);
-    --iap-colors-color-palette-5: var(--iap-colors-accent-5);
-    --iap-colors-color-palette-6: var(--iap-colors-accent-6);
-    --iap-colors-color-palette-7: var(--iap-colors-accent-7);
-    --iap-colors-color-palette-8: var(--iap-colors-accent-8);
-    --iap-colors-color-palette-9: var(--iap-colors-accent-9);
-    --iap-colors-color-palette-10: var(--iap-colors-accent-10);
-    --iap-colors-color-palette-11: var(--iap-colors-accent-11);
-    --iap-colors-color-palette-12: var(--iap-colors-accent-12);
-    --iap-colors-color-palette-a1: var(--iap-colors-accent-a1);
-    --iap-colors-color-palette-a2: var(--iap-colors-accent-a2);
-    --iap-colors-color-palette-a3: var(--iap-colors-accent-a3);
-    --iap-colors-color-palette-a4: var(--iap-colors-accent-a4);
-    --iap-colors-color-palette-a5: var(--iap-colors-accent-a5);
-    --iap-colors-color-palette-a6: var(--iap-colors-accent-a6);
-    --iap-colors-color-palette-a7: var(--iap-colors-accent-a7);
-    --iap-colors-color-palette-a8: var(--iap-colors-accent-a8);
-    --iap-colors-color-palette-a9: var(--iap-colors-accent-a9);
-    --iap-colors-color-palette-a10: var(--iap-colors-accent-a10);
-    --iap-colors-color-palette-a11: var(--iap-colors-accent-a11);
-    --iap-colors-color-palette-a12: var(--iap-colors-accent-a12);
-    --iap-colors-color-palette-default: var(--iap-colors-accent-default);
-    --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
-    --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
-    --iap-colors-color-palette-text: var(--iap-colors-accent-text);
-}
-
-  .iap-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--iap-colors-fg-disabled);
-    background: var(--iap-colors-bg-disabled);
-    cursor: not-allowed;
+  .iap-button--size_sm {
+    height: var(--iap-sizes-9);
+    min-width: var(--iap-sizes-9);
+    font-size: var(--iap-font-sizes-sm);
+    line-height: 1.25rem;
+    padding-inline: var(--iap-spacing-3\.5);
+    gap: var(--iap-spacing-2);
 }
 
-  .iap-button--variant_solid:is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid;
-    outline-offset: 2px;
-    outline-color: var(--iap-colors-color-palette-default);
+  .iap-button--size_sm svg {
+    width: var(--iap-sizes-4);
+    height: var(--iap-sizes-4);
 }
 
-  .iap-button--variant_outline {
+  .iap-button--variant_ghost {
     color: var(--iap-colors-color-palette-text);
     --iap-colors-color-palette-light-1: var(--iap-colors-gray-light-1);
     --iap-colors-color-palette-light-2: var(--iap-colors-gray-light-2);
@@ -2269,40 +2218,36 @@
     --iap-colors-color-palette-emphasized: var(--iap-colors-gray-emphasized);
     --iap-colors-color-palette-fg: var(--iap-colors-gray-fg);
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
-    border-width: 1px;
-    border-color: var(--iap-colors-color-palette-a7);
 }
 
-  .iap-button--variant_outline:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--iap-colors-fg-disabled);
-    cursor: not-allowed;
-    border-color: var(--iap-colors-border-disabled);
+  .iap-button--variant_ghost:is([aria-selected=true], [data-selected]) {
+    background: var(--iap-colors-color-palette-a3);
 }
 
-  .iap-button--variant_outline:is([aria-selected=true], [data-selected]) {
-    background: var(--iap-colors-accent-default);
-    color: var(--iap-colors-accent-fg);
-    border-color: var(--iap-colors-accent-default);
+  .iap-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--iap-colors-fg-disabled);
+    cursor: not-allowed;
 }
 
-  .iap-button--variant_outline:is(:focus-visible, [data-focus-visible]) {
+  .iap-button--variant_ghost:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
     outline-offset: 2px;
     outline-color: var(--iap-colors-color-palette-default);
 }
 
-  .iap-button--size_sm {
-    height: var(--iap-sizes-9);
-    min-width: var(--iap-sizes-9);
-    font-size: var(--iap-font-sizes-sm);
-    line-height: 1.25rem;
-    padding-inline: var(--iap-spacing-3\.5);
+  .iap-button--size_xs {
+    height: var(--iap-sizes-8);
+    min-width: var(--iap-sizes-8);
+    font-size: var(--iap-font-sizes-xs);
+    line-height: 1.125rem;
+    padding-inline: var(--iap-spacing-3);
     gap: var(--iap-spacing-2);
 }
 
-  .iap-button--size_sm svg {
+  .iap-button--size_xs svg {
     width: var(--iap-sizes-4);
     height: var(--iap-sizes-4);
+    font-size: var(--iap-font-sizes-md);
 }
 
   .iap-button--variant_subtle {
@@ -2398,40 +2343,49 @@
     outline-color: var(--iap-colors-color-palette-default);
 }
 
-  .iap-button--size_xs {
-    height: var(--iap-sizes-8);
-    min-width: var(--iap-sizes-8);
-    font-size: var(--iap-font-sizes-xs);
-    line-height: 1.125rem;
-    padding-inline: var(--iap-spacing-3);
-    gap: var(--iap-spacing-2);
+  .iap-button--variant_solid {
+    background: var(--iap-colors-color-palette-default);
+    color: var(--iap-colors-color-palette-fg);
+    --iap-colors-color-palette-1: var(--iap-colors-accent-1);
+    --iap-colors-color-palette-2: var(--iap-colors-accent-2);
+    --iap-colors-color-palette-3: var(--iap-colors-accent-3);
+    --iap-colors-color-palette-4: var(--iap-colors-accent-4);
+    --iap-colors-color-palette-5: var(--iap-colors-accent-5);
+    --iap-colors-color-palette-6: var(--iap-colors-accent-6);
+    --iap-colors-color-palette-7: var(--iap-colors-accent-7);
+    --iap-colors-color-palette-8: var(--iap-colors-accent-8);
+    --iap-colors-color-palette-9: var(--iap-colors-accent-9);
+    --iap-colors-color-palette-10: var(--iap-colors-accent-10);
+    --iap-colors-color-palette-11: var(--iap-colors-accent-11);
+    --iap-colors-color-palette-12: var(--iap-colors-accent-12);
+    --iap-colors-color-palette-a1: var(--iap-colors-accent-a1);
+    --iap-colors-color-palette-a2: var(--iap-colors-accent-a2);
+    --iap-colors-color-palette-a3: var(--iap-colors-accent-a3);
+    --iap-colors-color-palette-a4: var(--iap-colors-accent-a4);
+    --iap-colors-color-palette-a5: var(--iap-colors-accent-a5);
+    --iap-colors-color-palette-a6: var(--iap-colors-accent-a6);
+    --iap-colors-color-palette-a7: var(--iap-colors-accent-a7);
+    --iap-colors-color-palette-a8: var(--iap-colors-accent-a8);
+    --iap-colors-color-palette-a9: var(--iap-colors-accent-a9);
+    --iap-colors-color-palette-a10: var(--iap-colors-accent-a10);
+    --iap-colors-color-palette-a11: var(--iap-colors-accent-a11);
+    --iap-colors-color-palette-a12: var(--iap-colors-accent-a12);
+    --iap-colors-color-palette-default: var(--iap-colors-accent-default);
+    --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
+    --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
+    --iap-colors-color-palette-text: var(--iap-colors-accent-text);
 }
 
-  .iap-button--size_xs svg {
-    width: var(--iap-sizes-4);
-    height: var(--iap-sizes-4);
-    font-size: var(--iap-font-sizes-md);
+  .iap-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--iap-colors-fg-disabled);
+    background: var(--iap-colors-bg-disabled);
+    cursor: not-allowed;
 }
 
-  .iap-spinner--size_md {
-    --size: var(--iap-sizes-6);
-}
-
-  .iap-text--size_xs {
-    font-size: var(--iap-font-sizes-xs);
-    line-height: 1.125rem;
-}
-
-  .iap-input--size_md {
-    padding-inline: var(--iap-spacing-3);
-    height: var(--iap-sizes-10);
-    min-width: var(--iap-sizes-10);
-    font-size: var(--iap-font-sizes-md);
-}
-
-  .iap-textarea--size_md {
-    padding: var(--iap-spacing-3);
-    font-size: var(--iap-font-sizes-md);
+  .iap-button--variant_solid:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid;
+    outline-offset: 2px;
+    outline-color: var(--iap-colors-color-palette-default);
 }
 
   .iap-icon--size_md {
@@ -2463,26 +2417,25 @@
     height: var(--iap-sizes-3);
 }
 
-  @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_ghost:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-a3);
+  .iap-text--size_xs {
+    font-size: var(--iap-font-sizes-xs);
+    line-height: 1.125rem;
 }
 
-    .iap-button--variant_ghost:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      background: var(--iap-colors-transparent);
-      color: var(--iap-colors-fg-disabled);
-}
+  .iap-input--size_md {
+    padding-inline: var(--iap-spacing-3);
+    height: var(--iap-sizes-10);
+    min-width: var(--iap-sizes-10);
+    font-size: var(--iap-font-sizes-md);
 }
 
-  @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_solid:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-emphasized);
+  .iap-textarea--size_md {
+    padding: var(--iap-spacing-3);
+    font-size: var(--iap-font-sizes-md);
 }
 
-    .iap-button--variant_solid:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      color: var(--iap-colors-fg-disabled);
-      background: var(--iap-colors-bg-disabled);
-}
+  .iap-spinner--size_md {
+    --size: var(--iap-sizes-6);
 }
 
   @media (hover: hover) and (pointer: fine) {
@@ -2500,6 +2453,17 @@
       background: var(--iap-colors-accent-emphasized);
       border-color: var(--iap-colors-accent-emphasized);
 }
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .iap-button--variant_ghost:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-a3);
+}
+
+    .iap-button--variant_ghost:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+      background: var(--iap-colors-transparent);
+      color: var(--iap-colors-fg-disabled);
+}
 }
 
   @media (hover: hover) and (pointer: fine) {
@@ -2511,6 +2475,17 @@
       background: var(--iap-colors-bg-disabled);
       color: var(--iap-colors-fg-disabled);
 }
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .iap-button--variant_solid:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-emphasized);
+}
+
+    .iap-button--variant_solid:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+      color: var(--iap-colors-fg-disabled);
+      background: var(--iap-colors-bg-disabled);
+}
 }
 }
 
@@ -2539,6 +2514,44 @@
       animation: fadeOut 0.2s ease-out;
 }
 
+    .iap-alert__root {
+      background: var(--iap-colors-bg-default);
+      border-radius: var(--iap-radii-l3);
+      display: flex;
+      gap: var(--iap-spacing-3);
+      padding: var(--iap-spacing-4);
+      width: var(--iap-sizes-full);
+      border-width: 1px;
+}
+
+    .iap-alert__content {
+      display: flex;
+      gap: var(--iap-spacing-1);
+      flex-direction: column;
+}
+
+    .iap-alert__description {
+      color: var(--iap-colors-fg-muted);
+      font-size: var(--iap-font-sizes-sm);
+      line-height: 1.25rem;
+}
+
+    .iap-alert__icon {
+      width: var(--iap-sizes-5);
+      height: var(--iap-sizes-5);
+      flex-shrink: 0;
+}
+
+    .iap-alert__icon,.iap-alert__title {
+      color: var(--iap-colors-fg-default);
+}
+
+    .iap-alert__title {
+      font-size: var(--iap-font-sizes-sm);
+      line-height: 1.25rem;
+      font-weight: var(--iap-font-weights-semibold);
+}
+
     .iap-popover__arrow {
       --arrow-size: var(--sizes-3);
       --arrow-background: var(--colors-bg-default);
@@ -2589,88 +2602,6 @@
       color: var(--iap-colors-fg-muted);
 }
 
-    .iap-switchRecipe__root {
-      --iap-colors-color-palette-1: var(--iap-colors-accent-1);
-      --iap-colors-color-palette-2: var(--iap-colors-accent-2);
-      --iap-colors-color-palette-3: var(--iap-colors-accent-3);
-      --iap-colors-color-palette-4: var(--iap-colors-accent-4);
-      --iap-colors-color-palette-5: var(--iap-colors-accent-5);
-      --iap-colors-color-palette-6: var(--iap-colors-accent-6);
-      --iap-colors-color-palette-7: var(--iap-colors-accent-7);
-      --iap-colors-color-palette-8: var(--iap-colors-accent-8);
-      --iap-colors-color-palette-9: var(--iap-colors-accent-9);
-      --iap-colors-color-palette-10: var(--iap-colors-accent-10);
-      --iap-colors-color-palette-11: var(--iap-colors-accent-11);
-      --iap-colors-color-palette-12: var(--iap-colors-accent-12);
-      --iap-colors-color-palette-a1: var(--iap-colors-accent-a1);
-      --iap-colors-color-palette-a2: var(--iap-colors-accent-a2);
-      --iap-colors-color-palette-a3: var(--iap-colors-accent-a3);
-      --iap-colors-color-palette-a4: var(--iap-colors-accent-a4);
-      --iap-colors-color-palette-a5: var(--iap-colors-accent-a5);
-      --iap-colors-color-palette-a6: var(--iap-colors-accent-a6);
-      --iap-colors-color-palette-a7: var(--iap-colors-accent-a7);
-      --iap-colors-color-palette-a8: var(--iap-colors-accent-a8);
-      --iap-colors-color-palette-a9: var(--iap-colors-accent-a9);
-      --iap-colors-color-palette-a10: var(--iap-colors-accent-a10);
-      --iap-colors-color-palette-a11: var(--iap-colors-accent-a11);
-      --iap-colors-color-palette-a12: var(--iap-colors-accent-a12);
-      --iap-colors-color-palette-default: var(--iap-colors-accent-default);
-      --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
-      --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
-      --iap-colors-color-palette-text: var(--iap-colors-accent-text);
-      display: flex;
-      position: relative;
-      align-items: center;
-}
-
-    .iap-switchRecipe__label {
-      color: var(--iap-colors-fg-default);
-      font-weight: var(--iap-font-weights-medium);
-}
-
-    .iap-switchRecipe__control {
-      background: var(--iap-colors-bg-emphasized);
-      border-radius: var(--iap-radii-full);
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      flex-shrink: 0;
-      --transition-duration: var(--iap-durations-normal);
-      transition-duration: var(--iap-durations-normal);
-      --transition-prop: background;
-      transition-property: background;
-      --transition-easing: var(--iap-easings-default);
-      transition-timing-function: var(--iap-easings-default);
-}
-
-    .iap-switchRecipe__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-      background: var(--iap-colors-color-palette-default);
-}
-
-    .iap-switchRecipe__thumb {
-      background: var(--iap-colors-bg-default);
-      border-radius: var(--iap-radii-full);
-      box-shadow: var(--iap-shadows-xs);
-      --transition-duration: var(--iap-durations-normal);
-      transition-duration: var(--iap-durations-normal);
-      --transition-prop: transform, background;
-      transition-property: transform, background;
-      --transition-easing: var(--iap-easings-default);
-      transition-timing-function: var(--iap-easings-default);
-}
-
-    .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-      transform: translateX(100%);
-}
-
-    :root .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]),.light .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-      background: var(--iap-colors-bg-default);
-}
-
-    .dark .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-      background: var(--iap-colors-color-palette-fg);
-}
-
     .iap-menu__content {
       background: var(--iap-colors-bg-default);
       border-radius: var(--iap-radii-l2);
@@ -2823,42 +2754,86 @@
       display: none;
 }
 
-    .iap-alert__root {
-      background: var(--iap-colors-bg-default);
-      border-radius: var(--iap-radii-l3);
-      display: flex;
-      gap: var(--iap-spacing-3);
-      padding: var(--iap-spacing-4);
-      width: var(--iap-sizes-full);
-      border-width: 1px;
-}
-
-    .iap-alert__content {
+    .iap-switchRecipe__root {
+      --iap-colors-color-palette-1: var(--iap-colors-accent-1);
+      --iap-colors-color-palette-2: var(--iap-colors-accent-2);
+      --iap-colors-color-palette-3: var(--iap-colors-accent-3);
+      --iap-colors-color-palette-4: var(--iap-colors-accent-4);
+      --iap-colors-color-palette-5: var(--iap-colors-accent-5);
+      --iap-colors-color-palette-6: var(--iap-colors-accent-6);
+      --iap-colors-color-palette-7: var(--iap-colors-accent-7);
+      --iap-colors-color-palette-8: var(--iap-colors-accent-8);
+      --iap-colors-color-palette-9: var(--iap-colors-accent-9);
+      --iap-colors-color-palette-10: var(--iap-colors-accent-10);
+      --iap-colors-color-palette-11: var(--iap-colors-accent-11);
+      --iap-colors-color-palette-12: var(--iap-colors-accent-12);
+      --iap-colors-color-palette-a1: var(--iap-colors-accent-a1);
+      --iap-colors-color-palette-a2: var(--iap-colors-accent-a2);
+      --iap-colors-color-palette-a3: var(--iap-colors-accent-a3);
+      --iap-colors-color-palette-a4: var(--iap-colors-accent-a4);
+      --iap-colors-color-palette-a5: var(--iap-colors-accent-a5);
+      --iap-colors-color-palette-a6: var(--iap-colors-accent-a6);
+      --iap-colors-color-palette-a7: var(--iap-colors-accent-a7);
+      --iap-colors-color-palette-a8: var(--iap-colors-accent-a8);
+      --iap-colors-color-palette-a9: var(--iap-colors-accent-a9);
+      --iap-colors-color-palette-a10: var(--iap-colors-accent-a10);
+      --iap-colors-color-palette-a11: var(--iap-colors-accent-a11);
+      --iap-colors-color-palette-a12: var(--iap-colors-accent-a12);
+      --iap-colors-color-palette-default: var(--iap-colors-accent-default);
+      --iap-colors-color-palette-emphasized: var(--iap-colors-accent-emphasized);
+      --iap-colors-color-palette-fg: var(--iap-colors-accent-fg);
+      --iap-colors-color-palette-text: var(--iap-colors-accent-text);
       display: flex;
-      gap: var(--iap-spacing-1);
-      flex-direction: column;
+      position: relative;
+      align-items: center;
 }
 
-    .iap-alert__description {
-      color: var(--iap-colors-fg-muted);
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
+    .iap-switchRecipe__label {
+      color: var(--iap-colors-fg-default);
+      font-weight: var(--iap-font-weights-medium);
 }
 
-    .iap-alert__icon {
-      width: var(--iap-sizes-5);
-      height: var(--iap-sizes-5);
+    .iap-switchRecipe__control {
+      background: var(--iap-colors-bg-emphasized);
+      border-radius: var(--iap-radii-full);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
       flex-shrink: 0;
+      --transition-duration: var(--iap-durations-normal);
+      transition-duration: var(--iap-durations-normal);
+      --transition-prop: background;
+      transition-property: background;
+      --transition-easing: var(--iap-easings-default);
+      transition-timing-function: var(--iap-easings-default);
 }
 
-    .iap-alert__icon,.iap-alert__title {
-      color: var(--iap-colors-fg-default);
+    .iap-switchRecipe__control:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+      background: var(--iap-colors-color-palette-default);
 }
 
-    .iap-alert__title {
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
-      font-weight: var(--iap-font-weights-semibold);
+    .iap-switchRecipe__thumb {
+      background: var(--iap-colors-bg-default);
+      border-radius: var(--iap-radii-full);
+      box-shadow: var(--iap-shadows-xs);
+      --transition-duration: var(--iap-durations-normal);
+      transition-duration: var(--iap-durations-normal);
+      --transition-prop: transform, background;
+      transition-property: transform, background;
+      --transition-easing: var(--iap-easings-default);
+      transition-timing-function: var(--iap-easings-default);
+}
+
+    .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+      transform: translateX(100%);
+}
+
+    :root .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]),.light .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+      background: var(--iap-colors-bg-default);
+}
+
+    .dark .iap-switchRecipe__thumb:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+      background: var(--iap-colors-color-palette-fg);
 }
 
     @media (hover: hover) and (pointer: fine) {
@@ -2882,25 +2857,6 @@
 }
 }
 
-  .iap-switchRecipe__root--size_md {
-    gap: var(--iap-spacing-3);
-}
-
-  .iap-switchRecipe__label--size_md {
-    font-size: var(--iap-font-sizes-md);
-    line-height: 1.5rem;
-}
-
-  .iap-switchRecipe__control--size_md {
-    width: var(--iap-sizes-9);
-    padding: var(--iap-spacing-0\.5);
-}
-
-  .iap-switchRecipe__thumb--size_md {
-    width: var(--iap-sizes-4);
-    height: var(--iap-sizes-4);
-}
-
   .iap-menu__content--size_md {
     padding-block: var(--iap-spacing-1);
     gap: var(--iap-spacing-1);
@@ -2952,265 +2908,100 @@
     width: var(--iap-sizes-5);
     height: var(--iap-sizes-5);
 }
-}
-
-@layer iap_utilities{
-  @layer compositions{
 
-    .iap-textStyle_md {
-      font-size: var(--iap-font-sizes-md);
-      line-height: 1.5rem;
-}
-
-    .iap-textStyle_sm {
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
-}
-
-    .iap-textStyle_xs {
-      font-size: var(--iap-font-sizes-xs);
-      line-height: 1.125rem;
-}
-}
-
-  .iap-ring_none {
-    outline: var(--iap-borders-none);
-}
-
-  .iap-d_flex {
-    display: flex;
+  .iap-switchRecipe__root--size_md {
+    gap: var(--iap-spacing-3);
 }
 
-  .iap-ov_hidden {
-    overflow: hidden;
+  .iap-switchRecipe__label--size_md {
+    font-size: var(--iap-font-sizes-md);
+    line-height: 1.5rem;
 }
 
-  .iap-bg_white {
-    background: var(--iap-colors-white);
+  .iap-switchRecipe__control--size_md {
+    width: var(--iap-sizes-9);
+    padding: var(--iap-spacing-0\.5);
 }
 
-  .iap-bx-sh_xl {
-    box-shadow: var(--iap-shadows-xl);
+  .iap-switchRecipe__thumb--size_md {
+    width: var(--iap-sizes-4);
+    height: var(--iap-sizes-4);
 }
-
-  .iap-bdr_lg {
-    border-radius: var(--iap-radii-lg);
 }
 
-  .iap-p_0 {
-    padding: var(--iap-spacing-0);
-}
+@layer iap_utilities{
+  @layer compositions{
 
-  .iap-max-w_none {
-    max-width: none;
+    .iap-textStyle_xs {
+      font-size: var(--iap-font-sizes-xs);
+      line-height: 1.125rem;
 }
 
-  .iap-max-h_var\(--available-height\) {
-    max-height: var(--available-height);
+    .iap-textStyle_sm {
+      font-size: var(--iap-font-sizes-sm);
+      line-height: 1.25rem;
 }
 
-  .iap-h_full {
-    height: var(--iap-sizes-full);
+    .iap-textStyle_md {
+      font-size: var(--iap-font-sizes-md);
+      line-height: 1.5rem;
 }
-
-  .iap-w_fit-content {
-    width: fit-content;
 }
 
   .iap-p_1\.5 {
     padding: var(--iap-spacing-1\.5);
 }
 
-  .iap-w_full {
-    width: var(--iap-sizes-full);
-}
-
-  .iap-min-w_56 {
-    min-width: var(--iap-sizes-56);
-}
-
-  .iap-max-w_min\(65em\,_90vw\) {
-    max-width: min(65em, 90vw);
-}
-
-  .iap-max-h_inherit {
-    max-height: inherit;
-}
-
-  .iap-min-h_8 {
-    min-height: var(--iap-sizes-8);
-}
-
-  .iap-bdr_none {
-    border-radius: var(--iap-radii-none);
+  .iap-gap_2 {
+    gap: var(--iap-spacing-2);
 }
 
-  .iap-bd_none {
-    border: var(--iap-borders-none);
+  .iap-flex_1 {
+    flex: 1 1 0%;
 }
 
-  .iap-px_2 {
-    padding-inline: var(--iap-spacing-2);
+  .iap-w_min\(30rem\,_70vw\) {
+    width: min(30rem, 70vw);
 }
 
-  .iap-py_1\.5 {
-    padding-block: var(--iap-spacing-1\.5);
+  .iap-min-h_14 {
+    min-height: var(--iap-sizes-14);
 }
 
-  .iap-pos_relative {
-    position: relative;
+  .iap-w_fit-content {
+    width: fit-content;
 }
 
-  .iap-max-w_md {
-    max-width: var(--iap-sizes-md);
+  .iap-h_fit-content {
+    height: fit-content;
 }
 
-  .iap-p_2 {
-    padding: var(--iap-spacing-2);
+  .iap-bdr_xl {
+    border-radius: var(--iap-radii-xl);
 }
 
   .iap-c_slate\.11 {
     color: var(--iap-colors-slate-11);
 }
 
-  .iap-tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .iap-ls_wide {
-    letter-spacing: var(--iap-letter-spacings-wide);
-}
-
-  .iap-pos_sticky {
-    position: sticky;
-}
-
-  .iap-z_docked {
-    z-index: var(--iap-z-index-docked);
-}
-
-  .iap-min-h_auto {
-    min-height: auto;
-}
-
-  .iap-pointer-events_none {
-    pointer-events: none;
-}
-
-  .iap-gap_1\.5 {
-    gap: var(--iap-spacing-1\.5);
+  .iap-px_2 {
+    padding-inline: var(--iap-spacing-2);
 }
 
   .iap-py_1 {
     padding-block: var(--iap-spacing-1);
 }
 
-  .iap-cursor_pointer {
-    cursor: pointer;
-}
-
-  .iap-min-h_6 {
-    min-height: var(--iap-sizes-6);
-}
-
-  .iap-bdr_md {
-    border-radius: var(--iap-radii-md);
-}
-
-  .iap-max-w_full {
-    max-width: var(--iap-sizes-full);
-}
-
-  .iap-min-w_3\/6 {
-    min-width: 50%;
-}
-
-  .iap-ov-wrap_break-word {
-    overflow-wrap: break-word;
-}
-
-  .iap-c_slate\.9 {
-    color: var(--iap-colors-slate-9);
-}
-
-  .iap-min-w_1\/6 {
-    min-width: 16.666667%;
-}
-
-  .iap-max-w_2\/5 {
-    max-width: 40%;
-}
-
-  .iap-ta_right {
-    text-align: right;
-}
-
-  .iap-bg_slate\.2 {
-    background: var(--iap-colors-slate-2);
-}
-
-  .iap-c_slate\.12 {
-    color: var(--iap-colors-slate-12);
-}
-
-  .iap-h_4 {
-    height: var(--iap-sizes-4);
-}
-
-  .iap-w_4 {
-    width: var(--iap-sizes-4);
-}
-
-  .iap-c_tomato\.10 {
-    color: var(--iap-colors-tomato-10);
-}
-
-  .iap-h_7 {
-    height: var(--iap-sizes-7);
-}
-
-  .iap-w_7 {
-    width: var(--iap-sizes-7);
-}
-
-  .iap-c_fg\.default {
-    color: var(--iap-colors-fg-default);
-}
-
-  .iap-h_6 {
-    height: var(--iap-sizes-6);
-}
-
-  .iap-w_6 {
-    width: var(--iap-sizes-6);
-}
-
-  .iap-h_5 {
-    height: var(--iap-sizes-5);
-}
-
-  .iap-w_3\/5 {
-    width: 60%;
-}
-
-  .iap-op_0 {
-    opacity: 0;
-}
-
-  .iap-d_inline-flex {
-    display: inline-flex;
-}
-
-  .iap-pos_absolute {
-    position: absolute;
+  .iap-d_flex {
+    display: flex;
 }
 
-  .iap-trf_translate\(-50\%\,_-50\%\) {
-    transform: translate(-50%, -50%);
+  .iap---thickness_1px {
+    --thickness: 1px;
 }
 
-  .iap-inset-s_50\% {
-    inset-inline-start: 50%;
+  .iap-w_100\% {
+    width: 100%;
 }
 
   .iap-color-palette_gray {
@@ -3292,6 +3083,138 @@
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
 }
 
+  .iap-gap_4 {
+    gap: var(--iap-spacing-4);
+}
+
+  .iap-min-h_16 {
+    min-height: var(--iap-sizes-16);
+}
+
+  .iap-gap_2\.5 {
+    gap: var(--iap-spacing-2\.5);
+}
+
+  .iap-pointer-events_none {
+    pointer-events: none;
+}
+
+  .iap-h_10 {
+    height: var(--iap-sizes-10);
+}
+
+  .iap-min-h_10 {
+    min-height: var(--iap-sizes-10);
+}
+
+  .iap-bdr_md {
+    border-radius: var(--iap-radii-md);
+}
+
+  .iap-w_5\/6 {
+    width: 83.333333%;
+}
+
+  .iap-op_0\.1 {
+    opacity: 0.1;
+}
+
+  .iap-trs_opacity_0\.1s {
+    transition: opacity 0.1s;
+}
+
+  .iap-gap_1 {
+    gap: var(--iap-spacing-1);
+}
+
+  .iap-max-h_full {
+    max-height: var(--iap-sizes-full);
+}
+
+  .iap-ov_scroll {
+    overflow: scroll;
+}
+
+  .iap-m_0 {
+    margin: var(--iap-spacing-0);
+}
+
+  .iap-bdr_sm {
+    border-radius: var(--iap-radii-sm);
+}
+
+  .iap-py_0\.5 {
+    padding-block: var(--iap-spacing-0\.5);
+}
+
+  .iap-px_1 {
+    padding-inline: var(--iap-spacing-1);
+}
+
+  .iap-gap_0\.5 {
+    gap: var(--iap-spacing-0\.5);
+}
+
+  .iap-h_initial {
+    height: initial;
+}
+
+  .iap-max-w_md {
+    max-width: var(--iap-sizes-md);
+}
+
+  .iap-bdr_lg {
+    border-radius: var(--iap-radii-lg);
+}
+
+  .iap-px_3 {
+    padding-inline: var(--iap-spacing-3);
+}
+
+  .iap-py_1\.5 {
+    padding-block: var(--iap-spacing-1\.5);
+}
+
+  .iap-bg_gray\.2 {
+    background: var(--iap-colors-gray-2);
+}
+
+  .iap-mx_1\.5 {
+    margin-inline: var(--iap-spacing-1\.5);
+}
+
+  .iap-p_0 {
+    padding: var(--iap-spacing-0);
+}
+
+  .iap-bg_warning\.2 {
+    background: var(--iap-colors-warning-2);
+}
+
+  .iap-c_warning\.11 {
+    color: var(--iap-colors-warning-11);
+}
+
+  .iap-my_1\.5 {
+    margin-block: var(--iap-spacing-1\.5);
+}
+
+  .iap-my_2 {
+    margin-block: var(--iap-spacing-2);
+}
+
+  .iap-z_popover {
+    z-index: var(--iap-z-index-popover);
+}
+
+  .iap-isolation_isolate {
+    isolation: isolate;
+}
+
+  .iap-d_inline {
+    display: inline;
+}
+
   .iap-sr_true {
     position: absolute;
     width: 1px;
@@ -3304,6 +3227,14 @@
     border-width: 0;
 }
 
+  .iap-w_4 {
+    width: var(--iap-sizes-4);
+}
+
+  .iap-asp_aspect-square {
+    aspect-ratio: aspect-square;
+}
+
   .iap-offset_0 {
     offset: 0;
 }
@@ -3312,42 +3243,114 @@
     display: inline-block;
 }
 
-  .iap-px_1 {
-    padding-inline: var(--iap-spacing-1);
+  .iap-cursor_help {
+    cursor: help;
+}
+
+  .iap-bg_neutral\.2 {
+    background: var(--iap-colors-neutral-2);
+}
+
+  .iap-bdr_xs {
+    border-radius: var(--iap-radii-xs);
+}
+
+  .iap-c_neutral\.11 {
+    color: var(--iap-colors-neutral-11);
+}
+
+  .iap-ta_center {
+    text-align: center;
+}
+
+  .iap-min-w_5 {
+    min-width: var(--iap-sizes-5);
+}
+
+  .iap-bg_surface\.default {
+    background: var(--iap-colors-surface-default);
+}
+
+  .iap-py_2\.5 {
+    padding-block: var(--iap-spacing-2\.5);
+}
+
+  .iap-min-w_48 {
+    min-width: var(--iap-sizes-48);
+}
+
+  .iap-w_auto {
+    width: auto;
+}
+
+  .iap-bx-sh_none {
+    box-shadow: none;
+}
+
+  .iap-gap_5 {
+    gap: var(--iap-spacing-5);
+}
+
+  .iap-px_2\.5 {
+    padding-inline: var(--iap-spacing-2\.5);
+}
+
+  .iap-py_2 {
+    padding-block: var(--iap-spacing-2);
+}
+
+  .iap-w_full {
+    width: var(--iap-sizes-full);
+}
+
+  .iap-h_auto {
+    height: auto;
+}
+
+  .iap-gap_0 {
+    gap: var(--iap-spacing-0);
 }
 
-  .iap-cursor_help {
-    cursor: help;
+  .iap-c_neutral\.9 {
+    color: var(--iap-colors-neutral-9);
 }
 
-  .iap-bg_neutral\.2 {
-    background: var(--iap-colors-neutral-2);
+  .iap-w_3 {
+    width: var(--iap-sizes-3);
 }
 
-  .iap-bdr_xs {
-    border-radius: var(--iap-radii-xs);
+  .iap-h_4 {
+    height: var(--iap-sizes-4);
 }
 
-  .iap-c_neutral\.11 {
-    color: var(--iap-colors-neutral-11);
+  .iap-w_5 {
+    width: var(--iap-sizes-5);
 }
 
-  .iap-ta_center {
-    text-align: center;
+  .iap-h_5 {
+    height: var(--iap-sizes-5);
 }
 
-  .iap-min-w_5 {
-    min-width: var(--iap-sizes-5);
+  .iap-w_14rem {
+    width: 14rem;
 }
 
-  .iap-gap_2 {
-    gap: var(--iap-spacing-2);
+  .iap-w_49\% {
+    width: 49%;
 }
 
   .iap-px_1\.5 {
     padding-inline: var(--iap-spacing-1\.5);
 }
 
+  .iap-h_6 {
+    height: var(--iap-sizes-6);
+}
+
+  .iap-w_6 {
+    width: var(--iap-sizes-6);
+}
+
   .iap-min-w_unset {
     min-width: unset;
 }
@@ -3364,6 +3367,38 @@
     background: linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%;
 }
 
+  .iap-fill_error\.11 {
+    fill: var(--iap-colors-error-11);
+}
+
+  .iap-fill_success\.11 {
+    fill: var(--iap-colors-success-11);
+}
+
+  .iap-pos_absolute {
+    position: absolute;
+}
+
+  .iap-c_white {
+    color: var(--iap-colors-white);
+}
+
+  .iap-bg_white {
+    background: var(--iap-colors-white);
+}
+
+  .iap-bdr_full {
+    border-radius: var(--iap-radii-full);
+}
+
+  .iap-pos_relative {
+    position: relative;
+}
+
+  .iap-max-h_initial {
+    max-height: initial;
+}
+
   .iap-p_3 {
     padding: var(--iap-spacing-3);
 }
@@ -3376,8 +3411,12 @@
     white-space: wrap;
 }
 
-  .iap-bdr_full {
-    border-radius: var(--iap-radii-full);
+  .iap-c_gray\.12 {
+    color: var(--iap-colors-gray-12);
+}
+
+  .iap-w_3\/5 {
+    width: 60%;
 }
 
   .iap-flex_0_0_auto {
@@ -3388,10 +3427,6 @@
     width: var(--iap-sizes-10);
 }
 
-  .iap-h_10 {
-    height: var(--iap-sizes-10);
-}
-
   .iap-bdr_9999px {
     border-radius: 9999px;
 }
@@ -3404,22 +3439,10 @@
     padding-inline: var(--iap-spacing-4);
 }
 
-  .iap-py_2 {
-    padding-block: var(--iap-spacing-2);
-}
-
-  .iap-bdr_sm {
-    border-radius: var(--iap-radii-sm);
-}
-
   .iap-min-w_28 {
     min-width: var(--iap-sizes-28);
 }
 
-  .iap-bx-sh_none {
-    box-shadow: none;
-}
-
   .iap-bg_neutral\.3 {
     background: var(--iap-colors-neutral-3);
 }
@@ -3432,12 +3455,8 @@
     background: var(--iap-colors-black);
 }
 
-  .iap-bdr_xl {
-    border-radius: var(--iap-radii-xl);
-}
-
-  .iap-c_white {
-    color: var(--iap-colors-white);
+  .iap-max-w_full {
+    max-width: var(--iap-sizes-full);
 }
 
   .iap-bg_neutral\.3\! {
@@ -3454,204 +3473,176 @@
     white-space: nowrap;
 }
 
-  .iap-px_0 {
-    padding-inline: var(--iap-spacing-0);
-}
-
-  .iap-anim_fade-in {
-    animation: var(--iap-animations-fade-in);
-}
-
-  .iap-my_2 {
-    margin-block: var(--iap-spacing-2);
-}
-
-  .iap-z_popover {
-    z-index: var(--iap-z-index-popover);
-}
-
-  .iap-isolation_isolate {
-    isolation: isolate;
-}
-
-  .iap-d_inline {
-    display: inline;
-}
-
-  .iap-asp_aspect-square {
-    aspect-ratio: aspect-square;
-}
-
-  .iap-gap_0\.5 {
-    gap: var(--iap-spacing-0\.5);
+  .iap-ring_none {
+    outline: var(--iap-borders-none);
 }
 
-  .iap-bg_surface\.default {
-    background: var(--iap-colors-surface-default);
+  .iap-ov_hidden {
+    overflow: hidden;
 }
 
-  .iap-px_3 {
-    padding-inline: var(--iap-spacing-3);
+  .iap-bx-sh_xl {
+    box-shadow: var(--iap-shadows-xl);
 }
 
-  .iap-py_2\.5 {
-    padding-block: var(--iap-spacing-2\.5);
+  .iap-max-w_none {
+    max-width: none;
 }
 
-  .iap-min-w_48 {
-    min-width: var(--iap-sizes-48);
+  .iap-max-h_var\(--available-height\) {
+    max-height: var(--available-height);
 }
 
-  .iap-w_auto {
-    width: auto;
+  .iap-h_full {
+    height: var(--iap-sizes-full);
 }
 
-  .iap-gap_5 {
-    gap: var(--iap-spacing-5);
+  .iap-min-w_56 {
+    min-width: var(--iap-sizes-56);
 }
 
-  .iap-px_2\.5 {
-    padding-inline: var(--iap-spacing-2\.5);
+  .iap-max-w_min\(65em\,_90vw\) {
+    max-width: min(65em, 90vw);
 }
 
-  .iap-m_0 {
-    margin: var(--iap-spacing-0);
+  .iap-max-h_inherit {
+    max-height: inherit;
 }
 
-  .iap-h_auto {
-    height: auto;
+  .iap-min-h_8 {
+    min-height: var(--iap-sizes-8);
 }
 
-  .iap-gap_0 {
-    gap: var(--iap-spacing-0);
+  .iap-bdr_none {
+    border-radius: var(--iap-radii-none);
 }
 
-  .iap-c_neutral\.9 {
-    color: var(--iap-colors-neutral-9);
+  .iap-bd_none {
+    border: var(--iap-borders-none);
 }
 
-  .iap-w_3 {
-    width: var(--iap-sizes-3);
+  .iap-p_2 {
+    padding: var(--iap-spacing-2);
 }
 
-  .iap-w_5 {
-    width: var(--iap-sizes-5);
+  .iap-tt_uppercase {
+    text-transform: uppercase;
 }
 
-  .iap-h_fit-content {
-    height: fit-content;
+  .iap-ls_wide {
+    letter-spacing: var(--iap-letter-spacings-wide);
 }
 
-  .iap-w_49\% {
-    width: 49%;
+  .iap-pos_sticky {
+    position: sticky;
 }
 
-  .iap-fill_error\.11 {
-    fill: var(--iap-colors-error-11);
+  .iap-z_docked {
+    z-index: var(--iap-z-index-docked);
 }
 
-  .iap-fill_success\.11 {
-    fill: var(--iap-colors-success-11);
+  .iap-min-h_auto {
+    min-height: auto;
 }
 
-  .iap-max-h_initial {
-    max-height: initial;
+  .iap-gap_1\.5 {
+    gap: var(--iap-spacing-1\.5);
 }
 
-  .iap-h_initial {
-    height: initial;
+  .iap-cursor_pointer {
+    cursor: pointer;
 }
 
-  .iap-c_gray\.12 {
-    color: var(--iap-colors-gray-12);
+  .iap-min-h_6 {
+    min-height: var(--iap-sizes-6);
 }
 
-  .iap-gap_4 {
-    gap: var(--iap-spacing-4);
+  .iap-min-w_3\/6 {
+    min-width: 50%;
 }
 
-  .iap-min-h_16 {
-    min-height: var(--iap-sizes-16);
+  .iap-ov-wrap_break-word {
+    overflow-wrap: break-word;
 }
 
-  .iap-gap_2\.5 {
-    gap: var(--iap-spacing-2\.5);
+  .iap-c_slate\.9 {
+    color: var(--iap-colors-slate-9);
 }
 
-  .iap-min-h_10 {
-    min-height: var(--iap-sizes-10);
+  .iap-min-w_1\/6 {
+    min-width: 16.666667%;
 }
 
-  .iap-w_5\/6 {
-    width: 83.333333%;
+  .iap-max-w_2\/5 {
+    max-width: 40%;
 }
 
-  .iap-op_0\.1 {
-    opacity: 0.1;
+  .iap-ta_right {
+    text-align: right;
 }
 
-  .iap-trs_opacity_0\.1s {
-    transition: opacity 0.1s;
+  .iap-bg_slate\.2 {
+    background: var(--iap-colors-slate-2);
 }
 
-  .iap-gap_1 {
-    gap: var(--iap-spacing-1);
+  .iap-c_slate\.12 {
+    color: var(--iap-colors-slate-12);
 }
 
-  .iap-max-h_full {
-    max-height: var(--iap-sizes-full);
+  .iap-c_tomato\.10 {
+    color: var(--iap-colors-tomato-10);
 }
-
-  .iap-ov_scroll {
-    overflow: scroll;
+
+  .iap-h_7 {
+    height: var(--iap-sizes-7);
 }
 
-  .iap---thickness_1px {
-    --thickness: 1px;
+  .iap-w_7 {
+    width: var(--iap-sizes-7);
 }
 
-  .iap-w_100\% {
-    width: 100%;
+  .iap-c_fg\.default {
+    color: var(--iap-colors-fg-default);
 }
 
-  .iap-w_14rem {
-    width: 14rem;
+  .iap-op_0 {
+    opacity: 0;
 }
 
-  .iap-flex_1 {
-    flex: 1 1 0%;
+  .iap-d_inline-flex {
+    display: inline-flex;
 }
 
-  .iap-w_min\(30rem\,_70vw\) {
-    width: min(30rem, 70vw);
+  .iap-trf_translate\(-50\%\,_-50\%\) {
+    transform: translate(-50%, -50%);
 }
 
-  .iap-min-h_14 {
-    min-height: var(--iap-sizes-14);
+  .iap-inset-s_50\% {
+    inset-inline-start: 50%;
 }
 
-  .iap-py_0\.5 {
-    padding-block: var(--iap-spacing-0\.5);
+  .iap-px_0 {
+    padding-inline: var(--iap-spacing-0);
 }
 
-  .iap-bg_gray\.2 {
-    background: var(--iap-colors-gray-2);
+  .iap-anim_fade-in {
+    animation: var(--iap-animations-fade-in);
 }
 
-  .iap-mx_1\.5 {
-    margin-inline: var(--iap-spacing-1\.5);
+  .iap-bg_green {
+    background: green;
 }
 
-  .iap-bg_warning\.2 {
-    background: var(--iap-colors-warning-2);
+  .iap-bg_primary {
+    background: primary;
 }
 
-  .iap-c_warning\.11 {
-    color: var(--iap-colors-warning-11);
+  .iap-p_0\.5 {
+    padding: var(--iap-spacing-0\.5);
 }
 
-  .iap-my_1\.5 {
-    margin-block: var(--iap-spacing-1\.5);
+  .iap-tw_nowrap {
+    text-wrap: nowrap;
 }
 
   .iap-color-palette_current {
@@ -4868,94 +4859,114 @@
     --iap-colors-color-palette-text: var(--iap-colors-primary-text);
 }
 
-  .iap-bd-c_gray\.2 {
-    border-color: var(--iap-colors-gray-2);
+  .iap-flex-d_column {
+    flex-direction: column;
 }
 
-  .iap-bd-w_0\.5 {
-    border-width: 0.5px;
+  .iap-ov-y_scroll {
+    overflow-y: scroll;
 }
 
-  .iap-flex-d_column {
-    flex-direction: column;
+  .iap-ov-x_auto {
+    overflow-x: auto;
 }
 
-  .iap-pb_1\.5 {
-    padding-bottom: var(--iap-spacing-1\.5);
+  .iap-mt_1 {
+    margin-top: var(--iap-spacing-1);
 }
 
-  .iap-fw_medium {
-    font-weight: var(--iap-font-weights-medium);
+  .iap-border-block-end-width_var\(--thickness\) {
+    border-block-end-width: var(--thickness);
 }
 
-  .iap-pt_0\.5 {
-    padding-top: var(--iap-spacing-0\.5);
+  .iap-pl_2 {
+    padding-left: var(--iap-spacing-2);
 }
 
-  .iap-ov-y_auto {
-    overflow-y: auto;
+  .iap-pb_2\.5 {
+    padding-bottom: var(--iap-spacing-2\.5);
 }
 
-  .iap-flex-g_1 {
-    flex-grow: 1;
+  .iap-jc_space-between {
+    justify-content: space-between;
 }
 
-  .iap-fs_xs {
-    font-size: var(--iap-font-sizes-xs);
+  .iap-ai_center {
+    align-items: center;
 }
 
-  .iap-top_0 {
-    top: var(--iap-spacing-0);
+  .iap-fw_medium {
+    font-weight: var(--iap-font-weights-medium);
 }
 
-  .iap-flex-d_row {
-    flex-direction: row;
+  .iap-flex-wrap_wrap {
+    flex-wrap: wrap;
 }
 
-  .iap-ai_center {
-    align-items: center;
+  .iap-ov-y_auto {
+    overflow-y: auto;
 }
 
-  .iap-mt_0\.5 {
-    margin-top: var(--iap-spacing-0\.5);
+  .iap-bd-c_warning\.8 {
+    border-color: var(--iap-colors-warning-8);
 }
 
-  .iap-bd-c_slate\.3 {
-    border-color: var(--iap-colors-slate-3);
+  .iap-mt_1\.5 {
+    margin-top: var(--iap-spacing-1\.5);
+}
+
+  .iap-ml_2 {
+    margin-left: var(--iap-spacing-2);
+}
+
+  .iap-lh_1\.2 {
+    line-height: 1.2;
 }
 
   .iap-bd-w_thin {
     border-width: thin;
 }
 
-  .iap-jc_center {
-    justify-content: center;
+  .iap-bd-c_neutral\.5 {
+    border-color: var(--iap-colors-neutral-5);
 }
 
-  .iap-top_50\% {
-    top: 50%;
+  .iap-flex-d_row {
+    flex-direction: row;
 }
 
-  .iap-bd-b-c_transparent {
-    border-bottom-color: var(--iap-colors-transparent);
+  .iap-ai_start {
+    align-items: start;
 }
 
-  .iap-bd-l-c_transparent {
-    border-left-color: var(--iap-colors-transparent);
+  .iap-jc_start {
+    justify-content: start;
 }
 
-  .iap-ml_2 {
-    margin-left: var(--iap-spacing-2);
+  .iap-fw_normal {
+    font-weight: var(--iap-font-weights-normal);
 }
 
-  .iap-lh_1\.2 {
-    line-height: 1.2;
+  .iap-fs_xs {
+    font-size: var(--iap-font-sizes-xs);
+}
+
+  .iap-fw_bold {
+    font-weight: var(--iap-font-weights-bold);
+}
+
+  .iap-pt_1px {
+    padding-top: 1px;
 }
 
   .iap-fs_sm {
     font-size: var(--iap-font-sizes-sm);
 }
 
+  .iap-jc_center {
+    justify-content: center;
+}
+
   .iap-flex-sh_0 {
     flex-shrink: 0;
 }
@@ -4968,6 +4979,10 @@
     border-color: var(--iap-colors-gray-5);
 }
 
+  .iap-bd-w_0\.5 {
+    border-width: 0.5px;
+}
+
   .iap-bg-c_transparent {
     background-color: var(--iap-colors-transparent);
 }
@@ -4984,34 +4999,6 @@
     background-size: 100% 15px, 100% 15px, 100% 2px, 100% 2px;
 }
 
-  .iap-jc_start {
-    justify-content: start;
-}
-
-  .iap-pt_5 {
-    padding-top: var(--iap-spacing-5);
-}
-
-  .iap-bd-c_neutral\.5 {
-    border-color: var(--iap-colors-neutral-5);
-}
-
-  .iap-fw_normal {
-    font-weight: var(--iap-font-weights-normal);
-}
-
-  .iap-ai_start {
-    align-items: start;
-}
-
-  .iap-fw_bold {
-    font-weight: var(--iap-font-weights-bold);
-}
-
-  .iap-pt_1px {
-    padding-top: 1px;
-}
-
   .iap-top_-1\.5 {
     top: calc(var(--iap-spacing-1\.5) * -1);
 }
@@ -5024,74 +5011,78 @@
     flex-direction: column-reverse;
 }
 
-  .iap-pl_2 {
-    padding-left: var(--iap-spacing-2);
+  .iap-pt_5 {
+    padding-top: var(--iap-spacing-5);
 }
 
-  .iap-border-block-end-width_var\(--thickness\) {
-    border-block-end-width: var(--thickness);
+  .iap-bd-c_gray\.2 {
+    border-color: var(--iap-colors-gray-2);
 }
 
-  .iap-ov-y_scroll {
-    overflow-y: scroll;
+  .iap-pb_1\.5 {
+    padding-bottom: var(--iap-spacing-1\.5);
 }
 
-  .iap-ov-x_auto {
-    overflow-x: auto;
+  .iap-pt_0\.5 {
+    padding-top: var(--iap-spacing-0\.5);
 }
 
-  .iap-mt_1 {
-    margin-top: var(--iap-spacing-1);
+  .iap-flex-g_1 {
+    flex-grow: 1;
 }
 
-  .iap-pb_2\.5 {
-    padding-bottom: var(--iap-spacing-2\.5);
+  .iap-top_0 {
+    top: var(--iap-spacing-0);
 }
 
-  .iap-jc_space-between {
-    justify-content: space-between;
+  .iap-mt_0\.5 {
+    margin-top: var(--iap-spacing-0\.5);
 }
 
-  .iap-flex-wrap_wrap {
-    flex-wrap: wrap;
+  .iap-bd-c_slate\.3 {
+    border-color: var(--iap-colors-slate-3);
 }
 
-  .iap-bd-c_warning\.8 {
-    border-color: var(--iap-colors-warning-8);
+  .iap-top_50\% {
+    top: 50%;
 }
 
-  .iap-mt_1\.5 {
-    margin-top: var(--iap-spacing-1\.5);
+  .iap-bd-b-c_transparent {
+    border-bottom-color: var(--iap-colors-transparent);
 }
 
-  .placeholderShown\:iap-trunc_true:is(:placeholder-shown, [data-placeholder-shown]) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .iap-bd-l-c_transparent {
+    border-left-color: var(--iap-colors-transparent);
 }
 
-  .current\:iap-bg_slate\.3:is([data-current]) {
-    background: var(--iap-colors-slate-3);
+  .\[\&_svg\]\:iap-c_warning\.11 svg {
+    color: var(--iap-colors-warning-11);
 }
 
   .\[\&\[data-highlighted\]\]\:iap-bg_touchable\.hover[data-highlighted] {
     background: var(--iap-colors-touchable-hover);
 }
 
-  .\[\&_svg\]\:iap-c_warning\.11 svg {
-    color: var(--iap-colors-warning-11);
+  .current\:iap-bg_slate\.3:is([data-current]) {
+    background: var(--iap-colors-slate-3);
 }
 
-  .last\:iap-pb_0:last-child {
-    padding-bottom: var(--iap-spacing-0);
+  .placeholderShown\:iap-trunc_true:is(:placeholder-shown, [data-placeholder-shown]) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+  .\[\&_\>_span\]\:iap-fw_medium > span,.\[\&_label\]\:iap-fw_medium label {
+    font-weight: var(--iap-font-weights-medium);
 }
 
   .\[\&\[data-selected\=\"true\"\]\]\:iap-fw_bold[data-selected="true"] {
     font-weight: var(--iap-font-weights-bold);
 }
 
-  .\[\&_\>_span\]\:iap-fw_medium > span,.\[\&_label\]\:iap-fw_medium label {
-    font-weight: var(--iap-font-weights-medium);
+  .last\:iap-pb_0:last-child {
+    padding-bottom: var(--iap-spacing-0);
 }
 
   .focusVisible\:iap-bg_neutral\.2:is(:focus-visible, [data-focus-visible]) {
@@ -5128,12 +5119,6 @@
     .sm\:iap-offset_8 {
       offset: 8px;
 }
-}
-
-  @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_slate\.3:is(:hover, [data-hover]) {
-      background: var(--iap-colors-slate-3);
-}
 }
 
   @media (hover: hover) and (pointer: fine) {
@@ -5158,5 +5143,11 @@
     .hover\:iap-bg_revert-layer:is(:hover, [data-hover]) {
       background: revert-layer;
 }
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .hover\:iap-bg_slate\.3:is(:hover, [data-hover]) {
+      background: var(--iap-colors-slate-3);
+}
 }
 }