@mintlify/components 0.4.5 → 0.4.6

package/dist/components/badge/badge.js

@@ -1,52 +1,44 @@
-import { jsxs as p, jsx as g } from "react/jsx-runtime";
-import { cn as f } from "../../utils/cn.js";
+import { jsx as m, jsxs as l } from "react/jsx-runtime";
+import { cn as b } from "../../utils/cn.js";
 /* empty css          */
-import { Icon as l } from "../icon/icon.js";
+import { Icon as o } from "../icon/icon.js";
 function y({
-  children: d,
+  children: n,
   color: e = "gray",
-  shape: m = "rounded",
-  size: a = "md",
-  stroke: r = !1,
+  shape: g = "rounded",
+  size: t = "md",
+  stroke: p = !1,
   disabled: s = !1,
-  icon: t,
-  iconType: n,
-  iconLibrary: i,
-  className: c
+  icon: a,
+  className: c,
+  ...i
 }) {
-  const o = typeof t == "string" ? /* @__PURE__ */ g(
-    l,
-    {
-      icon: t,
-      iconType: n,
-      iconLibrary: i,
-      className: "mt-badge-icon",
-      size: b[a]
-    }
-  ) : t;
-  return /* @__PURE__ */ p(
+  const d = typeof a == "string" ? /* @__PURE__ */ m(o, { icon: a, className: "mt-badge-icon", size: r[t] }) : a && typeof a == "object" && "icon" in a ? /* @__PURE__ */ m(o, { ...a, className: "mt-badge-icon", size: r[t] }) : a;
+  return /* @__PURE__ */ l(
     "span",
     {
-      "data-shape": m,
-      "data-stroke": r,
+      "data-slot": "badge",
+      "data-shape": g,
+      "data-stroke": p,
       "data-disabled": s,
       "data-color": e,
-      "data-size": a,
+      "data-size": t,
       "aria-disabled": s,
-      className: f(
+      className: b(
         "mt-badge",
         `mt-badge-${e}`,
-        `mt-badge-${a}`,
+        `mt-badge-${t}`,
         c
       ),
+      ...i,
       children: [
-        !!o && o,
-        d
+        !!d && d,
+        n
       ]
     }
   );
 }
-const b = {
+const r = {
   xs: 12,
   sm: 14,
   md: 16,

package/dist/components/callout/callout.css

@@ -0,0 +1 @@
+.mt-callout{display:flex;gap:.75rem;padding:1rem 1.25rem;border-radius:.75rem;border-width:1px;border-style:solid;margin:1rem 0;background-color:var(--callout-bg, rgb(250 250 250 / 50%));border-color:var(--callout-border, rgb(113 113 122 / 20%));color:var(--callout-text, rgb(24 24 27));--callout-icon-color: rgb(161 161 170)}:is(.dark,.dark-theme) .mt-callout{background-color:var(--callout-bg, rgb(113 113 122 / 10%));border-color:var(--callout-border, rgb(113 113 122 / 30%));color:var(--callout-text, rgb(228 228 231));--callout-icon-color: rgb(212 212 216)}.mt-callout-icon-wrapper{flex-shrink:0;display:flex;align-items:flex-start;padding-top:.125rem}.mt-callout-icon{color:var(--callout-icon-color)}.mt-callout-content{flex:1;min-width:0;font-size:.875rem;line-height:1.5}.mt-callout-body{color:var(--callout-text)}:is(.dark,.dark-theme) .mt-callout-custom .mt-callout-body{color:var(--dark-callout-text)}.mt-callout-info{--callout-bg: rgb(250 250 250);--callout-border: rgb(113 113 122 / 20%);--callout-text: rgb(24 24 27);--callout-icon-color: rgb(161 161 170)}:is(.dark,.dark-theme) .mt-callout-info{--callout-bg: rgb(113 113 122, 10%);--callout-border: rgb(113 113 122, 30%);--callout-text: rgb(228 228 231);--callout-icon-color: rgb(212 212 216)}.mt-callout-warning{--callout-bg: rgb(255 251 235 / 50%);--callout-border: rgb(245 158 11 / 20%);--callout-text: rgb(120 53 15);--callout-icon-color: rgb(251 191 36)}:is(.dark,.dark-theme) .mt-callout-warning{--callout-bg: rgb(245 158 11 / 10%);--callout-border: rgb(245 158 11 / 30%);--callout-text: rgb(253 230 138);--callout-icon-color: rgb(252 211 77 / 80%)}.mt-callout-success{--callout-bg: rgb(236 253 245 / 50%);--callout-border: rgb(16 185 129 / 20%);--callout-text: rgb(6 78 59);--callout-icon-color: rgb(22 163 74)}:is(.dark,.dark-theme) .mt-callout-success{--callout-bg: rgb(16 185 129 / 10%);--callout-border: rgb(16 185 129 / 30%);--callout-text: rgb(167 243 208);--callout-icon-color: rgb(74 222 128 / 80%)}.mt-callout-danger{--callout-bg: rgb(254 242 242 / 50%);--callout-border: rgb(239 68 68 / 20%);--callout-text: rgb(127 29 29);--callout-icon-color: rgb(220 38 38)}:is(.dark,.dark-theme) .mt-callout-danger{--callout-bg: rgb(239 68 68 / 10%);--callout-border: rgb(239 68 68 / 30%);--callout-text: rgb(252 165 165);--callout-icon-color: rgb(248 113 113 / 80%)}.mt-callout-note{--callout-bg: rgb(240 249 255 / 50%);--callout-border: rgb(14 165 233 / 20%);--callout-text: rgb(12 74 110);--callout-icon-color: rgb(14 165 233)}:is(.dark,.dark-theme) .mt-callout-note{--callout-bg: rgb(14 165 233 / 10%);--callout-border: rgb(14 165 233 / 30%);--callout-text: rgb(186 230 253);--callout-icon-color: rgb(14 165 233)}.mt-callout-tip{--callout-bg: rgb(236 253 245 / 50%);--callout-border: rgb(16 185 129 / 20%);--callout-text: rgb(6 78 59);--callout-icon-color: rgb(5 150 105)}:is(.dark,.dark-theme) .mt-callout-tip{--callout-bg: rgb(16 185 129 / 10%);--callout-border: rgb(16 185 129 / 30%);--callout-text: rgb(167 243 208);--callout-icon-color: rgb(52 211 153 / 80%)}

package/dist/components/callout/callout.js

@@ -0,0 +1,139 @@
+import { jsx as l, jsxs as y } from "react/jsx-runtime";
+import { cn as m } from "../../utils/cn.js";
+import b from "color";
+/* empty css            */
+import { Icon as r } from "../icon/icon.js";
+function d({
+  children: n,
+  variant: o,
+  color: t,
+  className: c,
+  style: a,
+  ...u
+}) {
+  let s = {};
+  if (t) {
+    const e = b(t), i = e.isDark(), f = e.lighten(0.5), C = e.darken(0.5);
+    s = {
+      borderColor: `${t}33`,
+      backgroundColor: `${t}1a`,
+      "--callout-border": i ? `${t}66` : `${t}4d`,
+      "--callout-bg": i ? `${t}4d` : `${t}1a`,
+      "--callout-text": C.hex(),
+      "--callout-icon-color": t,
+      "--dark-callout-text": f.hex()
+    };
+  }
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "callout",
+      "data-variant": o,
+      className: m(
+        "mt-callout",
+        o && `mt-callout-${o}`,
+        t && "mt-callout-custom",
+        c
+      ),
+      role: "note",
+      "aria-label": o ? `${o} callout` : "callout",
+      style: { ...s, ...a },
+      ...u,
+      children: n
+    }
+  );
+}
+function p({
+  children: n,
+  icon: o,
+  className: t,
+  ...c
+}) {
+  const a = n || (typeof o == "string" ? /* @__PURE__ */ l(r, { icon: o, className: "mt-callout-icon", size: 16 }) : o && typeof o == "object" && "icon" in o ? /* @__PURE__ */ l(r, { ...o, className: "mt-callout-icon", size: 16 }) : null);
+  return /* @__PURE__ */ l("div", { className: m("mt-callout-icon-wrapper", t), ...c, children: a });
+}
+function g({
+  children: n,
+  className: o,
+  ...t
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "callout-content",
+      className: m("mt-callout-content", o),
+      ...t,
+      children: /* @__PURE__ */ l("div", { "data-slot": "callout-content-body", className: "mt-callout-body", children: n })
+    }
+  );
+}
+function x({
+  children: n,
+  variant: o,
+  icon: t,
+  color: c,
+  className: a,
+  style: u,
+  ...s
+}) {
+  const e = o ? h(o) : null, i = typeof t == "string" ? /* @__PURE__ */ l(r, { icon: t, className: "mt-callout-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ l(r, { ...t, className: "mt-callout-icon", size: 16 }) : t !== void 0 ? t : e ? /* @__PURE__ */ l(
+    r,
+    {
+      icon: e.icon,
+      className: "mt-callout-icon",
+      size: 16,
+      iconType: e.iconType
+    }
+  ) : null;
+  return /* @__PURE__ */ y(
+    d,
+    {
+      "data-slot": "callout-root",
+      variant: o,
+      color: c,
+      className: a,
+      style: u,
+      ...s,
+      children: [
+        i && /* @__PURE__ */ l(p, { children: i }),
+        /* @__PURE__ */ l(g, { children: n })
+      ]
+    }
+  );
+}
+function h(n) {
+  return {
+    info: {
+      icon: "circle-info",
+      iconType: "regular"
+    },
+    warning: {
+      icon: "triangle-exclamation",
+      iconType: "regular"
+    },
+    success: {
+      icon: "check",
+      iconType: "regular"
+    },
+    danger: {
+      icon: "hexagon-exclamation",
+      iconType: "regular"
+    },
+    note: {
+      icon: "circle-exclamation",
+      iconType: "regular"
+    },
+    tip: {
+      icon: "lightbulb",
+      iconType: "regular"
+    }
+  }[n];
+}
+const j = Object.assign(x, {
+  Root: d,
+  Icon: p,
+  Content: g
+});
+export {
+  j as Callout
+};

package/dist/components/icon/icon.js

@@ -1,32 +1,109 @@
-import { jsx as m } from "react/jsx-runtime";
-import { BaseIcon as c } from "./base-icon.js";
-/* empty css         */
-function d({
-  icon: i,
-  iconType: o,
-  iconLibrary: r,
-  color: n,
-  size: t = 16,
-  className: e,
-  style: l
+import { jsx as u } from "react/jsx-runtime";
+import { cn as m } from "../../utils/cn.js";
+import { isAbsoluteUrl as c } from "../../utils/isAbsoluteUrl.js";
+import { MINTLIFY_ICONS_CDN_URL as o } from "../../constants/index.js";
+import { FONT_AWESOME_BRANDS as f } from "../../constants/font-awesome-brands.js";
+import { IS_DEV as $ } from "../../constants/env.js";
+function N({
+  icon: t,
+  iconType: r,
+  iconLibrary: s,
+  color: a,
+  size: e = 16,
+  className: n,
+  style: i,
+  ...l
 }) {
-  return /* @__PURE__ */ m(
-    c,
+  if (r && !d.includes(r))
+    return $ && console.warn(
+      `Invalid iconType ${r} expected a string equal to one of: ${d.join(
+        ", "
+      )}`
+    ), null;
+  if (typeof t == "string" && (c(t) || t.startsWith("/"))) {
+    if (t.startsWith(o) || t.startsWith("https://mintlify.b-cdn.net")) {
+      const k = l;
+      return /* @__PURE__ */ u(
+        "svg",
+        {
+          className: m("mt-icon", n),
+          style: {
+            WebkitMaskImage: `url(${t})`,
+            WebkitMaskRepeat: "no-repeat",
+            WebkitMaskPosition: "center",
+            maskImage: `url(${t})`,
+            maskRepeat: "no-repeat",
+            maskPosition: "center",
+            maskSize: "100%",
+            backgroundColor: a || "currentColor",
+            width: e,
+            height: e,
+            ...i
+          },
+          ...k
+        }
+      );
+    }
+    const h = l;
+    return /* @__PURE__ */ u(
+      "img",
+      {
+        src: t,
+        alt: t,
+        className: m("mt-icon", n),
+        style: {
+          width: e,
+          height: e,
+          ...i
+        },
+        ...h
+      }
+    );
+  }
+  const g = v(t.toLowerCase(), r, s), p = l;
+  return /* @__PURE__ */ u(
+    "svg",
     {
-      icon: i,
-      iconType: o,
-      iconLibrary: r,
-      color: n,
-      size: t,
-      className: e,
+      className: m("mt-icon", n),
       style: {
-        display: "inline-block",
-        verticalAlign: "middle",
-        ...l
-      }
+        WebkitMaskImage: `url(${g})`,
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskPosition: "center",
+        maskImage: `url(${g})`,
+        maskRepeat: "no-repeat",
+        maskPosition: "center",
+        maskSize: s === "lucide" ? "100%" : void 0,
+        backgroundColor: a || "currentColor",
+        width: e,
+        height: e,
+        ...i
+      },
+      ...p
     }
   );
 }
+function b(t) {
+  return t ? f.includes(t.toLowerCase()) : !1;
+}
+function v(t, r, s) {
+  return b(t) ? `${o}/v7.1.0/brands/${t}.svg` : s === "lucide" ? `${o}/lucide/v0.545.0/${t}.svg` : `${o}/v7.1.0/${r ?? "regular"}/${t}.svg`;
+}
+const R = ["fontawesome", "lucide"], d = [
+  "brands",
+  "duotone",
+  "light",
+  "regular",
+  "sharp-duotone-solid",
+  "sharp-light",
+  "sharp-regular",
+  "sharp-solid",
+  "sharp-thin",
+  "solid",
+  "thin"
+];
 export {
-  d as Icon
+  N as Icon,
+  v as getIconUrl,
+  R as iconLibraries,
+  d as iconTypes
 };

package/dist/constants/env.js

@@ -0,0 +1,4 @@
+const e = process.env.NODE_ENV === "development";
+export {
+  e as IS_DEV
+};

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import { CSSProperties } from 'react';
+import { HTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import { SVGAttributes } from 'react';
 
-export declare function Badge({ children, color, shape, size, stroke, disabled, icon, iconType, iconLibrary, className, }: BadgeProps): JSX_2.Element;
+export declare function Badge({ children, color, shape, size, stroke, disabled, icon, className, ...props }: BadgeProps): JSX_2.Element;
 
-export declare interface BadgeProps {
+export declare interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
     /**
      * @default "gray"
      */
@@ -29,62 +31,74 @@ export declare interface BadgeProps {
      */
     disabled?: boolean;
     /**
-     * Optional icon before content. String (icon name) or React node.
-     * see {@link Icon} for available icon sets.
-     * @example
-     * ```tsx
-     * <Badge icon="check" iconType="lucide">Verified</Badge>
-     * ```
+     * Icon before content. String (icon name) or IconProps object.
+     * @see {@link IconProps}
      */
-    icon?: ReactNode | string;
-    /**
-     * Icon set type when `icon` is a string.
-     * @see {@link IconType}
-     */
-    iconType?: IconType;
-    /**
-     * Icon library when `icon` is a string.
-     * @see {@link IconLibrary}
-     */
-    iconLibrary?: IconLibrary;
+    icon?: IconProp;
     className?: string;
     children: ReactNode;
 }
 
-export declare function BaseIcon({ icon, iconType, iconLibrary, color, size, className, style, }: BaseIconProps): JSX_2.Element | null;
+export declare const Callout: typeof CalloutComponent & {
+    Root: typeof CalloutRoot;
+    Icon: typeof CalloutIcon;
+    Content: typeof CalloutContent;
+};
+
+declare function CalloutComponent({ children, variant, icon, color, className, style, ...props }: CalloutProps): JSX_2.Element;
 
-export declare interface BaseIconProps {
-    /**
-     * Icon name or custom URL.
-     * Supports Font Awesome icons, Lucide icons, or any custom URL.
-     */
-    icon: string;
+declare function CalloutContent({ children, className, ...props }: CalloutContentProps): JSX_2.Element;
+
+export declare interface CalloutContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+
+declare function CalloutIcon({ children, icon, className, ...props }: CalloutIconProps): JSX_2.Element;
+
+export declare interface CalloutIconProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
     /**
-     * Icon style variant.
-     * @default "regular"
-     * @see {@link IconType}
+     * Icon before content. String (icon name) or IconProps object.
+     * @see {@link IconProp}
      */
-    iconType?: IconType;
+    icon?: string | Omit<IconProps, "size" | "className" | "style">;
+    className?: string;
+}
+
+export declare interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Icon library to use.
-     * @default "fontawesome"
-     * @see {@link IconLibrary}
+     * Callout variant.
+     * @see {@link CalloutVariant}
      */
-    iconLibrary?: IconLibrary;
+    variant?: CalloutVariant;
     /**
-     * Icon color.
-     * @default "currentColor"
+     * Icon before content. String (icon name) or IconProps object.
+     * @see {@link IconProp}
      */
+    icon?: IconProp;
     color?: string;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare function CalloutRoot({ children, variant, color, className, style, ...props }: CalloutRootProps): JSX_2.Element;
+
+export declare interface CalloutRootProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Icon size in pixels.
-     * @default 16
+     * Callout variant.
+     * @see {@link CalloutVariant}
      */
-    size?: number;
+    variant?: CalloutVariant;
+    color?: string;
+    children: ReactNode;
     className?: string;
     style?: CSSProperties;
 }
 
+export declare type CalloutVariant = "info" | "warning" | "success" | "danger" | "note" | "tip";
+
 export declare const colors: {
     "base-white": string;
     "base-dark-1": string;
@@ -421,17 +435,41 @@ export { focus_2 as focus }
 
 export declare function getIconUrl(icon: string, iconType?: IconType, iconLibrary?: IconLibrary): string;
 
-export declare function Icon({ icon, iconType, iconLibrary, color, size, className, style, }: IconProps): JSX_2.Element;
+export declare function Icon({ icon, iconType, iconLibrary, color, size, className, style, ...props }: IconProps): JSX_2.Element | null;
 
 export declare const iconLibraries: readonly ["fontawesome", "lucide"];
 
 export declare type IconLibrary = "fontawesome" | "lucide";
 
-export declare interface IconProps {
+declare type IconProp = ReactNode | string | Omit<IconProps, "size" | "className" | "style">;
+
+export declare interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, "color"> {
+    /**
+     * Icon name or custom URL.
+     * Supports Font Awesome icons, Lucide icons, or any custom URL.
+     */
     icon: string;
+    /**
+     * Icon style variant.
+     * @default "regular"
+     * @see {@link IconType}
+     */
     iconType?: IconType;
+    /**
+     * Icon library to use.
+     * @default "fontawesome"
+     * @see {@link IconLibrary}
+     */
     iconLibrary?: IconLibrary;
+    /**
+     * Icon color.
+     * @default "currentColor"
+     */
     color?: string;
+    /**
+     * Icon size in pixels.
+     * @default 16
+     */
     size?: number;
     className?: string;
     style?: CSSProperties;

package/dist/index.js

@@ -1,17 +1,17 @@
 /* empty css           */
 import { Badge as s } from "./components/badge/badge.js";
-import { Icon as n } from "./components/icon/icon.js";
-import { BaseIcon as p, getIconUrl as t, iconLibraries as f, iconTypes as m } from "./components/icon/base-icon.js";
-import { colors as x, designTokens as d, focus as g, shadows as I } from "./styles/design-tokens.js";
+import { Callout as c } from "./components/callout/callout.js";
+import { Icon as n, getIconUrl as p, iconLibraries as f, iconTypes as m } from "./components/icon/icon.js";
+import { colors as l, designTokens as x, focus as d, shadows as g } from "./styles/design-tokens.js";
 export {
   s as Badge,
-  p as BaseIcon,
+  c as Callout,
   n as Icon,
-  x as colors,
-  d as designTokens,
-  g as focus,
-  t as getIconUrl,
+  l as colors,
+  x as designTokens,
+  d as focus,
+  p as getIconUrl,
   f as iconLibraries,
   m as iconTypes,
-  I as shadows
+  g as shadows
 };

package/dist/styles.css

@@ -1 +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}
+: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)}@media(prefers-color-scheme:dark){:root{--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);color-scheme:dark}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Mintlify Headless UI components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,12 +61,14 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "color": "^5.0.3"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/react-vite": "^10.0.8",
     "@tailwindcss/postcss": "^4.1.17",
+    "@types/color": "^3.0.6",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

package/dist/components/icon/base-icon.js

@@ -1,98 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cn as u } from "../../utils/cn.js";
-import { isAbsoluteUrl as g } from "../../utils/isAbsoluteUrl.js";
-import { MINTLIFY_ICONS_CDN_URL as a } from "../../constants/index.js";
-import { FONT_AWESOME_BRANDS as p } from "../../constants/font-awesome-brands.js";
-function v({
-  icon: t,
-  iconType: e,
-  iconLibrary: s,
-  color: o,
-  size: r = 16,
-  className: n,
-  style: i
-}) {
-  if (e && !d.includes(e))
-    return console.warn(
-      `Invalid iconType ${e} expected a string equal to one of: ${d.join(
-        ", "
-      )}`
-    ), null;
-  if (typeof t == "string" && (g(t) || t.startsWith("/")))
-    return t.startsWith(a) || t.startsWith("https://mintlify.b-cdn.net") ? /* @__PURE__ */ l(
-      "svg",
-      {
-        className: u("mt-icon", n),
-        style: {
-          WebkitMaskImage: `url(${t})`,
-          WebkitMaskRepeat: "no-repeat",
-          WebkitMaskPosition: "center",
-          maskImage: `url(${t})`,
-          maskRepeat: "no-repeat",
-          maskPosition: "center",
-          maskSize: "100%",
-          backgroundColor: o || "currentColor",
-          width: r,
-          height: r,
-          ...i
-        }
-      }
-    ) : /* @__PURE__ */ l(
-      "img",
-      {
-        src: t,
-        alt: t,
-        className: u("mt-icon", n),
-        style: {
-          width: r,
-          height: r,
-          ...i
-        }
-      }
-    );
-  const m = k(t.toLowerCase(), e, s);
-  return /* @__PURE__ */ l(
-    "svg",
-    {
-      className: u("mt-icon", n),
-      style: {
-        WebkitMaskImage: `url(${m})`,
-        WebkitMaskRepeat: "no-repeat",
-        WebkitMaskPosition: "center",
-        maskImage: `url(${m})`,
-        maskRepeat: "no-repeat",
-        maskPosition: "center",
-        maskSize: s === "lucide" ? "100%" : void 0,
-        backgroundColor: o || "currentColor",
-        width: r,
-        height: r,
-        ...i
-      }
-    }
-  );
-}
-function h(t) {
-  return t ? p.includes(t.toLowerCase()) : !1;
-}
-function k(t, e, s) {
-  return h(t) ? `${a}/v7.1.0/brands/${t}.svg` : s === "lucide" ? `${a}/lucide/v0.545.0/${t}.svg` : `${a}/v7.1.0/${e ?? "regular"}/${t}.svg`;
-}
-const W = ["fontawesome", "lucide"], d = [
-  "brands",
-  "duotone",
-  "light",
-  "regular",
-  "sharp-duotone-solid",
-  "sharp-light",
-  "sharp-regular",
-  "sharp-solid",
-  "sharp-thin",
-  "solid",
-  "thin"
-];
-export {
-  v as BaseIcon,
-  k as getIconUrl,
-  W as iconLibraries,
-  d as iconTypes
-};

package/dist/components/icon/icon.css

@@ -1 +0,0 @@
-.mt-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}