@ippon-ui/styles 0.0.2

package/dist/organism/v-space/v-space.code.html

@@ -0,0 +1 @@
+<div class="ippon-v-space"><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-8"><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-32 -center"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-16 -left"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-20 -right"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-24 -justify"><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><section class="ippon-v-space -gap-16"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></section>

package/dist/organism/v-space/v-space.md

@@ -0,0 +1,20 @@
+## Vertical space (v-space)
+
+The `v-space` organism represents vertical spaces between elements.
+
+**Gap**
+
+The `-gap-{size}` alternative specifies the gap between child elements.
+
+**Tag**
+
+The `tag` property allows specifying a custom HTML element (e.g., `div`, `section`, `article`). Defaults to `div`.
+
+**Alignment**
+
+The following alternatives control the horizontal alignment of child elements:
+
+- `-left`: Align items to the left (flex-start)
+- `-center`: Center align items
+- `-justify`: Stretch items to full width (stretch)
+- `-right`: Align items to the right (flex-end)

package/dist/organism/v-space/v-space.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: flex; flex-direction: column; gap: 2rem"><div class="ippon-v-space"><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-8"><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-32 -center"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-16 -left"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-20 -right"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-v-space -gap-24 -justify"><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><section class="ippon-v-space -gap-16"><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></section></div></body></html>

package/dist/template/layout/layout.code.html

@@ -0,0 +1 @@
+<div class="ippon-layout"><div class="ippon-layout--header"><div class="ippon-header"><div class="ippon-header--slot">Logo</div></div></div><div class="ippon-layout--body"><h1 class="ippon-title">Title</h1></div></div>

package/dist/template/layout/layout.md

@@ -0,0 +1 @@
+## Layout

package/dist/template/layout/layout.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div class="ippon-layout"><div class="ippon-layout--header"><div class="ippon-header"><div class="ippon-header--slot">Logo</div></div></div><div class="ippon-layout--body"><h1 class="ippon-title">Title</h1></div></div></body></html>

package/dist/template/template.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Tikui - Templates</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Tikui is a Pattern Library generator."><link rel="stylesheet" href="../documentation/style.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/index.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/700.css"><link rel="stylesheet" href="../lib/prismjs/prism-okaidia.css"></head><body><div class="tikui-template-page"><div class="tikui-template-page--header"><div class="tikui-template-page--header-container"><header class="tikui-header"><div class="tikui-header--slot"><a class="tikui-title-brand" href="../index.html">Tikui</a></div><div class="tikui-header--slot"><nav><ul class="tikui-header-navigation"><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../token/token.html"><span class="tikui-header-item--text">Tokens</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../atom/atom.html"><span class="tikui-header-item--text">Atoms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../molecule/molecule.html"><span class="tikui-header-item--text">Molecules</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../organism/organism.html"><span class="tikui-header-item--text">Organisms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item -selected" href="../template/template.html"><span class="tikui-header-item--text">Templates</span><span class="tikui-header-item--feedback"></span></a></li></ul></nav></div></header></div></div><div class="tikui-template-page--body" data-navigable><div class="tikui-template-page--container"><div class="tikui-template-page--container-content"><div class="tikui-vertical-spacing -s32"><div class="tikui-vertical-spacing--line"><h1 class="tikui-title-main" id="templates">Templates</h1></div><div class="tikui-vertical-spacing--line"><figure class="tikui-quote"><blockquote class="tikui-quote--text" cite="http://bradfrost.com/blog/post/atomic-web-design/#templates"><p>Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.</p></blockquote><figcaption class="tikui-quote--author"><cite>Atomic Design</cite> by Brad Frost</figcaption></figure></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="layout">Layout</h2></div><div class="tikui-component--render render"><a class="tikui-button" href="../template/layout/layout.render.html" target="_blank">Show</a></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-layout&quot;&gt;
+  &lt;div class=&quot;ippon-layout--header&quot;&gt;
+    &lt;div class=&quot;ippon-header&quot;&gt;
+      &lt;div class=&quot;ippon-header--slot&quot;&gt;Logo
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-layout--body&quot;&gt;
+    &lt;h1 class=&quot;ippon-title&quot;&gt;Title
+    &lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-layout&quot;&gt;
+  &lt;div class=&quot;ippon-layout--header&quot;&gt;
+    &lt;div class=&quot;ippon-header&quot;&gt;
+      &lt;div class=&quot;ippon-header--slot&quot;&gt;Logo
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-layout--body&quot;&gt;
+    &lt;h1 class=&quot;ippon-title&quot;&gt;Title
+    &lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-layout
+  .ippon-layout--header
+    .ippon-header
+      .ippon-header--slot Logo
+  .ippon-layout--body
+    h1.ippon-title Title</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-layout
+  .ippon-layout--header
+    .ippon-header
+      .ippon-header--slot Logo
+  .ippon-layout--body
+    h1.ippon-title Title">Copy</button></div></div></div></div></div></div></div></div></div></div><script src="../lib/prismjs/prism.js"></script><script src="../lib/prismjs/prism-pug.js"></script><script src="../documentation/scripts/tikui.js"></script></body></html>

package/dist/tikui.css

