@mintlify/components 0.4.6 → 0.4.8

package/dist/components/callout/callout.css

@@ -1 +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%)}
+.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 / 50%);--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

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

package/dist/components/frame/frame.css

@@ -0,0 +1 @@
+.mt-frame-container{display:block}.mt-frame-hint{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.mt-frame-hint-icon{flex-shrink:0;width:1rem;height:1rem;fill:#9ca3af}.mt-frame-hint-text{font-size:.875rem;font-weight:500;line-height:1.25rem;color:#374151}.mt-frame{position:relative;padding:.5rem;border-radius:1rem;overflow:hidden;background-color:#f9fafb7f}.mt-frame-background{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(229 229 229 / 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");background-position:10px 10px;mask-image:linear-gradient(0deg,#fff,#fff9);-webkit-mask-image:linear-gradient(0deg,#fff,rgb(255 255 255 / 60%))}.mt-frame-content{position:relative;display:flex;justify-content:center;border-radius:.75rem;overflow:hidden;background-color:#fff}.mt-frame-caption{position:relative;display:flex;justify-content:center;margin-top:.75rem;padding:0 2rem .5rem;font-size:.875rem;line-height:1.25rem;color:#374151}.mt-frame-border{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid rgb(0 0 0 / 5%);border-radius:1rem}:is(.dark,.dark-theme) .mt-frame{background-color:#1f293740}:is(.dark,.dark-theme) .mt-frame-hint-icon{fill:#d1d5db}:is(.dark,.dark-theme) .mt-frame-hint-text{color:#e5e7eb}:is(.dark,.dark-theme) .mt-frame-background{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");mask-image:linear-gradient(0deg,#ffffff1a,#ffffff7f);-webkit-mask-image:linear-gradient(0deg,rgb(255 255 255 / 10%),rgb(255 255 255 / 50%))}:is(.dark,.dark-theme) .mt-frame-content{background-color:#111827}:is(.dark,.dark-theme) .mt-frame-caption{color:#9ca3af}:is(.dark,.dark-theme) .mt-frame-border{border-color:#ffffff0d}

package/dist/components/frame/frame.js

@@ -0,0 +1,124 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useRender as d } from "@base-ui-components/react/use-render";
+import { cn as n } from "../../utils/cn.js";
+/* empty css          */
+import { Icon as l } from "../icon/icon.js";
+function N({
+  children: a,
+  caption: r,
+  hint: t,
+  hintIcon: s,
+  className: m,
+  containerClassName: o,
+  style: C,
+  render: u = /* @__PURE__ */ e("div", {}),
+  ...v
+}) {
+  const i = d({
+    defaultTagName: "div",
+    render: u,
+    props: {
+      ...v,
+      style: C,
+      className: n("mt-frame", m),
+      "data-slot": "frame"
+    }
+  });
+  return /* @__PURE__ */ c("div", { className: n("mt-frame-container", o), children: [
+    t && /* @__PURE__ */ e(
+      h,
+      {
+        icon: s || /* @__PURE__ */ e(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 512 512",
+            className: "mt-frame-hint-icon",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ e("path", { d: "M224 320c0 17.69 14.33 32 32 32h64c17.67 0 32-14.31 32-32s-14.33-32-32-32h-64C238.3 288 224 302.3 224 320zM267.6 256H352c17.67 0 32-14.31 32-32s-14.33-32-32-32h-80v40C272 240.5 270.3 248.5 267.6 256zM272 160H480c17.67 0 32-14.31 32-32s-14.33-32-32-32h-208.8C271.5 98.66 272 101.3 272 104V160zM320 416c0-17.69-14.33-32-32-32H224c-17.67 0-32 14.31-32 32s14.33 32 32 32h64C305.7 448 320 433.7 320 416zM202.1 355.8C196 345.6 192 333.3 192 320c0-5.766 1.08-11.24 2.51-16.55C157.4 300.6 128 269.9 128 232V159.1C128 151.2 135.2 144 143.1 144S160 151.2 159.1 159.1l0 69.72C159.1 245.2 171.3 271.1 200 271.1C222.1 271.1 240 254.1 240 232v-128C240 81.91 222.1 64 200 64H136.6C103.5 64 72.03 80 52.47 106.8L26.02 143.2C9.107 166.5 0 194.5 0 223.3V312C0 387.1 60.89 448 136 448h32.88C163.4 438.6 160 427.7 160 416C160 388.1 178 364.6 202.1 355.8z" })
+          }
+        ),
+        children: t
+      }
+    ),
+    /* @__PURE__ */ c(i.type, { ...i.props, children: [
+      /* @__PURE__ */ e("div", { className: "mt-frame-background" }),
+      /* @__PURE__ */ e(f, { children: a }),
+      r && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("p", { children: r }) }),
+      /* @__PURE__ */ e("div", { className: "mt-frame-border" })
+    ] })
+  ] });
+}
+function g({
+  children: a,
+  className: r,
+  style: t,
+  render: s = /* @__PURE__ */ e("div", {}),
+  ...m
+}) {
+  const o = d({
+    defaultTagName: "div",
+    render: s,
+    props: {
+      ...m,
+      style: t,
+      className: n("mt-frame", r),
+      "data-slot": "frame"
+    }
+  });
+  return /* @__PURE__ */ e(o.type, { ...o.props, children: /* @__PURE__ */ c("div", { className: "mt-frame-wrapper", children: [
+    /* @__PURE__ */ e("div", { className: "mt-frame-background" }),
+    a,
+    /* @__PURE__ */ e("div", { className: "mt-frame-border" })
+  ] }) });
+}
+function f({ children: a, className: r, ...t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "frame-content",
+      className: n("mt-frame-content", r),
+      ...t,
+      children: a
+    }
+  );
+}
+function p({ children: a, className: r, ...t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "frame-caption",
+      className: n("mt-frame-caption", r),
+      ...t,
+      children: a
+    }
+  );
+}
+function h({ children: a, className: r, icon: t, ...s }) {
+  const m = typeof t == "string" ? /* @__PURE__ */ e(l, { icon: t, className: "mt-frame-hint-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ e(l, { ...t, className: "mt-frame-hint-icon", size: 16 }) : t || null;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "frame-hint",
+      className: n("mt-frame-hint", r),
+      ...s,
+      children: [
+        m || null,
+        a && /* @__PURE__ */ e("p", { className: "mt-frame-hint-text", children: a })
+      ]
+    }
+  );
+}
+const H = Object.assign(N, {
+  Root: g,
+  Content: f,
+  Caption: p,
+  Hint: h
+});
+export {
+  H as Frame,
+  p as FrameCaption,
+  f as FrameContent,
+  h as FrameHint,
+  g as FrameRoot
+};

