@mintlify/components 0.3.15 → 0.4.0

package/dist/styles/design-tokens.js

@@ -0,0 +1,339 @@
+const e = {
+  "base-white": "#ffffff",
+  "base-dark-1": "#0B0C0E",
+  "base-transparent": "#FFFFFF02",
+  "icon-gray-2": "#757575",
+  "icon-gray-3": "#525252",
+  "gray-13-shadow": "#14151A0D",
+  "gray-13-shadow-2": "#14151A05",
+  "red-1-focus": "#FFB2B299",
+  "gray-1": "#F9F9F9",
+  "gray-2": "#F5F5F5",
+  "gray-3": "#E9E9EA",
+  "gray-4": "#D7D7D7",
+  "gray-5": "#BBBBBC",
+  "gray-6": "#9B9B9C",
+  "gray-7": "#78787A",
+  "gray-8": "#585859",
+  "gray-9": "#3C3C3D",
+  "gray-10": "#262727",
+  "gray-11": "#191A1B",
+  "gray-12": "#0F1011",
+  "gray-13": "#0B0C0E",
+  "gray-1a": "#0B0C0E0A",
+  "gray-2a": "#0B0C0E14",
+  "gray-5a": "#0B0C0E40",
+  "gray-5a-solid": "#C2C2C2",
+  "gray-7a": "#0B0C0E66",
+  "gray-9a": "#0B0C0E80",
+  "gray-9a-solid": "#6D6D6E",
+  "white-1": "#FFFFFF14",
+  "white-2": "#FFFFFF24",
+  "white-3": "#FFFFFF2E",
+  "white-4": "#FFFFFF3D",
+  "white-5": "#FFFFFF52",
+  "white-5-solid": "#B2B2B4",
+  "white-6": "#FFFFFF66",
+  "white-7": "#FFFFFF75",
+  "white-9": "#FFFFFF99",
+  "white-9-solid": "#a0a1a3",
+  "white-13": "#FFFFFFF2",
+  "blue-1": "#F0F4FE",
+  "blue-2": "#E3EAFD",
+  "blue-6": "#7196F4",
+  "blue-8": "#4778F5",
+  "blue-9": "#1D54E2",
+  "blue-12": "#07296A",
+  "blue-11": "#133A9A",
+  "blue-3a": "#3368F033",
+  "blue-5a": "#3368F04D",
+  "blue-7a": "#3368F080",
+  "green-1": "#EDFDF4",
+  "green-2": "#D1FAE4",
+  "green-3": "#C3F8DC",
+  "green-4": "#9AF4C3",
+  "green-6": "#6AE1A1",
+  "green-7": "#40D986",
+  "green-8": "#26BD6C",
+  "green-9": "#21A65E",
+  "green-10": "#1D9052",
+  "green-11": "#166E3F",
+  "green-12": "#0F4C2C",
+  "green-13": "#072213",
+  "green-1a": "#26BD6C1A",
+  "green-3a": "#26BD6C33",
+  "green-4a": "#26BD6C40",
+  "green-5a": "#26BD6C4D",
+  "green-7a": "#26BD6C80",
+  "green-11a": "#26BD6CE6",
+  "orange-1": "#FEF4EC",
+  "orange-2": "#FDEAD8",
+  "orange-4": "#FAD0A9",
+  "orange-6": "#F8B577",
+  "orange-8": "#F48E2F",
+  "orange-9": "#E9760C",
+  "orange-11": "#AE590A",
+  "orange-12": "#613105",
+  "orange-13": "#301903",
+  "orange-3a": "#F48E2F33",
+  "orange-4a": "#F48E2F40",
+  "orange-5a": "#F48E2F4D",
+  "orange-7a": "#F48E2F80",
+  "red-1": "#FDF2F1",
+  "red-2": "#FCE5E4",
+  "red-4": "#F7C3C0",
+  "red-5": "#F5B2AD",
+  "red-6": "#F08B85",
+  "red-8": "#E6483D",
+  "red-9": "#D9281C",
+  "red-11": "#9A1C13",
+  "red-12": "#64120D",
+  "red-13": "#360A07",
+  "red-1a": "#E6483D1A",
+  "red-2a": "#E6483D26",
+  "red-3a": "#E6483D33",
+  "red-4a": "#E6483D40",
+  "red-5a": "#E6483D4D",
+  "red-6a": "#E6483D66",
+  "red-7a": "#E6483D80",
+  "red-9a": "#E6483DB3",
+  "purple-1": "#F7F1FD",
+  "purple-2": "#ECDFFB",
+  "purple-6": "#B78AF0",
+  "purple-8": "#924FE8",
+  "purple-11": "#5314A3",
+  "purple-12": "#3A0F71",
+  "purple-13": "#1C0736",
+  "purple-3a": "#873DE633",
+  "purple-5a": "#873DE64D",
+  "purple-7a": "#873DE680"
+}, a = {
+  "xs-light": `0px 1px 2px 0px ${e["gray-13-shadow"]}`,
+  "xs-dark": "0px 1px 2px 0px rgba(255, 255, 255, 0)",
+  "tooltip-sm-light": `0px 10px 16px -3px ${e["gray-13-shadow"]}, 0px 3px 10px -2px ${e["gray-13-shadow-2"]}`,
+  "tooltip-sm-dark": "0px 10px 16px -3px rgba(20, 21, 26, 0.05), 0px 3px 10px -2px rgba(20, 21, 26, 0.02)"
+}, r = {
+  "light-light": `0px 0px 0px 2px ${e["gray-2a"]}`,
+  "light-dark": `0px 0px 0px 2px ${e["white-2"]}`,
+  "accent-light": `0px 0px 0px 2px ${e["green-8"]}`,
+  "accent-dark": `0px 0px 0px 2px ${e["green-8"]}`,
+  "light-destructive-light": `0px 0px 0px 2px ${e["red-1-focus"]}`,
+  "light-destructive-dark": `0px 0px 0px 2px ${e["red-1-focus"]}`
+}, t = {
+  light: {
+    "red-1-focus": e["red-1-focus"],
+    "brand-7": e["green-7"],
+    "brand-1a": e["green-1a"],
+    "brand-10": e["green-10"],
+    "brand-4a": e["green-4a"],
+    "brand-11a": e["green-11a"],
+    "surface-neutral": e["gray-1"],
+    "surface-neutral-subtle": e["gray-2"],
+    "surface-warning": e["orange-1"],
+    "surface-info-accent": e["blue-8"],
+    "primary-hover": e["gray-12"],
+    "primary-disabled": e["gray-2"],
+    "button-secondary": e["base-white"],
+    "button-secondary-hover": e["gray-1"],
+    "button-tertiary": e["gray-1a"],
+    "tertiary-hover": e["gray-2a"],
+    ghost: e["base-transparent"],
+    "ghost-hover": e["gray-1a"],
+    "destructive-hover": e["red-9"],
+    "destructive-disabled": e["red-2"],
+    "destructive-secondary-hover": e["red-1"],
+    "button-destructive-tertiary": e["red-1a"],
+    "destructive-tertiary-hover": e["red-2a"],
+    "destructive-ghost-hover": e["red-1a"],
+    "badge-gray": e["gray-2"],
+    "badge-gray-accent": e["gray-9"],
+    "badge-blue": e["blue-2"],
+    "badge-blue-disabled": e["blue-1"],
+    "badge-green": e["green-2"],
+    "badge-green-disabled": e["green-1"],
+    "badge-orange": e["orange-2"],
+    "badge-orange-disabled": e["orange-1"],
+    "badge-red": e["red-2"],
+    "badge-red-disabled": e["red-1"],
+    "badge-purple": e["purple-2"],
+    "badge-purple-disabled": e["purple-1"],
+    "badge-purple-accent": e["purple-8"],
+    "badge-white-disabled": e["base-white"],
+    "badge-surface": e["base-white"],
+    "accent-blue-accent": e["blue-8"],
+    "accent-blue-subtle": e["blue-2"],
+    "accent-gray-accent": e["gray-8"],
+    "accent-green": e["green-1"],
+    "accent-green-accent": e["green-8"],
+    "accent-green-subtle": e["green-2"],
+    "accent-orange-subtle": e["orange-2"],
+    "accent-orange-accent": e["orange-8"],
+    "accent-red": e["red-1"],
+    "accent-red-subtle": e["red-2"],
+    "accent-red-accent": e["red-8"],
+    "accent-purple": e["purple-1"],
+    "accent-purple-subtle": e["purple-2"],
+    "accent-purple-accent": e["purple-8"],
+    "checkbox-disabled": e["gray-3"],
+    "toggle-default": e["gray-5"],
+    "toggle-hover": e["gray-6"],
+    "toggle-active-hover": e["green-9"],
+    "toggle-active-disabled": e["green-3"],
+    "toggle-handle-disabled": e["gray-4"],
+    "border-action-normal": e["gray-3"],
+    "border-action-hover": e["gray-4"],
+    "border-action-focus": e["gray-13"],
+    "border-action-focus-destructive-light": e["red-6"],
+    "border-action-destructive": e["red-4"],
+    "border-action-destructive-hover": e["red-5"],
+    "border-base-warning": e["orange-4"],
+    "border-base-destructive": e["red-4"],
+    "border-base-alpha": e["gray-2a"],
+    "border-base-alpha-white": e["white-3"],
+    "text-primary": e["gray-13"],
+    "text-secondary": e["gray-9a"],
+    "text-secondary-solid": e["gray-9a-solid"],
+    "text-tertiary": e["gray-7a"],
+    "text-quaternary": e["gray-5a"],
+    "text-quaternary-solid": e["gray-5a-solid"],
+    "text-inverted": e["base-white"],
+    "text-static-dark": e["gray-13"],
+    "text-static-dark-secondary": e["gray-9a"],
+    "text-destructive": e["red-8"],
+    "text-destructive-secondary": e["red-9a"],
+    "text-destructive-tertiary": e["red-5a"],
+    "text-success": e["green-8"],
+    "text-warning": e["orange-8"],
+    "text-accent-blue-inverted": e["blue-11"],
+    "text-accent-blue-secondary": e["blue-7a"],
+    "text-accent-blue-tertiary": e["blue-5a"],
+    "text-accent-green": e["green-11"],
+    "text-accent-green-inverted": e["green-11"],
+    "text-accent-green-secondary": e["green-7a"],
+    "text-accent-orange-inverted": e["orange-11"],
+    "text-accent-orange-secondary": e["orange-7a"],
+    "text-accent-red-inverted": e["red-11"],
+    "text-accent-red-secondary": e["red-7a"],
+    "text-accent-purple-inverted": e["purple-11"],
+    "text-accent-purple-secondary": e["purple-7a"],
+    "icon-tertiary": e["gray-6"],
+    "icon-quaternary": e["gray-4"],
+    "shadow-xs": a["xs-light"],
+    "shadow-tooltip-sm": a["tooltip-sm-light"],
+    "focus-light": r["light-light"],
+    "focus-accent": r["accent-light"],
+    "focus-light-destructive": r["light-destructive-light"]
+  },
+  dark: {
+    "red-1-focus": e["red-1-focus"],
+    "brand-1a": e["green-1"],
+    "brand-7": e["green-7"],
+    "brand-10": e["green-4"],
+    "brand-4a": e["green-4"],
+    "brand-11a": e["green-11"],
+    "surface-inverted": e["base-white"],
+    "surface-neutral": e["gray-13"],
+    "surface-neutral-subtle": e["gray-12"],
+    "surface-warning": e["orange-13"],
+    "surface-info-accent": e["blue-8"],
+    "primary-hover": e["gray-2"],
+    "primary-disabled": e["white-2"],
+    "button-secondary": e["gray-13"],
+    "button-secondary-hover": e["gray-12"],
+    "button-tertiary": e["white-1"],
+    "tertiary-hover": e["white-2"],
+    ghost: e["base-transparent"],
+    "ghost-hover": e["white-2"],
+    "destructive-hover": e["red-9"],
+    "destructive-disabled": e["red-2a"],
+    "destructive-secondary-hover": e["gray-13"],
+    "button-destructive-tertiary": e["white-1"],
+    "destructive-tertiary-hover": e["white-2"],
+    "destructive-ghost-hover": e["white-1"],
+    "badge-gray": e["white-3"],
+    "badge-gray-accent": e["gray-7"],
+    "badge-blue": e["blue-5a"],
+    "badge-blue-disabled": e["blue-3a"],
+    "badge-green": e["green-5a"],
+    "badge-green-disabled": e["green-3a"],
+    "badge-orange": e["orange-4a"],
+    "badge-orange-disabled": e["orange-3a"],
+    "badge-red": e["red-5a"],
+    "badge-red-disabled": e["red-3a"],
+    "badge-purple": e["purple-5a"],
+    "badge-purple-disabled": e["purple-3a"],
+    "badge-purple-accent": e["purple-8"],
+    "badge-white-disabled": e["white-6"],
+    "badge-surface": e["gray-12"],
+    "accent-blue-accent": e["blue-9"],
+    "accent-blue-subtle": e["blue-12"],
+    "accent-gray-accent": e["gray-9"],
+    "accent-green": e["green-13"],
+    "accent-green-accent": e["green-9"],
+    "accent-green-subtle": e["green-12"],
+    "accent-orange-subtle": e["orange-12"],
+    "accent-orange-accent": e["orange-9"],
+    "accent-red": e["red-13"],
+    "accent-red-subtle": e["red-12"],
+    "accent-red-accent": e["red-9"],
+    "accent-purple": e["purple-13"],
+    "accent-purple-subtle": e["purple-12"],
+    "accent-purple-accent": e["purple-8"],
+    "checkbox-disabled": e["gray-11"],
+    "toggle-default": e["gray-9"],
+    "toggle-hover": e["gray-8"],
+    "toggle-active-hover": e["green-9"],
+    "toggle-active-disabled": e["green-11"],
+    "toggle-handle-disabled": e["gray-10"],
+    "border-action-normal": e["white-3"],
+    "border-action-hover": e["white-4"],
+    "border-action-focus": e["white-13"],
+    "border-action-focus-destructive-light": e["red-6"],
+    "border-action-destructive": e["red-4a"],
+    "border-action-destructive-hover": e["red-5a"],
+    "border-action-success": e["green-4a"],
+    "border-base-warning": e["orange-4a"],
+    "border-base-destructive": e["red-4a"],
+    "border-base-alpha": e["gray-2a"],
+    "border-base-alpha-white": e["white-3"],
+    "text-primary": e["base-white"],
+    "text-secondary": e["gray-4"],
+    "text-secondary-solid": e["gray-5a-solid"],
+    "text-tertiary": e["white-7"],
+    "text-quaternary": e["white-5"],
+    "text-quaternary-solid": e["white-5-solid"],
+    "text-inverted": e["base-dark-1"],
+    "text-static-dark": e["gray-13"],
+    "text-static-dark-secondary": e["gray-9a"],
+    "text-destructive": e["red-8"],
+    "text-destructive-secondary": e["red-9a"],
+    "text-destructive-tertiary": e["red-6a"],
+    "text-success": e["green-8"],
+    "text-warning": e["orange-8"],
+    "text-accent-blue-inverted": e["blue-6"],
+    "text-accent-blue-secondary": e["blue-5a"],
+    "text-accent-blue-tertiary": e["blue-3a"],
+    "text-accent-green": e["green-9"],
+    "text-accent-green-inverted": e["green-6"],
+    "text-accent-green-secondary": e["green-5a"],
+    "text-accent-orange-inverted": e["orange-6"],
+    "text-accent-orange-secondary": e["orange-5a"],
+    "text-accent-red-inverted": e["red-6"],
+    "text-accent-red-secondary": e["red-5a"],
+    "text-accent-purple-inverted": e["purple-6"],
+    "text-accent-purple-secondary": e["purple-5a"],
+    "icon-tertiary": e["icon-gray-2"],
+    "icon-quaternary": e["icon-gray-3"],
+    "shadow-xs": a["xs-dark"],
+    "shadow-tooltip-sm": a["tooltip-sm-dark"],
+    "focus-light": r["light-dark"],
+    "focus-accent": r["accent-dark"],
+    "focus-light-destructive": r["light-destructive-dark"]
+  }
+};
+export {
+  e as colors,
+  t as designTokens,
+  r as focus,
+  a as shadows
+};

