@integration-app/react 2.0.3-beta.3 → 2.0.3

package/dist/styles.css

@@ -159,7 +159,7 @@
     outline: auto;
 }
 
-  [hidden][class^="iap"] {
+  [hidden]:where(:not([hidden='until-found']))[class^="iap"] {
     display: none !important;
 }
 }
@@ -4076,6 +4076,34 @@
 }
 
     .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);
@@ -4087,7 +4115,28 @@
       animation-duration: var(--iap-durations-slowest);
 }
 
-    .iap-spinner,.iap-input {
+    .iap-skeleton {
+      animation: var(--iap-animations-skeleton-pulse);
+      border-radius: var(--iap-radii-l3);
+      color: var(--iap-colors-transparent);
+      cursor: default;
+      pointer-events: none;
+      -webkit-user-select: none;
+      user-select: none;
+      background-clip: padding-box;
+      -webkit-background-clip: padding-box;
+      background-color: var(--iap-colors-gray-a4);
+}
+
+    .iap-skeleton::before,.iap-skeleton::after,.iap-skeleton * {
+      visibility: hidden;
+}
+
+    .iap-input {
+      appearance: none;
+      -webkit-appearance: none;
+      background: none;
+      border-radius: var(--iap-radii-l2);
       --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);
@@ -4116,13 +4165,6 @@
       --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;
@@ -4156,23 +4198,6 @@
       border-color: var(--iap-colors-color-palette-default);
 }
 
-    .iap-skeleton {
-      animation: var(--iap-animations-skeleton-pulse);
-      border-radius: var(--iap-radii-l3);
-      color: var(--iap-colors-transparent);
-      cursor: default;
-      pointer-events: none;
-      -webkit-user-select: none;
-      user-select: none;
-      background-clip: padding-box;
-      -webkit-background-clip: padding-box;
-      background-color: var(--iap-colors-gray-a4);
-}
-
-    .iap-skeleton::before,.iap-skeleton::after,.iap-skeleton * {
-      visibility: hidden;
-}
-
     .iap-textarea {
       appearance: none;
       -webkit-appearance: none;
@@ -4382,8 +4407,7 @@
     height: var(--iap-sizes-5);
 }
 
-  .iap-button--variant_subtle {
-    background: var(--iap-colors-color-palette-a3);
+  .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);
@@ -4463,13 +4487,16 @@
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
 }
 
-  .iap-button--variant_subtle:is(:disabled, [disabled], [data-disabled]) {
-    background: var(--iap-colors-bg-disabled);
+  .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]) {
     color: var(--iap-colors-fg-disabled);
     cursor: not-allowed;
 }
 
-  .iap-button--variant_subtle: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);
@@ -4620,7 +4647,22 @@
     outline-color: var(--iap-colors-color-palette-default);
 }
 
-  .iap-button--variant_ghost {
+  .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--size_sm svg {
+    width: var(--iap-sizes-4);
+    height: var(--iap-sizes-4);
+}
+
+  .iap-button--variant_subtle {
+    background: var(--iap-colors-color-palette-a3);
     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);
@@ -4700,33 +4742,18 @@
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
 }
 
-  .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_subtle:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--iap-colors-bg-disabled);
     color: var(--iap-colors-fg-disabled);
     cursor: not-allowed;
 }
 
-  .iap-button--variant_ghost:is(:focus-visible, [data-focus-visible]) {
+  .iap-button--variant_subtle:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
     outline-offset: 2px;
     outline-color: var(--iap-colors-color-palette-default);
 }
 
-  .iap-button--variant_link {
-    vertical-align: baseline;
-    height: auto !important;
-    padding-inline: var(--iap-spacing-0) !important;
-    min-width: var(--iap-sizes-0) !important;
-}
-
-  .iap-button--variant_link:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--iap-colors-border-disabled);
-    cursor: not-allowed;
-}
-
   .iap-button--size_xs {
     height: var(--iap-sizes-8);
     min-width: var(--iap-sizes-8);
@@ -4742,18 +4769,16 @@
     font-size: var(--iap-font-sizes-md);
 }
 
