@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.4c792ad

package/dist/css/colors.css

@@ -24,24 +24,28 @@
     --special-text-on-multiplayer-green: var(--ramp-white-1000);
     --special-text-on-multiplayer-grey: var(--ramp-white-1000);
 
+    /* Drawer */
+    --color-drawer-backdrop: rgba(0, 0, 0, 0.1);
+
     /* Fullscreen */
     --fullscreen-default-icon: var(--ramp-black-800);
     --fullscreen-default-icon-tertiary: var(--ramp-black-400);
     --fullscreen-special-autofill-highlight: rgba(13, 153, 255, 0.2);
-  }
 
-  /* ——————————————————————————————————————————————
-     Light Theme (default)
-
-     Naming rules (UI3 parity — matches fpl/tokens):
-     - Every semantic color is prefixed with `--color-`.
-     - The `default` category is implicit. `--color-bg-secondary` (not `--color-bg-default-secondary`).
-     - The `default` variant is implicit. `--color-bg` (not `--color-bg-default`); `--color-bg-brand` (not `--color-bg-brand-default`).
-     - `on{X}` is one segment. `--color-text-onbrand`, `--color-icon-ondisabled`.
-     - Palette tokens live in the `--ramp-*` namespace.
-     ————————————————————————————————————————————— */
+    /* Modal */
+    --color-modalbackdrop: rgba(0, 0, 0, 0.5);
+
+    /* ——————————————————————————————————————————————
+       Light Theme (default)
+
+       Naming rules (UI3 parity — matches fpl/tokens):
+       - Every semantic color is prefixed with `--color-`.
+       - The `default` category is implicit. `--color-bg-secondary` (not `--color-bg-default-secondary`).
+       - The `default` variant is implicit. `--color-bg` (not `--color-bg-default`); `--color-bg-brand` (not `--color-bg-brand-default`).
+       - `on{X}` is one segment. `--color-text-onbrand`, `--color-icon-ondisabled`.
+       - Palette tokens live in the `--ramp-*` namespace.
+       ————————————————————————————————————————————— */
 