@@ -0,0 +1 @@
+:root{--ippon-color-brand-klein-100: #e6eeff;--ippon-color-brand-klein-200: #ccd9ff;--ippon-color-brand-klein-300: #99afff;--ippon-color-brand-klein-400: #6685ff;--ippon-color-brand-klein-500: #335cff;--ippon-color-brand-klein-600: #003cdc;--ippon-color-brand-klein-700: #002eb3;--ippon-color-brand-klein-800: #001e8a;--ippon-color-brand-klein-900: #001052;--ippon-color-blue-100: #f1f9ff;--ippon-color-blue-200: #eaf6ff;--ippon-color-blue-300: #d4edff;--ippon-color-blue-400: #74c4ff;--ippon-color-blue-500: #68b0e6;--ippon-color-blue-600: #5d9dcc;--ippon-color-blue-700: #467699;--ippon-color-blue-800: #345873;--ippon-color-blue-900: #294559;--ippon-color-blue-2-100: #e6f4ff;--ippon-color-blue-2-200: #c7e4ff;--ippon-color-blue-2-300: #94c9ff;--ippon-color-blue-2-400: #60acff;--ippon-color-blue-2-500: #2e90fa;--ippon-color-blue-2-600: #0072c6;--ippon-color-blue-2-700: #005c9e;--ippon-color-blue-2-800: #004578;--ippon-color-blue-2-900: #002e52;--ippon-color-green-100: #ebf8f0;--ippon-color-green-200: #e2f5e9;--ippon-color-green-300: #c2ead1;--ippon-color-green-400: #3bba6a;--ippon-color-green-500: #35a75f;--ippon-color-green-600: #2f9555;--ippon-color-green-700: #267d47;--ippon-color-green-800: #1e6338;--ippon-color-green-900: #164d2b;--ippon-color-yellow-100: #fff8ec;--ippon-color-yellow-200: #fff5e3;--ippon-color-yellow-300: #ffe9c5;--ippon-color-yellow-400: #ffb945;--ippon-color-yellow-500: #e6a73e;--ippon-color-yellow-600: #cc9437;--ippon-color-yellow-700: #bf8b34;--ippon-color-yellow-800: #996f29;--ippon-color-yellow-900: #73531f;--ippon-color-orange-100: #fff0eb;--ippon-color-orange-200: #ffe9e1;--ippon-color-orange-300: #ffd1c0;--ippon-color-orange-400: #ff6b34;--ippon-color-orange-500: #e6602f;--ippon-color-orange-600: #cc562a;--ippon-color-orange-700: #bf5027;--ippon-color-orange-800: #99401f;--ippon-color-orange-900: #733017;--ippon-color-red-100: #fce9e9;--ippon-color-red-200: #fbdede;--ippon-color-red-300: #ffc9c9;--ippon-color-red-400: #e12121;--ippon-color-red-500: #cb1e1e;--ippon-color-red-600: #b41a1a;--ippon-color-red-700: #a91919;--ippon-color-red-800: #871414;--ippon-color-red-900: #650f0f}:root{--ippon-color-neutral-0: #fff;--ippon-color-neutral-50: #fbfcfe;--ippon-color-neutral-100: #f9fafb;--ippon-color-neutral-150: #eff2f6;--ippon-color-neutral-200: #eaecf0;--ippon-color-neutral-300: #d0d5dd;--ippon-color-neutral-400: #98a2b3;--ippon-color-neutral-500: #667085;--ippon-color-neutral-600: #475467;--ippon-color-neutral-700: #344054;--ippon-color-neutral-800: #1d2939;--ippon-color-neutral-900: #191919;--ippon-color-neutral-999: #000;--ippon-color-default-100: var(--ippon-color-brand-klein-100);--ippon-color-default-200: var(--ippon-color-brand-klein-200);--ippon-color-default-300: var(--ippon-color-brand-klein-300);--ippon-color-default-400: var(--ippon-color-brand-klein-400);--ippon-color-default-500: var(--ippon-color-brand-klein-500);--ippon-color-default-600: var(--ippon-color-brand-klein-600);--ippon-color-default-700: var(--ippon-color-brand-klein-700);--ippon-color-default-800: var(--ippon-color-brand-klein-800);--ippon-color-default-900: var(--ippon-color-brand-klein-900);--ippon-color-positive-100: var(--ippon-color-green-100);--ippon-color-positive-200: var(--ippon-color-green-200);--ippon-color-positive-300: var(--ippon-color-green-300);--ippon-color-positive-400: var(--ippon-color-green-400);--ippon-color-positive-500: var(--ippon-color-green-500);--ippon-color-positive-600: var(--ippon-color-green-600);--ippon-color-positive-700: var(--ippon-color-green-700);--ippon-color-positive-800: var(--ippon-color-green-800);--ippon-color-positive-900: var(--ippon-color-green-900);--ippon-color-information-100: var(--ippon-color-blue-100);--ippon-color-information-200: var(--ippon-color-blue-200);--ippon-color-information-300: var(--ippon-color-blue-300);--ippon-color-information-400: var(--ippon-color-blue-400);--ippon-color-information-500: var(--ippon-color-blue-500);--ippon-color-information-600: var(--ippon-color-blue-600);--ippon-color-information-700: var(--ippon-color-blue-700);--ippon-color-information-800: var(--ippon-color-blue-800);--ippon-color-information-900: var(--ippon-color-blue-900);--ippon-color-information-2-100: var(--ippon-color-blue-2-100);--ippon-color-information-2-200: var(--ippon-color-blue-2-200);--ippon-color-information-2-300: var(--ippon-color-blue-2-300);--ippon-color-information-2-400: var(--ippon-color-blue-2-400);--ippon-color-information-2-500: var(--ippon-color-blue-2-500);--ippon-color-information-2-600: var(--ippon-color-blue-2-600);--ippon-color-information-2-700: var(--ippon-color-blue-2-700);--ippon-color-information-2-800: var(--ippon-color-blue-2-800);--ippon-color-information-2-900: var(--ippon-color-blue-2-900);--ippon-color-negative-100: var(--ippon-color-red-100);--ippon-color-negative-200: var(--ippon-color-red-200);--ippon-color-negative-300: var(--ippon-color-red-300);--ippon-color-negative-400: var(--ippon-color-red-400);--ippon-color-negative-500: var(--ippon-color-red-500);--ippon-color-negative-600: var(--ippon-color-red-600);--ippon-color-negative-700: var(--ippon-color-red-700);--ippon-color-negative-800: var(--ippon-color-red-800);--ippon-color-negative-900: var(--ippon-color-red-900);--ippon-color-warning-100: var(--ippon-color-yellow-100);--ippon-color-warning-200: var(--ippon-color-yellow-200);--ippon-color-warning-300: var(--ippon-color-yellow-300);--ippon-color-warning-400: var(--ippon-color-yellow-400);--ippon-color-warning-500: var(--ippon-color-yellow-500);--ippon-color-warning-600: var(--ippon-color-yellow-600);--ippon-color-warning-700: var(--ippon-color-yellow-700);--ippon-color-warning-800: var(--ippon-color-yellow-800);--ippon-color-warning-900: var(--ippon-color-yellow-900)}:root{--ippon-color-brand-surface-primary: var(--ippon-color-default-700);--ippon-color-brand-surface-primary-hover: var(--ippon-color-default-800);--ippon-color-brand-surface-primary-active: var(--ippon-color-default-900);--ippon-color-brand-surface-secondary: var(--ippon-color-default-100);--ippon-color-brand-surface-secondary-hover: var(--ippon-color-default-200);--ippon-color-brand-surface-secondary-active: var(--ippon-color-default-300);--ippon-color-brand-text-icon-primary: var(--ippon-color-default-600);--ippon-color-brand-text-icon-secondary: var(--ippon-color-default-800);--ippon-color-brand-text-icon-on-primary: var(--ippon-color-neutral-0);--ippon-color-brand-text-icon-on-secondary: var(--ippon-color-default-700);--ippon-color-brand-border: var(--ippon-color-default-500)}:root{--ippon-color-information-surface-primary: var(--ippon-color-information-700);--ippon-color-information-surface-primary-hover: var(--ippon-color-information-800);--ippon-color-information-surface-primary-active: var(--ippon-color-information-900);--ippon-color-information-surface-secondary: var(--ippon-color-information-100);--ippon-color-information-surface-secondary-hover: var(--ippon-color-information-200);--ippon-color-information-surface-secondary-active: var(--ippon-color-information-300);--ippon-color-information-text-icon-primary: var(--ippon-color-information-600);--ippon-color-information-text-icon-secondary: var(--ippon-color-information-800);--ippon-color-information-text-icon-on-primary: var(--ippon-color-neutral-0);--ippon-color-information-text-icon-on-secondary: var(--ippon-color-information-700);--ippon-color-information-border: var(--ippon-color-information-500)}:root{--ippon-color-information-2-surface-primary: var(--ippon-color-information-2-600);--ippon-color-information-2-surface-primary-hover: var(--ippon-color-information-2-700);--ippon-color-information-2-surface-primary-active: var(--ippon-color-information-2-800);--ippon-color-information-2-surface-secondary: var(--ippon-color-information-2-100);--ippon-color-information-2-surface-secondary-hover: var(--ippon-color-information-2-200);--ippon-color-information-2-surface-secondary-active: var(--ippon-color-information-2-300);--ippon-color-information-2-text-icon-primary: var(--ippon-color-information-2-500);--ippon-color-information-2-text-icon-secondary: var(--ippon-color-information-2-600);--ippon-color-information-2-text-icon-on-primary: var(--ippon-color-neutral-0);--ippon-color-information-2-text-icon-on-secondary: var(--ippon-color-information-2-700);--ippon-color-information-2-border: var(--ippon-color-information-2-500)}:root{--ippon-color-success-surface-primary: var(--ippon-color-positive-700);--ippon-color-success-surface-primary-hover: var(--ippon-color-positive-800);--ippon-color-success-surface-primary-active: var(--ippon-color-positive-900);--ippon-color-success-surface-secondary: var(--ippon-color-positive-100);--ippon-color-success-surface-secondary-hover: var(--ippon-color-positive-200);--ippon-color-success-surface-secondary-active: var(--ippon-color-positive-300);--ippon-color-success-text-icon-primary: var(--ippon-color-positive-600);--ippon-color-success-text-icon-secondary: var(--ippon-color-positive-800);--ippon-color-success-text-icon-on-primary: var(--ippon-color-neutral-0);--ippon-color-success-text-icon-on-secondary: var(--ippon-color-positive-700);--ippon-color-success-border: var(--ippon-color-positive-500)}:root{--ippon-color-error-surface-primary: var(--ippon-color-negative-700);--ippon-color-error-surface-primary-hover: var(--ippon-color-negative-800);--ippon-color-error-surface-primary-active: var(--ippon-color-negative-900);--ippon-color-error-surface-secondary: var(--ippon-color-negative-100);--ippon-color-error-surface-secondary-hover: var(--ippon-color-negative-200);--ippon-color-error-surface-secondary-active: var(--ippon-color-negative-300);--ippon-color-error-text-icon-primary: var(--ippon-color-negative-600);--ippon-color-error-text-icon-secondary: var(--ippon-color-negative-800);--ippon-color-error-text-icon-on-primary: var(--ippon-color-neutral-0);--ippon-color-error-text-icon-on-secondary: var(--ippon-color-negative-700);--ippon-color-error-border: var(--ippon-color-negative-500)}:root{--ippon-color-warning-surface-primary: var(--ippon-color-warning-700);--ippon-color-warning-surface-primary-hover: var(--ippon-color-warning-800);--ippon-color-warning-surface-primary-active: var(--ippon-color-warning-900);--ippon-color-warning-surface-secondary: var(--ippon-color-warning-100);--ippon-color-warning-surface-secondary-hover: var(--ippon-color-warning-200);--ippon-color-warning-surface-secondary-active: var(--ippon-color-warning-300);--ippon-color-warning-text-icon-primary: var(--ippon-color-warning-600);--ippon-color-warning-text-icon-secondary: var(--ippon-color-warning-800);--ippon-color-warning-text-icon-on-primary: var(--ippon-color-neutral-0);--ippon-color-warning-text-icon-on-secondary: var(--ippon-color-warning-700);--ippon-color-warning-border: var(--ippon-color-warning-500)}:root{--ippon-color-neutral-surface-primary: var(--ippon-color-neutral-0);--ippon-color-neutral-surface-primary-hover: var(--ippon-color-neutral-100);--ippon-color-neutral-surface-primary-active: var(--ippon-color-neutral-200);--ippon-color-neutral-surface-secondary: var(--ippon-color-neutral-100);--ippon-color-neutral-surface-secondary-hover: var(--ippon-color-neutral-200);--ippon-color-neutral-surface-secondary-active: var(--ippon-color-neutral-300);--ippon-color-neutral-surface-secondary2: var(--ippon-color-neutral-150);--ippon-color-neutral-surface-tertiary: var(--ippon-color-neutral-300);--ippon-color-neutral-surface-tertiary-hover: var(--ippon-color-neutral-400);--ippon-color-neutral-surface-tertiary-active: var(--ippon-color-neutral-500);--ippon-color-neutral-text-icon-primary: var(--ippon-color-neutral-900);--ippon-color-neutral-text-icon-secondary: var(--ippon-color-neutral-800);--ippon-color-neutral-text-icon-tertiary: var(--ippon-color-neutral-600);--ippon-color-neutral-text-icon-tertiary-inversed: var(--ippon-color-neutral-400);--ippon-color-neutral-text-icon-on-primary: var(--ippon-color-neutral-900);--ippon-color-neutral-text-icon-on-secondary: var(--ippon-color-neutral-700);--ippon-color-neutral-text-icon-on-tertiary: var(--ippon-color-neutral-900);--ippon-color-neutral-border: var(--ippon-color-neutral-300)}:root{--ippon-radius-round: 50%;--ippon-radius-pill: var(--ippon-size-999);--ippon-radius-xxl: var(--ippon-size-16);--ippon-radius-xl: var(--ippon-size-12);--ippon-radius-l: var(--ippon-size-8);--ippon-radius-m: var(--ippon-size-4)}:root{--ippon-shadow-l1: 0px 0px 2px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent), 0px 2px 4px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent);--ippon-shadow-l2: 0px 0px 4px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent), 0px 4px 8px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);--ippon-shadow-l3: 0px 0px 6px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent), 0px 8px 16px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);--ippon-shadow-l4: 0px 0px 8px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent), 0px 10px 20px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);--ippon-shadow-l5: 0px 0px 10px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent), 0px 12px 24px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);--ippon-shadow-l6: 0px 0px 12px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent), 0px 16px 32px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent)}:root{--ippon-typography-display-font: 'Saira Extra Condensed', sans-serif;--ippon-typography-font: 'Open Sans', sans-serif;--ippon-typography-weight-normal: 400;--ippon-typography-weight-semi-bold: 600;--ippon-typography-weight-bold: 700;--ippon-typography-uppercase: uppercase;--ippon-typography-display-large-line-height: var(--ippon-size-64);--ippon-typography-display-large-size: var(--ippon-size-56);--ippon-typography-display-large-font: var(--ippon-typography-display-font);--ippon-typography-display-large-weight: var(--ippon-typography-weight-bold);--ippon-typography-display-large-transform: var(--ippon-typography-uppercase);--ippon-typography-display-medium-line-height: var(--ippon-size-52);--ippon-typography-display-medium-size: var(--ippon-size-44);--ippon-typography-display-medium-font: var(--ippon-typography-display-font);--ippon-typography-display-medium-weight: var(--ippon-typography-weight-bold);--ippon-typography-display-medium-transform: var(--ippon-typography-uppercase);--ippon-typography-display-small-line-height: var(--ippon-size-44);--ippon-typography-display-small-size: var(--ippon-size-36);--ippon-typography-display-small-font: var(--ippon-typography-display-font);--ippon-typography-display-small-weight: var(--ippon-typography-weight-bold);--ippon-typography-display-small-transform: var(--ippon-typography-uppercase);--ippon-typography-title-1-line-height: var(--ippon-size-52);--ippon-typography-title-1-size: var(--ippon-size-48);--ippon-typography-title-1-font: var(--ippon-typography-font);--ippon-typography-title-1-weight: var(--ippon-typography-weight-semi-bold);--ippon-typography-title-1-transform: var(--ippon-typography-uppercase);--ippon-typography-title-2-line-height: var(--ippon-size-48);--ippon-typography-title-2-size: var(--ippon-size-40);--ippon-typography-title-2-font: var(--ippon-typography-font);--ippon-typography-title-2-weight: var(--ippon-typography-weight-semi-bold);--ippon-typography-title-2-transform: var(--ippon-typography-uppercase);--ippon-typography-title-3-line-height: var(--ippon-size-44);--ippon-typography-title-3-size: var(--ippon-size-32);--ippon-typography-title-3-font: var(--ippon-typography-font);--ippon-typography-title-3-weight: var(--ippon-typography-weight-semi-bold);--ippon-typography-title-3-transform: var(--ippon-typography-uppercase);--ippon-typography-title-4-line-height: var(--ippon-size-40);--ippon-typography-title-4-size: var(--ippon-size-28);--ippon-typography-title-4-font: var(--ippon-typography-font);--ippon-typography-title-4-weight: var(--ippon-typography-weight-semi-bold);--ippon-typography-title-5-line-height: var(--ippon-size-36);--ippon-typography-title-5-size: var(--ippon-size-24);--ippon-typography-title-5-font: var(--ippon-typography-font);--ippon-typography-title-5-weight: var(--ippon-typography-weight-bold);--ippon-typography-body-large-line-height: var(--ippon-size-28);--ippon-typography-body-large-size: var(--ippon-size-20);--ippon-typography-body-large-font: var(--ippon-typography-font);--ippon-typography-body-large-weight: var(--ippon-typography-weight-normal);--ippon-typography-body-large-weight-bold: var(--ippon-typography-weight-bold);--ippon-typography-body-medium-line-height: var(--ippon-size-24);--ippon-typography-body-medium-size: var(--ippon-size-16);--ippon-typography-body-medium-font: var(--ippon-typography-font);--ippon-typography-body-medium-weight: var(--ippon-typography-weight-normal);--ippon-typography-body-medium-weight-bold: var(--ippon-typography-weight-semi-bold);--ippon-typography-body-small-line-height: var(--ippon-size-16);--ippon-typography-body-small-size: var(--ippon-size-12);--ippon-typography-body-small-font: var(--ippon-typography-font);--ippon-typography-body-small-weight: var(--ippon-typography-weight-normal);--ippon-typography-body-small-weight-bold: var(--ippon-typography-weight-bold);--ippon-typography-label-large-line-height: var(--ippon-size-28);--ippon-typography-label-large-size: var(--ippon-size-20);--ippon-typography-label-large-font: var(--ippon-typography-font);--ippon-typography-label-large-weight: var(--ippon-typography-weight-semi-bold);--ippon-typography-label-medium-line-height: var(--ippon-size-20);--ippon-typography-label-medium-size: var(--ippon-size-16);--ippon-typography-label-medium-font: var(--ippon-typography-font);--ippon-typography-label-medium-weight: var(--ippon-typography-weight-semi-bold);--ippon-typography-label-small-line-height: var(--ippon-size-16);--ippon-typography-label-small-size: var(--ippon-size-12);--ippon-typography-label-small-font: var(--ippon-typography-font);--ippon-typography-label-small-weight: var(--ippon-typography-weight-semi-bold)}:root{--ippon-size-2: 0.125rem;--ippon-size-4: 0.25rem;--ippon-size-8: 0.5rem;--ippon-size-10: 0.625rem;--ippon-size-12: 0.75rem;--ippon-size-16: 1rem;--ippon-size-20: 1.25rem;--ippon-size-24: 1.5rem;--ippon-size-28: 1.75rem;--ippon-size-32: 2rem;--ippon-size-36: 2.25rem;--ippon-size-40: 2.5rem;--ippon-size-44: 2.75rem;--ippon-size-48: 3rem;--ippon-size-52: 3.25rem;--ippon-size-56: 3.5rem;--ippon-size-64: 4rem;--ippon-size-886: 55.375rem;--ippon-size-999: 62.4375rem}@keyframes ippon-placeholder-shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}h1.ippon-title.-placeholder,.ippon-title.-l1.-placeholder,h2.ippon-title.-placeholder,.ippon-title.-l2.-placeholder,h3.ippon-title.-placeholder,.ippon-title.-l3.-placeholder,h4.ippon-title.-placeholder,.ippon-title.-l4.-placeholder,h5.ippon-title.-placeholder,.ippon-title.-l5.-placeholder,.ippon-text.-body.-placeholder,.ippon-text.-body.-small.-placeholder,.ippon-text.-body.-large.-placeholder,.ippon-text.-label.-placeholder,.ippon-text.-label.-small.-placeholder,.ippon-text.-label.-large.-placeholder,.ippon-badge.-placeholder{animation:ippon-placeholder-shimmer 2s infinite;background:linear-gradient(90deg, var(--ippon-color-neutral-surface-secondary) 0%, var(--ippon-color-neutral-surface-tertiary) 50%, var(--ippon-color-neutral-surface-secondary) 100%);background-size:62rem 100%;color:rgba(0,0,0,0)}.ippon-badge{--_color-background: var(--ippon-color-brand-surface-primary);--_color-text: var(--ippon-color-brand-text-icon-on-primary);line-height:var(--ippon-typography-label-small-line-height);font-family:var(--ippon-typography-label-small-font);font-size:var(--ippon-typography-label-small-size);font-weight:var(--ippon-typography-label-small-weight);display:inline-flex;gap:var(--ippon-size-8);align-items:center;border-radius:var(--ippon-radius-pill);background-color:var(--_color-background);padding:var(--ippon-size-4) var(--ippon-size-12);vertical-align:middle;color:var(--_color-text)}.ippon-badge--icon{margin:0;border:0;background-color:rgba(0,0,0,0);padding:0;line-height:1;color:inherit;font-size:var(--ippon-size-16)}.ippon-badge--icon.-clickable{cursor:pointer}.ippon-badge--icon.-clickable:hover{background-color:var(--ippon-color-neutral-surface-primary-hover)}.ippon-badge--icon.-clickable:active{background-color:var(--ippon-color-neutral-surface-primary-active)}.ippon-badge--icon.-clickable:hover,.ippon-badge--icon.-clickable:active{border-radius:var(--ippon-radius-pill);box-shadow:var(--ippon-shadow-l1);color:var(--ippon-color-neutral-text-icon-on-primary)}.ippon-badge.-placeholder{min-width:6rem;height:var(--ippon-typography-label-small-line-height)}.ippon-badge.-secondary{--_color-background: var(--ippon-color-brand-surface-secondary);--_color-text: var(--ippon-color-brand-text-icon-on-secondary)}.ippon-badge.-neutral{--_color-background: var(--ippon-color-neutral-surface-tertiary);--_color-text: var(--ippon-color-neutral-text-icon-on-tertiary)}.ippon-badge.-neutral.-secondary{--_color-background: var(--ippon-color-neutral-surface-secondary2);--_color-text: var(--ippon-color-neutral-text-icon-on-secondary)}.ippon-badge.-success{--_color-background: var(--ippon-color-success-surface-primary);--_color-text: var(--ippon-color-success-text-icon-on-primary)}.ippon-badge.-success.-secondary{--_color-background: var(--ippon-color-success-surface-secondary);--_color-text: var(--ippon-color-success-text-icon-on-secondary)}.ippon-badge.-error{--_color-background: var(--ippon-color-error-surface-primary);--_color-text: var(--ippon-color-error-text-icon-on-primary)}.ippon-badge.-error.-secondary{--_color-background: var(--ippon-color-error-surface-secondary);--_color-text: var(--ippon-color-error-text-icon-on-secondary)}.ippon-badge.-warning{--_color-background: var(--ippon-color-warning-surface-primary);--_color-text: var(--ippon-color-warning-text-icon-on-primary)}.ippon-badge.-warning.-secondary{--_color-background: var(--ippon-color-warning-surface-secondary);--_color-text: var(--ippon-color-warning-text-icon-on-secondary)}.ippon-badge.-information{--_color-background: var(--ippon-color-information-2-surface-primary);--_color-text: var(--ippon-color-information-2-text-icon-on-primary)}.ippon-badge.-information.-secondary{--_color-background: var(--ippon-color-information-2-surface-secondary);--_color-text: var(--ippon-color-information-2-text-icon-on-secondary)}@keyframes ippon-button-loading-pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes ippon-button-loading-spin{from{rotate:0deg}to{rotate:360deg}}.ippon-button{line-height:var(--ippon-typography-label-medium-line-height);font-family:var(--ippon-typography-label-medium-font);font-size:var(--ippon-typography-label-medium-size);font-weight:var(--ippon-typography-label-medium-weight);--_color-primary: var(--ippon-color-brand-surface-primary);--_color-primary-hover: var(--ippon-color-brand-surface-primary-hover);--_color-primary-active: var(--ippon-color-brand-surface-primary-active);--_color-secondary: var(--ippon-color-brand-surface-secondary);--_color-secondary-hover: var(--ippon-color-brand-surface-secondary-hover);--_color-secondary-active: var(--ippon-color-brand-surface-secondary-active);--_color-outline: transparent;--_color-text-primary: var(--ippon-color-brand-text-icon-on-primary);--_color-text-secondary: var(--ippon-color-brand-text-icon-on-secondary);--_color-border: var(--ippon-color-brand-border);--_icon-size: var(--ippon-size-20);--_padding-vertical: var(--ippon-size-8);--_padding-horizontal: var(--ippon-size-16);--_background-color: var(--_color-primary);--_border-color: var(--_color-primary);--_color: var(--_color-text-primary);--_border-width: 1px;--_inner-padding-vertical: calc(var(--_padding-vertical) - var(--_border-width));--_inner-padding-horizontal: calc(var(--_padding-horizontal) - var(--_border-width));display:inline-flex;gap:var(--ippon-size-8);align-items:center;border:var(--_border-width) solid var(--_border-color);border-radius:var(--ippon-radius-m);background-color:var(--_background-color);padding:var(--_inner-padding-vertical) var(--_inner-padding-horizontal);vertical-align:middle;color:var(--_color);cursor:pointer}.ippon-button:has(.ippon-button--icon:is(:last-child)){padding-right:var(--_inner-padding-vertical)}.ippon-button:has(.ippon-button--icon:is(:first-child)){padding-left:var(--_inner-padding-vertical)}.ippon-button--icon{line-height:1;font-size:var(--_icon-size);font-weight:400}.ippon-button.-small{line-height:var(--ippon-typography-label-small-line-height);font-family:var(--ippon-typography-label-small-font);font-size:var(--ippon-typography-label-small-size);font-weight:var(--ippon-typography-label-small-weight);--_padding-vertical: var(--ippon-size-8);--_padding-horizontal: var(--ippon-size-12);--_icon-size: var(--ippon-size-16)}.ippon-button.-large{line-height:var(--ippon-typography-label-large-line-height);font-family:var(--ippon-typography-label-large-font);font-size:var(--ippon-typography-label-large-size);font-weight:var(--ippon-typography-label-large-weight);--_padding-vertical: var(--ippon-size-12);--_padding-horizontal: var(--ippon-size-16);--_icon-size: var(--ippon-size-24)}.ippon-button:hover{--_background-color: var(--_color-primary-hover);--_border-color: var(--_color-primary-hover)}.ippon-button:active{--_background-color: var(--_color-primary-active);--_border-color: var(--_color-primary-active)}.ippon-button:disabled:not(.-loading){--_background-color: var(--ippon-color-neutral-200);--_border-color: var(--ippon-color-neutral-200);--_color: var(--ippon-color-neutral-500);cursor:not-allowed}.ippon-button.-secondary{--_background-color: var(--_color-secondary);--_border-color: var(--_color-secondary);--_color: var(--_color-text-secondary)}.ippon-button.-secondary:hover{--_background-color: var(--_color-secondary-hover);--_border-color: var(--_color-secondary-hover)}.ippon-button.-secondary:active{--_background-color: var(--_color-secondary-active);--_border-color: var(--_color-secondary-active)}.ippon-button.-secondary:disabled:not(.-loading){--_background-color: var(--ippon-color-neutral-200);--_border-color: var(--ippon-color-neutral-200);--_color: var(--ippon-color-neutral-500)}.ippon-button.-outline{--_background-color: var(--_color-outline);--_color: var(--_color-text-secondary);--_border-color: var(--_color-border)}.ippon-button.-outline:hover{--_background-color: var(--_color-secondary-hover)}.ippon-button.-outline:active{--_background-color: var(--_color-secondary-active)}.ippon-button.-outline:disabled:not(.-loading){--_background-color: var(--ippon-color-neutral-200);--_border-color: var(--ippon-color-neutral-200);--_color: var(--ippon-color-neutral-500)}.ippon-button.-text{--_background-color: transparent;--_border-color: transparent;--_color: var(--_color-text-secondary)}.ippon-button.-text:hover{--_background-color: var(--_color-secondary-hover);--_border-color: transparent}.ippon-button.-text:active{--_background-color: var(--_color-secondary-active);--_border-color: transparent}.ippon-button.-text:disabled:not(.-loading){--_background-color: transparent;--_border-color: transparent}.ippon-button.-loading{animation:ippon-button-loading-pulse 1.5s ease-in-out infinite;cursor:progress}.ippon-button--icon.-loading{animation:ippon-button-loading-spin 1s linear infinite}.ippon-button.-success{--_color-primary: var(--ippon-color-success-surface-primary);--_color-primary-hover: var(--ippon-color-success-surface-primary-hover);--_color-primary-active: var(--ippon-color-success-surface-primary-active);--_color-secondary: var(--ippon-color-success-surface-secondary);--_color-secondary-hover: var(--ippon-color-success-surface-secondary-hover);--_color-secondary-active: var(--ippon-color-success-surface-secondary-active);--_color-outline: transparent;--_color-text-primary: var(--ippon-color-success-text-icon-on-primary);--_color-text-secondary: var(--ippon-color-success-text-icon-on-secondary);--_color-border: var(--ippon-color-success-border)}.ippon-button.-error{--_color-primary: var(--ippon-color-error-surface-primary);--_color-primary-hover: var(--ippon-color-error-surface-primary-hover);--_color-primary-active: var(--ippon-color-error-surface-primary-active);--_color-secondary: var(--ippon-color-error-surface-secondary);--_color-secondary-hover: var(--ippon-color-error-surface-secondary-hover);--_color-secondary-active: var(--ippon-color-error-surface-secondary-active);--_color-outline: var(--ippon-color-neutral-surface-secondary);--_color-text-primary: var(--ippon-color-error-text-icon-on-primary);--_color-text-secondary: var(--ippon-color-error-text-icon-on-secondary);--_color-border: var(--ippon-color-error-border)}.ippon-button.-information{--_color-primary: var(--ippon-color-information-2-surface-primary);--_color-primary-hover: var(--ippon-color-information-2-surface-primary-hover);--_color-primary-active: var(--ippon-color-information-2-surface-primary-active);--_color-secondary: var(--ippon-color-information-2-surface-secondary);--_color-secondary-hover: var(--ippon-color-information-2-surface-secondary-hover);--_color-secondary-active: var(--ippon-color-information-2-surface-secondary-active);--_color-outline: transparent;--_color-text-primary: var(--ippon-color-information-2-text-icon-on-primary);--_color-text-secondary: var(--ippon-color-information-2-text-icon-on-secondary);--_color-border: var(--ippon-color-information-2-border)}.ippon-button.-warning{--_color-primary: var(--ippon-color-warning-surface-primary);--_color-primary-hover: var(--ippon-color-warning-surface-primary-hover);--_color-primary-active: var(--ippon-color-warning-surface-primary-active);--_color-secondary: var(--ippon-color-warning-surface-secondary);--_color-secondary-hover: var(--ippon-color-warning-surface-secondary-hover);--_color-secondary-active: var(--ippon-color-warning-surface-secondary-active);--_color-outline: var(--ippon-color-neutral-surface-secondary);--_color-text-primary: var(--ippon-color-warning-text-icon-on-primary);--_color-text-secondary: var(--ippon-color-warning-text-icon-on-secondary);--_color-border: var(--ippon-color-warning-border)}.ippon-button.-neutral{--_color-primary: var(--ippon-color-neutral-surface-primary);--_color-primary-hover: var(--ippon-color-neutral-surface-primary-hover);--_color-primary-active: var(--ippon-color-neutral-surface-primary-active);--_color-secondary: var(--ippon-color-neutral-surface-secondary);--_color-secondary-hover: var(--ippon-color-neutral-surface-secondary-hover);--_color-secondary-active: var(--ippon-color-neutral-surface-secondary-active);--_color-outline: var(--ippon-color-neutral-surface-secondary);--_color-text-primary: var(--ippon-color-neutral-text-icon-on-primary);--_color-text-secondary: var(--ippon-color-neutral-text-icon-on-secondary);--_color-border: var(--ippon-color-neutral-border)}.ippon-icon{line-height:1}.ippon-icon.-size-2{font-size:var(--ippon-size-2)}.ippon-icon.-size-4{font-size:var(--ippon-size-4)}.ippon-icon.-size-8{font-size:var(--ippon-size-8)}.ippon-icon.-size-10{font-size:var(--ippon-size-10)}.ippon-icon.-size-12{font-size:var(--ippon-size-12)}.ippon-icon.-size-16{font-size:var(--ippon-size-16)}.ippon-icon.-size-20{font-size:var(--ippon-size-20)}.ippon-icon.-size-24{font-size:var(--ippon-size-24)}.ippon-icon.-size-28{font-size:var(--ippon-size-28)}.ippon-icon.-size-32{font-size:var(--ippon-size-32)}.ippon-icon.-size-36{font-size:var(--ippon-size-36)}.ippon-icon.-size-40{font-size:var(--ippon-size-40)}.ippon-icon.-size-44{font-size:var(--ippon-size-44)}.ippon-icon.-size-48{font-size:var(--ippon-size-48)}.ippon-icon.-size-52{font-size:var(--ippon-size-52)}.ippon-icon.-size-56{font-size:var(--ippon-size-56)}.ippon-icon.-size-64{font-size:var(--ippon-size-64)}.ippon-icon.-size-886{font-size:var(--ippon-size-886)}.ippon-icon.-size-999{font-size:var(--ippon-size-999)}.ippon-icon.-color-neutral-primary{color:var(--ippon-color-neutral-text-icon-primary)}.ippon-icon.-color-neutral-secondary{color:var(--ippon-color-neutral-text-icon-secondary)}.ippon-icon.-color-neutral-on-primary{color:var(--ippon-color-neutral-text-icon-on-primary)}.ippon-icon.-color-neutral-on-secondary{color:var(--ippon-color-neutral-text-icon-on-secondary)}.ippon-icon.-color-neutral-tertiary{color:var(--ippon-color-neutral-text-icon-tertiary)}.ippon-icon.-color-neutral-tertiary-inversed{color:var(--ippon-color-neutral-text-icon-tertiary-inversed)}.ippon-icon.-color-brand-primary{color:var(--ippon-color-brand-text-icon-primary)}.ippon-icon.-color-brand-secondary{color:var(--ippon-color-brand-text-icon-secondary)}.ippon-icon.-color-brand-on-primary{color:var(--ippon-color-brand-text-icon-on-primary)}.ippon-icon.-color-brand-on-secondary{color:var(--ippon-color-brand-text-icon-on-secondary)}.ippon-icon.-color-success-primary{color:var(--ippon-color-success-text-icon-primary)}.ippon-icon.-color-success-secondary{color:var(--ippon-color-success-text-icon-secondary)}.ippon-icon.-color-success-on-primary{color:var(--ippon-color-success-text-icon-on-primary)}.ippon-icon.-color-success-on-secondary{color:var(--ippon-color-success-text-icon-on-secondary)}.ippon-icon.-color-error-primary{color:var(--ippon-color-error-text-icon-primary)}.ippon-icon.-color-error-secondary{color:var(--ippon-color-error-text-icon-secondary)}.ippon-icon.-color-error-on-primary{color:var(--ippon-color-error-text-icon-on-primary)}.ippon-icon.-color-error-on-secondary{color:var(--ippon-color-error-text-icon-on-secondary)}.ippon-icon.-color-warning-primary{color:var(--ippon-color-warning-text-icon-primary)}.ippon-icon.-color-warning-secondary{color:var(--ippon-color-warning-text-icon-secondary)}.ippon-icon.-color-warning-on-primary{color:var(--ippon-color-warning-text-icon-on-primary)}.ippon-icon.-color-warning-on-secondary{color:var(--ippon-color-warning-text-icon-on-secondary)}.ippon-icon.-color-information-primary{color:var(--ippon-color-information-text-icon-primary)}.ippon-icon.-color-information-secondary{color:var(--ippon-color-information-text-icon-secondary)}.ippon-icon.-color-information-on-primary{color:var(--ippon-color-information-text-icon-on-primary)}.ippon-icon.-color-information-on-secondary{color:var(--ippon-color-information-text-icon-on-secondary)}.ippon-icon.-color-information-2-primary{color:var(--ippon-color-information-2-text-icon-primary)}.ippon-icon.-color-information-2-secondary{color:var(--ippon-color-information-2-text-icon-secondary)}.ippon-icon.-color-information-2-on-primary{color:var(--ippon-color-information-2-text-icon-on-primary)}.ippon-icon.-color-information-2-on-secondary{color:var(--ippon-color-information-2-text-icon-on-secondary)}.ippon-meter{--_bar-color: var(--ippon-color-information-2-surface-primary);--_background-color: var(--ippon-color-neutral-surface-tertiary);--_height: var(--ippon-size-8);--ippon-meter-percentage: 0%;display:block;position:relative;background-color:var(--_background-color);width:100%;height:var(--_height);overflow:hidden}.ippon-meter::before{position:absolute;inset:0 auto 0 0;transition:width .3s ease-in-out;border-radius:var(--_border-radius);background-color:var(--_bar-color);width:var(--ippon-meter-percentage);content:""}.ippon-progress{--_bar-color: var(--ippon-color-information-2-surface-primary);--_background-color: var(--ippon-color-neutral-surface-tertiary);--_height: var(--ippon-size-8);--ippon-progress-percentage: 0%;display:block;position:relative;background-color:var(--_background-color);width:100%;height:var(--_height);overflow:hidden}.ippon-progress::before{position:absolute;inset:0 auto 0 0;transition:width .3s ease-in-out;border-radius:var(--_border-radius);background-color:var(--_bar-color);width:var(--ippon-progress-percentage);content:""}.ippon-tab{appearance:none;display:inline-flex;position:relative;gap:var(--ippon-size-4);border:0;background:rgba(0,0,0,0);padding:var(--ippon-size-8) var(--ippon-size-12) var(--ippon-size-10);overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;line-height:var(--ippon-typography-body-medium-line-height);font-family:var(--ippon-typography-body-medium-font);font-size:var(--ippon-typography-body-medium-size);font-weight:var(--ippon-typography-body-medium-weight-bold)}.ippon-tab:hover{color:var(--ippon-color-information-2-text-icon-secondary)}.ippon-tab[aria-selected=true]{color:var(--ippon-color-information-2-text-icon-secondary);cursor:default}.ippon-tab[aria-selected=true]::after{bottom:calc(-1*var(--_height))}.ippon-tab::after{--_height: var(--ippon-size-2);--_double-height: calc(var(--_height) * 2);--_radius: var(--ippon-radius-m);--_padding: var(--ippon-size-8);box-sizing:border-box;display:block;position:absolute;right:var(--_padding);bottom:calc(-1*var(--_double-height));left:var(--_padding);border:var(--_height) solid var(--ippon-color-information-2-surface-primary);border-radius:var(--_radius);height:var(--_double-height);content:""}.ippon-text.-color-neutral-primary{color:var(--ippon-color-neutral-text-icon-primary)}.ippon-text.-color-neutral-secondary{color:var(--ippon-color-neutral-text-icon-secondary)}.ippon-text.-color-neutral-on-primary{color:var(--ippon-color-neutral-text-icon-on-primary)}.ippon-text.-color-neutral-on-secondary{color:var(--ippon-color-neutral-text-icon-on-secondary)}.ippon-text.-color-neutral-tertiary{color:var(--ippon-color-neutral-text-icon-tertiary)}.ippon-text.-color-neutral-tertiary-inversed{color:var(--ippon-color-neutral-text-icon-tertiary-inversed)}.ippon-text.-color-brand-primary{color:var(--ippon-color-brand-text-icon-primary)}.ippon-text.-color-brand-secondary{color:var(--ippon-color-brand-text-icon-secondary)}.ippon-text.-color-brand-on-primary{color:var(--ippon-color-brand-text-icon-on-primary)}.ippon-text.-color-brand-on-secondary{color:var(--ippon-color-brand-text-icon-on-secondary)}.ippon-text.-color-success-primary{color:var(--ippon-color-success-text-icon-primary)}.ippon-text.-color-success-secondary{color:var(--ippon-color-success-text-icon-secondary)}.ippon-text.-color-success-on-primary{color:var(--ippon-color-success-text-icon-on-primary)}.ippon-text.-color-success-on-secondary{color:var(--ippon-color-success-text-icon-on-secondary)}.ippon-text.-color-error-primary{color:var(--ippon-color-error-text-icon-primary)}.ippon-text.-color-error-secondary{color:var(--ippon-color-error-text-icon-secondary)}.ippon-text.-color-error-on-primary{color:var(--ippon-color-error-text-icon-on-primary)}.ippon-text.-color-error-on-secondary{color:var(--ippon-color-error-text-icon-on-secondary)}.ippon-text.-color-warning-primary{color:var(--ippon-color-warning-text-icon-primary)}.ippon-text.-color-warning-secondary{color:var(--ippon-color-warning-text-icon-secondary)}.ippon-text.-color-warning-on-primary{color:var(--ippon-color-warning-text-icon-on-primary)}.ippon-text.-color-warning-on-secondary{color:var(--ippon-color-warning-text-icon-on-secondary)}.ippon-text.-color-information-primary{color:var(--ippon-color-information-text-icon-primary)}.ippon-text.-color-information-secondary{color:var(--ippon-color-information-text-icon-secondary)}.ippon-text.-color-information-on-primary{color:var(--ippon-color-information-text-icon-on-primary)}.ippon-text.-color-information-on-secondary{color:var(--ippon-color-information-text-icon-on-secondary)}.ippon-text.-color-information-2-primary{color:var(--ippon-color-information-2-text-icon-primary)}.ippon-text.-color-information-2-secondary{color:var(--ippon-color-information-2-text-icon-secondary)}.ippon-text.-color-information-2-on-primary{color:var(--ippon-color-information-2-text-icon-on-primary)}.ippon-text.-color-information-2-on-secondary{color:var(--ippon-color-information-2-text-icon-on-secondary)}.ippon-text{margin:0;padding:0}.ippon-text.-placeholder{min-width:10rem}.ippon-text.-body{line-height:var(--ippon-typography-body-medium-line-height);font-family:var(--ippon-typography-body-medium-font);font-size:var(--ippon-typography-body-medium-size);font-weight:var(--ippon-typography-body-medium-weight)}.ippon-text.-body.-placeholder{height:var(--ippon-typography-body-medium-line-height)}.ippon-text.-body.-bold{line-height:var(--ippon-typography-body-medium-line-height);font-family:var(--ippon-typography-body-medium-font);font-size:var(--ippon-typography-body-medium-size);font-weight:var(--ippon-typography-body-medium-weight-bold)}.ippon-text.-body.-small{line-height:var(--ippon-typography-body-small-line-height);font-family:var(--ippon-typography-body-small-font);font-size:var(--ippon-typography-body-small-size);font-weight:var(--ippon-typography-body-small-weight)}.ippon-text.-body.-small.-placeholder{height:var(--ippon-typography-body-small-line-height)}.ippon-text.-body.-small.-bold{line-height:var(--ippon-typography-body-small-line-height);font-family:var(--ippon-typography-body-small-font);font-size:var(--ippon-typography-body-small-size);font-weight:var(--ippon-typography-body-small-weight-bold)}.ippon-text.-body.-large{line-height:var(--ippon-typography-body-large-line-height);font-family:var(--ippon-typography-body-large-font);font-size:var(--ippon-typography-body-large-size);font-weight:var(--ippon-typography-body-large-weight)}.ippon-text.-body.-large.-placeholder{height:var(--ippon-typography-body-large-line-height)}.ippon-text.-body.-large.-bold{line-height:var(--ippon-typography-body-large-line-height);font-family:var(--ippon-typography-body-large-font);font-size:var(--ippon-typography-body-large-size);font-weight:var(--ippon-typography-body-large-weight-bold)}.ippon-text.-label{line-height:var(--ippon-typography-label-medium-line-height);font-family:var(--ippon-typography-label-medium-font);font-size:var(--ippon-typography-label-medium-size);font-weight:var(--ippon-typography-label-medium-weight)}.ippon-text.-label.-placeholder{height:var(--ippon-typography-label-medium-line-height)}.ippon-text.-label.-small{line-height:var(--ippon-typography-label-small-line-height);font-family:var(--ippon-typography-label-small-font);font-size:var(--ippon-typography-label-small-size);font-weight:var(--ippon-typography-label-small-weight)}.ippon-text.-label.-small.-placeholder{height:var(--ippon-typography-label-small-line-height)}.ippon-text.-label.-large{line-height:var(--ippon-typography-label-large-line-height);font-family:var(--ippon-typography-label-large-font);font-size:var(--ippon-typography-label-large-size);font-weight:var(--ippon-typography-label-large-weight)}.ippon-text.-label.-large.-placeholder{height:var(--ippon-typography-label-large-line-height)}.ippon-title{margin:0}.ippon-title.-placeholder{min-width:12rem}h1.ippon-title,.ippon-title.-l1{text-transform:var(--ippon-typography-title-1-transform);line-height:var(--ippon-typography-title-1-line-height);font-family:var(--ippon-typography-title-1-font);font-size:var(--ippon-typography-title-1-size);font-weight:var(--ippon-typography-title-1-weight)}h1.ippon-title.-placeholder,.ippon-title.-l1.-placeholder{height:var(--ippon-typography-title-1-line-height)}h2.ippon-title,.ippon-title.-l2{text-transform:var(--ippon-typography-title-2-transform);line-height:var(--ippon-typography-title-2-line-height);font-family:var(--ippon-typography-title-2-font);font-size:var(--ippon-typography-title-2-size);font-weight:var(--ippon-typography-title-2-weight)}h2.ippon-title.-placeholder,.ippon-title.-l2.-placeholder{height:var(--ippon-typography-title-2-line-height)}h3.ippon-title,.ippon-title.-l3{text-transform:var(--ippon-typography-title-3-transform);line-height:var(--ippon-typography-title-3-line-height);font-family:var(--ippon-typography-title-3-font);font-size:var(--ippon-typography-title-3-size);font-weight:var(--ippon-typography-title-3-weight)}h3.ippon-title.-placeholder,.ippon-title.-l3.-placeholder{height:var(--ippon-typography-title-3-line-height)}h4.ippon-title,.ippon-title.-l4{text-transform:var(--ippon-typography-title-4-transform);line-height:var(--ippon-typography-title-4-line-height);font-family:var(--ippon-typography-title-4-font);font-size:var(--ippon-typography-title-4-size);font-weight:var(--ippon-typography-title-4-weight)}h4.ippon-title.-placeholder,.ippon-title.-l4.-placeholder{height:var(--ippon-typography-title-4-line-height)}h5.ippon-title,.ippon-title.-l5{text-transform:var(--ippon-typography-title-5-transform);line-height:var(--ippon-typography-title-5-line-height);font-family:var(--ippon-typography-title-5-font);font-size:var(--ippon-typography-title-5-size);font-weight:var(--ippon-typography-title-5-weight)}h5.ippon-title.-placeholder,.ippon-title.-l5.-placeholder{height:var(--ippon-typography-title-5-line-height)}.ippon-title-display{margin:0}h1.ippon-title-display,.ippon-title-display.-large{text-transform:var(--ippon-typography-display-large-transform);line-height:var(--ippon-typography-display-large-line-height);font-family:var(--ippon-typography-display-large-font);font-size:var(--ippon-typography-display-large-size);font-weight:var(--ippon-typography-display-large-weight)}h2.ippon-title-display,.ippon-title-display.-medium{text-transform:var(--ippon-typography-display-medium-transform);line-height:var(--ippon-typography-display-medium-line-height);font-family:var(--ippon-typography-display-medium-font);font-size:var(--ippon-typography-display-medium-size);font-weight:var(--ippon-typography-display-medium-weight)}h3.ippon-title-display,.ippon-title-display.-small{text-transform:var(--ippon-typography-display-small-transform);line-height:var(--ippon-typography-display-small-line-height);font-family:var(--ippon-typography-display-small-font);font-size:var(--ippon-typography-display-small-size);font-weight:var(--ippon-typography-display-small-weight)}.ippon-import-file{--_border-width: 2px;--_padding-inline: calc(var(--ippon-size-32) - var(--_border-width));--_icon-background-color: var(--ippon-color-neutral-surface-secondary);--_icon-color: var(--ippon-color-neutral-text-icon-on-secondary);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;border:var(--_border-width) dashed var(--ippon-color-neutral-border);border-radius:var(--ippon-radius-m);padding:var(--_padding-inline);cursor:pointer}.ippon-import-file--input{display:none}.ippon-import-file--icon{border-radius:var(--ippon-radius-pill);background-color:var(--_icon-background-color);padding:var(--ippon-size-12);line-height:0;color:var(--_icon-color)}.ippon-import-file:hover,.ippon-import-file.-dragover{--_border-width: 1px;--_icon-background-color: var(--ippon-color-information-2-surface-primary);--_icon-color: var(--ippon-color-information-2-text-icon-on-primary);border:var(--_border-width) dashed var(--ippon-color-information-2-border);background-color:var(--ippon-color-information-2-surface-secondary)}.ippon-toggle{--_padding: var(--ippon-size-10);--_animation-duration: 200ms;--_animation-easing: ease-in-out;box-sizing:border-box;border:1px solid var(--ippon-color-neutral-border);border-radius:var(--ippon-radius-l);background-color:var(--ippon-color-neutral-surface-primary);color:var(--ippon-color-neutral-text-icon-on-primary)}.ippon-toggle--header,.ippon-toggle--button{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;text-align:left}.ippon-toggle.-open .ippon-toggle--icon{rotate:90deg}.ippon-toggle--button{flex:1;gap:var(--_padding);align-self:stretch;border:none;background:none;padding:var(--_padding);cursor:pointer}.ippon-toggle--icon{transition:rotate var(--_animation-duration) var(--_animation-easing);line-height:1;font-size:var(--ippon-size-16)}.ippon-toggle--title{flex:1}.ippon-toggle--actions{display:flex;gap:var(--_padding);align-items:center;padding:var(--_padding) var(--_padding) var(--_padding) 0}.ippon-toggle--body{display:flex;flex-direction:column;transition:height var(--_animation-duration) var(--_animation-easing);height:0;overflow:hidden}.ippon-toggle--content{border-top:1px solid var(--ippon-color-neutral-border);padding:var(--ippon-size-12)}.ippon-toggle.-open .ippon-toggle--body{height:calc-size(max-content,size)}.ippon-card,.ippon-button-card{--_border-width: 0px;--_padding-v: var(--ippon-size-16);--_padding--inner-v: calc(var(--_padding-v) - var(--_border-width));--_padding-h: var(--ippon-size-16);--_padding--inner-h: calc(var(--_padding-h) - var(--_border-width));box-sizing:border-box;border:var(--_border-width) solid var(--ippon-color-neutral-border);border-radius:var(--ippon-radius-l);background-color:var(--ippon-color-neutral-surface-primary);padding:var(--_padding-v) var(--_padding-h);color:var(--ippon-color-neutral-text-icon-on-primary)}.-shadow-l1.ippon-card,.-shadow-l1.ippon-button-card{box-shadow:var(--ippon-shadow-l1)}.-shadow-l2.ippon-card,.-shadow-l2.ippon-button-card{box-shadow:var(--ippon-shadow-l2)}.-shadow-l3.ippon-card,.-shadow-l3.ippon-button-card{box-shadow:var(--ippon-shadow-l3)}.-shadow-l4.ippon-card,.-shadow-l4.ippon-button-card{box-shadow:var(--ippon-shadow-l4)}.-shadow-l5.ippon-card,.-shadow-l5.ippon-button-card{box-shadow:var(--ippon-shadow-l5)}.-shadow-l6.ippon-card,.-shadow-l6.ippon-button-card{box-shadow:var(--ippon-shadow-l6)}.-border.ippon-card,.-border.ippon-button-card{--_border-width: 1px}.-small.ippon-card,.-small.ippon-button-card{--_padding-h: var(--ippon-size-8);--_padding-v: var(--ippon-size-8)}.-large.ippon-card,.-large.ippon-button-card{--_padding-v: var(--ippon-size-20);--_padding-h: var(--ippon-size-24)}.ippon-button-card{display:inline-block;cursor:pointer}.ippon-button-card:hover{background-color:var(--ippon-color-neutral-surface-primary-hover)}.ippon-button-card:active{background-color:var(--ippon-color-neutral-surface-primary-active)}.ippon-button-card.-full-width{display:block;width:100%}.ippon-container{container-type:inline-size}.ippon-grid{display:grid}.ippon-grid.-gap-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-999{gap:var(--ippon-size-999)}@media(min-width: 320px){.ippon-grid.-gap-mobile-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-mobile-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-mobile-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-mobile-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-mobile-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-mobile-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-mobile-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-mobile-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-mobile-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-mobile-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-mobile-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-mobile-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-mobile-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-mobile-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-mobile-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-mobile-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-mobile-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-mobile-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-mobile-999{gap:var(--ippon-size-999)}}@media(min-width: 680px){.ippon-grid.-gap-tab-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-tab-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-tab-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-tab-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-tab-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-tab-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-tab-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-tab-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-tab-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-tab-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-tab-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-tab-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-tab-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-tab-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-tab-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-tab-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-tab-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-tab-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-tab-999{gap:var(--ippon-size-999)}}@media(min-width: 1024px){.ippon-grid.-gap-desktop-s-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-desktop-s-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-desktop-s-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-desktop-s-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-desktop-s-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-desktop-s-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-desktop-s-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-desktop-s-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-desktop-s-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-desktop-s-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-desktop-s-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-desktop-s-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-desktop-s-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-desktop-s-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-desktop-s-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-desktop-s-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-desktop-s-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-desktop-s-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-desktop-s-999{gap:var(--ippon-size-999)}}@media(min-width: 1280px){.ippon-grid.-gap-desktop-m-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-desktop-m-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-desktop-m-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-desktop-m-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-desktop-m-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-desktop-m-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-desktop-m-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-desktop-m-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-desktop-m-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-desktop-m-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-desktop-m-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-desktop-m-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-desktop-m-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-desktop-m-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-desktop-m-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-desktop-m-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-desktop-m-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-desktop-m-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-desktop-m-999{gap:var(--ippon-size-999)}}@container (min-width: 224px){.ippon-grid.-gap-s-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-s-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-s-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-s-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-s-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-s-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-s-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-s-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-s-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-s-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-s-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-s-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-s-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-s-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-s-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-s-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-s-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-s-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-s-999{gap:var(--ippon-size-999)}}@container (min-width: 584px){.ippon-grid.-gap-m-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-m-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-m-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-m-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-m-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-m-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-m-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-m-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-m-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-m-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-m-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-m-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-m-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-m-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-m-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-m-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-m-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-m-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-m-999{gap:var(--ippon-size-999)}}@container (min-width: 928px){.ippon-grid.-gap-l-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-l-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-l-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-l-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-l-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-l-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-l-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-l-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-l-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-l-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-l-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-l-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-l-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-l-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-l-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-l-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-l-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-l-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-l-999{gap:var(--ippon-size-999)}}@container (min-width: 1184px){.ippon-grid.-gap-xl-2{gap:var(--ippon-size-2)}.ippon-grid.-gap-xl-4{gap:var(--ippon-size-4)}.ippon-grid.-gap-xl-8{gap:var(--ippon-size-8)}.ippon-grid.-gap-xl-10{gap:var(--ippon-size-10)}.ippon-grid.-gap-xl-12{gap:var(--ippon-size-12)}.ippon-grid.-gap-xl-16{gap:var(--ippon-size-16)}.ippon-grid.-gap-xl-20{gap:var(--ippon-size-20)}.ippon-grid.-gap-xl-24{gap:var(--ippon-size-24)}.ippon-grid.-gap-xl-28{gap:var(--ippon-size-28)}.ippon-grid.-gap-xl-32{gap:var(--ippon-size-32)}.ippon-grid.-gap-xl-36{gap:var(--ippon-size-36)}.ippon-grid.-gap-xl-40{gap:var(--ippon-size-40)}.ippon-grid.-gap-xl-44{gap:var(--ippon-size-44)}.ippon-grid.-gap-xl-48{gap:var(--ippon-size-48)}.ippon-grid.-gap-xl-52{gap:var(--ippon-size-52)}.ippon-grid.-gap-xl-56{gap:var(--ippon-size-56)}.ippon-grid.-gap-xl-64{gap:var(--ippon-size-64)}.ippon-grid.-gap-xl-886{gap:var(--ippon-size-886)}.ippon-grid.-gap-xl-999{gap:var(--ippon-size-999)}}.ippon-grid.-media-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-media-12{grid-template-columns:repeat(12, 1fr)}.ippon-grid.-container-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-container-12{grid-template-columns:repeat(12, 1fr)}.ippon-grid--slot.-col-1{grid-column:span 1}.ippon-grid--slot.-col-2{grid-column:span 2}.ippon-grid--slot.-col-3{grid-column:span 3}.ippon-grid--slot.-col-4{grid-column:span 4}.ippon-grid--slot.-col-5{grid-column:span 5}.ippon-grid--slot.-col-6{grid-column:span 6}.ippon-grid--slot.-col-7{grid-column:span 7}.ippon-grid--slot.-col-8{grid-column:span 8}.ippon-grid--slot.-col-9{grid-column:span 9}.ippon-grid--slot.-col-10{grid-column:span 10}.ippon-grid--slot.-col-11{grid-column:span 11}.ippon-grid--slot.-col-12{grid-column:span 12}@media(min-width: 320px){.ippon-grid--slot.-col-mobile-1{grid-column:span 1}.ippon-grid--slot.-col-mobile-2{grid-column:span 2}.ippon-grid--slot.-col-mobile-3{grid-column:span 3}.ippon-grid--slot.-col-mobile-4{grid-column:span 4}.ippon-grid--slot.-col-mobile-5{grid-column:span 5}.ippon-grid--slot.-col-mobile-6{grid-column:span 6}.ippon-grid--slot.-col-mobile-7{grid-column:span 7}.ippon-grid--slot.-col-mobile-8{grid-column:span 8}.ippon-grid--slot.-col-mobile-9{grid-column:span 9}.ippon-grid--slot.-col-mobile-10{grid-column:span 10}.ippon-grid--slot.-col-mobile-11{grid-column:span 11}.ippon-grid--slot.-col-mobile-12{grid-column:span 12}}@media(min-width: 320px){.ippon-grid.-media-mobile-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-media-mobile-12{grid-template-columns:repeat(12, 1fr)}}@media(min-width: 680px){.ippon-grid--slot.-col-tab-1{grid-column:span 1}.ippon-grid--slot.-col-tab-2{grid-column:span 2}.ippon-grid--slot.-col-tab-3{grid-column:span 3}.ippon-grid--slot.-col-tab-4{grid-column:span 4}.ippon-grid--slot.-col-tab-5{grid-column:span 5}.ippon-grid--slot.-col-tab-6{grid-column:span 6}.ippon-grid--slot.-col-tab-7{grid-column:span 7}.ippon-grid--slot.-col-tab-8{grid-column:span 8}.ippon-grid--slot.-col-tab-9{grid-column:span 9}.ippon-grid--slot.-col-tab-10{grid-column:span 10}.ippon-grid--slot.-col-tab-11{grid-column:span 11}.ippon-grid--slot.-col-tab-12{grid-column:span 12}}@media(min-width: 680px){.ippon-grid.-media-tab-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-media-tab-12{grid-template-columns:repeat(12, 1fr)}}@media(min-width: 1024px){.ippon-grid--slot.-col-desktop-s-1{grid-column:span 1}.ippon-grid--slot.-col-desktop-s-2{grid-column:span 2}.ippon-grid--slot.-col-desktop-s-3{grid-column:span 3}.ippon-grid--slot.-col-desktop-s-4{grid-column:span 4}.ippon-grid--slot.-col-desktop-s-5{grid-column:span 5}.ippon-grid--slot.-col-desktop-s-6{grid-column:span 6}.ippon-grid--slot.-col-desktop-s-7{grid-column:span 7}.ippon-grid--slot.-col-desktop-s-8{grid-column:span 8}.ippon-grid--slot.-col-desktop-s-9{grid-column:span 9}.ippon-grid--slot.-col-desktop-s-10{grid-column:span 10}.ippon-grid--slot.-col-desktop-s-11{grid-column:span 11}.ippon-grid--slot.-col-desktop-s-12{grid-column:span 12}}@media(min-width: 1024px){.ippon-grid.-media-desktop-s-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-media-desktop-s-12{grid-template-columns:repeat(12, 1fr)}}@media(min-width: 1280px){.ippon-grid--slot.-col-desktop-m-1{grid-column:span 1}.ippon-grid--slot.-col-desktop-m-2{grid-column:span 2}.ippon-grid--slot.-col-desktop-m-3{grid-column:span 3}.ippon-grid--slot.-col-desktop-m-4{grid-column:span 4}.ippon-grid--slot.-col-desktop-m-5{grid-column:span 5}.ippon-grid--slot.-col-desktop-m-6{grid-column:span 6}.ippon-grid--slot.-col-desktop-m-7{grid-column:span 7}.ippon-grid--slot.-col-desktop-m-8{grid-column:span 8}.ippon-grid--slot.-col-desktop-m-9{grid-column:span 9}.ippon-grid--slot.-col-desktop-m-10{grid-column:span 10}.ippon-grid--slot.-col-desktop-m-11{grid-column:span 11}.ippon-grid--slot.-col-desktop-m-12{grid-column:span 12}}@media(min-width: 1280px){.ippon-grid.-media-desktop-m-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-media-desktop-m-12{grid-template-columns:repeat(12, 1fr)}}@container (min-width: 224px){.ippon-grid--slot.-col-s-1{grid-column:span 1}.ippon-grid--slot.-col-s-2{grid-column:span 2}.ippon-grid--slot.-col-s-3{grid-column:span 3}.ippon-grid--slot.-col-s-4{grid-column:span 4}.ippon-grid--slot.-col-s-5{grid-column:span 5}.ippon-grid--slot.-col-s-6{grid-column:span 6}.ippon-grid--slot.-col-s-7{grid-column:span 7}.ippon-grid--slot.-col-s-8{grid-column:span 8}.ippon-grid--slot.-col-s-9{grid-column:span 9}.ippon-grid--slot.-col-s-10{grid-column:span 10}.ippon-grid--slot.-col-s-11{grid-column:span 11}.ippon-grid--slot.-col-s-12{grid-column:span 12}}@container (min-width: 224px){.ippon-grid.-container-s-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-container-s-12{grid-template-columns:repeat(12, 1fr)}}@container (min-width: 584px){.ippon-grid--slot.-col-m-1{grid-column:span 1}.ippon-grid--slot.-col-m-2{grid-column:span 2}.ippon-grid--slot.-col-m-3{grid-column:span 3}.ippon-grid--slot.-col-m-4{grid-column:span 4}.ippon-grid--slot.-col-m-5{grid-column:span 5}.ippon-grid--slot.-col-m-6{grid-column:span 6}.ippon-grid--slot.-col-m-7{grid-column:span 7}.ippon-grid--slot.-col-m-8{grid-column:span 8}.ippon-grid--slot.-col-m-9{grid-column:span 9}.ippon-grid--slot.-col-m-10{grid-column:span 10}.ippon-grid--slot.-col-m-11{grid-column:span 11}.ippon-grid--slot.-col-m-12{grid-column:span 12}}@container (min-width: 584px){.ippon-grid.-container-m-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-container-m-12{grid-template-columns:repeat(12, 1fr)}}@container (min-width: 928px){.ippon-grid--slot.-col-l-1{grid-column:span 1}.ippon-grid--slot.-col-l-2{grid-column:span 2}.ippon-grid--slot.-col-l-3{grid-column:span 3}.ippon-grid--slot.-col-l-4{grid-column:span 4}.ippon-grid--slot.-col-l-5{grid-column:span 5}.ippon-grid--slot.-col-l-6{grid-column:span 6}.ippon-grid--slot.-col-l-7{grid-column:span 7}.ippon-grid--slot.-col-l-8{grid-column:span 8}.ippon-grid--slot.-col-l-9{grid-column:span 9}.ippon-grid--slot.-col-l-10{grid-column:span 10}.ippon-grid--slot.-col-l-11{grid-column:span 11}.ippon-grid--slot.-col-l-12{grid-column:span 12}}@container (min-width: 928px){.ippon-grid.-container-l-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-container-l-12{grid-template-columns:repeat(12, 1fr)}}@container (min-width: 1184px){.ippon-grid--slot.-col-xl-1{grid-column:span 1}.ippon-grid--slot.-col-xl-2{grid-column:span 2}.ippon-grid--slot.-col-xl-3{grid-column:span 3}.ippon-grid--slot.-col-xl-4{grid-column:span 4}.ippon-grid--slot.-col-xl-5{grid-column:span 5}.ippon-grid--slot.-col-xl-6{grid-column:span 6}.ippon-grid--slot.-col-xl-7{grid-column:span 7}.ippon-grid--slot.-col-xl-8{grid-column:span 8}.ippon-grid--slot.-col-xl-9{grid-column:span 9}.ippon-grid--slot.-col-xl-10{grid-column:span 10}.ippon-grid--slot.-col-xl-11{grid-column:span 11}.ippon-grid--slot.-col-xl-12{grid-column:span 12}}@container (min-width: 1184px){.ippon-grid.-container-xl-4{grid-template-columns:repeat(4, 1fr)}.ippon-grid.-container-xl-12{grid-template-columns:repeat(12, 1fr)}}.ippon-header{display:flex;gap:var(--ippon-size-32);align-items:center;border-bottom:1px solid var(--ippon-color-neutral-border);background-color:var(--ippon-color-neutral-surface-primary);padding:var(--ippon-size-32) var(--ippon-size-48)}.ippon-h-space{display:flex;flex-direction:row;margin:0;padding:0;list-style:none}.ippon-h-space.-gap-2{gap:var(--ippon-size-2)}.ippon-h-space.-gap-4{gap:var(--ippon-size-4)}.ippon-h-space.-gap-8{gap:var(--ippon-size-8)}.ippon-h-space.-gap-10{gap:var(--ippon-size-10)}.ippon-h-space.-gap-12{gap:var(--ippon-size-12)}.ippon-h-space.-gap-16{gap:var(--ippon-size-16)}.ippon-h-space.-gap-20{gap:var(--ippon-size-20)}.ippon-h-space.-gap-24{gap:var(--ippon-size-24)}.ippon-h-space.-gap-28{gap:var(--ippon-size-28)}.ippon-h-space.-gap-32{gap:var(--ippon-size-32)}.ippon-h-space.-gap-36{gap:var(--ippon-size-36)}.ippon-h-space.-gap-40{gap:var(--ippon-size-40)}.ippon-h-space.-gap-44{gap:var(--ippon-size-44)}.ippon-h-space.-gap-48{gap:var(--ippon-size-48)}.ippon-h-space.-gap-52{gap:var(--ippon-size-52)}.ippon-h-space.-gap-56{gap:var(--ippon-size-56)}.ippon-h-space.-gap-64{gap:var(--ippon-size-64)}.ippon-h-space.-gap-886{gap:var(--ippon-size-886)}.ippon-h-space.-gap-999{gap:var(--ippon-size-999)}.ippon-h-space.-wrap{flex-wrap:wrap}.ippon-h-space.-space-between{justify-content:space-between}.ippon-h-space.-top{align-items:flex-start}.ippon-h-space.-middle{align-items:center}.ippon-h-space.-bottom{align-items:flex-end}.ippon-h-space.-left{justify-content:flex-start}.ippon-h-space.-center{justify-content:center}.ippon-h-space.-right{justify-content:flex-end}.ippon-h-space--slot.-expand{flex:1}.ippon-modal{--_margin-horizontal: var(--ippon-size-24);--_witdh-space-to-remove: calc(var(--_margin-horizontal) * 2);box-sizing:border-box;flex-direction:column;gap:var(--ippon-size-24);border:0;border-radius:var(--ippon-radius-m);background-color:var(--ippon-color-neutral-surface-primary);padding:var(--ippon-size-24) 0;width:calc(100% - var(--_witdh-space-to-remove));max-width:var(--ippon-size-886);color:var(--ippon-color-neutral-text-icon-on-primary)}.ippon-modal::backdrop{background-color:color-mix(in srgb, var(--ippon-color-neutral-999) 70%, transparent)}.ippon-modal:open{display:flex}.ippon-modal--header{padding:0 var(--ippon-size-24)}.ippon-modal--separator{box-sizing:border-box;margin:0 var(--ippon-size-24);border-top:1px solid var(--ippon-color-neutral-border);border-right:0;border-bottom:0;border-left:0}.ippon-modal--actions{border-top:1px solid var(--ippon-color-neutral-border);border-bottom:1px solid var(--ippon-color-neutral-border);background-color:var(--ippon-color-neutral-surface-secondary);padding:var(--ippon-size-16) var(--ippon-size-24);color:var(--ippon-color-neutral-text-icon-on-secondary)}.ippon-modal--body{padding:0 var(--ippon-size-24);overflow:auto}.ippon-modal--footer{padding:0 var(--ippon-size-24)}.ippon-v-space{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.ippon-v-space.-gap-2{gap:var(--ippon-size-2)}.ippon-v-space.-gap-4{gap:var(--ippon-size-4)}.ippon-v-space.-gap-8{gap:var(--ippon-size-8)}.ippon-v-space.-gap-10{gap:var(--ippon-size-10)}.ippon-v-space.-gap-12{gap:var(--ippon-size-12)}.ippon-v-space.-gap-16{gap:var(--ippon-size-16)}.ippon-v-space.-gap-20{gap:var(--ippon-size-20)}.ippon-v-space.-gap-24{gap:var(--ippon-size-24)}.ippon-v-space.-gap-28{gap:var(--ippon-size-28)}.ippon-v-space.-gap-32{gap:var(--ippon-size-32)}.ippon-v-space.-gap-36{gap:var(--ippon-size-36)}.ippon-v-space.-gap-40{gap:var(--ippon-size-40)}.ippon-v-space.-gap-44{gap:var(--ippon-size-44)}.ippon-v-space.-gap-48{gap:var(--ippon-size-48)}.ippon-v-space.-gap-52{gap:var(--ippon-size-52)}.ippon-v-space.-gap-56{gap:var(--ippon-size-56)}.ippon-v-space.-gap-64{gap:var(--ippon-size-64)}.ippon-v-space.-gap-886{gap:var(--ippon-size-886)}.ippon-v-space.-gap-999{gap:var(--ippon-size-999)}.ippon-v-space.-left{align-items:flex-start}.ippon-v-space.-center{align-items:center}.ippon-v-space.-justify{align-items:stretch}.ippon-v-space.-right{align-items:flex-end}.ippon-v-space--slot.-left{align-self:flex-start}.ippon-v-space--slot.-center{align-self:center}.ippon-v-space--slot.-justify{align-self:stretch}.ippon-v-space--slot.-right{align-self:flex-end}.ippon-layout{display:flex;position:fixed;inset:0;flex-direction:column}.ippon-layout--header{flex-shrink:0;background-color:var(--ippon-color-neutral-surface-primary);color:var(--ippon-color-neutral-text-icon-on-primary)}.ippon-layout--body{flex:1;background-color:var(--ippon-color-neutral-surface-secondary);padding:var(--ippon-size-32) var(--ippon-size-48);overflow-y:auto;color:var(--ippon-color-neutral-text-icon-on-secondary)}/*# sourceMappingURL=tikui.css.map */

package/dist/tikui.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/token/color/color/_base.scss","../src/token/color/color/_semantic.scss","../src/token/color/color/_brand.scss","../src/token/color/color/_information.scss","../src/token/color/color/_information-2.scss","../src/token/color/color/_success.scss","../src/token/color/color/_error.scss","../src/token/color/color/_warning.scss","../src/token/color/color/_neutral.scss","../src/token/radius/_radius.scss","../src/token/shadow/_shadow.scss","../src/token/typography/_typography.scss","../src/token/_size.scss","../src/quark/_placeholder.scss","../src/atom/badge/_badge.scss","../src/quark/_typography.scss","../src/atom/button/_button.scss","../src/atom/icon/_icon.scss","../src/quark/_font.scss","../src/atom/meter/_meter.scss","../src/atom/progress/_progress.scss","../src/atom/tab/_tab.scss","../src/atom/text/_text.scss","../src/atom/title/_title.scss","../src/atom/title-display/_title-display.scss","../src/molecule/import-file/_import-file.scss","../src/molecule/toggle/_toggle.scss","../src/organism/_abstract-card.scss","../src/quark/_shadow.scss","../src/organism/button-card/_button-card.scss","../src/organism/container/_container.scss","../src/organism/grid/_grid.scss","../src/quark/_gap.scss","../src/organism/header/_header.scss","../src/organism/h-space/_h-space.scss","../src/organism/modal/_modal.scss","../src/organism/v-space/_v-space.scss","../src/template/layout/_layout.scss"],"names":[],"mappings":"AAAA,MACE,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,iCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,kCACA,+BACA,+BACA,+BACA,+BACA,+BACA,+BACA,+BACA,+BACA,+BC/DF,MACE,8BACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,gCACA,8DACA,8DACA,8DACA,8DACA,8DACA,8DACA,8DACA,8DACA,8DACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,+DACA,+DACA,+DACA,+DACA,+DACA,+DACA,+DACA,+DACA,+DACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDACA,yDCnEF,MACE,oEACA,0EACA,2EACA,sEACA,4EACA,6EACA,sEACA,wEACA,uEACA,2EACA,2DCXF,MACE,8EACA,oFACA,qFACA,gFACA,sFACA,uFACA,gFACA,kFACA,6EACA,qFACA,qECXF,MACE,kFACA,wFACA,yFACA,oFACA,0FACA,2FACA,oFACA,sFACA,+EACA,yFACA,yECXF,MACE,uEACA,6EACA,8EACA,yEACA,+EACA,gFACA,yEACA,2EACA,yEACA,8EACA,8DCXF,MACE,qEACA,2EACA,4EACA,uEACA,6EACA,8EACA,uEACA,yEACA,uEACA,4EACA,4DCXF,MACE,sEACA,4EACA,6EACA,wEACA,8EACA,+EACA,wEACA,0EACA,yEACA,6EACA,6DCXF,MACE,oEACA,4EACA,6EACA,wEACA,8EACA,+EACA,yEACA,uEACA,6EACA,8EACA,wEACA,0EACA,yEACA,kFACA,2EACA,6EACA,4EACA,6DClBF,MACE,0BACA,2CACA,yCACA,wCACA,sCACA,sCCJF,MACE,kLAGA,mLAGA,oLAGA,qLAGA,sLAGA,sLChBF,MACE,qEACA,iDACA,sCACA,yCACA,oCACA,wCAGA,mEACA,4DACA,4EACA,6EACA,8EAGA,oEACA,6DACA,6EACA,8EACA,+EAGA,mEACA,4DACA,4EACA,6EACA,8EAGA,6DACA,sDACA,8DACA,4EACA,wEAGA,6DACA,sDACA,8DACA,4EACA,wEAGA,6DACA,sDACA,8DACA,4EACA,wEAGA,6DACA,sDACA,8DACA,4EAGA,6DACA,sDACA,8DACA,uEAGA,gEACA,yDACA,iEACA,4EACA,+EAGA,iEACA,0DACA,kEACA,6EACA,qFAGA,gEACA,yDACA,iEACA,4EACA,+EAGA,iEACA,0DACA,kEACA,gFAGA,kEACA,2DACA,mEACA,iFAGA,iEACA,0DACA,kEACA,gFCjGF,MAEI,idCNJ,qCACE,GACE,8BAGF,KACE,8BAIJ,qhBACE,gDACA,uLAMA,2BACA,oBChBF,aACE,8DACA,6DCwIA,4DACA,qDACA,mDACA,uDDvIA,oBACA,wBACA,mBACA,uCACA,0CACA,iDACA,sBACA,yBAEA,mBACE,SACA,SACA,+BACA,UACA,cACA,cACA,+BAEA,8BACE,eAEA,oCACE,kEAGF,qCACE,mEAGF,yEAEE,uCACA,kCACA,sDAKN,0BACE,eDvBF,OCyBmC,gDAGnC,wBACE,gEACA,+DAGF,sBACE,iEACA,gEAEA,iCACE,mEACA,iEAIJ,sBACE,gEACA,+DAEA,iCACE,kEACA,iEAIJ,oBACE,8DACA,6DAEA,+BACE,gEACA,+DAIJ,sBACE,gEACA,+DAEA,iCACE,kEACA,iEAIJ,0BACE,sEACA,qEAEA,qCACE,wEACA,uEEtGN,sCACE,QAEE,UAGF,IACE,YAIJ,qCACE,KACE,YAGF,GACE,eAIJ,cD+GE,6DACA,sDACA,oDACA,wDC/GA,2DACA,uEACA,yEACA,+DACA,2EACA,6EACA,8BACA,qEACA,yEACA,iDACA,mCACA,yCACA,4CACA,2CACA,uCACA,qCACA,qBACA,iFACA,qFAEA,oBACA,wBACA,mBACA,uDACA,oCACA,0CACA,wEACA,sBACA,oBACA,eAEA,uDACE,6CAGF,wDACE,4CAGF,oBACE,cACA,4BACA,gBAGF,qBDsEA,4DACA,qDACA,mDACA,uDCtEE,yCACA,4CACA,mCAGF,qBDgDA,4DACA,qDACA,mDACA,uDChDE,0CACA,4CACA,mCAGF,oBACE,iDACA,6CAGF,qBACE,kDACA,8CAGF,sCACE,oDACA,gDACA,yCAEA,mBAGF,yBACE,6CACA,yCACA,uCAEA,+BACE,mDACA,+CAGF,gCACE,oDACA,gDAGF,iDACE,oDACA,gDACA,yCAIJ,uBACE,2CACA,uCACA,sCAEA,6BACE,mDAGF,8BACE,oDAGF,+CACE,oDACA,gDACA,yCAIJ,oBACE,iCACA,6BACA,uCAEA,0BACE,mDACA,6BAGF,2BACE,oDACA,6BAGF,4CACE,iCACA,6BAIJ,uBACE,+DACA,gBAGF,6BACE,uDAGF,uBACE,6DACA,yEACA,2EACA,iEACA,6EACA,+EACA,8BACA,uEACA,2EACA,mDAGF,qBACE,2DACA,uEACA,yEACA,+DACA,2EACA,6EACA,+DACA,qEACA,yEACA,iDAGF,2BACE,mEACA,+EACA,iFACA,uEACA,mFACA,qFACA,8BACA,6EACA,iFACA,yDAGF,uBACE,6DACA,yEACA,2EACA,iEACA,6EACA,+EACA,+DACA,uEACA,2EACA,mDAGF,uBACE,6DACA,yEACA,2EACA,iEACA,6EACA,+EACA,+DACA,uEACA,2EACA,mDC7OJ,YACE,cCoBE,oBACE,8BADF,oBACE,8BADF,oBACE,8BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,qBACE,+BADF,sBACE,gCADF,sBACE,gCArBJ,mCACE,mDADF,qCACE,qDADF,sCACE,sDADF,wCACE,wDADF,oCACE,oDADF,6CACE,6DADF,iCACE,iDADF,mCACE,mDADF,oCACE,oDADF,sCACE,sDADF,mCACE,mDADF,qCACE,qDADF,sCACE,sDADF,wCACE,wDADF,iCACE,iDADF,mCACE,mDADF,oCACE,oDADF,sCACE,sDADF,mCACE,mDADF,qCACE,qDADF,sCACE,sDADF,wCACE,wDADF,uCACE,uDADF,yCACE,yDADF,0CACE,0DADF,4CACE,4DADF,yCACE,yDADF,2CACE,2DADF,4CACE,4DADF,8CACE,8DCJJ,aACE,+DACA,iEACA,+BACA,6BAEA,cACA,kBACA,0CACA,WACA,sBACA,gBAEA,qBACE,kBACA,iBACA,iCACA,oCACA,mCACA,oCACA,WCpBJ,gBACE,+DACA,iEACA,+BACA,gCAEA,cACA,kBACA,0CACA,WACA,sBACA,gBAEA,wBACE,kBACA,iBACA,iCACA,oCACA,mCACA,uCACA,WClBJ,WACE,gBACA,oBACA,kBACA,wBACA,SACA,yBACA,sEACA,gBACA,qBACA,cACA,eN+EA,4DACA,qDACA,mDACA,4DM9EA,iBACE,2DAGF,+BACE,2DACA,eAGF,sCACE,+BAGF,kBACE,+BACA,2CACA,iCACA,gCAEA,sBACA,cACA,kBACA,sBACA,sCACA,qBACA,6EACA,6BACA,6BACA,WH1CF,mCACE,mDADF,qCACE,qDADF,sCACE,sDADF,wCACE,wDADF,oCACE,oDADF,6CACE,6DADF,iCACE,iDADF,mCACE,mDADF,oCACE,oDADF,sCACE,sDADF,mCACE,mDADF,qCACE,qDADF,sCACE,sDADF,wCACE,wDADF,iCACE,iDADF,mCACE,mDADF,oCACE,oDADF,sCACE,sDADF,mCACE,mDADF,qCACE,qDADF,sCACE,sDADF,wCACE,wDADF,uCACE,uDADF,yCACE,yDADF,0CACE,0DADF,4CACE,4DADF,yCACE,yDADF,2CACE,2DADF,4CACE,4DADF,8CACE,0EIGF,SACA,UAEA,yBACE,gBAGF,kBP8EA,4DACA,qDACA,mDACA,uDO9EE,+BTQF,OSPqC,gDAGnC,wBPuEF,4DACA,qDACA,mDACA,4DOtEE,yBPuFF,2DACA,oDACA,kDACA,sDOvFI,sCTHJ,OSIuC,+CAGnC,+BPgFJ,2DACA,oDACA,kDACA,2DO9EE,yBPmCF,2DACA,oDACA,kDACA,sDOnCI,sCTfJ,OSgBuC,+CAGnC,+BP4BJ,2DACA,oDACA,kDACA,2DOzBA,mBPoFA,6DACA,sDACA,oDACA,wDOpFE,gCT5BF,OS6BqC,iDAGnC,0BPoFF,4DACA,qDACA,mDACA,uDOpFI,uCTnCJ,OSoCuC,gDAIrC,0BP8DF,4DACA,qDACA,mDACA,uDO9DI,uCT3CJ,OS4CuC,gDChDzC,aACE,SAEA,0BACE,gBAnBF,gCRqBA,yDACA,wDACA,iDACA,+CACA,mDQhBA,0DVUA,OUSiC,4CA5BjC,gCR6BA,yDACA,wDACA,iDACA,+CACA,mDQxBA,0DVUA,OUiBiC,4CApCjC,gCRqCA,yDACA,wDACA,iDACA,+CACA,mDQhCA,0DVUA,OUyBiC,4CA5CjC,gCR6CA,yDACA,wDACA,iDACA,+CACA,mDQxCA,0DVUA,OUiCiC,4CApDjC,gCRqDA,yDACA,wDACA,iDACA,+CACA,mDQhDA,0DVUA,OUyCiC,4CCvDnC,qBACE,SAPA,mDTFA,+DACA,8DACA,uDACA,qDACA,yDSFA,oDTMA,gEACA,+DACA,wDACA,sDACA,0DSVA,mDTcA,+DACA,8DACA,uDACA,qDACA,yDUvBF,mBACE,qBACA,qEACA,uEACA,iEAEA,sBACA,aACA,sBACA,mBACA,uBACA,qEACA,oCACA,+BACA,eAEA,0BACE,aAGF,yBACE,uCACA,+CACA,6BACA,cACA,yBAGF,sDAEE,qBACA,2EACA,qEAEA,2EACA,oECnCJ,cACE,iCACA,6BACA,iCAEA,sBACA,mDACA,oCACA,4DACA,sDAEA,4CAEE,sBACA,aACA,mBACA,mBACA,gBAGF,wCACE,aAGF,sBACE,OACA,oBACA,mBACA,YACA,gBACA,wBACA,eAGF,oBACE,sEACA,cACA,+BAGF,qBACE,OAGF,uBACE,aACA,oBACA,mBACA,0DAGF,oBACE,aACA,sBACA,sEACA,SACA,gBAGF,uBACE,uDACA,6BAGF,wCACE,mCC/DJ,+BACE,qBACA,mCACA,oEACA,mCACA,oEAEA,sBACA,oEACA,oCACA,4DACA,4CACA,sDCXA,qDACE,kCADF,qDACE,kCADF,qDACE,kCADF,qDACE,kCADF,qDACE,kCADF,qDACE,kCDcF,+CACE,qBAGF,6CACE,kCACA,kCAGF,6CACE,mCACA,mCE1BJ,mBAGE,qBACA,eAEA,yBACE,kEAGF,0BACE,mEAGF,+BACE,cACA,WCnBJ,iBACE,2BC8CF,YACE,aC3CE,mBACE,wBADF,mBACE,wBADF,mBACE,wBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,oBACE,yBADF,qBACE,0BADF,qBACE,0BAOF,yBAEI,0BACE,wBADF,0BACE,wBADF,0BACE,wBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,2BACE,yBADF,4BACE,0BADF,4BACE,2BAHN,yBAEI,uBACE,wBADF,uBACE,wBADF,uBACE,wBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,wBACE,yBADF,yBACE,0BADF,yBACE,2BAHN,0BAEI,6BACE,wBADF,6BACE,wBADF,6BACE,wBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,+BACE,0BADF,+BACE,2BAHN,0BAEI,6BACE,wBADF,6BACE,wBADF,6BACE,wBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,8BACE,yBADF,+BACE,0BADF,+BACE,2BASN,8BAEI,qBACE,wBADF,qBACE,wBADF,qBACE,wBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,uBACE,0BADF,uBACE,2BAHN,8BAEI,qBACE,wBADF,qBACE,wBADF,qBACE,wBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,uBACE,0BADF,uBACE,2BAHN,8BAEI,qBACE,wBADF,qBACE,wBADF,qBACE,wBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,uBACE,0BADF,uBACE,2BAHN,+BAEI,sBACE,wBADF,sBACE,wBADF,sBACE,wBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,wBACE,0BADF,wBACE,2BDpBR,qBACE,qCADF,sBACE,sCADF,yBACE,qCADF,0BACE,sCAwBA,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,yBACE,mBADF,0BACE,oBADF,0BACE,oBADF,0BACE,oBA4BA,yBArBF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,gCACE,mBADF,iCACE,oBADF,iCACE,oBADF,iCACE,qBAyBF,yBA/CF,4BACE,qCADF,6BACE,uCAyCE,yBArBF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,6BACE,mBADF,8BACE,oBADF,8BACE,oBADF,8BACE,qBAyBF,yBA/CF,yBACE,qCADF,0BACE,uCAyCE,0BArBF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,oCACE,oBADF,oCACE,oBADF,oCACE,qBAyBF,0BA/CF,+BACE,qCADF,gCACE,uCAyCE,0BArBF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,mCACE,mBADF,oCACE,oBADF,oCACE,oBADF,oCACE,qBAyBF,0BA/CF,+BACE,qCADF,gCACE,uCAqDE,8BAjCF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,4BACE,oBADF,4BACE,oBADF,4BACE,qBAqCF,8BA3DF,2BACE,qCADF,4BACE,uCAqDE,8BAjCF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,4BACE,oBADF,4BACE,oBADF,4BACE,qBAqCF,8BA3DF,2BACE,qCADF,4BACE,uCAqDE,8BAjCF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,2BACE,mBADF,4BACE,oBADF,4BACE,oBADF,4BACE,qBAqCF,8BA3DF,2BACE,qCADF,4BACE,uCAqDE,+BAjCF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,4BACE,mBADF,6BACE,oBADF,6BACE,oBADF,6BACE,qBAqCF,+BA3DF,4BACE,qCADF,6BACE,uCErBJ,cACE,aACA,yBACA,mBACA,0DACA,4DACA,kDCJF,eACE,aACA,mBACA,SACA,UACA,gBFFE,sBACE,wBADF,sBACE,wBADF,sBACE,wBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,wBACE,0BADF,wBACE,0BEKJ,qBACE,eAGF,8BACE,8BAGF,oBACE,uBAGF,uBACE,mBAGF,uBACE,qBAGF,qBACE,2BAGF,uBACE,uBAGF,sBACE,yBAIA,6BACE,OCzCN,aACE,2CACA,8DAEA,sBACA,sBACA,yBACA,SACA,oCACA,4DACA,+BACA,iDACA,gCACA,sDAEA,uBACE,qFAGF,kBACE,aAGF,qBA1BA,+BA8BA,wBACE,sBACA,8BACA,uDACA,eACA,gBACA,cAGF,sBACE,uDACA,0DACA,8DACA,kDACA,wDAGF,mBA/CA,+BAkDE,cAGF,qBArDA,+BCCF,eACE,aACA,sBACA,SACA,UACA,gBJFE,sBACE,wBADF,sBACE,wBADF,sBACE,wBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,uBACE,yBADF,wBACE,0BADF,wBACE,0BIKJ,qBACE,uBAGF,uBACE,mBAGF,wBACE,oBAGF,sBACE,qBAIA,2BACE,sBAGF,6BACE,kBAGF,8BACE,mBAGF,4BACE,oBCzCN,cACE,aACA,eACA,QACA,sBAEA,sBACE,cACA,4DACA,sDAGF,oBACE,OACA,8DACA,kDACA,gBACA","file":"tikui.css","sourcesContent":[":root {\n  --ippon-color-brand-klein-100: #e6eeff;\n  --ippon-color-brand-klein-200: #ccd9ff;\n  --ippon-color-brand-klein-300: #99afff;\n  --ippon-color-brand-klein-400: #6685ff;\n  --ippon-color-brand-klein-500: #335cff;\n  --ippon-color-brand-klein-600: #003cdc;\n  --ippon-color-brand-klein-700: #002eb3;\n  --ippon-color-brand-klein-800: #001e8a;\n  --ippon-color-brand-klein-900: #001052;\n  --ippon-color-blue-100: #f1f9ff;\n  --ippon-color-blue-200: #eaf6ff;\n  --ippon-color-blue-300: #d4edff;\n  --ippon-color-blue-400: #74c4ff;\n  --ippon-color-blue-500: #68b0e6;\n  --ippon-color-blue-600: #5d9dcc;\n  --ippon-color-blue-700: #467699;\n  --ippon-color-blue-800: #345873;\n  --ippon-color-blue-900: #294559;\n  --ippon-color-blue-2-100: #e6f4ff;\n  --ippon-color-blue-2-200: #c7e4ff;\n  --ippon-color-blue-2-300: #94c9ff;\n  --ippon-color-blue-2-400: #60acff;\n  --ippon-color-blue-2-500: #2e90fa;\n  --ippon-color-blue-2-600: #0072c6;\n  --ippon-color-blue-2-700: #005c9e;\n  --ippon-color-blue-2-800: #004578;\n  --ippon-color-blue-2-900: #002e52;\n  --ippon-color-green-100: #ebf8f0;\n  --ippon-color-green-200: #e2f5e9;\n  --ippon-color-green-300: #c2ead1;\n  --ippon-color-green-400: #3bba6a;\n  --ippon-color-green-500: #35a75f;\n  --ippon-color-green-600: #2f9555;\n  --ippon-color-green-700: #267d47;\n  --ippon-color-green-800: #1e6338;\n  --ippon-color-green-900: #164d2b;\n  --ippon-color-yellow-100: #fff8ec;\n  --ippon-color-yellow-200: #fff5e3;\n  --ippon-color-yellow-300: #ffe9c5;\n  --ippon-color-yellow-400: #ffb945;\n  --ippon-color-yellow-500: #e6a73e;\n  --ippon-color-yellow-600: #cc9437;\n  --ippon-color-yellow-700: #bf8b34;\n  --ippon-color-yellow-800: #996f29;\n  --ippon-color-yellow-900: #73531f;\n  --ippon-color-orange-100: #fff0eb;\n  --ippon-color-orange-200: #ffe9e1;\n  --ippon-color-orange-300: #ffd1c0;\n  --ippon-color-orange-400: #ff6b34;\n  --ippon-color-orange-500: #e6602f;\n  --ippon-color-orange-600: #cc562a;\n  --ippon-color-orange-700: #bf5027;\n  --ippon-color-orange-800: #99401f;\n  --ippon-color-orange-900: #733017;\n  --ippon-color-red-100: #fce9e9;\n  --ippon-color-red-200: #fbdede;\n  --ippon-color-red-300: #ffc9c9;\n  --ippon-color-red-400: #e12121;\n  --ippon-color-red-500: #cb1e1e;\n  --ippon-color-red-600: #b41a1a;\n  --ippon-color-red-700: #a91919;\n  --ippon-color-red-800: #871414;\n  --ippon-color-red-900: #650f0f;\n}\n",":root {\n  --ippon-color-neutral-0: #fff;\n  --ippon-color-neutral-50: #fbfcfe;\n  --ippon-color-neutral-100: #f9fafb;\n  --ippon-color-neutral-150: #eff2f6;\n  --ippon-color-neutral-200: #eaecf0;\n  --ippon-color-neutral-300: #d0d5dd;\n  --ippon-color-neutral-400: #98a2b3;\n  --ippon-color-neutral-500: #667085;\n  --ippon-color-neutral-600: #475467;\n  --ippon-color-neutral-700: #344054;\n  --ippon-color-neutral-800: #1d2939;\n  --ippon-color-neutral-900: #191919;\n  --ippon-color-neutral-999: #000;\n  --ippon-color-default-100: var(--ippon-color-brand-klein-100);\n  --ippon-color-default-200: var(--ippon-color-brand-klein-200);\n  --ippon-color-default-300: var(--ippon-color-brand-klein-300);\n  --ippon-color-default-400: var(--ippon-color-brand-klein-400);\n  --ippon-color-default-500: var(--ippon-color-brand-klein-500);\n  --ippon-color-default-600: var(--ippon-color-brand-klein-600);\n  --ippon-color-default-700: var(--ippon-color-brand-klein-700);\n  --ippon-color-default-800: var(--ippon-color-brand-klein-800);\n  --ippon-color-default-900: var(--ippon-color-brand-klein-900);\n  --ippon-color-positive-100: var(--ippon-color-green-100);\n  --ippon-color-positive-200: var(--ippon-color-green-200);\n  --ippon-color-positive-300: var(--ippon-color-green-300);\n  --ippon-color-positive-400: var(--ippon-color-green-400);\n  --ippon-color-positive-500: var(--ippon-color-green-500);\n  --ippon-color-positive-600: var(--ippon-color-green-600);\n  --ippon-color-positive-700: var(--ippon-color-green-700);\n  --ippon-color-positive-800: var(--ippon-color-green-800);\n  --ippon-color-positive-900: var(--ippon-color-green-900);\n  --ippon-color-information-100: var(--ippon-color-blue-100);\n  --ippon-color-information-200: var(--ippon-color-blue-200);\n  --ippon-color-information-300: var(--ippon-color-blue-300);\n  --ippon-color-information-400: var(--ippon-color-blue-400);\n  --ippon-color-information-500: var(--ippon-color-blue-500);\n  --ippon-color-information-600: var(--ippon-color-blue-600);\n  --ippon-color-information-700: var(--ippon-color-blue-700);\n  --ippon-color-information-800: var(--ippon-color-blue-800);\n  --ippon-color-information-900: var(--ippon-color-blue-900);\n  --ippon-color-information-2-100: var(--ippon-color-blue-2-100);\n  --ippon-color-information-2-200: var(--ippon-color-blue-2-200);\n  --ippon-color-information-2-300: var(--ippon-color-blue-2-300);\n  --ippon-color-information-2-400: var(--ippon-color-blue-2-400);\n  --ippon-color-information-2-500: var(--ippon-color-blue-2-500);\n  --ippon-color-information-2-600: var(--ippon-color-blue-2-600);\n  --ippon-color-information-2-700: var(--ippon-color-blue-2-700);\n  --ippon-color-information-2-800: var(--ippon-color-blue-2-800);\n  --ippon-color-information-2-900: var(--ippon-color-blue-2-900);\n  --ippon-color-negative-100: var(--ippon-color-red-100);\n  --ippon-color-negative-200: var(--ippon-color-red-200);\n  --ippon-color-negative-300: var(--ippon-color-red-300);\n  --ippon-color-negative-400: var(--ippon-color-red-400);\n  --ippon-color-negative-500: var(--ippon-color-red-500);\n  --ippon-color-negative-600: var(--ippon-color-red-600);\n  --ippon-color-negative-700: var(--ippon-color-red-700);\n  --ippon-color-negative-800: var(--ippon-color-red-800);\n  --ippon-color-negative-900: var(--ippon-color-red-900);\n  --ippon-color-warning-100: var(--ippon-color-yellow-100);\n  --ippon-color-warning-200: var(--ippon-color-yellow-200);\n  --ippon-color-warning-300: var(--ippon-color-yellow-300);\n  --ippon-color-warning-400: var(--ippon-color-yellow-400);\n  --ippon-color-warning-500: var(--ippon-color-yellow-500);\n  --ippon-color-warning-600: var(--ippon-color-yellow-600);\n  --ippon-color-warning-700: var(--ippon-color-yellow-700);\n  --ippon-color-warning-800: var(--ippon-color-yellow-800);\n  --ippon-color-warning-900: var(--ippon-color-yellow-900);\n}\n",":root {\n  --ippon-color-brand-surface-primary: var(--ippon-color-default-700);\n  --ippon-color-brand-surface-primary-hover: var(--ippon-color-default-800);\n  --ippon-color-brand-surface-primary-active: var(--ippon-color-default-900);\n  --ippon-color-brand-surface-secondary: var(--ippon-color-default-100);\n  --ippon-color-brand-surface-secondary-hover: var(--ippon-color-default-200);\n  --ippon-color-brand-surface-secondary-active: var(--ippon-color-default-300);\n  --ippon-color-brand-text-icon-primary: var(--ippon-color-default-600);\n  --ippon-color-brand-text-icon-secondary: var(--ippon-color-default-800);\n  --ippon-color-brand-text-icon-on-primary: var(--ippon-color-neutral-0);\n  --ippon-color-brand-text-icon-on-secondary: var(--ippon-color-default-700);\n  --ippon-color-brand-border: var(--ippon-color-default-500);\n}\n",":root {\n  --ippon-color-information-surface-primary: var(--ippon-color-information-700);\n  --ippon-color-information-surface-primary-hover: var(--ippon-color-information-800);\n  --ippon-color-information-surface-primary-active: var(--ippon-color-information-900);\n  --ippon-color-information-surface-secondary: var(--ippon-color-information-100);\n  --ippon-color-information-surface-secondary-hover: var(--ippon-color-information-200);\n  --ippon-color-information-surface-secondary-active: var(--ippon-color-information-300);\n  --ippon-color-information-text-icon-primary: var(--ippon-color-information-600);\n  --ippon-color-information-text-icon-secondary: var(--ippon-color-information-800);\n  --ippon-color-information-text-icon-on-primary: var(--ippon-color-neutral-0);\n  --ippon-color-information-text-icon-on-secondary: var(--ippon-color-information-700);\n  --ippon-color-information-border: var(--ippon-color-information-500);\n}\n",":root {\n  --ippon-color-information-2-surface-primary: var(--ippon-color-information-2-600);\n  --ippon-color-information-2-surface-primary-hover: var(--ippon-color-information-2-700);\n  --ippon-color-information-2-surface-primary-active: var(--ippon-color-information-2-800);\n  --ippon-color-information-2-surface-secondary: var(--ippon-color-information-2-100);\n  --ippon-color-information-2-surface-secondary-hover: var(--ippon-color-information-2-200);\n  --ippon-color-information-2-surface-secondary-active: var(--ippon-color-information-2-300);\n  --ippon-color-information-2-text-icon-primary: var(--ippon-color-information-2-500);\n  --ippon-color-information-2-text-icon-secondary: var(--ippon-color-information-2-600);\n  --ippon-color-information-2-text-icon-on-primary: var(--ippon-color-neutral-0);\n  --ippon-color-information-2-text-icon-on-secondary: var(--ippon-color-information-2-700);\n  --ippon-color-information-2-border: var(--ippon-color-information-2-500);\n}\n",":root {\n  --ippon-color-success-surface-primary: var(--ippon-color-positive-700);\n  --ippon-color-success-surface-primary-hover: var(--ippon-color-positive-800);\n  --ippon-color-success-surface-primary-active: var(--ippon-color-positive-900);\n  --ippon-color-success-surface-secondary: var(--ippon-color-positive-100);\n  --ippon-color-success-surface-secondary-hover: var(--ippon-color-positive-200);\n  --ippon-color-success-surface-secondary-active: var(--ippon-color-positive-300);\n  --ippon-color-success-text-icon-primary: var(--ippon-color-positive-600);\n  --ippon-color-success-text-icon-secondary: var(--ippon-color-positive-800);\n  --ippon-color-success-text-icon-on-primary: var(--ippon-color-neutral-0);\n  --ippon-color-success-text-icon-on-secondary: var(--ippon-color-positive-700);\n  --ippon-color-success-border: var(--ippon-color-positive-500);\n}\n",":root {\n  --ippon-color-error-surface-primary: var(--ippon-color-negative-700);\n  --ippon-color-error-surface-primary-hover: var(--ippon-color-negative-800);\n  --ippon-color-error-surface-primary-active: var(--ippon-color-negative-900);\n  --ippon-color-error-surface-secondary: var(--ippon-color-negative-100);\n  --ippon-color-error-surface-secondary-hover: var(--ippon-color-negative-200);\n  --ippon-color-error-surface-secondary-active: var(--ippon-color-negative-300);\n  --ippon-color-error-text-icon-primary: var(--ippon-color-negative-600);\n  --ippon-color-error-text-icon-secondary: var(--ippon-color-negative-800);\n  --ippon-color-error-text-icon-on-primary: var(--ippon-color-neutral-0);\n  --ippon-color-error-text-icon-on-secondary: var(--ippon-color-negative-700);\n  --ippon-color-error-border: var(--ippon-color-negative-500);\n}\n",":root {\n  --ippon-color-warning-surface-primary: var(--ippon-color-warning-700);\n  --ippon-color-warning-surface-primary-hover: var(--ippon-color-warning-800);\n  --ippon-color-warning-surface-primary-active: var(--ippon-color-warning-900);\n  --ippon-color-warning-surface-secondary: var(--ippon-color-warning-100);\n  --ippon-color-warning-surface-secondary-hover: var(--ippon-color-warning-200);\n  --ippon-color-warning-surface-secondary-active: var(--ippon-color-warning-300);\n  --ippon-color-warning-text-icon-primary: var(--ippon-color-warning-600);\n  --ippon-color-warning-text-icon-secondary: var(--ippon-color-warning-800);\n  --ippon-color-warning-text-icon-on-primary: var(--ippon-color-neutral-0);\n  --ippon-color-warning-text-icon-on-secondary: var(--ippon-color-warning-700);\n  --ippon-color-warning-border: var(--ippon-color-warning-500);\n}\n",":root {\n  --ippon-color-neutral-surface-primary: var(--ippon-color-neutral-0);\n  --ippon-color-neutral-surface-primary-hover: var(--ippon-color-neutral-100);\n  --ippon-color-neutral-surface-primary-active: var(--ippon-color-neutral-200);\n  --ippon-color-neutral-surface-secondary: var(--ippon-color-neutral-100);\n  --ippon-color-neutral-surface-secondary-hover: var(--ippon-color-neutral-200);\n  --ippon-color-neutral-surface-secondary-active: var(--ippon-color-neutral-300);\n  --ippon-color-neutral-surface-secondary2: var(--ippon-color-neutral-150);\n  --ippon-color-neutral-surface-tertiary: var(--ippon-color-neutral-300);\n  --ippon-color-neutral-surface-tertiary-hover: var(--ippon-color-neutral-400);\n  --ippon-color-neutral-surface-tertiary-active: var(--ippon-color-neutral-500);\n  --ippon-color-neutral-text-icon-primary: var(--ippon-color-neutral-900);\n  --ippon-color-neutral-text-icon-secondary: var(--ippon-color-neutral-800);\n  --ippon-color-neutral-text-icon-tertiary: var(--ippon-color-neutral-600);\n  --ippon-color-neutral-text-icon-tertiary-inversed: var(--ippon-color-neutral-400);\n  --ippon-color-neutral-text-icon-on-primary: var(--ippon-color-neutral-900);\n  --ippon-color-neutral-text-icon-on-secondary: var(--ippon-color-neutral-700);\n  --ippon-color-neutral-text-icon-on-tertiary: var(--ippon-color-neutral-900);\n  --ippon-color-neutral-border: var(--ippon-color-neutral-300);\n}\n",":root {\n  --ippon-radius-round: 50%;\n  --ippon-radius-pill: var(--ippon-size-999);\n  --ippon-radius-xxl: var(--ippon-size-16);\n  --ippon-radius-xl: var(--ippon-size-12);\n  --ippon-radius-l: var(--ippon-size-8);\n  --ippon-radius-m: var(--ippon-size-4);\n}\n","$shadow-levels: 1, 2, 3, 4, 5, 6;\n\n:root {\n  --ippon-shadow-l1:\n    0px 0px 2px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),\n    0px 2px 4px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent);\n  --ippon-shadow-l2:\n    0px 0px 4px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),\n    0px 4px 8px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);\n  --ippon-shadow-l3:\n    0px 0px 6px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),\n    0px 8px 16px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);\n  --ippon-shadow-l4:\n    0px 0px 8px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),\n    0px 10px 20px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);\n  --ippon-shadow-l5:\n    0px 0px 10px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),\n    0px 12px 24px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);\n  --ippon-shadow-l6:\n    0px 0px 12px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),\n    0px 16px 32px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);\n}\n","@use '../../function/conversion';\n\n:root {\n  --ippon-typography-display-font: 'Saira Extra Condensed', sans-serif;\n  --ippon-typography-font: 'Open Sans', sans-serif;\n  --ippon-typography-weight-normal: 400;\n  --ippon-typography-weight-semi-bold: 600;\n  --ippon-typography-weight-bold: 700;\n  --ippon-typography-uppercase: uppercase;\n\n  // Display Large\n  --ippon-typography-display-large-line-height: var(--ippon-size-64);\n  --ippon-typography-display-large-size: var(--ippon-size-56);\n  --ippon-typography-display-large-font: var(--ippon-typography-display-font);\n  --ippon-typography-display-large-weight: var(--ippon-typography-weight-bold);\n  --ippon-typography-display-large-transform: var(--ippon-typography-uppercase);\n\n  // Display Medium\n  --ippon-typography-display-medium-line-height: var(--ippon-size-52);\n  --ippon-typography-display-medium-size: var(--ippon-size-44);\n  --ippon-typography-display-medium-font: var(--ippon-typography-display-font);\n  --ippon-typography-display-medium-weight: var(--ippon-typography-weight-bold);\n  --ippon-typography-display-medium-transform: var(--ippon-typography-uppercase);\n\n  // Display Small\n  --ippon-typography-display-small-line-height: var(--ippon-size-44);\n  --ippon-typography-display-small-size: var(--ippon-size-36);\n  --ippon-typography-display-small-font: var(--ippon-typography-display-font);\n  --ippon-typography-display-small-weight: var(--ippon-typography-weight-bold);\n  --ippon-typography-display-small-transform: var(--ippon-typography-uppercase);\n\n  // Title 1\n  --ippon-typography-title-1-line-height: var(--ippon-size-52);\n  --ippon-typography-title-1-size: var(--ippon-size-48);\n  --ippon-typography-title-1-font: var(--ippon-typography-font);\n  --ippon-typography-title-1-weight: var(--ippon-typography-weight-semi-bold);\n  --ippon-typography-title-1-transform: var(--ippon-typography-uppercase);\n\n  // Title 2\n  --ippon-typography-title-2-line-height: var(--ippon-size-48);\n  --ippon-typography-title-2-size: var(--ippon-size-40);\n  --ippon-typography-title-2-font: var(--ippon-typography-font);\n  --ippon-typography-title-2-weight: var(--ippon-typography-weight-semi-bold);\n  --ippon-typography-title-2-transform: var(--ippon-typography-uppercase);\n\n  // Title 3\n  --ippon-typography-title-3-line-height: var(--ippon-size-44);\n  --ippon-typography-title-3-size: var(--ippon-size-32);\n  --ippon-typography-title-3-font: var(--ippon-typography-font);\n  --ippon-typography-title-3-weight: var(--ippon-typography-weight-semi-bold);\n  --ippon-typography-title-3-transform: var(--ippon-typography-uppercase);\n\n  // Title 4\n  --ippon-typography-title-4-line-height: var(--ippon-size-40);\n  --ippon-typography-title-4-size: var(--ippon-size-28);\n  --ippon-typography-title-4-font: var(--ippon-typography-font);\n  --ippon-typography-title-4-weight: var(--ippon-typography-weight-semi-bold);\n\n  // Title 5\n  --ippon-typography-title-5-line-height: var(--ippon-size-36);\n  --ippon-typography-title-5-size: var(--ippon-size-24);\n  --ippon-typography-title-5-font: var(--ippon-typography-font);\n  --ippon-typography-title-5-weight: var(--ippon-typography-weight-bold);\n\n  // Body large\n  --ippon-typography-body-large-line-height: var(--ippon-size-28);\n  --ippon-typography-body-large-size: var(--ippon-size-20);\n  --ippon-typography-body-large-font: var(--ippon-typography-font);\n  --ippon-typography-body-large-weight: var(--ippon-typography-weight-normal);\n  --ippon-typography-body-large-weight-bold: var(--ippon-typography-weight-bold);\n\n  // Body medium\n  --ippon-typography-body-medium-line-height: var(--ippon-size-24);\n  --ippon-typography-body-medium-size: var(--ippon-size-16);\n  --ippon-typography-body-medium-font: var(--ippon-typography-font);\n  --ippon-typography-body-medium-weight: var(--ippon-typography-weight-normal);\n  --ippon-typography-body-medium-weight-bold: var(--ippon-typography-weight-semi-bold);\n\n  // Body small\n  --ippon-typography-body-small-line-height: var(--ippon-size-16);\n  --ippon-typography-body-small-size: var(--ippon-size-12);\n  --ippon-typography-body-small-font: var(--ippon-typography-font);\n  --ippon-typography-body-small-weight: var(--ippon-typography-weight-normal);\n  --ippon-typography-body-small-weight-bold: var(--ippon-typography-weight-bold);\n\n  // Label large\n  --ippon-typography-label-large-line-height: var(--ippon-size-28);\n  --ippon-typography-label-large-size: var(--ippon-size-20);\n  --ippon-typography-label-large-font: var(--ippon-typography-font);\n  --ippon-typography-label-large-weight: var(--ippon-typography-weight-semi-bold);\n\n  // Label medium\n  --ippon-typography-label-medium-line-height: var(--ippon-size-20);\n  --ippon-typography-label-medium-size: var(--ippon-size-16);\n  --ippon-typography-label-medium-font: var(--ippon-typography-font);\n  --ippon-typography-label-medium-weight: var(--ippon-typography-weight-semi-bold);\n\n  // Label small\n  --ippon-typography-label-small-line-height: var(--ippon-size-16);\n  --ippon-typography-label-small-size: var(--ippon-size-12);\n  --ippon-typography-label-small-font: var(--ippon-typography-font);\n  --ippon-typography-label-small-weight: var(--ippon-typography-weight-semi-bold);\n}\n","@use '../function/conversion';\n\n$sizes: 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 64, 886, 999;\n\n:root {\n  @each $size in $sizes {\n    --ippon-size-#{$size}: #{conversion.to-rem($size * 1px)};\n  }\n}\n","@keyframes ippon-placeholder-shimmer {\n  0% {\n    background-position: -1000px 0;\n  }\n\n  100% {\n    background-position: 1000px 0;\n  }\n}\n\n%ippon-placeholder {\n  animation: ippon-placeholder-shimmer 2s infinite;\n  background: linear-gradient(\n    90deg,\n    var(--ippon-color-neutral-surface-secondary) 0%,\n    var(--ippon-color-neutral-surface-tertiary) 50%,\n    var(--ippon-color-neutral-surface-secondary) 100%\n  );\n  background-size: 62rem 100%;\n  color: transparent;\n}\n\n@mixin placeholder($height) {\n  @extend %ippon-placeholder;\n\n  height: $height;\n}\n","@use '../../quark/typography';\n@use '../../quark/placeholder';\n\n.ippon-badge {\n  --_color-background: var(--ippon-color-brand-surface-primary);\n  --_color-text: var(--ippon-color-brand-text-icon-on-primary);\n\n  @include typography.label-small;\n\n  display: inline-flex;\n  gap: var(--ippon-size-8);\n  align-items: center;\n  border-radius: var(--ippon-radius-pill);\n  background-color: var(--_color-background);\n  padding: var(--ippon-size-4) var(--ippon-size-12);\n  vertical-align: middle;\n  color: var(--_color-text);\n\n  &--icon {\n    margin: 0;\n    border: 0;\n    background-color: transparent;\n    padding: 0;\n    line-height: 1;\n    color: inherit;\n    font-size: var(--ippon-size-16);\n\n    &.-clickable {\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--ippon-color-neutral-surface-primary-hover);\n      }\n\n      &:active {\n        background-color: var(--ippon-color-neutral-surface-primary-active);\n      }\n\n      &:hover,\n      &:active {\n        border-radius: var(--ippon-radius-pill);\n        box-shadow: var(--ippon-shadow-l1);\n        color: var(--ippon-color-neutral-text-icon-on-primary);\n      }\n    }\n  }\n\n  &.-placeholder {\n    min-width: 6rem;\n\n    @include placeholder.placeholder(var(--ippon-typography-label-small-line-height));\n  }\n\n  &.-secondary {\n    --_color-background: var(--ippon-color-brand-surface-secondary);\n    --_color-text: var(--ippon-color-brand-text-icon-on-secondary);\n  }\n\n  &.-neutral {\n    --_color-background: var(--ippon-color-neutral-surface-tertiary);\n    --_color-text: var(--ippon-color-neutral-text-icon-on-tertiary);\n\n    &.-secondary {\n      --_color-background: var(--ippon-color-neutral-surface-secondary2);\n      --_color-text: var(--ippon-color-neutral-text-icon-on-secondary);\n    }\n  }\n\n  &.-success {\n    --_color-background: var(--ippon-color-success-surface-primary);\n    --_color-text: var(--ippon-color-success-text-icon-on-primary);\n\n    &.-secondary {\n      --_color-background: var(--ippon-color-success-surface-secondary);\n      --_color-text: var(--ippon-color-success-text-icon-on-secondary);\n    }\n  }\n\n  &.-error {\n    --_color-background: var(--ippon-color-error-surface-primary);\n    --_color-text: var(--ippon-color-error-text-icon-on-primary);\n\n    &.-secondary {\n      --_color-background: var(--ippon-color-error-surface-secondary);\n      --_color-text: var(--ippon-color-error-text-icon-on-secondary);\n    }\n  }\n\n  &.-warning {\n    --_color-background: var(--ippon-color-warning-surface-primary);\n    --_color-text: var(--ippon-color-warning-text-icon-on-primary);\n\n    &.-secondary {\n      --_color-background: var(--ippon-color-warning-surface-secondary);\n      --_color-text: var(--ippon-color-warning-text-icon-on-secondary);\n    }\n  }\n\n  &.-information {\n    --_color-background: var(--ippon-color-information-2-surface-primary);\n    --_color-text: var(--ippon-color-information-2-text-icon-on-primary);\n\n    &.-secondary {\n      --_color-background: var(--ippon-color-information-2-surface-secondary);\n      --_color-text: var(--ippon-color-information-2-text-icon-on-secondary);\n    }\n  }\n}\n","@use 'sass:map';\n\n@mixin display-large {\n  text-transform: var(--ippon-typography-display-large-transform);\n  line-height: var(--ippon-typography-display-large-line-height);\n  font-family: var(--ippon-typography-display-large-font);\n  font-size: var(--ippon-typography-display-large-size);\n  font-weight: var(--ippon-typography-display-large-weight);\n}\n\n@mixin display-medium {\n  text-transform: var(--ippon-typography-display-medium-transform);\n  line-height: var(--ippon-typography-display-medium-line-height);\n  font-family: var(--ippon-typography-display-medium-font);\n  font-size: var(--ippon-typography-display-medium-size);\n  font-weight: var(--ippon-typography-display-medium-weight);\n}\n\n@mixin display-small {\n  text-transform: var(--ippon-typography-display-small-transform);\n  line-height: var(--ippon-typography-display-small-line-height);\n  font-family: var(--ippon-typography-display-small-font);\n  font-size: var(--ippon-typography-display-small-size);\n  font-weight: var(--ippon-typography-display-small-weight);\n}\n\n@mixin title-1 {\n  text-transform: var(--ippon-typography-title-1-transform);\n  line-height: var(--ippon-typography-title-1-line-height);\n  font-family: var(--ippon-typography-title-1-font);\n  font-size: var(--ippon-typography-title-1-size);\n  font-weight: var(--ippon-typography-title-1-weight);\n}\n\n@mixin title-2 {\n  text-transform: var(--ippon-typography-title-2-transform);\n  line-height: var(--ippon-typography-title-2-line-height);\n  font-family: var(--ippon-typography-title-2-font);\n  font-size: var(--ippon-typography-title-2-size);\n  font-weight: var(--ippon-typography-title-2-weight);\n}\n\n@mixin title-3 {\n  text-transform: var(--ippon-typography-title-3-transform);\n  line-height: var(--ippon-typography-title-3-line-height);\n  font-family: var(--ippon-typography-title-3-font);\n  font-size: var(--ippon-typography-title-3-size);\n  font-weight: var(--ippon-typography-title-3-weight);\n}\n\n@mixin title-4 {\n  text-transform: var(--ippon-typography-title-4-transform);\n  line-height: var(--ippon-typography-title-4-line-height);\n  font-family: var(--ippon-typography-title-4-font);\n  font-size: var(--ippon-typography-title-4-size);\n  font-weight: var(--ippon-typography-title-4-weight);\n}\n\n@mixin title-5 {\n  text-transform: var(--ippon-typography-title-5-transform);\n  line-height: var(--ippon-typography-title-5-line-height);\n  font-family: var(--ippon-typography-title-5-font);\n  font-size: var(--ippon-typography-title-5-size);\n  font-weight: var(--ippon-typography-title-5-weight);\n}\n\n$-body-large-weights: (\n  'normal': var(--ippon-typography-body-large-weight),\n  'bold': var(--ippon-typography-body-large-weight-bold),\n);\n\n@mixin -body-large($weight: 'normal') {\n  line-height: var(--ippon-typography-body-large-line-height);\n  font-family: var(--ippon-typography-body-large-font);\n  font-size: var(--ippon-typography-body-large-size);\n  font-weight: map.get($-body-large-weights, $weight);\n}\n\n@mixin body-large {\n  @include -body-large('normal');\n}\n\n@mixin body-large-bold {\n  @include -body-large('bold');\n}\n\n$-body-medium-weights: (\n  'normal': var(--ippon-typography-body-medium-weight),\n  'bold': var(--ippon-typography-body-medium-weight-bold),\n);\n\n@mixin -body-medium($weight: 'normal') {\n  line-height: var(--ippon-typography-body-medium-line-height);\n  font-family: var(--ippon-typography-body-medium-font);\n  font-size: var(--ippon-typography-body-medium-size);\n  font-weight: map.get($-body-medium-weights, $weight);\n}\n\n@mixin body-medium {\n  @include -body-medium('normal');\n}\n\n@mixin body-medium-bold {\n  @include -body-medium('bold');\n}\n\n$-body-small-weights: (\n  'normal': var(--ippon-typography-body-small-weight),\n  'bold': var(--ippon-typography-body-small-weight-bold),\n);\n\n@mixin -body-small($weight: 'normal') {\n  line-height: var(--ippon-typography-body-small-line-height);\n  font-family: var(--ippon-typography-body-small-font);\n  font-size: var(--ippon-typography-body-small-size);\n  font-weight: map.get($-body-small-weights, $weight);\n}\n\n@mixin body-small {\n  @include -body-small('normal');\n}\n\n@mixin body-small-bold {\n  @include -body-small('bold');\n}\n\n@mixin label-large {\n  line-height: var(--ippon-typography-label-large-line-height);\n  font-family: var(--ippon-typography-label-large-font);\n  font-size: var(--ippon-typography-label-large-size);\n  font-weight: var(--ippon-typography-label-large-weight);\n}\n\n@mixin label-medium {\n  line-height: var(--ippon-typography-label-medium-line-height);\n  font-family: var(--ippon-typography-label-medium-font);\n  font-size: var(--ippon-typography-label-medium-size);\n  font-weight: var(--ippon-typography-label-medium-weight);\n}\n\n@mixin label-small {\n  line-height: var(--ippon-typography-label-small-line-height);\n  font-family: var(--ippon-typography-label-small-font);\n  font-size: var(--ippon-typography-label-small-size);\n  font-weight: var(--ippon-typography-label-small-weight);\n}\n","@use '../../quark/typography';\n\n@keyframes ippon-button-loading-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n@keyframes ippon-button-loading-spin {\n  from {\n    rotate: 0deg;\n  }\n\n  to {\n    rotate: 360deg;\n  }\n}\n\n.ippon-button {\n  @include typography.label-medium;\n\n  --_color-primary: var(--ippon-color-brand-surface-primary);\n  --_color-primary-hover: var(--ippon-color-brand-surface-primary-hover);\n  --_color-primary-active: var(--ippon-color-brand-surface-primary-active);\n  --_color-secondary: var(--ippon-color-brand-surface-secondary);\n  --_color-secondary-hover: var(--ippon-color-brand-surface-secondary-hover);\n  --_color-secondary-active: var(--ippon-color-brand-surface-secondary-active);\n  --_color-outline: transparent;\n  --_color-text-primary: var(--ippon-color-brand-text-icon-on-primary);\n  --_color-text-secondary: var(--ippon-color-brand-text-icon-on-secondary);\n  --_color-border: var(--ippon-color-brand-border);\n  --_icon-size: var(--ippon-size-20);\n  --_padding-vertical: var(--ippon-size-8);\n  --_padding-horizontal: var(--ippon-size-16);\n  --_background-color: var(--_color-primary);\n  --_border-color: var(--_color-primary);\n  --_color: var(--_color-text-primary);\n  --_border-width: 1px;\n  --_inner-padding-vertical: calc(var(--_padding-vertical) - var(--_border-width));\n  --_inner-padding-horizontal: calc(var(--_padding-horizontal) - var(--_border-width));\n\n  display: inline-flex;\n  gap: var(--ippon-size-8);\n  align-items: center;\n  border: var(--_border-width) solid var(--_border-color);\n  border-radius: var(--ippon-radius-m);\n  background-color: var(--_background-color);\n  padding: var(--_inner-padding-vertical) var(--_inner-padding-horizontal);\n  vertical-align: middle;\n  color: var(--_color);\n  cursor: pointer;\n\n  &:has(&--icon:is(:last-child)) {\n    padding-right: var(--_inner-padding-vertical);\n  }\n\n  &:has(&--icon:is(:first-child)) {\n    padding-left: var(--_inner-padding-vertical);\n  }\n\n  &--icon {\n    line-height: 1;\n    font-size: var(--_icon-size);\n    font-weight: 400;\n  }\n\n  &.-small {\n    @include typography.label-small;\n\n    --_padding-vertical: var(--ippon-size-8);\n    --_padding-horizontal: var(--ippon-size-12);\n    --_icon-size: var(--ippon-size-16);\n  }\n\n  &.-large {\n    @include typography.label-large;\n\n    --_padding-vertical: var(--ippon-size-12);\n    --_padding-horizontal: var(--ippon-size-16);\n    --_icon-size: var(--ippon-size-24);\n  }\n\n  &:hover {\n    --_background-color: var(--_color-primary-hover);\n    --_border-color: var(--_color-primary-hover);\n  }\n\n  &:active {\n    --_background-color: var(--_color-primary-active);\n    --_border-color: var(--_color-primary-active);\n  }\n\n  &:disabled:not(.-loading) {\n    --_background-color: var(--ippon-color-neutral-200);\n    --_border-color: var(--ippon-color-neutral-200);\n    --_color: var(--ippon-color-neutral-500);\n\n    cursor: not-allowed;\n  }\n\n  &.-secondary {\n    --_background-color: var(--_color-secondary);\n    --_border-color: var(--_color-secondary);\n    --_color: var(--_color-text-secondary);\n\n    &:hover {\n      --_background-color: var(--_color-secondary-hover);\n      --_border-color: var(--_color-secondary-hover);\n    }\n\n    &:active {\n      --_background-color: var(--_color-secondary-active);\n      --_border-color: var(--_color-secondary-active);\n    }\n\n    &:disabled:not(.-loading) {\n      --_background-color: var(--ippon-color-neutral-200);\n      --_border-color: var(--ippon-color-neutral-200);\n      --_color: var(--ippon-color-neutral-500);\n    }\n  }\n\n  &.-outline {\n    --_background-color: var(--_color-outline);\n    --_color: var(--_color-text-secondary);\n    --_border-color: var(--_color-border);\n\n    &:hover {\n      --_background-color: var(--_color-secondary-hover);\n    }\n\n    &:active {\n      --_background-color: var(--_color-secondary-active);\n    }\n\n    &:disabled:not(.-loading) {\n      --_background-color: var(--ippon-color-neutral-200);\n      --_border-color: var(--ippon-color-neutral-200);\n      --_color: var(--ippon-color-neutral-500);\n    }\n  }\n\n  &.-text {\n    --_background-color: transparent;\n    --_border-color: transparent;\n    --_color: var(--_color-text-secondary);\n\n    &:hover {\n      --_background-color: var(--_color-secondary-hover);\n      --_border-color: transparent;\n    }\n\n    &:active {\n      --_background-color: var(--_color-secondary-active);\n      --_border-color: transparent;\n    }\n\n    &:disabled:not(.-loading) {\n      --_background-color: transparent;\n      --_border-color: transparent;\n    }\n  }\n\n  &.-loading {\n    animation: ippon-button-loading-pulse 1.5s ease-in-out infinite;\n    cursor: progress;\n  }\n\n  &--icon.-loading {\n    animation: ippon-button-loading-spin 1s linear infinite;\n  }\n\n  &.-success {\n    --_color-primary: var(--ippon-color-success-surface-primary);\n    --_color-primary-hover: var(--ippon-color-success-surface-primary-hover);\n    --_color-primary-active: var(--ippon-color-success-surface-primary-active);\n    --_color-secondary: var(--ippon-color-success-surface-secondary);\n    --_color-secondary-hover: var(--ippon-color-success-surface-secondary-hover);\n    --_color-secondary-active: var(--ippon-color-success-surface-secondary-active);\n    --_color-outline: transparent;\n    --_color-text-primary: var(--ippon-color-success-text-icon-on-primary);\n    --_color-text-secondary: var(--ippon-color-success-text-icon-on-secondary);\n    --_color-border: var(--ippon-color-success-border);\n  }\n\n  &.-error {\n    --_color-primary: var(--ippon-color-error-surface-primary);\n    --_color-primary-hover: var(--ippon-color-error-surface-primary-hover);\n    --_color-primary-active: var(--ippon-color-error-surface-primary-active);\n    --_color-secondary: var(--ippon-color-error-surface-secondary);\n    --_color-secondary-hover: var(--ippon-color-error-surface-secondary-hover);\n    --_color-secondary-active: var(--ippon-color-error-surface-secondary-active);\n    --_color-outline: var(--ippon-color-neutral-surface-secondary);\n    --_color-text-primary: var(--ippon-color-error-text-icon-on-primary);\n    --_color-text-secondary: var(--ippon-color-error-text-icon-on-secondary);\n    --_color-border: var(--ippon-color-error-border);\n  }\n\n  &.-information {\n    --_color-primary: var(--ippon-color-information-2-surface-primary);\n    --_color-primary-hover: var(--ippon-color-information-2-surface-primary-hover);\n    --_color-primary-active: var(--ippon-color-information-2-surface-primary-active);\n    --_color-secondary: var(--ippon-color-information-2-surface-secondary);\n    --_color-secondary-hover: var(--ippon-color-information-2-surface-secondary-hover);\n    --_color-secondary-active: var(--ippon-color-information-2-surface-secondary-active);\n    --_color-outline: transparent;\n    --_color-text-primary: var(--ippon-color-information-2-text-icon-on-primary);\n    --_color-text-secondary: var(--ippon-color-information-2-text-icon-on-secondary);\n    --_color-border: var(--ippon-color-information-2-border);\n  }\n\n  &.-warning {\n    --_color-primary: var(--ippon-color-warning-surface-primary);\n    --_color-primary-hover: var(--ippon-color-warning-surface-primary-hover);\n    --_color-primary-active: var(--ippon-color-warning-surface-primary-active);\n    --_color-secondary: var(--ippon-color-warning-surface-secondary);\n    --_color-secondary-hover: var(--ippon-color-warning-surface-secondary-hover);\n    --_color-secondary-active: var(--ippon-color-warning-surface-secondary-active);\n    --_color-outline: var(--ippon-color-neutral-surface-secondary);\n    --_color-text-primary: var(--ippon-color-warning-text-icon-on-primary);\n    --_color-text-secondary: var(--ippon-color-warning-text-icon-on-secondary);\n    --_color-border: var(--ippon-color-warning-border);\n  }\n\n  &.-neutral {\n    --_color-primary: var(--ippon-color-neutral-surface-primary);\n    --_color-primary-hover: var(--ippon-color-neutral-surface-primary-hover);\n    --_color-primary-active: var(--ippon-color-neutral-surface-primary-active);\n    --_color-secondary: var(--ippon-color-neutral-surface-secondary);\n    --_color-secondary-hover: var(--ippon-color-neutral-surface-secondary-hover);\n    --_color-secondary-active: var(--ippon-color-neutral-surface-secondary-active);\n    --_color-outline: var(--ippon-color-neutral-surface-secondary);\n    --_color-text-primary: var(--ippon-color-neutral-text-icon-on-primary);\n    --_color-text-secondary: var(--ippon-color-neutral-text-icon-on-secondary);\n    --_color-border: var(--ippon-color-neutral-border);\n  }\n}\n","@use '../../quark/font';\n\n.ippon-icon {\n  line-height: 1;\n\n  @include font.sizes;\n  @include font.colors;\n}\n","@use '../token/size';\n\n@mixin -color-for-variant($color-name, $variant-name) {\n  &.-color-#{$color-name}-#{$variant-name} {\n    color: var(#{'--ippon-color-' + $color-name + '-text-icon-' + $variant-name});\n  }\n}\n\n@mixin -color-for($color-name) {\n  @include -color-for-variant($color-name, 'primary');\n  @include -color-for-variant($color-name, 'secondary');\n  @include -color-for-variant($color-name, 'on-primary');\n  @include -color-for-variant($color-name, 'on-secondary');\n}\n\n@mixin -neutral {\n  @include -color-for('neutral');\n  @include -color-for-variant('neutral', 'tertiary');\n  @include -color-for-variant('neutral', 'tertiary-inversed');\n}\n\n@mixin sizes {\n  @each $size in size.$sizes {\n    &.-size-#{$size} {\n      font-size: var(--ippon-size-#{$size});\n    }\n  }\n}\n\n@mixin colors {\n  @include -neutral;\n  @include -color-for('brand');\n  @include -color-for('success');\n  @include -color-for('error');\n  @include -color-for('warning');\n  @include -color-for('information');\n  @include -color-for('information-2');\n}\n",".ippon-meter {\n  --_bar-color: var(--ippon-color-information-2-surface-primary);\n  --_background-color: var(--ippon-color-neutral-surface-tertiary);\n  --_height: var(--ippon-size-8);\n  --ippon-meter-percentage: 0%;\n\n  display: block;\n  position: relative;\n  background-color: var(--_background-color);\n  width: 100%;\n  height: var(--_height);\n  overflow: hidden;\n\n  &::before {\n    position: absolute;\n    inset: 0 auto 0 0;\n    transition: width 0.3s ease-in-out;\n    border-radius: var(--_border-radius);\n    background-color: var(--_bar-color);\n    width: var(--ippon-meter-percentage);\n    content: '';\n  }\n}\n",".ippon-progress {\n  --_bar-color: var(--ippon-color-information-2-surface-primary);\n  --_background-color: var(--ippon-color-neutral-surface-tertiary);\n  --_height: var(--ippon-size-8);\n  --ippon-progress-percentage: 0%;\n\n  display: block;\n  position: relative;\n  background-color: var(--_background-color);\n  width: 100%;\n  height: var(--_height);\n  overflow: hidden;\n\n  &::before {\n    position: absolute;\n    inset: 0 auto 0 0;\n    transition: width 0.3s ease-in-out;\n    border-radius: var(--_border-radius);\n    background-color: var(--_bar-color);\n    width: var(--ippon-progress-percentage);\n    content: '';\n  }\n}\n","@use '../../quark/typography';\n\n.ippon-tab {\n  appearance: none;\n  display: inline-flex;\n  position: relative;\n  gap: var(--ippon-size-4);\n  border: 0;\n  background: transparent;\n  padding: var(--ippon-size-8) var(--ippon-size-12) var(--ippon-size-10);\n  overflow: hidden;\n  text-decoration: none;\n  color: inherit;\n  cursor: pointer;\n\n  @include typography.body-medium-bold;\n\n  &:hover {\n    color: var(--ippon-color-information-2-text-icon-secondary);\n  }\n\n  &[aria-selected='true'] {\n    color: var(--ippon-color-information-2-text-icon-secondary);\n    cursor: default;\n  }\n\n  &[aria-selected='true']::after {\n    bottom: calc(-1 * var(--_height));\n  }\n\n  &::after {\n    --_height: var(--ippon-size-2);\n    --_double-height: calc(var(--_height) * 2);\n    --_radius: var(--ippon-radius-m);\n    --_padding: var(--ippon-size-8);\n\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    right: var(--_padding);\n    bottom: calc(-1 * var(--_double-height));\n    left: var(--_padding);\n    border: var(--_height) solid var(--ippon-color-information-2-surface-primary);\n    border-radius: var(--_radius);\n    height: var(--_double-height);\n    content: '';\n  }\n}\n","@use '../../quark/typography';\n@use '../../quark/font';\n@use '../../quark/placeholder';\n\n.ippon-text {\n  @include font.colors;\n\n  margin: 0;\n  padding: 0;\n\n  &.-placeholder {\n    min-width: 10rem;\n  }\n\n  &.-body {\n    @include typography.body-medium;\n\n    &.-placeholder {\n      @include placeholder.placeholder(var(--ippon-typography-body-medium-line-height));\n    }\n\n    &.-bold {\n      @include typography.body-medium-bold;\n    }\n\n    &.-small {\n      @include typography.body-small;\n\n      &.-placeholder {\n        @include placeholder.placeholder(var(--ippon-typography-body-small-line-height));\n      }\n\n      &.-bold {\n        @include typography.body-small-bold;\n      }\n    }\n\n    &.-large {\n      @include typography.body-large;\n\n      &.-placeholder {\n        @include placeholder.placeholder(var(--ippon-typography-body-large-line-height));\n      }\n\n      &.-bold {\n        @include typography.body-large-bold;\n      }\n    }\n  }\n\n  &.-label {\n    @include typography.label-medium;\n\n    &.-placeholder {\n      @include placeholder.placeholder(var(--ippon-typography-label-medium-line-height));\n    }\n\n    &.-small {\n      @include typography.label-small;\n\n      &.-placeholder {\n        @include placeholder.placeholder(var(--ippon-typography-label-small-line-height));\n      }\n    }\n\n    &.-large {\n      @include typography.label-large;\n\n      &.-placeholder {\n        @include placeholder.placeholder(var(--ippon-typography-label-large-line-height));\n      }\n    }\n  }\n}\n","@use '../../quark/typography';\n@use '../../quark/placeholder';\n\n@mixin ippon-title($level) {\n  $tag: h#{$level};\n  $alternative: -l#{$level};\n  #{$tag}.ippon-title,\n  .ippon-title.#{$alternative} {\n    @content;\n  }\n}\n\n@mixin ippon-title-placeholder($level) {\n  $tag: h#{$level};\n  $alternative: -l#{$level};\n  #{$tag}.ippon-title.-placeholder,\n  .ippon-title.#{$alternative}.-placeholder {\n    @content;\n  }\n}\n\n.ippon-title {\n  margin: 0;\n\n  &.-placeholder {\n    min-width: 12rem;\n  }\n}\n\n@include ippon-title(1) {\n  @include typography.title-1;\n}\n\n@include ippon-title-placeholder(1) {\n  @include placeholder.placeholder(var(--ippon-typography-title-1-line-height));\n}\n\n@include ippon-title(2) {\n  @include typography.title-2;\n}\n\n@include ippon-title-placeholder(2) {\n  @include placeholder.placeholder(var(--ippon-typography-title-2-line-height));\n}\n\n@include ippon-title(3) {\n  @include typography.title-3;\n}\n\n@include ippon-title-placeholder(3) {\n  @include placeholder.placeholder(var(--ippon-typography-title-3-line-height));\n}\n\n@include ippon-title(4) {\n  @include typography.title-4;\n}\n\n@include ippon-title-placeholder(4) {\n  @include placeholder.placeholder(var(--ippon-typography-title-4-line-height));\n}\n\n@include ippon-title(5) {\n  @include typography.title-5;\n}\n\n@include ippon-title-placeholder(5) {\n  @include placeholder.placeholder(var(--ippon-typography-title-5-line-height));\n}\n","@use '../../quark/typography';\n\n@mixin ippon-title-display($level, $size) {\n  $tag: h#{$level};\n  $alternative: -#{$size};\n  #{$tag}.ippon-title-display,\n  .ippon-title-display.#{$alternative} {\n    @content;\n  }\n}\n\n.ippon-title-display {\n  margin: 0;\n}\n\n@include ippon-title-display(1, 'large') {\n  @include typography.display-large;\n}\n\n@include ippon-title-display(2, 'medium') {\n  @include typography.display-medium;\n}\n\n@include ippon-title-display(3, 'small') {\n  @include typography.display-small;\n}\n",".ippon-import-file {\n  --_border-width: 2px;\n  --_padding-inline: calc(var(--ippon-size-32) - var(--_border-width));\n  --_icon-background-color: var(--ippon-color-neutral-surface-secondary);\n  --_icon-color: var(--ippon-color-neutral-text-icon-on-secondary);\n\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border: var(--_border-width) dashed var(--ippon-color-neutral-border);\n  border-radius: var(--ippon-radius-m);\n  padding: var(--_padding-inline);\n  cursor: pointer;\n\n  &--input {\n    display: none;\n  }\n\n  &--icon {\n    border-radius: var(--ippon-radius-pill);\n    background-color: var(--_icon-background-color);\n    padding: var(--ippon-size-12);\n    line-height: 0;\n    color: var(--_icon-color);\n  }\n\n  &:hover,\n  &.-dragover {\n    --_border-width: 1px;\n    --_icon-background-color: var(--ippon-color-information-2-surface-primary);\n    --_icon-color: var(--ippon-color-information-2-text-icon-on-primary);\n\n    border: var(--_border-width) dashed var(--ippon-color-information-2-border);\n    background-color: var(--ippon-color-information-2-surface-secondary);\n  }\n}\n",".ippon-toggle {\n  --_padding: var(--ippon-size-10);\n  --_animation-duration: 200ms;\n  --_animation-easing: ease-in-out;\n\n  box-sizing: border-box;\n  border: 1px solid var(--ippon-color-neutral-border);\n  border-radius: var(--ippon-radius-l);\n  background-color: var(--ippon-color-neutral-surface-primary);\n  color: var(--ippon-color-neutral-text-icon-on-primary);\n\n  &--header,\n  &--button {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    text-align: left;\n  }\n\n  &.-open &--icon {\n    rotate: 90deg;\n  }\n\n  &--button {\n    flex: 1;\n    gap: var(--_padding);\n    align-self: stretch;\n    border: none;\n    background: none;\n    padding: var(--_padding);\n    cursor: pointer;\n  }\n\n  &--icon {\n    transition: rotate var(--_animation-duration) var(--_animation-easing);\n    line-height: 1;\n    font-size: var(--ippon-size-16);\n  }\n\n  &--title {\n    flex: 1;\n  }\n\n  &--actions {\n    display: flex;\n    gap: var(--_padding);\n    align-items: center;\n    padding: var(--_padding) var(--_padding) var(--_padding) 0;\n  }\n\n  &--body {\n    display: flex;\n    flex-direction: column;\n    transition: height var(--_animation-duration) var(--_animation-easing);\n    height: 0;\n    overflow: hidden;\n  }\n\n  &--content {\n    border-top: 1px solid var(--ippon-color-neutral-border);\n    padding: var(--ippon-size-12);\n  }\n\n  &.-open &--body {\n    height: calc-size(max-content, size);\n  }\n}\n","@use '../quark/shadow';\n\n%ippon-card {\n  --_border-width: 0px;\n  --_padding-v: var(--ippon-size-16);\n  --_padding--inner-v: calc(var(--_padding-v) - var(--_border-width));\n  --_padding-h: var(--ippon-size-16);\n  --_padding--inner-h: calc(var(--_padding-h) - var(--_border-width));\n\n  box-sizing: border-box;\n  border: var(--_border-width) solid var(--ippon-color-neutral-border);\n  border-radius: var(--ippon-radius-l);\n  background-color: var(--ippon-color-neutral-surface-primary);\n  padding: var(--_padding-v) var(--_padding-h);\n  color: var(--ippon-color-neutral-text-icon-on-primary);\n\n  @include shadow.shadows;\n\n  &.-border {\n    --_border-width: 1px;\n  }\n\n  &.-small {\n    --_padding-h: var(--ippon-size-8);\n    --_padding-v: var(--ippon-size-8);\n  }\n\n  &.-large {\n    --_padding-v: var(--ippon-size-20);\n    --_padding-h: var(--ippon-size-24);\n  }\n}\n\n@mixin ippon-card {\n  @extend %ippon-card;\n}\n","@use '../token/shadow/shadow';\n\n@mixin -shadow($level) {\n  &.-shadow-l#{$level} {\n    box-shadow: var(--ippon-shadow-l#{$level});\n  }\n}\n\n@mixin shadows {\n  @each $level in shadow.$shadow-levels {\n    @include -shadow($level);\n  }\n}\n","@use '../abstract-card';\n@use '../../quark/shadow';\n\n.ippon-button-card {\n  @include abstract-card.ippon-card;\n\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--ippon-color-neutral-surface-primary-hover);\n  }\n\n  &:active {\n    background-color: var(--ippon-color-neutral-surface-primary-active);\n  }\n\n  &.-full-width {\n    display: block;\n    width: 100%;\n  }\n}\n",".ippon-container {\n  container-type: inline-size;\n}\n","@use '../../quark/breakpoint';\n@use '../../quark/gap';\n@use 'sass:math';\n\n$ippon-grid-columns: 4, 12;\n$ippon-grid-max-columns: math.max($ippon-grid-columns...);\n\n@mixin ippon-grid-layout-column($layout, $columns) {\n  &.-#{$layout}-#{$columns} {\n    grid-template-columns: repeat(#{$columns}, 1fr);\n  }\n}\n\n@mixin ippon-grid-layout($layout) {\n  @each $columns in $ippon-grid-columns {\n    @include ippon-grid-layout-column($layout, $columns);\n  }\n}\n\n@mixin ippon-grid-layout-breakpoint-column($layout, $breakpoint, $columns) {\n  &.-#{$layout}-#{$breakpoint}-#{$columns} {\n    grid-template-columns: repeat(#{$columns}, 1fr);\n  }\n}\n\n@mixin ippon-grid-layout-breakpoint($layout, $breakpoint) {\n  @each $columns in $ippon-grid-columns {\n    @include ippon-grid-layout-breakpoint-column($layout, $breakpoint, $columns);\n  }\n}\n\n@mixin ippon-grid-slot-column {\n  @for $column from 1 through $ippon-grid-max-columns {\n    &.-col-#{$column} {\n      grid-column: span #{$column};\n    }\n  }\n}\n\n@mixin ippon-grid-slot-breakpoint-column($breakpoint) {\n  @for $column from 1 through $ippon-grid-max-columns {\n    &.-col-#{$breakpoint}-#{$column} {\n      grid-column: span #{$column};\n    }\n  }\n}\n\n.ippon-grid {\n  display: grid;\n\n  @include gap.gaps;\n  @include gap.media-gaps;\n  @include gap.container-gaps;\n  @include ippon-grid-layout('media');\n  @include ippon-grid-layout('container');\n\n  &--slot {\n    @include ippon-grid-slot-column;\n  }\n\n  @each $breakpoint, $breakpoint-value in breakpoint.$media-breakpoints {\n    &--slot {\n      @media (min-width: $breakpoint-value) {\n        @include ippon-grid-slot-breakpoint-column($breakpoint);\n      }\n    }\n\n    @media (min-width: $breakpoint-value) {\n      @include ippon-grid-layout-breakpoint('media', $breakpoint);\n    }\n  }\n\n  @each $breakpoint, $container-value in breakpoint.$container-breakpoints {\n    &--slot {\n      @container (min-width: #{$container-value}) {\n        @include ippon-grid-slot-breakpoint-column($breakpoint);\n      }\n    }\n\n    @container (min-width: #{$container-value}) {\n      @include ippon-grid-layout-breakpoint('container', $breakpoint);\n    }\n  }\n}\n","@use '../token/size';\n@use 'breakpoint';\n\n@mixin gaps {\n  @each $size in size.$sizes {\n    &.-gap-#{$size} {\n      gap: var(--ippon-size-#{$size});\n    }\n  }\n}\n\n@mixin media-gaps {\n  @each $breakpoint, $breakpoint-value in breakpoint.$media-breakpoints {\n    @media (min-width: $breakpoint-value) {\n      @each $size in size.$sizes {\n        &.-gap-#{$breakpoint}-#{$size} {\n          gap: var(--ippon-size-#{$size});\n        }\n      }\n    }\n  }\n}\n\n@mixin container-gaps {\n  @each $breakpoint, $container-value in breakpoint.$container-breakpoints {\n    @container (min-width: #{$container-value}) {\n      @each $size in size.$sizes {\n        &.-gap-#{$breakpoint}-#{$size} {\n          gap: var(--ippon-size-#{$size});\n        }\n      }\n    }\n  }\n}\n",".ippon-header {\n  display: flex;\n  gap: var(--ippon-size-32);\n  align-items: center;\n  border-bottom: 1px solid var(--ippon-color-neutral-border);\n  background-color: var(--ippon-color-neutral-surface-primary);\n  padding: var(--ippon-size-32) var(--ippon-size-48);\n}\n","@use '../../quark/gap';\n\n.ippon-h-space {\n  display: flex;\n  flex-direction: row;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  @include gap.gaps;\n\n  &.-wrap {\n    flex-wrap: wrap;\n  }\n\n  &.-space-between {\n    justify-content: space-between;\n  }\n\n  &.-top {\n    align-items: flex-start;\n  }\n\n  &.-middle {\n    align-items: center;\n  }\n\n  &.-bottom {\n    align-items: flex-end;\n  }\n\n  &.-left {\n    justify-content: flex-start;\n  }\n\n  &.-center {\n    justify-content: center;\n  }\n\n  &.-right {\n    justify-content: flex-end;\n  }\n\n  &--slot {\n    &.-expand {\n      flex: 1;\n    }\n  }\n}\n","@mixin -ippon-modal-slot {\n  padding: 0 var(--ippon-size-24);\n}\n\n.ippon-modal {\n  --_margin-horizontal: var(--ippon-size-24);\n  --_witdh-space-to-remove: calc(var(--_margin-horizontal) * 2);\n\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: var(--ippon-size-24);\n  border: 0;\n  border-radius: var(--ippon-radius-m);\n  background-color: var(--ippon-color-neutral-surface-primary);\n  padding: var(--ippon-size-24) 0;\n  width: calc(100% - var(--_witdh-space-to-remove));\n  max-width: var(--ippon-size-886);\n  color: var(--ippon-color-neutral-text-icon-on-primary);\n\n  &::backdrop {\n    background-color: color-mix(in srgb, var(--ippon-color-neutral-999) 70%, transparent);\n  }\n\n  &:open {\n    display: flex;\n  }\n\n  &--header {\n    @include -ippon-modal-slot;\n  }\n\n  &--separator {\n    box-sizing: border-box;\n    margin: 0 var(--ippon-size-24);\n    border-top: 1px solid var(--ippon-color-neutral-border);\n    border-right: 0;\n    border-bottom: 0;\n    border-left: 0;\n  }\n\n  &--actions {\n    border-top: 1px solid var(--ippon-color-neutral-border);\n    border-bottom: 1px solid var(--ippon-color-neutral-border);\n    background-color: var(--ippon-color-neutral-surface-secondary);\n    padding: var(--ippon-size-16) var(--ippon-size-24);\n    color: var(--ippon-color-neutral-text-icon-on-secondary);\n  }\n\n  &--body {\n    @include -ippon-modal-slot;\n\n    overflow: auto;\n  }\n\n  &--footer {\n    @include -ippon-modal-slot;\n  }\n}\n","@use '../../quark/gap';\n\n.ippon-v-space {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  @include gap.gaps;\n\n  &.-left {\n    align-items: flex-start;\n  }\n\n  &.-center {\n    align-items: center;\n  }\n\n  &.-justify {\n    align-items: stretch;\n  }\n\n  &.-right {\n    align-items: flex-end;\n  }\n\n  &--slot {\n    &.-left {\n      align-self: flex-start;\n    }\n\n    &.-center {\n      align-self: center;\n    }\n\n    &.-justify {\n      align-self: stretch;\n    }\n\n    &.-right {\n      align-self: flex-end;\n    }\n  }\n}\n",".ippon-layout {\n  display: flex;\n  position: fixed;\n  inset: 0;\n  flex-direction: column;\n\n  &--header {\n    flex-shrink: 0;\n    background-color: var(--ippon-color-neutral-surface-primary);\n    color: var(--ippon-color-neutral-text-icon-on-primary);\n  }\n\n  &--body {\n    flex: 1;\n    background-color: var(--ippon-color-neutral-surface-secondary);\n    padding: var(--ippon-size-32) var(--ippon-size-48);\n    overflow-y: auto;\n    color: var(--ippon-color-neutral-text-icon-on-secondary);\n  }\n}\n"]}

package/dist/token/color/color.html

@@ -0,0 +1 @@
+<div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="color">Colors</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../../token/color/color.render.html" onload="javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+30+&quot;px&quot;;}(this));" style="height: 200px; width: 100%; border: none; overflow: hidden"></iframe></div></div>

