npm - @nationalarchives/frontend - Versions diffs - 0.1.25-prerelease → 0.1.26-prerelease - Mend

@nationalarchives/frontend 0.1.25-prerelease → 0.1.26-prerelease

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/nationalarchives/components/text-input/text-input.css ADDED Viewed

@@ -0,0 +1 @@

+ @import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@400;500&display=swap";.tna-background-accent .tna-chip,.tna-background-accent .tna-hgroup__supertitle{--background: var(--page-background)}.tna-template--system-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--system-theme .tna-chip,.tna-template--system-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--system-theme .tna-hgroup__supertitle{--page-background: #f4f4f4;--background-tint: #ededed;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--system-theme .tna-chip,.tna-template--system-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--system-theme .tna-hgroup__supertitle{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--system-theme .tna-chip,.tna-template--system-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--system-theme .tna-hgroup__supertitle{--page-background: rgb(255, 255, 255);--background-tint: #ededed;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--system-theme .tna-chip,.tna-template--system-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--system-theme .tna-hgroup__supertitle{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: #69f;--link-visited: #b9f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--light-theme .tna-chip,.tna-template--light-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--light-theme .tna-hgroup__supertitle{--page-background: #f4f4f4;--background-tint: #ededed;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--dark-theme .tna-chip,.tna-template--dark-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--dark-theme .tna-hgroup__supertitle{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--high-contrast-theme .tna-chip,.tna-template--high-contrast-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--high-contrast-theme .tna-hgroup__supertitle{--page-background: rgb(255, 255, 255);--background-tint: #ededed;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme.tna-template--dark-theme .tna-background-accent .tna-chip,.tna-background-accent .tna-template--high-contrast-theme.tna-template--dark-theme .tna-chip,.tna-template--high-contrast-theme.tna-template--dark-theme .tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-template--high-contrast-theme.tna-template--dark-theme .tna-hgroup__supertitle{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: #69f;--link-visited: #b9f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-background-contrast{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-chip,.tna-hgroup__supertitle,.tna-background-accent{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background-tint{background-color:#ededed;background-color:var(--background-tint);color:#343338;color:var(--font-base)}.tna-background-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background);color:#343338;color:var(--font-base)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light{--link: #0062a8;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-background-accent-light{--link: #0062a8;--link-visited: #4c2c92}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important;background-color:rgba(0,0,0,0) !important}.tna-visually-hidden::before,.tna-visually-hidden::after,.tna-\!--visually-hidden::before,.tna-\!--visually-hidden::after{content:" "}*:focus{z-index:9;outline:.3125rem #00b0ff solid;outline:.3125rem var(--focus-outline) solid;outline-offset:.125rem}.tna-\!--no-focus-style:focus{outline:none}:root{--page-background: #f4f4f4;--background-tint: #ededed;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template{background-color:#f4f4f4;background-color:var(--page-background)}.tna-template--system-theme{--page-background: #f4f4f4;--background-tint: #ededed;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: rgb(255, 255, 255);--background-tint: #ededed;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--system-theme *{background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: #69f;--link-visited: #b9f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme{--page-background: #f4f4f4;--background-tint: #ededed;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme{--page-background: rgb(255, 255, 255);--background-tint: #ededed;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme *{background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: #69f;--link-visited: #b9f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--yellow-accent{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-font-base: rgb(0, 0, 0) !important;--accent-font-dark: rgb(0, 0, 0) !important;--accent-font-light: rgb(0 0 0/0.7) !important;--accent-icon-light: rgb(0 0 0/0.45) !important;--accent-link: rgb(0, 0, 0) !important;--accent-link-visited: rgb(0, 0, 0) !important;--accent-keyline: rgb(0 0 0/0.5) !important;--accent-keyline-dark: rgb(0 0 0/0.8) !important;--button-accent-background: rgb(255, 204, 0) !important}.tna-template--pink-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--button-accent-background: rgb(156, 25, 58) !important}.tna-template--orange-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--button-accent-background: rgb(143, 52, 21) !important}.tna-template--green-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--button-accent-background: rgb(0, 98, 59) !important}.tna-template--blue-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--button-accent-background: rgb(0, 76, 126) !important}@media(prefers-reduced-motion){.tna-template *{animation:none !important;transition:none !important}}.tna-border-keyline{border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid}.tna-border-keyline-dark{border:1px #26262a solid;border:1px var(--keyline-dark) solid}.tna-columns{column-gap:2rem}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:1rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-columns--1-small{column-count:1}.tna-columns--2-small{column-count:2}.tna-columns--3-small{column-count:3}.tna-columns--4-small{column-count:4}}@media(max-width: 30em){.tna-columns--1-tiny{column-count:1}.tna-columns--2-tiny{column-count:2}.tna-columns--3-tiny{column-count:3}.tna-columns--4-tiny{column-count:4}}.tna-columns__block{break-inside:avoid}.tna-columns:has(.tna-columns__block:only-of-type){column-count:1}.tna-table,.tna-table-wrapper,.tna-aside,.tna-form__group,p,.tna-chip-list,.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-blockquote,.tna-large-paragraph,.tna-scene-setter{margin-top:2rem}.tna-table:first-child,.tna-table-wrapper:first-child,.tna-aside:first-child,.tna-form__group:first-child,p:first-child,.tna-chip-list:first-child,.tna-heading-xl:first-child,.tna-heading-l:first-child,.tna-heading-m:first-child,.tna-heading-s:first-child,.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-blockquote:first-child,.tna-large-paragraph:first-child,.tna-scene-setter:first-child{margin-top:0}.tna-template{color:#343338;color:var(--font-base);font-family:"Open Sans",sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.7777777778}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}*{margin:0;padding:0}strong{font-weight:700}p+p{margin-top:1rem}a{text-decoration-thickness:1.5px}a,a:link{color:#0062a8;color:var(--link)}a:visited{color:#4c2c92;color:var(--link-visited)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-link--no-visited-state:visited{color:#0062a8;color:var(--link)}.tna-template--high-contrast-theme a:active{box-shadow:none}.tna-template--high-contrast-theme a:hover:not(:focus){box-shadow:0 0 0 .3125rem var(--focus-outline)}@media(prefers-contrast: more){.tna-template--system-theme a:active{box-shadow:none}.tna-template--system-theme a:hover:not(:focus){box-shadow:0 0 0 .3125rem var(--focus-outline)}}small{font-size:0.95625rem}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:.125em .25rem;display:block;color:#000;color:var(--font-dark);font-family:"Roboto Mono",monospace;font-weight:400;font-size:0.875rem;text-transform:uppercase;line-height:1.1428571429;line-height:1;border:.125rem #111 solid;border:.125rem var(--accent-background) solid}.tna-background-accent .tna-hgroup__supertitle,.tna-background-accent .tna-chip{border-color:var(--background)}.tna-chip--plain{padding:0;color:inherit;background-color:rgba(0,0,0,0);border:none}a.tna-chip{text-decoration:none}a.tna-chip,a.tna-chip:link,a.tna-chip:visited{color:#000;color:var(--font-dark)}a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-chip--plain,a.tna-chip--plain:link,a.tna-chip--plain:visited{color:inherit}.tna-chip-list{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none}.tna-chip-list__item{display:flex;align-items:center}.tna-chip-list__item .tna-chip{display:flex;align-items:center;gap:.5rem}.tna-chip-list__item .fa-solid,.tna-chip-list__item .fa-brand{color:rgb(52 51 56/0.45);color:var(--icon-light)}.tna-template--high-contrast-theme .tna-chip-list__item{border:1px #26262a solid;border:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-chip-list__item .fa-solid,.tna-template--high-contrast-theme .tna-chip-list__item .fa-brand{padding:.375rem .25rem;color:#fff;color:var(--contrast-font-base);background-color:#1e1e1e;background-color:var(--contrast-background);border-right:1px #26262a solid;border-right:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-chip-list__item .tna-chip:has(.fa-solid,.fa-brand){padding-left:0}.tna-template--high-contrast-theme .tna-chip-list__item .tna-chip:has(.fa-solid,.fa-brand) .fa-solid,.tna-template--high-contrast-theme .tna-chip-list__item .tna-chip:has(.fa-solid,.fa-brand) .fa-brand{margin-right:.5rem}@media(prefers-contrast: more){.tna-template--system-theme .tna-chip-list__item{border:1px #26262a solid;border:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-chip-list__item .fa-solid,.tna-template--system-theme .tna-chip-list__item .fa-brand{padding:.375rem .25rem;color:#fff;color:var(--contrast-font-base);background-color:#1e1e1e;background-color:var(--contrast-background);border-right:1px #26262a solid;border-right:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-chip-list__item .tna-chip:has(.fa-solid,.fa-brand){padding-left:0}.tna-template--system-theme .tna-chip-list__item .tna-chip:has(.fa-solid,.fa-brand) .fa-solid,.tna-template--system-theme .tna-chip-list__item .tna-chip:has(.fa-solid,.fa-brand) .fa-brand{margin-right:.5rem}}.tna-chip-list--accent .fa-solid,.tna-chip-list--accent .fa-brand{color:#111;color:var(--accent-background)}.tna-form__heading,.tna-form__heading--s,.tna-hgroup-s .tna-hgroup__title,.tna-heading-s,.tna-form__heading--m,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m,.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l,.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{color:#000;color:var(--font-dark)}.tna-form__heading:not(.tna-heading--no-link-arrow) a,.tna-form__heading--s:not(.tna-heading--no-link-arrow) a,.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-s:not(.tna-heading--no-link-arrow) a,.tna-form__heading--m:not(.tna-heading--no-link-arrow) a,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-m:not(.tna-heading--no-link-arrow) a,.tna-form__heading--l:not(.tna-heading--no-link-arrow) a,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-l:not(.tna-heading--no-link-arrow) a,.tna-form__heading--xl:not(.tna-heading--no-link-arrow) a,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-xl:not(.tna-heading--no-link-arrow) a{display:inline-block;text-wrap:balance}.tna-form__heading:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--s:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--m:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--l:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--xl:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a::after{padding-left:.25rem;display:inline-block;font-weight:700;content:"›"}.tna-form__heading:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--s:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--m:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--l:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--xl:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a:hover::after{padding-left:.5rem}.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:4rem;line-height:1.2}@media(min-width: 48.0625em)and (max-width: 64em){.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.625rem}}@media(max-width: 48em){.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.25rem}}.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:2rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.625rem}}@media(max-width: 48em){.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.5rem}}.tna-form__heading--m,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-weight:700;font-size:1.375rem;line-height:1.6}@media(max-width: 48em){.tna-form__heading--m,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.25rem}}.tna-form__heading--s,.tna-hgroup-s .tna-hgroup__title,.tna-heading-s{font-weight:700;font-size:1.125rem;line-height:1.6}.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{margin-bottom:0;padding:1rem 0 0}.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-heading-s:first-child,.tna-heading-m:first-child,.tna-heading-l:first-child,.tna-heading-xl:first-child{padding-top:0}.tna-hgroup-xl+p,.tna-hgroup-l+p,.tna-hgroup-m+p,.tna-hgroup-s+p,.tna-heading-s+p,.tna-heading-m+p,.tna-heading-l+p,.tna-heading-xl+p{margin-top:1rem}.tna-hgroup__supertitle{margin:0 0 .25rem}.tna-hgroup__supertitle--plain{padding:0;color:inherit;background-color:rgba(0,0,0,0);border:none}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:1rem 1rem 1rem 2rem;border-left:.375rem #111 solid;border-left:.375rem var(--accent-background) solid}.tna-blockquote__quote{font-weight:700}.tna-blockquote__author{font-style:italic}.tna-blockquote .tna-blockquote__author{margin:1rem 0 0}.tna-blockquote__author::before{content:"—" " "}.tna-large-paragraph{font-size:1.375rem;color:#000;color:var(--font-dark)}.tna-scene-setter{font-family:"Roboto Mono",monospace;font-weight:400;color:#000;color:var(--font-dark);font-size:1.875rem;line-height:1.6666666667}@media(max-width: 48em){.tna-scene-setter{font-size:1.5rem;line-height:2}}.tna-scene-setter a{color:inherit;text-decoration-thickness:2px}.tna-scene-setter a:hover{text-decoration-thickness:4.5px}.tna-scene-setter--small{font-size:1.5rem}.tna-form__group--error{padding-left:1rem;border-left:.25rem #c00 solid;border-left:.25rem var(--form-error) solid}.tna-form__fieldset{flex:1;border:none}.tna-form__group,.tna-form__fieldset{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tna-form__group--inline,.tna-form__group--inline .tna-form__fieldset{flex-direction:row;align-items:flex-start}@media(max-width: 48em){.tna-form__group--inline,.tna-form__group--inline .tna-form__fieldset{flex-direction:column}}.tna-form__group-contents{flex:0 0 39%}.tna-form__heading{margin:0}.tna-form__heading--xs{font-size:1em;font-family:"Open Sans",sans-serif;font-weight:400}.tna-form__hint{margin-top:0;font-size:1rem;color:rgb(52 51 56/0.7);color:var(--font-light)}.tna-form__error-message{margin-top:0;color:#c00;color:var(--form-error);font-weight:700}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch;font-size:16px}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content{flex:1}img,svg,picture,video,canvas{max-width:100%;height:auto;display:block}video,canvas{width:100%}[hidden]{display:none}hr{margin:0;border-width:1px 0 0;border-color:rgb(38 38 42/0.25);border-color:var(--keyline);border-style:solid}.tna-section{padding-top:3rem;padding-bottom:3rem}@media(max-width: 48em){.tna-section{padding-top:2rem;padding-bottom:2rem}}.tna-aside{padding:2rem}@media(max-width: 48em){.tna-aside{padding:1rem}}.tna-template--high-contrast-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-aside--tight{padding:1rem}.tna-ul,.tna-ol{margin:1rem 0 0;padding:0 0 0 2rem}.tna-ul:first-child,.tna-ol:first-child{margin-top:0}.tna-ul li::marker,.tna-ol li::marker{color:#111;color:var(--accent-background);font-weight:700}.tna-ul--plain,.tna-ol--plain{padding-left:0;list-style:none}.tna-ul .tna-ul,.tna-ul .tna-ol,.tna-ol .tna-ul,.tna-ol .tna-ol{margin-top:0}.tna-dl{margin:1rem 0 0;display:flex;flex-wrap:wrap}.tna-dl:first-child{margin-top:0}.tna-dl dt,.tna-dl dd{margin:0;padding:.5rem 1rem;position:relative;box-sizing:border-box;word-wrap:break-word}.tna-dl--plain dt{padding-left:0}.tna-dl--plain dd{padding-right:0}.tna-dl dt{width:30%;font-weight:700}.tna-dl dd{width:70%}.tna-dl dd+dd{margin-left:30%}.tna-dl--icon-padding dt{padding-left:3rem !important;position:relative}.tna-dl--icon-padding dt .fa-solid{overflow:visible;position:absolute;top:50%;left:1rem;color:rgb(52 51 56/0.45);color:var(--icon-light);text-align:left;transform:translateY(-50%)}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:2rem !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{left:0}.tna-dl--icon-padding.tna-dl--plain dd{padding-left:2rem}.tna-dl:not(.tna-dl--plain) dt:first-child,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n)+dt,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n + 1){background-color:#ededed;background-color:var(--background-tint)}@media(min-width: 30.0625em)and (max-width: 48em){.tna-dl dt{width:35%}.tna-dl dd{width:65%}.tna-dl dd+dd{margin-left:35%}}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:1rem}.tna-dl--plain dt{padding-bottom:0}.tna-dl--plain dd{padding-top:0}.tna-dl:not(.tna-dl--plain) dt{background-color:#ededed;background-color:var(--background-tint)}.tna-dl:not(.tna-dl--plain) dd{background:rgba(0,0,0,0) !important}}@media(forced-colors: active){.tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-dl dt,.tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-template--high-contrast-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-dl dt,.tna-template--high-contrast-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-dl dt,.tna-template--system-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-\!--no-margin-top,.tna-\!--no-margin-vertical{margin-top:0 !important}.tna-\!--no-margin-bottom,.tna-\!--no-margin-vertical{margin-bottom:0 !important}.tna-\!--no-padding-top,.tna-\!--no-padding-vertical{padding-top:0 !important}.tna-\!--no-padding-bottom,.tna-\!--no-padding-vertical{padding-bottom:0 !important}.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:1rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:2rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:3rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:5rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:8rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:1rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:2rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:8rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:1rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:2rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:3rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:5rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:8rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:1rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:2rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:8rem !important}@media(max-width: 48em){.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:0.75rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:1.5rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:2rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:3rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:5rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:5rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:0.75rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:1.5rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:2rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:3rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:5rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:5rem !important}}@media(min-width: 64.0625em){.tna-\!--no-margin-top-large,.tna-\!--no-margin-vertical-large{margin-top:0 !important}.tna-\!--no-margin-bottom-large,.tna-\!--no-margin-vertical-large{margin-bottom:0 !important}.tna-\!--no-padding-top-large,.tna-\!--no-padding-vertical-large{padding-top:0 !important}.tna-\!--no-padding-bottom-large,.tna-\!--no-padding-vertical-large{padding-bottom:0 !important}.tna-\!--hide-on-large{display:none !important}}@media(min-width: 48.0625em)and (max-width: 64em){.tna-\!--no-margin-top-medium,.tna-\!--no-margin-vertical-medium{margin-top:0 !important}.tna-\!--no-margin-bottom-medium,.tna-\!--no-margin-vertical-medium{margin-bottom:0 !important}.tna-\!--no-padding-top-medium,.tna-\!--no-padding-vertical-medium{padding-top:0 !important}.tna-\!--no-padding-bottom-medium,.tna-\!--no-padding-vertical-medium{padding-bottom:0 !important}.tna-\!--hide-on-medium{display:none !important}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-\!--no-margin-top-small,.tna-\!--no-margin-vertical-small{margin-top:0 !important}.tna-\!--no-margin-bottom-small,.tna-\!--no-margin-vertical-small{margin-bottom:0 !important}.tna-\!--no-padding-top-small,.tna-\!--no-padding-vertical-small{padding-top:0 !important}.tna-\!--no-padding-bottom-small,.tna-\!--no-padding-vertical-small{padding-bottom:0 !important}.tna-\!--hide-on-small{display:none !important}}@media(max-width: 30em){.tna-\!--no-margin-top-tiny,.tna-\!--no-margin-vertical-tiny{margin-top:0 !important}.tna-\!--no-margin-bottom-tiny,.tna-\!--no-margin-vertical-tiny{margin-bottom:0 !important}.tna-\!--no-padding-top-tiny,.tna-\!--no-padding-vertical-tiny{padding-top:0 !important}.tna-\!--no-padding-bottom-tiny,.tna-\!--no-padding-vertical-tiny{padding-bottom:0 !important}.tna-\!--hide-on-tiny{display:none !important}}.tna-table{width:100%;border-collapse:collapse;text-align:left}.tna-table:first-child{margin-top:0}.tna-table__caption{text-align:left;font-weight:700}.tna-table__header,.tna-table__cell{padding:.25rem 1rem;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-table__header:first-child,.tna-table__cell:first-child{padding-left:0}.tna-table__header:last-child,.tna-table__cell:last-child{padding-right:0}.tna-table__head .tna-table__header{border-bottom:.25rem #26262a solid;border-bottom:.25rem var(--keyline-dark) solid}.tna-table p+p{margin-top:.25rem}.tna-table-wrapper{width:100%;padding-left:2rem;padding-right:2rem;position:relative;left:-2rem;overflow:auto}@media(max-width: 30em){.tna-table-wrapper{padding-left:1rem;padding-right:1rem;left:-1rem}}.tna-text-input{width:100%;padding:0 .375rem;display:block;box-sizing:border-box;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:1px #000 solid;border:1px var(--input-border) solid;border-radius:0}.tna-form__group--error .tna-text-input{border-color:#c00;border-color:var(--form-error)}.tna-text-input--xs{max-width:5rem}.tna-text-input--s{max-width:10rem}.tna-text-input--m{max-width:20rem}.tna-text-input--l{max-width:40rem}.tna-text-input--xl{max-width:80rem}/*# sourceMappingURL=text-input.css.map */