-  :root {
     /* Background */
     --color-bg-assistive: var(--ramp-pink-500);
     --color-bg-assistive-hover: var(--ramp-pink-600);
@@ -213,6 +217,8 @@
     --color-text-oninverse: var(--ramp-white-800);
     --color-text-oninverse-secondary: var(--ramp-white-600);
 
+    --color-text-ontooltip: var(--ramp-white-800);
+
     --color-text-onselected-strong: var(--ramp-white-1000);
     --color-text-selected: var(--ramp-blue-600);
 
@@ -228,6 +234,7 @@
     --special-bg-transparent: rgba(255, 255, 255, 0.6);
     --special-bg-transparent-secondary-hover: var(--ramp-black-200);
     --special-border-translucent: var(--ramp-black-200);
+    --special-border-translucent-strong: var(--ramp-black-300);
 
     /* Multiplayer */
     --multiplayer-blue: var(--special-multiplayer-blue);
@@ -237,6 +244,55 @@
     --multiplayer-yellow: var(--special-multiplayer-yellow);
     --multiplayer-green: var(--special-multiplayer-green);
     --multiplayer-grey: var(--special-multiplayer-grey);
+
+    /* ——————————————————————————————————————————————
+       Field Tokens
+       ——————————————————————————————————————————————
+       Override these to retheme all "light" themed
+       form fields at once
+       ————————————————————————————————————————————— */
+
+    --field-color-bg: var(--color-bg);
+    --field-color-border: var(--special-border-translucent);
+    --field-color-text: var(--color-text);
+    --field-color-placeholder: var(--color-text-tertiary);
+
+    --field-color-border-hover: var(--special-border-translucent-strong);
+
+    --field-color-border-focus: var(--accessibility-focus-color);
+
+    --field-color-bg-disabled: transparent;
+    --field-color-border-disabled: var(--color-border);
+    --field-color-text-disabled: var(--color-text-disabled);
+
+    --field-color-bg-readonly: var(--color-bg);
+    --field-color-border-readonly: var(--color-border);
+    --field-color-text-readonly: var(--color-text-secondary);
+
+    --field-color-border-error: var(--color-border-danger-strong);
+
+    --field-color-label: var(--color-text);
+    --field-color-label-required: var(--color-text-danger);
+
+    --field-color-description: var(--color-text-secondary);
+
+    --field-color-error-bg: var(--color-bg-danger);
+    --field-color-error-text: var(--color-text-ondanger);
+
+    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border-hover: var(--color-border-selected-strong);
+    --field-color-toggle-bg-checked: var(--color-bg-brand);
+    --field-color-toggle-border-checked: var(--color-border-selected);
+    --field-color-toggle-icon: var(--color-icon-onbrand);
+    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
+    --field-color-toggle-border-disabled: var(--color-border-disabled);
+
+    --field-color-upload-bg: var(--color-bg-secondary);
+    --field-color-upload-border: var(--color-border);
+
+    /* ——————————————————————————————————————————————
+       End Field Tokens
+       ————————————————————————————————————————————— */
   }
 
   /* ——————————————————————————————————————————————
@@ -259,6 +315,9 @@
     --color-bg-component-tertiary: var(--ramp-pale-purple-800);
     --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
 
+    --color-bg-danger: var(--ramp-dark-red-500);
+    --color-bg-danger-hover: var(--ramp-dark-red-600);
+    --color-bg-danger-pressed: var(--ramp-dark-red-700);
     --color-bg-danger-tertiary: var(--ramp-pale-red-800);
     --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
     --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);
@@ -374,5 +433,55 @@
     --special-bg-transparent: rgba(0, 0, 0, 0.6);
     --special-bg-transparent-secondary-hover: var(--ramp-white-200);
     --special-border-translucent: var(--ramp-white-200);
+    --special-border-translucent-strong: var(--ramp-white-300);
+
+    /* ————————————————————————————————————————————————
+       Field Tokens
+       ————————————————————————————————————————————————
+       Override these to retheme all "dark" themed
+       form fields at once
+       ——————————————————————————————————————————————— */
+
+    --field-color-bg: var(--color-bg);
+    --field-color-border: var(--special-border-translucent);
+    --field-color-text: var(--color-text);
+    --field-color-placeholder: var(--color-text-tertiary);
+
+    --field-color-border-hover: var(--special-border-translucent-strong);
+
+    --field-color-border-focus: var(--accessibility-focus-color);
+
+    --field-color-bg-disabled: transparent;
+    --field-color-border-disabled: var(--color-border);
+    --field-color-text-disabled: var(--color-text-disabled);
+
+    --field-color-bg-readonly: var(--color-bg);
+    --field-color-border-readonly: var(--color-border);
+    --field-color-text-readonly: var(--color-text-secondary);
+
+    --field-color-border-error: var(--color-border-danger-strong);
+
+    --field-color-label: var(--color-text);
+    --field-color-label-required: var(--color-text-danger);
+
+    --field-color-description: var(--color-text-secondary);
+
+    --field-color-error-bg: var(--color-bg-danger);
+    --field-color-error-text: var(--color-text-ondanger);
+
+    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border-hover: var(--color-border-selected-strong);
+    --field-color-toggle-bg-checked: var(--color-bg-brand);
+    --field-color-toggle-border-checked: var(--color-border-selected);
+    --field-color-toggle-icon: var(--color-icon-onbrand);
+    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
+    --field-color-toggle-border-disabled: var(--color-border-disabled);
+
+    --field-color-upload-bg: var(--color-bg-secondary);
+    --field-color-upload-border: var(--color-border);
+
+    /* ——————————————————————————————————————————————
+       End Field Tokens
+       ————————————————————————————————————————————— */
   }
 }

package/dist/css/design-tokens.css

