@muibook/components 1.0.0

package/dist/muibook/assets/text-TVCTYde0.js

@@ -0,0 +1,130 @@
+class o extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <story-template 
+        title="Text Parts"
+        description="Allows flexible styling overrides with customisable part names, supporting trusted customisation and scoped CSS in MUI web components."
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/utils/part-map/index.ts"
+        >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Color">
+            <story-part-slat slot="body" token="part(color)" usage="Links, Buttons, Select" output="Defines the color of the element." ></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(color) {
+              <br />
+              &nbsp;&nbsp;color: var(--blue-500);
+              <br />
+              }
+              <br />
+              <br />
+              mui-link::part(color):hover {
+              <br />
+              &nbsp;&nbsp;color: var(--blue-600);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Font Family">
+            <story-part-slat slot="body" token="part(font-family)" usage="Links, Buttons, Select" output="Defines the font family of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(font-family) {
+              <br />
+              &nbsp;&nbsp;font-family: var(--font-family);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Font Size">
+            <story-part-slat slot="body" token="part(font-size)" usage="Links, Buttons, Select" output="Defines the font size of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(font-size) {
+              <br />
+              &nbsp;&nbsp;font-size: var(--size-100);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Font Weight">
+            <story-part-slat slot="body" token="part(font-weight)" usage="Links, Buttons, Select" output="Defines the font weight of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(font-weight) {
+              <br />
+              &nbsp;&nbsp;font-weight: var(--font-weight-600);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Letter Spacing">
+            <story-part-slat slot="body" token="part(letter-spacing)" usage="Links, Buttons, Select" output="Defines the letter-spacing of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(letter-spacing) {
+              <br />
+              &nbsp;&nbsp;letter-spacing: var(--space-100);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Line Height">
+            <story-part-slat slot="body" token="part(line-height)" usage="Links, Buttons, Select" output="Defines the line-height of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(line-height) {
+              <br />
+              &nbsp;&nbsp;line-height: var(--line-height-100);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Text Transform">
+            <story-part-slat slot="body" token="part(text-transform)" usage="Links, Buttons, Select" output="Defines the case of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(text-transform) {
+              <br />
+              &nbsp;&nbsp;text-transform: uppercase;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Text Decoration">
+            <story-part-slat slot="body" token="part(text-decoration)" usage="Links, Buttons, Select" output="Controls the text decoration style (e.g., underline, none)."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(text-decoration) {
+              <br />
+              &nbsp;&nbsp;text-decoration: none;
+              <br />
+              }
+              <br />
+              <br />
+              mui-link::part(text-decoration):hover {
+              <br />
+              &nbsp;&nbsp;text-decoration: none;
+              <br />
+              }
+
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Text Align">
+            <story-part-slat slot="body" token="part(text-align)" usage="Links, Buttons, Select" output="Defines the horizontal alignment of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(text-align) {
+              <br />
+              &nbsp;&nbsp;text-align: center;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("parts-text",o);

package/dist/muibook/assets/visual-B_21dq90.js

@@ -0,0 +1,96 @@
+class s extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <story-template 
+        title="Visual Parts"
+        description="Allows flexible styling overrides with customisable part names, supporting trusted customisation and scoped CSS in MUI web components."
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/utils/part-map/index.ts"
+        >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Background">
+            <story-part-slat slot="body" token="part(background)" usage="Links, Buttons, Select" output="Defines the background of the element." ></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(background) {
+              <br />
+              &nbsp;&nbsp;background: var(--white-opacity-0);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Border">
+            <story-part-slat slot="body" token="part(border)" usage="Links, Buttons, Select" output="Defines the border of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(border) {
+              <br />
+              &nbsp;&nbsp;border-color: var(--grey-800);
+              <br />
+              <br />
+              &nbsp;&nbsp;border: 4px solid var(--grey-800);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Border Radius">
+            <story-part-slat slot="body" token="part(border-radius)" usage="Links, Buttons, Select" output="Defines the border radius of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(border-radius) {
+              <br />
+              &nbsp;&nbsp;border-radius: var(--radius-150);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Box Shadow">
+            <story-part-slat slot="body" token="part(box-shadow)" usage="Links, Buttons, Select" output="Defines the box-shadow of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(box-shadow) {
+              <br />
+              &nbsp;&nbsp;box-shadow: 0 2px 0 0 var(--grey-300);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Opacity">
+            <story-part-slat slot="body" token="part(opacity)" usage="Links, Buttons, Select" output="Defines the opacity of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(opacity) {
+              <br />
+              &nbsp;&nbsp;opacity: 0;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Transition">
+            <story-part-slat slot="body" token="part(transition)" usage="Links, Buttons, Select" output="Defines the transition of the element when animation is used."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(transition) {
+              <br />
+              &nbsp;&nbsp;transition: opacity 400ms ease-in, transform 100ms ease-in;;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Outline">
+            <story-part-slat slot="body" token="part(outline)" usage="Links, Buttons, Select" output="Defines the outline of the element, typically for focus states."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(outline) {
+              <br />
+              &nbsp;&nbsp;outline: var(outline-thin);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("parts-visual",s);

package/dist/muibook/emerald.svg

@@ -0,0 +1,13 @@
+<svg width="54" height="82" viewBox="0 0 54 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 27.1157C0 42.0665 12.1059 54.2289 27.0013 54.2289C41.8915 54.2289 54 42.0717 54 27.1157C54 12.1572 41.8864 0 27.0013 0C12.1136 0 0 12.1572 0 27.1157ZM2.75602 27.1157C2.75602 13.6859 13.6307 2.76512 27.0013 2.76512C40.3693 2.76512 51.244 13.6885 51.244 27.1157C51.244 40.5404 40.3693 51.4612 27.0013 51.4612C13.6307 51.4612 2.75345 40.5404 2.75345 27.1157H2.75602Z" fill="white"/>
+<path d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="#161082"/>
+<path opacity="0.5" d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="url(#paint0_radial_199_171)"/>
+<path d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="#242484"/>
+<path d="M19.9927 27.3429C20.1061 26.6549 20.5671 26.1893 21.2548 26.1893C21.9451 26.1893 22.4036 26.7713 22.4036 27.3429H19.9927ZM24.2427 28.3828C24.356 26.4221 23.3231 24.8054 21.2548 24.8054C19.5291 24.8054 18.1537 26.0729 18.1537 27.9249C18.1537 29.883 19.4158 31.0367 21.3682 31.0367C22.6329 31.0367 23.8975 30.4572 24.2427 29.0786H22.5169C22.2903 29.5364 21.9451 29.7666 21.4867 29.7666C20.6805 29.7666 20.2194 29.1898 20.2194 28.3828H24.2427ZM48.0243 30.4598C49.5182 30.4598 50.0926 29.1924 50.0926 27.9223C50.0926 26.6523 49.5157 25.3823 48.0243 25.3823C46.6463 25.3823 46.0719 26.6497 46.0719 27.9223C46.0719 29.195 46.6463 30.4598 48.0243 30.4598ZM50.7829 30.9203H50.0926V29.7666C49.7475 30.5762 48.8305 31.0367 48.0243 31.0367C46.2986 31.0367 45.3842 29.5364 45.3842 27.9223C45.3842 26.3057 46.1878 24.8054 48.0243 24.8054C48.9439 24.8054 49.7475 25.271 50.0926 26.0729V22.731H50.7803V30.9228M24.5878 25.0382H25.3915L26.8854 30.1184L28.2634 25.0382H29.067L30.4476 30.1184L31.9415 25.0382H32.8585L31.022 30.9228H30.2158L28.7244 25.9643L27.3439 30.9228H26.5402L24.5878 25.0382ZM38.8367 27.9249C38.8367 29.6554 37.9146 31.0392 36.0755 31.0392C34.2391 31.0392 33.3195 29.6554 33.3195 27.9249C33.3195 26.1945 34.2391 24.808 36.0755 24.808C37.8013 24.9244 38.8316 26.3083 38.8316 27.9275M34.0072 27.9275C34.0072 29.195 34.6975 30.4624 36.0755 30.4624C37.4561 30.4624 38.1439 29.195 38.1439 27.9249C38.1439 26.6549 37.4561 25.3848 36.0755 25.3848C34.6975 25.5012 34.0072 26.7687 34.0072 27.9249M39.867 25.0382H40.5573V26.4247C40.7162 25.975 41.013 25.5876 41.405 25.318C41.797 25.0484 42.264 24.9106 42.7389 24.9244V25.6151C41.4768 25.5012 40.5573 26.5411 40.5573 27.6947V30.809H39.8696V25.0382M43.5451 22.8448H44.3488V30.9203H43.6585V22.8448H43.5451ZM5.85976 27.9223C5.85976 27.2317 6.09157 26.3057 7.00853 26.3057C7.92549 26.3057 8.1573 27.2291 8.1573 27.9223C8.1573 28.6156 7.92549 29.5364 7.00853 29.5364C6.09157 29.5364 5.85976 28.7294 5.85976 27.9223ZM3.90736 27.9223C3.90736 29.6528 5.17204 31.0367 7.00853 31.0367C8.84759 31.0367 10.1123 29.7692 10.1123 27.9223C10.1123 26.1893 8.84759 24.8054 7.00595 24.8054C5.16946 24.9218 3.90479 26.1893 3.90479 27.9249M11.1451 25.0357H12.9842V25.8453C13.3268 25.2659 14.133 24.9218 14.8207 24.9218C16.7731 24.9218 16.889 26.3057 16.889 27.2291V30.9203H14.9392V28.1526C14.9392 27.3429 15.0499 26.5385 14.0171 26.5385C13.3293 26.5385 12.9842 27.1153 12.9842 27.8059V31.0392H11.1426V25.0305" fill="white"/>
+<path d="M27 62.3579C34.4119 62.3579 41.1 63.4792 45.917 65.2759C48.3274 66.175 50.2437 67.2342 51.5479 68.3843C52.8525 69.5349 53.5 70.7342 53.5 71.9292C53.4999 73.1242 52.8526 74.3235 51.5479 75.4741C50.2437 76.6242 48.3274 77.6825 45.917 78.5815C41.1 80.3783 34.412 81.5005 27 81.5005C19.588 81.5005 12.9 80.3783 8.08301 78.5815C5.67262 77.6825 3.75631 76.6242 2.45215 75.4741C1.14744 74.3235 0.500076 73.1242 0.5 71.9292C0.5 70.7342 1.1475 69.5349 2.45215 68.3843C3.75631 67.2342 5.67262 66.175 8.08301 65.2759C12.9 63.4792 19.5881 62.3579 27 62.3579Z" fill="#0CA042" stroke="white"/>
+<defs>
+<radialGradient id="paint0_radial_199_171" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1206.96 917.164) scale(8300.54 8335.72)">
+<stop offset="1" stop-color="#161082" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>

package/dist/muibook/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <link rel="icon" type="image/svg+xml" href="/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="theme-color" content="var(--surface)" />
+    <title>Muibook</title>
+    <meta
+      name="description"
+      content="MUI is an experimental UI built with native Web Components using Vanilla JS, HTML, and scoped CSS"
+    />
+    <script type="module" crossorigin src="/assets/index-BrZBJGo2.js"></script>
+    <link rel="stylesheet" crossorigin href="/muibook.css">
+  </head>
+  <body>
+    <div
+      id="loader"
+      style="
+        display: flex;
+        width: 100%;
+        height: 100vh;
+        position: fixed;
+        opacity: 1;
+        z-index: 10000;
+        background: var(--surface);
+        left: 0;
+        top: 0;
+      "
+    ></div>
+    <div id="app"></div>
+  </body>
+</html>

package/dist/muibook/muibook.css

@@ -0,0 +1 @@
+:where(html){--font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-size-15: 1.1rem;--font-size-25: 1.2rem;--font-size-50: 1.4rem;--font-size-100: 1.6rem;--font-size-200: 1.8rem;--font-size-300: 2.1rem;--font-size-400: 2.4rem;--font-size-500: 3.6rem;--font-size-600: 4.8rem;--font-size-700: 6rem;--font-size-800: 7.2rem;--font-size-900: 8.4rem;--font-size-1000: 9.6rem;--line-height-15: 1.63636364;--line-height-25: 1.5;--line-height-50: 1.5;--line-height-100: 1.5;--line-height-200: 1.33333333;--line-height-300: 1.14285714;--line-height-400: 1.5;--line-height-500: 1.33333333;--line-height-600: 1.25;--line-height-700: 1.2;--line-height-800: 1.16666667;--line-height-900: 1.14285714;--line-height-1000: 1.125;--font-weight-400: 400;--font-weight-500: 500;--font-weight-600: 600;--font-weight-700: 700;--black: black;--black-opacity-0: hsla(0, 0%, 0%, 0);--black-opacity-10: hsla(0, 0%, 0%, .1);--black-opacity-20: hsla(0, 0%, 0%, .2);--black-opacity-30: hsla(0, 0%, 0%, .3);--black-opacity-40: hsla(0, 0%, 0%, .4);--black-opacity-50: hsla(0, 0%, 0%, .5);--black-opacity-60: hsla(0, 0%, 0%, .6);--black-opacity-70: hsla(0, 0%, 0%, .7);--black-opacity-80: hsla(0, 0%, 0%, .8);--black-opacity-90: hsla(0, 0%, 0%, .9);--black-opacity-100: hsla(0, 0%, 0%, 1);--white: #ffffff;--white-opacity-0: hsla(0, 0%, 100%, 0);--white-opacity-10: hsla(0, 0%, 100%, .1);--white-opacity-20: hsla(0, 0%, 100%, .2);--white-opacity-30: hsla(0, 0%, 100%, .3);--white-opacity-40: hsla(0, 0%, 100%, .4);--white-opacity-50: hsla(0, 0%, 100%, .5);--white-opacity-60: hsla(0, 0%, 100%, .6);--white-opacity-70: hsla(0, 0%, 100%, .7);--white-opacity-80: hsla(0, 0%, 100%, .8);--white-opacity-90: hsla(0, 0%, 100%, .9);--white-opacity-100: hsla(0, 0%, 100%, 1);--grey-100: #f5f5f5;--grey-200: #e5e5e5;--grey-300: #ccc;--grey-400: #aaa;--grey-500: #888;--grey-600: #666;--grey-700: #555;--grey-800: #444;--grey-900: #333;--grey-1000: #222;--grey-1100: #111;--red-100: #ffe5e5;--red-200: #fbbcbc;--red-300: #f79494;--red-400: #f36b6b;--red-500: #f74e4e;--red-600: #e04343;--red-700: #c23c3c;--red-800: #a43535;--red-900: #862e2e;--red-1000: #6a2323;--orange-100: #fff2cc;--orange-200: #ffe0a3;--orange-300: #ffcc80;--orange-400: #ffb84d;--orange-500: #ffa500;--orange-600: #e59400;--orange-700: #cc8300;--orange-800: #b37300;--orange-900: #996200;--orange-1000: #805100;--green-100: #e5f9e5;--green-200: #c6f3c6;--green-300: #a6eda6;--green-400: #86e786;--green-500: #00bd00;--green-600: #00a800;--green-700: #009400;--green-800: #007f00;--green-900: #006b00;--green-1000: #005700;--blue-100: #e6f2ff;--blue-200: #cce4ff;--blue-300: #99caff;--blue-400: #85bffb;--blue-500: #62b7fb;--blue-600: #338fe0;--blue-700: #3396eb;--blue-800: #1a86e3;--blue-900: #0076db;--blue-1000: #005fb1;--radius-000: 0;--radius-100: 4px;--radius-150: 6px;--radius-200: 8px;--radius-300: 16px;--radius-400: 24px;--space-000: 0;--space-025: .2rem;--space-050: .4rem;--space-100: .6rem;--space-200: .8rem;--space-300: 1.2rem;--space-400: 1.6rem;--space-500: 2.4rem;--space-600: 3.6rem;--space-700: 4.8rem;--space-800: 6rem;--stroke-size-100: 1px;--stroke-size-200: 2px;--stroke-size-300: 3px;--stroke-size-400: 4px;--stroke-size-500: 5px;--stroke-solid: solid;--stroke-outset: outset;--speed-100: .1s;--speed-200: .2s;--speed-300: .3s;--speed-400: .4s}html[data-theme=light]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-700);--form-warning-text-color: var(--orange-700);--form-error-text-color: var(--red-700);--form-default-text-color-hover: var(--grey-600);--form-success-text-color-hover: var(--green-800);--form-warning-text-color-hover: var(--orange-800);--form-error-text-color-hover: var(--red-800);--form-default-border-color: var(--grey-300);--form-success-border-color: var(--green-600);--form-warning-border-color: var(--orange-600);--form-error-border-color: var(--red-600);--form-default-border-color-hover: var(--grey-400);--form-success-border-color-hover: var(--green-700);--form-warning-border-color-hover: var(--orange-700);--form-error-border-color-hover: var(--red-700);--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--green-600);--feedback-info-border-color: var(--blue-600);--feedback-warning-border-color: var(--orange-600);--feedback-attention-border-color: var(--red-600);--feedback-neutral-background: var(--white);--feedback-positive-background: var(--green-100);--feedback-info-background: var(--blue-100);--feedback-warning-background: var(--orange-100);--feedback-attention-background: var(--red-100);--feedback-neutral-icon: var(--grey-600);--feedback-positive-icon: var(--green-600);--feedback-info-icon: var(--blue-600);--feedback-warning-icon: var(--orange-600);--feedback-attention-icon: var(--red-600);--feedback-neutral-text: var(--grey-900);--feedback-positive-text: var(--green-900);--feedback-info-text: var(--blue-900);--feedback-warning-text: var(--orange-900);--feedback-attention-text: var(--red-900);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-900);--action-primary-background-hover: var(--grey-1000);--action-primary-background-focus: var(--grey-1000);--action-primary-background-disabled: var(--grey-200);--action-primary-text-color: var(--white);--action-primary-text-color-hover: var(--white);--action-primary-text-color-focus: var(--white);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--grey-100);--action-secondary-background-focus: var(--grey-100);--action-secondary-background-disabled: var(--grey-100);--action-secondary-text-color: var(--grey-900);--action-secondary-text-color-hover: var(--grey-1000);--action-secondary-text-color-focus: var(--grey-1000);--action-secondary-text-color-disabled: var(--grey-400);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--black-opacity-10);--action-tertiary-background-focus: var(--black-opacity-10);--action-tertiary-background-disabled: var(--grey-100);--action-tertiary-text-color: var(--grey-900);--action-tertiary-text-color-hover: var(--grey-1000);--action-tertiary-text-color-focus: var(--grey-1000);--action-tertiary-text-color-disabled: var(--grey-400);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-500);--action-attention-background-hover: var(--red-600);--action-attention-background-focus: var(--red-600);--action-attention-background-disabled: var(--red-100);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--grey-300);--surface-recessed-200: var(--grey-400);--outline-color: var(--blue-500);--border-color: var(--black-opacity-20);--optional-text-color: var(--grey-600);--text-color: var(--grey-900);--text-color-success: var(--green-600);--text-color-warning: var(--orange-600);--text-color-error: var(--red-600);--switch-track-background: var(--grey-300);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--white);--switch-icon: var(--icon-color-default);--icon-color-default: var(--black);--icon-color-inverted: var(--white);--badge-text-color: var(--grey-100);--badge-background-neutral: var(--grey-600);--badge-background-positive: var(--green-600);--badge-background-warning: var(--orange-600);--badge-background-attention: var(--red-600);--heading-text-color: var(--grey-1000);--link-text-color-default: var(--grey-900);--link-text-color-default-hover: var(--grey-1000);--link-text-color-default-focus: var(--grey-1000);--link-text-color-default-disabled: var(--grey-800);--input-background: var(--white);--input-background-disabled: var(--grey-100);--addon-background: var(--grey-100);--tab-border-color: var(--grey-300);--tab-background: var(--grey-200);--tab-icon: var(--grey-900);--tab-text-color: var(--grey-900);--tab-background-active: var(--white);--tab-icon-active: var(--black);--tab-text-color-active: var(--black);--tab-shadow-active: var(--black-opacity-10);--carousel-background: var(--white)}html[data-theme=dark]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-400);--form-warning-text-color: var(--orange-400);--form-error-text-color: var(--red-400);--form-default-text-color-hover: var(--grey-400);--form-success-text-color-hover: var(--green-300);--form-warning-text-color-hover: var(--orange-300);--form-error-text-color-hover: var(--red-300);--form-default-border-color: var(--grey-600);--form-success-border-color: var(--green-400);--form-warning-border-color: var(--orange-400);--form-error-border-color: var(--red-400);--form-default-border-color-hover: var(--grey-500);--form-success-border-color-hover: var(--green-300);--form-warning-border-color-hover: var(--orange-300);--form-error-border-color-hover: var(--red-300);--feedback-neutral-border-color: var(--white-opacity-20);--feedback-positive-border-color: var(--green-400);--feedback-info-border-color: var(--blue-400);--feedback-warning-border-color: var(--orange-400);--feedback-attention-border-color: var(--red-400);--feedback-neutral-background: var(--grey-800);--feedback-positive-background: var(--green-800);--feedback-info-background: var(--blue-800);--feedback-warning-background: var(--orange-800);--feedback-attention-background: var(--red-800);--feedback-neutral-icon: var(--grey-300);--feedback-positive-icon: var(--green-300);--feedback-info-icon: var(--blue-300);--feedback-warning-icon: var(--orange-300);--feedback-attention-icon: var(--red-300);--feedback-neutral-text: var(--grey-100);--feedback-positive-text: var(--green-100);--feedback-info-text: var(--blue-100);--feedback-warning-text: var(--orange-100);--feedback-attention-text: var(--red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-200);--action-primary-background-hover: var(--grey-100);--action-primary-background-focus: var(--grey-100);--action-primary-background-disabled: var(--grey-800);--action-primary-text-color: var(--grey-900);--action-primary-text-color-hover: var(--grey-900);--action-primary-text-color-focus: var(--grey-900);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-background: var(--black-opacity-0);--action-secondary-background-hover: var(--grey-800);--action-secondary-background-focus: var(--grey-800);--action-secondary-background-disabled: var(--grey-900);--action-secondary-text-color: var(--grey-100);--action-secondary-text-color-hover: var(--grey-100);--action-secondary-text-color-focus: var(--grey-100);--action-secondary-text-color-disabled: var(--grey-600);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-background: transparent;--action-tertiary-background-hover: var(--white-opacity-10);--action-tertiary-background-focus: var(--white-opacity-10);--action-tertiary-background-disabled: var(--grey-900);--action-tertiary-text-color: var(--grey-100);--action-tertiary-text-color-hover: var(--grey-100);--action-tertiary-text-color-focus: var(--grey-100);--action-tertiary-text-color-disabled: var(--grey-600);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-600);--action-attention-background-hover: var(--red-700);--action-attention-background-focus: var(--red-700);--action-attention-background-disabled: var(--red-900);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-1000);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--grey-800);--surface-elevated-200: var(--grey-900);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--grey-1000);--surface-recessed-200: var(--grey-1100);--outline-color: var(--blue-300);--border-color: var(--white-opacity-20);--optional-text-color: var(--grey-300);--text-color: var(--grey-200);--text-color-success: var(--green-400);--text-color-warning: var(--orange-400);--text-color-error: var(--red-400);--switch-track-background: var(--grey-600);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--black);--switch-icon: var(--icon-color-default);--icon-color-default: var(--white);--icon-color-inverted: var(--black);--badge-text-color: var(--grey-900);--badge-background-neutral: var(--grey-400);--badge-background-positive: var(--green-400);--badge-background-warning: var(--orange-400);--badge-background-attention: var(--red-400);--heading-text-color: var(--grey-100);--link-text-color-default: var(--grey-200);--link-text-color-default-hover: var(--grey-100);--link-text-color-default-focus: var(--grey-100);--link-text-color-default-disabled: var(--grey-600);--input-background: var(--grey-900);--input-background-disabled: var(--grey-800);--addon-background: var(--grey-1000);--tab-border-color: var(--grey-800);--tab-background: var(--grey-1100);--tab-icon: var(--grey-400);--tab-text-color: var(--grey-400);--tab-background-active: var(--grey-700);--tab-icon-active: var(--white);--tab-text-color-active: var(--white);--tab-shadow-active: var(--black-opacity-40);--carousel-background: var(--grey-700)}:where(html){--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-medium);--text-line-height-xs: var(--line-height-25);--text-line-height-s: var(--line-height-50);--text-line-height-m: var(--line-height-100);--text-line-height-l: var(--line-height-200);--text-font-size-xs: var(--font-size-25);--text-font-size-s: var(--font-size-50);--text-font-size-m: var(--font-size-100);--text-font-size-l: var(--font-size-200);--text-font-size: var(--text-font-size-m);--text-line-height: var(--text-line-height-m);--font-weight-regular: var(--font-weight-400);--font-weight-medium: var(--font-weight-500);--font-weight-semi-bold: var(--font-weight-600);--font-weight-bold: var(--font-weight-700);--border-thin: var(--stroke-size-100) var(--stroke-solid) var(--border-color);--border-thick: var(--stroke-size-200) var(--stroke-solid) var(--border-color);--outline-thin: var(--stroke-size-100) var(--stroke-outset) var(--outline-color);--outline-medium: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);--outline-thick: var(--stroke-size-500) var(--stroke-outset) var(--outline-color);--switch-offset: 1px;--switch-thumb-size: 3.6rem;--switch-width: calc(var(--switch-height) * 1.6);--switch-height: calc(var(--switch-thumb-size) + (var(--switch-offset) * 2));--card-radius: var(--radius-150);--badge-radius: var(--radius-300);--badge-font-weight: var(--font-weight-bold);--heading-font-weight: var(--font-weight-bold);--heading-font-size-100: var(--font-size-600);--heading-font-size-200: var(--font-size-500);--heading-font-size-300: var(--font-size-400);--heading-font-size-400: var(--font-size-300);--heading-font-size-500: var(--font-size-200);--heading-font-size-600: var(--font-size-100);--heading-line-height-100: var(--line-height-600);--heading-line-height-200: var(--line-height-500);--heading-line-height-300: var(--line-height-400);--heading-line-height-400: var(--line-height-300);--heading-line-height-500: var(--line-height-200);--heading-line-height-600: var(--line-height-100);--alert-radius: var(--radius-100);--alert-padding: var(--space-400);--alert-gap-horizontal-mobile: var(--space-300);--alert-gap-horizontal-desktop: var(--space-100);--message-radius: var(--radius-150);--message-padding: var(--space-400);--message-gap-horizontal: var(--space-300);--message-gap-vertical: var(--space-100);--tab-radius: var(--radius-200);--carousel-radius: var(--radius-300);--carousel-tab-position: var(--space-400);--carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position))}:where(html){--root-font-size: 62.5%;font-size:var(--root-font-size);font-family:var(--font-family);background:var(--white);color:var(--text-color);line-height:var(--text-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html{scroll-behavior:smooth}body{margin:var(--space-000);font-size:var(--text-font-size);min-height:100vh}button,input,optgroup,select,textarea{font-family:var(--font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);margin:var(--space-000)}:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--outline-thick)}progress{vertical-align:baseline}summary{display:list-item}template,[hidden]{display:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}article,aside,main,section,nav,header,footer{width:100%}audio,canvas,mark,video{display:inline-block}img,legend{border:0}body,figure,form{margin:var(--space-000)}audio,canvas,img,video{vertical-align:middle}dfn{font-style:italic}q{quotes:none}q:after,q:before{content:"";content:none}abbr[title]{border-bottom:none;text-decoration:underline dotted}dd{margin:0}*,:before,:after{box-sizing:border-box}::-moz-selection,::selection{background:var(--grey-900);color:var(--white);text-shadow:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}:focus:not(:focus-visible){outline:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;-moz-appearance:button;appearance:button;font:inherit}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}input::-moz-focus-inner{border:0;padding:0}button,input,optgroup,select,textarea{vertical-align:baseline}[type=checkbox],[type=radio],legend{padding:0}button,input{overflow:visible}button,select{text-transform:none}button[disabled],html input[disabled]{cursor:default}em{font-style:italic}b,strong{font-weight:700}input,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}input[type=checkbox]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}input[type=button],input[type=submit],input[type=reset],button{display:inline-block;cursor:pointer;width:auto}table{width:100%;border-collapse:collapse;border-spacing:0}label{display:block}textarea{resize:vertical;overflow:auto;vertical-align:top}legend{font-weight:700}input[type=checkbox],input[type=radio]{width:auto}sub,sup,small{font-size:var(--text-font-size-xs);line-height:var(--text-line-height-xs)}sub{bottom:-.25em}sup{top:-.5em}dt{font-weight:700}label{margin-bottom:var(--space-100)}input,textarea{border-radius:var(--radius-000)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],input[type=button],input[type=submit],input[type=reset],button,textarea,fieldset{border:none}input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=range]{height:4.2rem;padding:var(--space-000) var(--space-400)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],textarea,fieldset{box-shadow:inset 0 0 0 2px #e0e0e0}textarea{padding:var(--space-400);height:6.375em}legend{padding:var(--space-000) var(--space-200);margin-left:-.8rem}fieldset{border-radius:.3125em;padding:var(--space-300) var(--space-500);padding-bottom:var(--space-000)}fieldset ul{list-style:none;margin-bottom:var(--space-000)}fieldset ul label{margin-bottom:var(--space-000)}fieldset li{margin-bottom:var(--space-400)}select{height:1.875em}input[type=checkbox],input[type=radio]{margin:0 var(--space-200) 0 0}input[type=file]{font-size:var(--text-font-size-xs);padding:var(--space-400);margin-bottom:var(--space-500)}button:focus,input[type=submit]:focus{box-shadow:inset 0 0 0 1px #fff}:where(html){--mui-brand-100: #fffde7;--mui-brand-200: #fff59d;--mui-brand-300: #ffeb3b;--mui-brand-400: #ffd600;--mui-brand-500: #ffbb00;--mui-brand-600: #ffa500;--mui-brand-700: #ff9800;background:var(--app-container-surface)}::view-transition-old(body),::view-transition-new(body){animation-duration:1s;animation-timing-function:ease-in-out}#app{display:grid;grid-template-rows:1fr 7.6rem;min-height:100vh}@media (min-width: 960px){#app{grid-template-rows:1fr;grid-template-columns:26rem 1fr}}html[data-brand=jal]{--font-family: "Noto Sans JP", "メイリオ", sans-serif;--jal-grey-50: #fafafa;--jal-grey-100: #f4f4f4;--jal-grey-200: #e0e0e0;--jal-grey-300: #c2c2c2;--jal-grey-400: #a3a3a3;--jal-grey-500: #8a8a8a;--jal-grey-600: #707070;--jal-grey-700: #494949;--jal-grey-800: #3a3a3a;--jal-grey-900: #1a1a1a;--jal-grey-1000: #0b0b0b;--jal-red-50: #fcebec;--jal-red-100: #f3d6db;--jal-red-200: #ffb2b9;--jal-red-300: #d34856;--jal-red-400: #c32c3b;--jal-red-500: #b11b24;--jal-red-600: #9e1b32;--jal-red-700: #801528;--jal-red-800: #6a0c21;--jal-red-900: #4a0b11;--jal-blue-50: #e5f3fc;--jal-blue-100: #cfe9f9;--jal-blue-200: #a2d4f2;--jal-blue-300: #74b8ec;--jal-blue-400: #4184e2;--jal-blue-500: #2567b7;--jal-blue-600: #1e549c;--jal-blue-700: #163f7d;--jal-blue-800: #0e2a5f;--jal-blue-900: #001a44;--jal-green-50: #e8f5e9;--jal-green-100: #c8e6c9;--jal-green-200: #a5d6a7;--jal-green-300: #81c784;--jal-green-400: #66bb6a;--jal-green-500: #4caf50;--jal-green-600: #43a047;--jal-green-700: #388e3c;--jal-green-800: #2c6e2f;--jal-green-900: #1b4c1d;--jal-yellow-50: #fff9e5;--jal-yellow-100: #fff2cc;--jal-yellow-200: #ffeb99;--jal-yellow-300: #ffe066;--jal-yellow-400: #ffd32b;--jal-yellow-500: #ffc107;--jal-yellow-600: #ffb300;--jal-yellow-700: #ffa000;--jal-yellow-800: #ff8f00;--jal-yellow-900: #ff6f00;--brand-gold-50: #fdf9ec;--brand-gold-100: #f9f0d0;--brand-gold-200: #f0dd9f;--brand-gold-300: #e6c96d;--brand-gold-400: #dcb23e;--brand-gold-500: #c39a1e;--brand-gold-600: #a8821a;--brand-gold-700: #8d6b16;--brand-gold-800: #735614;--brand-gold-900: #5a4210;--jal-white: #ffffff;--jal-black: #000000}html[data-brand=jal][data-theme=light]{--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--jal-green-100);--feedback-info-border-color: var(--jal-blue-100);--feedback-warning-border-color: var(--jal-yellow-100);--feedback-attention-border-color: var(--jal-red-100);--feedback-neutral-background: var(--jal-white);--feedback-positive-background: var(--jal-green-50);--feedback-info-background: var(--jal-blue-50);--feedback-warning-background: var(--jal-yellow-50);--feedback-attention-background: var(--jal-red-50);--feedback-neutral-icon: var(--jal-grey-500);--feedback-positive-icon: var(--jal-green-500);--feedback-info-icon: var(--jal-blue-500);--feedback-warning-icon: var(--jal-yellow-500);--feedback-attention-icon: var(--jal-red-500);--feedback-neutral-text: var(--jal-grey-700);--feedback-positive-text: var(--jal-green-700);--feedback-info-text: var(--jal-blue-700);--feedback-warning-text: var(--jal-yellow-700);--feedback-attention-text: var(--jal-red-700);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--jal-red-500);--action-primary-background-hover: var(--jal-red-400);--action-primary-background-focus: var(--jal-red-400);--action-primary-background-disabled: var(--jal-red-400);--action-primary-text-color: var(--jal-white);--action-primary-text-color-hover: var(--jal-white);--action-primary-text-color-focus: var(--jal-white);--action-primary-text-color-disabled: var(--jal-white);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-300);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-300);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-300);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-300);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--white-opacity-40);--action-secondary-background-focus: var(--white-opacity-40);--action-secondary-background-disabled: var(--white-opacity-40);--action-secondary-text-color: var(--jal-red-300);--action-secondary-text-color-hover: var(--jal-red-300);--action-secondary-text-color-focus: var(--jal-red-300);--action-secondary-text-color-disabled: var(--jal-red-300);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--white-opacity-40);--action-tertiary-background-focus: var(--white-opacity-40);--action-tertiary-background-disabled: var(--white-opacity-40);--action-tertiary-text-color: var(--jal-red-300);--action-tertiary-text-color-hover: var(--jal-red-300);--action-tertiary-text-color-focus: var(--jal-red-300);--action-tertiary-text-color-disabled: var(--jal-red-300);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-500);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-700);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-700);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-700);--action-attention-background: var(--jal-red-300);--action-attention-background-hover: var(--jal-red-500);--action-attention-background-focus: var(--jal-red-500);--action-attention-background-disabled: var(--jal-red-500);--action-attention-text-color: var(--jal-white);--action-attention-text-color-hover: var(--jal-white);--action-attention-text-color-focus: var(--jal-white);--action-attention-text-color-disabled: var(--jal-white);--badge-text-color: var(--jal-white);--badge-background-neutral: var(--jal-grey-500);--badge-background-positive: var(--jal-green-700);--badge-background-warning: var(--jal-yellow-900);--badge-background-attention: var(--jal-red-500);--outline-color: var(--jal-red-300);--icon-color-default: var(--jal-red-300);--icon-color-inverted: var(--jal-white);--text-color: var(--jal-grey-900);--heading-text-color: var(--jal-red-500);--input-background: var(--jal-white);--border-color: var(--black-opacity-20);--surface: var(--jal-grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--jal-grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--jal-grey-300);--surface-recessed-200: var(--jal-grey-400);--switch-track-background: var(--jal-grey-300);--switch-track-background-checked: var(--jal-red-400);--tab-border-color: var(--jal-red-800);--tab-background: var(--jal-red-500);--tab-icon: var(--jal-white);--tab-text-color: var(--jal-white);--tab-background-active: var(--jal-white);--tab-icon-active: var(--jal-red-500);--tab-text-color-active: var(--jal-red-500);--tab-shadow-active: var(--jal-red-600);--carousel-background: var(--jal-grey-100)}html[data-brand=jal][data-theme=dark]{--feedback-neutral-border-color: var(--white-opacity-30);--feedback-positive-border-color: var(--jal-green-800);--feedback-info-border-color: var(--jal-blue-800);--feedback-warning-border-color: var(--jal-yellow-800);--feedback-attention-border-color: var(--jal-red-800);--feedback-neutral-background: var(--jal-grey-700);--feedback-positive-background: var(--jal-green-900);--feedback-info-background: var(--jal-blue-900);--feedback-warning-background: var(--jal-yellow-900);--feedback-attention-background: var(--jal-red-900);--feedback-neutral-icon: var(--jal-grey-300);--feedback-positive-icon: var(--jal-green-300);--feedback-info-icon: var(--jal-blue-300);--feedback-warning-icon: var(--jal-yellow-300);--feedback-attention-icon: var(--jal-red-300);--feedback-neutral-text: var(--jal-grey-100);--feedback-positive-text: var(--jal-green-100);--feedback-info-text: var(--jal-blue-100);--feedback-warning-text: var(--jal-yellow-100);--feedback-attention-text: var(--jal-red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--jal-red-300);--action-primary-background-hover: var(--jal-red-400);--action-primary-background-focus: var(--jal-red-400);--action-primary-background-disabled: var(--jal-red-400);--action-primary-text-color: var(--jal-white);--action-primary-text-color-hover: var(--jal-white);--action-primary-text-color-focus: var(--jal-white);--action-primary-text-color-disabled: var(--jal-white);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-200);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-200);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-200);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--black-opacity-20);--action-secondary-background-focus: var(--black-opacity-20);--action-secondary-background-disabled: var(--black-opacity-20);--action-secondary-text-color: var(--jal-red-200);--action-secondary-text-color-hover: var(--jal-red-200);--action-secondary-text-color-focus: var(--jal-red-200);--action-secondary-text-color-disabled: var(--jal-red-200);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--black-opacity-20);--action-tertiary-background-focus: var(--black-opacity-20);--action-tertiary-background-disabled: var(--black-opacity-20);--action-tertiary-text-color: var(--jal-red-200);--action-tertiary-text-color-hover: var(--jal-red-200);--action-tertiary-text-color-focus: var(--jal-red-200);--action-tertiary-text-color-disabled: var(--jal-red-200);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-500);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-500);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-500);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--jal-red-500);--action-attention-background: var(--jal-red-500);--action-attention-background-hover: var(--jal-red-700);--action-attention-background-focus: var(--jal-red-700);--action-attention-background-disabled: var(--jal-red-100);--action-attention-text-color: var(--jal-white);--action-attention-text-color-hover: var(--jal-white);--action-attention-text-color-focus: var(--jal-white);--action-attention-text-color-disabled: var(--jal-white);--badge-text-color: var(--jal-white);--badge-background-neutral: var(--jal-grey-600);--badge-background-positive: var(--jal-green-600);--badge-background-warning: var(--jal-yellow-800);--badge-background-attention: var(--jal-red-400);--outline-color: var(--jal-red-200);--icon-color-default: var(--jal-red-200);--icon-color-inverted: var(--jal-black);--text-color: var(--jal-grey-200);--heading-text-color: var(--jal-red-200);--input-background: var(--jal-grey-800);--border-color: var(--white-opacity-30);--surface: var(--jal-grey-900);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--jal-grey-700);--surface-elevated-200: var(--jal-grey-800);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--jal-grey-900);--surface-recessed-200: var(--jal-grey-1000);--switch-track-background: var(--jal-grey-500);--switch-track-background-checked: var(--jal-red-300);--tab-border-color: var(--jal-red-800);--tab-background: var(--jal-red-900);--tab-icon: var(--jal-white);--tab-text-color: var(--jal-white);--tab-background-active: var(--jal-red-500);--tab-icon-active: var(--jal-white);--tab-text-color-active: var(--jal-white);--tab-shadow-active: var(--black-opacity-20);--carousel-background: var(--jal-grey-900)}html[data-brand=jal]{--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-bold);--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--card-radius: var(--radius-400)}html[data-brand=ana]{--font-family: "Myriad Pro", "Segoe UI", Helvetica, Arial, Verdana, Roboto, "Droid Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "Noto Sans CJK JP", Meiryo, Osaka, "MS PGothic", "sans-serif";--ana-grey-50: #f9f9f9;--ana-grey-100: #f0f0f0;--ana-grey-200: #dedede;--ana-grey-300: #bdbdbd;--ana-grey-400: #9e9e9e;--ana-grey-500: #7e7e7e;--ana-grey-600: #5e5e5e;--ana-grey-700: #3e3e3e;--ana-grey-800: #2b2b2b;--ana-grey-900: #141414;--ana-blue-50: #e8f0fb;--ana-blue-100: #c6dbf6;--ana-blue-200: #91bdf0;--ana-blue-300: #569ce8;--ana-blue-400: #1d81e5;--ana-blue-500: #005bac;--ana-blue-600: #004299;--ana-blue-700: #002f84;--ana-blue-750: #001f75;--ana-blue-800: #00146e;--ana-blue-900: #000d4a;--ana-green-50: #e8f5e9;--ana-green-100: #c8e6c9;--ana-green-300: #81c784;--ana-green-500: #4caf50;--ana-green-600: #388e3c;--ana-green-700: #2e7d32;--ana-orange-50: #fff8e1;--ana-orange-100: #fff3e0;--ana-orange-300: #ffcc80;--ana-orange-500: #ff6f00;--ana-orange-600: #ffa000;--ana-orange-700: #e65100;--ana-red-50: #fcebea;--ana-red-100: #fce4ec;--ana-red-300: #f06292;--ana-red-400: #d81b60;--ana-red-500: #880e4f;--ana-red-600: #ad1457;--ana-red-700: #6a1b4d;--ana-white: #ffffff;--ana-black: #000000}html[data-brand=ana][data-theme=light]{--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--ana-green-300);--feedback-info-border-color: var(--ana-blue-200);--feedback-warning-border-color: var(--ana-orange-300);--feedback-attention-border-color: var(--ana-red-300);--feedback-neutral-background: var(--ana-white);--feedback-positive-background: var(--ana-green-50);--feedback-info-background: var(--ana-blue-50);--feedback-warning-background: var(--ana-orange-50);--feedback-attention-background: var(--ana-red-50);--feedback-neutral-icon: var(--ana-grey-500);--feedback-positive-icon: var(--ana-green-500);--feedback-info-icon: var(--ana-blue-500);--feedback-warning-icon: var(--ana-orange-700);--feedback-attention-icon: var(--ana-red-600);--feedback-neutral-text: var(--ana-grey-700);--feedback-positive-text: var(--ana-green-700);--feedback-info-text: var(--ana-blue-700);--feedback-warning-text: var(--ana-orange-700);--feedback-attention-text: var(--ana-red-600);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-400);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-500);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-500);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-500);--action-primary-background: var(--ana-blue-400);--action-primary-background-hover: var(--ana-blue-400);--action-primary-background-focus: var(--ana-blue-400);--action-primary-background-disabled: var(--ana-grey-400);--action-primary-text-color: var(--ana-white);--action-primary-text-color-hover: var(--ana-white);--action-primary-text-color-focus: var(--ana-white);--action-primary-text-color-disabled: var(--ana-white);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-400);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-500);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-500);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-200);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--ana-white);--action-secondary-background-focus: var(--ana-white);--action-secondary-background-disabled: var(--ana-white);--action-secondary-text-color: var(--ana-blue-400);--action-secondary-text-color-hover: var(--ana-blue-500);--action-secondary-text-color-focus: var(--ana-blue-500);--action-secondary-text-color-disabled: var(--ana-blue-200);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--ana-white);--action-tertiary-background-focus: var(--ana-white);--action-tertiary-background-disabled: var(--ana-white);--action-tertiary-text-color: var(--ana-blue-400);--action-tertiary-text-color-hover: var(--ana-blue-400);--action-tertiary-text-color-focus: var(--ana-blue-400);--action-tertiary-text-color-disabled: var(--ana-blue-400);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-400);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-500);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-500);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-500);--action-attention-background: var(--ana-red-400);--action-attention-background-hover: var(--ana-red-400);--action-attention-background-focus: var(--ana-red-400);--action-attention-background-disabled: var(--ana-red-400);--action-attention-text-color: var(--ana-white);--action-attention-text-color-hover: var(--ana-white);--action-attention-text-color-focus: var(--ana-white);--action-attention-text-color-disabled: var(--ana-white);--badge-text-color: var(--ana-white);--badge-background-neutral: var(--ana-grey-500);--badge-background-positive: var(--ana-green-500);--badge-background-warning: var(--ana-orange-500);--badge-background-attention: var(--ana-red-500);--outline-color: var(--ana-blue-300);--icon-color-default: var(--ana-blue-400);--icon-color-inverted: var(--ana-white);--text-color: var(--ana-grey-900);--heading-text-color: var(--ana-blue-400);--input-background: var(--ana-white);--border-color: var(--black-opacity-20);--surface: var(--ana-grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--ana-grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--ana-grey-300);--surface-recessed-200: var(--ana-grey-400);--switch-track-background: var(--ana-grey-300);--switch-track-background-checked: var(--ana-blue-400);--tab-border-color: var(--ana-blue-300);--tab-background: var(--ana-blue-50);--tab-icon: var(--ana-blue-500);--tab-text-color: var(--ana-blue-500);--tab-background-active: var(--ana-blue-500);--tab-icon-active: var(--ana-blue-50);--tab-text-color-active: var(--ana-blue-50);--tab-shadow-active: var(--black-opacity-10);--carousel-background: var(--ana-grey-100)}html[data-brand=ana][data-theme=dark]{--feedback-neutral-border-color: var(--white-opacity-20);--feedback-positive-border-color: var(--ana-green-300);--feedback-info-border-color: var(--ana-blue-400);--feedback-warning-border-color: var(--ana-orange-300);--feedback-attention-border-color: var(--ana-red-300);--feedback-neutral-background: var(--ana-grey-700);--feedback-positive-background: var(--ana-green-700);--feedback-info-background: var(--ana-blue-700);--feedback-warning-background: var(--ana-orange-700);--feedback-attention-background: var(--ana-red-600);--feedback-neutral-icon: var(--ana-grey-100);--feedback-positive-icon: var(--ana-green-100);--feedback-info-icon: var(--ana-blue-100);--feedback-warning-icon: var(--ana-orange-100);--feedback-attention-icon: var(--ana-red-100);--feedback-neutral-text: var(--ana-grey-100);--feedback-positive-text: var(--ana-green-100);--feedback-info-text: var(--ana-blue-100);--feedback-warning-text: var(--ana-orange-100);--feedback-attention-text: var(--ana-red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-400);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-300);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-300);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-300);--action-primary-background: var(--ana-blue-400);--action-primary-background-hover: var(--ana-blue-400);--action-primary-background-focus: var(--ana-blue-400);--action-primary-background-disabled: var(--ana-grey-400);--action-primary-text-color: var(--ana-white);--action-primary-text-color-hover: var(--ana-white);--action-primary-text-color-focus: var(--ana-white);--action-primary-text-color-disabled: var(--ana-white);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-100);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-100);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--ana-blue-100);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--ana-grey-800);--action-secondary-background-focus: var(--ana-grey-800);--action-secondary-background-disabled: var(--ana-grey-600);--action-secondary-text-color: var(--ana-blue-200);--action-secondary-text-color-hover: var(--ana-blue-100);--action-secondary-text-color-focus: var(--ana-blue-100);--action-secondary-text-color-disabled: var(--ana-blue-100);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--ana-grey-800);--action-tertiary-background-focus: var(--ana-grey-800);--action-tertiary-background-disabled: var(--ana-grey-600);--action-tertiary-text-color: var(--ana-blue-200);--action-tertiary-text-color-hover: var(--ana-blue-100);--action-tertiary-text-color-focus: var(--ana-blue-100);--action-tertiary-text-color-disabled: var(--ana-blue-100);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-400);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-300);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-300);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--ana-red-300);--action-attention-background: var(--ana-red-400);--action-attention-background-hover: var(--ana-red-400);--action-attention-background-focus: var(--ana-red-400);--action-attention-background-disabled: var(--ana-red-400);--action-attention-text-color: var(--ana-white);--action-attention-text-color-hover: var(--ana-white);--action-attention-text-color-focus: var(--ana-white);--action-attention-text-color-disabled: var(--ana-white);--badge-text-color: var(--ana-white);--badge-background-neutral: var(--ana-grey-600);--badge-background-positive: var(--ana-green-700);--badge-background-warning: var(--ana-orange-700);--badge-background-attention: var(--ana-red-500);--outline-color: var(--ana-blue-200);--icon-color-default: var(--ana-blue-200);--icon-color-inverted: var(--ana-white);--text-color: var(--ana-grey-100);--heading-text-color: var(--ana-blue-200);--input-background: var(--ana-grey-800);--border-color: var(--white-opacity-20);--surface: var(--ana-grey-800);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--ana-grey-700);--surface-elevated-200: var(--ana-grey-800);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--ana-grey-900);--surface-recessed-200: var(--ana-grey-1000);--switch-track-background: var(--ana-grey-700);--switch-track-background-checked: var(--ana-blue-400);--tab-border-color: var(--ana-blue-500);--tab-background: var(--ana-blue-800);--tab-icon: var(--ana-blue-100);--tab-text-color: var(--ana-blue-100);--tab-background-active: var(--ana-blue-100);--tab-icon-active: var(--ana-blue-800);--tab-text-color-active: var(--ana-blue-800);--tab-shadow-active: var(--black-opacity-10);--carousel-background: var(--ana-grey-800)}html[data-brand=ana]{--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-400);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-bold);--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--card-radius: var(--radius-150);--tab-radius: var(--radius-400)}html[data-brand=mono]{--font-family: "Courier New";--mono-white: #ffffff;--mono-black: #000000;--mono-grey-100: #f5f5f5;--mono-grey-200: #e0e0e0;--mono-grey-300: #c2c2c2;--mono-grey-400: #a3a3a3;--mono-grey-500: #8a8a8a;--mono-grey-600: #707070;--mono-grey-700: #494949;--mono-grey-800: #2c2c2c;--mono-grey-900: #1a1a1a;--mono-grey-1000: #111111}html[data-brand=mono][data-theme=light]{--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--mono-grey-300);--feedback-info-border-color: var(--mono-grey-300);--feedback-warning-border-color: var(--mono-grey-300);--feedback-attention-border-color: var(--mono-grey-300);--feedback-neutral-background: var(--mono-white);--feedback-positive-background: var(--mono-grey-100);--feedback-info-background: var(--mono-grey-100);--feedback-warning-background: var(--mono-grey-100);--feedback-attention-background: var(--mono-grey-100);--feedback-neutral-icon: var(--mono-black);--feedback-positive-icon: var(--mono-black);--feedback-info-icon: var(--mono-black);--feedback-warning-icon: var(--mono-black);--feedback-attention-icon: var(--mono-black);--feedback-neutral-text: var(--mono-black);--feedback-positive-text: var(--mono-black);--feedback-info-text: var(--mono-black);--feedback-warning-text: var(--mono-black);--feedback-attention-text: var(--mono-black);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-700);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);--action-primary-background: var(--mono-grey-700);--action-primary-background-hover: var(--mono-grey-900);--action-primary-background-focus: var(--mono-grey-900);--action-primary-background-disabled: var(--mono-grey-900);--action-primary-text-color: var(--mono-white);--action-primary-text-color-hover: var(--mono-white);--action-primary-text-color-focus: var(--mono-white);--action-primary-text-color-disabled: var(--mono-white);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-600);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--white-opacity-0);--action-secondary-background-focus: var(--white-opacity-0);--action-secondary-background-disabled: var(--white-opacity-0);--action-secondary-text-color: var(--mono-grey-600);--action-secondary-text-color-hover: var(--mono-grey-900);--action-secondary-text-color-focus: var(--mono-grey-900);--action-secondary-text-color-disabled: var(--mono-grey-900);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--mono-grey-100);--action-tertiary-background-focus: var(--mono-grey-100);--action-tertiary-background-disabled: var(--mono-grey-100);--action-tertiary-text-color: var(--mono-grey-600);--action-tertiary-text-color-hover: var(--mono-grey-900);--action-tertiary-text-color-focus: var(--mono-grey-900);--action-tertiary-text-color-disabled: var(--mono-grey-900);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);--action-attention-background: var(--mono-black);--action-attention-background-hover: var(--mono-grey-900);--action-attention-background-focus: var(--mono-grey-900);--action-attention-background-disabled: var(--mono-grey-700);--action-attention-text-color: var(--mono-white);--action-attention-text-color-hover: var(--mono-white);--action-attention-text-color-focus: var(--mono-white);--action-attention-text-color-disabled: var(--mono-white);--badge-text-color: var(--mono-white);--badge-background-neutral: var(--mono-grey-400);--badge-background-positive: var(--mono-grey-700);--badge-background-warning: var(--mono-black);--badge-background-attention: var(--mono-black);--outline-color: var(--mono-black);--icon-color-default: var(--mono-black);--icon-color-inverted: var(--mono-white);--text-color: var(--mono-black);--heading-text-color: var(--mono-black);--input-background: var(--mono-white);--border-color: var(--black-opacity-20);--surface: var(--mono-grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--mono-grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--mono-grey-300);--surface-recessed-200: var(--mono-grey-400);--switch-track-background: var(--mono-grey-300);--switch-track-background-checked: var(--mono-black);--tab-border-color: var(--mono-grey-500);--tab-background: var(--mono-grey-100);--tab-icon: var(--mono-grey-900);--tab-text-color: var(--mono-grey-900);--tab-background-active: var(--mono-grey-900);--tab-icon-active: var(--mono-grey-100);--tab-text-color-active: var(--mono-grey-100);--tab-shadow-active: var(--mono-grey-200);--carousel-background: var(--mono-grey-100)}html[data-brand=mono][data-theme=dark]{--feedback-neutral-border-color: var(--white-opacity-20);--feedback-positive-border-color: var(--mono-grey-300);--feedback-info-border-color: var(--mono-grey-300);--feedback-warning-border-color: var(--mono-grey-300);--feedback-attention-border-color: var(--mono-grey-300);--feedback-neutral-background: var(--mono-grey-700);--feedback-positive-background: var(--mono-grey-900);--feedback-info-background: var(--mono-grey-900);--feedback-warning-background: var(--mono-grey-900);--feedback-attention-background: var(--mono-grey-900);--feedback-neutral-icon: var(--mono-grey-100);--feedback-positive-icon: var(--mono-grey-100);--feedback-info-icon: var(--mono-grey-100);--feedback-warning-icon: var(--mono-grey-100);--feedback-attention-icon: var(--mono-grey-100);--feedback-neutral-text: var(--mono-white);--feedback-positive-text: var(--mono-white);--feedback-info-text: var(--mono-white);--feedback-warning-text: var(--mono-white);--feedback-attention-text: var(--mono-white);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-200);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);--action-primary-background: var(--mono-grey-200);--action-primary-background-hover: var(--mono-grey-100);--action-primary-background-focus: var(--mono-grey-100);--action-primary-background-disabled: var(--mono-grey-100);--action-primary-text-color: var(--mono-black);--action-primary-text-color-hover: var(--mono-black);--action-primary-text-color-focus: var(--mono-black);--action-primary-text-color-disabled: var(--mono-black);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--white-opacity-0);--action-secondary-background-focus: var(--white-opacity-0);--action-secondary-background-disabled: var(--white-opacity-0);--action-secondary-text-color: var(--mono-grey-200);--action-secondary-text-color-hover: var(--mono-grey-100);--action-secondary-text-color-focus: var(--mono-grey-100);--action-secondary-text-color-disabled: var(--mono-grey-100);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--mono-grey-800);--action-tertiary-background-focus: var(--mono-grey-800);--action-tertiary-background-disabled: var(--mono-grey-800);--action-tertiary-text-color: var(--mono-grey-200);--action-tertiary-text-color-hover: var(--mono-grey-100);--action-tertiary-text-color-focus: var(--mono-grey-100);--action-tertiary-text-color-disabled: var(--mono-grey-100);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);--action-attention-background: var(--mono-white);--action-attention-background-hover: var(--mono-grey-100);--action-attention-background-focus: var(--mono-grey-100);--action-attention-background-disabled: var(--mono-grey-100);--action-attention-text-color: var(--mono-black);--action-attention-text-color-hover: var(--mono-black);--action-attention-text-color-focus: var(--mono-black);--action-attention-text-color-disabled: var(--mono-black);--badge-text-color: var(--mono-black);--badge-background-neutral: var(--mono-grey-500);--badge-background-positive: var(--mono-grey-300);--badge-background-warning: var(--mono-white);--badge-background-attention: var(--mono-white);--outline-color: var(--mono-white);--icon-color-default: var(--mono-white);--icon-color-inverted: var(--mono-black);--text-color: var(--mono-white);--heading-text-color: var(--mono-white);--input-background: var(--mono-grey-900);--border-color: var(--white-opacity-20);--surface: var(--mono-grey-900);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--mono-grey-700);--surface-elevated-200: var(--mono-grey-800);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--mono-grey-900);--surface-recessed-200: var(--mono-grey-1000);--switch-track-background: var(--mono-grey-500);--switch-track-background-checked: var(--mono-white);--tab-border-color: var(--mono-grey-600);--tab-background: var(--mono-grey-900);--tab-icon: var(--mono-grey-100);--tab-text-color: var(--mono-grey-100);--tab-background-active: var(--mono-grey-100);--tab-icon-active: var(--mono-grey-900);--tab-text-color-active: var(--mono-grey-900);--tab-shadow-active: var(--mono-black);--carousel-background: var(--mono-grey-700)}html[data-brand=mono]{--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-bold);--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--card-radius: var(--radius-150)}html[data-brand=modern]{--font-family: "Golos Text", sans-serif;--grey-100: #f0f0f5;--grey-200: #d9d9e0;--grey-300: #bfbfcc;--grey-400: #a5a5b3;--grey-500: #8c8c99;--grey-600: #737380;--grey-700: #595966;--grey-800: #40404d;--grey-900: #2e2e3a;--grey-1000: #1f1f29;--red-100: #ffe2e2;--red-200: #ffbaba;--red-300: #ff8f8f;--red-400: #ff5e5e;--red-500: #ff2e2e;--red-600: #e60026;--red-700: #cc0022;--red-800: #b3001e;--red-900: #99001a;--red-1000: #660012;--orange-100: #fff1d6;--orange-200: #ffd9a0;--orange-300: #ffc266;--orange-400: #ffaa33;--orange-500: #ff8c00;--orange-600: #e67600;--orange-700: #cc6600;--orange-800: #b35900;--orange-900: #994d00;--orange-1000: #803f00;--green-100: #d8fce0;--green-200: #aafac2;--green-300: #7cf8a4;--green-400: #4ef686;--green-500: #1ce661;--green-600: #00cc4c;--green-700: #00b33f;--green-800: #009933;--green-900: #00802a;--green-1000: #00661f;--blue-100: #e0f0ff;--blue-200: #b3dbff;--blue-300: #80c3ff;--blue-400: #4daaff;--blue-500: #1a92ff;--blue-600: #0075e0;--blue-700: #0066cc;--blue-800: #0055b3;--blue-900: #004499;--blue-1000: #003380;--white: #ffffff;--black: #000000}html[data-brand=modern][data-theme=light]{--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--green-600);--feedback-info-border-color: var(--blue-600);--feedback-warning-border-color: var(--orange-600);--feedback-attention-border-color: var(--red-600);--feedback-neutral-background: var(--white);--feedback-positive-background: var(--green-100);--feedback-info-background: var(--blue-100);--feedback-warning-background: var(--orange-100);--feedback-attention-background: var(--red-100);--feedback-neutral-icon: var(--grey-600);--feedback-positive-icon: var(--green-600);--feedback-info-icon: var(--blue-600);--feedback-warning-icon: var(--orange-600);--feedback-attention-icon: var(--red-600);--feedback-neutral-text: var(--grey-900);--feedback-positive-text: var(--green-900);--feedback-info-text: var(--blue-900);--feedback-warning-text: var(--orange-900);--feedback-attention-text: var(--red-900);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--black);--action-primary-background-hover: var(--grey-900);--action-primary-background-focus: var(--grey-900);--action-primary-background-disabled: var(--grey-200);--action-primary-text-color: var(--white);--action-primary-text-color-hover: var(--white);--action-primary-text-color-focus: var(--white);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--white-opacity-50);--action-secondary-background-focus: var(--white-opacity-50);--action-secondary-background-disabled: var(--grey-100);--action-secondary-text-color: var(--grey-900);--action-secondary-text-color-hover: var(--grey-1000);--action-secondary-text-color-focus: var(--grey-1000);--action-secondary-text-color-disabled: var(--grey-400);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--white-opacity-50);--action-tertiary-background-focus: var(--white-opacity-50);--action-tertiary-background-disabled: var(--white-opacity-50);--action-tertiary-text-color: var(--grey-900);--action-tertiary-text-color-hover: var(--grey-1000);--action-tertiary-text-color-focus: var(--grey-1000);--action-tertiary-text-color-disabled: var(--grey-400);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-500);--action-attention-background-hover: var(--red-600);--action-attention-background-focus: var(--red-600);--action-attention-background-disabled: var(--red-100);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--badge-text-color: var(--white);--badge-background-neutral: var(--grey-400);--badge-background-positive: var(--green-700);--badge-background-warning: var(--orange-800);--badge-background-attention: var(--red-500);--outline-color: var(--blue-500);--icon-color-default: var(--black);--icon-color-inverted: var(--white);--text-color: var(--grey-900);--heading-text-color: var(--grey-1000);--input-background: var(--red-50);--border-color: var(--black-opacity-20);--surface: var(--grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--grey-300);--surface-recessed-200: var(--grey-400);--switch-track-background: var(--grey-300);--switch-track-background-checked: var(--grey-300);--tab-border-color: var(--grey-500);--tab-background: var(--grey-100);--tab-icon: var(--grey-900);--tab-text-color: var(--grey-900);--tab-background-active: var(--grey-900);--tab-icon-active: var(--grey-100);--tab-text-color-active: var(--grey-100);--tab-shadow-active: var(--grey-200);--carousel-background: var(--grey-100)}html[data-brand=modern][data-theme=dark]{--feedback-neutral-border-color: var(--white-opacity-30);--feedback-positive-border-color: var(--green-400);--feedback-info-border-color: var(--blue-400);--feedback-warning-border-color: var(--orange-400);--feedback-attention-border-color: var(--red-400);--feedback-neutral-background: var(--grey-700);--feedback-positive-background: var(--green-800);--feedback-info-background: var(--blue-800);--feedback-warning-background: var(--orange-800);--feedback-attention-background: var(--red-800);--feedback-neutral-icon: var(--grey-300);--feedback-positive-icon: var(--green-300);--feedback-info-icon: var(--blue-300);--feedback-warning-icon: var(--orange-300);--feedback-attention-icon: var(--red-300);--feedback-neutral-text: var(--grey-100);--feedback-positive-text: var(--green-100);--feedback-info-text: var(--blue-100);--feedback-warning-text: var(--orange-100);--feedback-attention-text: var(--red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--white);--action-primary-background-hover: var(--grey-100);--action-primary-background-focus: var(--grey-100);--action-primary-background-disabled: var(--grey-100);--action-primary-text-color: var(--grey-900);--action-primary-text-color-hover: var(--grey-900);--action-primary-text-color-focus: var(--grey-900);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-background: var(--black-opacity-0);--action-secondary-background-hover: var(--black-opacity-20);--action-secondary-background-focus: var(--black-opacity-20);--action-secondary-background-disabled: var(--black-opacity-20);--action-secondary-text-color: var(--grey-100);--action-secondary-text-color-hover: var(--grey-100);--action-secondary-text-color-focus: var(--grey-100);--action-secondary-text-color-disabled: var(--grey-600);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-background: transparent;--action-tertiary-background-hover: var(--black-opacity-20);--action-tertiary-background-focus: var(--black-opacity-20);--action-tertiary-background-disabled: var(--black-opacity-20);--action-tertiary-text-color: var(--grey-100);--action-tertiary-text-color-hover: var(--grey-100);--action-tertiary-text-color-focus: var(--grey-100);--action-tertiary-text-color-disabled: var(--grey-600);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-600);--action-attention-background-hover: var(--red-700);--action-attention-background-focus: var(--red-700);--action-attention-background-disabled: var(--red-900);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--badge-text-color: var(--white);--badge-background-neutral: var(--grey-600);--badge-background-positive: var(--green-900);--badge-background-warning: var(--orange-900);--badge-background-attention: var(--red-700);--outline-color: var(--blue-500);--icon-color-default: var(--white);--icon-color-inverted: var(--black);--text-color: var(--grey-100);--heading-text-color: var(--grey-200);--input-background: var(--grey-800);--border-color: var(--white-opacity-30);--surface: var(--grey-900);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--grey-700);--surface-elevated-200: var(--grey-800);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--grey-900);--surface-recessed-200: var(--grey-1000);--switch-track-background: var(--grey-300);--switch-track-background-checked: var(--grey-300);--tab-border-color: var(--grey-700);--tab-background: var(--grey-800);--tab-icon: var(--grey-100);--tab-text-color: var(--grey-100);--tab-background-active: var(--grey-100);--tab-icon-active: var(--grey-800);--tab-text-color-active: var(--grey-800);--tab-shadow-active: var(--grey-900);--carousel-background: var(--grey-700)}html[data-brand=modern]{--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-bold);--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--card-radius: var(--radius-400)}html[data-theme=light]{--app-logo-color: var(--grey-800);--app-nav-accent: var(--black);--app-theme-toggle-bg: var(--grey-800);--app-story-snippet-code-bg: var(--mui-brand-300);--app-story-snippet-code-text: var(--black);--app-story-banner-gradient-start: var(--black-opacity-10);--app-story-banner-gradient-end: var(--white-opacity-20);--app-story-banner-border-color: var(--black-opacity-40);--app-story-icon-grid-background: var(--white);--app-story-icon-grid-text: var(--grey-900);--app-story-icon-grid-text-inverted: var(--grey-100);--app-story-icon-grid-background-inverted: var(--grey-900);--app-container-surface: var(--white);--app-navbar-surface: var(--white);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 96%, black)}html[data-theme=dark]{--app-logo-color: var(--mui-brand-300);--app-nav-accent: var(--mui-brand-300);--app-theme-toggle-bg: var(--mui-brand-300);--app-story-snippet-code-bg: var(--mui-brand-300);--app-story-snippet-code-text: var(--black);--app-story-banner-gradient-start: var(--white-opacity-10);--app-story-banner-gradient-end: var(--black-opacity-20);--app-story-banner-border-color: var(--white-opacity-20);--app-story-icon-grid-background: var(--black);--app-story-icon-grid-text: var(--grey-100);--app-story-icon-grid-text-inverted: var(--grey-900);--app-story-icon-grid-background-inverted: var(--grey-200);--app-container-surface: var(--surface);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 76%, black)}html[data-brand=jal][data-theme=light]{--app-logo-color: var(--jal-red-400);--app-nav-accent: var(--jal-red-600);--app-theme-toggle-bg: var(--jal-grey-200);--app-story-snippet-code-bg: var(--jal-red-300);--app-story-snippet-code-text: var(--jal-white);--app-container-surface: var(--white);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 96%, black)}html[data-brand=jal][data-theme=dark]{--app-logo-color: var(--jal-red-300);--app-nav-accent: var(--jal-red-200);--app-theme-toggle-bg: var(--jal-red-200);--app-story-snippet-code-bg: var(--jal-red-300);--app-story-snippet-code-text: var(--jal-white);--app-container-surface: var(--surface);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 76%, black)}html[data-brand=ana][data-theme=light]{--app-logo-color: var(--ana-blue-500);--app-nav-accent: var(--ana-blue-400);--app-theme-toggle-bg: var(--ana-grey-200);--app-story-snippet-code-bg: var(--ana-blue-400);--app-story-snippet-code-text: var(--ana-white);--app-container-surface: var(--ana-white);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 96%, black)}html[data-brand=ana][data-theme=dark]{--app-logo-color: var(--ana-blue-300);--app-nav-accent: var(--ana-blue-200);--app-theme-toggle-bg: var(--ana-blue-200);--app-story-snippet-code-bg: var(--ana-blue-200);--app-story-snippet-code-text: var(--ana-black);--app-container-surface: var(--surface);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 76%, black)}html[data-brand=mono][data-theme=light]{--app-logo-color: var(--mono-grey-700);--app-nav-accent: var(--mono-black);--app-theme-toggle-bg: var(--mono-grey-200);--app-story-snippet-code-bg: var(--mono-grey-200);--app-story-snippet-code-text: var(--mono-black);--app-container-surface: var(--mono-grey-100);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 96%, black)}html[data-brand=mono][data-theme=dark]{--app-logo-color: var(--mono-grey-100);--app-nav-accent: var(--mono-white);--app-theme-toggle-bg: var(--mono-grey-200);--app-story-snippet-code-bg: var(--mono-white);--app-story-snippet-code-text: var(--mono-black);--app-container-surface: var(--surface);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 76%, black)}html[data-brand=modern][data-theme=light]{--app-logo-color: var(--black);--app-nav-accent: var(--black);--app-theme-toggle-bg: var(--grey-300);--app-story-snippet-code-bg: var(--grey-200);--app-story-snippet-code-text: var(--black);--app-container-surface: var(--grey-100);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 96%, black)}html[data-brand=modern][data-theme=dark]{--app-logo-color: var(--white);--app-nav-accent: var(--white);--app-theme-toggle-bg: var(--grey-300);--app-story-snippet-code-bg: var(--white);--app-story-code-text: var(--black);--app-container-surface: var(--grey-1000);--app-navbar-surface: var(--surface-elevated-100);--app-navbar-surface-100: color-mix(in srgb, var(--app-navbar-surface) 76%, black)}

package/dist/muibook/ruby.svg

@@ -0,0 +1,13 @@
+<svg width="54" height="82" viewBox="0 0 54 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 27.1157C0 42.0665 12.1059 54.2289 27.0013 54.2289C41.8915 54.2289 54 42.0717 54 27.1157C54 12.1572 41.8864 0 27.0013 0C12.1136 0 0 12.1572 0 27.1157ZM2.75602 27.1157C2.75602 13.6859 13.6307 2.76512 27.0013 2.76512C40.3693 2.76512 51.244 13.6885 51.244 27.1157C51.244 40.5404 40.3693 51.4612 27.0013 51.4612C13.6307 51.4612 2.75345 40.5404 2.75345 27.1157H2.75602Z" fill="white"/>
+<path d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="#161082"/>
+<path opacity="0.5" d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="url(#paint0_radial_199_169)"/>
+<path d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="#242484"/>
+<path d="M19.9927 27.3429C20.1061 26.6549 20.5671 26.1893 21.2548 26.1893C21.9451 26.1893 22.4036 26.7713 22.4036 27.3429H19.9927ZM24.2427 28.3828C24.356 26.4221 23.3231 24.8054 21.2548 24.8054C19.5291 24.8054 18.1537 26.0729 18.1537 27.9249C18.1537 29.883 19.4158 31.0367 21.3682 31.0367C22.6329 31.0367 23.8975 30.4572 24.2427 29.0786H22.5169C22.2903 29.5364 21.9451 29.7666 21.4867 29.7666C20.6805 29.7666 20.2194 29.1898 20.2194 28.3828H24.2427ZM48.0243 30.4598C49.5182 30.4598 50.0926 29.1924 50.0926 27.9223C50.0926 26.6523 49.5157 25.3823 48.0243 25.3823C46.6463 25.3823 46.0719 26.6497 46.0719 27.9223C46.0719 29.195 46.6463 30.4598 48.0243 30.4598ZM50.7829 30.9203H50.0926V29.7666C49.7475 30.5762 48.8305 31.0367 48.0243 31.0367C46.2986 31.0367 45.3842 29.5364 45.3842 27.9223C45.3842 26.3057 46.1878 24.8054 48.0243 24.8054C48.9439 24.8054 49.7475 25.271 50.0926 26.0729V22.731H50.7803V30.9228M24.5878 25.0382H25.3915L26.8854 30.1184L28.2634 25.0382H29.067L30.4476 30.1184L31.9415 25.0382H32.8585L31.022 30.9228H30.2158L28.7244 25.9643L27.3439 30.9228H26.5402L24.5878 25.0382ZM38.8367 27.9249C38.8367 29.6554 37.9146 31.0392 36.0755 31.0392C34.2391 31.0392 33.3195 29.6554 33.3195 27.9249C33.3195 26.1945 34.2391 24.808 36.0755 24.808C37.8013 24.9244 38.8316 26.3083 38.8316 27.9275M34.0072 27.9275C34.0072 29.195 34.6975 30.4624 36.0755 30.4624C37.4561 30.4624 38.1439 29.195 38.1439 27.9249C38.1439 26.6549 37.4561 25.3848 36.0755 25.3848C34.6975 25.5012 34.0072 26.7687 34.0072 27.9249M39.867 25.0382H40.5573V26.4247C40.7162 25.975 41.013 25.5876 41.405 25.318C41.797 25.0484 42.264 24.9106 42.7389 24.9244V25.6151C41.4768 25.5012 40.5573 26.5411 40.5573 27.6947V30.809H39.8696V25.0382M43.5451 22.8448H44.3488V30.9203H43.6585V22.8448H43.5451ZM5.85976 27.9223C5.85976 27.2317 6.09157 26.3057 7.00853 26.3057C7.92549 26.3057 8.1573 27.2291 8.1573 27.9223C8.1573 28.6156 7.92549 29.5364 7.00853 29.5364C6.09157 29.5364 5.85976 28.7294 5.85976 27.9223ZM3.90736 27.9223C3.90736 29.6528 5.17204 31.0367 7.00853 31.0367C8.84759 31.0367 10.1123 29.7692 10.1123 27.9223C10.1123 26.1893 8.84759 24.8054 7.00595 24.8054C5.16946 24.9218 3.90479 26.1893 3.90479 27.9249M11.1451 25.0357H12.9842V25.8453C13.3268 25.2659 14.133 24.9218 14.8207 24.9218C16.7731 24.9218 16.889 26.3057 16.889 27.2291V30.9203H14.9392V28.1526C14.9392 27.3429 15.0499 26.5385 14.0171 26.5385C13.3293 26.5385 12.9842 27.1153 12.9842 27.8059V31.0392H11.1426V25.0305" fill="white"/>
+<path d="M27 62.3579C34.4119 62.3579 41.1 63.4792 45.917 65.2759C48.3274 66.175 50.2437 67.2342 51.5479 68.3843C52.8525 69.5349 53.5 70.7342 53.5 71.9292C53.4999 73.1242 52.8526 74.3235 51.5479 75.4741C50.2437 76.6242 48.3274 77.6825 45.917 78.5815C41.1 80.3783 34.412 81.5005 27 81.5005C19.588 81.5005 12.9 80.3783 8.08301 78.5815C5.67262 77.6825 3.75631 76.6242 2.45215 75.4741C1.14744 74.3235 0.500076 73.1242 0.5 71.9292C0.5 70.7342 1.1475 69.5349 2.45215 68.3843C3.75631 67.2342 5.67262 66.175 8.08301 65.2759C12.9 63.4792 19.5881 62.3579 27 62.3579Z" fill="#C92E3A" stroke="white"/>
+<defs>
+<radialGradient id="paint0_radial_199_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1206.96 917.164) scale(8300.54 8335.72)">
+<stop offset="1" stop-color="#161082" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>

package/dist/muibook/sapphire.svg

@@ -0,0 +1,13 @@
+<svg width="54" height="82" viewBox="0 0 54 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 27.1157C0 42.0665 12.1059 54.2289 27.0013 54.2289C41.8915 54.2289 54 42.0717 54 27.1157C54 12.1572 41.8864 0 27.0013 0C12.1136 0 0 12.1572 0 27.1157ZM2.75602 27.1157C2.75602 13.6859 13.6307 2.76512 27.0013 2.76512C40.3693 2.76512 51.244 13.6885 51.244 27.1157C51.244 40.5404 40.3693 51.4612 27.0013 51.4612C13.6307 51.4612 2.75345 40.5404 2.75345 27.1157H2.75602Z" fill="white"/>
+<path d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="#161082"/>
+<path opacity="0.5" d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="url(#paint0_radial_199_170)"/>
+<path d="M27.0014 52.7287C41.0873 52.7287 52.5062 41.2614 52.5062 27.1158C52.5062 12.9702 41.0873 1.50293 27.0014 1.50293C12.9155 1.50293 1.49658 12.9702 1.49658 27.1158C1.49658 41.2614 12.9155 52.7287 27.0014 52.7287Z" fill="#242484"/>
+<path d="M19.9927 27.3429C20.1061 26.6549 20.5671 26.1893 21.2548 26.1893C21.9451 26.1893 22.4036 26.7713 22.4036 27.3429H19.9927ZM24.2427 28.3828C24.356 26.4221 23.3231 24.8054 21.2548 24.8054C19.5291 24.8054 18.1537 26.0729 18.1537 27.9249C18.1537 29.883 19.4158 31.0367 21.3682 31.0367C22.6329 31.0367 23.8975 30.4572 24.2427 29.0786H22.5169C22.2903 29.5364 21.9451 29.7666 21.4867 29.7666C20.6805 29.7666 20.2194 29.1898 20.2194 28.3828H24.2427ZM48.0243 30.4598C49.5182 30.4598 50.0926 29.1924 50.0926 27.9223C50.0926 26.6523 49.5157 25.3823 48.0243 25.3823C46.6463 25.3823 46.0719 26.6497 46.0719 27.9223C46.0719 29.195 46.6463 30.4598 48.0243 30.4598ZM50.7829 30.9203H50.0926V29.7666C49.7475 30.5762 48.8305 31.0367 48.0243 31.0367C46.2986 31.0367 45.3842 29.5364 45.3842 27.9223C45.3842 26.3057 46.1878 24.8054 48.0243 24.8054C48.9439 24.8054 49.7475 25.271 50.0926 26.0729V22.731H50.7803V30.9228M24.5878 25.0382H25.3915L26.8854 30.1184L28.2634 25.0382H29.067L30.4476 30.1184L31.9415 25.0382H32.8585L31.022 30.9228H30.2158L28.7244 25.9643L27.3439 30.9228H26.5402L24.5878 25.0382ZM38.8367 27.9249C38.8367 29.6554 37.9146 31.0392 36.0755 31.0392C34.2391 31.0392 33.3195 29.6554 33.3195 27.9249C33.3195 26.1945 34.2391 24.808 36.0755 24.808C37.8013 24.9244 38.8316 26.3083 38.8316 27.9275M34.0072 27.9275C34.0072 29.195 34.6975 30.4624 36.0755 30.4624C37.4561 30.4624 38.1439 29.195 38.1439 27.9249C38.1439 26.6549 37.4561 25.3848 36.0755 25.3848C34.6975 25.5012 34.0072 26.7687 34.0072 27.9249M39.867 25.0382H40.5573V26.4247C40.7162 25.975 41.013 25.5876 41.405 25.318C41.797 25.0484 42.264 24.9106 42.7389 24.9244V25.6151C41.4768 25.5012 40.5573 26.5411 40.5573 27.6947V30.809H39.8696V25.0382M43.5451 22.8448H44.3488V30.9203H43.6585V22.8448H43.5451ZM5.85976 27.9223C5.85976 27.2317 6.09157 26.3057 7.00853 26.3057C7.92549 26.3057 8.1573 27.2291 8.1573 27.9223C8.1573 28.6156 7.92549 29.5364 7.00853 29.5364C6.09157 29.5364 5.85976 28.7294 5.85976 27.9223ZM3.90736 27.9223C3.90736 29.6528 5.17204 31.0367 7.00853 31.0367C8.84759 31.0367 10.1123 29.7692 10.1123 27.9223C10.1123 26.1893 8.84759 24.8054 7.00595 24.8054C5.16946 24.9218 3.90479 26.1893 3.90479 27.9249M11.1451 25.0357H12.9842V25.8453C13.3268 25.2659 14.133 24.9218 14.8207 24.9218C16.7731 24.9218 16.889 26.3057 16.889 27.2291V30.9203H14.9392V28.1526C14.9392 27.3429 15.0499 26.5385 14.0171 26.5385C13.3293 26.5385 12.9842 27.1153 12.9842 27.8059V31.0392H11.1426V25.0305" fill="white"/>
+<path d="M27 62.3579C34.4119 62.3579 41.1 63.4792 45.917 65.2759C48.3274 66.175 50.2437 67.2342 51.5479 68.3843C52.8525 69.5349 53.5 70.7342 53.5 71.9292C53.4999 73.1242 52.8526 74.3235 51.5479 75.4741C50.2437 76.6242 48.3274 77.6825 45.917 78.5815C41.1 80.3783 34.412 81.5005 27 81.5005C19.588 81.5005 12.9 80.3783 8.08301 78.5815C5.67262 77.6825 3.75631 76.6242 2.45215 75.4741C1.14744 74.3235 0.500076 73.1242 0.5 71.9292C0.5 70.7342 1.1475 69.5349 2.45215 68.3843C3.75631 67.2342 5.67262 66.175 8.08301 65.2759C12.9 63.4792 19.5881 62.3579 27 62.3579Z" fill="#0066B6" stroke="white"/>
+<defs>
+<radialGradient id="paint0_radial_199_170" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1206.96 917.164) scale(8300.54 8335.72)">
+<stop offset="1" stop-color="#161082" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>

package/dist/types/components/mui-accordion/block/index.d.ts

@@ -0,0 +1,2 @@
+import "../../mui-icons/down-chevron";
+import "../../../components/mui-heading";

package/dist/types/components/mui-accordion/group/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-accordion/index.d.ts

@@ -0,0 +1,3 @@
+import "./block";
+import "./inline";
+import "./group";

package/dist/types/components/mui-accordion/inline/index.d.ts

@@ -0,0 +1,2 @@
+import "../../mui-icons/right-chevron";
+import "../../../components/mui-heading";

package/dist/types/components/mui-accordion/mui-accordion-block/index.d.ts

@@ -0,0 +1,2 @@
+import "../../../components/mui-icons/mui-icon-down-chevron";
+import "../../../components/mui-heading";

package/dist/types/components/mui-accordion/mui-accordion-group/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-accordion/mui-accordion-inline/index.d.ts

@@ -0,0 +1,2 @@
+import "../../../components/mui-icons/mui-icon-right-chevron";
+import "../../../components/mui-heading";

package/dist/types/components/mui-addon/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-alert/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-badge/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-body/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-button/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-button-group/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-card/body/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-card/card/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-card/footer/index.d.ts

@@ -0,0 +1 @@
+export {};