@payloadcms/ui 4.0.0-internal.77191e5 → 4.0.0-internal.7b53b6d

package/dist/css/app.css

@@ -4,7 +4,7 @@
 
 @layer payload-default {
   :root {
-    --font-body: var(--font-family-sans), sans-serif;
+    --font-body: var(--font-family-sans, var(--text-body-family)), sans-serif;
     --font-mono: var(--font-family-mono), 'SF Mono', Menlo, Consolas, Monaco, monospace;
 
     --app-header-height: 0px;
@@ -49,8 +49,8 @@
     letter-spacing: var(--text-letter-spacing);
     color: var(--color-text);
     margin: 0;
-    /* this is for the nav to be able to push the document over */
-    overflow-x: hidden;
+    /* Clip the shifted navigation without making body a vertical scroll container. */
+    overflow-x: clip;
   }
 
   /* Lock background scroll while a drawer is open. Backs up faceless-ui's JS

package/dist/css/colors.css

@@ -5,7 +5,6 @@
 
   :root {
     /* Special */
-    --color-icon-favorite: var(--ramp-yellow-500);
     --special-bg-hover-on-light-canvas: var(--ramp-black-300);
     --special-text-highlight: var(--color-blue-300);
 
@@ -133,7 +132,10 @@
     --color-border-danger-strong: var(--ramp-red-600);
 
     --color-border: var(--ramp-grey-200);
+    --color-border-menu-separator: var(--ramp-white-200);
     --color-border-strong: var(--ramp-grey-800);
+    --color-border-control: var(--special-border-translucent);
+    --color-border-control-strong: var(--special-border-translucent-strong);
 
     --color-border-disabled: var(--ramp-grey-200);
 
@@ -185,6 +187,8 @@
     --color-icon-onsuccess-secondary: var(--ramp-white-600);
     --color-icon-success: var(--ramp-green-600);
 
+    --color-icon-favorite: var(--ramp-yellow-500);
+
     --color-icon-warning: var(--ramp-yellow-1000);
     --color-icon-warning-pressed: var(--ramp-yellow-1000);
 
@@ -256,8 +260,8 @@
        form fields at once
        ————————————————————————————————————————————— */
 
-    --field-color-bg: var(--color-bg-secondary);
-    --field-color-border: transparent;
+    --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);
 
@@ -276,14 +280,14 @@
     --field-color-border-error: var(--color-border-danger-strong);
 
     --field-color-label: var(--color-text);
-    --field-color-label-required: var(--color-text-secondary);
+    --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-icon);
+    --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);
@@ -367,6 +371,8 @@
 
     --color-border: var(--ramp-grey-600);
     --color-border-strong: var(--ramp-white-800);
+    --color-border-control: var(--special-border-translucent);
+    --color-border-control-strong: var(--special-border-translucent-strong);
 
     --color-border-disabled: var(--ramp-grey-600);
 
@@ -446,8 +452,8 @@
        form fields at once
        ——————————————————————————————————————————————— */
 
-    --field-color-bg: var(--color-bg-secondary);
-    --field-color-border: transparent;
+    --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);
 
@@ -466,14 +472,14 @@
     --field-color-border-error: var(--color-border-danger-strong);
 
     --field-color-label: var(--color-text);
-    --field-color-label-required: var(--color-text-secondary);
+    --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-icon);
+    --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);
@@ -488,4 +494,62 @@
        End Field Tokens
        ————————————————————————————————————————————— */
   }