-  .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_link {
+    vertical-align: baseline;
+    height: auto !important;
+    padding-inline: var(--iap-spacing-0) !important;
+    min-width: var(--iap-sizes-0) !important;
 }
 
-  .iap-button--size_sm svg {
-    width: var(--iap-sizes-4);
-    height: var(--iap-sizes-4);
+  .iap-button--variant_link:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--iap-colors-border-disabled);
+    cursor: not-allowed;
 }
 
   .iap-button--size_lg {
@@ -4993,6 +5018,19 @@
     color: var(--iap-colors-fg-muted);
 }
 
+  .iap-badge--size_sm {
+    font-size: var(--iap-font-sizes-xs);
+    line-height: 1.125rem;
+    padding-inline: var(--iap-spacing-2);
+    height: var(--iap-sizes-5);
+    gap: var(--iap-spacing-1);
+}
+
+  .iap-badge--size_sm svg {
+    width: var(--iap-sizes-3);
+    height: var(--iap-sizes-3);
+}
+
   .iap-badge--size_md {
     font-size: var(--iap-font-sizes-xs);
     line-height: 1.125rem;
@@ -5017,19 +5055,6 @@
     border-color: var(--iap-colors-border-default);
 }
 
-  .iap-badge--size_sm {
-    font-size: var(--iap-font-sizes-xs);
-    line-height: 1.125rem;
-    padding-inline: var(--iap-spacing-2);
-    height: var(--iap-sizes-5);
-    gap: var(--iap-spacing-1);
-}
-
-  .iap-badge--size_sm svg {
-    width: var(--iap-sizes-3);
-    height: var(--iap-sizes-3);
-}
-
   .iap-badge--size_lg {
     font-size: var(--iap-font-sizes-sm);
     line-height: 1.25rem;
@@ -5104,12 +5129,12 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_subtle:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-a4);
+    .iap-button--variant_ghost:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-a3);
 }
 
-    .iap-button--variant_subtle:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      background: var(--iap-colors-bg-disabled);
+    .iap-button--variant_ghost:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+      background: var(--iap-colors-transparent);
       color: var(--iap-colors-fg-disabled);
 }
 }
@@ -5143,12 +5168,12 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_ghost:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-a3);
+    .iap-button--variant_subtle:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-a4);
 }
 
-    .iap-button--variant_ghost:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      background: var(--iap-colors-transparent);
+    .iap-button--variant_subtle:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+      background: var(--iap-colors-bg-disabled);
       color: var(--iap-colors-fg-disabled);
 }
 }
@@ -5469,6 +5494,44 @@
       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 {
+      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-accordion__root > :not([hidden]) ~ :not([hidden]) {
       border-top-width: 1px;
       border-bottom-width: 0px;
@@ -5533,44 +5596,6 @@
       transform: rotate(-180deg);
 }
 
-    .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-card__root {
       background: var(--iap-colors-bg-default);
       border-radius: var(--iap-radii-l3);
@@ -6495,7 +6520,7 @@
     .iap-numberInput__input {
       background: var(--iap-colors-transparent);
       border: var(--iap-borders-none);
-      grid-row: span 2 / span 2;
+      grid-row: 2;
       outline: var(--iap-borders-none);
       width: var(--iap-sizes-full);
 }
@@ -9284,6 +9309,11 @@
       font-size: var(--iap-font-sizes-md);
       line-height: 1.5rem;
 }
+
+    .iap-textStyle_xs {
+      font-size: var(--iap-font-sizes-xs);
+      line-height: 1.125rem;
+}
 }
 
   .iap-op_0 {
@@ -9385,72 +9415,248 @@
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
 }
 