package/dist/components/icon/icon.css

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

package/dist/components/icon/icon.js

@@ -4,7 +4,8 @@ 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({
+/* empty css         */
+function R({
   icon: t,
   iconType: r,
   iconLibrary: s,
@@ -14,9 +15,9 @@ function N({
   style: i,
   ...l
 }) {
-  if (r && !d.includes(r))
+  if (r && !p.includes(r))
     return $ && console.warn(
-      `Invalid iconType ${r} expected a string equal to one of: ${d.join(
+      `Invalid iconType ${r} expected a string equal to one of: ${p.join(
         ", "
       )}`
     ), null;
@@ -60,7 +61,7 @@ function N({
       }
     );
   }
-  const g = v(t.toLowerCase(), r, s), p = l;
+  const g = v(t.toLowerCase(), r, s), d = l;
   return /* @__PURE__ */ u(
     "svg",
     {
@@ -78,7 +79,7 @@ function N({
         height: e,
         ...i
       },
-      ...p
+      ...d
     }
   );
 }
@@ -88,7 +89,7 @@ function b(t) {
 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 = [
+const S = ["fontawesome", "lucide"], p = [
   "brands",
   "duotone",
   "light",
@@ -102,8 +103,8 @@ const R = ["fontawesome", "lucide"], d = [
   "thin"
 ];
 export {
-  N as Icon,
+  R as Icon,
   v as getIconUrl,
-  R as iconLibraries,
-  d as iconTypes
+  S as iconLibraries,
+  p as iconTypes
 };

package/dist/index.d.ts

@@ -433,6 +433,67 @@ declare const focus_2: {
 };
 export { focus_2 as focus }
 
+export declare const Frame: typeof FrameComponent & {
+    Root: typeof FrameRoot;
+    Content: typeof FrameContent;
+    Caption: typeof FrameCaption;
+    Hint: typeof FrameHint;
+};
+
+export declare function FrameCaption({ children, className, ...props }: FrameCaptionProps): JSX_2.Element;
+
+export declare interface FrameCaptionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+
+declare function FrameComponent({ children, caption, hint, hintIcon, className, containerClassName, style, render, ...props }: FrameProps): JSX_2.Element;
+
+export declare function FrameContent({ children, className, ...props }: FrameContentProps): JSX_2.Element;
+
+export declare interface FrameContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+
+export declare function FrameHint({ children, className, icon, ...props }: FrameHintProps): JSX_2.Element;
+
+export declare interface FrameHintProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: IconProp;
+    children: ReactNode;
+    className?: string;
+}
+
+export declare interface FrameProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Frame caption, at the bottom of the frame.
+     */
+    caption?: string;
+    /**
+     * Frame hint text, at the top of the frame.
+     */
+    hint?: string;
+    /**
+     * Frame hint, at the top of the frame.
+     * @see {@link IconProp}
+     */
+    hintIcon?: IconProp;
+    className?: string;
+    containerClassName?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+    render?: React.ReactElement;
+}
+
+export declare function FrameRoot({ children, className, style, render, ...props }: FrameRootProps): JSX_2.Element;
+
+export declare interface FrameRootProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+    render?: React.ReactElement;
+}
+
 export declare function getIconUrl(icon: string, iconType?: IconType, iconLibrary?: IconLibrary): string;
 
 export declare function Icon({ icon, iconType, iconLibrary, color, size, className, style, ...props }: IconProps): JSX_2.Element | null;

package/dist/index.js

@@ -1,17 +1,19 @@
 /* empty css           */
 import { Badge as s } from "./components/badge/badge.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";
+import { Callout as m } from "./components/callout/callout.js";
+import { Frame as c } from "./components/frame/frame.js";
+import { Icon as i, getIconUrl as n, iconLibraries as a, iconTypes as x } from "./components/icon/icon.js";
+import { colors as d, designTokens as g, focus as u, shadows as I } from "./styles/design-tokens.js";
 export {
   s as Badge,
-  c as Callout,
-  n as Icon,
-  l as colors,
-  x as designTokens,
-  d as focus,
-  p as getIconUrl,
-  f as iconLibraries,
-  m as iconTypes,
-  g as shadows
+  m as Callout,
+  c as Frame,
+  i as Icon,
+  d as colors,
+  g as designTokens,
+  u as focus,
+  n as getIconUrl,
+  a as iconLibraries,
+  x as iconTypes,
+  I 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)}@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}}
+: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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "Mintlify Headless UI components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,6 +61,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.6",
     "clsx": "^2.1.1",
     "color": "^5.0.3"
   },