package/nationalarchives/components/text-input/text-input.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_forms.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/text-input/text-input.scss"],"names":[],"mappings":"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","file":"text-input.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n // @import \"https://use.typekit.net/hkj3kuz.css\";\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line */\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\n* {\n margin: 0;\n padding: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: 1rem;\n }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n @include colour.on-high-contrast {\n &:active {\n box-shadow: none;\n }\n\n &:hover:not(:focus) {\n box-shadow: 0 0 0 0.3125rem var(--focus-outline);\n }\n }\n\n // &[target=\"_blank\"]:not([title*=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent &:not(#{&}--plain) {\n @include colour.plain;\n\n @include colour.colour-border(\"background\");\n }\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n\n .tna-chip {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid);\n\n .fa-solid,\n .fa-brand {\n padding: 0.375rem 0.25rem;\n\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n\n .tna-chip {\n &:has(.fa-solid, .fa-brand) {\n padding-left: 0;\n\n .fa-solid,\n .fa-brand {\n margin-right: 0.5rem;\n }\n }\n }\n }\n }\n\n &--accent {\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"accent-background\");\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n text-wrap: balance;\n // text-decoration-thickness: .1em;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n // text-decoration-thickness: .15em;\n\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: 1rem 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n\n &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n@mixin focus-outline {\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n*:focus {\n z-index: 9;\n\n @include focus-outline;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// | . | | |\n// |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n// | . | | |\n// |<------------->| | | on-tiny\n// |<----------------------->| | on-mobile\n// |<------------------------------>| on-smaller-than-large\n// | . |<------->| | on-small\n// | . |<------------------------- on-larger-than-tiny\n// | . | |<---->| on-medium\n// | . | |<--------------- on-larger-than-mobile\n// | . | | |<-------- on-large\n// |<------->. | | | Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family: \"Open Sans\", sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../utilities/typography\" as typographyUtilities;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-form {\n &__group {\n @include spacing.space-above;\n\n &--error {\n padding-left: 1rem;\n\n @include colour.colour-border(\"form-error\", 0.25rem, solid, left);\n }\n }\n\n &__fieldset {\n flex: 1;\n\n border: none;\n }\n\n &__group,\n &__fieldset {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n &__group--inline,\n &__group--inline &__fieldset {\n flex-direction: row;\n align-items: flex-start;\n\n @include media.on-mobile {\n flex-direction: column;\n }\n }\n\n &__group-contents {\n flex: 0 0 39%;\n }\n\n &__legend {\n }\n\n &__heading {\n margin: 0;\n\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n\n &--xs {\n font-size: 1em;\n @include typography.main-font;\n // @include typography.main-font-weight-bold;\n }\n }\n\n &__label {\n }\n\n &__hint {\n margin-top: 0;\n\n @include typography.relative-font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__error-message {\n margin-top: 0;\n\n @include colour.colour-font(\"form-error\");\n @include typography.main-font-weight-bold;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /*\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n */\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n\n .tna-ul,\n .tna-ol {\n margin-top: 0;\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none !important;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n.tna-table {\n width: 100%;\n @include spacing.space-above;\n\n border-collapse: collapse;\n\n text-align: left;\n\n &:first-child {\n margin-top: 0;\n }\n\n &__caption {\n text-align: left;\n\n @include typography.main-font-weight-bold;\n }\n\n &__head {\n }\n\n &__header {\n }\n\n &__body {\n }\n\n &__row {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: 0.25rem 1rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__head &__header {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, bottom);\n }\n\n p {\n + p {\n margin-top: 0.25rem;\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n @include spacing.space-above;\n padding-left: grid.$gutter-width;\n padding-right: grid.$gutter-width;\n\n position: relative;\n left: -#{grid.$gutter-width};\n\n overflow: auto;\n\n @include media.on-tiny {\n padding-left: grid.$gutter-width-tiny;\n padding-right: grid.$gutter-width-tiny;\n\n left: -#{grid.$gutter-width-tiny};\n }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../utilities\";\n\n.tna-text-input {\n width: 100%;\n padding: 0 0.375rem;\n\n display: block;\n box-sizing: border-box;\n\n @include colour.colour-font(\"input-foreground\");\n font-size: inherit;\n line-height: 2rem;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n border-radius: 0;\n\n .tna-form__group--error & {\n @include colour.colour-border(\"form-error\");\n }\n\n &--xs {\n max-width: 5rem;\n }\n\n &--s {\n max-width: 10rem;\n }\n\n &--m {\n max-width: 20rem;\n }\n\n &--l {\n max-width: 40rem;\n }\n\n &--xl {\n max-width: 80rem;\n }\n}\n"]}