-  .iap-sr_true {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
+  .iap-sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+  .iap-offset_0 {
+    offset: 0;
+}
+
+  .iap-d_inline-block {
+    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-gap_2 {
+    gap: var(--iap-spacing-2);
+}
+
+  .iap-px_1\.5 {
+    padding-inline: var(--iap-spacing-1\.5);
+}
+
+  .iap-py_1 {
+    padding-block: var(--iap-spacing-1);
+}
+
+  .iap-h_6 {
+    height: var(--iap-sizes-6);
+}
+
+  .iap-w_6 {
+    width: var(--iap-sizes-6);
+}
+
+  .iap-min-w_unset {
+    min-width: unset;
+}
+
+  .iap-bdr_md {
+    border-radius: var(--iap-radii-md);
+}
+
+  .iap-c_slate\.11 {
+    color: var(--iap-colors-slate-11);
+}
+
+  .iap-w_4 {
+    width: var(--iap-sizes-4);
+}
+
+  .iap-h_4 {
+    height: var(--iap-sizes-4);
+}
+
+  .iap-d_flex {
+    display: flex;
+}
+
+  .iap-bdr_lg {
+    border-radius: var(--iap-radii-lg);
+}
+
+  .iap-p_1 {
+    padding: var(--iap-spacing-1);
+}
+
+  .iap-bg_gray\.3 {
+    background: var(--iap-colors-gray-3);
+}
+
+  .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_full {
+    max-height: var(--iap-sizes-full);
+}
+
+  .iap-ring_none {
+    outline: var(--iap-borders-none);
+}
+
+  .iap-ov_hidden {
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
 }
 
-  .iap-offset_0 {
-    offset: 0;
+  .iap-bg_white {
+    background: var(--iap-colors-white);
 }
 
-  .iap-d_inline-block {
-    display: inline-block;
+  .iap-bx-sh_xl {
+    box-shadow: var(--iap-shadows-xl);
 }
 
-  .iap-px_1 {
-    padding-inline: var(--iap-spacing-1);
+  .iap-bdr_none {
+    border-radius: var(--iap-radii-none);
 }
 
-  .iap-cursor_help {
-    cursor: help;
+  .iap-bd_none {
+    border: var(--iap-borders-none);
 }
 
-  .iap-bg_neutral\.2 {
-    background: var(--iap-colors-neutral-2);
+  .iap-px_2 {
+    padding-inline: var(--iap-spacing-2);
 }
 
-  .iap-bdr_xs {
-    border-radius: var(--iap-radii-xs);
+  .iap-py_1\.5 {
+    padding-block: var(--iap-spacing-1\.5);
 }
 
-  .iap-c_neutral\.11 {
-    color: var(--iap-colors-neutral-11);
+  .iap-pos_relative {
+    position: relative;
 }
 
-  .iap-ta_center {
-    text-align: center;
+  .iap-min-h_0 {
+    min-height: var(--iap-sizes-0);
 }
 
-  .iap-min-w_5 {
-    min-width: var(--iap-sizes-5);
+  .iap-gap_1\.5 {
+    gap: var(--iap-spacing-1\.5);
 }
 
-  .iap-d_flex {
-    display: flex;
+  .iap-cursor_pointer {
+    cursor: pointer;
 }
 
-  .iap-bg_white {
-    background: var(--iap-colors-white);
+  .iap-min-h_6 {
+    min-height: var(--iap-sizes-6);
 }
 
-  .iap-gap_2 {
-    gap: var(--iap-spacing-2);
+  .iap-c_slate\.10 {
+    color: var(--iap-colors-slate-10);
 }
 
-  .iap-p_3 {
-    padding: var(--iap-spacing-3);
+  .iap-c_tomato\.10 {
+    color: var(--iap-colors-tomato-10);
 }
 
-  .iap-bdr_md {
-    border-radius: var(--iap-radii-md);
+  .iap-h_7 {
+    height: var(--iap-sizes-7);
+}
+
+  .iap-w_7 {
+    width: var(--iap-sizes-7);
+}
+
+  .iap-h_5 {
+    height: var(--iap-sizes-5);
+}
+
+  .iap-w_3\/5 {
+    width: 60%;
+}
+
+  .iap-p_2 {
+    padding: var(--iap-spacing-2);
+}
+
+  .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 {
+    gap: var(--iap-spacing-1);
+}
+
+  .iap-max-w_full {
+    max-width: var(--iap-sizes-full);
+}
+
+  .iap-ov-wrap_break-word {
+    overflow-wrap: break-word;
+}
+
+  .iap-p_3 {
+    padding: var(--iap-spacing-3);
 }
 
   .iap-min-h_28 {
@@ -9465,14 +9671,6 @@
     border-radius: var(--iap-radii-full);
 }
 
-  .iap-h_4 {
-    height: var(--iap-sizes-4);
-}
-
-  .iap-w_3\/5 {
-    width: 60%;
-}
-
   .iap-flex_0_0_auto {
     flex: 0 0 auto;
 }
@@ -9550,22 +9748,19 @@
 }
 
   .iap-trunc_true {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-  .iap-trunc_true,.iap-ov_hidden {
-    overflow: hidden;
-}
-
-  .iap-max-w_full {
-    max-width: var(--iap-sizes-full);
-}
-
   .iap-w_fit-content {
     width: fit-content;
 }
 
+  .iap-px_0 {
+    padding-inline: var(--iap-spacing-0);
+}
+
   .iap-anim_fade-in {
     animation: var(--iap-animations-fade-in);
 }
@@ -9594,10 +9789,6 @@
     padding-inline: var(--iap-spacing-2\.5);
 }
 
-  .iap-w_full {
-    width: var(--iap-sizes-full);
-}
-
   .iap-h_auto {
     height: auto;
 }
@@ -9614,8 +9805,16 @@
     width: var(--iap-sizes-5);
 }
 
-  .iap-h_5 {
-    height: var(--iap-sizes-5);
+  .iap-h_fit-content {
+    height: fit-content;
+}
+
+  .iap-bdr_xl {
+    border-radius: var(--iap-radii-xl);
+}
+
+  .iap-my_2 {
+    margin-block: var(--iap-spacing-2);
 }
 
   .iap-w_49\% {
@@ -9634,10 +9833,6 @@
     color: var(--iap-colors-white);
 }
 
-  .iap-pos_relative {
-    position: relative;
-}
-
   .iap-color-palette_blue {
     --iap-colors-color-palette-light-1: var(--iap-colors-blue-light-1);
     --iap-colors-color-palette-light-2: var(--iap-colors-blue-light-2);
@@ -9729,10 +9924,54 @@
     color: var(--iap-colors-gray-12);
 }
 
+  .iap-gap_4 {
+    gap: var(--iap-spacing-4);
+}
+
+  .iap-gap_2\.5 {
+    gap: var(--iap-spacing-2\.5);
+}
+
+  .iap-ov_scroll {
+    overflow: scroll;
+}
+
   .iap-w_14rem {
     width: 14rem;
 }
 
+  .iap-flex_1 {
+    flex: 1 1 0%;
+}
+
+  .iap-w_min\(30rem\,_70vw\) {
+    width: min(30rem, 70vw);
+}
+
+  .iap-py_0\.5 {
+    padding-block: var(--iap-spacing-0\.5);
+}
+
+  .iap-max-w_md {
+    max-width: var(--iap-sizes-md);
+}
+
+  .iap-bg_gray\.2 {
+    background: var(--iap-colors-gray-2);
+}
+
+  .iap-mx_1\.5 {
+    margin-inline: var(--iap-spacing-1\.5);
+}
+
+  .iap-bg_yellow\.2 {
+    background: var(--iap-colors-yellow-2);
+}
+
+  .iap-c_yellow\.11 {
+    color: var(--iap-colors-yellow-11);
+}
+
   .iap-color-palette_current {
     --iap-colors-color-palette: var(--iap-colors-current);
 }
@@ -14016,10 +14255,70 @@
     line-height: 1.2;
 }
 
+  .iap-fw_medium {
+    font-weight: var(--iap-font-weights-medium);
+}
+
+  .iap-fs_sm {
+    font-size: var(--iap-font-sizes-sm);
+}
+
+  .iap-flex-sh_0 {
+    flex-shrink: 0;
+}
+
+  .iap-flex-g_0 {
+    flex-grow: 0;
+}
+
+  .iap-bd-c_gray\.5 {
+    border-color: var(--iap-colors-gray-5);
+}
+
+  .iap-bd-w_0\.5 {
+    border-width: 0.5px;
+}
+
   .iap-flex-d_column {
     flex-direction: column;
 }
 
+  .iap-bd-c_gray\.2 {
+    border-color: var(--iap-colors-gray-2);
+}
+
+  .iap-pb_1\.5 {
+    padding-bottom: var(--iap-spacing-1\.5);
+}
+
+  .iap-pt_0\.5 {
+    padding-top: var(--iap-spacing-0\.5);
+}
+
+  .iap-ov-y_auto {
+    overflow-y: auto;
+}
+
+  .iap-flex-g_1 {
+    flex-grow: 1;
+}
+
+  .iap-flex-d_row {
+    flex-direction: row;
+}
+
+  .iap-fs_xs {
+    font-size: var(--iap-font-sizes-xs);
+}
+
+  .iap-top_0 {
+    top: var(--iap-spacing-0);
+}
+
+  .iap-ai_baseline {
+    align-items: baseline;
+}
+
   .iap-jc_start {
     justify-content: start;
 }
@@ -14048,22 +14347,6 @@
     font-weight: var(--iap-font-weights-normal);
 }
 
-  .iap-flex-g_1 {
-    flex-grow: 1;
-}
-
-  .iap-flex-sh_0 {
-    flex-shrink: 0;
-}
-
-  .iap-flex-g_0 {
-    flex-grow: 0;
-}
-
-  .iap-flex-d_row {
-    flex-direction: row;
-}
-
   .iap-flex-wrap_nowrap {
     flex-wrap: nowrap;
 }
@@ -14072,10 +14355,6 @@
     align-items: start;
 }
 
-  .iap-fs_xs {
-    font-size: var(--iap-font-sizes-xs);
-}
-
   .iap-fw_bold {
     font-weight: var(--iap-font-weights-bold);
 }
@@ -14096,8 +14375,36 @@
     flex-direction: column-reverse;
 }
 
-  .iap-fs_sm {
-    font-size: var(--iap-font-sizes-sm);
+  .iap-pl_2 {
+    padding-left: var(--iap-spacing-2);
+}
+
+  .iap-ov-x_auto {
+    overflow-x: auto;
+}
+
+  .iap-mt_1 {
+    margin-top: var(--iap-spacing-1);
+}
+
+  .iap-pb_2\.5 {
+    padding-bottom: var(--iap-spacing-2\.5);
+}
+
+  .iap-jc_space-between {
+    justify-content: space-between;
+}
+
+  .iap-flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .iap-bd-c_yellow\.8 {
+    border-color: var(--iap-colors-yellow-8);
+}
+
+  .iap-mt_1\.5 {
+    margin-top: var(--iap-spacing-1\.5);
 }
 
   .iap-pt_3 {
@@ -14112,10 +14419,22 @@
     padding-top: var(--iap-spacing-4);
 }
 
+  .current\:iap-bg_slate\.3:is([data-current]) {
+    background: var(--iap-colors-slate-3);
+}
+
   .\[\&\[data-highlighted\]\]\:iap-bg_touchable\.hover[data-highlighted] {
     background: var(--iap-colors-touchable-hover);
 }
 
+  .\[\&_svg\]\:iap-c_yellow\.11 svg {
+    color: var(--iap-colors-yellow-11);
+}
+
+  .last\:iap-pb_0:last-child {
+    padding-bottom: var(--iap-spacing-0);
+}
+
   .first\:iap-bd-t-w_0:first-child {
     border-top-width: 0;
 }
@@ -14124,6 +14443,10 @@
     font-weight: var(--iap-font-weights-bold);
 }
 
+  .\[\&_\>_span\]\:iap-fw_medium > span,.\[\&_label\]\:iap-fw_medium label {
+    font-weight: var(--iap-font-weights-medium);
+}
+
   .focusVisible\:iap-bg_neutral\.2:is(:focus-visible, [data-focus-visible]) {
     background: var(--iap-colors-neutral-2);
 }
@@ -14141,6 +14464,12 @@
     .hover\:iap-bg_neutral\.3:is(:hover, [data-hover]) {
       background: var(--iap-colors-neutral-3);
 }
+}
+
+  @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) {