package/dist/token/color/color.js

@@ -0,0 +1,31 @@
+import { makeTextTd } from '../token.js';
+
+export const ipponTokenColor = (colorsList, color) => {
+  const colors = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 999].flatMap((quantity) => {
+    const prop = `${color}-${quantity}`;
+    const value = window.getComputedStyle(document.body).getPropertyValue(prop);
+    if (value === undefined || value === '') {
+      return [];
+    }
+    return [{ prop, value }];
+  });
+
+  const addToColorsList = ({ prop, value }) => {
+    const tr = document.createElement('tr');
+    const tdName = makeTextTd({ text: prop });
+    const tdValue = makeTextTd({ text: value.toString(), minimal: true });
+    const tdPreview = makeTextTd({ minimal: true });
+    const previewBox = document.createElement('div');
+    previewBox.style.width = '40px';
+    previewBox.style.height = '20px';
+    previewBox.style.backgroundColor = value.toString();
+    previewBox.style.border = '1px solid #0000001A';
+    tdPreview.appendChild(previewBox);
+    tr.appendChild(tdName);
+    tr.appendChild(tdValue);
+    tr.appendChild(tdPreview);
+    colorsList.append(tr);
+  };
+
+  colors.forEach((color) => addToColorsList(color));
+};

package/dist/token/color/color.render.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><section><h3>neutral</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-neutral"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-neutral');
+  ipponTokenColor(colorsList, '--ippon-color-neutral');
+})();</script></section><section><h3>brand-klein</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-brand-klein"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-brand-klein');
+  ipponTokenColor(colorsList, '--ippon-color-brand-klein');
+})();</script></section><section><h3>information</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-information"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-information');
+  ipponTokenColor(colorsList, '--ippon-color-information');
+})();</script></section><section><h3>information-2</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-information-2"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-information-2');
+  ipponTokenColor(colorsList, '--ippon-color-information-2');
+})();</script></section><section><h3>positive</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-positive"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-positive');
+  ipponTokenColor(colorsList, '--ippon-color-positive');
+})();</script></section><section><h3>negative</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-negative"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-negative');
+  ipponTokenColor(colorsList, '--ippon-color-negative');
+})();</script></section><section><h3>warning</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-warning"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-warning');
+  ipponTokenColor(colorsList, '--ippon-color-warning');
+})();</script></section><section><h3>orange</h3><table class="ipp-doc-table"><thead><tr><th class="ipp-doc-table--cell">Name</th><th class="ipp-doc-table--cell">Value</th><th class="ipp-doc-table--cell">Preview</th></tr></thead><tbody id="ippon-color-orange"></tbody></table><script type="module">import { ipponTokenColor } from '../../token/color/color.js';
+
+(() => {
+  const colorsList = document.getElementById('ippon-color-orange');
+  ipponTokenColor(colorsList, '--ippon-color-orange');
+})();</script></section></body></html>