package/nationalarchives/components/text-input/text-input.scss ADDED Viewed

@@ -0,0 +1,44 @@
+@use "../../variables/forms";
+@use "../../tools/colour";
+@use "../../utilities";
+.tna-text-input {
+  width: 100%;
+  padding: 0 0.375rem;
+  display: block;
+  box-sizing: border-box;
+  @include colour.colour-font("input-foreground");
+  font-size: inherit;
+  line-height: 2rem;
+  @include colour.colour-background("input-background");
+  @include colour.colour-border("input-border", forms.$form-field-border-width);
+  border-radius: 0;
+  .tna-form__group--error & {
+    @include colour.colour-border("form-error");
+  }
+  &--xs {
+    max-width: 5rem;
+  }
+  &--s {
+    max-width: 10rem;
+  }
+  &--m {
+    max-width: 20rem;
+  }
+  &--l {
+    max-width: 40rem;
+  }
+  &--xl {
+    max-width: 80rem;
+  }
+}

package/nationalarchives/components/text-input/text-input.stories.js ADDED Viewed

@@ -0,0 +1,188 @@
+import TextInput from "./template.njk";
+import macroOptions from "./macro-options.json";
+const argTypes = {
+  label: { control: "text" },
+  headingLevel: { control: { type: "number", min: 1, max: 6 } },
+  headingSize: {
+    control: "inline-radio",
+    options: ["xs", "s", "m", "l", "xl"],
+  },
+  id: { control: "text" },
+  name: { control: "text" },
+  hint: { control: "text" },
+  value: { control: "text" },
+  error: { control: "object" },
+  spellcheck: { control: "boolean" },
+  inputmode: {
+    control: "select",
+    options: ["text", "decimal", "numeric", "tel", "search", "email", "url"],
+  },
+  autofill: {
+    control: "select",
+    options: [
+      "name",
+      "honorific-prefix",
+      "given-name",
+      "additional-name",
+      "family-name",
+      "honorific-suffix",
+      "nickname",
+      "username",
+      "new-password",
+      "current-password",
+      "one-time-code",
+      "organization-title",
+      "organization",
+      "street-address",
+      "address-line1",
+      "address-line2",
+      "address-line3",
+      "address-level4",
+      "address-level3",
+      "address-level2",
+      "address-level1",
+      "country",
+      "country-name",
+      "postal-code",
+      "cc-name",
+      "cc-given-name",
+      "cc-additional-name",
+      "cc-family-name",
+      "cc-number",
+      "cc-exp",
+      "cc-exp-month",
+      "cc-exp-year",
+      "cc-csc",
+      "cc-type",
+      "transaction-currency",
+      "transaction-amount",
+      "language",
+      "bday",
+      "bday-day",
+      "bday-month",
+      "bday-year",
+      "sex",
+      "url",
+      "photo",
+      "email",
+    ],
+  },
+  size: { control: "inline-radio", options: ["xs", "s", "m", "l", "xl"] },
+  maxLength: { control: "number" },
+  inline: { control: "boolean" },
+  formGroupClasses: { control: "text" },
+  formGroupAttributes: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+export default {
+  title: "Components/Text input",
+  argTypes,
+};
+const Template = ({
+  label,
+  headingLevel,
+  headingSize,
+  id,
+  name,
+  hint,
+  value,
+  error,
+  spellcheck,
+  inputmode,
+  autofill,
+  size,
+  maxLength,
+  inline,
+  formGroupClasses,
+  formGroupAttributes,
+  classes,
+  attributes,
+}) =>
+  TextInput({
+    params: {
+      label,
+      headingLevel,
+      headingSize,
+      id,
+      name,
+      hint,
+      value,
+      error,
+      spellcheck,
+      inputmode,
+      autofill,
+      size,
+      maxLength,
+      inline,
+      formGroupClasses,
+      formGroupAttributes,
+      classes,
+      attributes,
+    },
+  });
+export const Standard = Template.bind({});
+Standard.args = {
+  label: "Enter your first name",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "firstname1",
+  name: "firstname1",
+  classes: "tna-text-input--demo",
+};
+export const Predefined = Template.bind({});
+Predefined.args = {
+  label: "Edit your first name",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "firstname2",
+  name: "firstname2",
+  value: "John",
+  classes: "tna-text-input--demo",
+};
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Enter your first name",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "firstname3",
+  name: "firstname3",
+  hint: "What people call you by",
+  classes: "tna-text-input--demo",
+};
+export const Error = Template.bind({});
+Error.args = {
+  label: "Enter your first name",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "firstname4",
+  name: "firstname4",
+  error: {
+    text: "Enter a name",
+  },
+  classes: "tna-text-input--demo",
+};
+export const Inline = Template.bind({});
+Inline.args = {
+  label: "Enter your first name",
+  headingLevel: 4,
+  headingSize: "xs",
+  id: "firstname5",
+  name: "firstname5",
+  inline: true,
+  classes: "tna-text-input--demo",
+};