+  /* Reapply the contrast palette at theme boundaries, including portaled menus.
+     Component-specific mappings live with their component styles. */
+  html[data-enhanced-contrast],
+  html[data-enhanced-contrast] [data-theme] {
+    --color-border: var(--color-border-control);
+    --color-border-control-strong: var(--color-border-control);
+    --color-border-menu-separator: var(--ramp-white-500);
+  }
+
+  html[data-enhanced-contrast],
+  html[data-enhanced-contrast] [data-theme='light'] {
+    --color-bg-brand: var(--ramp-blue-700);
+    --color-bg-brand-hover: var(--ramp-blue-800);
+    --color-bg-brand-pressed: var(--ramp-blue-900);
+    --color-bg-selected-strong: var(--color-bg-brand);
+    --color-bg-selected-strong-hover: var(--color-bg-brand-hover);
+    --color-bg-danger: var(--ramp-red-600);
+    --color-bg-danger-hover: var(--ramp-red-700);
+    --color-bg-danger-pressed: var(--ramp-red-800);
+    --field-color-border: var(--color-border-control);
+    --field-color-border-hover: var(--color-border-control);
+    --color-border-control: var(--ramp-black-500);
+    --color-border-selected: var(--ramp-blue-700);
+    --color-icon-favorite: var(--ramp-yellow-1000);
+    --color-icon-tertiary: var(--ramp-black-500);
+    --color-text-brand: var(--ramp-blue-700);
+    --color-text-danger: var(--ramp-red-700);
+    --color-text-disabled: var(--ramp-grey-600);
+    --color-text-ondisabled: var(--ramp-grey-600);
+    --color-text-secondary: var(--ramp-black-600);
+    --color-text-selected: var(--ramp-blue-800);
+    --color-text-tertiary: var(--ramp-grey-600);
+  }
+
+  html[data-enhanced-contrast][data-theme='dark'],
+  html[data-enhanced-contrast] [data-theme='dark'] {
+    --color-bg-brand: var(--ramp-blue-700);
+    --color-bg-brand-hover: var(--ramp-blue-800);
+    --color-bg-brand-pressed: var(--ramp-blue-900);
+    --color-bg-selected-strong: var(--color-bg-brand);
+    --color-bg-selected-strong-hover: var(--color-bg-brand-hover);
+    --color-bg-danger: var(--ramp-dark-red-600);
+    --color-bg-danger-hover: var(--ramp-dark-red-700);
+    --color-bg-danger-pressed: var(--ramp-red-800);
+    --field-color-border: var(--color-border-control);
+    --field-color-border-hover: var(--color-border-control);
+    --color-border-control: var(--ramp-white-500);
+    --color-border-selected: var(--ramp-blue-400);
+    --color-icon-favorite: var(--ramp-yellow-500);
+    --color-icon-tertiary: var(--ramp-white-400);
+    --color-text-brand: var(--ramp-blue-400);
+    --color-text-danger: var(--ramp-red-400);
+    --color-text-disabled: var(--ramp-white-500);
+    --color-text-ondisabled: var(--ramp-white-1000);
+    --color-text-secondary: var(--ramp-white-500);
+    --color-text-selected: var(--ramp-blue-200);
+    --color-text-tertiary: var(--ramp-white-500);
+  }
 }

package/dist/css/forms.css

@@ -6,11 +6,9 @@
     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);
-    letter-spacing: var(--text-body-medium-letter-spacing);
     padding: 0 var(--field-padding-inline);
     appearance: none;
     -webkit-appearance: none;

package/dist/css/preflight.css

@@ -59,7 +59,16 @@ SOFTWARE.
     line-height: 1.5; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
     tab-size: 4; /* 3 */
-    font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); /* 4 */
+    font-family: var(
+      --font-family-sans,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    ); /* 4 */
     font-feature-settings: normal; /* 5 */
     font-variation-settings: normal; /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
@@ -130,7 +139,17 @@ SOFTWARE.
   kbd,
   samp,
   pre {
-    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); /* 1 */
+    font-family: var(
+      --font-family-mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace
+    ); /* 1 */
     font-feature-settings: normal; /* 2 */
     font-variation-settings: normal; /* 3 */
     font-size: 1em; /* 4 */

package/dist/css/spacing.css

@@ -11,9 +11,8 @@
     --spacer-6: 2.5rem; /** 40px */
 
     /* Layout spacing */
-    --edit-view-max-width: 800px;
     --gutter-h: var(--spacer-5);
-    --spacing-field: var(--spacer-3);
+    --spacing-field: var(--spacer-4);
     --spacing-view-bottom: var(--gutter-h);
 
     /* Breakpoints */
@@ -23,14 +22,6 @@
     --breakpoint-l-width: 1440px;
   }
 