@@ -2,20 +2,21 @@
   :root {
     /* Black (opacity-based) */
     --ramp-black-100: rgba(0, 0, 0, 0.05);
-    --ramp-black-200: rgba(0, 0, 0, 0.10);
-    --ramp-black-300: rgba(0, 0, 0, 0.20);
-    --ramp-black-400: rgba(0, 0, 0, 0.30);
-    --ramp-black-500: rgba(0, 0, 0, 0.50);
-    --ramp-black-600: rgba(0, 0, 0, 0.80);
-    --ramp-black-800: rgba(0, 0, 0, 0.90);
+    --ramp-black-200: rgba(0, 0, 0, 0.1);
+    --ramp-black-300: rgba(0, 0, 0, 0.2);
+    --ramp-black-400: rgba(0, 0, 0, 0.3);
+    --ramp-black-500: rgba(0, 0, 0, 0.5);
+    --ramp-black-600: rgba(0, 0, 0, 0.8);
+    --ramp-black-800: rgba(0, 0, 0, 0.9);
 
     /* White (opacity-based) */
     --ramp-white-100: rgba(255, 255, 255, 0.05);
-    --ramp-white-200: rgba(255, 255, 255, 0.10);
-    --ramp-white-400: rgba(255, 255, 255, 0.40);
-    --ramp-white-500: rgba(255, 255, 255, 0.70);
-    --ramp-white-600: rgba(255, 255, 255, 0.80);
-    --ramp-white-800: rgba(255, 255, 255, 0.90);
+    --ramp-white-200: rgba(255, 255, 255, 0.1);
+    --ramp-white-300: rgba(255, 255, 255, 0.2);
+    --ramp-white-400: rgba(255, 255, 255, 0.4);
+    --ramp-white-500: rgba(255, 255, 255, 0.7);
+    --ramp-white-600: rgba(255, 255, 255, 0.8);
+    --ramp-white-800: rgba(255, 255, 255, 0.9);
     --ramp-white-1000: #ffffff;
 
     /* Blue */
@@ -87,6 +88,11 @@
     --ramp-red-900: #771208;
     --ramp-red-1000: #660e0b;
 
+    /* Dark Red */
+    --ramp-dark-red-500: #e03e1a;
+    --ramp-dark-red-600: #c4381c;
+    --ramp-dark-red-700: #963323;
+
     /* Pale Red */
     --ramp-pale-red-600: #a55440;
     --ramp-pale-red-700: #864537;

package/dist/css/elevations.css

@@ -2,6 +2,8 @@
   :root {
     /* Light mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.3);
+
     --elevation-300-tooltip:
       0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.13),
       0 1px 3px 0 rgba(0, 0, 0, 0.1);
@@ -18,6 +20,8 @@
   [data-theme='dark'] {
     /* Dark mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.5);
+
     --elevation-300-tooltip:
       0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 5px 12px 0 rgba(0, 0, 0, 0.35),
       0 0 0.5px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.5);

package/dist/css/forms.css

@@ -1,16 +1,16 @@
 @layer payload-default {
   .form-input {
     width: 100%;
-    min-height: var(--spacer-5);
-    background: var(--color-bg-secondary);
-    border: 1px solid transparent;
-    border-radius: var(--radius-medium);
-    color: var(--color-text);
+    min-height: var(--field-min-height);
+    background: var(--field-color-bg);
+    border: var(--stroke-width-small) solid var(--field-color-border);
+    border-radius: var(--field-border-radius);
+    color: var(--field-color-text);
     font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
-    padding: 0 var(--spacer-2);
+    padding: 0 var(--field-padding-inline);
     appearance: none;
     -webkit-appearance: none;
     transition-property: box-shadow, background-color;
@@ -23,18 +23,22 @@
     }
 
     &::placeholder {
-      color: var(--color-text-tertiary);
+      color: var(--field-color-placeholder);
       font-weight: var(--text-body-medium-font-weight);
       font-size: var(--text-body-medium-font-size);
     }
 
-    &:where(:hover:not(:focus):not(:disabled)) {
-      border-color: var(--color-border);
+    &:where(:hover:not(:focus):not(:disabled):not(:read-only)) {
+      border-color: var(--field-color-border-hover);
     }
 
     &:focus {
-      border-color: var(--color-border-selected);
-      border-radius: var(--radius-medium);
+      border-color: var(--field-color-border-focus);
+      border-radius: var(--field-border-radius);
+    }
+
+    &:read-only:focus {
+      border-color: var(--field-color-border-hover);
     }
 
     &:focus-visible {
@@ -42,49 +46,52 @@
     }
 
     &:disabled {
-      color: var(--color-text-disabled);
-      border-color: var(--color-border);
-      background: none;
+      color: var(--field-color-text-disabled);
+      border-color: var(--field-color-border-disabled);
+      background: var(--field-color-bg-disabled);
     }
   }
 
   .form-input-error {
-    border-color: var(--color-border-danger-strong);
+    border-color: var(--field-color-border-error);
 
     &:focus {
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
   }
 
   .form-input-group {
     display: flex;
+    width: 100%;
+    min-width: 0;
     position: relative;
     align-items: stretch;
-    background: var(--color-bg-secondary);
-    border: 1px solid transparent;
-    border-radius: var(--radius-medium);
-    min-height: var(--spacer-5);
+    background: var(--field-color-bg);
+    border: var(--stroke-width-small) solid var(--field-color-border);
+    border-radius: var(--field-border-radius);
+    min-height: var(--field-min-height);
     transition-property: box-shadow, background-color;
     transition-duration: 100ms;
     transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-    &:where(:hover:not(:focus-within):not(:has(input:disabled))) {
-      border-color: var(--color-border);
+    &:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
+      border-color: var(--field-color-border-hover);
     }
 
     &:focus-within {
       outline: none;
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
 
     &:has(input:disabled) {
-      background: transparent;
-      border-color: var(--color-border-disabled);
-      color: var(--color-text-disabled);
+      background: var(--field-color-bg-disabled);
+      border-color: var(--field-color-border-disabled);
+      color: var(--field-color-text-disabled);
     }
 
     input.form-input {
-      flex: 1;
+      flex: 1 1 0%;
+      width: 0;
       min-width: 0;
       background: transparent;
       border: none;
@@ -99,10 +106,10 @@
   }
 
   .form-input-group-error {
-    border-color: var(--color-border-danger-strong);
+    border-color: var(--field-color-border-error);
 
     &:focus-within {
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
   }
 }

package/dist/css/radius.css

@@ -2,11 +2,9 @@
   :root {
     --radius-none: 0;
     --radius-small: 0.125rem;
+    --radius-chip: 0.1875rem;
     --radius-medium: 0.3125rem;
     --radius-large: 0.8125rem;
     --radius-full: 9999px;
-
-    --stroke-width-small: 1px;
-    --stroke-width-medium: 2px;
   }
 }

package/dist/css/spacing.css

@@ -8,5 +8,28 @@
     --spacer-4: 1.5rem; /** 24px */
     --spacer-5: 2rem; /** 32px */
     --spacer-6: 2.5rem; /** 40px */
+
+    /* Layout spacing */
+    --gutter-h: var(--spacer-5);
+    --spacing-field: var(--spacer-3);
+    --spacing-view-bottom: var(--gutter-h);
+
+    /* Breakpoints */
+    --breakpoint-m-width: 1024px;
+    --breakpoint-s-width: 768px;
+  }
+
+  @media (max-width: 1024px) {
+    :root {
+      --gutter-h: var(--spacer-4);
+    }
+  }
+
+  @media (max-width: 768px) {
+    :root {
+      --gutter-h: var(--spacer-3);
+      --spacing-field: var(--spacer-2-5);
+      --spacing-view-bottom: var(--spacer-6);
+    }
   }
 }

