@astryxdesign/theme-neutral 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/theme.css

@@ -0,0 +1,522 @@
+/*
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/neutralTheme.ts
+ * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
+ * Generated: 2026-06-25T23:57:33.889Z
+ */
+
+@layer reset {
+@scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-family-heading);
+    color: var(--color-text-primary);
+  }
+
+  :where(h1) {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.3333;
+  }
+
+  :where(h2) {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.4;
+  }
+
+  :where(h3) {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: 1.4118;
+  }
+
+  :where(h4) {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-bold);
+    line-height: 1.4286;
+  }
+
+  :where(h5) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.6667;
+  }
+
+  :where(h6) {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.6;
+  }
+
+  :where(p) {
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4286;
+    color: var(--color-text-primary);
+  }
+
+  :where(small) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.6667;
+    color: var(--color-text-secondary);
+  }
+
+  :where(code, pre) {
+    font-family: var(--font-family-code);
+    font-size: var(--font-size-base);
+    line-height: 1.4286;
+  }
+
+  :where(hr) {
+    border: none;
+    border-top: 1px solid var(--color-border);
+  }
+}
+}
+
+@layer astryx-theme {
+  :root { color-scheme: light dark; }
+
+@scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
+  :scope {
+    --font-size-4xs: 0.375rem;
+    --font-size-3xs: 0.4375rem;
+    --font-size-2xs: 0.5rem;
+    --font-size-xs: 0.625rem;
+    --font-size-sm: 0.75rem;
+    --font-size-base: 0.875rem;
+    --font-size-lg: 1.0625rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.8125rem;
+    --font-size-4xl: 2.1875rem;
+    --font-size-5xl: 2.625rem;
+    --text-heading-1-size: var(--font-size-2xl);
+    --text-heading-1-weight: var(--font-weight-semibold);
+    --text-heading-1-leading: 1.3333;
+    --text-heading-2-size: var(--font-size-xl);
+    --text-heading-2-weight: var(--font-weight-semibold);
+    --text-heading-2-leading: 1.4;
+    --text-heading-3-size: var(--font-size-lg);
+    --text-heading-3-weight: var(--font-weight-bold);
+    --text-heading-3-leading: 1.4118;
+    --text-heading-4-size: var(--font-size-base);
+    --text-heading-4-weight: var(--font-weight-bold);
+    --text-heading-4-leading: 1.4286;
+    --text-heading-5-size: var(--font-size-sm);
+    --text-heading-5-weight: var(--font-weight-semibold);
+    --text-heading-5-leading: 1.6667;
+    --text-heading-6-size: var(--font-size-xs);
+    --text-heading-6-weight: var(--font-weight-semibold);
+    --text-heading-6-leading: 1.6;
+    --text-body-size: var(--font-size-base);
+    --text-body-weight: var(--font-weight-normal);
+    --text-body-leading: 1.4286;
+    --text-large-size: var(--font-size-lg);
+    --text-large-weight: var(--font-weight-semibold);
+    --text-large-leading: 1.4118;
+    --text-label-size: var(--font-size-base);
+    --text-label-weight: var(--font-weight-medium);
+    --text-label-leading: 1.4286;
+    --text-code-size: var(--font-size-base);
+    --text-code-weight: var(--font-weight-normal);
+    --text-code-leading: 1.4286;
+    --text-supporting-size: var(--font-size-sm);
+    --text-supporting-weight: var(--font-weight-normal);
+    --text-supporting-leading: 1.6667;
+    --text-display-1-size: var(--font-size-5xl);
+    --text-display-1-weight: var(--font-weight-normal);
+    --text-display-1-leading: 1.2381;
+    --text-display-2-size: var(--font-size-4xl);
+    --text-display-2-weight: var(--font-weight-normal);
+    --text-display-2-leading: 1.2571;
+    --text-display-3-size: var(--font-size-3xl);
+    --text-display-3-weight: var(--font-weight-normal);
+    --text-display-3-leading: 1.3793;
+    --duration-fast-min: 95ms;
+    --duration-fast: 125ms;
+    --duration-fast-max: 165ms;
+    --duration-medium-min: 225ms;
+    --duration-medium: 300ms;
+    --duration-medium-max: 400ms;
+    --duration-slow-min: 525ms;
+    --duration-slow: 700ms;
+    --duration-slow-max: 935ms;
+    --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --color-syntax-keyword: light-dark(#700084, #efa8ff);
+    --color-syntax-string: light-dark(#005600, #a6d2a2);
+    --color-syntax-comment: light-dark(#737373, #a3a3a3);
+    --color-syntax-number: light-dark(#6e3500, #ffb37f);
+    --color-syntax-function: light-dark(#00458c, #a0caff);
+    --color-syntax-type: light-dark(#700084, #efa8ff);
+    --color-syntax-variable: light-dark(#171717, #e5e5e5);
+    --color-syntax-operator: light-dark(#737373, #a3a3a3);
+    --color-syntax-constant: light-dark(#6e3500, #ffb37f);
+    --color-syntax-tag: light-dark(#89001a, #ffaeaa);
+    --color-syntax-attribute: light-dark(#584400, #eec12f);
+    --color-syntax-property: light-dark(#005348, #83dac9);
+    --color-syntax-punctuation: light-dark(#a3a3a3, #525252);
+    --color-syntax-background: light-dark(#fafafa, #0a0a0a);
+    --color-background-surface: light-dark(#ffffff, #262626);
+    --color-background-body: light-dark(#f1f1f1, #1b1b1b);
+    --color-background-card: light-dark(#ffffff, #1b1b1b);
+    --color-background-popover: light-dark(#ffffff, #1b1b1b);
+    --color-background-muted: light-dark(#f1f1f1, #1b1b1b);
+    --color-accent: light-dark(#262626, #ebebeb);
+    --color-accent-muted: light-dark(#f1f1f1, #262626);
+    --color-neutral: light-dark(#0000000F, #FFFFFF1A);
+    --color-overlay: light-dark(#00000080, #000000CC);
+    --color-overlay-hover: light-dark(#0000000D, #FFFFFF0D);
+    --color-overlay-pressed: light-dark(#0000001A, #FFFFFF1A);
+    --color-text-primary: light-dark(#171717, #fafafa);
+    --color-text-secondary: light-dark(#737373, #a3a3a3);
+    --color-text-disabled: light-dark(#a3a3a3, #525252);
+    --color-text-accent: light-dark(#262626, #ebebeb);
+    --color-on-dark: #ffffff;
+    --color-on-light: #171717;
+    --color-on-accent: light-dark(#ffffff, #171717);
+    --color-on-success: light-dark(#ffffff, #171717);
+    --color-on-error: light-dark(#ffffff, #171717);
+    --color-on-warning: #171717;
+    --color-icon-accent: light-dark(#262626, #ebebeb);
+    --color-icon-primary: light-dark(#171717, #fafafa);
+    --color-icon-secondary: light-dark(#737373, #a3a3a3);
+    --color-icon-disabled: light-dark(#a3a3a3, #525252);
+    --color-success: light-dark(#007004, #9fe59b);
+    --color-error: light-dark(#a50c25, #ffc6c1);
+    --color-warning: light-dark(#745b00, #fdcf4f);
+    --color-success-muted: light-dark(#c5e5c0, #84c9803D);
+    --color-error-muted: light-dark(#facecb, #ff9e973D);
+    --color-warning-muted: light-dark(#f8da9d, #deb4333D);
+    --color-border: light-dark(#ebebeb, #FFFFFF1A);
+    --color-border-emphasized: light-dark(#d4d4d4, #525252);
+    --color-skeleton: light-dark(#ebebeb, #525252);
+    --color-shadow: light-dark(#0000001A, #0000004D);
+    --color-tint-hover: light-dark(black, white);
+    --color-background-red: light-dark(#facecb, #ff9e973D);
+    --color-border-red: light-dark(#e6bab8, #ff6f6c);
+    --color-icon-red: light-dark(#89001a, #ff9e97);
+    --color-text-red: light-dark(#89001a, #ffc6c1);
+    --color-background-orange: light-dark(#fad0b5, #ffa2583D);
+    --color-border-orange: light-dark(#e6bda2, #e2883e);
+    --color-icon-orange: light-dark(#6e3500, #ffa258);
+    --color-text-orange: light-dark(#6e3500, #ffc9a2);
+    --color-background-yellow: light-dark(#f8da9d, #deb4333D);
+    --color-border-yellow: light-dark(#e4c279, #c0990e);
+    --color-icon-yellow: light-dark(#584400, #deb433);
+    --color-text-yellow: light-dark(#584400, #fdcf4f);
+    --color-background-green: light-dark(#c5e5c0, #84c9803D);
+    --color-border-green: light-dark(#b2d1ac, #69ad67);
+    --color-icon-green: light-dark(#0c5700, #84c980);
+    --color-text-green: light-dark(#0c5700, #9fe59b);
+    --color-background-teal: light-dark(#a5e3d6, #7ec6b83D);
+    --color-border-teal: light-dark(#94d6c8, #63ab9d);
+    --color-icon-teal: light-dark(#005348, #7ec6b8);
+    --color-text-teal: light-dark(#005348, #99e2d3);
+    --color-background-cyan: light-dark(#a3e0ef, #83c2d43D);
+    --color-border-cyan: light-dark(#91d3e3, #67a7b8);
+    --color-icon-cyan: light-dark(#00505f, #83c2d4);
+    --color-text-cyan: light-dark(#00505f, #9edef0);
+    --color-background-blue: light-dark(#c4ddfb, #9eb7ff3D);
+    --color-border-blue: light-dark(#b1c9e7, #6d9cfe);
+    --color-icon-blue: light-dark(#00458c, #9eb7ff);
+    --color-text-blue: light-dark(#00458c, #c7d3ff);
+    --color-background-purple: light-dark(#eccef3, #f297ff3D);
+    --color-border-purple: light-dark(#d8bbdf, #dd74f0);
+    --color-icon-purple: light-dark(#700084, #f297ff);
+    --color-text-purple: light-dark(#700084, #fac1ff);
+    --color-background-pink: light-dark(#fccadc, #ff99c33D);
+    --color-border-pink: light-dark(#e7b7c8, #f273aa);
+    --color-icon-pink: light-dark(#83004b, #ff99c3);
+    --color-text-pink: light-dark(#83004b, #ffc3da);
+    --color-background-gray: light-dark(#e5e5e5, var(--color-neutral));
+    --color-border-gray: light-dark(#d4d4d4, #262626);
+    --color-icon-gray: light-dark(#525252, #a3a3a3);
+    --color-text-gray: light-dark(#262626, #e5e5e5);
+    --radius-none: 0.25rem;
+    --radius-inner: 0.375rem;
+    --radius-element: 0.625rem;
+    --radius-container: 0.75rem;
+    --radius-page: 1.75rem;
+    --radius-full: 9999px;
+    --shadow-low: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+    --shadow-med: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
+    --shadow-high: 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%));
+    --shadow-inset-hover: inset 0px 0px 0px 2px #0074e24D;
+    --shadow-inset-selected: inset 0px 0px 0px 2px #0074e280;
+    --shadow-inset-success: inset 0px 0px 0px 2px #1981004D;
+    --shadow-inset-warning: inset 0px 0px 0px 2px #ffce2f4D;
+    --shadow-inset-error: inset 0px 0px 0px 2px #e33f4a4D;
+  }
+
+  .astryx-heading.level-1 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-1-size);
+    font-weight: var(--text-heading-1-weight);
+    line-height: var(--text-heading-1-leading);
+  }
+
+  .astryx-heading.level-2 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-2-size);
+    font-weight: var(--text-heading-2-weight);
+    line-height: var(--text-heading-2-leading);
+  }
+
+  .astryx-heading.level-3 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-3-size);
+    font-weight: var(--text-heading-3-weight);
+    line-height: var(--text-heading-3-leading);
+  }
+
+  .astryx-heading.level-4 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-4-size);
+    font-weight: var(--text-heading-4-weight);
+    line-height: var(--text-heading-4-leading);
+  }
+
+  .astryx-heading.level-5 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-5-size);
+    font-weight: var(--text-heading-5-weight);
+    line-height: var(--text-heading-5-leading);
+  }
+
+  .astryx-heading.level-6 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-6-size);
+    font-weight: var(--text-heading-6-weight);
+    line-height: var(--text-heading-6-leading);
+  }
+
+  .astryx-text.body {
+    font-family: var(--font-family-body);
+    font-size: var(--text-body-size);
+    line-height: var(--text-body-leading);
+  }
+
+  .astryx-text.large {
+    font-family: var(--font-family-body);
+    font-size: var(--text-large-size);
+    line-height: var(--text-large-leading);
+  }
+
+  .astryx-text.label {
+    font-family: var(--font-family-body);
+    font-size: var(--text-label-size);
+    line-height: var(--text-label-leading);
+  }
+
+  .astryx-text.code {
+    font-family: var(--font-family-code);
+    font-size: var(--text-code-size);
+    line-height: var(--text-code-leading);
+  }
+
+  .astryx-text.supporting {
+    font-family: var(--font-family-body);
+    font-size: var(--text-supporting-size);
+    line-height: var(--text-supporting-leading);
+  }
+
+  .astryx-text.display-1 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-1-size);
+    line-height: var(--text-display-1-leading);
+  }
+
+  .astryx-text.display-2 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-2-size);
+    line-height: var(--text-display-2-leading);
+  }
+
+  .astryx-text.display-3 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-3-size);
+    line-height: var(--text-display-3-leading);
+  }
+
+  .astryx-button.destructive {
+    background-color: var(--color-error-muted);
+    color: var(--color-error);
+  }
+
+  .astryx-badge.info {
+    background-color: light-dark(#0074e2, #6d9cfe);
+    color: light-dark(#ffffff, #171717);
+  }
+
+  .astryx-badge.neutral {
+    background-color: var(--color-background-gray);
+    color: var(--color-text-gray);
+  }
+
+  .astryx-badge.success {
+    background-color: light-dark(#198100, #64af4c);
+    color: light-dark(#ffffff, #171717);
+  }
+
+  .astryx-badge.warning {
+    background-color: #ffce2f;
+    color: #171717;
+  }
+
+  .astryx-badge.error {
+    background-color: light-dark(#e33f4a, #ff705d);
+    color: light-dark(#ffffff, #171717);
+  }
+
+  .astryx-badge.red {
+    background-color: var(--color-background-red);
+    color: var(--color-text-red);
+  }
+
+  .astryx-badge.orange {
+    background-color: var(--color-background-orange);
+    color: var(--color-text-orange);
+  }
+
+  .astryx-badge.yellow {
+    background-color: var(--color-background-yellow);
+    color: var(--color-text-yellow);
+  }
+
+  .astryx-badge.green {
+    background-color: var(--color-background-green);
+    color: var(--color-text-green);
+  }
+
+  .astryx-badge.teal {
+    background-color: var(--color-background-teal);
+    color: var(--color-text-teal);
+  }
+
+  .astryx-badge.cyan {
+    background-color: var(--color-background-cyan);
+    color: var(--color-text-cyan);
+  }
+
+  .astryx-badge.blue {
+    background-color: var(--color-background-blue);
+    color: var(--color-text-blue);
+  }
+
+  .astryx-badge.purple {
+    background-color: var(--color-background-purple);
+    color: var(--color-text-purple);
+  }
+
+  .astryx-badge.pink {
+    background-color: var(--color-background-pink);
+    color: var(--color-text-pink);
+  }
+
+  .astryx-badge.gray {
+    background-color: var(--color-background-gray);
+    color: var(--color-text-gray);
+  }
+
+  .astryx-banner.info {
+    background-color: var(--color-background-blue);
+    --color-accent-muted: transparent;
+    --color-text-primary: var(--color-text-blue);
+    --color-text-secondary: var(--color-text-blue);
+    --color-accent: var(--color-text-blue);
+  }
+
+  .astryx-banner.success {
+    --color-text-primary: var(--color-text-green);
+    --color-text-secondary: var(--color-text-green);
+    --color-success: var(--color-text-green);
+  }
+
+  .astryx-banner.warning {
+    --color-text-primary: var(--color-text-yellow);
+    --color-text-secondary: var(--color-text-yellow);
+    --color-warning: var(--color-text-yellow);
+  }
+
+  .astryx-banner.error {
+    --color-text-primary: var(--color-text-red);
+    --color-text-secondary: var(--color-text-red);
+    --color-error: var(--color-text-red);
+  }
+
+  .astryx-switch {
+    --color-background-gray: var(--color-border-emphasized);
+  }
+
+  .astryx-progressbar {
+    --color-background-muted: var(--color-border-emphasized);
+  }
+
+  .astryx-progressbar.accent {
+    --color-accent: #0074e2;
+  }
+
+  .astryx-progressbar.success {
+    --color-success: #198100;
+  }
+
+  .astryx-progressbar.warning {
+    --color-warning: #ffce2f;
+  }
+
+  .astryx-progressbar.error {
+    --color-error: #e33f4a;
+  }
+
+  .astryx-card {
+    --astryx-card-padding: var(--spacing-3);
+  }
+
+  .astryx-section {
+    --astryx-section-padding: var(--spacing-3);
+  }
+
+  .astryx-text.primary { color: var(--color-text-primary); }
+
+  .astryx-heading.primary { color: var(--color-text-primary); }
+
+  .astryx-text.secondary { color: var(--color-text-secondary); }
+
+  .astryx-heading.secondary { color: var(--color-text-secondary); }
+
+  .astryx-text.disabled { color: var(--color-text-disabled); }
+
+  .astryx-heading.disabled { color: var(--color-text-disabled); }
+
+  .astryx-text.placeholder { color: var(--color-text-secondary); }
+
+  .astryx-heading.placeholder { color: var(--color-text-secondary); }
+
+  .astryx-text.active { color: var(--color-accent); }
+
+  .astryx-heading.active { color: var(--color-accent); }
+}
+}
+
+@layer astryx-theme {
+@scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
+  [data-astryx-media="dark"] {
+    color-scheme: dark;
+    --color-text-primary: var(--color-on-dark);
+    --color-icon-primary: var(--color-on-dark);
+    --color-accent: var(--color-on-dark);
+  }
+
+  [data-astryx-media="light"] {
+    color-scheme: light;
+    --color-text-primary: var(--color-on-light);
+    --color-icon-primary: var(--color-on-light);
+    --color-accent: var(--color-on-light);
+  }
+}
+}

package/package.json

@@ -1,11 +1,62 @@
 {
   "name": "@astryxdesign/theme-neutral",
-  "version": "0.0.0-bootstrap.0",
-  "description": "Placeholder published to claim the npm name during trusted publishing setup. Do not install.",
-  "homepage": "https://github.com/facebook/astryx",
+  "version": "0.1.0-canary.08d4cf4",
+  "displayName": "Neutral Theme",
+  "private": false,
+  "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
+  "author": "Meta Open Source",
   "license": "MIT",
+  "homepage": "https://github.com/facebook/astryx#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/facebook/astryx.git"
+    "url": "git+https://github.com/facebook/astryx.git",
+    "directory": "packages/themes/neutral"
+  },
+  "bugs": {
+    "url": "https://github.com/facebook/astryx/issues"
+  },
+  "keywords": [
+    "astryx",
+    "theme",
+    "design-system",
+    "lucide",
+    "design-tokens"
+  ],
+  "sideEffects": false,
+  "main": "./dist/source.js",
+  "types": "./dist/source.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/source.d.ts",
+      "import": "./dist/source.mjs",
+      "require": "./dist/source.js"
+    },
+    "./built": {
+      "types": "./dist/neutral.d.ts",
+      "import": "./dist/neutral.js",
+      "require": "./dist/neutral.js"
+    },
+    "./theme.css": {
+      "types": "./theme.css.d.ts",
+      "default": "./dist/theme.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "lucide-react": "^1.18.0"
+  },
+  "peerDependencies": {
+    "@astryxdesign/core": "0.1.0-canary.08d4cf4",
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@astryxdesign/cli": "0.1.0-canary.08d4cf4"
+  },
+  "module": "./dist/source.mjs",
+  "scripts": {
+    "build": "astryx theme build src/neutralTheme.ts -o dist/theme.css && tsup && tsc --project tsconfig.build.json"
   }
-}
+}

package/src/icons.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file icons.tsx
+ * @input Uses lucide-react icon components, IconRegistry type
+ * @output Exports neutralIconRegistry for the neutral theme
+ * @position Icon configuration for the neutral theme; consumed by index.ts
+ *
+ * Maps semantic icon names to Lucide icon components.
+ * These icons are bundled with the theme, not with @astryxdesign/core.
+ */
+
+import React from 'react';
+import type {IconRegistry} from '@astryxdesign/core/Icon';
+
+import {
+  X,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Check,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Info,
+  Calendar,
+  Clock,
+  ExternalLink,
+  Menu,
+  MoreHorizontal,
+  Search,
+  ArrowUp,
+  ArrowDown,
+  ArrowUpDown,
+  Filter,
+  EyeOff,
+  Columns,
+  Copy,
+  CheckCheck,
+  Wrench,
+  Square,
+  Mic,
+} from 'lucide-react';
+
+const iconProps = {
+  size: '1em',
+  'aria-hidden': true as const,
+};
+
+export const neutralIconRegistry: IconRegistry = {
+  close: <X {...iconProps} />,
+  chevronDown: <ChevronDown {...iconProps} />,
+  chevronLeft: <ChevronLeft {...iconProps} />,
+  chevronRight: <ChevronRight {...iconProps} />,
+  check: <Check {...iconProps} />,
+  success: <CheckCircle {...iconProps} />,
+  error: <XCircle {...iconProps} />,
+  warning: <AlertTriangle {...iconProps} />,
+  info: <Info {...iconProps} />,
+  calendar: <Calendar {...iconProps} />,
+  clock: <Clock {...iconProps} />,
+  externalLink: <ExternalLink {...iconProps} />,
+  menu: <Menu {...iconProps} />,
+  moreHorizontal: <MoreHorizontal {...iconProps} />,
+  search: <Search {...iconProps} />,
+  arrowUp: <ArrowUp {...iconProps} />,
+  arrowDown: <ArrowDown {...iconProps} />,
+  arrowsUpDown: <ArrowUpDown {...iconProps} />,
+  funnel: <Filter {...iconProps} />,
+  eyeSlash: <EyeOff {...iconProps} />,
+  viewColumns: <Columns {...iconProps} />,
+  copy: <Copy {...iconProps} />,
+  checkDouble: <CheckCheck {...iconProps} />,
+  wrench: <Wrench {...iconProps} />,
+  stop: <Square {...iconProps} />,
+  microphone: <Mic {...iconProps} />,
+};