-  :root[data-edit-view-width='640'] {
-    --edit-view-max-width: 640px;
-  }
-
-  :root[data-edit-view-width='960'] {
-    --edit-view-max-width: 960px;
-  }
-
   /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     :root {

package/dist/css/typography.css

@@ -1,76 +1,173 @@
 @layer payload-default {
   :root {
-    --text-size-offset: 1px;
-    --font-family-sans: 'Inter';
-    --font-family-mono: 'Roboto Mono';
-    --text-letter-spacing: 0.005em; /* 0.5% */
-
-    /* Body — Small */
-    --text-body-small-font-family: var(--font-family-sans);
-    --text-body-small-font-size: calc(0.5625rem + var(--text-size-offset)); /* 9px base */
+    --text-body-family: 'Inter';
+    --text-heading-family: 'Inter';
+    --text-mono-family: 'Roboto Mono';
+
+    /* Body */
+    --text-body-small-font-size: 0.625rem; /* 10px */
     --text-body-small-font-weight: 450;
     --text-body-small-line-height: 0.875rem; /* 14px */
-    --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: calc(0.5625rem + var(--text-size-offset)); /* 9px base */
-    --text-body-small-strong-font-weight: 550;
-    --text-body-small-strong-line-height: 0.875rem; /* 14px */
-    --text-body-small-strong-letter-spacing: 0.045px; /* 0.5% */
+    --text-body-small-letter-spacing: 0px;
 
-    /* Body — Medium */
-    --text-body-medium-font-family: var(--font-family-sans);
-    --text-body-medium-font-size: calc(0.6875rem + var(--text-size-offset)); /* 11px base */
+    --text-body-medium-font-size: 0.75rem; /* 12px */
     --text-body-medium-font-weight: 450;
     --text-body-medium-line-height: 1rem; /* 16px */
-    --text-body-medium-letter-spacing: 0.055px;
+    --text-body-medium-letter-spacing: -0.001px;
 
-    --text-body-medium-strong-font-family: var(--font-family-sans);
-    --text-body-medium-strong-font-size: calc(0.6875rem + var(--text-size-offset)); /* 11px base */
-    --text-body-medium-strong-font-weight: 550;
-    --text-body-medium-strong-line-height: 1rem; /* 16px */
-    --text-body-medium-strong-letter-spacing: 0.055px;
-
-    /* Body — Large */
-    --text-body-large-font-family: var(--font-family-sans);
-    --text-body-large-font-size: calc(0.8125rem + var(--text-size-offset)); /* 13px base */
+    --text-body-large-font-size: 0.875rem; /* 14px */
     --text-body-large-font-weight: 450;
-    --text-body-large-line-height: 1.375rem; /* 22px */
-    --text-body-large-letter-spacing: -0.25px;
-
-    --text-body-large-strong-font-family: var(--font-family-sans);
-    --text-body-large-strong-font-size: calc(0.8125rem + var(--text-size-offset)); /* 13px base */
-    --text-body-large-strong-font-weight: 550;
-    --text-body-large-strong-line-height: 1.375rem; /* 22px */
-    --text-body-large-strong-letter-spacing: -0.25px;
-
-    /* Heading — Small */
-    --text-heading-small-font-family: var(--font-family-sans);
-    --text-heading-small-font-size: calc(0.8125rem + var(--text-size-offset)); /* 13px base */
-    --text-heading-small-font-weight: 550;
-    --text-heading-small-line-height: 1.375rem;
-    --text-heading-small-letter-spacing: -0.25px;
-
-    /* Heading — Medium */
-    --text-heading-medium-font-family: var(--font-family-sans);
-    --text-heading-medium-font-size: calc(0.9375rem + var(--text-size-offset)); /* 15px base */
-    --text-heading-medium-font-weight: 550;
-    --text-heading-medium-line-height: 1.5625rem;
-    --text-heading-medium-letter-spacing: -0.075px;
-
-    /* Heading — Large */
-    --text-heading-large-font-family: var(--font-family-sans);
-    --text-heading-large-font-size: calc(1.5rem + var(--text-size-offset)); /* 24px base */
-    --text-heading-large-font-weight: 550;
-    --text-heading-large-line-height: 2rem; /* 32px */
-    --text-heading-large-letter-spacing: -0.408px;
-  }
+    --text-body-large-line-height: 1.25rem; /* 20px */
+    --text-body-large-letter-spacing: -0.005px;
 
-  :root[data-type-size='small'] {
-    --text-size-offset: 0px;
-  }
+    --text-body-xl-font-size: 1rem; /* 16px */
+    --text-body-xl-font-weight: 450;
+    --text-body-xl-line-height: 1.375rem; /* 22px */
+    --text-body-xl-letter-spacing: -0.015px;
+
+    --text-body-2xl-font-size: 1.375rem; /* 22px */
+    --text-body-2xl-font-weight: 450;
+    --text-body-2xl-line-height: 1.75rem; /* 28px */
+    --text-body-2xl-letter-spacing: -0.176px;
+
+    /* Body — Bold */
+    --text-body-small-bold-font-size: 0.625rem; /* 10px */
+    --text-body-small-bold-font-weight: 550;
+    --text-body-small-bold-line-height: 0.875rem; /* 14px */
+    --text-body-small-bold-letter-spacing: 0px;
+
+    --text-body-medium-bold-font-size: 0.75rem; /* 12px */
+    --text-body-medium-bold-font-weight: 550;
+    --text-body-medium-bold-line-height: 1rem; /* 16px */
+    --text-body-medium-bold-letter-spacing: -0.001px;
+
+    --text-body-large-bold-font-size: 0.875rem; /* 14px */
+    --text-body-large-bold-font-weight: 550;
+    --text-body-large-bold-line-height: 1.25rem; /* 20px */
+    --text-body-large-bold-letter-spacing: -0.005px;
+
+    --text-body-xl-bold-font-size: 1rem; /* 16px */
+    --text-body-xl-bold-font-weight: 550;
+    --text-body-xl-bold-line-height: 1.375rem; /* 22px */
+    --text-body-xl-bold-letter-spacing: -0.015px;
+
+    --text-body-2xl-bold-font-size: 1.375rem; /* 22px */
+    --text-body-2xl-bold-font-weight: 550;
+    --text-body-2xl-bold-line-height: 1.75rem; /* 28px */
+    --text-body-2xl-bold-letter-spacing: -0.176px;
+
+    /* Body — Paragraph */
+    --text-body-small-paragraph-font-size: 0.625rem; /* 10px */
+    --text-body-small-paragraph-font-weight: 450;
+    --text-body-small-paragraph-line-height: 1rem; /* 16px */
+    --text-body-small-paragraph-letter-spacing: 0px;
+
+    --text-body-medium-paragraph-font-size: 0.75rem; /* 12px */
+    --text-body-medium-paragraph-font-weight: 450;
+    --text-body-medium-paragraph-line-height: 1.125rem; /* 18px */
+    --text-body-medium-paragraph-letter-spacing: 0px;
+
+    --text-body-large-paragraph-font-size: 0.875rem; /* 14px */
+    --text-body-large-paragraph-font-weight: 450;
+    --text-body-large-paragraph-line-height: 1.375rem; /* 22px */
+    --text-body-large-paragraph-letter-spacing: 0px;
+
+    --text-body-xl-paragraph-font-size: 1rem; /* 16px */
+    --text-body-xl-paragraph-font-weight: 450;
+    --text-body-xl-paragraph-line-height: 1.5rem; /* 24px */
+    --text-body-xl-paragraph-letter-spacing: 0px;
+
+    --text-body-2xl-paragraph-font-size: 1.375rem; /* 22px */
+    --text-body-2xl-paragraph-font-weight: 450;
+    --text-body-2xl-paragraph-line-height: 2.125rem; /* 34px */
+    --text-body-2xl-paragraph-letter-spacing: 0px;
+
+    /* Heading */
+    --text-heading-small-font-size: 0.875rem; /* 14px */
+    --text-heading-small-font-weight: 600;
+    --text-heading-small-line-height: 1.25rem; /* 20px */
+    --text-heading-small-letter-spacing: 0px;
+
+    --text-heading-medium-font-size: 1rem; /* 16px */
+    --text-heading-medium-font-weight: 600;
+    --text-heading-medium-line-height: 1.375rem; /* 22px */
+    --text-heading-medium-letter-spacing: -0.011px;
+
+    --text-heading-large-font-size: 1.25rem; /* 20px */
+    --text-heading-large-font-weight: 600;
+    --text-heading-large-line-height: 1.6875rem; /* 27px */
+    --text-heading-large-letter-spacing: -0.042px;
+
+    --text-heading-xl-font-size: 1.5rem; /* 24px */
+    --text-heading-xl-font-weight: 600;
+    --text-heading-xl-line-height: 1.9375rem; /* 31px */
+    --text-heading-xl-letter-spacing: -0.085px;
+
+    --text-heading-2xl-font-size: 2rem; /* 32px */
+    --text-heading-2xl-font-weight: 600;
+    --text-heading-2xl-line-height: 2.5rem; /* 40px */
+    --text-heading-2xl-letter-spacing: -0.203px;
+
+    --text-heading-3xl-font-size: 2.5rem; /* 40px */
+    --text-heading-3xl-font-weight: 600;
+    --text-heading-3xl-line-height: 2.9375rem; /* 47px */
+    --text-heading-3xl-letter-spacing: -0.367px;
+
+    --text-heading-4xl-font-size: 3rem; /* 48px */
+    --text-heading-4xl-font-weight: 600;
+    --text-heading-4xl-line-height: 3.3125rem; /* 53px */
+    --text-heading-4xl-letter-spacing: -0.576px;
+
+    /* Mono */
+    --text-mono-small-font-size: 0.6875rem; /* 11px */
+    --text-mono-small-weight: 400;
+    --text-mono-small-line-height: 1.125rem; /* 18px */
+    --text-mono-small-letter-spacing: 0.055px;
+
+    --text-mono-medium-font-size: 0.8125rem; /* 13px */
+    --text-mono-medium-weight: 400;
+    --text-mono-medium-line-height: 1.375rem; /* 22px */
+    --text-mono-medium-letter-spacing: 0.065px;
+
+    --text-mono-large-font-size: 0.9375rem; /* 15px */
+    --text-mono-large-weight: 400;
+    --text-mono-large-line-height: 1.5rem; /* 24px */
+    --text-mono-large-letter-spacing: 0.075px;
+
+    --text-mono-xl-font-size: 1.0625rem; /* 17px */
+    --text-mono-xl-weight: 400;
+    --text-mono-xl-line-height: 1.75rem; /* 28px */
+    --text-mono-xl-letter-spacing: 0.085px;
+
+    /* Legacy names default to the new tokens and remain independently overridable. */
+    --font-family-sans: var(--text-body-family);
+    --font-family-mono: var(--text-mono-family);
+    --text-letter-spacing: var(--text-body-medium-letter-spacing);
+
+    --text-body-small-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-medium-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-large-font-family: var(--font-family-sans, var(--text-body-family));
+
+    --text-body-small-strong-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-small-strong-font-size: var(--text-body-small-bold-font-size);
+    --text-body-small-strong-font-weight: var(--text-body-small-bold-font-weight);
+    --text-body-small-strong-line-height: var(--text-body-small-bold-line-height);
+    --text-body-small-strong-letter-spacing: var(--text-body-small-bold-letter-spacing);
+
+    --text-body-medium-strong-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-medium-strong-font-size: var(--text-body-medium-bold-font-size);
+    --text-body-medium-strong-font-weight: var(--text-body-medium-bold-font-weight);
+    --text-body-medium-strong-line-height: var(--text-body-medium-bold-line-height);
+    --text-body-medium-strong-letter-spacing: var(--text-body-medium-bold-letter-spacing);
+
+    --text-body-large-strong-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-large-strong-font-size: var(--text-body-large-bold-font-size);
+    --text-body-large-strong-font-weight: var(--text-body-large-bold-font-weight);
+    --text-body-large-strong-line-height: var(--text-body-large-bold-line-height);
+    --text-body-large-strong-letter-spacing: var(--text-body-large-bold-letter-spacing);
 
-  :root[data-type-size='large'] {
-    --text-size-offset: 2px;
+    --text-heading-small-font-family: var(--text-heading-family);
+    --text-heading-medium-font-family: var(--text-heading-family);
+    --text-heading-large-font-family: var(--text-heading-family);
   }
 }

package/dist/css/utilities.css

@@ -3,6 +3,7 @@
     --accessibility-focus-color: var(--color-border-selected);
     --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
+    --accessibility-outline-inset: calc(-1 * var(--stroke-width-small));
     --scrollbar-color: var(--color-bg-secondary-pressed);
   }
 