package/dist/css/theme.css

@@ -0,0 +1,32 @@
+/**
+ * Component-level theme tokens.
+ *
+ * Override any of these in your own :root block to restyle
+ * all matching components at once — no !important needed.
+ * User overrides win automatically since plain :root rules
+ * beat @layer rules without needing !important.
+ */
+
+@layer payload-default {
+  :root {
+    /* Fields — controls text inputs, selects, date pickers, code editors, etc. */
+    --field-min-height: var(--spacer-5);
+    --field-padding-inline: var(--spacer-2);
+    --field-border-radius: var(--radius-medium);
+
+    /* Buttons — also drives button-like elements (tabs, icon buttons, etc.) */
+    --button-height: var(--spacer-4);
+    --button-radius: var(--radius-medium);
+
+    /* Compact controls — search inputs, paginator inputs, toolbar inputs */
+    --control-height: var(--spacer-4);
+
+    /* Popup menus */
+    --popup-radius: var(--radius-large);
+    --popup-item-radius: var(--button-radius);
+
+    /* Stroke widths */
+    --stroke-width-small: 1px;
+    --stroke-width-medium: 2px;
+  }
+}

package/dist/css/typography.css

@@ -9,13 +9,13 @@
     --text-body-small-font-size: 0.5625rem; /* 9px */
     --text-body-small-font-weight: 450;
     --text-body-small-line-height: 0.875rem; /* 14px */
