@mintlify/components 0.4.12 → 0.4.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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)}
1
+ @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)}}
@@ -1 +1 @@
1
- .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%)}
1
+ @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%)}}
@@ -1 +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}
1
+ @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%))}}
@@ -8,19 +8,19 @@ function z({
8
8
  caption: a,
9
9
  hint: t,
10
10
  hintIcon: o,
11
- className: m,
12
- containerClassName: s,
11
+ className: s,
12
+ containerClassName: m,
13
13
  style: v,
14
14
  render: N = /* @__PURE__ */ e("div", {}),
15
15
  ...g
16
16
  }) {
17
- return /* @__PURE__ */ c(f, { className: s, children: [
17
+ return /* @__PURE__ */ c(f, { className: m, children: [
18
18
  t && /* @__PURE__ */ e(h, { icon: o, children: t }),
19
19
  /* @__PURE__ */ c(
20
20
  d,
21
21
  {
22
22
  ...g,
23
- className: m,
23
+ className: s,
24
24
  style: v,
25
25
  render: N,
26
26
  children: [
@@ -49,19 +49,19 @@ function d({
49
49
  className: a,
50
50
  style: t,
51
51
  render: o = /* @__PURE__ */ e("div", {}),
52
- ...m
52
+ ...s
53
53
  }) {
54
- const s = F({
54
+ const m = F({
55
55
  defaultTagName: "div",
56
56
  render: o,
57
57
  props: {
58
- ...m,
58
+ ...s,
59
59
  style: t,
60
60
  className: n("mt-frame", a),
61
61
  "data-slot": "frame"
62
62
  }
63
63
  });
64
- return /* @__PURE__ */ e(s.type, { ...s.props, children: r });
64
+ return /* @__PURE__ */ e(m.type, { ...m.props, children: r });
65
65
  }
66
66
  function l({
67
67
  className: r,
@@ -108,7 +108,13 @@ function C({ children: r, className: a, ...t }) {
108
108
  }
109
109
  );
110
110
  }
111
- function h({ children: r, className: a, icon: t, ...o }) {
111
+ function h({
112
+ children: r,
113
+ className: a,
114
+ icon: t,
115
+ hintTextClassName: o,
116
+ ...s
117
+ }) {
112
118
  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(
113
119
  "svg",
114
120
  {
@@ -123,10 +129,10 @@ function h({ children: r, className: a, icon: t, ...o }) {
123
129
  {
124
130
  "data-slot": "frame-hint",
125
131
  className: n("mt-frame-hint", a),
126
- ...o,
132
+ ...s,
127
133
  children: [
128
134
  m || null,
129
- r && /* @__PURE__ */ e("p", { className: "mt-frame-hint-text", children: r })
135
+ r && /* @__PURE__ */ e("p", { className: n("mt-frame-hint-text", o), children: r })
130
136
  ]
131
137
  }
132
138
  );
@@ -1 +1 @@
1
- .mt-icon{flex-shrink:0}
1
+ @layer mt-components{.mt-icon{flex-shrink:0}}
package/dist/index.d.ts CHANGED
@@ -464,12 +464,13 @@ declare interface FrameContentProps extends HTMLAttributes<HTMLDivElement> {
464
464
  className?: string;
465
465
  }
466
466
 
467
- export declare function FrameHint({ children, className, icon, ...props }: FrameHintProps): JSX_2.Element;
467
+ export declare function FrameHint({ children, className, icon, hintTextClassName, ...props }: FrameHintProps): JSX_2.Element;
468
468
 
469
469
  declare interface FrameHintProps extends HTMLAttributes<HTMLDivElement> {
470
470
  icon?: IconProp;
471
471
  children: ReactNode;
472
472
  className?: string;
473
+ hintTextClassName?: string;
473
474
  }
474
475
 
475
476
  declare interface FrameProps extends HTMLAttributes<HTMLElement> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mintlify/components",
3
- "version": "0.4.12",
3
+ "version": "0.4.14",
4
4
  "description": "Mintlify Headless UI components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",