package/dist/elements/APIKeyInput/index.css

@@ -46,9 +46,9 @@
   }
 
   .api-key-input__field[type='password'] {
-    font-family: var(--font-family-sans);
+    font-family: inherit;
     font-size: var(--text-body-medium-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     letter-spacing: 0.025rem;
   }
 

package/dist/elements/APIKeyInput/index.js

@@ -27,22 +27,21 @@ export const APIKeyInput = t0 => {
   const revealOnMount = t3 === undefined ? false : t3;
   const [showKey, setShowKey] = useState(revealOnMount);
   const keyValue = value ?? "";
-  const t4 = highlighted && "highlight";
-  let t5;
-  if ($[0] !== t4) {
-    t5 = [`${baseClass}__control`, t4].filter(Boolean);
-    $[0] = t4;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const t6 = t5.join(" ");
-  let t7;
-  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== masked || $[6] !== showKey || $[7] !== t6) {
-    t7 = _jsxs("div", {
+  let t4;
+  if ($[0] !== ariaLabel || $[1] !== highlighted || $[2] !== id || $[3] !== keyValue || $[4] !== masked || $[5] !== showKey) {
+    const t5 = highlighted && "highlight";
+    let t6;
+    if ($[7] !== t5) {
+      t6 = [`${baseClass}__control`, t5].filter(Boolean);
+      $[7] = t5;
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    t4 = _jsxs("div", {
       className: baseClass,
       children: [_jsxs("div", {
-        className: t6,
+        className: t6.join(" "),
         children: [_jsx(KeyIcon, {
           className: `${baseClass}__icon`
         }), _jsx("input", {
@@ -66,17 +65,17 @@ export const APIKeyInput = t0 => {
         value: keyValue
       })]
     });
-    $[2] = ariaLabel;
-    $[3] = id;
-    $[4] = keyValue;
-    $[5] = masked;
-    $[6] = showKey;
-    $[7] = t6;
-    $[8] = t7;
+    $[0] = ariaLabel;
+    $[1] = highlighted;
+    $[2] = id;
+    $[3] = keyValue;
+    $[4] = masked;
+    $[5] = showKey;
+    $[6] = t4;
   } else {
-    t7 = $[8];
+    t4 = $[6];
   }
-  return t7;
+  return t4;
 };
 function _temp(prev) {
   return !prev;

package/dist/elements/APIKeyInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","masked","t2","revealOnMount","t3","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t4","t5","filter","Boolean","t6","join","t7","_jsxs","className","children","_jsx","readOnly","type","onClick","_temp","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly masked?: boolean\n  readonly revealOnMount?: boolean\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  masked = false,\n  revealOnMount = false,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(revealOnMount)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={masked || showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        {!masked && (\n          <button\n            aria-label={showKey ? 'Hide API key' : 'Show API key'}\n            className={`${baseClass}__toggle`}\n            onClick={() => setShowKey((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showKey} size={24} />\n          </button>\n        )}\n      </div>\n      {!masked && <CopyToClipboard value={keyValue} />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC,MAAA,EAAAC,EAAA;IAAAC,aAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAT,EAOvD;EALe,MAAAU,SAAA,GAAAP,EAAqB,KAAAQ,SAAA,GAAT,SAAS,GAArBR,EAAqB;EAEnC,MAAAE,MAAA,GAAAC,EAAc,KAAAK,SAAA,WAAdL,EAAc;EACd,MAAAC,aAAA,GAAAC,EAAqB,KAAAG,SAAA,WAArBH,EAAqB;EAGrB,OAAAI,OAAA,EAAAC,UAAA,IAA8BnB,QAAA,CAASa,aAAA;EACvC,MAAAO,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAX,WAAA,IAAe;EAAA,IAAAY,EAAA;EAAA,IAAAf,CAAA,QAAAc,EAAA;IAAzCC,EAAA,IAAC,GAAAlB,SAAA,WAAuB,EAAEiB,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAjB,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAA7D,MAAAkB,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAa,QAAA,IAAAb,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAW,OAAA,IAAAX,CAAA,QAAAkB,EAAA;IAF1FE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYJ,EAA2E;QAAAK,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACaf,SAAA;UAAAa,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BtB,MAAA,IAAUO,OAAA,GAAU,SAAS;UAAAH,KAAA,EAC5BK;QAAA,C,GAER,CAACT,MAAA,IACAoB,IAAA,CAAC;UAAA,cACab,OAAA,GAAU,iBAAiB;UAAAW,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EAAAA,CAAA,KAClBf,UAAA,CAAAgB,KAAsB;UAAAF,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAmC,MAAA,EAAiBlB,OAAA;YAAAmB,IAAA;UAAA,C;;UAItB,CAAC1B,MAAA,IAAUoB,IAAA,CAAA5B,eAAA;QAAAY,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;;SAxBtCO,E;CA2BJ;AAvCuD,SAAAQ,MAAAG,IAAA;EAAA,QA6BNA,IAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","masked","t2","revealOnMount","t3","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t4","t5","t6","filter","Boolean","_jsxs","className","children","join","_jsx","readOnly","type","onClick","_temp","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly masked?: boolean\n  readonly revealOnMount?: boolean\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  masked = false,\n  revealOnMount = false,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(revealOnMount)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={masked || showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        {!masked && (\n          <button\n            aria-label={showKey ? 'Hide API key' : 'Show API key'}\n            className={`${baseClass}__toggle`}\n            onClick={() => setShowKey((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showKey} size={24} />\n          </button>\n        )}\n      </div>\n      {!masked && <CopyToClipboard value={keyValue} />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC,MAAA,EAAAC,EAAA;IAAAC,aAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAT,EAOvD;EALe,MAAAU,SAAA,GAAAP,EAAqB,KAArBQ,SAAqB,GAArB,SAAqB,GAArBR,EAAqB;EAEnC,MAAAE,MAAA,GAAAC,EAAc,KAAdK,SAAc,GAAd,KAAc,GAAdL,EAAc;EACd,MAAAC,aAAA,GAAAC,EAAqB,KAArBG,SAAqB,GAArB,KAAqB,GAArBH,EAAqB;EAGrB,OAAAI,OAAA,EAAAC,UAAA,IAA8BnB,QAAA,CAASa,aAAA;EACvC,MAAAO,QAAA,GAAiBL,KAAS,IAAT,EAAS;EAAA,IAAAM,EAAA;EAAA,IAAAd,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAG,WAAA,IAAAH,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAa,QAAA,IAAAb,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAW,OAAA;IAKiB,MAAAI,EAAA,GAAAZ,WAAe,IAAf,WAAe;IAAA,IAAAa,EAAA;IAAA,IAAAhB,CAAA,QAAAe,EAAA;MAAzCC,EAAA,IAAC,GAAGnB,SAAA,WAAoB,EAAEkB,EAAe,CAAY,CAAAE,MAAO,CAACC,OAAA;MAAAlB,CAAA,MAAAe,EAAA;MAAAf,CAAA,MAAAgB,EAAA;IAAA;MAAAA,EAAA,GAAAhB,CAAA;IAAA;IAF5Ec,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EAAevB,SAAA;MAAAwB,QAAA,E,CACdF,KAAA,CAAC;QAAAC,SAAA,EACYJ,EAA6D,CAAAM,IAAa,CAAC;QAAAD,QAAA,E,CAEtFE,IAAA,CAAC5B,OAAA;UAAAyB,SAAA,EAAmB,GAAGvB,SAAA;YACvB0B,IAAA,CAAC;UAAA,cACad,SAAA;UAAAW,SAAA,EACD,GAAGvB,SAAA,SAAkB;UAAAI,EAAA;UAAAuB,QAAA,EAExB;UAAAC,IAAA,EACFrB,MAAU,IAAVO,OAA6B,GAA7B,MAA6B,GAA7B,UAA6B;UAAAH,KAAA,EAC5BK;YAER,CAACT,M,IACAmB,IAAA,CAAC;UAAA,cACaZ,OAAA,iBAA2B,GAA3B,cAA2B;UAAAS,SAAA,EAC5B,GAAGvB,SAAA,UAAmB;UAAA6B,OAAA,EACxBA,CAAA,KAAMd,UAAA,CAAWe,KAAW;UAAAF,IAAA,EAChC;UAAAJ,QAAA,EAELE,IAAA,CAAC7B,OAAA;YAAAkC,MAAA,EAAgBjB,OAAA;YAAAkB,IAAA,EAAe;;;UAIrC,CAACzB,M,IAAUmB,IAAA,CAAC3B,eAAA;QAAAY,KAAA,EAAuBK;;;;;;;;;;;;;SAxBtCC,E;CA2BJ;AAvCuD,SAAAa,MAAAG,IAAA;EAAA,OA6BP,CAACA,IAAA;AAAA","ignoreList":[]}

package/dist/elements/AddNewRelation/index.css

@@ -17,10 +17,6 @@
       padding-inline: var(--spacer-1);
       height: var(--field-min-height-large);
       margin: 0;
-      background: var(--color-bg-secondary);
-      border: none;
-      border-radius: var(--button-radius);
-      color: var(--color-icon);
       cursor: pointer;
 
       &:hover {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqL1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwL1C,CAAA"}