-    --text-body-small-letter-spacing: 0.5px;
+    --text-body-small-letter-spacing: 0.045px; /* 0.5% */
 
     --text-body-small-strong-font-family: var(--font-family-sans);
     --text-body-small-strong-font-size: 0.5625rem; /* 9px */
     --text-body-small-strong-font-weight: 550;
     --text-body-small-strong-line-height: 0.875rem; /* 14px */
-    --text-body-small-strong-letter-spacing: 0.5px;
+    --text-body-small-strong-letter-spacing: 0.045px; /* 0.5% */
 
     /* Body — Medium */
     --text-body-medium-font-family: var(--font-family-sans);
@@ -28,7 +28,7 @@
     --text-body-medium-strong-font-size: 0.6875rem; /* 11px */
     --text-body-medium-strong-font-weight: 550;
     --text-body-medium-strong-line-height: 1rem; /* 16px */
-    --text-body-medium-strong-letter-spacing: 0.5px;
+    --text-body-medium-strong-letter-spacing: 0.055px;
 
     /* Body — Large */
     --text-body-large-font-family: var(--font-family-sans);
@@ -55,13 +55,13 @@
     --text-heading-medium-font-size: 0.9375rem; /* 15px */
     --text-heading-medium-font-weight: 550;
     --text-heading-medium-line-height: 1.5625rem;
-    --text-heading-medium-letter-spacing: -0.5px;
+    --text-heading-medium-letter-spacing: -0.075px;
 
     /* Heading — Large */
     --text-heading-large-font-family: var(--font-family-sans);
     --text-heading-large-font-size: 1.5rem; /* 24px */
     --text-heading-large-font-weight: 550;
     --text-heading-large-line-height: 2rem; /* 32px */
-    --text-heading-large-letter-spacing: -1.7px;
+    --text-heading-large-letter-spacing: -0.408px;
   }
 }

package/dist/css/utilities.css

@@ -1,6 +1,7 @@
 @layer payload-default {
   :root {
-    --accessibility-outline: 1px solid var(--color-border-selected-strong);
+    --accessibility-focus-color: var(--color-border-selected);
+    --accessibility-outline: 1px solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
   }
 
@@ -16,4 +17,16 @@
     white-space: nowrap;
     border-width: 0;
   }
+
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+
+  /* Global focus ring */
+  :focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--button-radius);
+  }
 }

package/dist/elements/APIKeyInput/index.css

@@ -0,0 +1,92 @@
+@layer payload-default {
+  .api-key-input {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    width: 100%;
+  }
+
+  .api-key-input__control {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: var(--spacer-2);
+    min-width: 0;
+    min-height: var(--spacer-5);
+    padding: 0 var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+  }
+
+  .api-key-input__icon {
+    flex-shrink: 0;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    color: var(--color-icon-secondary);
+  }
+
+  .api-key-input__field {
+    flex-grow: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: var(--color-text);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-body-large-font-size);
+    line-height: var(--text-body-large-line-height);
+  }
+
+  .api-key-input__field:focus,
+  .api-key-input__field:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .api-key-input__field[type='password'] {
+    font-family: var(--font-family-sans);
+    font-size: var(--text-body-large-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    letter-spacing: 0.025rem;
+  }
+
+  .api-key-input__toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-icon-secondary);
+  }
+
+  .api-key-input__toggle:hover {
+    color: var(--color-icon);
+  }
+
+  .api-key-input .copy-to-clipboard {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-5);
+    min-height: var(--spacer-5);
+    padding: 0;
+    color: var(--color-icon-secondary);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+  }
+
+  .api-key-input .copy-to-clipboard:hover {
+    color: var(--color-icon);
+    background: var(--color-bg-hover);
+  }
+}

package/dist/elements/APIKeyInput/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.css';
+export type APIKeyInputProps = {
+    readonly 'aria-label'?: string;
+    readonly highlighted?: boolean;
+    readonly id?: string;
+    readonly value: null | string | undefined;
+};
+/**
+ * Read-only masked API key field: key icon, value, show/hide toggle, and copy
+ * control. Shared by the core auth API-key field and the MCP API-keys collection.
+ */
+export declare const APIKeyInput: React.FC<APIKeyInputProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/APIKeyInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAA"}