package/nationalarchives/components/textarea/_index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @use "textarea";

package/nationalarchives/components/textarea/fixtures.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "component": "textarea",
+  "fixtures": []
+}

package/nationalarchives/components/textarea/macro-options.json ADDED Viewed

@@ -0,0 +1,106 @@
+[
+  {
+    "name": "label",
+    "type": "text",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "headingSize",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "id",
+    "type": "text",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "name",
+    "type": "text",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "hint",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "value",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "error",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "text",
+        "required": true,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "spellcheck",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "size",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "rows",
+    "type": "number",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "inline",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "formGroupClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the textarea form group."
+  },
+  {
+    "name": "formGroupAttributes",
+    "type": "string",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the textarea form group."
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the textarea."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the textarea."
+  }
+]

package/nationalarchives/components/textarea/macro.njk ADDED Viewed

@@ -0,0 +1,3 @@
+{% macro tnaTextarea(params) %}
+  {%- include "nationalarchives/components/textarea/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/textarea/template.njk ADDED Viewed

@@ -0,0 +1,27 @@
+{%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%}
+{%- set inputClasses = [params.classes] if params.classes else [] -%}
+{%- if params.inline -%}
+  {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
+{%- endif -%}
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}" {%- for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}">
+  <div class="tna-form__group-contents">
+    <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
+      <label class="tna-form__label" for="tna-form__{{ params.id }}">
+        {{ params.label }}
+      </label>
+    </h{{ params.headingLevel }}>
+    {%- if params.hint %}
+    <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+      {{ params.hint }}
+    </p>
+    {%- endif %}
+    {%- if params.error %}
+    <p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
+      <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
+    </p>
+    {%- endif %}
+  </div>
+  <textarea id="tna-form__{{ params.id }}" class="tna-textarea{% if params.size %} tna-textarea--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" rows="{{ params.rows if params.rows else 5 }}"
+  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.value }}</textarea>
+</div>