@mintlify/components 0.4.11 → 0.4.13

package/dist/components/badge/badge.css

@@ -1 +1 @@
-.mt-badge{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;font-weight:500;position:relative;background-color:var(--color-bg);color:var(--color-text)}.mt-badge[data-disabled=true]{cursor:not-allowed;background-color:var(--color-bg-disabled);color:var(--color-text-disabled)}.mt-badge[data-shape=pill]{border-radius:9999px}.mt-badge[data-stroke=true]{outline:1px solid rgb(11 12 14 / 8%);outline-offset:-1px}:is(.dark,.dark-theme) .mt-badge[data-stroke=true]{outline-color:#ffffff24}.mt-badge-xs svg,.mt-badge-sm svg,.mt-badge-md svg,.mt-badge-lg svg{margin:1px;background-color:var(--color-text)}.mt-badge[data-disabled=true] svg{background-color:var(--color-text-disabled)}.mt-badge-icon{flex-shrink:0;color:var(--color-text)}.mt-badge[data-disabled=true] .mt-badge-icon{color:var(--color-text-disabled)}.mt-badge .mt-icon{color:var(--color-text)}.mt-badge[data-disabled=true] .mt-icon{color:var(--color-text-disabled)}.mt-badge-xs{gap:.125rem;padding:0 .125rem;font-size:.75rem;line-height:1rem}.mt-badge-xs:has(svg),.mt-badge-xs:has(.mt-icon){padding-right:.25rem}.mt-badge-xs[data-shape=rounded]{border-radius:.25rem}.mt-badge-sm{gap:.1875rem;padding:.125rem .125rem .125rem .1875rem;font-size:.75rem;line-height:1rem}.mt-badge-sm:has(svg),.mt-badge-sm:has(.mt-icon){padding-right:.375rem}.mt-badge-sm[data-shape=rounded]{border-radius:.375rem}.mt-badge-md{gap:.25rem;padding:.125rem .25rem;font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em}.mt-badge-md:has(svg),.mt-badge-md:has(.mt-icon){padding-right:.5rem}.mt-badge-md[data-shape=rounded]{border-radius:.5rem}.mt-badge-lg{gap:.25rem;padding:.25rem .375rem;font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em}.mt-badge-lg:has(svg),.mt-badge-lg:has(.mt-icon){padding-right:.625rem}.mt-badge-lg[data-shape=rounded]{border-radius:.5rem}.mt-badge-gray{--color-bg: var(--mt-color-badge-gray);--color-text: var(--mt-color-gray-7);--color-bg-disabled: var(--mt-color-badge-gray);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-gray{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-gray-4);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-gray-9)}.mt-badge-blue{--color-bg: var(--mt-color-badge-blue);--color-text: var(--mt-color-text-accent-blue-inverted);--color-bg-disabled: var(--mt-color-badge-blue-disabled);--color-text-disabled: var(--mt-color-text-accent-blue-tertiary)}:is(.dark,.dark-theme) .mt-badge-blue{--color-bg: var(--mt-color-badge-blue);--color-text: var(--mt-color-text-accent-blue-inverted);--color-bg-disabled: var(--mt-color-badge-blue-disabled);--color-text-disabled: var(--mt-color-text-accent-blue-tertiary)}.mt-badge-green{--color-bg: var(--mt-color-badge-green);--color-text: var(--mt-color-text-accent-green);--color-bg-disabled: var(--mt-color-badge-green-disabled);--color-text-disabled: var(--mt-color-text-accent-green-secondary)}:is(.dark,.dark-theme) .mt-badge-green{--color-bg: var(--mt-color-badge-green);--color-text: var(--mt-color-text-accent-green-inverted);--color-bg-disabled: var(--mt-color-badge-green-disabled);--color-text-disabled: var(--mt-color-text-accent-green-secondary)}.mt-badge-orange{--color-bg: var(--mt-color-badge-orange);--color-text: var(--mt-color-text-accent-orange-inverted);--color-bg-disabled: var(--mt-color-badge-orange-disabled);--color-text-disabled: var(--mt-color-text-accent-orange-secondary)}:is(.dark,.dark-theme) .mt-badge-orange{--color-bg: var(--mt-color-badge-orange);--color-text: var(--mt-color-text-accent-orange-inverted);--color-bg-disabled: var(--mt-color-badge-orange-disabled);--color-text-disabled: var(--mt-color-text-accent-orange-secondary)}.mt-badge-red{--color-bg: var(--mt-color-badge-red);--color-text: var(--mt-color-text-accent-red-inverted);--color-bg-disabled: var(--mt-color-badge-red-disabled);--color-text-disabled: var(--mt-color-text-accent-red-secondary)}:is(.dark,.dark-theme) .mt-badge-red{--color-bg: var(--mt-color-badge-red);--color-text: var(--mt-color-text-accent-red-inverted);--color-bg-disabled: var(--mt-color-badge-red-disabled);--color-text-disabled: var(--mt-color-text-accent-red-secondary)}.mt-badge-purple{--color-bg: var(--mt-color-badge-purple);--color-text: var(--mt-color-text-accent-purple-inverted);--color-bg-disabled: var(--mt-color-badge-purple);--color-text-disabled: var(--mt-color-text-accent-purple-secondary)}:is(.dark,.dark-theme) .mt-badge-purple{--color-bg: var(--mt-color-badge-purple);--color-text: var(--mt-color-text-accent-purple-inverted);--color-bg-disabled: var(--mt-color-badge-purple);--color-text-disabled: var(--mt-color-text-accent-purple-secondary)}.mt-badge-white{--color-bg: var(--mt-color-white-9);--color-text: var(--mt-color-text-static-dark-secondary);--color-bg-disabled: rgb(255 255 255 / 8%);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-white{--color-bg: rgb(255 255 255 / 99%);--color-text: var(--mt-color-text-static-dark-secondary);--color-bg-disabled: var(--mt-color-white-2);--color-text-disabled: rgb(11 12 14 / 60%)}.mt-badge-surface{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-secondary);--color-bg-disabled: rgb(255 255 255 / 95%);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-surface{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-text-secondary);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-gray-9)}.mt-badge-white-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 8%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}:is(.dark,.dark-theme) .mt-badge-white-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 24%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}.mt-badge-surface-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 95%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}:is(.dark,.dark-theme) .mt-badge-surface-destructive{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}
+@layer mt-components{.mt-badge{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;font-weight:500;position:relative;background-color:var(--color-bg);color:var(--color-text)}.mt-badge[data-disabled=true]{cursor:not-allowed;background-color:var(--color-bg-disabled);color:var(--color-text-disabled)}.mt-badge[data-shape=pill]{border-radius:9999px}.mt-badge[data-stroke=true]{outline:1px solid var(--mt-badge-stroke-color, rgb(11 12 14 / 8%));outline-offset:-1px}:is(.dark,.dark-theme) .mt-badge[data-stroke=true]{outline-color:var(--mt-badge-stroke-color, rgb(255 255 255 / 14%))}.mt-badge-xs svg,.mt-badge-sm svg,.mt-badge-md svg,.mt-badge-lg svg{margin:1px;background-color:var(--color-text)}.mt-badge[data-disabled=true] svg{background-color:var(--color-text-disabled)}.mt-badge-icon{flex-shrink:0;color:var(--color-text)}.mt-badge[data-disabled=true] .mt-badge-icon{color:var(--color-text-disabled)}.mt-badge .mt-icon{color:var(--color-text)}.mt-badge[data-disabled=true] .mt-icon{color:var(--color-text-disabled)}.mt-badge-xs{gap:.125rem;padding:0 .125rem;font-size:.75rem;line-height:1rem}.mt-badge-xs:has(svg),.mt-badge-xs:has(.mt-icon){padding-right:.25rem}.mt-badge-xs[data-shape=rounded]{border-radius:.25rem}.mt-badge-sm{gap:.1875rem;padding:.125rem .125rem .125rem .1875rem;font-size:.75rem;line-height:1rem}.mt-badge-sm:has(svg),.mt-badge-sm:has(.mt-icon){padding-right:.375rem}.mt-badge-sm[data-shape=rounded]{border-radius:.375rem}.mt-badge-md{gap:.25rem;padding:.125rem .25rem;font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em}.mt-badge-md:has(svg),.mt-badge-md:has(.mt-icon){padding-right:.5rem}.mt-badge-md[data-shape=rounded]{border-radius:.5rem}.mt-badge-lg{gap:.25rem;padding:.25rem .375rem;font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em}.mt-badge-lg:has(svg),.mt-badge-lg:has(.mt-icon){padding-right:.625rem}.mt-badge-lg[data-shape=rounded]{border-radius:.5rem}.mt-badge-gray{--color-bg: var(--mt-color-badge-gray);--color-text: var(--mt-color-gray-7);--color-bg-disabled: var(--mt-color-badge-gray);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-gray{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-gray-4);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-gray-9)}.mt-badge-blue{--color-bg: var(--mt-color-badge-blue);--color-text: var(--mt-color-text-accent-blue-inverted);--color-bg-disabled: var(--mt-color-badge-blue-disabled);--color-text-disabled: var(--mt-color-text-accent-blue-tertiary)}:is(.dark,.dark-theme) .mt-badge-blue{--color-bg: var(--mt-color-badge-blue);--color-text: var(--mt-color-text-accent-blue-inverted);--color-bg-disabled: var(--mt-color-badge-blue-disabled);--color-text-disabled: var(--mt-color-text-accent-blue-tertiary)}.mt-badge-green{--color-bg: var(--mt-color-badge-green);--color-text: var(--mt-color-text-accent-green);--color-bg-disabled: var(--mt-color-badge-green-disabled);--color-text-disabled: var(--mt-color-text-accent-green-secondary)}:is(.dark,.dark-theme) .mt-badge-green{--color-bg: var(--mt-color-badge-green);--color-text: var(--mt-color-text-accent-green-inverted);--color-bg-disabled: var(--mt-color-badge-green-disabled);--color-text-disabled: var(--mt-color-text-accent-green-secondary)}.mt-badge-orange{--color-bg: var(--mt-color-badge-orange);--color-text: var(--mt-color-text-accent-orange-inverted);--color-bg-disabled: var(--mt-color-badge-orange-disabled);--color-text-disabled: var(--mt-color-text-accent-orange-secondary)}:is(.dark,.dark-theme) .mt-badge-orange{--color-bg: var(--mt-color-badge-orange);--color-text: var(--mt-color-text-accent-orange-inverted);--color-bg-disabled: var(--mt-color-badge-orange-disabled);--color-text-disabled: var(--mt-color-text-accent-orange-secondary)}.mt-badge-red{--color-bg: var(--mt-color-badge-red);--color-text: var(--mt-color-text-accent-red-inverted);--color-bg-disabled: var(--mt-color-badge-red-disabled);--color-text-disabled: var(--mt-color-text-accent-red-secondary)}:is(.dark,.dark-theme) .mt-badge-red{--color-bg: var(--mt-color-badge-red);--color-text: var(--mt-color-text-accent-red-inverted);--color-bg-disabled: var(--mt-color-badge-red-disabled);--color-text-disabled: var(--mt-color-text-accent-red-secondary)}.mt-badge-purple{--color-bg: var(--mt-color-badge-purple);--color-text: var(--mt-color-text-accent-purple-inverted);--color-bg-disabled: var(--mt-color-badge-purple);--color-text-disabled: var(--mt-color-text-accent-purple-secondary)}:is(.dark,.dark-theme) .mt-badge-purple{--color-bg: var(--mt-color-badge-purple);--color-text: var(--mt-color-text-accent-purple-inverted);--color-bg-disabled: var(--mt-color-badge-purple);--color-text-disabled: var(--mt-color-text-accent-purple-secondary)}.mt-badge-white{--color-bg: var(--mt-color-white-9);--color-text: var(--mt-color-text-static-dark-secondary);--color-bg-disabled: rgb(255 255 255 / 8%);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-white{--color-bg: rgb(255 255 255 / 99%);--color-text: var(--mt-color-text-static-dark-secondary);--color-bg-disabled: var(--mt-color-white-2);--color-text-disabled: rgb(11 12 14 / 60%)}.mt-badge-surface{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-secondary);--color-bg-disabled: rgb(255 255 255 / 95%);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-surface{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-text-secondary);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-gray-9)}.mt-badge-white-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 8%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}:is(.dark,.dark-theme) .mt-badge-white-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 24%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}.mt-badge-surface-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 95%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}:is(.dark,.dark-theme) .mt-badge-surface-destructive{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}}

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