package/dist/token/radius/radius.html

@@ -0,0 +1 @@
+<div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="radius">Radius</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../../token/radius/radius.render.html" onload="javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+30+&quot;px&quot;;}(this));" style="height: 200px; width: 100%; border: none; overflow: hidden"></iframe></div></div>

package/dist/token/radius/radius.js

@@ -0,0 +1,54 @@
+import { makeContentTd, makeTextTd, makeTh, makeLine, propToValue } from '../token.js';
+
+export const ipponTokenRadius = (radiusList, radius) => {
+  const makeKeyContentLine = (key, content) => {
+    if (content === undefined || content === null) {
+      return;
+    }
+    const line = makeLine();
+    const thKey = makeTh(key);
+    const tdValue = makeContentTd({ content });
+    line.append(thKey);
+    line.append(tdValue);
+
+    return line;
+  };
+
+  const makeKeyValueLine = (key, value) => {
+    if (value === undefined || value === '') {
+      return;
+    }
+    const line = makeLine();
+    const thKey = makeTh(key);
+    const tdValue = makeTextTd({ text: value });
+    line.append(thKey);
+    line.append(tdValue);
+
+    return line;
+  };
+
+  const appendValueToRadiusList = (key, value) => {
+    const line = makeKeyValueLine(key, value);
+    if (line) {
+      radiusList.append(line);
+    }
+  };
+
+  const appendContentToRadiusList = (key, content) => {
+    const line = makeKeyContentLine(key, content);
+    if (line) {
+      radiusList.append(line);
+    }
+  };
+
+  appendValueToRadiusList('Name', radius);
+  appendValueToRadiusList('Size', propToValue(radius));
+  const previewBox = document.createElement('div');
+  previewBox.style.width = '100px';
+  previewBox.style.height = '50px';
+  previewBox.style.borderRadius = `var(${radius})`;
+  previewBox.style.backgroundColor = '#000';
+  previewBox.style.boxShadow = '0 0 3px #fff';
+
+  appendContentToRadiusList('Preview', previewBox);
+};