@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.c6494b5

package/dist/css/typography.css

@@ -1,67 +1,173 @@
 @layer payload-default {
   :root {
-    --font-family-sans: 'Inter';
-    --font-family-mono: 'Roboto Mono';
-    --text-letter-spacing: 0.005em; /* 0.5% */
+    --text-body-family: 'Inter';
+    --text-heading-family: 'Inter';
+    --text-mono-family: 'Roboto Mono';
 
-    /* Body — Small */
-    --text-body-small-font-family: var(--font-family-sans);
-    --text-body-small-font-size: 0.5625rem; /* 9px */
+    /* 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.5px;
+    --text-body-small-letter-spacing: 0px;
 
-    --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;
-
-    /* Body — Medium */
-    --text-body-medium-font-family: var(--font-family-sans);
-    --text-body-medium-font-size: 0.6875rem; /* 11px */
+    --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-strong-font-family: var(--font-family-sans);
-    --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-letter-spacing: -0.001px;
 
-    /* Body — Large */
-    --text-body-large-font-family: var(--font-family-sans);
-    --text-body-large-font-size: 0.8125rem; /* 13px */
+    --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: 0.8125rem; /* 13px */
-    --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: 0.8125rem; /* 13px */
-    --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: 0.9375rem; /* 15px */
-    --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: 1.5rem; /* 24px */
-    --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;
+
+    --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);
+
+    --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

@@ -1,8 +1,9 @@
 @layer payload-default {
   :root {
     --accessibility-focus-color: var(--color-border-selected);
-    --accessibility-outline: 1px solid var(--accessibility-focus-color);
+    --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
+    --scrollbar-color: var(--color-bg-secondary-pressed);
   }
 
   /* Screen reader only */
@@ -17,4 +18,16 @@
     white-space: nowrap;
     border-width: 0;
   }
+
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
+  }
+
+  /* Global focus ring */
+  :focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--button-radius);
+  }
 }

package/dist/css/z-index.css

@@ -0,0 +1,10 @@
+@layer payload-default {
+  :root {
+    /* --z-popup needs to be higher than --z-modal to ensure the popup is displayed when modal is open */
+    --z-popup: 60;
+    --z-nav: 20;
+    --z-modal: 30;
+    --z-status: 40;
+    --z-portal-element: 9999;
+  }
+}

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-medium-font-size);
+    line-height: var(--text-body-medium-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: inherit;
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-bold-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,16 @@
+import React from 'react';
+import './index.css';
+export type APIKeyInputProps = {
+    readonly 'aria-label'?: string;
+    readonly highlighted?: boolean;
+    readonly id?: string;
+    readonly masked?: boolean;
+    readonly revealOnMount?: boolean;
+    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,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuClD,CAAA"}

package/dist/elements/APIKeyInput/index.js

@@ -0,0 +1,84 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { EyeIcon } from '../../icons/Eye/index.js';
+import { KeyIcon } from '../../icons/Key/index.js';
+import { CopyToClipboard } from '../CopyToClipboard/index.js';
+import './index.css';
+const baseClass = 'api-key-input';
+/**
+ * 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 const APIKeyInput = t0 => {
+  const $ = _c(9);
+  const {
+    id,
+    "aria-label": t1,
+    highlighted,
+    masked: t2,
+    revealOnMount: t3,
+    value
+  } = t0;
+  const ariaLabel = t1 === undefined ? "API Key" : t1;
+  const masked = t2 === undefined ? false : t2;
+  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", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: t6,
+        children: [_jsx(KeyIcon, {
+          className: `${baseClass}__icon`
+        }), _jsx("input", {
+          "aria-label": ariaLabel,
+          className: `${baseClass}__field`,
+          id,
+          readOnly: true,
+          type: masked || showKey ? "text" : "password",
+          value: keyValue
+        }), !masked && _jsx("button", {
+          "aria-label": showKey ? "Hide API key" : "Show API key",
+          className: `${baseClass}__toggle`,
+          onClick: () => setShowKey(_temp),
+          type: "button",
+          children: _jsx(EyeIcon, {
+            active: showKey,
+            size: 24
+          })
+        })]
+      }), !masked && _jsx(CopyToClipboard, {
+        value: keyValue
+      })]
+    });
+    $[2] = ariaLabel;
+    $[3] = id;
+    $[4] = keyValue;
+    $[5] = masked;
+    $[6] = showKey;
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  return t7;
+};
+function _temp(prev) {
+  return !prev;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":[]}

package/dist/elements/AddNewRelation/index.css

@@ -8,38 +8,33 @@
       align-items: stretch;
       height: 100%;
     }
-  }
 
-  .relationship-add-new__add-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacer-5);
-    height: var(--spacer-5);
-    padding: var(--spacer-1);
-    margin: 0;
-    background: var(--color-bg-secondary);
-    border: none;
-    border-radius: var(--radius-medium);
-    color: var(--color-icon);
-    cursor: pointer;
-    transition: background-color 100ms;
+    .relationship-add-new__add-button {
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      padding-inline: var(--spacer-1);
+      height: var(--field-min-height-large);
+      margin: 0;
+      cursor: pointer;
 
-    &:hover {
-      background: var(--color-bg-secondary-hover);
-    }
+      &:hover {
+        background: var(--color-bg-secondary-hover);
+      }
 
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+        outline-offset: var(--accessibility-outline-offset);
+      }
     }
-  }
 
-  .relationship-add-new__add-button--unstyled {
-    background: transparent;
-    border: none;
-    padding: 0;
-    width: auto;
-    height: auto;
+    .relationship-add-new__add-button--unstyled {
+      background: transparent;
+      border: none;
+      padding: 0;
+      width: auto;
+      height: auto;
+    }
   }
 }

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;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwM1C,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,CAsL1C,CAAA"}