Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@maggioli-design-system/mds-text

Package Overview
Dependencies
Maintainers
0
Versions
46
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@maggioli-design-system/mds-text - npm Package Compare versions

Comparing version 4.4.0 to 4.4.1

dist/collection/type/language.js
dist/mds-text/p-9aba0d68.entry.js
dist/mds-text/p-cf796d29.system.entry.js
dist/types/type/language.d.ts
src/type/language.ts
www/build/p-9aba0d68.entry.js
www/build/p-cf796d29.system.entry.js

2

dist/cjs/mds-text.cjs.entry.js

@@ -226,3 +226,3 @@ 'use strict';

const mdsTextCss = "\n .text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography=\"snippet\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"hack\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h2\"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h3\"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h4\"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h5\"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h6\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ),\n:host( [typography=\"h2\"] ),\n:host( [typography=\"h3\"] ),\n:host( [typography=\"h4\"] ),\n:host( [typography=\"h5\"] ),\n:host( [typography=\"h6\"] ) {\n text-wrap: balance;\n}\n\n:host( [typography=\"action\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ),\n:host( [typography=\"detail\"] ),\n:host( [typography=\"caption\"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography=\"label\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"tip\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"option\"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"][variant=\"read\"] ){\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"][variant=\"read\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"][variant=\"read\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag=\"article\"] ),\n:host( [tag=\"blockquote\"] ),\n:host( [tag=\"dd\"] ),\n:host( [tag=\"details\"] ),\n:host( [tag=\"div\"] ),\n:host( [tag=\"dl\"] ),\n:host( [tag=\"dt\"] ),\n:host( [tag=\"figcaption\"] ),\n:host( [tag=\"h1\"] ),\n:host( [tag=\"h2\"] ),\n:host( [tag=\"h3\"] ),\n:host( [tag=\"h4\"] ),\n:host( [tag=\"h5\"] ),\n:host( [tag=\"h6\"] ),\n:host( [tag=\"label\"] ),\n:host( [tag=\"legend\"] ),\n:host( [tag=\"li\"] ),\n:host( [tag=\"ol\"] ),\n:host( [tag=\"p\"] ),\n:host( [tag=\"pre\"] ),\n:host( [tag=\"summary\"] ),\n:host( [tag=\"ul\"] ) {\n display: block;\n}\n\n:host( [tag=\"abbr\"] ),\n:host( [tag=\"address\"] ),\n:host( [tag=\"b\"] ),\n:host( [tag=\"bdo\"] ),\n:host( [tag=\"cite\"] ),\n:host( [tag=\"code\"] ),\n:host( [tag=\"del\"] ),\n:host( [tag=\"dfn\"] ),\n:host( [tag=\"em\"] ),\n:host( [tag=\"i\"] ),\n:host( [tag=\"ins\"] ),\n:host( [tag=\"kbd\"] ),\n:host( [tag=\"mark\"] ),\n:host( [tag=\"q\"] ),\n:host( [tag=\"rb\"] ),\n:host( [tag=\"rt\"] ),\n:host( [tag=\"ruby\"] ),\n:host( [tag=\"s\"] ),\n:host( [tag=\"samp\"] ),\n:host( [tag=\"small\"] ),\n:host( [tag=\"span\"] ),\n:host( [tag=\"strong\"] ),\n:host( [tag=\"sub\"] ),\n:host( [tag=\"sup\"] ),\n:host( [tag=\"time\"] ),\n:host( [tag=\"u\"] ),\n:host( [tag=\"var\"] ) {\n display: inline;\n}\n\n:host( [tag=\"code\"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate=\"word\"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate=\"all\"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate=\"all\"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n";
const mdsTextCss = ".text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography=\"snippet\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"hack\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h2\"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h3\"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h4\"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h5\"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h6\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ),\n:host( [typography=\"h2\"] ),\n:host( [typography=\"h3\"] ),\n:host( [typography=\"h4\"] ),\n:host( [typography=\"h5\"] ),\n:host( [typography=\"h6\"] ) {\n text-wrap: balance;\n}\n\n:host( [typography=\"action\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ),\n:host( [typography=\"detail\"] ),\n:host( [typography=\"caption\"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography=\"label\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"tip\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"option\"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"][variant=\"read\"] ){\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"][variant=\"read\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"][variant=\"read\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag=\"article\"] ),\n:host( [tag=\"blockquote\"] ),\n:host( [tag=\"dd\"] ),\n:host( [tag=\"details\"] ),\n:host( [tag=\"div\"] ),\n:host( [tag=\"dl\"] ),\n:host( [tag=\"dt\"] ),\n:host( [tag=\"figcaption\"] ),\n:host( [tag=\"h1\"] ),\n:host( [tag=\"h2\"] ),\n:host( [tag=\"h3\"] ),\n:host( [tag=\"h4\"] ),\n:host( [tag=\"h5\"] ),\n:host( [tag=\"h6\"] ),\n:host( [tag=\"label\"] ),\n:host( [tag=\"legend\"] ),\n:host( [tag=\"li\"] ),\n:host( [tag=\"ol\"] ),\n:host( [tag=\"p\"] ),\n:host( [tag=\"pre\"] ),\n:host( [tag=\"summary\"] ),\n:host( [tag=\"ul\"] ) {\n display: block;\n}\n\n:host( [tag=\"abbr\"] ),\n:host( [tag=\"address\"] ),\n:host( [tag=\"b\"] ),\n:host( [tag=\"bdo\"] ),\n:host( [tag=\"cite\"] ),\n:host( [tag=\"code\"] ),\n:host( [tag=\"del\"] ),\n:host( [tag=\"dfn\"] ),\n:host( [tag=\"em\"] ),\n:host( [tag=\"i\"] ),\n:host( [tag=\"ins\"] ),\n:host( [tag=\"kbd\"] ),\n:host( [tag=\"mark\"] ),\n:host( [tag=\"q\"] ),\n:host( [tag=\"rb\"] ),\n:host( [tag=\"rt\"] ),\n:host( [tag=\"ruby\"] ),\n:host( [tag=\"s\"] ),\n:host( [tag=\"samp\"] ),\n:host( [tag=\"small\"] ),\n:host( [tag=\"span\"] ),\n:host( [tag=\"strong\"] ),\n:host( [tag=\"sub\"] ),\n:host( [tag=\"sup\"] ),\n:host( [tag=\"time\"] ),\n:host( [tag=\"u\"] ),\n:host( [tag=\"var\"] ) {\n display: inline;\n}\n\n:host( [tag=\"code\"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate=\"word\"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate=\"all\"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate=\"all\"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n";
const MdsTextStyle0 = mdsTextCss;

@@ -229,0 +229,0 @@

18

dist/collection/common/locale.js
import Handlebars from "handlebars";
export class Locale {
constructor(configData) {
this.defaultLanguage = 'en';
this.rollbackLanguage = 'en';
this.lang = (element) => {
const closestElement = element.closest('[lang]');
if (closestElement) {
if (closestElement.lang) {
this.language = closestElement.lang;
this.closestElement = element.closest('[lang]');
if (this.closestElement) {
if (this.closestElement.lang) {
this.language = this.closestElement.lang;
return;
}
}
this.language = this.defaultLanguage;
this.language = this.rollbackLanguage;
};
this.pluralize = (tag, context) => {
var _a;
const languagePhrase = (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
const phrases = [];

@@ -42,7 +41,6 @@ if (Array.isArray(languagePhrase)) {

this.get = (tag, context) => {
var _a;
if (context) {
return this.pluralize(tag, context);
}
return (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
};

@@ -49,0 +47,0 @@ this.config = configData;

2

dist/components/mds-text.js

@@ -222,3 +222,3 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const mdsTextCss = ".text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography=\"snippet\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"hack\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h2\"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h3\"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h4\"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h5\"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h6\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ),\n:host( [typography=\"h2\"] ),\n:host( [typography=\"h3\"] ),\n:host( [typography=\"h4\"] ),\n:host( [typography=\"h5\"] ),\n:host( [typography=\"h6\"] ) {\n text-wrap: balance;\n}\n\n:host( [typography=\"action\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ),\n:host( [typography=\"detail\"] ),\n:host( [typography=\"caption\"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography=\"label\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"tip\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"option\"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"][variant=\"read\"] ){\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"][variant=\"read\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"][variant=\"read\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag=\"article\"] ),\n:host( [tag=\"blockquote\"] ),\n:host( [tag=\"dd\"] ),\n:host( [tag=\"details\"] ),\n:host( [tag=\"div\"] ),\n:host( [tag=\"dl\"] ),\n:host( [tag=\"dt\"] ),\n:host( [tag=\"figcaption\"] ),\n:host( [tag=\"h1\"] ),\n:host( [tag=\"h2\"] ),\n:host( [tag=\"h3\"] ),\n:host( [tag=\"h4\"] ),\n:host( [tag=\"h5\"] ),\n:host( [tag=\"h6\"] ),\n:host( [tag=\"label\"] ),\n:host( [tag=\"legend\"] ),\n:host( [tag=\"li\"] ),\n:host( [tag=\"ol\"] ),\n:host( [tag=\"p\"] ),\n:host( [tag=\"pre\"] ),\n:host( [tag=\"summary\"] ),\n:host( [tag=\"ul\"] ) {\n display: block;\n}\n\n:host( [tag=\"abbr\"] ),\n:host( [tag=\"address\"] ),\n:host( [tag=\"b\"] ),\n:host( [tag=\"bdo\"] ),\n:host( [tag=\"cite\"] ),\n:host( [tag=\"code\"] ),\n:host( [tag=\"del\"] ),\n:host( [tag=\"dfn\"] ),\n:host( [tag=\"em\"] ),\n:host( [tag=\"i\"] ),\n:host( [tag=\"ins\"] ),\n:host( [tag=\"kbd\"] ),\n:host( [tag=\"mark\"] ),\n:host( [tag=\"q\"] ),\n:host( [tag=\"rb\"] ),\n:host( [tag=\"rt\"] ),\n:host( [tag=\"ruby\"] ),\n:host( [tag=\"s\"] ),\n:host( [tag=\"samp\"] ),\n:host( [tag=\"small\"] ),\n:host( [tag=\"span\"] ),\n:host( [tag=\"strong\"] ),\n:host( [tag=\"sub\"] ),\n:host( [tag=\"sup\"] ),\n:host( [tag=\"time\"] ),\n:host( [tag=\"u\"] ),\n:host( [tag=\"var\"] ) {\n display: inline;\n}\n\n:host( [tag=\"code\"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate=\"word\"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate=\"all\"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate=\"all\"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n";
const mdsTextCss = "\n .text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography=\"snippet\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"hack\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h2\"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h3\"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h4\"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h5\"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h6\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ),\n:host( [typography=\"h2\"] ),\n:host( [typography=\"h3\"] ),\n:host( [typography=\"h4\"] ),\n:host( [typography=\"h5\"] ),\n:host( [typography=\"h6\"] ) {\n text-wrap: balance;\n}\n\n:host( [typography=\"action\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ),\n:host( [typography=\"detail\"] ),\n:host( [typography=\"caption\"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography=\"label\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"tip\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"option\"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"][variant=\"read\"] ){\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"][variant=\"read\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"][variant=\"read\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag=\"article\"] ),\n:host( [tag=\"blockquote\"] ),\n:host( [tag=\"dd\"] ),\n:host( [tag=\"details\"] ),\n:host( [tag=\"div\"] ),\n:host( [tag=\"dl\"] ),\n:host( [tag=\"dt\"] ),\n:host( [tag=\"figcaption\"] ),\n:host( [tag=\"h1\"] ),\n:host( [tag=\"h2\"] ),\n:host( [tag=\"h3\"] ),\n:host( [tag=\"h4\"] ),\n:host( [tag=\"h5\"] ),\n:host( [tag=\"h6\"] ),\n:host( [tag=\"label\"] ),\n:host( [tag=\"legend\"] ),\n:host( [tag=\"li\"] ),\n:host( [tag=\"ol\"] ),\n:host( [tag=\"p\"] ),\n:host( [tag=\"pre\"] ),\n:host( [tag=\"summary\"] ),\n:host( [tag=\"ul\"] ) {\n display: block;\n}\n\n:host( [tag=\"abbr\"] ),\n:host( [tag=\"address\"] ),\n:host( [tag=\"b\"] ),\n:host( [tag=\"bdo\"] ),\n:host( [tag=\"cite\"] ),\n:host( [tag=\"code\"] ),\n:host( [tag=\"del\"] ),\n:host( [tag=\"dfn\"] ),\n:host( [tag=\"em\"] ),\n:host( [tag=\"i\"] ),\n:host( [tag=\"ins\"] ),\n:host( [tag=\"kbd\"] ),\n:host( [tag=\"mark\"] ),\n:host( [tag=\"q\"] ),\n:host( [tag=\"rb\"] ),\n:host( [tag=\"rt\"] ),\n:host( [tag=\"ruby\"] ),\n:host( [tag=\"s\"] ),\n:host( [tag=\"samp\"] ),\n:host( [tag=\"small\"] ),\n:host( [tag=\"span\"] ),\n:host( [tag=\"strong\"] ),\n:host( [tag=\"sub\"] ),\n:host( [tag=\"sup\"] ),\n:host( [tag=\"time\"] ),\n:host( [tag=\"u\"] ),\n:host( [tag=\"var\"] ) {\n display: inline;\n}\n\n:host( [tag=\"code\"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate=\"word\"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate=\"all\"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate=\"all\"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n";
const MdsTextStyle0 = mdsTextCss;

@@ -225,0 +225,0 @@

2

dist/documentation.json
{
"timestamp": "2024-09-05T13:48:16",
"timestamp": "2024-09-13T08:56:11",
"compiler": {

@@ -4,0 +4,0 @@ "name": "@stencil/core",

2

dist/esm-es5/mds-text.entry.js

@@ -1,1 +0,1 @@

var __spreadArray=this&&this.__spreadArray||function(n,t,e){if(e||arguments.length===2)for(var o=0,a=t.length,i;o<a;o++){if(i||!(o in t)){if(!i)i=Array.prototype.slice.call(t,0,o);i[o]=t[o]}}return n.concat(i||Array.prototype.slice.call(t))};import{r as registerInstance,h,H as Host,g as getElement}from"./index-3ce6e6a8.js";var typographyDefaultsVariant={action:{tag:"span",selector:{default:"text-title-action",title:"text-title-action"}},caption:{tag:"span",selector:{default:"text-info-caption",info:"text-info-caption",read:"text-read-caption"}},detail:{tag:"p",selector:{default:"text-info-detail",info:"text-info-detail",read:"text-read-detail"}},h1:{tag:"h1",selector:{default:"text-title-h1",title:"text-title-h1"}},h2:{tag:"h2",selector:{default:"text-title-h2",title:"text-title-h2"}},h3:{tag:"h3",selector:{default:"text-title-h3",title:"text-title-h3"}},h4:{tag:"h4",selector:{default:"text-title-h4",title:"text-title-h4"}},h5:{tag:"h5",selector:{default:"text-title-h5",title:"text-title-h5"}},h6:{tag:"h6",selector:{default:"text-title-h6",title:"text-title-h6"}},hack:{tag:"code",selector:{default:"text-code-hack",mono:"text-code-hack"}},label:{tag:"label",selector:{default:"text-info-label",info:"text-info-label"}},option:{tag:"label",selector:{default:"text-info-option",info:"text-info-option"}},paragraph:{tag:"p",selector:{default:"text-info-paragraph",secondary:"text-secondary-paragraph",info:"text-info-paragraph",read:"text-read-paragraph"}},snippet:{tag:"code",selector:{default:"text-code-snippet",mono:"text-code-snippet"}},tip:{tag:"div",selector:{default:"text-info-tip",info:"text-info-tip"}}};var int32=2147483647;var gen=function(n){return n*16807%int32};var randomFloat=function(n){return gen(n)/int32};var randomInt=function(n){return gen(n)};var generator=function(n){if(n===void 0){n=1}var t=n<1?1:n;var e=function(){t=randomInt(t);return t};return{random:function(){return e()},randomFloat:function(){return randomFloat(e())},range:function(n,t){var o=n-.4999;var a=t+.4999;return Math.round(o+(a-o)*randomFloat(e()))},rangeFloat:function(n,t){return n+(t-n)*randomFloat(e())}}};var strToCharCodeArray=function(n){return n.split("").map((function(n){return n.charCodeAt(0)}))};var randomSign=function(){return(Math.round(Math.random())-.5)*2};var minMaxLooped=function(n,t){return function(e){if(e>t)return n+(e-t);if(e<n)return t+(e-n);return e}};var rand=generator();var random=function(n,t){return function(){return(n+rand.range(0,t))*randomSign()}};var generateRandomCharCodeArray=function(n,t){return function(e){return strToCharCodeArray(e).map(random(n,t))}};var charCodeArrayToString=function(n){var t=n.str,e=n.minCharCode,o=n.maxCharCode,a=n.placeholderChar,i=n.charStep;return function(n){return n.reduce((function(n,r,s){if(r!==0){if(Math.abs(r)>i){return n+a}return n+String.fromCharCode(minMaxLooped(e,o)(t.charCodeAt(s)+r))}return n+t.charAt(s)}),"")}};var noop=function(){};var RandomText=function(){function n(t){var e=this;this.start=function(){var n=e,t=n.frameOffset,o=n.charOffset,a=n.str,i=n.speed;var r=generateRandomCharCodeArray(t,o)(a);e.stop();e.rafId=requestAnimationFrame((function(){e.step(r,i,i)}))};Object.assign(this,Object.assign(Object.assign({},n.defaults),t))}n.prototype.stop=function(){cancelAnimationFrame(this.rafId)};n.prototype.step=function(n,t,e){var o=this;var a=this,i=a.str,r=a.charStep,s=a.minCharCode,l=a.maxCharCode,h=a.placeholderChar,m=a.onProgress,g=a.onComplete;var f=n.slice(0,t);var c=f.map((function(n){if(n>0)return n-1;if(n<0)return n+1;return 0}));var p=charCodeArrayToString({str:i,minCharCode:s,maxCharCode:l,placeholderChar:h,charStep:r})(c);var y=__spreadArray(__spreadArray([],c,true),n.slice(t),true);m(p);if(p!==i){this.rafId=requestAnimationFrame((function(){o.step(y,t+e,e)}))}else{g(p)}};return n}();RandomText.defaults={str:"",speed:2,placeholderChar:"_",frameOffset:30,charOffset:20,charStep:10,minCharCode:32,maxCharCode:122,onProgress:noop,onComplete:noop};var mdsTextCss='\n .text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate=\'all\' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography="snippet"] ){\n\n min-height: 1.5rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="hack"] ){\n\n min-height: 1.25rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h2"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h3"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h4"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h5"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h6"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ),\n:host( [typography="h2"] ),\n:host( [typography="h3"] ),\n:host( [typography="h4"] ),\n:host( [typography="h5"] ),\n:host( [typography="h6"] ) {\n text-wrap: balance;\n}\n\n:host( [typography="action"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ),\n:host( [typography="detail"] ),\n:host( [typography="caption"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography="label"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="tip"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="option"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"][variant="read"] ){\n\n min-height: 2rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"][variant="read"] ){\n\n min-height: 1.5rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"][variant="read"] ){\n\n min-height: 1.25rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag="article"] ),\n:host( [tag="blockquote"] ),\n:host( [tag="dd"] ),\n:host( [tag="details"] ),\n:host( [tag="div"] ),\n:host( [tag="dl"] ),\n:host( [tag="dt"] ),\n:host( [tag="figcaption"] ),\n:host( [tag="h1"] ),\n:host( [tag="h2"] ),\n:host( [tag="h3"] ),\n:host( [tag="h4"] ),\n:host( [tag="h5"] ),\n:host( [tag="h6"] ),\n:host( [tag="label"] ),\n:host( [tag="legend"] ),\n:host( [tag="li"] ),\n:host( [tag="ol"] ),\n:host( [tag="p"] ),\n:host( [tag="pre"] ),\n:host( [tag="summary"] ),\n:host( [tag="ul"] ) {\n display: block;\n}\n\n:host( [tag="abbr"] ),\n:host( [tag="address"] ),\n:host( [tag="b"] ),\n:host( [tag="bdo"] ),\n:host( [tag="cite"] ),\n:host( [tag="code"] ),\n:host( [tag="del"] ),\n:host( [tag="dfn"] ),\n:host( [tag="em"] ),\n:host( [tag="i"] ),\n:host( [tag="ins"] ),\n:host( [tag="kbd"] ),\n:host( [tag="mark"] ),\n:host( [tag="q"] ),\n:host( [tag="rb"] ),\n:host( [tag="rt"] ),\n:host( [tag="ruby"] ),\n:host( [tag="s"] ),\n:host( [tag="samp"] ),\n:host( [tag="small"] ),\n:host( [tag="span"] ),\n:host( [tag="strong"] ),\n:host( [tag="sub"] ),\n:host( [tag="sup"] ),\n:host( [tag="time"] ),\n:host( [tag="u"] ),\n:host( [tag="var"] ) {\n display: inline;\n}\n\n:host( [tag="code"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate="word"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate="all"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate="all"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n';var MdsTextStyle0=mdsTextCss;var MdsText=function(){function n(n){var t=this;registerInstance(this,n);this.randomTextOptions={speed:2,placeholderChar:" ",frameOffset:10,charOffset:20,charStep:15};this.animateText=function(n){var e;var o=(e=t.host.shadowRoot)===null||e===void 0?void 0:e.querySelector(".text");t.randomText=new RandomText(Object.assign({str:n,onProgress:function(n){o.innerHTML=n}},t.randomTextOptions));t.randomText.start()};this.animation="none";this.tag=undefined;this.text=undefined;this.truncate=undefined;this.typography="detail";this.variant=undefined}n.prototype.componentWillRender=function(){var n;var t=typographyDefaultsVariant[this.typography].tag;this.tag=(n=this.tag)!==null&&n!==void 0?n:t};n.prototype.textHandler=function(n){if(this.animation==="none"){return}if(this.randomText){this.randomText.stop()}if(n){this.animateText(n)}};n.prototype.render=function(){return h(Host,{key:"5921af7c7fa50c09506796342f227aa15d6f0aa8"},h(this.tag,{key:"b66734f6bc36468bd1fbe0e52dde2ac9f20c6a34",class:"text"},!this.text?h("slot",null):this.text))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{text:["textHandler"]}},enumerable:false,configurable:true});return n}();MdsText.style=MdsTextStyle0;export{MdsText as mds_text};
var __spreadArray=this&&this.__spreadArray||function(n,t,e){if(e||arguments.length===2)for(var o=0,a=t.length,i;o<a;o++){if(i||!(o in t)){if(!i)i=Array.prototype.slice.call(t,0,o);i[o]=t[o]}}return n.concat(i||Array.prototype.slice.call(t))};import{r as registerInstance,h,H as Host,g as getElement}from"./index-3ce6e6a8.js";var typographyDefaultsVariant={action:{tag:"span",selector:{default:"text-title-action",title:"text-title-action"}},caption:{tag:"span",selector:{default:"text-info-caption",info:"text-info-caption",read:"text-read-caption"}},detail:{tag:"p",selector:{default:"text-info-detail",info:"text-info-detail",read:"text-read-detail"}},h1:{tag:"h1",selector:{default:"text-title-h1",title:"text-title-h1"}},h2:{tag:"h2",selector:{default:"text-title-h2",title:"text-title-h2"}},h3:{tag:"h3",selector:{default:"text-title-h3",title:"text-title-h3"}},h4:{tag:"h4",selector:{default:"text-title-h4",title:"text-title-h4"}},h5:{tag:"h5",selector:{default:"text-title-h5",title:"text-title-h5"}},h6:{tag:"h6",selector:{default:"text-title-h6",title:"text-title-h6"}},hack:{tag:"code",selector:{default:"text-code-hack",mono:"text-code-hack"}},label:{tag:"label",selector:{default:"text-info-label",info:"text-info-label"}},option:{tag:"label",selector:{default:"text-info-option",info:"text-info-option"}},paragraph:{tag:"p",selector:{default:"text-info-paragraph",secondary:"text-secondary-paragraph",info:"text-info-paragraph",read:"text-read-paragraph"}},snippet:{tag:"code",selector:{default:"text-code-snippet",mono:"text-code-snippet"}},tip:{tag:"div",selector:{default:"text-info-tip",info:"text-info-tip"}}};var int32=2147483647;var gen=function(n){return n*16807%int32};var randomFloat=function(n){return gen(n)/int32};var randomInt=function(n){return gen(n)};var generator=function(n){if(n===void 0){n=1}var t=n<1?1:n;var e=function(){t=randomInt(t);return t};return{random:function(){return e()},randomFloat:function(){return randomFloat(e())},range:function(n,t){var o=n-.4999;var a=t+.4999;return Math.round(o+(a-o)*randomFloat(e()))},rangeFloat:function(n,t){return n+(t-n)*randomFloat(e())}}};var strToCharCodeArray=function(n){return n.split("").map((function(n){return n.charCodeAt(0)}))};var randomSign=function(){return(Math.round(Math.random())-.5)*2};var minMaxLooped=function(n,t){return function(e){if(e>t)return n+(e-t);if(e<n)return t+(e-n);return e}};var rand=generator();var random=function(n,t){return function(){return(n+rand.range(0,t))*randomSign()}};var generateRandomCharCodeArray=function(n,t){return function(e){return strToCharCodeArray(e).map(random(n,t))}};var charCodeArrayToString=function(n){var t=n.str,e=n.minCharCode,o=n.maxCharCode,a=n.placeholderChar,i=n.charStep;return function(n){return n.reduce((function(n,r,s){if(r!==0){if(Math.abs(r)>i){return n+a}return n+String.fromCharCode(minMaxLooped(e,o)(t.charCodeAt(s)+r))}return n+t.charAt(s)}),"")}};var noop=function(){};var RandomText=function(){function n(t){var e=this;this.start=function(){var n=e,t=n.frameOffset,o=n.charOffset,a=n.str,i=n.speed;var r=generateRandomCharCodeArray(t,o)(a);e.stop();e.rafId=requestAnimationFrame((function(){e.step(r,i,i)}))};Object.assign(this,Object.assign(Object.assign({},n.defaults),t))}n.prototype.stop=function(){cancelAnimationFrame(this.rafId)};n.prototype.step=function(n,t,e){var o=this;var a=this,i=a.str,r=a.charStep,s=a.minCharCode,l=a.maxCharCode,h=a.placeholderChar,m=a.onProgress,g=a.onComplete;var f=n.slice(0,t);var c=f.map((function(n){if(n>0)return n-1;if(n<0)return n+1;return 0}));var p=charCodeArrayToString({str:i,minCharCode:s,maxCharCode:l,placeholderChar:h,charStep:r})(c);var y=__spreadArray(__spreadArray([],c,true),n.slice(t),true);m(p);if(p!==i){this.rafId=requestAnimationFrame((function(){o.step(y,t+e,e)}))}else{g(p)}};return n}();RandomText.defaults={str:"",speed:2,placeholderChar:"_",frameOffset:30,charOffset:20,charStep:10,minCharCode:32,maxCharCode:122,onProgress:noop,onComplete:noop};var mdsTextCss='.text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate=\'all\' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography="snippet"] ){\n\n min-height: 1.5rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="hack"] ){\n\n min-height: 1.25rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h2"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h3"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h4"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h5"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h6"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ),\n:host( [typography="h2"] ),\n:host( [typography="h3"] ),\n:host( [typography="h4"] ),\n:host( [typography="h5"] ),\n:host( [typography="h6"] ) {\n text-wrap: balance;\n}\n\n:host( [typography="action"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ),\n:host( [typography="detail"] ),\n:host( [typography="caption"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography="label"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="tip"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="option"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"][variant="read"] ){\n\n min-height: 2rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"][variant="read"] ){\n\n min-height: 1.5rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"][variant="read"] ){\n\n min-height: 1.25rem;\n\n font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag="article"] ),\n:host( [tag="blockquote"] ),\n:host( [tag="dd"] ),\n:host( [tag="details"] ),\n:host( [tag="div"] ),\n:host( [tag="dl"] ),\n:host( [tag="dt"] ),\n:host( [tag="figcaption"] ),\n:host( [tag="h1"] ),\n:host( [tag="h2"] ),\n:host( [tag="h3"] ),\n:host( [tag="h4"] ),\n:host( [tag="h5"] ),\n:host( [tag="h6"] ),\n:host( [tag="label"] ),\n:host( [tag="legend"] ),\n:host( [tag="li"] ),\n:host( [tag="ol"] ),\n:host( [tag="p"] ),\n:host( [tag="pre"] ),\n:host( [tag="summary"] ),\n:host( [tag="ul"] ) {\n display: block;\n}\n\n:host( [tag="abbr"] ),\n:host( [tag="address"] ),\n:host( [tag="b"] ),\n:host( [tag="bdo"] ),\n:host( [tag="cite"] ),\n:host( [tag="code"] ),\n:host( [tag="del"] ),\n:host( [tag="dfn"] ),\n:host( [tag="em"] ),\n:host( [tag="i"] ),\n:host( [tag="ins"] ),\n:host( [tag="kbd"] ),\n:host( [tag="mark"] ),\n:host( [tag="q"] ),\n:host( [tag="rb"] ),\n:host( [tag="rt"] ),\n:host( [tag="ruby"] ),\n:host( [tag="s"] ),\n:host( [tag="samp"] ),\n:host( [tag="small"] ),\n:host( [tag="span"] ),\n:host( [tag="strong"] ),\n:host( [tag="sub"] ),\n:host( [tag="sup"] ),\n:host( [tag="time"] ),\n:host( [tag="u"] ),\n:host( [tag="var"] ) {\n display: inline;\n}\n\n:host( [tag="code"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate="word"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate="all"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate="all"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n';var MdsTextStyle0=mdsTextCss;var MdsText=function(){function n(n){var t=this;registerInstance(this,n);this.randomTextOptions={speed:2,placeholderChar:" ",frameOffset:10,charOffset:20,charStep:15};this.animateText=function(n){var e;var o=(e=t.host.shadowRoot)===null||e===void 0?void 0:e.querySelector(".text");t.randomText=new RandomText(Object.assign({str:n,onProgress:function(n){o.innerHTML=n}},t.randomTextOptions));t.randomText.start()};this.animation="none";this.tag=undefined;this.text=undefined;this.truncate=undefined;this.typography="detail";this.variant=undefined}n.prototype.componentWillRender=function(){var n;var t=typographyDefaultsVariant[this.typography].tag;this.tag=(n=this.tag)!==null&&n!==void 0?n:t};n.prototype.textHandler=function(n){if(this.animation==="none"){return}if(this.randomText){this.randomText.stop()}if(n){this.animateText(n)}};n.prototype.render=function(){return h(Host,{key:"5921af7c7fa50c09506796342f227aa15d6f0aa8"},h(this.tag,{key:"b66734f6bc36468bd1fbe0e52dde2ac9f20c6a34",class:"text"},!this.text?h("slot",null):this.text))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{text:["textHandler"]}},enumerable:false,configurable:true});return n}();MdsText.style=MdsTextStyle0;export{MdsText as mds_text};

2

dist/esm/mds-text.entry.js

@@ -222,3 +222,3 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-3ce6e6a8.js';

const mdsTextCss = "\n .text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n .text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography=\"snippet\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"hack\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h2\"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h3\"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h4\"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h5\"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h6\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ),\n:host( [typography=\"h2\"] ),\n:host( [typography=\"h3\"] ),\n:host( [typography=\"h4\"] ),\n:host( [typography=\"h5\"] ),\n:host( [typography=\"h6\"] ) {\n text-wrap: balance;\n}\n\n:host( [typography=\"action\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ),\n:host( [typography=\"detail\"] ),\n:host( [typography=\"caption\"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography=\"label\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"tip\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"option\"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"][variant=\"read\"] ){\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"][variant=\"read\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"][variant=\"read\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag=\"article\"] ),\n:host( [tag=\"blockquote\"] ),\n:host( [tag=\"dd\"] ),\n:host( [tag=\"details\"] ),\n:host( [tag=\"div\"] ),\n:host( [tag=\"dl\"] ),\n:host( [tag=\"dt\"] ),\n:host( [tag=\"figcaption\"] ),\n:host( [tag=\"h1\"] ),\n:host( [tag=\"h2\"] ),\n:host( [tag=\"h3\"] ),\n:host( [tag=\"h4\"] ),\n:host( [tag=\"h5\"] ),\n:host( [tag=\"h6\"] ),\n:host( [tag=\"label\"] ),\n:host( [tag=\"legend\"] ),\n:host( [tag=\"li\"] ),\n:host( [tag=\"ol\"] ),\n:host( [tag=\"p\"] ),\n:host( [tag=\"pre\"] ),\n:host( [tag=\"summary\"] ),\n:host( [tag=\"ul\"] ) {\n display: block;\n}\n\n:host( [tag=\"abbr\"] ),\n:host( [tag=\"address\"] ),\n:host( [tag=\"b\"] ),\n:host( [tag=\"bdo\"] ),\n:host( [tag=\"cite\"] ),\n:host( [tag=\"code\"] ),\n:host( [tag=\"del\"] ),\n:host( [tag=\"dfn\"] ),\n:host( [tag=\"em\"] ),\n:host( [tag=\"i\"] ),\n:host( [tag=\"ins\"] ),\n:host( [tag=\"kbd\"] ),\n:host( [tag=\"mark\"] ),\n:host( [tag=\"q\"] ),\n:host( [tag=\"rb\"] ),\n:host( [tag=\"rt\"] ),\n:host( [tag=\"ruby\"] ),\n:host( [tag=\"s\"] ),\n:host( [tag=\"samp\"] ),\n:host( [tag=\"small\"] ),\n:host( [tag=\"span\"] ),\n:host( [tag=\"strong\"] ),\n:host( [tag=\"sub\"] ),\n:host( [tag=\"sup\"] ),\n:host( [tag=\"time\"] ),\n:host( [tag=\"u\"] ),\n:host( [tag=\"var\"] ) {\n display: inline;\n}\n\n:host( [tag=\"code\"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate=\"word\"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate=\"all\"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate=\"all\"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n";
const mdsTextCss = ".text-title-h1{\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h2{\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h3{\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h4{\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h5{\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-h6{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-title-action{\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-paragraph{\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-detail{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-caption{\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-label{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-option{\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-info-tip{\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-paragraph{\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-detail{\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-read-caption{\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-snippet{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.text-code-hack{\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n@tailwind utilities;\n\n/**\n* @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n* @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n* @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n*/\n\n:host {\n\n --mds-text-selection-background: rgb(var(--label-sky-09));\n --mds-text-selection-color: rgb(var(--label-sky-01));\n --mds-text-line-clamp: 3;\n\n display: -ms-flexbox;\n\n display: flex;\n min-width: 0;\n}\n\n.text::-moz-selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n background-color: var(--mds-text-selection-background);\n color: var(--mds-text-selection-color);\n}\n\n.text {\n cursor: inherit;\n display: inherit;\n}\n\n:host( [typography=\"snippet\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"hack\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ){\n\n min-height: 3rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 3rem;\n\n line-height: 3rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h2\"] ){\n\n min-height: 2.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 2.25rem;\n\n line-height: 2.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h3\"] ){\n\n min-height: 2.25rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.875rem;\n\n line-height: 2.25rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 900;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h4\"] ){\n\n min-height: 2rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.5rem;\n\n line-height: 2rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h5\"] ){\n\n min-height: 1.75rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 1.75rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h6\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"h1\"] ),\n:host( [typography=\"h2\"] ),\n:host( [typography=\"h3\"] ),\n:host( [typography=\"h4\"] ),\n:host( [typography=\"h5\"] ),\n:host( [typography=\"h6\"] ) {\n text-wrap: balance;\n}\n\n:host( [typography=\"action\"] ){\n\n min-height: 1.5rem;\n\n font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.5rem;\n\n font-weight: 500;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ){\n\n min-height: 2rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"] ){\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"] ){\n\n min-height: 1.25rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"] ),\n:host( [typography=\"detail\"] ),\n:host( [typography=\"caption\"] ) {\n text-wrap: pretty;\n}\n\n:host( [typography=\"label\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"tip\"] ){\n\n min-height: 1rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.75rem;\n\n line-height: 1rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"option\"] ){\n\n min-height: 0.625rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 0.625rem;\n\n line-height: 0.625rem;\n\n letter-spacing: -0.025em;\n\n font-weight: 700;\n\n text-transform: uppercase;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"paragraph\"][variant=\"read\"] ){\n\n min-height: 2rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1.25rem;\n\n line-height: 2rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"detail\"][variant=\"read\"] ){\n\n min-height: 1.5rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n font-weight: 300;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"caption\"][variant=\"read\"] ){\n\n min-height: 1.25rem;\n\n font-family: 'Merriweather', Times, 'Times New Roman', serif;\n\n font-size: 0.875rem;\n\n line-height: 1.25rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag=\"article\"] ),\n:host( [tag=\"blockquote\"] ),\n:host( [tag=\"dd\"] ),\n:host( [tag=\"details\"] ),\n:host( [tag=\"div\"] ),\n:host( [tag=\"dl\"] ),\n:host( [tag=\"dt\"] ),\n:host( [tag=\"figcaption\"] ),\n:host( [tag=\"h1\"] ),\n:host( [tag=\"h2\"] ),\n:host( [tag=\"h3\"] ),\n:host( [tag=\"h4\"] ),\n:host( [tag=\"h5\"] ),\n:host( [tag=\"h6\"] ),\n:host( [tag=\"label\"] ),\n:host( [tag=\"legend\"] ),\n:host( [tag=\"li\"] ),\n:host( [tag=\"ol\"] ),\n:host( [tag=\"p\"] ),\n:host( [tag=\"pre\"] ),\n:host( [tag=\"summary\"] ),\n:host( [tag=\"ul\"] ) {\n display: block;\n}\n\n:host( [tag=\"abbr\"] ),\n:host( [tag=\"address\"] ),\n:host( [tag=\"b\"] ),\n:host( [tag=\"bdo\"] ),\n:host( [tag=\"cite\"] ),\n:host( [tag=\"code\"] ),\n:host( [tag=\"del\"] ),\n:host( [tag=\"dfn\"] ),\n:host( [tag=\"em\"] ),\n:host( [tag=\"i\"] ),\n:host( [tag=\"ins\"] ),\n:host( [tag=\"kbd\"] ),\n:host( [tag=\"mark\"] ),\n:host( [tag=\"q\"] ),\n:host( [tag=\"rb\"] ),\n:host( [tag=\"rt\"] ),\n:host( [tag=\"ruby\"] ),\n:host( [tag=\"s\"] ),\n:host( [tag=\"samp\"] ),\n:host( [tag=\"small\"] ),\n:host( [tag=\"span\"] ),\n:host( [tag=\"strong\"] ),\n:host( [tag=\"sub\"] ),\n:host( [tag=\"sup\"] ),\n:host( [tag=\"time\"] ),\n:host( [tag=\"u\"] ),\n:host( [tag=\"var\"] ) {\n display: inline;\n}\n\n:host( [tag=\"code\"] ){\n\n border-radius: 0.25rem;\n\n padding-left: 0.25rem;\n\n padding-right: 0.25rem;\n\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 150ms;\n\n transition-duration: 150ms;\n\n background-color: rgb(var(--tone-neutral-09));\n color: rgb(var(--tone-neutral-03));\n}\n\n:host( [truncate] ) .text {\n display: block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host( [truncate=\"word\"] ) .text {\n white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n :host( [truncate=\"all\"] ) .text {\n line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\n@supports (display: -webkit-box) {\n :host( [truncate=\"all\"] ) .text {\n -webkit-box-orient: vertical;\n\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n overflow: inherit;\n text-overflow: inherit;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-09{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-09) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-600{\n\n padding: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n";
const MdsTextStyle0 = mdsTextCss;

@@ -225,0 +225,0 @@

2

dist/mds-text/mds-text.esm.js

@@ -1,1 +0,1 @@

import{p as t,b as a}from"./p-fcd93349.js";export{s as setNonce}from"./p-fcd93349.js";import{g as e}from"./p-e1255160.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),t(e)})().then((async t=>(await e(),a([["p-bb43a97b",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],t))));
import{p as t,b as a}from"./p-fcd93349.js";export{s as setNonce}from"./p-fcd93349.js";import{g as e}from"./p-e1255160.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),t(e)})().then((async t=>(await e(),a([["p-9aba0d68",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],t))));

2

dist/mds-text/p-a3edea1a.system.js

@@ -1,1 +0,1 @@

var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function c(t){try{a(r.next(t))}catch(t){u(t)}}function o(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(c,o)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function o(t){return function(n){return a([t,n])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,o[0]&&(e=0)),e)try{if(r=1,i&&(u=o[0]&2?i["return"]:o[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,o[1])).done)return u;if(i=0,u)o=[o[0]&2,u.value];switch(o[0]){case 0:case 1:u=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!u||o[1]>u[0]&&o[1]<u[3])){e.label=o[1];break}if(o[0]===6&&e.label<u[1]){e.label=u[1];u=o;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(o);break}if(u[2])e.ops.pop();e.trys.pop();continue}o=n.call(t,e)}catch(t){o=[6,t];i=0}finally{r=u=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-82b3529b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-5ec83dbe.system",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],n)]}}))}))}))}}}));
var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function c(t){try{a(r.next(t))}catch(t){u(t)}}function o(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(c,o)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function o(t){return function(n){return a([t,n])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,o[0]&&(e=0)),e)try{if(r=1,i&&(u=o[0]&2?i["return"]:o[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,o[1])).done)return u;if(i=0,u)o=[o[0]&2,u.value];switch(o[0]){case 0:case 1:u=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!u||o[1]>u[0]&&o[1]<u[3])){e.label=o[1];break}if(o[0]===6&&e.label<u[1]){e.label=u[1];u=o;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(o);break}if(u[2])e.ops.pop();e.trys.pop();continue}o=n.call(t,e)}catch(t){o=[6,t];i=0}finally{r=u=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-82b3529b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-cf796d29.system",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],n)]}}))}))}))}}}));

34

dist/stats.json
{
"timestamp": "2024-09-05T13:48:16",
"timestamp": "2024-09-13T08:56:12",
"compiler": {

@@ -12,7 +12,7 @@ "name": "node",

"entries": 1,
"bundles": 92,
"bundles": 93,
"outputs": [
{
"name": "dist-collection",
"files": 44,
"files": 45,
"generatedFiles": [

@@ -57,2 +57,3 @@ "./dist/collection/common/aria.js",

"./dist/collection/type/input.js",
"./dist/collection/type/language.js",
"./dist/collection/type/loading.js",

@@ -105,6 +106,6 @@ "./dist/collection/type/preference.js",

"./dist/mds-text/p-56ba5cbf.system.js",
"./dist/mds-text/p-5ec83dbe.system.entry.js",
"./dist/mds-text/p-82b3529b.system.js",
"./dist/mds-text/p-9aba0d68.entry.js",
"./dist/mds-text/p-a3edea1a.system.js",
"./dist/mds-text/p-bb43a97b.entry.js",
"./dist/mds-text/p-cf796d29.system.entry.js",
"./dist/mds-text/p-e1255160.js",

@@ -117,6 +118,6 @@ "./dist/mds-text/p-fcd93349.js",

"./www/build/p-56ba5cbf.system.js",
"./www/build/p-5ec83dbe.system.entry.js",
"./www/build/p-82b3529b.system.js",
"./www/build/p-9aba0d68.entry.js",
"./www/build/p-a3edea1a.system.js",
"./www/build/p-bb43a97b.entry.js",
"./www/build/p-cf796d29.system.entry.js",
"./www/build/p-e1255160.js",

@@ -156,8 +157,8 @@ "./www/build/p-fcd93349.js"

],
"bundleId": "p-bb43a97b",
"fileName": "p-bb43a97b.entry.js",
"bundleId": "p-9aba0d68",
"fileName": "p-9aba0d68.entry.js",
"imports": [
"p-fcd93349.js"
],
"originalByteSize": 28010
"originalByteSize": 27972
}

@@ -176,3 +177,3 @@ ],

],
"originalByteSize": 28014
"originalByteSize": 27976
}

@@ -191,3 +192,3 @@ ],

],
"originalByteSize": 28014
"originalByteSize": 27976
}

@@ -201,8 +202,8 @@ ],

],
"bundleId": "p-5ec83dbe.system",
"fileName": "p-5ec83dbe.system.entry.js",
"bundleId": "p-cf796d29.system",
"fileName": "p-cf796d29.system.entry.js",
"imports": [
"p-82b3529b.system.js"
],
"originalByteSize": 31455
"originalByteSize": 31417
}