package/dist/styles/theme.css

@@ -0,0 +1 @@
+:root{--mt-color-base-white: #ffffff;--mt-color-base-dark-1: #0b0c0e;--mt-color-base-transparent: #ffffff02;--mt-color-icon-gray-2: #757575;--mt-color-icon-gray-3: #525252;--mt-color-gray-13-shadow: #14151a0d;--mt-color-gray-13-shadow-2: #14151a05;--mt-color-red-1-focus: #ffb2b299;--mt-color-gray-1: #f9f9f9;--mt-color-gray-2: #f5f5f5;--mt-color-gray-3: #e9e9ea;--mt-color-gray-4: #d7d7d7;--mt-color-gray-5: #bbbbbc;--mt-color-gray-6: #9b9b9c;--mt-color-gray-7: #78787a;--mt-color-gray-8: #585859;--mt-color-gray-9: #3c3c3d;--mt-color-gray-10: #262727;--mt-color-gray-11: #191a1b;--mt-color-gray-12: #0f1011;--mt-color-gray-13: #0b0c0e;--mt-color-gray-1a: #0b0c0e0a;--mt-color-gray-2a: #0b0c0e14;--mt-color-gray-5a: #0b0c0e40;--mt-color-gray-5a-solid: #c2c2c2;--mt-color-gray-7a: #0b0c0e66;--mt-color-gray-9a: #0b0c0e80;--mt-color-gray-9a-solid: #6d6d6e;--mt-color-white-1: #ffffff14;--mt-color-white-2: #ffffff24;--mt-color-white-3: #ffffff2e;--mt-color-white-4: #ffffff3d;--mt-color-white-5: #ffffff52;--mt-color-white-5-solid: #b2b2b4;--mt-color-white-6: #ffffff66;--mt-color-white-7: #ffffff75;--mt-color-white-9: #ffffff99;--mt-color-white-9-solid: #a0a1a3;--mt-color-white-13: #fffffff2;--mt-color-blue-1: #f0f4fe;--mt-color-blue-2: #e3eafd;--mt-color-blue-6: #7196f4;--mt-color-blue-8: #4778f5;--mt-color-blue-9: #1d54e2;--mt-color-blue-12: #07296a;--mt-color-blue-11: #133a9a;--mt-color-blue-3a: #3368f033;--mt-color-blue-5a: #3368f04d;--mt-color-blue-7a: #3368f080;--mt-color-green-1: #edfdf4;--mt-color-green-2: #d1fae4;--mt-color-green-3: #c3f8dc;--mt-color-green-4: #9af4c3;--mt-color-green-6: #6ae1a1;--mt-color-green-7: #40d986;--mt-color-green-8: #26bd6c;--mt-color-green-9: #21a65e;--mt-color-green-10: #1d9052;--mt-color-green-11: #166e3f;--mt-color-green-12: #0f4c2c;--mt-color-green-13: #072213;--mt-color-green-1a: #26bd6c1a;--mt-color-green-3a: #26bd6c33;--mt-color-green-4a: #26bd6c40;--mt-color-green-5a: #26bd6c4d;--mt-color-green-7a: #26bd6c80;--mt-color-green-11a: #26bd6ce6;--mt-color-orange-1: #fef4ec;--mt-color-orange-2: #fdead8;--mt-color-orange-4: #fad0a9;--mt-color-orange-6: #f8b577;--mt-color-orange-8: #f48e2f;--mt-color-orange-9: #e9760c;--mt-color-orange-11: #ae590a;--mt-color-orange-12: #613105;--mt-color-orange-13: #301903;--mt-color-orange-3a: #f48e2f33;--mt-color-orange-4a: #f48e2f40;--mt-color-orange-5a: #f48e2f4d;--mt-color-orange-7a: #f48e2f80;--mt-color-red-1: #fdf2f1;--mt-color-red-2: #fce5e4;--mt-color-red-4: #f7c3c0;--mt-color-red-5: #f5b2ad;--mt-color-red-6: #f08b85;--mt-color-red-8: #e6483d;--mt-color-red-9: #d9281c;--mt-color-red-11: #9a1c13;--mt-color-red-12: #64120d;--mt-color-red-13: #360a07;--mt-color-red-1a: #e6483d1a;--mt-color-red-2a: #e6483d26;--mt-color-red-3a: #e6483d33;--mt-color-red-4a: #e6483d40;--mt-color-red-5a: #e6483d4d;--mt-color-red-6a: #e6483d66;--mt-color-red-7a: #e6483d80;--mt-color-red-9a: #e6483db3;--mt-color-purple-1: #f7f1fd;--mt-color-purple-2: #ecdffb;--mt-color-purple-6: #b78af0;--mt-color-purple-8: #924fe8;--mt-color-purple-11: #5314a3;--mt-color-purple-12: #3a0f71;--mt-color-purple-13: #1c0736;--mt-color-purple-3a: #873de633;--mt-color-purple-5a: #873de64d;--mt-color-purple-7a: #873de680;--mt-shadow-xs-light: 0px 1px 2px 0px var(--mt-color-gray-13-shadow);--mt-shadow-xs-dark: 0px 1px 2px 0px rgb(255 255 255 / 0%);--mt-shadow-tooltip-sm-light: 0px 10px 16px -3px var(--mt-color-gray-13-shadow), 0px 3px 10px -2px var(--mt-color-gray-13-shadow-2);--mt-shadow-tooltip-sm-dark: 0px 10px 16px -3px rgb(20 21 26 / 5%), 0px 3px 10px -2px rgb(20 21 26 / 2%);--mt-focus-light-light: 0px 0px 0px 2px var(--mt-color-gray-2a);--mt-focus-light-dark: 0px 0px 0px 2px var(--mt-color-white-2);--mt-focus-accent-light: 0px 0px 0px 2px var(--mt-color-green-8);--mt-focus-accent-dark: 0px 0px 0px 2px var(--mt-color-green-8);--mt-focus-light-destructive-light: 0px 0px 0px 2px var(--mt-color-red-1-focus);--mt-focus-light-destructive-dark: 0px 0px 0px 2px var(--mt-color-red-1-focus);--mt-color-brand-7: var(--mt-color-green-7);--mt-color-brand-1a: var(--mt-color-green-1a);--mt-color-brand-10: var(--mt-color-green-10);--mt-color-brand-4a: var(--mt-color-green-4a);--mt-color-brand-11a: var(--mt-color-green-11a);--mt-color-surface-neutral: var(--mt-color-gray-1);--mt-color-surface-neutral-subtle: var(--mt-color-gray-2);--mt-color-surface-warning: var(--mt-color-orange-1);--mt-color-surface-info-accent: var(--mt-color-blue-8);--mt-color-primary-hover: var(--mt-color-gray-12);--mt-color-primary-disabled: var(--mt-color-gray-2);--mt-color-button-secondary: var(--mt-color-base-white);--mt-color-button-secondary-hover: var(--mt-color-gray-1);--mt-color-button-tertiary: var(--mt-color-gray-1a);--mt-color-tertiary-hover: var(--mt-color-gray-2a);--mt-color-ghost: var(--mt-color-base-transparent);--mt-color-ghost-hover: var(--mt-color-gray-1a);--mt-color-destructive-hover: var(--mt-color-red-9);--mt-color-destructive-disabled: var(--mt-color-red-2);--mt-color-destructive-secondary-hover: var(--mt-color-red-1);--mt-color-button-destructive-tertiary: var(--mt-color-red-1a);--mt-color-destructive-tertiary-hover: var(--mt-color-red-2a);--mt-color-destructive-ghost-hover: var(--mt-color-red-1a);--mt-color-badge-gray: var(--mt-color-gray-2);--mt-color-badge-gray-accent: var(--mt-color-gray-9);--mt-color-badge-blue: var(--mt-color-blue-2);--mt-color-badge-blue-disabled: var(--mt-color-blue-1);--mt-color-badge-green: var(--mt-color-green-2);--mt-color-badge-green-disabled: var(--mt-color-green-1);--mt-color-badge-orange: var(--mt-color-orange-2);--mt-color-badge-orange-disabled: var(--mt-color-orange-1);--mt-color-badge-red: var(--mt-color-red-2);--mt-color-badge-red-disabled: var(--mt-color-red-1);--mt-color-badge-purple: var(--mt-color-purple-2);--mt-color-badge-purple-disabled: var(--mt-color-purple-1);--mt-color-badge-purple-accent: var(--mt-color-purple-8);--mt-color-badge-white-disabled: var(--mt-color-base-white);--mt-color-badge-surface: var(--mt-color-base-white);--mt-color-accent-blue-accent: var(--mt-color-blue-8);--mt-color-accent-blue-subtle: var(--mt-color-blue-2);--mt-color-accent-gray-accent: var(--mt-color-gray-8);--mt-color-accent-green: var(--mt-color-green-1);--mt-color-accent-green-accent: var(--mt-color-green-8);--mt-color-accent-green-subtle: var(--mt-color-green-2);--mt-color-accent-orange-subtle: var(--mt-color-orange-2);--mt-color-accent-orange-accent: var(--mt-color-orange-8);--mt-color-accent-red: var(--mt-color-red-1);--mt-color-accent-red-subtle: var(--mt-color-red-2);--mt-color-accent-red-accent: var(--mt-color-red-8);--mt-color-accent-purple: var(--mt-color-purple-1);--mt-color-accent-purple-subtle: var(--mt-color-purple-2);--mt-color-accent-purple-accent: var(--mt-color-purple-8);--mt-color-checkbox-disabled: var(--mt-color-gray-3);--mt-color-toggle-default: var(--mt-color-gray-5);--mt-color-toggle-hover: var(--mt-color-gray-6);--mt-color-toggle-active-hover: var(--mt-color-green-9);--mt-color-toggle-active-disabled: var(--mt-color-green-3);--mt-color-toggle-handle-disabled: var(--mt-color-gray-4);--mt-color-border-action-normal: var(--mt-color-gray-3);--mt-color-border-action-hover: var(--mt-color-gray-4);--mt-color-border-action-focus: var(--mt-color-gray-13);--mt-color-border-action-focus-destructive-light: var(--mt-color-red-6);--mt-color-border-action-destructive: var(--mt-color-red-4);--mt-color-border-action-destructive-hover: var(--mt-color-red-5);--mt-color-border-base-warning: var(--mt-color-orange-4);--mt-color-border-base-destructive: var(--mt-color-red-4);--mt-color-border-base-alpha: var(--mt-color-gray-2a);--mt-color-border-base-alpha-white: var(--mt-color-white-3);--mt-color-text-primary: var(--mt-color-gray-13);--mt-color-text-secondary: var(--mt-color-gray-9a);--mt-color-text-secondary-solid: var(--mt-color-gray-9a-solid);--mt-color-text-tertiary: var(--mt-color-gray-7a);--mt-color-text-quaternary: var(--mt-color-gray-5a);--mt-color-text-quaternary-solid: var(--mt-color-gray-5a-solid);--mt-color-text-inverted: var(--mt-color-base-white);--mt-color-text-static-dark: var(--mt-color-gray-13);--mt-color-text-static-dark-secondary: var(--mt-color-gray-9a);--mt-color-text-destructive: var(--mt-color-red-8);--mt-color-text-destructive-secondary: var(--mt-color-red-9a);--mt-color-text-destructive-tertiary: var(--mt-color-red-5a);--mt-color-text-success: var(--mt-color-green-8);--mt-color-text-warning: var(--mt-color-orange-8);--mt-color-text-accent-blue-inverted: var(--mt-color-blue-11);--mt-color-text-accent-blue-secondary: var(--mt-color-blue-7a);--mt-color-text-accent-blue-tertiary: var(--mt-color-blue-5a);--mt-color-text-accent-green: var(--mt-color-green-11);--mt-color-text-accent-green-inverted: var(--mt-color-green-11);--mt-color-text-accent-green-secondary: var(--mt-color-green-7a);--mt-color-text-accent-orange-inverted: var(--mt-color-orange-11);--mt-color-text-accent-orange-secondary: var(--mt-color-orange-7a);--mt-color-text-accent-red-inverted: var(--mt-color-red-11);--mt-color-text-accent-red-secondary: var(--mt-color-red-7a);--mt-color-text-accent-purple-inverted: var(--mt-color-purple-11);--mt-color-text-accent-purple-secondary: var(--mt-color-purple-7a);--mt-color-icon-tertiary: var(--mt-color-gray-6);--mt-color-icon-quaternary: var(--mt-color-gray-4);--mt-color-shadow-xs: var(--mt-shadow-xs-light);--mt-color-shadow-tooltip-sm: var(--mt-shadow-tooltip-sm-light);--mt-color-focus-light: var(--mt-focus-light-light);--mt-color-focus-accent: var(--mt-focus-accent-light);--mt-color-focus-light-destructive: var(--mt-focus-light-destructive-light)}:is(.dark,.dark-theme){--mt-color-red-1-focus: var(--mt-color-red-1-focus);--mt-color-brand-1a: var(--mt-color-green-1);--mt-color-brand-7: var(--mt-color-green-7);--mt-color-brand-10: var(--mt-color-green-4);--mt-color-brand-4a: var(--mt-color-green-4);--mt-color-brand-11a: var(--mt-color-green-11);--mt-color-surface-inverted: var(--mt-color-base-white);--mt-color-surface-neutral: var(--mt-color-gray-13);--mt-color-surface-neutral-subtle: var(--mt-color-gray-12);--mt-color-surface-warning: var(--mt-color-orange-13);--mt-color-surface-info-accent: var(--mt-color-blue-8);--mt-color-primary-hover: var(--mt-color-gray-2);--mt-color-primary-disabled: var(--mt-color-white-2);--mt-color-button-secondary: var(--mt-color-gray-13);--mt-color-button-secondary-hover: var(--mt-color-gray-12);--mt-color-button-tertiary: var(--mt-color-white-1);--mt-color-tertiary-hover: var(--mt-color-white-2);--mt-color-ghost: var(--mt-color-base-transparent);--mt-color-ghost-hover: var(--mt-color-white-2);--mt-color-destructive-hover: var(--mt-color-red-9);--mt-color-destructive-disabled: var(--mt-color-red-2a);--mt-color-destructive-secondary-hover: var(--mt-color-gray-13);--mt-color-button-destructive-tertiary: var(--mt-color-white-1);--mt-color-destructive-tertiary-hover: var(--mt-color-white-2);--mt-color-destructive-ghost-hover: var(--mt-color-white-1);--mt-color-badge-gray: var(--mt-color-white-3);--mt-color-badge-gray-accent: var(--mt-color-gray-7);--mt-color-badge-blue: var(--mt-color-blue-5a);--mt-color-badge-blue-disabled: var(--mt-color-blue-3a);--mt-color-badge-green: var(--mt-color-green-5a);--mt-color-badge-green-disabled: var(--mt-color-green-3a);--mt-color-badge-orange: var(--mt-color-orange-4a);--mt-color-badge-orange-disabled: var(--mt-color-orange-3a);--mt-color-badge-red: var(--mt-color-red-5a);--mt-color-badge-red-disabled: var(--mt-color-red-3a);--mt-color-badge-purple: var(--mt-color-purple-5a);--mt-color-badge-purple-disabled: var(--mt-color-purple-3a);--mt-color-badge-purple-accent: var(--mt-color-purple-8);--mt-color-badge-white-disabled: var(--mt-color-white-6);--mt-color-badge-surface: var(--mt-color-gray-12);--mt-color-accent-blue-accent: var(--mt-color-blue-9);--mt-color-accent-blue-subtle: var(--mt-color-blue-12);--mt-color-accent-gray-accent: var(--mt-color-gray-9);--mt-color-accent-green: var(--mt-color-green-13);--mt-color-accent-green-accent: var(--mt-color-green-9);--mt-color-accent-green-subtle: var(--mt-color-green-12);--mt-color-accent-orange-subtle: var(--mt-color-orange-12);--mt-color-accent-orange-accent: var(--mt-color-orange-9);--mt-color-accent-red: var(--mt-color-red-13);--mt-color-accent-red-subtle: var(--mt-color-red-12);--mt-color-accent-red-accent: var(--mt-color-red-9);--mt-color-accent-purple: var(--mt-color-purple-13);--mt-color-accent-purple-subtle: var(--mt-color-purple-12);--mt-color-accent-purple-accent: var(--mt-color-purple-8);--mt-color-checkbox-disabled: var(--mt-color-gray-11);--mt-color-toggle-default: var(--mt-color-gray-9);--mt-color-toggle-hover: var(--mt-color-gray-8);--mt-color-toggle-active-hover: var(--mt-color-green-9);--mt-color-toggle-active-disabled: var(--mt-color-green-11);--mt-color-toggle-handle-disabled: var(--mt-color-gray-10);--mt-color-border-action-normal: var(--mt-color-white-3);--mt-color-border-action-hover: var(--mt-color-white-4);--mt-color-border-action-focus: var(--mt-color-white-13);--mt-color-border-action-focus-destructive-light: var(--mt-color-red-6);--mt-color-border-action-destructive: var(--mt-color-red-4a);--mt-color-border-action-destructive-hover: var(--mt-color-red-5a);--mt-color-border-action-success: var(--mt-color-green-4a);--mt-color-border-base-warning: var(--mt-color-orange-4a);--mt-color-border-base-destructive: var(--mt-color-red-4a);--mt-color-border-base-alpha: var(--mt-color-gray-2a);--mt-color-border-base-alpha-white: var(--mt-color-white-3);--mt-color-text-primary: var(--mt-color-base-white);--mt-color-text-secondary: var(--mt-color-gray-4);--mt-color-text-secondary-solid: var(--mt-color-gray-5a-solid);--mt-color-text-tertiary: var(--mt-color-white-7);--mt-color-text-quaternary: var(--mt-color-white-5);--mt-color-text-quaternary-solid: var(--mt-color-white-5-solid);--mt-color-text-inverted: var(--mt-color-base-dark-1);--mt-color-text-static-dark: var(--mt-color-gray-13);--mt-color-text-static-dark-secondary: var(--mt-color-gray-9a);--mt-color-text-destructive: var(--mt-color-red-8);--mt-color-text-destructive-secondary: var(--mt-color-red-9a);--mt-color-text-destructive-tertiary: var(--mt-color-red-6a);--mt-color-text-success: var(--mt-color-green-8);--mt-color-text-warning: var(--mt-color-orange-8);--mt-color-text-accent-blue-inverted: var(--mt-color-blue-6);--mt-color-text-accent-blue-secondary: var(--mt-color-blue-5a);--mt-color-text-accent-blue-tertiary: var(--mt-color-blue-3a);--mt-color-text-accent-green: var(--mt-color-green-9);--mt-color-text-accent-green-inverted: var(--mt-color-green-6);--mt-color-text-accent-green-secondary: var(--mt-color-green-5a);--mt-color-text-accent-orange-inverted: var(--mt-color-orange-6);--mt-color-text-accent-orange-secondary: var(--mt-color-orange-5a);--mt-color-text-accent-red-inverted: var(--mt-color-red-6);--mt-color-text-accent-red-secondary: var(--mt-color-red-5a);--mt-color-text-accent-purple-inverted: var(--mt-color-purple-6);--mt-color-text-accent-purple-secondary: var(--mt-color-purple-5a);--mt-color-icon-tertiary: var(--mt-color-icon-gray-2);--mt-color-icon-quaternary: var(--mt-color-icon-gray-3);--mt-color-shadow-xs: var(--mt-shadow-xs-dark);--mt-color-shadow-tooltip-sm: var(--mt-shadow-tooltip-sm-dark);--mt-color-focus-light: var(--mt-focus-light-dark);--mt-color-focus-accent: var(--mt-focus-accent-dark);--mt-color-focus-light-destructive: var(--mt-focus-light-destructive-dark)}:is(.dark,.dark-theme),:is(.dark,.dark-theme) :where(:root){color-scheme:dark}

package/dist/utils/cn.js

@@ -0,0 +1,7 @@
+import n from "clsx";
+function t(...r) {
+  return n(r);
+}
+export {
+  t as cn
+};

package/package.json

@@ -1,107 +1,80 @@
 {
   "name": "@mintlify/components",
-  "version": "0.3.15",
-  "description": "Open-source library of UI components made with React and TailwindCSS.",
-  "main": "./dist/index.js",
+  "version": "0.4.0",
+  "description": "Mintlify Headless UI components",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "style": "./dist/main.css",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mintlify/components"
+    "url": "https://github.com/mintlify/components.git",
+    "directory": "components/packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/mintlify/components/issues"
   },
+  "homepage": "https://github.com/mintlify/components#readme",
+  "license": "MIT",
+  "author": "Mintlify, Inc.",
   "keywords": [
     "react",
+    "components",
+    "ui",
+    "headless",
+    "mintlify",
+    "design-system",
     "tailwindcss"
   ],
-  "license": "MIT",
-  "scripts": {
-    "build": "webpack",
-    "format": "prettier \"**/*.{css,js,ts,tsx,md}\" --write",
-    "format:check": "prettier \"**/*.{css,js,ts,tsx,md}\" --check",
-    "prepare": "husky install && yarn build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "test-storybook": "test-storybook",
-    "lint": "eslint src --cache"
+  "engines": {
+    "node": ">=20.0.0"
   },
-  "author": "Mintlify",
-  "bugs": {
-    "url": "https://github.com/mintlify/components/issues"
+  "scripts": {
+    "dev": "pnpm generate:theme && vite build --watch",
+    "build": "pnpm generate:theme && tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:css": "stylelint '**/*.css'",
+    "lint:all": "pnpm lint && pnpm lint:css",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "generate:theme": "tsx scripts/generate-theme-css.ts"
   },
   "peerDependencies": {
-    "@headlessui/react": "^1.7",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@headlessui/react": "^1.7.11",
-    "@mintlify/eslint-config": "^1.0.3",
-    "@mintlify/eslint-config-typescript": "^1.0.7",
-    "@mintlify/prettier-config": "1.0.2",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/test-runner": "^0.9.4",
-    "@storybook/testing-library": "^0.0.13",
-    "@tailwindcss/typography": "^0.5.7",
-    "@trivago/prettier-plugin-sort-imports": "3.x",
-    "@types/lodash.set": "^4.3.7",
-    "@types/react": "^18.0.21",
-    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
-    "autoprefixer": "^10.4.8",
-    "babel-loader": "^8.3.0",
-    "chromatic": "^6.9.0",
-    "css-loader": "^6.7.2",
-    "cssnano": "^5.1.14",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "glob-parent": "^6.0.2",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.1.1",
-    "mini-css-extract-plugin": "^2.6.1",
-    "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.4.19",
-    "postcss-loader": "^7.0.2",
-    "postcss-preset-env": "^7.8.3",
-    "prettier": "2.x",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "source-map-loader": "^4.0.0",
-    "storybook-addon-themes": "^6.1.0",
-    "style-loader": "^3.3.1",
-    "tailwind-children": "^0.5.0",
-    "tailwindcss": "^3.2.4",
-    "trim": "^1.0.1",
-    "trim-newlines": "^4.0.2",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.9.4",
-    "uuid": "^9.0.0",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "assert": "^2.0.0",
-    "clsx": "^1.2.1",
-    "is-absolute-url": "^4.0.1",
-    "lodash.set": "^4.3.2"
+    "clsx": "^2.1.1"
   },
-  "lint-staged": {
-    "*.+(ts|tsx)": "eslint --cache --fix --max-warnings 0",
-    "*.{css,js,ts,tsx,md}": "prettier --write"
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^10.0.8",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^10.0.8",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.1",
+    "vite-plugin-dts": "^4.3.0"
   }
 }

package/.eslintrc.json

@@ -1,11 +0,0 @@
-{
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "@mintlify/eslint-config-typescript"
-  ],
-  "rules": {
-    "react/prop-types": "off"
-  }
-}

package/.github/dependabot.yml

@@ -1,10 +0,0 @@
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "daily"
-    allow:
-      - dependency-name: "@mintlify/*"

package/.github/workflows/chromatic.yaml

@@ -1,27 +0,0 @@
-# Workflow name
-name: "Chromatic"
-
-# Event for the workflow
-on: push
-
-# List of jobs
-jobs:
-  chromatic-deployment:
-    # Operating System
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      - uses: actions/checkout@v1
-      - name: Install dependencies
-        run: yarn
-      - name: Publish to Chromatic
-        if: github.ref != 'refs/heads/main'
-        uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-      - name: Publish to Chromatic auto-accepting changes
-        if: github.ref == 'refs/heads/main'
-        uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          autoAcceptChanges: true

package/.github/workflows/code-style-checks.yaml

@@ -1,13 +0,0 @@
-name: Code Style Checks
-
-on: push
-
-jobs:
-  style-checks:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Install modules
-        run: yarn
-      - name: Check formatting
-        run: yarn format:check

package/.github/workflows/sanity.yml

@@ -1,13 +0,0 @@
-name: Sanity Check
-
-on: push
-
-jobs:
-  sanity-check:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Install modules
-        run: yarn
-      - name: Check build
-        run: yarn build

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-yarn lint-staged