package/dist/components/frame/frame.css

@@ -1 +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;pointer-events:none;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}
+@layer mt-components{.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:var(--mt-frame-hint-icon-fill, rgb(156 163 175))}.mt-frame-hint-text{font-size:.875rem;font-weight:500;line-height:1.25rem;color:var(--mt-frame-hint-text-color, rgb(55 65 81))}.mt-frame{position:relative;padding:.5rem;border-radius:1rem;overflow:hidden;background-color:var(--mt-frame-bg, rgb(249 250 251 / 50%))}.mt-frame-background{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:var( --mt-frame-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:var( --mt-frame-background-mask, linear-gradient(0deg, #fff, rgb(255 255 255 / 60%)) );-webkit-mask-image:var( --mt-frame-background-mask, 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:var(--mt-frame-content-bg, rgb(255 255 255))}.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:var(--mt-frame-caption-color, rgb(55 65 81))}.mt-frame-border{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid var(--mt-frame-border-color, rgb(0 0 0 / 5%));border-radius:1rem}:is(.dark,.dark-theme) .mt-frame{background-color:var(--mt-frame-bg, rgb(31 41 55 / 25%))}:is(.dark,.dark-theme) .mt-frame-hint-icon{fill:var(--mt-frame-hint-icon-fill, rgb(209 213 219))}:is(.dark,.dark-theme) .mt-frame-hint-text{color:var(--mt-frame-hint-text-color, rgb(229 231 235))}:is(.dark,.dark-theme) .mt-frame-background{background-image:var( --mt-frame-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:var( --mt-frame-background-mask, linear-gradient(0deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 50%)) );-webkit-mask-image:var( --mt-frame-background-mask, linear-gradient(0deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 50%)) )}:is(.dark,.dark-theme) .mt-frame-content{background-color:var(--mt-frame-content-bg, rgb(17 24 39))}:is(.dark,.dark-theme) .mt-frame-caption{color:var(--mt-frame-caption-color, rgb(156 163 175))}:is(.dark,.dark-theme) .mt-frame-border{border-color:var(--mt-frame-border-color, rgb(255 255 255 / 5%))}}

package/dist/components/frame/frame.js

@@ -1,32 +1,32 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useRender as b } from "@base-ui-components/react/use-render";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useRender as F } from "@base-ui-components/react/use-render";
 import { cn as n } from "../../utils/cn.js";
 /* empty css          */
-import { Icon as c } from "../icon/icon.js";
-function C({
+import { Icon as i } from "../icon/icon.js";
+function z({
   children: r,
   caption: a,
   hint: t,
   hintIcon: o,
-  className: m,
-  containerClassName: s,
+  className: s,
+  containerClassName: m,
   style: v,
-  render: F = /* @__PURE__ */ e("div", {}),
+  render: N = /* @__PURE__ */ e("div", {}),
   ...g
 }) {
-  return /* @__PURE__ */ i(f, { className: s, children: [
+  return /* @__PURE__ */ c(f, { className: m, children: [
     t && /* @__PURE__ */ e(h, { icon: o, children: t }),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ c(
       d,
       {
         ...g,
-        className: m,
+        className: s,
         style: v,
-        render: F,
+        render: N,
         children: [
           /* @__PURE__ */ e(l, {}),
           /* @__PURE__ */ e(u, { children: r }),
-          a && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("p", { children: a }) }),
+          a && /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("p", { children: a }) }),
           /* @__PURE__ */ e(p, {})
         ]
       }
@@ -49,19 +49,19 @@ function d({
   className: a,
   style: t,
   render: o = /* @__PURE__ */ e("div", {}),
-  ...m
+  ...s
 }) {
-  const s = b({
+  const m = F({
     defaultTagName: "div",
     render: o,
     props: {
-      ...m,
+      ...s,
       style: t,
       className: n("mt-frame", a),
       "data-slot": "frame"
     }
   });
-  return /* @__PURE__ */ e(s.type, { ...s.props, children: r });
+  return /* @__PURE__ */ e(m.type, { ...m.props, children: r });
 }
 function l({
   className: r,
@@ -97,7 +97,7 @@ function u({ children: r, className: a, ...t }) {
     }
   );
 }
-function N({ children: r, className: a, ...t }) {
+function C({ children: r, className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -108,35 +108,49 @@ function N({ children: r, className: a, ...t }) {
     }
   );
 }
-function h({ children: r, className: a, icon: t, ...o }) {
-  const m = typeof t == "string" ? /* @__PURE__ */ e(c, { icon: t, className: "mt-frame-hint-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ e(c, { ...t, className: "mt-frame-hint-icon", size: 16 }) : t || null;
-  return /* @__PURE__ */ i(
+function h({
+  children: r,
+  className: a,
+  icon: t,
+  hintTextClassName: o,
+  ...s
+}) {
+  const m = typeof t == "string" ? /* @__PURE__ */ e(i, { icon: t, className: "mt-frame-hint-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ e(i, { ...t, className: "mt-frame-hint-icon", size: 16 }) : t || /* @__PURE__ */ e(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      className: "mt-frame-hint-icon",
+      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" })
+    }
+  );
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-slot": "frame-hint",
       className: n("mt-frame-hint", a),
-      ...o,
+      ...s,
       children: [
         m || null,
-        r && /* @__PURE__ */ e("p", { className: "mt-frame-hint-text", children: r })
+        r && /* @__PURE__ */ e("p", { className: n("mt-frame-hint-text", o), children: r })
       ]
     }
   );
 }
-const R = Object.assign(C, {
+const M = Object.assign(z, {
   Root: f,
   Wrapper: d,
   Background: l,
   Border: p,
   Content: u,
-  Caption: N,
+  Caption: C,
   Hint: h
 });
 export {
-  R as Frame,
+  M as Frame,
   l as FrameBackground,
   p as FrameBorder,
-  N as FrameCaption,
+  C as FrameCaption,
   u as FrameContent,
   h as FrameHint,
   f as FrameRoot,

package/dist/components/icon/icon.css

@@ -1 +1 @@
-.mt-icon{flex-shrink:0}
+@layer mt-components{.mt-icon{flex-shrink:0}}

package/dist/index.d.ts

@@ -54,7 +54,7 @@ export declare interface CalloutContentProps extends HTMLAttributes<HTMLDivEleme
     className?: string;
 }
 
-declare function CalloutIcon({ children, icon, className, ...props }: CalloutIconProps): JSX_2.Element;
+declare function CalloutIcon({ children, icon, variant, className, ...props }: CalloutIconProps): JSX_2.Element | null;
 
 export declare interface CalloutIconProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
@@ -62,7 +62,8 @@ export declare interface CalloutIconProps extends HTMLAttributes<HTMLDivElement>
      * Icon before content. String (icon name) or IconProps object.
      * @see {@link IconProp}
      */
-    icon?: string | Omit<IconProps, "size" | "className" | "style">;
+    icon?: IconProp;
+    variant?: CalloutVariant;
     className?: string;
 }
 
@@ -463,12 +464,13 @@ declare interface FrameContentProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-export declare function FrameHint({ children, className, icon, ...props }: FrameHintProps): JSX_2.Element;
+export declare function FrameHint({ children, className, icon, hintTextClassName, ...props }: FrameHintProps): JSX_2.Element;
 
 declare interface FrameHintProps extends HTMLAttributes<HTMLDivElement> {
     icon?: IconProp;
     children: ReactNode;
     className?: string;
+    hintTextClassName?: string;
 }
 
 declare interface FrameProps extends HTMLAttributes<HTMLElement> {

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}
+@layer mt-components;: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.11",
+  "version": "0.4.13",
   "description": "Mintlify Headless UI components",
   "type": "module",
   "main": "./dist/index.cjs",