@@ -221,3 +222,3 @@ ],

],
"originalByteSize": 28079
"originalByteSize": 28041
}

@@ -752,2 +753,3 @@ ]

"./src/type/input.ts": [],
"./src/type/language.ts": [],
"./src/type/loading.ts": [],

@@ -754,0 +756,0 @@ "./src/type/preference.ts": [],

8

dist/types/common/locale.d.ts
type LocaleConfig = {
el?: Record<string, string | string[]>;
en: Record<string, string | string[]>;
es?: Record<string, string | string[]>;
it?: Record<string, string | string[]>;
en?: Record<string, string | string[]>;
gr?: Record<string, string | string[]>;
};
export declare class Locale {
defaultLanguage: string;
rollbackLanguage: string;
language: string;
config: LocaleConfig;
closestElement: HTMLElement;
constructor(configData: LocaleConfig);

@@ -11,0 +13,0 @@ lang: (element: HTMLElement) => void;

2

dist/types/type/preference.d.ts

@@ -1,2 +0,2 @@

export type UIPreferenceType = 'animation' | 'consumption' | 'contrast' | 'theme';
export type UIPreferenceType = 'animation' | 'consumption' | 'contrast' | 'theme' | 'language';
export type ConsumptionModeType = 'high' | 'medium' | 'low';

31

documentation.json
{
"timestamp": "2024-09-05T13:13:09",
"timestamp": "2024-09-13T08:12:14",
"compiler": {

@@ -523,5 +523,8 @@ "name": "@stencil/core",

"mds-paginator-item",
"mds-pref",
"mds-pref-animation",
"mds-pref-consumption",
"mds-pref-contrast",
"mds-pref-language",
"mds-pref-language-nav",
"mds-pref-theme",

@@ -614,2 +617,5 @@ "mds-price-table-features",

],
"mds-pref": [
"mds-text"
],
"mds-pref-animation": [

@@ -624,2 +630,8 @@ "mds-text"

],
"mds-pref-language": [
"mds-text"
],
"mds-pref-language-nav": [
"mds-text"
],
"mds-pref-theme": [

@@ -786,3 +798,3 @@ "mds-text"

"src/components/mds-dropdown/meta/types.ts::DropdownInteractionType": {
"declaration": "export type DropdownInteractionType =\n | 'click'\n | 'mouseover'",
"declaration": "export type DropdownInteractionType =\n | 'click'\n | 'none'\n | 'mouseover'",
"docstring": "",

@@ -1001,2 +1013,7 @@ "path": "src/components/mds-dropdown/meta/types.ts"

},
"src/event-detail/preference.ts::MdsPrefChangeEventDetail": {
"declaration": "export interface MdsPrefChangeEventDetail {\n preference: UIPreferenceType\n}",
"docstring": "",
"path": "src/event-detail/preference.ts"
},
"src/type/preference.ts::ConsumptionModeType": {

@@ -1012,2 +1029,12 @@ "declaration": "export type ConsumptionModeType =\n | 'high'\n | 'medium'\n | 'low'",

},
"src/type/language.ts::LanguageType": {
"declaration": "export type LanguageType =\n | 'auto'\n | `${Lowercase<string>}${Lowercase<string>}`\n | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
"docstring": "",
"path": "src/type/language.ts"
},
"src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
"declaration": "export interface MdsPrefLanguageEventDetail {\n language?: LanguageType\n}",
"docstring": "",
"path": "src/event-detail/language.ts"
},
"src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {

@@ -1014,0 +1041,0 @@ "declaration": "export type ThemeModeType =\n | 'light'\n | 'dark'\n | 'system'",

4

package.json
{
"name": "@maggioli-design-system/mds-text",
"version": "4.4.0",
"version": "4.4.1",
"description": "mds-text is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",

@@ -27,3 +27,3 @@ "main": "dist/index.cjs.js",

"dependencies": {
"@maggioli-design-system/styles": "15.3.0",
"@maggioli-design-system/styles": "15.3.1",
"@stencil/core": "4.21.0",

@@ -30,0 +30,0 @@ "clsx": "2.1.0"

6

readme.md

@@ -66,5 +66,8 @@ # mds-text

- [mds-paginator-item](../mds-paginator-item)
- [mds-pref](../mds-pref)
- [mds-pref-animation](../mds-pref-animation)
- [mds-pref-consumption](../mds-pref-consumption)
- [mds-pref-contrast](../mds-pref-contrast)
- [mds-pref-language](../mds-pref-language)
- [mds-pref-language-nav](../mds-pref-language-nav)
- [mds-pref-theme](../mds-pref-theme)

@@ -110,5 +113,8 @@ - [mds-price-table-features](../mds-price-table-features)

mds-paginator-item --> mds-text
mds-pref --> mds-text
mds-pref-animation --> mds-text
mds-pref-consumption --> mds-text
mds-pref-contrast --> mds-text
mds-pref-language --> mds-text
mds-pref-language-nav --> mds-text
mds-pref-theme --> mds-text

@@ -115,0 +121,0 @@ mds-price-table-features --> mds-text

24

src/common/locale.ts
import Handlebars from 'handlebars'
type LocaleConfig = {
el?: Record<string, string | string[]>
en: Record<string, string | string[]>
es?: Record<string, string | string[]>
it?: Record<string, string | string[]>
en?: Record<string, string | string[]>
gr?: Record<string, string | string[]>
}
export class Locale {
defaultLanguage: string = 'en'
rollbackLanguage: string = 'en'
language: string
config: LocaleConfig
closestElement:HTMLElement

@@ -19,6 +21,8 @@ constructor (configData: LocaleConfig) {

lang = (element: HTMLElement): void => {
const closestElement:HTMLElement = element.closest('[lang]') as HTMLElement
if (closestElement) {
if (closestElement.lang) {
this.language = closestElement.lang
this.closestElement = element.closest('[lang]') as HTMLElement
if (this.closestElement) {
if (this.closestElement.lang) {
this.language = this.closestElement.lang
return

@@ -28,3 +32,3 @@ }

this.language = this.defaultLanguage
this.language = this.rollbackLanguage
}

@@ -34,3 +38,3 @@

const languagePhrase: string | string[] = this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
const phrases: string[] = []

@@ -67,4 +71,4 @@

}
return this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
}
}

1

src/type/preference.ts

@@ -6,2 +6,3 @@ export type UIPreferenceType =

| 'theme'
| 'language'

@@ -8,0 +9,0 @@ export type ConsumptionModeType =

2

www/build/mds-text.esm.js

@@ -1,1 +0,1 @@

import{p as t,b as a}from"./p-fcd93349.js";export{s as setNonce}from"./p-fcd93349.js";import{g as e}from"./p-e1255160.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),t(e)})().then((async t=>(await e(),a([["p-bb43a97b",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],t))));
import{p as t,b as a}from"./p-fcd93349.js";export{s as setNonce}from"./p-fcd93349.js";import{g as e}from"./p-e1255160.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),t(e)})().then((async t=>(await e(),a([["p-9aba0d68",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],t))));

2

www/build/p-a3edea1a.system.js

@@ -1,1 +0,1 @@

var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function c(t){try{a(r.next(t))}catch(t){u(t)}}function o(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(c,o)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function o(t){return function(n){return a([t,n])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,o[0]&&(e=0)),e)try{if(r=1,i&&(u=o[0]&2?i["return"]:o[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,o[1])).done)return u;if(i=0,u)o=[o[0]&2,u.value];switch(o[0]){case 0:case 1:u=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!u||o[1]>u[0]&&o[1]<u[3])){e.label=o[1];break}if(o[0]===6&&e.label<u[1]){e.label=u[1];u=o;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(o);break}if(u[2])e.ops.pop();e.trys.pop();continue}o=n.call(t,e)}catch(t){o=[6,t];i=0}finally{r=u=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-82b3529b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-5ec83dbe.system",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],n)]}}))}))}))}}}));
var __awaiter=this&&this.__awaiter||function(t,n,e,r){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,u){function c(t){try{a(r.next(t))}catch(t){u(t)}}function o(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?e(t.value):i(t.value).then(c,o)}a((r=r.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function o(t){return function(n){return a([t,n])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,o[0]&&(e=0)),e)try{if(r=1,i&&(u=o[0]&2?i["return"]:o[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,o[1])).done)return u;if(i=0,u)o=[o[0]&2,u.value];switch(o[0]){case 0:case 1:u=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!u||o[1]>u[0]&&o[1]<u[3])){e.label=o[1];break}if(o[0]===6&&e.label<u[1]){e.label=u[1];u=o;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(o);break}if(u[2])e.ops.pop();e.trys.pop();continue}o=n.call(t,e)}catch(t){o=[6,t];i=0}finally{r=u=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-82b3529b.system.js","./p-56ba5cbf.system.js"],(function(t,n){"use strict";var e,r,i;return{setters:[function(n){e=n.p;r=n.b;t("setNonce",n.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=n.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return e(r)};u().then((function(n){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-cf796d29.system",[[1,"mds-text",{animation:[1],tag:[1537],text:[513],truncate:[513],typography:[513],variant:[513]},null,{text:["textHandler"]}]]]],n)]}}))}))}))}}}));
dist/mds-text/p-5ec83dbe.system.entry.js
dist/mds-text/p-bb43a97b.entry.js
www/build/p-5ec83dbe.system.entry.js
www/build/p-bb43a97b.entry.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc