@mintlify/components 0.3.14 → 0.4.0

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.14",
-  "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

package/.prettierignore

@@ -1,49 +0,0 @@
-# we are using yarn in this project
-package.lock
-
-# user editor preferences
-/.vscode/
-/.idea/
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-/public/feeds/
-
-# production
-/build
-/dist
-
-# generated files
-/public/*
-/src/pages/*
-!/src/pages/api
-/src/pages/api/*.mdx
-!/src/pages/*.tsx
-!/src/pages/*.ts
-/src/config.json
-/src/openapi.json
-
-# misc
-.DS_Store
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-build-storybook.log
-
-# local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local

package/.prettierrc

@@ -1 +0,0 @@
-"@mintlify/prettier-config/config.js"

package/CODEOWNERS

@@ -1 +0,0 @@
-* @mintlify/engineering

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Mintlify, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/Accordion/Accordion.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-declare function Accordion({ title, description, defaultOpen, icon, onChange, variant, children, }: {
-    /** The main text of the Accordion shown in bold */
-    title: string;
-    /** Text under the title */
-    description?: string;
-    /** Whether the Accordion is open initially */
-    defaultOpen?: boolean;
-    /** Icon to display to the left */
-    icon?: ReactNode;
-    /** Callback when the Accordion is clicked with the new open state */
-    onChange?: (open: boolean) => void;
-    /** The Accordion UI style */
-    variant?: 'rounded' | 'minimalist';
-    /** The Accordion contents */
-    children: ReactNode;
-}): JSX.Element;
-export default Accordion;

package/dist/Accordion/AccordionCover.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-declare function AccordionItemCover({ title, description, open, setOpen, icon, coverClass, }: {
-    title: string;
-    description?: string;
-    open: boolean;
-    setOpen: (open: boolean) => any;
-    icon?: ReactNode;
-    coverClass: string;
-}): JSX.Element;
-export default AccordionItemCover;

package/dist/Accordion/AccordionGroup.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-declare function AccordionGroup({ children }: {
-    children: ReactNode;
-}): JSX.Element;
-export default AccordionGroup;

package/dist/Accordion/getAccordionStyleFromType.d.ts

@@ -1,5 +0,0 @@
-export default function getAccordionStyleFromVariant(variant: string): {
-    parentClass: string;
-    coverClass: string;
-    contentClass: string;
-};

package/dist/Accordion/index.d.ts

@@ -1,3 +0,0 @@
-import Accordion from './Accordion';
-import AccordionGroup from './AccordionGroup';
-export { Accordion, AccordionGroup };

package/dist/Api/ApiPlayground.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-import { ParamGroup, RequestMethods } from './types';
-export declare function ApiPlayground({ method, paramGroups, paramValues, isSendingRequest, onChangeParamValues, onSendRequest, header, response, }: {
-    /** Request method. */
-    method: RequestMethods;
-    /** Array of param groups to show as tabs for input. */
-    paramGroups: ParamGroup[];
-    /** Values to show in the ApiInputs. Key is the param group name. */
-    paramValues: Record<string, Record<string, any>>;
-    /** Whether you are currently sending a request.
-     *  The Send Request button is disabled and the response is hidden while this is true. */
-    isSendingRequest: boolean;
-    /** Callback when the user changes a parameter's value. */
-    onChangeParamValues: (paramValues: Record<string, Record<string, any>>) => void;
-    /** Callback when the user clicks the Send Request button. */
-    onSendRequest: () => void;
-    /** Header to show above parameter inputs. */
-    header?: ReactNode;
-    /** Response to show underneath the playground.
-     *  This component does not automatically syntax highlight code. */
-    response?: ReactNode;
-}): JSX.Element;

package/dist/Api/BaseUrlDropdown.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare function BaseUrlDropdown({ baseUrls, defaultValue, onChange, }: {
-    /** Array of base URLs to select from. Component is hidden when the array is empty or only has one value. */
-    baseUrls: string[];
-    /** Initially selected base URL. */
-    defaultValue: string | undefined;
-    /** Function called when the user selects a different base URL. */
-    onChange: (baseUrl: string) => void;
-}): JSX.Element | null;

package/dist/Api/RequestMethodBubble.d.ts

@@ -1,4 +0,0 @@
-import { RequestMethods } from './types';
-export declare const RequestMethodBubble: ({ method }: {
-    method: RequestMethods;
-}) => JSX.Element;

package/dist/Api/RequestPathHeader.d.ts

@@ -1,13 +0,0 @@
-import { RequestMethods } from './types';
-export declare const RequestPathHeader: ({ method, path, baseUrls, defaultBaseUrl, onBaseUrlChange, }: {
-    /** Request method. */
-    method: RequestMethods;
-    /** Path text to show beside the request method bubble. */
-    path: string;
-    /** Array of baseUrls to select from. Dropdown is hidden when there are zero or one options. */
-    baseUrls?: string[] | undefined;
-    /** What value of baseUrl the dropdown should show as selected before the user has changed the selection. */
-    defaultBaseUrl?: string | undefined;
-    /** Callback when the user changes the baseUrl in the dropdown. */
-    onBaseUrlChange: (baseUrl: string) => void;
-}) => JSX.Element;

package/dist/Api/index.d.ts

@@ -1,4 +0,0 @@
-import { ApiPlayground } from './ApiPlayground';
-import { RequestMethodBubble } from './RequestMethodBubble';
-import { RequestPathHeader } from './RequestPathHeader';
-export { ApiPlayground, RequestMethodBubble, RequestPathHeader };

package/dist/Api/inputs/AddArrayItemButton.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare function AddArrayItemButton({ onClick }: {
-    onClick: () => void;
-}): JSX.Element;

package/dist/Api/inputs/ApiInput.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { ApiInputValue, Param } from '../types';
-/**
- *  ApiInput provides a UI to receive inputs from the user for API calls.
- *  The user is responsible for updating value when onChangeParam is called.
- *  ApiInput doesn't store the value internally so components don't work
- *  when the user doesn't track the state.
- */
-export declare function ApiInput({ param, value, onChangeParam, onDeleteArrayItem, parentInputs, }: {
-    param: Param;
-    value: ApiInputValue;
-    onChangeParam: (parentInputs: string[], paramName: string, value: ApiInputValue) => void;
-    onDeleteArrayItem?: () => void;
-    parentInputs?: string[];
-}): JSX.Element;

package/dist/Api/inputs/InputDropdown.d.ts

@@ -1,5 +0,0 @@
-export declare const InputDropdown: ({ options, value, onInputChange, }: {
-    options: string[];
-    value: string | undefined;
-    onInputChange: (newValue: string) => void;
-}) => JSX.Element;

package/dist/Api/types.d.ts

@@ -1,16 +0,0 @@
-export type RequestMethods = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'COPY' | 'HEAD' | 'OPTIONS' | 'LINK' | 'UNLINK' | 'PURGE' | 'LOCK' | 'UNLOCK' | 'PROPFIND' | 'VIEW';
-export type ParamGroup = {
-    name: string;
-    params: Param[];
-};
-export type Param = {
-    name: string;
-    placeholder?: string;
-    required?: boolean;
-    type?: string;
-    enum?: string[];
-    format?: string;
-    group?: string;
-    properties?: Param[];
-};
-export type ApiInputValue = string | number | boolean | File | string[] | number[] | boolean[] | File[] | undefined | null;

package/dist/AppearFromTop.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function AppearFromTop({ show, className, children, }: {
-    show: boolean;
-    className?: string;
-    children: any;
-}): JSX.Element;

package/dist/Button.d.ts

@@ -1,42 +0,0 @@
-import { ElementType, ComponentPropsWithoutRef, Ref } from 'react';
-type ColorInterface = keyof typeof colors;
-declare const colors: {
-    indigo: string[];
-    pink: string[];
-    sky: string[];
-    blue: string[];
-    gray: string[];
-};
-export interface ButtonPropsBase<T> {
-    /**
-     * Color of the button. Default is `gray`.
-     */
-    color?: ColorInterface;
-    /**
-     * Color when in dark mode. Default is the same as the `color` prop.
-     */
-    darkColor?: ColorInterface;
-    /**
-     * Whether to reverse the layout.
-     */
-    reverse?: boolean;
-    /**
-     * Type of element to be rendered.
-     */
-    as?: T;
-    /**
-     * If provided, will render as an anchor element.
-     */
-    href?: string;
-    /**
-     * Ref of the element to be rendered.
-     */
-    mRef?: Ref<T | undefined>;
-}
-/**
- * Props for the `Button` component
- * @typeParam T - Type of the Element rendered by the button.
- */
-export type ButtonProps<T extends ElementType> = ButtonPropsBase<T> & Omit<ComponentPropsWithoutRef<T>, keyof ButtonPropsBase<T>>;
-export declare function Button<T extends ElementType = 'button'>({ as, color, darkColor, reverse, children, className, mRef, ...props }: ButtonProps<T>): JSX.Element;
-export {};

package/dist/Callouts.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-type CalloutContent = {
-    children: ReactNode;
-};
-export declare function Info({ children }: CalloutContent): JSX.Element;
-export declare function Warning({ children }: CalloutContent): JSX.Element;
-export declare function Note({ children }: CalloutContent): JSX.Element;
-export declare function Tip({ children }: CalloutContent): JSX.Element;
-export declare function Check({ children }: CalloutContent): JSX.Element;
-export {};

package/dist/Card.d.ts

@@ -1,33 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from 'react';
-export interface CardPropsBase<T> {
-    /**
-     * Large title above children.
-     */
-    title?: string;
-    /**
-     * Icon to the top-left of the title. Can be a ReactNode or a string equal to an image source.
-     */
-    icon?: ReactNode;
-    /**
-     * If provided, will render an image to the top of the card.
-     */
-    image?: string;
-    /**
-     * Type of element to be rendered.
-     */
-    as?: T;
-    /**
-     * If provided, will render as an anchor element.
-     */
-    href?: string;
-    /**
-     * Ref of the element to be rendered.
-     */
-    mRef?: Ref<T | undefined>;
-}
-/**
- * Props for the `Card` component
- * @typeParam T - Type of the Element rendered by the card.
- */
-export type CardProps<T extends ElementType> = CardPropsBase<T> & Omit<ComponentPropsWithoutRef<T>, keyof CardPropsBase<T>>;
-export declare function Card<T extends ElementType = 'div'>({ title, icon, image, className, children, as, mRef, ...props }: CardProps<T>): JSX.Element;

package/dist/CardGroup.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export declare function CardGroup({ children, cols }: {
-    children: ReactNode;
-    cols?: 1 | 2 | 3 | 4;
-}): JSX.Element;