@entur/typography 2.0.4 → 2.1.0

package/dist/beta/styles/index.css

@@ -0,0 +1,1055 @@
+@layer core, third-party, components, utilities, app;
+@layer core.reset, core.tokens, core.base;
+@layer third-party.imports, third-party.overrides;
+@layer components.primitives, components.composites, components.overrides;
+@layer core.base{
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-Light.eot");
+    src:url("../../../fonts/Entur-Nationale-Light.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-Light.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-Light.woff") format("woff");
+    font-weight:300;
+    font-style:normal;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-LightItalic.eot");
+    src:url("../../../fonts/Entur-Nationale-LightItalic.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-LightItalic.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-LightItalic.woff") format("woff");
+    font-weight:300;
+    font-style:italic;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-Regular.eot");
+    src:url("../../../fonts/Entur-Nationale-Regular.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-Regular.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-Regular.woff") format("woff");
+    font-weight:400;
+    font-style:normal;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-Italic.eot");
+    src:url("../../../fonts/Entur-Nationale-Italic.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-Italic.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-Italic.woff") format("woff");
+    font-weight:400;
+    font-style:italic;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-Medium.eot");
+    src:url("../../../fonts/Entur-Nationale-Medium.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-Medium.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-Medium.woff") format("woff");
+    font-weight:500;
+    font-style:normal;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-MediumItalic.eot");
+    src:url("../../../fonts/Entur-Nationale-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-MediumItalic.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-MediumItalic.woff") format("woff");
+    font-weight:500;
+    font-style:italic;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-Demibold.eot");
+    src:url("../../../fonts/Entur-Nationale-Demibold.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-Demibold.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-Demibold.woff") format("woff");
+    font-weight:600;
+    font-style:normal;
+    font-display:swap;
+  }
+  @font-face{
+    font-family:nationale;
+    src:url("../../../fonts/Entur-Nationale-DemiboldItalic.eot");
+    src:url("../../../fonts/Entur-Nationale-DemiboldItalic.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Entur-Nationale-DemiboldItalic.woff2") format("woff2"), url("../../../fonts/Entur-Nationale-DemiboldItalic.woff") format("woff");
+    font-weight:600;
+    font-style:italic;
+    font-display:swap;
+  }
+}
+[data-color-mode=light],
+:root{
+  --components-typography-basetext-contrast-text-accent:#ffffff;
+  --components-typography-basetext-standard-text-accent:#181c56;
+  --components-typography-blockquote-contrast-stroke:#8284ab;
+  --components-typography-blockquote-contrast-text-accent:#ffffff;
+  --components-typography-blockquote-contrast-text-subdued:#d9dae8;
+  --components-typography-blockquote-standard-stroke:#8284ab;
+  --components-typography-blockquote-standard-text-accent:#181c56;
+  --components-typography-blockquote-standard-text-subdued:#626493;
+  --components-typography-codetext-contrast-border:rgba(255, 255, 255, 0);
+  --components-typography-codetext-contrast-border-interactive:#aeb7e2;
+  --components-typography-codetext-contrast-fill:#f6f6f9;
+  --components-typography-codetext-contrast-text:#181c56;
+  --components-typography-codetext-standard-border:rgba(84, 86, 140, 0.4);
+  --components-typography-codetext-standard-border-interactive:#181c56;
+  --components-typography-codetext-standard-fill:#f6f6f9;
+  --components-typography-codetext-standard-text:#181c56;
+  --components-typography-label-contrast-text-accent:#d9dae8;
+  --components-typography-label-standard-text-accent:#626493;
+  --components-typography-list-contrast-border:#aeb7e2;
+  --components-typography-list-contrast-text-accent:#ffffff;
+  --components-typography-list-standard-border:#aeb7e2;
+  --components-typography-list-standard-text-accent:#181c56;
+}
+
+[data-color-mode=dark]{
+  --components-typography-basetext-contrast-text-accent:#e5e5e9;
+  --components-typography-basetext-standard-text-accent:#e5e5e9;
+  --components-typography-blockquote-contrast-stroke:#81828f;
+  --components-typography-blockquote-contrast-text-accent:#e5e5e9;
+  --components-typography-blockquote-contrast-text-subdued:#b3b4bd;
+  --components-typography-blockquote-standard-stroke:#81828f;
+  --components-typography-blockquote-standard-text-accent:#e5e5e9;
+  --components-typography-blockquote-standard-text-subdued:#b3b4bd;
+  --components-typography-codetext-contrast-border:rgba(255, 255, 255, 0);
+  --components-typography-codetext-contrast-border-interactive:#e5e5e9;
+  --components-typography-codetext-contrast-fill:#393a49;
+  --components-typography-codetext-contrast-text:#e5e5e9;
+  --components-typography-codetext-standard-border:rgba(255, 255, 255, 0);
+  --components-typography-codetext-standard-border-interactive:#e5e5e9;
+  --components-typography-codetext-standard-fill:#393a49;
+  --components-typography-codetext-standard-text:#e5e5e9;
+  --components-typography-label-contrast-text-accent:#e5e5e9;
+  --components-typography-label-standard-text-accent:#e5e5e9;
+  --components-typography-list-contrast-border:#aeb7e2;
+  --components-typography-list-contrast-text-accent:#e5e5e9;
+  --components-typography-list-standard-border:#aeb7e2;
+  --components-typography-list-standard-text-accent:#e5e5e9;
+}
+/*
+ * Typography Display Modes
+ * 
+ * This system allows you to control typography scaling based on view size.
+ * Use the vie-mode attribute to switch between different typography scales:
+ * 
+ * - Compact: [data-view-mode='compact'] or no attribute (responsive)
+ * - Display: [data-view-mode='display'] for big screens, kiosks, etc.
+ * 
+ * Usage:
+ * <html data-view-mode="display"> or <div data-view-mode="display">
+ * 
+ * The system automatically handles responsive behavior within each mode.
+ */
+:root,
+[data-view-mode=standard]{
+  /* number */
+  --font-line-height-body-xs:var(--size-8);
+  --font-line-height-body-s:var(--size-9);
+  --font-line-height-body-m:var(--size-10);
+  --font-line-height-body-lg:var(--size-11);
+  --font-line-height-body-xl:var(--size-12);
+  --font-line-height-heading-xs:var(--size-8);
+  --font-line-height-heading-s:var(--size-9);
+  --font-line-height-heading-m:var(--size-10);
+  --font-line-height-heading-lg:var(--size-11);
+  --font-line-height-heading-xl:var(--size-13);
+  --font-line-height-heading-2xl:var(--size-15);
+  --font-line-height-label-s:var(--size-8);
+  --font-line-height-label-m:var(--size-9);
+  --font-line-height-label-lg:var(--size-10);
+  --font-paragraph-spacing-body-xs:var(--size-5);
+  --font-paragraph-spacing-body-s:var(--size-6);
+  --font-paragraph-spacing-body-m:var(--size-8);
+  --font-paragraph-spacing-body-lg:var(--size-10);
+  --font-paragraph-spacing-body-xl:var(--size-10);
+  --font-paragraph-spacing-heading-xs:var(--size-5);
+  --font-paragraph-spacing-heading-m:var(--size-6);
+  --font-paragraph-spacing-heading-s:var(--size-6);
+  --font-paragraph-spacing-heading-lg:var(--size-8);
+  --font-paragraph-spacing-heading-xl:var(--size-9);
+  --font-paragraph-spacing-heading-2xl:var(--size-10);
+  --font-size-body-xs:var(--size-6);
+  --font-size-body-s:var(--size-7);
+  --font-size-body-m:var(--size-8);
+  --font-size-body-lg:var(--size-9);
+  --font-size-body-xl:var(--size-10);
+  --font-size-heading-xs:var(--size-7);
+  --font-size-heading-s:var(--size-8);
+  --font-size-heading-m:var(--size-9);
+  --font-size-heading-lg:var(--size-10);
+  --font-size-heading-xl:var(--size-12);
+  --font-size-heading-2xl:var(--size-14);
+  --font-size-label-s:var(--size-7);
+  --font-size-label-m:var(--size-8);
+  --font-size-label-lg:var(--size-9);
+  /* string */
+  --font-family-nationale:nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
+
+[data-view-mode=compact]{
+  /* number */
+  --font-line-height-body-xs:var(--size-8);
+  --font-line-height-body-s:var(--size-9);
+  --font-line-height-body-lg:var(--size-10);
+  --font-line-height-body-m:var(--size-10);
+  --font-line-height-body-xl:var(--size-11);
+  --font-line-height-heading-s:var(--size-8);
+  --font-line-height-heading-xs:var(--size-8);
+  --font-line-height-heading-m:var(--size-9);
+  --font-line-height-heading-lg:var(--size-10);
+  --font-line-height-heading-xl:var(--size-11);
+  --font-line-height-heading-2xl:var(--size-12);
+  --font-line-height-label-m:var(--size-8);
+  --font-line-height-label-s:var(--size-8);
+  --font-line-height-label-lg:var(--size-9);
+  --font-paragraph-spacing-body-xs:var(--size-5);
+  --font-paragraph-spacing-body-s:var(--size-6);
+  --font-paragraph-spacing-body-m:var(--size-8);
+  --font-paragraph-spacing-body-lg:var(--size-9);
+  --font-paragraph-spacing-body-xl:var(--size-9);
+  --font-paragraph-spacing-heading-s:var(--size-5);
+  --font-paragraph-spacing-heading-xs:var(--size-5);
+  --font-paragraph-spacing-heading-lg:var(--size-6);
+  --font-paragraph-spacing-heading-m:var(--size-6);
+  --font-paragraph-spacing-heading-2xl:var(--size-8);
+  --font-paragraph-spacing-heading-xl:var(--size-8);
+  --font-size-body-xs:var(--size-6);
+  --font-size-body-s:var(--size-7);
+  --font-size-body-lg:var(--size-8);
+  --font-size-body-m:var(--size-8);
+  --font-size-body-xl:var(--size-9);
+  --font-size-heading-xs:var(--size-6);
+  --font-size-heading-s:var(--size-7);
+  --font-size-heading-m:var(--size-8);
+  --font-size-heading-lg:var(--size-9);
+  --font-size-heading-xl:var(--size-10);
+  --font-size-heading-2xl:var(--size-11);
+  --font-size-label-s:var(--size-7);
+  --font-size-label-m:var(--size-8);
+  --font-size-label-lg:var(--size-9);
+  /* string */
+  --font-family-nationale:nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
+
+[data-view-mode=display]{
+  /* number */
+  --font-line-height-body-xs:var(--size-11);
+  --font-line-height-body-s:var(--size-12);
+  --font-line-height-body-m:var(--size-15);
+  --font-line-height-body-lg:var(--size-18);
+  --font-line-height-body-xl:var(--size-19);
+  --font-line-height-heading-xs:var(--size-11);
+  --font-line-height-heading-s:var(--size-13);
+  --font-line-height-heading-m:var(--size-15);
+  --font-line-height-heading-lg:var(--size-18);
+  --font-line-height-heading-xl:var(--size-20);
+  --font-line-height-heading-2xl:var(--size-21);
+  --font-line-height-label-s:var(--size-11);
+  --font-line-height-label-m:var(--size-13);
+  --font-line-height-label-lg:var(--size-15);
+  --font-paragraph-spacing-body-xs:var(--size-9);
+  --font-paragraph-spacing-body-s:var(--size-10);
+  --font-paragraph-spacing-body-m:var(--size-12);
+  --font-paragraph-spacing-body-lg:var(--size-14);
+  --font-paragraph-spacing-body-xl:var(--size-16);
+  --font-paragraph-spacing-heading-xs:var(--size-6);
+  --font-paragraph-spacing-heading-s:var(--size-8);
+  --font-paragraph-spacing-heading-m:var(--size-9);
+  --font-paragraph-spacing-heading-lg:var(--size-10);
+  --font-paragraph-spacing-heading-xl:var(--size-12);
+  --font-paragraph-spacing-heading-2xl:var(--size-13);
+  --font-size-body-xs:var(--size-9);
+  --font-size-body-s:var(--size-10);
+  --font-size-body-m:var(--size-12);
+  --font-size-body-lg:var(--size-14);
+  --font-size-body-xl:var(--size-16);
+  --font-size-heading-xs:var(--size-10);
+  --font-size-heading-s:var(--size-12);
+  --font-size-heading-m:var(--size-14);
+  --font-size-heading-lg:var(--size-16);
+  --font-size-heading-xl:var(--size-19);
+  --font-size-heading-2xl:var(--size-20);
+  --font-size-label-s:var(--size-10);
+  --font-size-label-m:var(--size-12);
+  --font-size-label-lg:var(--size-14);
+  /* string */
+  --font-family-nationale:nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
+
+@layer core.reset{
+  /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+  /*
+  Document
+  ========
+  */
+  /**
+  Use a better box model (opinionated).
+  */
+  *,
+  ::before,
+  ::after{
+    -webkit-box-sizing:border-box;
+       -moz-box-sizing:border-box;
+            box-sizing:border-box;
+  }
+  html{
+    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+    font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    line-height:1.15; /* 1. Correct the line height in all browsers. */
+    -webkit-text-size-adjust:100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+    -moz-tab-size:4;
+      -o-tab-size:4;
+         tab-size:4; /* 3. Use a more readable tab size (opinionated). */
+  }
+  /*
+  Sections
+  ========
+  */
+  body{
+    margin:0; /* Remove the margin in all browsers. */
+  }
+  /*
+  Text-level semantics
+  ====================
+  */
+  /**
+  Add the correct font weight in Chrome and Safari.
+  */
+  b,
+  strong{
+    font-weight:bolder;
+  }
+  /**
+  1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+  2. Correct the odd 'em' font sizing in all browsers.
+  */
+  code,
+  kbd,
+  samp,
+  pre{
+    font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+    font-size:1em; /* 2 */
+  }
+  /**
+  Add the correct font size in all browsers.
+  */
+  small{
+    font-size:80%;
+  }
+  /**
+  Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+  */
+  sub,
+  sup{
+    font-size:75%;
+    line-height:0;
+    position:relative;
+    vertical-align:baseline;
+  }
+  sub{
+    bottom:-0.25em;
+  }
+  sup{
+    top:-0.5em;
+  }
+  /*
+  Tabular data
+  ============
+  */
+  /**
+  Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  */
+  table{
+    border-color:currentcolor;
+  }
+  /*
+  Forms
+  =====
+  */
+  /**
+  1. Change the font styles in all browsers.
+  2. Remove the margin in Firefox and Safari.
+  */
+  button,
+  input,
+  optgroup,
+  select,
+  textarea{
+    font-family:inherit; /* 1 */
+    font-size:100%; /* 1 */
+    line-height:1.15; /* 1 */
+    margin:0; /* 2 */
+  }
+  /**
+  Correct the inability to style clickable types in iOS and Safari.
+  */
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit]{
+    -webkit-appearance:button;
+  }
+  /**
+  Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+  */
+  legend{
+    padding:0;
+  }
+  /**
+  Add the correct vertical alignment in Chrome and Firefox.
+  */
+  progress{
+    vertical-align:baseline;
+  }
+  /**
+  Correct the cursor style of increment and decrement buttons in Safari.
+  */
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button{
+    height:auto;
+  }
+  /**
+  1. Correct the odd appearance in Chrome and Safari.
+  2. Correct the outline style in Safari.
+  */
+  [type=search]{
+    -webkit-appearance:textfield; /* 1 */
+    outline-offset:-2px; /* 2 */
+  }
+  /**
+  Remove the inner padding in Chrome and Safari on macOS.
+  */
+  ::-webkit-search-decoration{
+    -webkit-appearance:none;
+  }
+  /**
+  1. Correct the inability to style clickable types in iOS and Safari.
+  2. Change font properties to 'inherit' in Safari.
+  */
+  ::-webkit-file-upload-button{
+    -webkit-appearance:button; /* 1 */
+    font:inherit; /* 2 */
+  }
+  /*
+  Interactive
+  ===========
+  */
+  /*
+  Add the correct display in Chrome and Safari.
+  */
+  summary{
+    display:list-item;
+  }
+}@layer components.primitives{
+  .eds-heading{
+    color:var(--components-typography-basetext-standard-text-accent);
+    font-weight:var(--font-weight-heading);
+    margin:0;
+  }
+  :where(.eds-contrast) .eds-heading{
+    color:var(--components-typography-basetext-contrast-text-accent);
+  }
+  .eds-heading--2xl{
+    font-size:var(--font-size-heading-2xl);
+    line-height:var(--font-line-height-heading-2xl);
+  }
+  .eds-heading--xl{
+    font-size:var(--font-size-heading-xl);
+    line-height:var(--font-line-height-heading-xl);
+  }
+  .eds-heading--lg{
+    font-size:var(--font-size-heading-lg);
+    line-height:var(--font-line-height-heading-lg);
+  }
+  .eds-heading--m{
+    font-size:var(--font-size-heading-m);
+    line-height:var(--font-line-height-heading-m);
+  }
+  .eds-heading--s{
+    font-size:var(--font-size-heading-s);
+    line-height:var(--font-line-height-heading-s);
+  }
+  .eds-heading--xs{
+    font-size:var(--font-size-heading-xs);
+    line-height:var(--font-line-height-heading-xs);
+  }
+  .eds-heading--title-1{
+    font-size:var(--font-size-heading-2xl);
+    line-height:var(--font-line-height-heading-2xl);
+    margin-bottom:var(--font-paragraph-spacing-heading-2xl);
+  }
+  .eds-heading--title-1:where(:not(:first-child)){
+    margin-top:var(--font-paragraph-spacing-heading-2xl);
+  }
+  .eds-heading--title-2{
+    font-size:var(--font-size-heading-xl);
+    line-height:var(--font-line-height-heading-xl);
+    margin-bottom:var(--font-paragraph-spacing-heading-xl);
+  }
+  .eds-heading--title-2:where(:not(:first-child)){
+    margin-top:var(--font-paragraph-spacing-heading-xl);
+  }
+  .eds-heading--subtitle-1{
+    font-size:var(--font-size-heading-lg);
+    line-height:var(--font-line-height-heading-lg);
+    margin-bottom:var(--font-paragraph-spacing-heading-lg);
+  }
+  .eds-heading--subtitle-1:where(:not(:first-child)){
+    margin-top:var(--font-paragraph-spacing-heading-lg);
+  }
+  .eds-heading--subtitle-2{
+    font-size:var(--font-size-heading-m);
+    line-height:var(--font-line-height-heading-m);
+    margin-bottom:var(--font-paragraph-spacing-heading-m);
+  }
+  .eds-heading--subtitle-2:where(:not(:first-child)){
+    margin-top:var(--font-paragraph-spacing-heading-m);
+  }
+  .eds-heading--section-1{
+    font-size:var(--font-size-heading-s);
+    line-height:var(--font-line-height-heading-s);
+    margin-bottom:var(--font-paragraph-spacing-heading-s);
+  }
+  .eds-heading--section-1:where(:not(:first-child)){
+    margin-top:var(--font-paragraph-spacing-heading-s);
+  }
+  .eds-heading--section-2{
+    font-size:var(--font-size-heading-xs);
+    line-height:var(--font-line-height-heading-xs);
+    margin-bottom:var(--font-paragraph-spacing-heading-xs);
+  }
+  .eds-heading--section-2:where(:not(:first-child)){
+    margin-top:var(--font-paragraph-spacing-heading-xs);
+  }
+  .eds-heading--spacing-none{
+    margin-top:0;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-xs2{
+    margin-top:0.25rem;
+    margin-bottom:0.25rem;
+  }
+  .eds-heading--spacing-xs2-top{
+    margin-top:0.25rem;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-xs2-bottom{
+    margin-top:0;
+    margin-bottom:0.25rem;
+  }
+  .eds-heading--spacing-xs{
+    margin-top:0.5rem;
+    margin-bottom:0.5rem;
+  }
+  .eds-heading--spacing-xs-top{
+    margin-top:0.5rem;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-xs-bottom{
+    margin-top:0;
+    margin-bottom:0.5rem;
+  }
+  .eds-heading--spacing-sm{
+    margin-top:0.75rem;
+    margin-bottom:0.75rem;
+  }
+  .eds-heading--spacing-sm-top{
+    margin-top:0.75rem;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-sm-bottom{
+    margin-top:0;
+    margin-bottom:0.75rem;
+  }
+  .eds-heading--spacing-md{
+    margin-top:1rem;
+    margin-bottom:1rem;
+  }
+  .eds-heading--spacing-md-top{
+    margin-top:1rem;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-md-bottom{
+    margin-top:0;
+    margin-bottom:1rem;
+  }
+  .eds-heading--spacing-lg{
+    margin-top:1.5rem;
+    margin-bottom:1.5rem;
+  }
+  .eds-heading--spacing-lg-top{
+    margin-top:1.5rem;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-lg-bottom{
+    margin-top:0;
+    margin-bottom:1.5rem;
+  }
+  .eds-heading--spacing-xl{
+    margin-top:2rem;
+    margin-bottom:2rem;
+  }
+  .eds-heading--spacing-xl-top{
+    margin-top:2rem;
+    margin-bottom:0;
+  }
+  .eds-heading--spacing-xl-bottom{
+    margin-top:0;
+    margin-bottom:2rem;
+  }
+}@layer components.primitives{
+  .eds-text{
+    color:var(--components-typography-basetext-standard-text-accent);
+    font-weight:var(--font-weight-body);
+    margin:0;
+  }
+  :where(.eds-contrast) .eds-text{
+    color:var(--components-typography-basetext-contrast-text-accent);
+  }
+  .eds-text--xs{
+    font-size:var(--font-size-body-xs);
+    line-height:var(--font-line-height-body-xs);
+  }
+  .eds-text--s{
+    font-size:var(--font-size-body-s);
+    line-height:var(--font-line-height-body-s);
+  }
+  .eds-text--m{
+    font-size:var(--font-size-body-m);
+    line-height:var(--font-line-height-body-m);
+  }
+  .eds-text--xl{
+    font-size:var(--font-size-body-xl);
+    line-height:var(--font-line-height-body-xl);
+  }
+  .eds-text--paragraph:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-m) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-m) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-m) + 1rem);
+  }
+  .eds-text--subparagraph:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-s) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-s) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-s) + 1rem);
+  }
+  .eds-text--leading:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-xl) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-xl) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-xl) + 1rem);
+  }
+  .eds-text--quote:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--caption:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-xs) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-xs) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-xs) + 1rem);
+  }
+  .eds-text--label:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+    margin-bottom:-moz-calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+    margin-bottom:calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+  }
+  .eds-text--sublabel:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+    margin-bottom:-moz-calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+    margin-bottom:calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+  }
+  .eds-text--unordered-list:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--numbered-list:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--blockquote:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--preformatted-text:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--code-text:where(:has(+ .eds-heading)){
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--leading{
+    font-size:var(--font-size-body-xl);
+    line-height:var(--font-line-height-body-xl);
+    margin-bottom:var(--font-line-height-body-xl);
+  }
+  .eds-text--quote{
+    font-size:var(--font-size-body-lg);
+    line-height:var(--font-line-height-body-lg);
+    margin-bottom:var(--font-line-height-body-lg);
+  }
+  .eds-text--paragraph{
+    font-size:var(--font-size-body-m);
+    line-height:var(--font-line-height-body-m);
+    margin-bottom:var(--font-line-height-body-m);
+  }
+  .eds-text--subparagraph{
+    font-size:var(--font-size-body-s);
+    line-height:var(--font-line-height-body-s);
+    margin-bottom:var(--font-line-height-body-s);
+  }
+  .eds-text--caption{
+    font-size:var(--font-size-body-xs);
+    line-height:var(--font-line-height-body-xs);
+    margin-bottom:var(--font-line-height-body-xs);
+  }
+  .eds-text--label{
+    font-size:var(--font-size-label-lg);
+    line-height:var(--font-line-height-label-lg);
+    margin-bottom:var(--font-paragraph-spacing-body-xs);
+    font-weight:600;
+  }
+  .eds-text--sublabel{
+    font-size:var(--font-size-label-s);
+    line-height:var(--font-line-height-label-s);
+    margin-bottom:var(--font-paragraph-spacing-body-xs);
+    font-weight:600;
+  }
+  .eds-text--overline{
+    font-size:var(--font-size-body-xs);
+    line-height:var(--font-line-height-body-xs);
+    margin-top:var(--font-paragraph-spacing-body-xs);
+    margin-bottom:var(--font-paragraph-spacing-body-m);
+    font-weight:500;
+    text-transform:uppercase;
+  }
+  .eds-text--emphasized{
+    font-style:italic;
+    font-weight:500;
+  }
+  .eds-text--code-text, .eds-text--preformatted-text{
+    background-color:var(--components-typography-codetext-standard-fill);
+    border:0.0625rem solid var(--components-typography-codetext-standard-border);
+    -webkit-border-radius:0.25rem;
+       -moz-border-radius:0.25rem;
+            border-radius:0.25rem;
+    color:var(--components-typography-codetext-standard-text);
+    font-family:"Monaco", monospace;
+    font-size:0.875rem;
+  }
+  :where(.eds-contrast) .eds-text--code-text, :where(.eds-contrast) .eds-text--preformatted-text{
+    background-color:var(--components-typography-codetext-contrast-fill);
+    border:0.0625rem solid var(--components-typography-codetext-contrast-border);
+    color:var(--components-typography-codetext-contrast-text);
+  }
+  .eds-text--preformatted-text{
+    padding:1rem;
+    white-space:pre-wrap;
+    word-break:keep-all;
+    margin-bottom:-webkit-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:-moz-calc(var(--font-line-height-body-lg) + 1rem);
+    margin-bottom:calc(var(--font-line-height-body-lg) + 1rem);
+  }
+  .eds-text--code-text{
+    display:inline-block;
+    word-wrap:break-word;
+    word-wrap:anywhere;
+    padding:0 0.25rem;
+  }
+  .eds-text--weight-400, .eds-text--weight-regular{
+    font-weight:400;
+  }
+  .eds-text--weight-500, .eds-text--weight-medium{
+    font-weight:500;
+  }
+  .eds-text--weight-600, .eds-text--weight-semibold{
+    font-weight:600;
+  }
+  .eds-text--weight-700, .eds-text--weight-bold{
+    font-weight:700;
+  }
+  .eds-text--spacing-none{
+    margin-top:0;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-xs2{
+    margin-top:0.25rem;
+    margin-bottom:0.25rem;
+  }
+  .eds-text--spacing-xs2-top{
+    margin-top:0.25rem;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-xs2-bottom{
+    margin-top:0;
+    margin-bottom:0.25rem;
+  }
+  .eds-text--spacing-xs{
+    margin-top:0.5rem;
+    margin-bottom:0.5rem;
+  }
+  .eds-text--spacing-xs-top{
+    margin-top:0.5rem;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-xs-bottom{
+    margin-top:0;
+    margin-bottom:0.5rem;
+  }
+  .eds-text--spacing-sm{
+    margin-top:0.75rem;
+    margin-bottom:0.75rem;
+  }
+  .eds-text--spacing-sm-top{
+    margin-top:0.75rem;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-sm-bottom{
+    margin-top:0;
+    margin-bottom:0.75rem;
+  }
+  .eds-text--spacing-md{
+    margin-top:1rem;
+    margin-bottom:1rem;
+  }
+  .eds-text--spacing-md-top{
+    margin-top:1rem;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-md-bottom{
+    margin-top:0;
+    margin-bottom:1rem;
+  }
+  .eds-text--spacing-lg{
+    margin-top:1.5rem;
+    margin-bottom:1.5rem;
+  }
+  .eds-text--spacing-lg-top{
+    margin-top:1.5rem;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-lg-bottom{
+    margin-top:0;
+    margin-bottom:1.5rem;
+  }
+  .eds-text--spacing-xl{
+    margin-top:2rem;
+    margin-bottom:2rem;
+  }
+  .eds-text--spacing-xl-top{
+    margin-top:2rem;
+    margin-bottom:0;
+  }
+  .eds-text--spacing-xl-bottom{
+    margin-top:0;
+    margin-bottom:2rem;
+  }
+  .eds-text--link{
+    color:var(--components-typography-basetext-standard-text-accent);
+  }
+  :where(.eds-contrast) .eds-text--link{
+    color:var(--components-typography-basetext-contrast-text-accent);
+  }
+  .eds-text--link, .eds-text--link:where(:link), .eds-text--link:where(:visited){
+    font-size:inherit;
+    -webkit-text-decoration:none;
+    text-decoration:none;
+    position:relative;
+    background-image:-webkit-linear-gradient(330deg, var(--components-typography-basetext-standard-text-accent) 0%, var(--components-typography-basetext-standard-text-accent) 100%);
+    background-image:-moz-linear-gradient(330deg, var(--components-typography-basetext-standard-text-accent) 0%, var(--components-typography-basetext-standard-text-accent) 100%);
+    background-image:-o-linear-gradient(330deg, var(--components-typography-basetext-standard-text-accent) 0%, var(--components-typography-basetext-standard-text-accent) 100%);
+    background-image:linear-gradient(120deg, var(--components-typography-basetext-standard-text-accent) 0%, var(--components-typography-basetext-standard-text-accent) 100%);
+    background-repeat:no-repeat;
+    -moz-background-size:100% 0.125rem;
+      -o-background-size:100% 0.125rem;
+         background-size:100% 0.125rem;
+    background-position:0 100%;
+  }
+  :where(.eds-contrast) .eds-text--link, :where(.eds-contrast) .eds-text--link:where(:link), :where(.eds-contrast) .eds-text--link:where(:visited){
+    background-image:-webkit-linear-gradient(330deg, var(--components-typography-basetext-contrast-text-accent) 0%, var(--components-typography-basetext-contrast-text-accent) 100%);
+    background-image:-moz-linear-gradient(330deg, var(--components-typography-basetext-contrast-text-accent) 0%, var(--components-typography-basetext-contrast-text-accent) 100%);
+    background-image:-o-linear-gradient(330deg, var(--components-typography-basetext-contrast-text-accent) 0%, var(--components-typography-basetext-contrast-text-accent) 100%);
+    background-image:linear-gradient(120deg, var(--components-typography-basetext-contrast-text-accent) 0%, var(--components-typography-basetext-contrast-text-accent) 100%);
+  }
+  .eds-text--link:where(:hover){
+    -webkit-animation:eds-link-underline 0.3s ease-in;
+       -moz-animation:eds-link-underline 0.3s ease-in;
+         -o-animation:eds-link-underline 0.3s ease-in;
+            animation:eds-link-underline 0.3s ease-in;
+    cursor:pointer;
+  }
+  @-webkit-keyframes eds-link-underline{
+    from{
+      background-size:0% 0.125rem;
+    }
+    to{
+      background-size:100% 0.125rem;
+    }
+  }
+  @-moz-keyframes eds-link-underline{
+    from{
+      -moz-background-size:0% 0.125rem;
+           background-size:0% 0.125rem;
+    }
+    to{
+      -moz-background-size:100% 0.125rem;
+           background-size:100% 0.125rem;
+    }
+  }
+  @-o-keyframes eds-link-underline{
+    from{
+      -o-background-size:0% 0.125rem;
+         background-size:0% 0.125rem;
+    }
+    to{
+      -o-background-size:100% 0.125rem;
+         background-size:100% 0.125rem;
+    }
+  }
+  @keyframes eds-link-underline{
+    from{
+      -moz-background-size:0% 0.125rem;
+        -o-background-size:0% 0.125rem;
+           background-size:0% 0.125rem;
+    }
+    to{
+      -moz-background-size:100% 0.125rem;
+        -o-background-size:100% 0.125rem;
+           background-size:100% 0.125rem;
+    }
+  }
+  .eds-text--link:where(:focus-visible){
+    outline:2px solid #181c56;
+    outline-color:var(--basecolors-stroke-focus-standard);
+    outline-offset:0.125rem;
+  }
+  :where(.eds-contrast) .eds-text--link:where(:focus-visible){
+    outline-color:var(--basecolors-stroke-focus-contrast);
+  }
+  @media screen and (min-width: 50rem){
+    .eds-text--link{
+      font-size:1rem;
+      line-height:1.5rem;
+    }
+  }
+  .eds-text--link--ext-icon{
+    margin-left:0.25rem;
+  }
+  p .eds-text--link--ext-icon{
+    top:0;
+  }
+  .eds-text--blockquote{
+    border-left:0.25rem solid var(--components-typography-blockquote-standard-stroke);
+    font-family:inherit;
+    margin:0;
+    padding:0.5rem;
+    padding-left:2rem;
+    font-size:var(--font-size-body-lg);
+    line-height:var(--font-line-height-body-lg);
+    margin-bottom:var(--font-line-height-body-lg);
+    color:var(--components-typography-blockquote-standard-text-accent);
+  }
+  :where(.eds-contrast) .eds-text--blockquote{
+    color:var(--components-typography-blockquote-contrast-text-accent);
+  }
+  .eds-text--blockquote__footer{
+    font-size:var(--font-size-body-s);
+    line-height:1.375rem;
+    letter-spacing:1px;
+    margin-top:1.5rem;
+    text-transform:uppercase;
+    color:var(--components-typography-blockquote-standard-text-accent);
+  }
+  :where(.eds-contrast) .eds-text--blockquote__footer{
+    color:var(--components-typography-blockquote-contrast-text-accent);
+  }
+  .eds-text--unordered-list{
+    list-style:none;
+    margin-bottom:var(--font-line-height-body-lg);
+    color:var(--components-typography-list-standard-text-accent);
+  }
+  :where(.eds-contrast) .eds-text--unordered-list{
+    color:var(--components-typography-list-contrast-text-accent);
+  }
+  .eds-text--unordered-list .eds-text--list-item::before{
+    content:"";
+    background:var(--components-typography-list-standard-border);
+    display:block;
+    height:0.125rem;
+    left:-1.75rem;
+    top:0.75rem;
+    position:relative;
+    width:0.75rem;
+  }
+  .eds-text--numbered-list{
+    counter-reset:eds-numbered-list-counter;
+    list-style:none;
+    margin-bottom:var(--font-line-height-body-lg);
+    color:var(--components-typography-list-standard-text-accent);
+  }
+  :where(.eds-contrast) .eds-text--numbered-list{
+    color:var(--components-typography-list-contrast-text-accent);
+  }
+  .eds-text--numbered-list--type-a > .eds-text--list-item::before{
+    content:counter(eds-numbered-list-counter, lower-alpha);
+  }
+  .eds-text--numbered-list--type-A > .eds-text--list-item::before{
+    content:counter(eds-numbered-list-counter, upper-alpha);
+  }
+  .eds-text--numbered-list--type-1 > .eds-text--list-item::before{
+    content:counter(eds-numbered-list-counter, decimal);
+  }
+  .eds-text--numbered-list--type-i > .eds-text--list-item::before{
+    content:counter(eds-numbered-list-counter, lower-roman);
+  }
+  .eds-text--numbered-list--type-I > .eds-text--list-item::before{
+    content:counter(eds-numbered-list-counter, upper-roman);
+  }
+  .eds-text--list-item{
+    padding-left:0.5rem;
+  }
+  .eds-text--numbered-list > .eds-text--list-item{
+    counter-increment:eds-numbered-list-counter;
+    margin-bottom:var(--font-paragraph-spacing-body-m);
+    position:relative;
+    color:var(--components-typography-list-standard-text-accent);
+  }
+  :where(.eds-contrast) .eds-text--numbered-list > .eds-text--list-item{
+    color:var(--components-typography-list-contrast-text-accent);
+  }
+  .eds-text--numbered-list > .eds-text--list-item::before{
+    color:var(--primary-text-color);
+    position:absolute;
+    font-weight:var(--font-weight-heading);
+    left:-2.5rem;
+    border:0.125rem solid var(--components-typography-list-standard-border);
+    -webkit-border-radius:50%;
+       -moz-border-radius:50%;
+            border-radius:50%;
+    height:2rem;
+    width:2rem;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-moz-box;
+    display:flex;
+    -webkit-box-align:center;
+    -webkit-align-items:center;
+       -moz-box-align:center;
+            align-items:center;
+    -webkit-box-pack:center;
+    -webkit-justify-content:center;
+       -moz-box-pack:center;
+            justify-content:center;
+    top:-0.25rem;
+  }
+  :where(.eds-contrast) .eds-text--numbered-list > .eds-text--list-item::before{
+    border:0.125rem solid var(--components-typography-list-contrast-border);
+  }
+  .eds-text--list-item__title{
+    display:block;
+    font-weight:var(--font-weight-heading);
+    margin-bottom:0.5rem;
+  }
+}