@designsystem-se/af 32.3.1-beta.1 → 33.0.0

package/dist/esm/digi-button_6.entry.js

@@ -3,9 +3,10 @@ import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
 import { B as ButtonSize } from './button-size.enum-2dcd673f.js';
 import { B as ButtonType } from './button-type.enum-5250ae0b.js';
 import { B as ButtonVariation } from './button-variation.enum-94fffdd6.js';
-import { _ as _t } from './text-ee5498fa.js';
-import { s as select, d as dispatch, r as range, a as axisLeft, f as formatLocale, p as polyInOut, b as axisBottom, l as linear, m as max, c as min, o as ordinal, i as interpolate, e as linear$1 } from './linear-f59f8318.js';
-import { T as TypographyVariation } from './typography-variation.enum-38d1ef90.js';
+import { d as detectClickOutside } from './detectClickOutside.util-72594957.js';
+import { d as detectFocusOutside } from './detectFocusOutside.util-a8676bee.js';
+import { L as LayoutContainerVariation, a as LayoutContainerMaxWidth, T as TypographyVariation } from './typography-variation.enum-d9fdbf06.js';
+import './detectClosest.util-58a7504f.js';
 
 const buttonCss = ".digi--util--fs--xs.sc-digi-button{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-button{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-button{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-button{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-button{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-button{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-button{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-button{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-button{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-button{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-button{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-button{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-button{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-button{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-button{padding-top:5rem !important}.digi--util--pb--1.sc-digi-button{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-button{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-button{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-button{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-button{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-button{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-button{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-button{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-button{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-button{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-button{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-button{padding:2.5rem !important}.digi--util--p--60.sc-digi-button{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-button{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-button{padding:4.5rem !important}.digi--util--p--90.sc-digi-button{padding:5rem !important}.digi--util--ptb--1.sc-digi-button{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-button{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-button{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-button{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-button{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-button{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-button{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-button{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-button{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-button{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-button{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-button{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-button{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-button{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-button{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-button{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-button{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-button{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-button{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-button{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-button{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden.sc-digi-button{display:none}.sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--inverted-1);--digi--button--color--background--primary--hover:var(--digi--color--background--inverted-6);--digi--button--color--background--primary--focus:var(--digi--color--background--inverted-6);--digi--button--color--background--primary--active:var(--digi--color--background--inverted-6);--digi--button--color--background--secondary--default:var(--digi--color--background--primary);--digi--button--color--background--secondary--hover:var(--digi--color--background--inverted-5);--digi--button--color--background--secondary--focus:var(--digi--color--background--inverted-5);--digi--button--color--background--secondary--active:var(--digi--color--background--inverted-5);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--inverted);--digi--button--color--text--primary--hover:var(--digi--color--text--inverted);--digi--button--color--text--primary--focus:var(--digi--color--text--inverted);--digi--button--color--text--primary--active:var(--digi--color--text--inverted);--digi--button--color--text--secondary--default:var(--digi--color--text--secondary);--digi--button--color--text--secondary--hover:var(--digi--color--text--secondary);--digi--button--color--text--secondary--focus:var(--digi--color--text--secondary);--digi--button--color--text--secondary--active:var(--digi--color--text--secondary);--digi--button--color--text--function--default:var(--digi--color--text--link);--digi--button--color--text--function--hover:var(--digi--color--text--link-hover);--digi--button--color--text--function--focus:var(--digi--color--text--secondary);--digi--button--color--text--function--active:var(--digi--color--text--secondary);--digi--button--color--border--primary--default:var(--digi--color--border--secondary);--digi--button--color--border--primary--hover:var(--digi--color--border--inverted-2);--digi--button--color--border--primary--focus:var(--digi--color--border--inverted-2);--digi--button--color--border--primary--active:var(--digi--color--border--inverted-2);--digi--button--color--border--secondary--default:var(--digi--color--border--secondary);--digi--button--color--border--secondary--hover:var(--digi--color--border--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--secondary);--digi--button--color--border--secondary--active:var(--digi--color--border--secondary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--text--inverted);--digi--button--color--icon--primary--hover:var(--digi--color--text--inverted);--digi--button--color--icon--primary--focus:var(--digi--color--text--inverted);--digi--button--color--icon--primary--active:var(--digi--color--text--inverted);--digi--button--color--icon--secondary--default:var(--digi--color--text--secondary);--digi--button--color--icon--secondary--hover:var(--digi--color--text--secondary);--digi--button--color--icon--secondary--focus:var(--digi--color--text--secondary);--digi--button--color--icon--secondary--active:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--link);--digi--button--color--icon--function--hover:var(--digi--color--text--link-hover);--digi--button--color--icon--function--focus:var(--digi--color--text--secondary);--digi--button--color--icon--function--active:var(--digi--color--text--secondary);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--padding--large:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-size--large:var(--digi--global--typography--font-size--interaction-large);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset;--digi--button--min-height--large:unset}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(\n    --digi--button--color--background--primary--default\n  );--COLOR--BACKGROUND--HOVER:var(\n    --digi--button--color--background--primary--hover\n  );--COLOR--BACKGROUND--FOCUS:var(\n    --digi--button--color--background--primary--focus\n  );--COLOR--BACKGROUND--ACTIVE:var(\n    --digi--button--color--background--primary--active\n  );--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(\n    --digi--button--color--border--primary--default\n  );--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(\n    --digi--button--border-radius--primary--default\n  );--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(\n    --digi--button--color--background--secondary--default\n  );--COLOR--BACKGROUND--HOVER:var(\n    --digi--button--color--background--secondary--hover\n  );--COLOR--BACKGROUND--FOCUS:var(\n    --digi--button--color--background--secondary--focus\n  );--COLOR--BACKGROUND--ACTIVE:var(\n    --digi--button--color--background--secondary--active\n  );--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(\n    --digi--button--color--border--secondary--default\n  );--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(\n    --digi--button--color--border--secondary--active\n  );--BORDER-RADIUS--DEFAULT:var(\n    --digi--button--border-radius--secondary--default\n  );--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(\n    --digi--button--border-radius--secondary--active\n  );--BORDER-WIDTH--DEFAULT:var(\n    --digi--button--border-width--secondary--default\n  );--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(\n    --digi--button--border-style--secondary--default\n  );--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(\n    --digi--button--color--background--function--default\n  );--COLOR--BACKGROUND--HOVER:var(\n    --digi--button--color--background--function--hover\n  );--COLOR--BACKGROUND--FOCUS:var(\n    --digi--button--color--background--function--focus\n  );--COLOR--BACKGROUND--ACTIVE:var(\n    --digi--button--color--background--function--active\n  );--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(\n    --digi--button--color--border--function--default\n  );--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(\n    --digi--button--border-radius--function--default\n  );--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-large.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--large);--PADDING:var(--digi--button--padding--large);--MIN-HEIGHT:var(--digi--button--min-height--large)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(\n    --digi--button--text-align--full-width\n  );--digi--button--justify-content--default:var(\n    --digi--button--justify-content--full-width\n  )}";
 const DigiButtonStyle0 = buttonCss;
@@ -126,2314 +127,236 @@ const Button = class {
 };
 Button.style = DigiButtonStyle0;
 
-function sourceEvent(event) {
-  let sourceEvent;
-  while (sourceEvent = event.sourceEvent) event = sourceEvent;
-  return event;
-}
+const navigationContextMenuCss = ".digi--util--fs--xs{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50{padding-top:2.5rem !important}.digi--util--pt--60{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80{padding-top:4.5rem !important}.digi--util--pt--90{padding-top:5rem !important}.digi--util--pb--1{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50{padding-bottom:2.5rem !important}.digi--util--pb--60{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80{padding-bottom:4.5rem !important}.digi--util--pb--90{padding-bottom:5rem !important}.digi--util--p--1{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50{padding:2.5rem !important}.digi--util--p--60{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80{padding:4.5rem !important}.digi--util--p--90{padding:5rem !important}.digi--util--ptb--1{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden{display:none}.digi-navigation-context-menu{display:block;box-sizing:border-box;width:fit-content}.digi-navigation-context-menu *,.digi-navigation-context-menu *::before,.digi-navigation-context-menu *::after{box-sizing:border-box}:host{--digi--navigation-context-menu--toggle-icon--transition:ease-in-out 0.2s all;--digi--navigation-context-menu--toggle-icon--transform:rotate(-180deg);--digi--navigation-context-menu--content--background-color:var(--digi--color--background--primary);--digi--navigation-context-menu--content--border-radius:var(--digi--border-radius--secondary);--digi--navigation-context-menu--content--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--navigation-context-menu--content--max-width:90vw;--digi--navigation-context-menu--content--max-height:15rem;--digi--navigation-context-menu--button-icon--width:0.875rem;--digi--navigation-context-menu--button-trigger--font-size:var(--digi--typography--body--font-size--desktop);--digi--navigation-context-menu--button-trigger--padding:0;--digi--navigation-context-menu--item--font-size:var(--digi--typography--body--font-size--desktop);--digi--navigation-context-menu--item--background-color--active:var(--digi--color--background--neutral-6);--digi--navigation-context-menu--item--display:flex;--digi--navigation-context-menu--item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-context-menu--item--font-color:var(--digi--color--text--primary)}.digi-navigation-context-menu--id-wrapper{display:grid}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__toggle-icon{transition:var(--digi--navigation-context-menu--toggle-icon--transition)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu{--HORIZONTAL-POSITION:unset;display:block}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu--active .digi-navigation-context-menu__toggle-icon{transform:var(--digi--navigation-context-menu--toggle-icon--transform)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__trigger-button{display:block;--digi--button--padding--medium:var(\n    --digi--navigation-context-menu--button-trigger--padding\n  );width:fit-content;--digi--button--font-size--medium:var(\n    --digi--navigation-context-menu--button-trigger--font-size\n  )}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__list{width:100%;position:relative;display:inline-grid}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper{padding:0.5rem 0;display:none;width:max-content;min-width:100%;max-width:var(--digi--navigation-context-menu--content--max-width);max-height:var(--digi--navigation-context-menu--content--max-height);overflow-y:auto;box-sizing:border-box;z-index:10;margin-top:0.5rem;background-color:var(--digi--navigation-context-menu--content--background-color);border-radius:var(--digi--navigation-context-menu--content--border-radius);box-shadow:var(--digi--navigation-context-menu--content--box-shadow);position:absolute}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper--visible{display:block}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper--position-right{right:0}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper--position-center{left:50%;transform:translateX(-50%)}.digi-navigation-context-menu--id-wrapper .content-wrapper{display:flex;flex-direction:row;align-items:baseline;padding-left:1rem;padding-right:1rem;gap:0.5rem}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item{font-size:var(--digi--navigation-context-menu--item--font-size);display:var(--digi--navigation-context-menu--item--display);font-family:var(--digi--navigation-context-menu--item--font-family);padding:0.625rem 0;max-width:max-content;min-width:100%;width:100%;position:relative;cursor:pointer}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item:hover{background-color:var(--digi--navigation-context-menu--item--background-color--active)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item--active{font-weight:600;background-color:var(--digi--navigation-context-menu--item--background-color--active)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item--link{list-style:none;margin:0;padding:0}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item--link a{padding:0.625rem 1rem;color:var(--digi--navigation-context-menu--item--font-color, #333333);text-decoration:none;margin:0;width:100%}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__button-icon{--digi--icon--width:var(\n    --digi--navigation-context-menu--button-icon--width\n  )}";
+const DigiContextMenuStyle0 = navigationContextMenuCss;
 
-function pointer(event, node) {
-  event = sourceEvent(event);
-  if (node === undefined) node = event.currentTarget;
-  if (node) {
-    var svg = node.ownerSVGElement || node;
-    if (svg.createSVGPoint) {
-      var point = svg.createSVGPoint();
-      point.x = event.clientX, point.y = event.clientY;
-      point = point.matrixTransform(node.getScreenCTM().inverse());
-      return [point.x, point.y];
-    }
-    if (node.getBoundingClientRect) {
-      var rect = node.getBoundingClientRect();
-      return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+function deserializeProp(prop) {
+    if (typeof prop === 'string') {
+        return JSON.parse(prop);
     }
-  }
-  return [event.pageX, event.pageY];
-}
-
-// These are typically used in conjunction with noevent to ensure that we can
-// preventDefault on the event.
-const nonpassive = {passive: false};
-const nonpassivecapture = {capture: true, passive: false};
-
-function nopropagation(event) {
-  event.stopImmediatePropagation();
-}
-
-function noevent(event) {
-  event.preventDefault();
-  event.stopImmediatePropagation();
-}
-
-function dragDisable(view) {
-  var root = view.document.documentElement,
-      selection = select(view).on("dragstart.drag", noevent, nonpassivecapture);
-  if ("onselectstart" in root) {
-    selection.on("selectstart.drag", noevent, nonpassivecapture);
-  } else {
-    root.__noselect = root.style.MozUserSelect;
-    root.style.MozUserSelect = "none";
-  }
-}
-
-function yesdrag(view, noclick) {
-  var root = view.document.documentElement,
-      selection = select(view).on("dragstart.drag", null);
-  if (noclick) {
-    selection.on("click.drag", noevent, nonpassivecapture);
-    setTimeout(function() { selection.on("click.drag", null); }, 0);
-  }
-  if ("onselectstart" in root) {
-    selection.on("selectstart.drag", null);
-  } else {
-    root.style.MozUserSelect = root.__noselect;
-    delete root.__noselect;
-  }
-}
-
-const constant$1 = x => () => x;
-
-function DragEvent(type, {
-  sourceEvent,
-  subject,
-  target,
-  identifier,
-  active,
-  x, y, dx, dy,
-  dispatch
-}) {
-  Object.defineProperties(this, {
-    type: {value: type, enumerable: true, configurable: true},
-    sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},
-    subject: {value: subject, enumerable: true, configurable: true},
-    target: {value: target, enumerable: true, configurable: true},
-    identifier: {value: identifier, enumerable: true, configurable: true},
-    active: {value: active, enumerable: true, configurable: true},
-    x: {value: x, enumerable: true, configurable: true},
-    y: {value: y, enumerable: true, configurable: true},
-    dx: {value: dx, enumerable: true, configurable: true},
-    dy: {value: dy, enumerable: true, configurable: true},
-    _: {value: dispatch}
-  });
-}
-
-DragEvent.prototype.on = function() {
-  var value = this._.on.apply(this._, arguments);
-  return value === this._ ? this : value;
-};
-
-// Ignore right-click, since that should open the context menu.
-function defaultFilter(event) {
-  return !event.ctrlKey && !event.button;
-}
-
-function defaultContainer() {
-  return this.parentNode;
-}
-
-function defaultSubject(event, d) {
-  return d == null ? {x: event.x, y: event.y} : d;
+    return prop;
 }
-
-function defaultTouchable() {
-  return navigator.maxTouchPoints || ("ontouchstart" in this);
-}
-
-function drag() {
-  var filter = defaultFilter,
-      container = defaultContainer,
-      subject = defaultSubject,
-      touchable = defaultTouchable,
-      gestures = {},
-      listeners = dispatch("start", "drag", "end"),
-      active = 0,
-      mousedownx,
-      mousedowny,
-      mousemoving,
-      touchending,
-      clickDistance2 = 0;
-
-  function drag(selection) {
-    selection
-        .on("mousedown.drag", mousedowned)
-      .filter(touchable)
-        .on("touchstart.drag", touchstarted)
-        .on("touchmove.drag", touchmoved, nonpassive)
-        .on("touchend.drag touchcancel.drag", touchended)
-        .style("touch-action", "none")
-        .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
-  }
-
-  function mousedowned(event, d) {
-    if (touchending || !filter.call(this, event, d)) return;
-    var gesture = beforestart(this, container.call(this, event, d), event, d, "mouse");
-    if (!gesture) return;
-    select(event.view)
-      .on("mousemove.drag", mousemoved, nonpassivecapture)
-      .on("mouseup.drag", mouseupped, nonpassivecapture);
-    dragDisable(event.view);
-    nopropagation(event);
-    mousemoving = false;
-    mousedownx = event.clientX;
-    mousedowny = event.clientY;
-    gesture("start", event);
-  }
-
-  function mousemoved(event) {
-    noevent(event);
-    if (!mousemoving) {
-      var dx = event.clientX - mousedownx, dy = event.clientY - mousedowny;
-      mousemoving = dx * dx + dy * dy > clickDistance2;
-    }
-    gestures.mouse("drag", event);
-  }
-
-  function mouseupped(event) {
-    select(event.view).on("mousemove.drag mouseup.drag", null);
-    yesdrag(event.view, mousemoving);
-    noevent(event);
-    gestures.mouse("end", event);
-  }
-
-  function touchstarted(event, d) {
-    if (!filter.call(this, event, d)) return;
-    var touches = event.changedTouches,
-        c = container.call(this, event, d),
-        n = touches.length, i, gesture;
-
-    for (i = 0; i < n; ++i) {
-      if (gesture = beforestart(this, c, event, d, touches[i].identifier, touches[i])) {
-        nopropagation(event);
-        gesture("start", event, touches[i]);
-      }
-    }
-  }
-
-  function touchmoved(event) {
-    var touches = event.changedTouches,
-        n = touches.length, i, gesture;
-
-    for (i = 0; i < n; ++i) {
-      if (gesture = gestures[touches[i].identifier]) {
-        noevent(event);
-        gesture("drag", event, touches[i]);
-      }
-    }
-  }
-
-  function touchended(event) {
-    var touches = event.changedTouches,
-        n = touches.length, i, gesture;
-
-    if (touchending) clearTimeout(touchending);
-    touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!
-    for (i = 0; i < n; ++i) {
-      if (gesture = gestures[touches[i].identifier]) {
-        nopropagation(event);
-        gesture("end", event, touches[i]);
-      }
-    }
-  }
-
-  function beforestart(that, container, event, d, identifier, touch) {
-    var dispatch = listeners.copy(),
-        p = pointer(touch || event, container), dx, dy,
-        s;
-
-    if ((s = subject.call(that, new DragEvent("beforestart", {
-        sourceEvent: event,
-        target: drag,
-        identifier,
-        active,
-        x: p[0],
-        y: p[1],
-        dx: 0,
-        dy: 0,
-        dispatch
-      }), d)) == null) return;
-
-    dx = s.x - p[0] || 0;
-    dy = s.y - p[1] || 0;
-
-    return function gesture(type, event, touch) {
-      var p0 = p, n;
-      switch (type) {
-        case "start": gestures[identifier] = gesture, n = active++; break;
-        case "end": delete gestures[identifier], --active; // falls through
-        case "drag": p = pointer(touch || event, container), n = active; break;
-      }
-      dispatch.call(
-        type,
-        that,
-        new DragEvent(type, {
-          sourceEvent: event,
-          subject: s,
-          target: drag,
-          identifier,
-          active: n,
-          x: p[0] + dx,
-          y: p[1] + dy,
-          dx: p[0] - p0[0],
-          dy: p[1] - p0[1],
-          dispatch
-        }),
-        d
-      );
-    };
-  }
-
-  drag.filter = function(_) {
-    return arguments.length ? (filter = typeof _ === "function" ? _ : constant$1(!!_), drag) : filter;
-  };
-
-  drag.container = function(_) {
-    return arguments.length ? (container = typeof _ === "function" ? _ : constant$1(_), drag) : container;
-  };
-
-  drag.subject = function(_) {
-    return arguments.length ? (subject = typeof _ === "function" ? _ : constant$1(_), drag) : subject;
-  };
-
-  drag.touchable = function(_) {
-    return arguments.length ? (touchable = typeof _ === "function" ? _ : constant$1(!!_), drag) : touchable;
-  };
-
-  drag.on = function() {
-    var value = listeners.on.apply(listeners, arguments);
-    return value === listeners ? drag : value;
-  };
-
-  drag.clickDistance = function(_) {
-    return arguments.length ? (clickDistance2 = (_ = +_) * _, drag) : Math.sqrt(clickDistance2);
-  };
-
-  return drag;
-}
-
-function quadInOut(t) {
-  return ((t *= 2) <= 1 ? t * t : --t * (2 - t) + 1) / 2;
-}
-
-const pi$1 = Math.PI,
-    tau$1 = 2 * pi$1,
-    epsilon = 1e-6,
-    tauEpsilon = tau$1 - epsilon;
-
-function append(strings) {
-  this._ += strings[0];
-  for (let i = 1, n = strings.length; i < n; ++i) {
-    this._ += arguments[i] + strings[i];
-  }
-}
-
-function appendRound(digits) {
-  let d = Math.floor(digits);
-  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
-  if (d > 15) return append;
-  const k = 10 ** d;
-  return function(strings) {
-    this._ += strings[0];
-    for (let i = 1, n = strings.length; i < n; ++i) {
-      this._ += Math.round(arguments[i] * k) / k + strings[i];
-    }
-  };
-}
-
-class Path {
-  constructor(digits) {
-    this._x0 = this._y0 = // start of current subpath
-    this._x1 = this._y1 = null; // end of current subpath
-    this._ = "";
-    this._append = digits == null ? append : appendRound(digits);
-  }
-  moveTo(x, y) {
-    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}`;
-  }
-  closePath() {
-    if (this._x1 !== null) {
-      this._x1 = this._x0, this._y1 = this._y0;
-      this._append`Z`;
-    }
-  }
-  lineTo(x, y) {
-    this._append`L${this._x1 = +x},${this._y1 = +y}`;
-  }
-  quadraticCurveTo(x1, y1, x, y) {
-    this._append`Q${+x1},${+y1},${this._x1 = +x},${this._y1 = +y}`;
-  }
-  bezierCurveTo(x1, y1, x2, y2, x, y) {
-    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x},${this._y1 = +y}`;
-  }
-  arcTo(x1, y1, x2, y2, r) {
-    x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
-
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error(`negative radius: ${r}`);
-
-    let x0 = this._x1,
-        y0 = this._y1,
-        x21 = x2 - x1,
-        y21 = y2 - y1,
-        x01 = x0 - x1,
-        y01 = y0 - y1,
-        l01_2 = x01 * x01 + y01 * y01;
-
-    // Is this path empty? Move to (x1,y1).
-    if (this._x1 === null) {
-      this._append`M${this._x1 = x1},${this._y1 = y1}`;
-    }
-
-    // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
-    else if (!(l01_2 > epsilon));
-
-    // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
-    // Equivalently, is (x1,y1) coincident with (x2,y2)?
-    // Or, is the radius zero? Line to (x1,y1).
-    else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
-      this._append`L${this._x1 = x1},${this._y1 = y1}`;
-    }
-
-    // Otherwise, draw an arc!
-    else {
-      let x20 = x2 - x0,
-          y20 = y2 - y0,
-          l21_2 = x21 * x21 + y21 * y21,
-          l20_2 = x20 * x20 + y20 * y20,
-          l21 = Math.sqrt(l21_2),
-          l01 = Math.sqrt(l01_2),
-          l = r * Math.tan((pi$1 - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
-          t01 = l / l01,
-          t21 = l / l21;
-
-      // If the start tangent is not coincident with (x0,y0), line to.
-      if (Math.abs(t01 - 1) > epsilon) {
-        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
-      }
-
-      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
-    }
-  }
-  arc(x, y, r, a0, a1, ccw) {
-    x = +x, y = +y, r = +r, ccw = !!ccw;
-
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error(`negative radius: ${r}`);
-
-    let dx = r * Math.cos(a0),
-        dy = r * Math.sin(a0),
-        x0 = x + dx,
-        y0 = y + dy,
-        cw = 1 ^ ccw,
-        da = ccw ? a0 - a1 : a1 - a0;
-
-    // Is this path empty? Move to (x0,y0).
-    if (this._x1 === null) {
-      this._append`M${x0},${y0}`;
+const ContextMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afChangeItem = createEvent(this, "afChangeItem", 7);
+        this.afFocusItem = createEvent(this, "afFocusItem", 7);
+        this.afToggleMenu = createEvent(this, "afToggleMenu", 7);
+        this.afBlur = createEvent(this, "afBlur", 7);
+        this.itemRefs = {};
+        this.visible = false;
+        this.activeItemIdx = undefined;
+        this.selectItemIdx = 0;
+        this.afId = randomIdGenerator('digi-context-menu');
+        this.afIcon = undefined;
+        this.afTitle = undefined;
+        this.afMenuItems = undefined;
+        this.afDir = undefined;
+        this.afLang = undefined;
+        this.afAriaLabel = undefined;
+        this.afMenuPosition = 'left-bottom';
+        this.afActiveItem = undefined;
     }
-
-    // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
-    else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
-      this._append`L${x0},${y0}`;
+    clickHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-identifier`;
+        if (detectClickOutside(target, selector) && this.visible) {
+            this.hideMenu();
+        }
     }
-
-    // Is this arc empty? We’re done.
-    if (!r) return;
-
-    // Does the angle go the wrong way? Flip the direction.
-    if (da < 0) da = da % tau$1 + tau$1;
-
-    // Is this a complete circle? Draw two arcs to complete the circle.
-    if (da > tauEpsilon) {
-      this._append`A${r},${r},0,1,${cw},${x - dx},${y - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
+    focusoutHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-identifier`;
+        if (detectFocusOutside(target, selector) && this.visible) {
+            this.hideMenu();
+            this.afBlur.emit();
+        }
     }
-
-    // Is this arc non-empty? Draw an arc!
-    else if (da > epsilon) {
-      this._append`A${r},${r},0,${+(da >= pi$1)},${cw},${this._x1 = x + r * Math.cos(a1)},${this._y1 = y + r * Math.sin(a1)}`;
+    syncActiveItem() {
+        if (this.afActiveItem != null) {
+            const menuItems = this.afMenuItems;
+            this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem);
+        }
     }
-  }
-  rect(x, y, w, h) {
-    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}h${w = +w}v${+h}h${-w}Z`;
-  }
-  toString() {
-    return this._;
-  }
-}
-
-function constant(x) {
-  return function constant() {
-    return x;
-  };
-}
-
-const cos = Math.cos;
-const sin = Math.sin;
-const sqrt = Math.sqrt;
-const pi = Math.PI;
-const tau = 2 * pi;
-
-function withPath(shape) {
-  let digits = 3;
-
-  shape.digits = function(_) {
-    if (!arguments.length) return digits;
-    if (_ == null) {
-      digits = null;
-    } else {
-      const d = Math.floor(_);
-      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
-      digits = d;
+    syncItems() {
+        this.afMenuItems = deserializeProp(this.afMenuItems);
     }
-    return shape;
-  };
-
-  return () => new Path(digits);
-}
-
-function array(x) {
-  return typeof x === "object" && "length" in x
-    ? x // Array, TypedArray, NodeList, array-like
-    : Array.from(x); // Map, Set, iterable, string, or anything else
-}
-
-function Linear(context) {
-  this._context = context;
-}
-
-Linear.prototype = {
-  areaStart: function() {
-    this._line = 0;
-  },
-  areaEnd: function() {
-    this._line = NaN;
-  },
-  lineStart: function() {
-    this._point = 0;
-  },
-  lineEnd: function() {
-    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
-    this._line = 1 - this._line;
-  },
-  point: function(x, y) {
-    x = +x, y = +y;
-    switch (this._point) {
-      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
-      case 1: this._point = 2; // falls through
-      default: this._context.lineTo(x, y); break;
+    componentWillLoad() {
+        this.syncItems();
+        this.syncActiveItem();
     }
-  }
-};
-
-function curveLinear(context) {
-  return new Linear(context);
-}
-
-function x(p) {
-  return p[0];
-}
-
-function y(p) {
-  return p[1];
-}
-
-function line(x$1, y$1) {
-  var defined = constant(true),
-      context = null,
-      curve = curveLinear,
-      output = null,
-      path = withPath(line);
-
-  x$1 = typeof x$1 === "function" ? x$1 : (x$1 === undefined) ? x : constant(x$1);
-  y$1 = typeof y$1 === "function" ? y$1 : (y$1 === undefined) ? y : constant(y$1);
-
-  function line(data) {
-    var i,
-        n = (data = array(data)).length,
-        d,
-        defined0 = false,
-        buffer;
-
-    if (context == null) output = curve(buffer = path());
-
-    for (i = 0; i <= n; ++i) {
-      if (!(i < n && defined(d = data[i], i, data)) === defined0) {
-        if (defined0 = !defined0) output.lineStart();
-        else output.lineEnd();
-      }
-      if (defined0) output.point(+x$1(d, i, data), +y$1(d, i, data));
+    get digiIcon() {
+        if (this.afIcon != null) {
+            return `digi-icon-${this.afIcon}`;
+        }
     }
-
-    if (buffer) return output = null, buffer + "" || null;
-  }
-
-  line.x = function(_) {
-    return arguments.length ? (x$1 = typeof _ === "function" ? _ : constant(+_), line) : x$1;
-  };
-
-  line.y = function(_) {
-    return arguments.length ? (y$1 = typeof _ === "function" ? _ : constant(+_), line) : y$1;
-  };
-
-  line.defined = function(_) {
-    return arguments.length ? (defined = typeof _ === "function" ? _ : constant(!!_), line) : defined;
-  };
-
-  line.curve = function(_) {
-    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;
-  };
-
-  line.context = function(_) {
-    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;
-  };
-
-  return line;
-}
-
-const circle = {
-  draw(context, size) {
-    const r = sqrt(size / pi);
-    context.moveTo(r, 0);
-    context.arc(0, 0, r, 0, tau);
-  }
-};
-
-const tan30 = sqrt(1 / 3);
-const tan30_2 = tan30 * 2;
-
-const diamond = {
-  draw(context, size) {
-    const y = sqrt(size / tan30_2);
-    const x = y * tan30;
-    context.moveTo(0, -y);
-    context.lineTo(x, 0);
-    context.lineTo(0, y);
-    context.lineTo(-x, 0);
-    context.closePath();
-  }
-};
-
-const ka = 0.89081309152928522810;
-const kr = sin(pi / 10) / sin(7 * pi / 10);
-const kx = sin(tau / 10) * kr;
-const ky = -cos(tau / 10) * kr;
-
-const star = {
-  draw(context, size) {
-    const r = sqrt(size * ka);
-    const x = kx * r;
-    const y = ky * r;
-    context.moveTo(0, -r);
-    context.lineTo(x, y);
-    for (let i = 1; i < 5; ++i) {
-      const a = tau * i / 5;
-      const c = cos(a);
-      const s = sin(a);
-      context.lineTo(s * r, -c * r);
-      context.lineTo(c * x - s * y, s * x + c * y);
+    hideMenu() {
+        this.visible = false;
+        this.afToggleMenu.emit(this.visible);
     }
-    context.closePath();
-  }
-};
-
-const sqrt3 = sqrt(3);
-
-const triangle = {
-  draw(context, size) {
-    const y = -sqrt(size / (sqrt3 * 3));
-    context.moveTo(0, y * 2);
-    context.lineTo(-sqrt3 * y, -y);
-    context.lineTo(sqrt3 * y, -y);
-    context.closePath();
-  }
-};
-
-function Symbol(type, size) {
-  let context = null,
-      path = withPath(symbol);
-
-  type = typeof type === "function" ? type : constant(type || circle);
-  size = typeof size === "function" ? size : constant(size === undefined ? 64 : +size);
-
-  function symbol() {
-    let buffer;
-    if (!context) context = buffer = path();
-    type.apply(this, arguments).draw(context, +size.apply(this, arguments));
-    if (buffer) return context = null, buffer + "" || null;
-  }
-
-  symbol.type = function(_) {
-    return arguments.length ? (type = typeof _ === "function" ? _ : constant(_), symbol) : type;
-  };
-
-  symbol.size = function(_) {
-    return arguments.length ? (size = typeof _ === "function" ? _ : constant(+_), symbol) : size;
-  };
-
-  symbol.context = function(_) {
-    return arguments.length ? (context = _ == null ? null : _, symbol) : context;
-  };
-
-  return symbol;
-}
-
-function point(that, x, y) {
-  that._context.bezierCurveTo(
-    (2 * that._x0 + that._x1) / 3,
-    (2 * that._y0 + that._y1) / 3,
-    (that._x0 + 2 * that._x1) / 3,
-    (that._y0 + 2 * that._y1) / 3,
-    (that._x0 + 4 * that._x1 + x) / 6,
-    (that._y0 + 4 * that._y1 + y) / 6
-  );
-}
-
-function Basis(context) {
-  this._context = context;
-}
-
-Basis.prototype = {
-  areaStart: function() {
-    this._line = 0;
-  },
-  areaEnd: function() {
-    this._line = NaN;
-  },
-  lineStart: function() {
-    this._x0 = this._x1 =
-    this._y0 = this._y1 = NaN;
-    this._point = 0;
-  },
-  lineEnd: function() {
-    switch (this._point) {
-      case 3: point(this, this._x1, this._y1); // falls through
-      case 2: this._context.lineTo(this._x1, this._y1); break;
+    showMenu() {
+        this.visible = true;
+        this.afToggleMenu.emit(this.visible);
     }
-    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
-    this._line = 1 - this._line;
-  },
-  point: function(x, y) {
-    x = +x, y = +y;
-    switch (this._point) {
-      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
-      case 1: this._point = 2; break;
-      case 2: this._point = 3; this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // falls through
-      default: point(this, x, y); break;
+    isLink() {
+        if (this.afMenuItems && this.afMenuItems.length > 0) {
+            const itemToCheck = this.afMenuItems[0];
+            return itemToCheck.type && itemToCheck.type === 'link';
+        }
+        return false;
     }
-    this._x0 = this._x1, this._x1 = x;
-    this._y0 = this._y1, this._y1 = y;
-  }
-};
-
-function basis(context) {
-  return new Basis(context);
-}
-
-const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.chartTitle.sc-digi-chart-line{--digi--typography--h2--margin:0.5rem;--digi--typography--h3--margin:0.5rem;--digi--typography--h4--margin:0.5rem;--digi--typography--h5--margin:0.5rem;--digi--typography--h6--margin:0.5rem;display:flex;justify-content:flex-start;flex-direction:column;align-items:left;text-align:left;padding-bottom:1rem;flex-grow:2}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n    --digi--global--color--neutral--grayscale--darkest-3\n  )}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;margin-right:5px}.topWrapper.sc-digi-chart-line{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}";
-const DigiChartLineStyle0 = chartLineCss;
-
-const ChartLine = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this._lineTypes = [null, '1.0, 7.0', '9.0, 7.0'];
-        this._toggled = false;
-        this._tickSize = 0;
-        // Selection list from legend chips
-        this._selectedLines = [];
-        // Dragging
-        this._dragStart = 0;
-        this._dragDir = 0;
-        this._loading = false;
-        this.margin = {
-            bottom: 0,
-            top: 6,
-            left: 5,
-            right: 15
-        };
-        this.fontSize = '0.875rem';
-        this.xPadding = 5;
-        this.yPadding = 8;
-        this.xTickSize = 5;
-        // How many line types that exists currently
-        this.lineTypes = 3;
-        // Formats
-        this.formatStyle = ',d';
-        this.axisNumberFormat = {
-            decimal: ',',
-            thousands: ' ',
-            grouping: [3],
-            currency: ['', 'kr']
-        };
-        // Observer for watching size changes when in line chart mode
-        this.lineChartObserver = new ResizeObserver((entries) => {
-            entries.forEach(() => {
-                this.resizeSvg();
-                this.resizeLines();
-                this.repositionTooltip(); // Called on both div.resize, and window.resize
-                select(this._legendDiv).style('width', this.dims.width + 'px');
-            });
-        });
-        // Observer for watching size changes when in table mode
-        this.tableObserver = new ResizeObserver((entries) => {
-            entries.forEach(() => {
-                select(this._legendDiv).style('width', this.dims.width + 'px');
-                this.resizeTable();
-            });
-        });
-        this.dragStart = (e) => {
-            const container = select(this._legendDiv).node();
-            this._dragStart = e.x - container.offsetLeft;
-            this._scrollLeft = container.scrollLeft;
-        };
-        this.drag = (e) => {
-            const container = select(this._legendDiv);
-            this._dragDir = e.x;
-            const delta = this._dragDir - container.node().offsetLeft;
-            const walk = (delta - this._dragStart) * 1; //scroll-fast
-            container.property('scrollLeft', this._scrollLeft - walk);
-        };
-        // Set yTicks
-        this.setYTicks = (init = false) => {
-            // Fixed number of y-axis lines
-            const step = this._chartData.meta && this._chartData.meta.numberOfReferenceLines
-                ? this._chartData.meta.numberOfReferenceLines
-                : 5, min = this._yAxis.domain()[0], max = this._yAxis.domain()[1], stepValue = (max - min) / (step - 1), tickValues = range(min, max + stepValue, stepValue);
-            if (!init) {
-                this._yAxisHandle
-                    .style('font-size', this.fontSize)
-                    .transition()
-                    .duration(400)
-                    .call(axisLeft(this._yAxis)
-                    .ticks(step)
-                    .tickPadding(this.yPadding)
-                    .tickValues(tickValues)
-                    .tickSize(-(this.dims.width - this.margin.left))
-                    .tickFormat((d) => formatLocale(this.axisNumberFormat).format(this.formatStyle)(d)))
-                    .on('end', () => this.leftSetAxis());
-            }
-            else {
-                this._yAxisHandle.style('font-size', this.fontSize).call(axisLeft(this._yAxis)
-                    .ticks(step)
-                    .tickPadding(this.yPadding)
-                    .tickValues(tickValues)
-                    .tickSize(-(this.dims.width - this.margin.left))
-                    .tickFormat((d) => formatLocale(this.axisNumberFormat).format(this.formatStyle)(d)));
-            }
-            this._yAxisHandle
-                .selectAll('line')
-                .attr('stroke', getComputedStyle(document.documentElement)
-                .getPropertyValue('--digi--global--color--neutral--grayscale--darker')
-                .trim()
-                .toLocaleLowerCase());
-            this._yAxisHandle.select('.domain').attr('display', 'none');
-            if (init)
-                this.leftSetAxis(init);
-        };
-        // Adding event listeners to the chart
-        this.addListenersToChart = () => {
-            this._Tipbox
-                .style('cursor', 'pointer')
-                .on('mousemove', this.drawTooltipLine)
-                .on('touchmove', 'ontouchstart' in window || window.navigator.maxTouchPoints
-                ? this.drawTooltip
-                : null)
-                .on('mouseup', this.drawTooltip)
-                .on('mouseleave', () => {
-                this._secondaryLine.attr('display', 'none');
-                if (!this._toggled) {
-                    this._TooltipLine.attr('display', 'none');
-                    this._Circles.selectAll('circle').attr('display', 'none');
-                }
-            });
-        };
-        // Initialize legend
-        this.initLegend = () => {
-            const container = select(this._legendDiv);
-            select(this._legendDiv).style('width', this.dims.width + 'px');
-            container.selectAll('.chip').remove();
-            container.call(drag().on('start', this.dragStart).on('drag', this.drag));
-            container
-                .selectAll('legendChips')
-                .data(this._chartData.data.series)
-                .join('button')
-                .attr('class', 'chip')
-                .attr('type', 'button')
-                .attr('aria-pressed', false)
-                .style('padding', '0.15rem 0.75rem')
-                .style('border', '2px solid white')
-                .style('border-radius', '6px')
-                .style('display', 'flex')
-                .style('flex-direction', 'row')
-                .style('gap', '0.5rem')
-                .style('align-items', 'center')
-                .style('flex-wrap', 'nowrap')
-                .style('min-width', 'fit-content')
-                .style('height', 'calc(2rem - 2px)')
-                .style('font-size', this.fontSize)
-                .style('white-space', 'nowrap')
-                .style('box-sizing', 'border-box')
-                .style('background-color', 'white')
-                .style('cursor', 'pointer')
-                .html((d) => {
-                return '<span style="pointer-events:none;">' + d.title + '</span>';
-            })
-                .on('click', this.togglePath)
-                .on('mouseover', this.highlightPath)
-                .on('mouseleave', this.colorLines)
-                .datum((d) => d)
-                .insert('svg', 'span')
-                .attr('class', 'legendSvg')
-                .attr('pointer-events', 'none')
-                .attr('width', 32)
-                .attr('height', 28)
-                .append('line')
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 6)
-                .attr('stroke-dasharray', (d, i) => this.dashFunction(d, i))
-                .attr('x1', 3)
-                .attr('x2', 29)
-                .attr('y1', '50%')
-                .attr('y2', '50%');
-            // Only if data contains many lines
-            if (this._chartData.data.series.length <= this.lineTypes)
-                return;
-            container
-                .selectAll('.legendSvg')
-                .filter((...[, i]) => {
-                return i > 2;
-            })
-                .append('path')
-                .attr('d', (...[, i]) => this.symbolType(i, 110))
-                .attr('fill', (d) => this.colorFunction(d))
-                .attr('transform', 'translate(16,14)');
-        };
-        // Highlights a line
-        this.highlightPath = (event, element) => {
-            if (event.target.className != 'chip')
-                return;
-            const target = select(event.target);
-            target.style('border', (d) => '2px solid ' + this.colorFunction(d));
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .transition('highlight')
-                .duration(150)
-                .attr('stroke', (d, i, nodelist) => {
-                if (d.title === element.title) {
-                    select(nodelist[i]).raise();
-                    return this.colorFunction(d);
-                }
-                else
-                    return '#E3E3E3';
-            });
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .attr('fill', (d, i, nodelist) => {
-                if (d.title === element.title) {
-                    select(nodelist[i]).raise();
-                }
-            });
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .selectAll('.symbol')
-                .transition('highlight')
-                .duration(150)
-                .attr('fill', (d) => {
-                if (!d)
-                    return;
-                if (d.title === element.title) {
-                    return this.colorFunction(d);
-                }
-                else
-                    return '#E3E3E3';
-            });
-        };
-        // Selecting a path to view sollely from legend
-        this.togglePath = (event) => {
-            if (event.target.className != 'chip')
-                return;
-            const target = select(event.target);
-            // Using color of text to identify what state the legend chip is in, so resetting this the last thing we do
-            const swap = 'white' === target.style('color');
-            target
-                .style('border', (d) => '2px solid ' + this.colorFunction(d))
-                .style('background-color', (d) => swap ? 'white' : this.colorFunction(d))
-                .style('color', () => (swap ? 'black' : 'white'))
-                .attr('aria-pressed', target.attr('aria-pressed') == 'false' ? true : false)
-                .select('line')
-                .attr('stroke', (d) => (swap ? this.colorFunction(d) : 'white'));
-            target
-                .select('path')
-                .attr('fill', (d) => (swap ? this.colorFunction(d) : 'white'));
-            if (swap) {
-                this._selectedLines = this._selectedLines.filter((elem) => {
-                    return elem.title === target.datum()['title'] ? false : true;
-                });
-            }
-            else {
-                this._selectedLines.push(this._coreSeries.filter((elem) => elem.title === target.datum()['title'])[0]);
-            }
-            if (this._selectedLines.length < 1)
-                this._chartData.data.series = JSON.parse(JSON.stringify(this._coreSeries));
-            else {
-                this._chartData.data.series.map((serie) => {
-                    const index = this._selectedLines.findIndex((selected) => {
-                        return serie.title === selected.title;
-                    });
-                    if (index != -1) {
-                        serie.yValues = this._selectedLines[index].yValues;
-                    }
-                    else {
-                        serie.yValues = [];
-                    }
-                });
-            }
-            this.updateSvg();
-        };
-        // Coloring all lines
-        this.colorLines = (event) => {
-            const target = select(event.target);
-            target.style('border', '2px solid white');
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .transition('highlight')
-                .duration(150)
-                .attr('stroke', (d) => this.colorFunction(d));
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .selectAll('.symbol')
-                .transition('highlight')
-                .duration(150)
-                .attr('fill', (d) => (d ? this.colorFunction(d) : null));
-        };
-        // Returns a line type given a integer value
-        this.dashFunction = (...[, index]) => {
-            return this._lineTypes[index % this._lineTypes.length];
-        };
-        // Initialize the drawing of the lines
-        this.initLines = () => {
-            this.defineLineAndScale();
-            // TODO: do this data appending somewhere else
-            this._lineChartContainer
-                .selectAll('linePath')
-                .data(this.reshapeData(this._chartData.data.series))
-                .join('path')
-                .attr('class', 'linePath')
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
-                .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
-                .attr('fill', 'none')
-                .attr('d', (d) => this._LineFunc(d.line));
-            this.addSymbols();
-        };
-        this.defineLineAndScale = () => {
-            this._LineFunc = line()
-                .defined((d) => d[1] != null && d[1] != undefined && !isNaN(d[1]))
-                .x((d) => this._lineScale(d[0]))
-                .y((d) => this._yAxis(d[1]));
-        };
-        // Modifies data object adds a line member to object, line is an array of pairs of number: [number, number][]
-        // Line is used to feed into _LineFunc
-        this.reshapeData = (series) => {
-            return series.map((obj) => {
-                obj.line = this._chartData.data.xValues.map((elem, ind) => {
-                    return [elem, obj.yValues[ind]];
-                });
-                obj.length = obj.yValues.filter((e) => e != null && e != undefined).length;
-                return obj;
-            });
-        };
-        // Adding symbols to lines where needed
-        this.addSymbols = (transition = false) => {
-            // Remove all old symbols
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .data(this.reshapeData(this._chartData.data.series.filter((...[, index]) => index > 2)))
-                .join((enter) => {
-                if (!transition) {
-                    enter
-                        .append('g')
-                        .attr('class', 'symbolGroup')
-                        .selectAll('symbols')
-                        .data((d, i) => {
-                        return d.line.map((num) => {
-                            if (num[1] != null)
-                                return {
-                                    val: num[1],
-                                    x: num[0],
-                                    title: d.title,
-                                    colorToken: d.colorToken,
-                                    index: i
-                                };
-                            else
-                                return null;
-                        });
-                    })
-                        .join('path')
-                        .attr('class', 'symbol')
-                        .attr('d', (d) => (d ? this.symbolType(d.index) : null))
-                        .attr('fill', (d) => (d ? this.colorFunction(d) : null))
-                        .attr('transform', (d) => d
-                        ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
-                        : null);
-                }
-                else {
-                    enter
-                        .append('g')
-                        .attr('class', 'symbolGroup')
-                        .selectAll('symbol')
-                        .data((d, i) => {
-                        return d.line.map((num) => {
-                            if (num[1] != null)
-                                return {
-                                    val: num[1],
-                                    x: num[0],
-                                    title: d.title,
-                                    colorToken: d.colorToken,
-                                    index: i
-                                };
-                            else
-                                return null;
-                        });
-                    })
-                        .join('path')
-                        .attr('class', 'symbol')
-                        .attr('d', (d) => (d ? this.symbolType(d.index) : null))
-                        .attr('fill', (d) => (d ? this.colorFunction(d) : null))
-                        .attr('transform', (d) => d
-                        ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
-                        : null);
-                }
-            }, (update) => {
-                if (!transition) {
-                    update
-                        .selectAll('.symbol')
-                        .data((d, i) => {
-                        return d.line.map((num) => {
-                            if (num[1] != null)
-                                return {
-                                    val: num[1],
-                                    x: num[0],
-                                    title: d.title,
-                                    colorToken: d.colorToken,
-                                    index: i
-                                };
-                            else
-                                return null;
-                        });
-                    })
-                        .join('path')
-                        .attr('class', 'symbol')
-                        .attr('d', (d) => (d ? this.symbolType(d.index) : null))
-                        .attr('fill', (d) => (d ? this.colorFunction(d) : null))
-                        .attr('transform', (d) => d
-                        ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
-                        : null);
-                }
-                else {
-                    update
-                        .selectAll('path')
-                        .data((d, i) => {
-                        const toReturn = d.line.map((num) => {
-                            if (num[1] != null)
-                                return {
-                                    val: num[1],
-                                    x: num[0],
-                                    title: d.title,
-                                    colorToken: d.colorToken,
-                                    index: i
-                                };
-                            else
-                                return null;
-                        });
-                        return toReturn.filter((e) => e);
-                    })
-                        .join((enter) => {
-                        enter
-                            .append('path')
-                            .attr('class', 'symbol')
-                            .attr('d', (d) => d ? this.symbolType(d.index) : null)
-                            .attr('fill', (d) => d ? this.colorFunction(d) : null)
-                            .attr('transform', (d) => d
-                            ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
-                            : null)
-                            .attr('opacity', 0)
-                            .transition()
-                            .duration(400)
-                            .ease(polyInOut)
-                            .attr('opacity', 1);
-                    }, (update) => {
-                        update
-                            .transition()
-                            .duration(400)
-                            .ease(polyInOut)
-                            .attr('d', (d) => d ? this.symbolType(d.index) : null)
-                            .attr('fill', (d) => d ? this.colorFunction(d) : null)
-                            .attr('transform', (d) => d
-                            ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
-                            : null);
-                    }, (exit) => exit.remove());
-                }
-            }, (exit) => exit.remove());
-        };
-        // Returns a symbol type given a index, currently we have support for 10 lines
-        this.symbolType = (index, size) => {
-            if (index < this.lineTypes)
-                return Symbol()
-                    .type(circle)
-                    .size(size ? size : 90)();
-            else if (index >= this.lineTypes && index < this.lineTypes * 2)
-                return Symbol()
-                    .type(diamond)
-                    .size(size ? size : 90)();
-            else
-                return Symbol()
-                    .type(star)
-                    .size(size ? size : 90)();
-        };
-        // Setting dimension variable
-        this.setDims = (onlyHeight = false) => {
-            // Get title dimensions
-            const tempTitle = select(this._titleDiv).node().getBoundingClientRect(), tempLegend = select(this._legendDiv).node().getBoundingClientRect();
-            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-            if (!onlyHeight)
-                this.dims = select(this._chartDiv).node().getBoundingClientRect();
-            this.dims.height =
-                this._maxHeight - tempLegend.height - tempTitle.height - 1.75 * rem;
-        };
-        // Resizing svg element and its children
-        this.resizeSvg = () => {
-            if (this._loading)
-                return this.loadingResize();
-            this.setDims();
-            this._svg.attr('width', this.dims.width).attr('height', this.dims.height);
-            /****  Update yAxis ****/
-            this._yAxis.range([this.dims.height - this.margin.bottom, this.margin.top]);
-            // Fixed number of y-axis lines
-            this.setYTicks(true);
-            /****  Update xAxis ****/
-            this._xAxis.range([
-                0,
-                this.dims.width - this.margin.left - this.margin.right
-            ]);
-            const ticks = Math.min(Math.max(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
-                this._tickSize) - 2, 1), this._chartData.data.xValues.length);
-            this._xAxisHandle
-                .attr('transform', 'translate(0,' + (this.dims.height - this.margin.bottom) + ')')
-                .call(axisBottom(this._xAxis)
-                .ticks(ticks)
-                .tickPadding(this.xPadding)
-                .tickFormat((d) => {
-                if (this._chartData.data.xValueNames)
-                    return this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(d)];
-                else
-                    return d;
-            }));
-            this._Tipbox
-                .attr('width', this.dims.width - this.margin.left / 2)
-                .attr('height', this.dims.height - this.margin.top - this.margin.bottom)
-                .attr('transform', `translate(${this.margin.left / 2},${this.margin.top})`);
-        };
-        // resizing chart while loading
-        this.loadingResize = () => {
-            this.setDims();
-            this._svg.attr('width', this.dims.width);
-            this.setYTicks();
-            this._xAxis.range([
-                0,
-                this.dims.width - this.margin.left - this.margin.right
-            ]);
-            const ticks = Math.min(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
-                this._tickSize) - 2, this._xAxis.domain()[1]);
-            this._xAxisHandle.call(axisBottom(this._xAxis)
-                .ticks(ticks)
-                .tickPadding(this.xPadding)
-                .tickFormat((d) => {
-                if (this._chartData.data && this._chartData.data.xValueNames)
-                    return this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(d)];
-                else
-                    return d;
-            }));
-            this._lineScale.range([
-                0,
-                this.dims.width - this.margin.left - this.margin.right
-            ]);
-            const LineFunc = line()
-                .defined((d) => d[1] != null)
-                .x((d) => this._lineScale(d[0]))
-                .y((d) => this._yAxis(d[1]))
-                .curve(basis);
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .attr('d', (d) => LineFunc(d));
-        };
-        this.resizeLines = () => {
-            if (this._loading)
-                return;
-            this._lineScale.range([
-                0,
-                this.dims.width - this.margin.left - this.margin.right
-            ]);
-            this.defineLineAndScale();
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('d', (d) => this._LineFunc(d.line));
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .selectAll('.symbol')
-                .attr('transform', (d, i) => d
-                ? `translate(${this._lineScale(this._chartData.data.xValues[i])},${this._yAxis(d.val)})`
-                : null);
-        };
-        this.colorFunction = (properties) => {
-            return properties.colorToken
-                ? getComputedStyle(document.documentElement)
-                    .getPropertyValue(properties.colorToken)
-                    .trim()
-                    .toLocaleLowerCase()
-                : this._Color(properties.title);
-        };
-        this.drawTooltipLine = (event) => {
-            if (this._toggled)
-                return this.drawDottedLine(event);
-            this.drawMainLineAndCircles(event);
-        };
-        this.closeTooltip = () => {
-            this._toggled = false;
-            this._tooltip.style('display', 'none');
-            this._secondaryLine.attr('display', 'none');
-            this._TooltipLine.attr('display', 'none');
-            this._Circles.selectAll('circle').attr('display', 'none');
-            this._Circles
-                .selectAll('circle')
-                .attr('fill', 'white')
-                .attr('stroke', (d) => this.colorFunction(d));
-            this._svg.select('.tooltipPointer').remove();
-        };
-        this.drawDottedLine = (event) => {
-            this._hoverPoint = this.closest(Math.round(this._lineScale.invert(pointer(event, this._Tipbox.node())[0] - this.margin.left / 2)));
-            if (this._hoverPoint === this._tooltipPoint)
-                return this._secondaryLine.attr('display', 'none');
-            this._secondaryLine
-                .attr('display', null)
-                .attr('stroke', 'gray')
-                .attr('stroke-dasharray', 4)
-                .attr('x1', this._xAxis(this._hoverPoint.toString()) + this.margin.left)
-                .attr('x2', this._xAxis(this._hoverPoint.toString()) + this.margin.left)
-                .attr('y1', this._yAxis(this._maxVal))
-                .attr('y2', this.dims.height - this.margin.bottom)
-                .style('pointer-events', 'none');
-        };
-        this.drawMainLineAndCircles = (event) => {
-            this._hoverPoint = this.touchPosition(event);
-            const stringPoint = this._hoverPoint.toString();
-            this._TooltipLine
-                .attr('display', null)
-                .attr('stroke', 'gray')
-                .attr('x1', this._xAxis(stringPoint) + this.margin.left)
-                .attr('x2', this._xAxis(stringPoint) + this.margin.left)
-                .attr('y1', this._yAxis(this._maxVal))
-                .attr('y2', this.dims.height - this.margin.bottom)
-                .style('pointer-events', 'none');
-            this._Circles
-                .selectAll('circle')
-                .attr('display', null)
-                .attr('pointer-events', 'none');
-            this.positionCircles(stringPoint);
-        };
-        // Returns the position/index to draw tooltip/tooltip line
-        this.touchPosition = (event) => {
-            if (event.type === 'touchmove') {
-                event.preventDefault();
-                return this.closest(Math.round(this._lineScale.invert(pointer(event.touches[0], this._Tipbox.node())[0] -
-                    this.margin.left / 2)));
-            }
-            else {
-                return this.closest(Math.round(this._lineScale.invert(pointer(event, this._Tipbox.node())[0] - this.margin.left / 2)));
-            }
-        };
-        // Function for drawing tooltip
-        this.drawTooltip = (event) => {
-            this.drawMainLineAndCircles(event);
-            this._toggled = true;
-            this._tooltipPoint = this.touchPosition(event);
-            this._tooltipDataIndex = this._chartData.data.xValues.indexOf(this._tooltipPoint);
-            // Heading
-            this._tooltip.style('display', 'flex');
-            const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
-                .select(this._tooltipHeading)
-                .style('margin', '0 0.75rem 0 0 ')
-                .html(() => {
-                if (this._chartData.data.xValueNames)
-                    return this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(this._tooltipPoint)];
-                return this._tooltipPoint;
-            });
-            // Body
-            tooltipBody
-                .selectAll('div')
-                .data(this._chartData.data.series)
-                .join('div')
-                .style('display', 'flex')
-                .style('flex-direction', 'row')
-                .style('flex-wrap', 'nowrap')
-                .style('white-space', 'nowrap')
-                .style('justify-content', 'space-between')
-                .html((d) => {
-                return d.yValues[this._tooltipDataIndex] != null
-                    ? '<span>' +
-                        d.title +
-                        '</span><span style="margin-left:0.75rem;">' +
-                        formatLocale(this.axisNumberFormat).format(this.formatStyle)(d.yValues[this._tooltipDataIndex]) +
-                        '</span>'
-                    : null;
-            });
-            this.positionTooltipWithinBounds(this._xAxis(this._tooltipPoint.toString()) + this.margin.left);
-            this._Circles
-                .selectAll('circle')
-                .attr('fill', (d) => this.colorFunction(d))
-                .attr('stroke', 'white');
-            this._svg.select('.tooltipPointer').remove();
-            const sym = Symbol().type(triangle).size(60);
-            this._svg
-                .append('path')
-                .attr('d', sym)
-                .attr('class', 'tooltipPointer')
-                .attr('fill', 'rgba(10, 10, 10, 0.90)')
-                .style('filter', 'drop-shadow(gray 0px -1px 1px)')
-                .attr('transform', `translate(${this._xAxis(this._tooltipPoint.toString()) + this.margin.left},${this._yAxis(this._maxVal) - 7}) rotate(180) scale(1.5,1.0)`);
-        };
-        this.initYAxis = (empty) => {
-            // Y Axis
-            this._yAxis = linear()
-                .domain([0, empty ? 10 : this._maxVal])
-                .nice(3)
-                .range([this.dims.height - this.margin.bottom, this.margin.top]);
-            // The magic number is just needed in initialization, because getting the exact size is impossible during the initialization
-            this.margin.left =
-                this.getTextSize(formatLocale(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1])) +
-                    this.yPadding +
-                    3;
-            this._lineChartContainer = this._svg
-                .append('g')
-                .attr('transform', `translate(${this.margin.left},0)`);
-            this._yAxisHandle = this._lineChartContainer
-                .append('g')
-                .attr('class', 'yAxis');
-            this.setYTicks(true);
-        };
-        this.initXAxis = (empty) => {
-            this._lineChartContainer.select('.xAxis').remove();
-            // X axis
-            if (!empty) {
-                if (this._chartData.data.xValueNames)
-                    this.margin.right =
-                        this.getTextSize(this._chartData.data.xValueNames[this._chartData.data.xValueNames.length - 1]) /
-                            2 +
-                            1;
-                else
-                    this.margin.right =
-                        this.getTextSize(max(this._chartData.data.xValues).toString()) /
-                            2 +
-                            1;
-            }
-            this._xAxis = linear()
-                .domain([
-                empty ? 1 : min(this._chartData.data.xValues),
-                empty ? 10 : max(this._chartData.data.xValues)
-            ]) // This is the min and the max of the data
-                .range([0, this.dims.width - this.margin.left - this.margin.right]);
-            this._lineScale = linear()
-                .domain([
-                empty ? 1 : min(this._chartData.data.xValues),
-                empty ? 10 : max(this._chartData.data.xValues)
-            ]) // This is the min and the max of the data
-                .range([0, this.dims.width - this.margin.left - this.margin.right]);
-            const ticks = Math.min(Math.max(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
-                this._tickSize) - 2, 2), empty ? 10 : this._chartData.data.xValues.length);
-            this._xAxisHandle = this._lineChartContainer
-                .append('g')
-                .attr('transform', 'translate(0,' + (this.dims.height - this.margin.bottom) + ')')
-                .attr('class', 'xAxis')
-                .style('font-size', this.fontSize)
-                .call(axisBottom(this._xAxis)
-                .ticks(ticks)
-                .tickSize(this.xTickSize)
-                .tickPadding(this.xPadding)
-                .tickFormat((d) => {
-                if (!empty && this._chartData.data.xValueNames)
-                    return this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(d)];
-                else
-                    return d;
-            }));
-            // Removing the domain
-            this._xAxisHandle.select('.domain').attr('display', 'none');
-            this._xAxisHandle
-                .selectAll('line')
-                .attr('stroke-linecap', 'round')
-                .attr('stroke', getComputedStyle(document.documentElement)
-                .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
-                .trim()
-                .toLocaleLowerCase());
-        };
-        this.positionCircles = (point, transition) => {
-            if (transition) {
-                this._Circles
-                    .selectAll('circle')
-                    .transition('positioncircles')
-                    .duration(transition)
-                    .attr('cx', () => {
-                    return this._xAxis(point) + this.margin.left;
-                })
-                    .attr('cy', (d, i, circleList) => {
-                    const selData = d.yValues[this._chartData.data.xValues.indexOf(parseInt(point))];
-                    if (this._yAxis(selData))
-                        return this._yAxis(selData);
-                    else {
-                        select(circleList[i]).attr('display', 'none');
-                        return null;
-                    }
-                });
-            }
-            else {
-                this._Circles
-                    .selectAll('circle')
-                    .attr('cx', () => {
-                    return this._xAxis(point) + this.margin.left;
-                })
-                    .attr('cy', (d, i, circleList) => {
-                    const selData = d.yValues[this._chartData.data.xValues.indexOf(parseInt(point))];
-                    if (this._yAxis(selData))
-                        return this._yAxis(selData);
-                    else {
-                        select(circleList[i]).attr('display', 'none');
-                        return null;
-                    }
-                });
-            }
-        };
-        this.repositionTooltip = () => {
-            if (!this._toggled)
-                return;
-            const stringPoint = this._chartData.data.xValues[this._tooltipDataIndex].toString();
-            this._TooltipLine
-                .attr('stroke', 'gray')
-                .attr('x1', this._xAxis(stringPoint) + this.margin.left)
-                .attr('x2', this._xAxis(stringPoint) + this.margin.left)
-                .attr('y1', this._yAxis(this._maxVal))
-                .attr('y2', this.dims.height - this.margin.bottom);
-            this.positionTooltipWithinBounds(this._xAxis(stringPoint) + this.margin.left);
-            this._svg
-                .select('.tooltipPointer')
-                .attr('transform', `translate(${this._xAxis(this._tooltipPoint.toString()) + this.margin.left},${this._yAxis(this._maxVal) - 7}) rotate(180) scale(1.5,1.0)`);
-            this.positionCircles(stringPoint);
-        };
-        // Checks if tooltip bounding box is outside svg width, if so, moves tooltip within svg bounds
-        this.positionTooltipWithinBounds = (pos, transitionTimer) => {
-            this._tooltip.style('transform', () => {
-                // We reset the position of the tooltip, and adjust for the maximum value, -1px for it to align perfectly
-                return `translateY(${this._yAxis(this._maxVal) - this._tooltip.node().getBoundingClientRect().height - 9}px)`;
-            });
-            const rect = this._chartDiv.getBoundingClientRect();
-            const comparativePosition = pos + rect.left;
-            const tooltipWidth = this._tooltip.node().getBoundingClientRect().width / 2;
-            if (rect.left < comparativePosition - tooltipWidth &&
-                rect.right > comparativePosition + tooltipWidth) {
-                this._tooltip.style('left', pos - tooltipWidth + 'px');
-            }
-            else if (rect.right < comparativePosition + tooltipWidth) {
-                this._tooltip.style('left', pos -
-                    this._tooltip.node().getBoundingClientRect().width +
-                    Math.max(this.margin.right, 10) +
-                    'px');
-            }
-            else if (rect.left > comparativePosition - tooltipWidth) {
-                if (transitionTimer)
-                    this._tooltip
-                        .transition('moveTooltip')
-                        .duration(transitionTimer)
-                        .ease(polyInOut)
-                        .style('left', pos - this.margin.left + 'px');
-                else
-                    this._tooltip.style('left', pos - this.margin.left + 'px');
-            }
-            else {
-                this._tooltip.style('left', pos -
-                    document.getElementById(this.afId).getBoundingClientRect().width / 2 +
-                    'px');
+    async handleToggle() {
+        if (this.visible) {
+            this.hideMenu();
+            this.focusOnButton();
+        }
+        else {
+            this.showMenu();
+            if (!this.isLink()) {
+                const idx = this.activeItemIdx || 0;
+                const item = this.afMenuItems[idx];
+                setTimeout(() => this.itemRefs[item.id].focus(), 25);
             }
-        };
-        this.mapColorToLine = () => {
-            // list of group names
-            this._Color = ordinal()
-                .domain(this._chartData.data.series.map(function (d) {
-                return d.title;
-            }))
-                .range([
-                '#00005a',
-                '#D43372',
-                '#058470',
-                '#0058A3',
-                '#556D22',
-                '#1616B2',
-                '#AA295B',
-                '#035548'
-            ]);
-        };
-        this.computeMaxVal = () => {
-            // Compute max value from datasets
-            this._maxVal = parseFloat(max(this._chartData.data.series, (d) => max(d['yValues'])));
-        };
-        // Updates number format if specified to be in percentage
-        this.checkPercentage = () => {
-            if (this._chartData.meta && this._chartData.meta.percentage)
-                this.formatStyle = '.1%';
-            else
-                this.formatStyle = ',d';
-        };
-        this.closest = (target) => {
-            return this._chartData.data.xValues.reduce(function (prev, curr) {
-                return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
-            });
-        };
-        // Removes resize observer for chart and inits table
-        this.activateTable = (event) => {
-            this.closeTooltip();
-            this.lineChartObserver.disconnect();
-            this.tableObserver.observe(this._chartDiv);
-            this._status.innerHTML = '<p>Visas som tabell</p>';
-            select(this._host).select('.tableButton').style('display', 'none');
-            select(this._host).select('.chartButton').style('display', null);
-            event.target.nextSibling.lastChild.focus();
-            const duration = 150;
-            this._svg
-                .attr('opacity', 1)
-                .transition('fadeout')
-                .duration(duration)
-                .attr('opacity', 0)
-                .on('end', () => {
-                this._svg.remove();
-                this._legendDiv.style['display'] = 'none';
-                this._tableDiv.style['display'] = 'block';
-                this.setTableContent();
-                this.setTableDimensions();
-                select(this._tableDiv)
-                    .style('opacity', 0)
-                    .transition('fadein')
-                    .duration(duration)
-                    .style('opacity', 1);
-            });
-            select(this._legendDiv)
-                .style('opacity', 1)
-                .transition('fadeout')
-                .duration(duration)
-                .style('opacity', 0);
-        };
-        // Resize table
-        this.resizeTable = () => {
-            this.setDims();
-            this.setTableDimensions();
-        };
-        // Removes observer and calls init functions for line chart
-        this.reInitChart = (event) => {
-            this.tableObserver.disconnect();
-            this._status.innerHTML = '<p>Visas som diagram</p>';
-            select(this._host).select('.tableButton').style('display', null);
-            select(this._host).select('.chartButton').style('display', 'none');
-            event.target.previousSibling.lastChild.focus();
-            const table = select(this._tableDiv);
-            table
-                .style('opacity', 1)
-                .transition()
-                .duration(150)
-                .style('opacity', 0)
-                .on('end', () => {
-                table.style('display', 'none');
-                this.initSvg();
-                this.initLines();
-                this._svg
-                    .attr('opacity', 0)
-                    .transition()
-                    .duration(150)
-                    .attr('opacity', 1);
-                select(this._legendDiv)
-                    .style('display', null)
-                    .style('opacity', 0)
-                    .transition()
-                    .duration(150)
-                    .style('opacity', 1);
-            });
-        };
-        this.afHeadingLevel = undefined;
-        this.afId = randomIdGenerator('tooltip');
-        this.afChartData = undefined;
+        }
     }
-    afChartDataUpdate() {
-        const data = this.afChartData;
-        if (typeof data === 'object') {
-            this._chartData = Object.assign({}, data);
-            return;
+    async focusOnButton() {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        const digiButton = this.buttonRef;
+        const button = (await digiButton.afMGetButtonElement());
+        button.focus();
+    }
+    handleChangeItem(item, idx) {
+        this.activeItemIdx = idx;
+        this.handleToggle();
+        this.afChangeItem.emit({ item, idx });
+    }
+    handleRef(ref, refId, payload) {
+        if (refId === 'item') {
+            this.itemRefs[payload.id] = ref;
         }
-        this._chartData = JSON.parse(data);
-        // Making deep copy of this
-        if (this._chartData.data)
-            this._coreSeries = JSON.parse(JSON.stringify(this._chartData.data.series));
     }
-    initSvg() {
-        this.margin.bottom =
-            Number(window
-                .getComputedStyle(document.body)
-                .getPropertyValue('font-size')
-                .match(/\d+/)[0]) *
-                Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, '')) +
-                this.xPadding +
-                this.xTickSize;
-        this.lineChartObserver.observe(this._chartDiv);
-        select(this._chartDiv).select('svg').remove();
-        // Initialize an empty div, that we can place info in for tooltip
-        // Styling for tooltip is in .scss file
-        this._tooltip = select('#' + this.afId);
-        this._tooltip.select('.close').on('click', this.closeTooltip);
-        this._tooltipHeading =
-            'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
-        // Add heading placeholder for heading
-        this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
-            .style('margin', '0 0.75rem')
-            .style('font-weight', '500');
-        this._maxHeight = select(this._host)
-            .node()
-            .parentNode.getBoundingClientRect().height;
-        this.setDims();
-        this.setTickSize();
-        this.checkPercentage();
-        select(this._chartDiv).attr('height', this.dims.height + 'px');
-        // Appending svg
-        this._svg = select(this._chartDiv)
-            .append('svg')
-            .attr('aria-hidden', true)
-            .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Linjediagram om ' + this._chartData.title.toLowerCase()
-            : 'Linjediagram');
-        this._svg.attr('width', this.dims.width).attr('height', this.dims.height);
-        this.mapColorToLine();
-        this._TooltipLine = this._svg
-            .append('line')
-            .attr('id', 'toolTipLine' + this.afId);
-        this._secondaryLine = this._svg
-            .append('line')
-            .attr('id', 'secondaryLine' + this.afId);
-        this.computeMaxVal();
-        this.initYAxis();
-        this.initXAxis();
-        this._Tipbox = this._svg
-            .append('rect')
-            .attr('class', 'svgRect')
-            .attr('width', this.dims.width - this.margin.left / 2)
-            .attr('height', this.dims.height - this.margin.top - this.margin.bottom)
-            .attr('opacity', 0)
-            .attr('transform', `translate(${this.margin.left / 2},0)`);
-        this.addListenersToChart();
-        this._Circles = this._svg
-            .append('g')
-            .attr('class', 'circleGroup')
-            .on('mousemove', this.drawTooltipLine);
-        this._Circles
-            .selectAll('circle')
-            .data(this._chartData.data.series)
-            .join('circle')
-            .attr('stroke', (d) => this.colorFunction(d))
-            .attr('fill', 'white')
-            .attr('stroke-width', '1px')
-            .attr('r', 7)
-            .attr('display', 'none');
-        select(window).on('resize.' + this.afId, this.repositionTooltip);
+    isActive(idx) {
+        if ((this.activeItemIdx !== undefined || this.activeItemIdx !== null) &&
+            this.activeItemIdx === idx) {
+            return true;
+        }
+        return false;
     }
-    // Initializing chart with empty dataset
-    initEmpty() {
-        this.margin.bottom =
-            Number(window
-                .getComputedStyle(document.body)
-                .getPropertyValue('font-size')
-                .match(/\d+/)[0]) *
-                Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, '')) +
-                this.xPadding +
-                this.xTickSize;
-        select(this._chartDiv).select('svg').remove();
-        // Initialize an empty div, that we can place info in for tooltip
-        // Styling for tooltip is in .scss file
-        this._tooltip = select('#' + this.afId);
-        select('digi-icon-x').on('click', this.closeTooltip);
-        this._tooltipHeading =
-            'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
-        // Add heading placeholder for heading
-        this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
-            .style('margin', '0 0.75rem')
-            .style('font-weight', '500');
-        this._maxHeight = select(this._host)
-            .node()
-            .parentNode.getBoundingClientRect().height;
-        this.setDims();
-        select(this._chartDiv).attr('height', this.dims.height + 'px');
-        this._svg = select(this._chartDiv)
-            .append('svg')
-            .attr('aria-hidden', true);
-        this._svg.attr('width', this.dims.width).attr('height', this.dims.height);
-        this._TooltipLine = this._svg
-            .append('line')
-            .attr('id', 'toolTipLine' + this.afId);
-        this._secondaryLine = this._svg
-            .append('line')
-            .attr('id', 'secondaryLine' + this.afId);
-        this.initYAxis(true);
-        this.initXAxis(true);
-        this._Tipbox = this._svg
-            .append('rect')
-            .attr('class', 'svgRect')
-            .attr('width', this.dims.width - this.margin.left / 2)
-            .attr('height', this.dims.height - this.margin.top - this.margin.bottom)
-            .attr('opacity', 0)
-            .attr('transform', `translate(${this.margin.left / 2},0)`);
-        this._Circles = this._svg
-            .append('g')
-            .attr('class', 'circleGroup')
-            .on('mousemove', this.drawTooltipLine);
-        this.defineLineAndScale();
-        this.lineChartObserver.observe(this._chartDiv);
-        this.loadingState(true);
+    isSelected(idx) {
+        return this.selectItemIdx === idx;
     }
-    loadingState(empty) {
-        this._loading = true;
-        select('.tableButton').style('display', 'none');
-        const duration = 400;
-        const LineFunc = line()
-            .defined((d) => d[1] != null)
-            .x((d) => this._lineScale(d[0]))
-            .y((d) => this._yAxis(d[1]))
-            .curve(basis);
-        // close potentially open tooltip
-        this.closeTooltip();
-        // Remove hover listeners from chart
-        this._Tipbox
-            .style('cursor', 'wait')
-            .on('mousemove', null)
-            .on('touchmove', null)
-            .on('mouseup', null)
-            .on('mouseleave', null);
-        select(this._titleDiv)
-            .select(this.afHeadingLevel)
-            .html(`${_t.loading}...`);
-        const height = select(this._titleDiv).style('height');
-        select(this._titleDiv)
-            .style('height', this._prevHeight)
-            .transition('adjust')
-            .duration(400)
-            .style('height', height)
-            .on('end', () => select(this._titleDiv).style('height', null));
-        select(this._legendDiv).style('display', 'none');
-        const animateRandomLine = () => {
-            let firstVal = this._xAxis.domain()[0];
-            const randomData = [...Array(this._xAxis.domain()[1])].map(() => {
-                const dataPoint = [
-                    firstVal,
-                    Math.round(Math.random() * this._yAxis.domain()[1] * 100) / 100
-                ]; // This assumes domain is from 0 to maxVal
-                firstVal++;
-                return dataPoint;
-            });
-            this._lineChartContainer.selectAll('.linePath').remove();
-            this._lineChartContainer
-                .selectAll('linePath')
-                .data([randomData])
-                .join('path')
-                .attr('class', 'linePath')
-                .attr('stroke', 'lightgray')
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 4)
-                .attr('fill', 'none')
-                .attr('d', (d) => LineFunc(d))
-                .transition()
-                .duration(duration * 3)
-                .ease(quadInOut)
-                .attrTween('stroke-dasharray', function () {
-                const length = this.getTotalLength();
-                return interpolate(`0,${length}`, `${length},${length}`);
-            })
-                .on('end', () => {
-                this._lineChartContainer
-                    .selectAll('.linePath')
-                    .attr('stroke-dasharray', function () {
-                    const length = this.getTotalLength();
-                    return length + ' ' + length;
-                })
-                    .attr('stroke-dashoffset', 0)
-                    .transition()
-                    .duration(duration * 3)
-                    .ease(quadInOut)
-                    .attr('stroke-dashoffset', function () {
-                    return -this.getTotalLength();
-                })
-                    .on('end', () => animateRandomLine());
-            });
-        };
-        const flattenLines = () => {
-            const data = this._lineChartContainer
-                .selectAll('.linePath')
-                .data()
-                .map((elem) => {
-                elem.line = elem.line.map((point) => {
-                    return point[1]
-                        ? [point[0], this._yAxis.domain()[0]]
-                        : [point[0], undefined];
-                });
-                return elem;
-            });
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .data(data)
-                .transition()
-                .duration(duration)
-                .ease(polyInOut)
-                .attr('d', (d) => this._LineFunc(d.line))
-                .on('end', (...[, i]) => (i === 0 ? animateRandomLine() : null));
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .selectAll('.symbol')
-                .transition()
-                .duration(duration)
-                .ease(linear$1)
-                .attr('transform', (d) => d
-                ? `translate(${this._lineScale(d.x)},${this._yAxis(this._yAxis.domain()[0])})`
-                : null)
-                .attr('opacity', 0);
-        };
-        // Start loadingstate, either from empty set or last set
-        if (empty)
-            animateRandomLine();
-        else
-            flattenLines();
-    }
-    updateSvg() {
-        // displaying legend again
-        if (this._loading) {
-            select(this._host).select('.tableButton').style('display', null);
-            select(this._legendDiv).style('display', null);
-            select(this._titleDiv).style('height', null);
+    nextIdx(idx) {
+        if (idx > this.afMenuItems.length - 1) {
+            return 0;
         }
-        if (this._chartData.data.xValueNames)
-            this.margin.right =
-                this.getTextSize(this._chartData.data.xValueNames[this._chartData.data.xValueNames.length - 1]) /
-                    2 +
-                    1;
-        else
-            this.margin.right =
-                this.getTextSize(max(this._chartData.data.xValues).toString()) / 2 +
-                    1;
-        this.checkPercentage();
-        this.setDims(true);
-        this.mapColorToLine();
-        this.computeMaxVal();
-        this.setTickSize();
-        select(this._chartDiv).attr('height', this.dims.height + 'px');
-        // Updating Svg attributes
-        this._svg
-            .attr('width', this.dims.width + 'px')
-            .attr('height', this.dims.height + 'px')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Linjediagram om ' + this._chartData.title.toLowerCase()
-            : 'Linjediagram');
-        // Y Axis
-        this._yAxis = linear()
-            .domain([0, this._maxVal])
-            .nice(3)
-            .range([this.dims.height - this.margin.bottom, this.margin.top]);
-        // Updating margins
-        this.margin.left =
-            this.getTextSize(formatLocale(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1])) +
-                this.yPadding +
-                3;
-        /****  Update xAxis ****/
-        const oldDomain = this._xAxis.domain();
-        this.initXAxis();
-        this._lineChartContainer
-            .transition('position')
-            .duration(400)
-            .ease(polyInOut)
-            .attr('width', this.dims.width)
-            .attr('height', this.dims.height)
-            .attr('transform', `translate(${this.margin.left},0)`);
-        this.setYTicks();
-        this.defineLineAndScale();
-        //this.leftSetAxis();
-        this.addSymbols(true);
-        if (this._loading) {
-            select(this._host).select('.tableButton').style('display', null);
-            this.addListenersToChart();
-            const height = select(this._titleDiv).style('height');
-            select(this._titleDiv)
-                .style('height', this._prevHeight)
-                .transition('adjust')
-                .duration(400)
-                .style('height', height)
-                .on('end', () => select(this._titleDiv).style('height', null));
-            select(this._legendDiv)
-                .style('opacity', 0)
-                .transition()
-                .duration(400)
-                .ease(polyInOut)
-                .style('opacity', 1);
-            this._lineChartContainer.selectAll('.linePath').on('end', null);
-            // Setting starting state for symbols
-            this._lineChartContainer
-                .selectAll('.symbolGroup')
-                .selectAll('.symbol')
-                .attr('opacity', 0)
-                .attr('transform', (d) => d
-                ? `translate(${this._lineScale(d.x)},${this._yAxis(this._yAxis.domain()[0])})`
-                : null);
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .transition()
-                .duration(400)
-                .ease(quadInOut)
-                .attr('stroke-dashoffset', function () {
-                return -this.getTotalLength();
-            })
-                .on('end', () => {
-                this._lineChartContainer
-                    .selectAll('.linePath')
-                    .data(this.reshapeData(this._chartData.data.series))
-                    .join('path')
-                    .attr('class', 'linePath')
-                    .attr('stroke', (d) => this.colorFunction(d))
-                    .attr('stroke-linecap', 'round')
-                    .attr('stroke-width', 4)
-                    .attr('fill', 'none')
-                    .attr('stroke-dasharray', this.dashFunction)
-                    .attr('stroke-dashoffset', null)
-                    .attr('d', (d) => this._LineFunc(d.line.map((pair) => [
-                    pair[0],
-                    this._yAxis.domain()[0]
-                ])));
-                // Transitioning in lines
-                this._lineChartContainer
-                    .selectAll('.linePath')
-                    .transition()
-                    .duration(400)
-                    .ease(polyInOut)
-                    .attr('d', (d) => this._LineFunc(d.line));
-                // Transitioning in symbols
-                this._lineChartContainer
-                    .selectAll('.symbolGroup')
-                    .selectAll('.symbol')
-                    .transition()
-                    .duration(400)
-                    .ease(polyInOut)
-                    .attr('transform', (d) => d
-                    ? `translate(${this._lineScale(d.x)},${this._yAxis(d.val)})`
-                    : null)
-                    .attr('opacity', 1);
-                this._loading = false;
-            });
+        else if (idx < 0) {
+            return this.afMenuItems.length - 1;
         }
         else {
-            this._lineChartContainer
-                .selectAll('.linePath')
-                .data(this.reshapeData(this._chartData.data.series))
-                .join('path')
-                .transition()
-                .duration(400)
-                .ease(polyInOut)
-                .attr('class', 'linePath')
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
-                .attr('fill', 'none')
-                .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
-                .attr('d', (d) => this._LineFunc(d.line));
+            return idx;
         }
-        // If we have the exact same domain, the tooltip may continue to be active
-        if (this._toggled && oldDomain === this._xAxis.domain()) {
-            const stringPoint = this._chartData.data.xValues[this._tooltipDataIndex].toString();
-            this._Circles
-                .selectAll('circle')
-                .data(this._chartData.data.series)
-                .join('circle')
-                .transition('New circles')
-                .duration(400)
-                .ease(polyInOut)
-                .attr('stroke', 'white')
-                .attr('fill', (d) => this.colorFunction(d))
-                .attr('stroke-width', '1px')
-                .attr('r', 7);
-            this.positionCircles(stringPoint, 400);
-            const oldPos = this._TooltipLine.attr('y1');
-            this._TooltipLine
-                .transition()
-                .duration(400)
-                .ease(polyInOut)
-                .attr('x1', this._xAxis(stringPoint) + this.margin.left)
-                .attr('x2', this._xAxis(stringPoint) + this.margin.left)
-                .attr('y1', this._yAxis(this._maxVal))
-                .attr('y2', this.dims.height - this.margin.bottom);
-            const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
-                .select(this._tooltipHeading)
-                .style('margin', '0 0.75rem')
-                .html(() => {
-                if (this._chartData.data.xValueNames)
-                    return this._chartData.data.xValueNames[this._tooltipPoint - 1];
-                return this._tooltipPoint;
-            });
-            // Body
-            tooltipBody
-                .selectAll('div')
-                .data(this._chartData.data.series)
-                .join('div')
-                .style('display', 'flex')
-                .style('flex-direction', 'row')
-                .style('flex-wrap', 'nowrap')
-                .style('white-space', 'nowrap')
-                .style('justify-content', 'space-between')
-                .html((d) => {
-                return ('<span>' +
-                    d.title +
-                    ':&nbsp</span><span class="tooltipVal">' +
-                    d.yValues[this._tooltipDataIndex] +
-                    '</span>');
-            });
-            this.positionTooltipWithinBounds(this._xAxis(stringPoint) + this.margin.left, 400);
-            this._tooltip
-                .style('transform', () => {
-                // We reset the position of the tooltip, and adjust for the maximum value, -1px for it to align perfectly
-                return `translateY(${oldPos - this._tooltip.node().getBoundingClientRect().height - 9}px)`;
-            })
-                .transition()
-                .duration(400)
-                .ease(polyInOut)
-                .style('transform', () => {
-                // We reset the position of the tooltip, and adjust for the maximum value, -1px for it to align perfectly
-                return `translateY(${this._yAxis(this._maxVal) - this._tooltip.node().getBoundingClientRect().height - 9}px)`;
-            });
-            this._svg
-                .select('.tooltipPointer')
-                .transition()
-                .duration(400)
-                .ease(polyInOut)
-                .attr('transform', `translate(${this._xAxis(stringPoint) + this.margin.left},${this._yAxis(this._maxVal) - 7}) rotate(180) scale(1.5,1.0)`);
-        }
-        else {
-            this._Circles
-                .selectAll('circle')
-                .data(this._chartData.data.series)
-                .join('circle')
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('fill', 'white')
-                .attr('stroke-width', '1px')
-                .attr('r', 7)
-                .attr('display', 'none');
-            this.closeTooltip();
-        }
-    }
-    componentWillLoad() {
-        this.afChartDataUpdate();
-    }
-    componentDidLoad() {
-        if (Object.keys(this._chartData).length === 0)
-            return this.initEmpty();
-        // clearing selection
-        this._selectedLines = [];
-        this.initSvg();
-        this.initLegend();
-        this.initLines();
-        document.fonts.onloadingdone = () => {
-            this.setTickSize();
-            this.resizeSvg();
-        };
-    }
-    componentWillUpdate() {
-        this._prevHeight = select(this._titleDiv).style('height');
     }
-    componentDidUpdate() {
-        if (Object.keys(this._chartData).length === 0)
-            return this.loadingState();
-        // clearing selection
-        this._selectedLines = [];
-        this.updateSvg();
-        this.initLegend();
-        this.updateTableContent();
-    }
-    disconnectedCallback() {
-        this.lineChartObserver.disconnect();
-    }
-    // Returns pixelwidth of text given the current fontSize (costly function using .each)
-    getTextSize(text) {
-        const textWidth = [];
-        const svg = select(this._chartDiv).append('svg');
-        svg
-            .selectAll('dummyText')
-            .data([text])
-            .join('text')
-            .attr('font-size', this.fontSize)
-            .attr('font-family', 'sans-serif')
-            .text((d) => d)
-            .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life 
-            textWidth.push(thisWidth);
-            nodelist[i].remove();
-        });
-        svg.remove().exit();
-        return textWidth[0];
-    }
-    // Goes through all tick values and checks the biggest in size, this one will decide the default tick-size
-    setTickSize() {
-        // Padding on both sides comined
-        const textPadding = 25; // 12.5 pixel padding on each side
-        if (this._chartData.data.xValueNames) {
-            for (const elem of this._chartData.data.xValueNames) {
-                const size = this.getTextSize(elem) + textPadding;
-                if (size > this._tickSize)
-                    this._tickSize = size;
-            }
-        }
-        else {
-            for (const elem of this._chartData.data.xValues) {
-                const size = this.getTextSize(elem.toString()) + textPadding;
-                if (size > this._tickSize)
-                    this._tickSize = size;
-            }
+    activateItem(idx) {
+        const item = this.afMenuItems[idx];
+        this.activeItemIdx = idx;
+        this.focusItem(idx);
+        this.handleChangeItem(item, idx);
+    }
+    focusItem(idx) {
+        var _a;
+        const item = this.afMenuItems[idx];
+        this.selectItemIdx = idx;
+        (_a = this.itemRefs[item.id]) === null || _a === void 0 ? void 0 : _a.focus();
+        this.afFocusItem.emit({ item, idx });
+    }
+    focusCaptured() {
+        const menuItems = this.afMenuItems;
+        return menuItems.some((item) => this.itemRefs[item.id] === document.activeElement);
+    }
+    handleKey(e) {
+        if (!this.focusCaptured())
+            return;
+        switch (e.key) {
+            case 'ArrowUp':
+                this.focusItem(this.nextIdx(this.selectItemIdx - 1));
+                break;
+            case 'ArrowDown':
+                this.focusItem(this.nextIdx(this.selectItemIdx + 1));
+                break;
+            case 'Escape':
+                this.hideMenu();
+                this.focusOnButton();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                e.stopPropagation();
+                this.activateItem(this.selectItemIdx);
+                break;
         }
     }
-    // Left-orients Y-axis text
-    leftSetAxis(init = false) {
-        const shiftArray = [];
-        if (!init) {
-            this._yAxisHandle
-                .selectAll('text')
-                .transition('shuffle text')
-                .duration(400)
-                .attr('transform', (...[, i, nodelist]) => {
-                const size = nodelist[i].getComputedTextLength();
-                shiftArray.push(size);
-                return `translate(${-1 * (this.margin.left - (size + this.yPadding))},0)`;
-            });
-            this._yAxisHandle
-                .selectAll('line')
-                .transition('shuffle line')
-                .duration(400)
-                .attr('x1', (...[, i]) => {
-                return -1 * (this.margin.left - (shiftArray[i] + this.yPadding));
-            });
+    handleLinkClick(e, item, idx) {
+        if (!item.overrideLink) {
+            window.location.assign(item.href);
         }
         else {
-            this._yAxisHandle
-                .selectAll('text')
-                .attr('transform', (...[, i, nodelist]) => {
-                const size = nodelist[i].getComputedTextLength();
-                shiftArray.push(size);
-                return `translate(${-1 * (this.margin.left - (size + this.yPadding))},0)`;
-            });
-            this._yAxisHandle.selectAll('line').attr('x1', (...[, i]) => {
-                return -1 * (this.margin.left - (shiftArray[i] + this.yPadding));
-            });
+            e.preventDefault();
+            this.handleChangeItem(item, idx);
         }
     }
-    // Updating data if content changes
-    updateTableContent() {
-        if (this._tableDiv.style['display'] === '' ||
-            this._tableDiv.style['display'] === 'none')
-            return;
-        this.setTableContent();
-        this.animateTableDimensions();
-    }
-    // Setting table content from this._chartData
-    setTableContent() {
-        this._tableDiv.innerHTML = `<digi-table af-size="small" af-variation="primary"> <table><caption>${this._chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
-    }
-    setTableDimensions() {
-        const table = select(this._tableDiv);
-        table
-            // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
-            .style('height', this._maxHeight -
-            select(this._titleDiv).node().getBoundingClientRect().height -
-            parseFloat(getComputedStyle(document.documentElement).fontSize) *
-                0.65 +
-            'px');
-        table.style('width', this.dims.width -
-            parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.65 +
-            'px');
-    }
-    animateTableDimensions() {
-        const height = select(this._titleDiv).style('height');
-        select(this._titleDiv)
-            .style('height', this._prevHeight)
-            .transition('adjust')
-            .duration(400)
-            .style('height', height)
-            .on('end', () => select(this._titleDiv).style('height', null));
-        const table = select(this._tableDiv);
-        table
-            .transition('adjustHeight')
-            .duration(400)
-            // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
-            .style('height', this._maxHeight -
-            (parseFloat(height) +
-                parseFloat(getComputedStyle(document.documentElement).fontSize) *
-                    1.25) -
-            parseFloat(getComputedStyle(document.documentElement).fontSize) *
-                0.65 +
-            'px');
-        table.style('width', this.dims.width -
-            parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.65 +
-            'px');
-    }
-    // Extracting all headings from data and returning a string with <th>-elements with headings
-    headings() {
-        let headingsString = `<th scope="col">${this._chartData.x}</th>`;
-        this._coreSeries.forEach((elem) => {
-            headingsString = headingsString.concat(`<th scope="col">${elem.title}</th>`);
-        });
-        return headingsString;
-    }
-    // Building the table body
-    tableBody() {
-        let body = '';
-        const loopable = this._chartData.data.xValueNames
-            ? this._chartData.data.xValueNames
-            : this._chartData.data.xValues;
-        loopable.forEach((elem, index) => {
-            let cells = '';
-            this._coreSeries.forEach((serie) => {
-                cells = cells.concat(`<td>${serie.yValues[index] != null ? formatLocale(this.axisNumberFormat).format(this.formatStyle)(serie.yValues[index]) : '-'}</td>`);
-            });
-            body = body.concat(`<tr><th scope='row'>${elem}${cells}</th></tr>`);
-        });
-        return body;
+    renderLink(item, idx) {
+        const menuItem = this.afMenuItems[idx];
+        return (h("li", { id: `${this.afId}-listbox-item-${item.id}`, key: item.id, class: {
+                'digi-navigation-context-menu__item': true,
+                'digi-navigation-context-menu__item--link': true,
+                'digi-navigation-context-menu__item--active': this.isActive(idx)
+            }, dir: this.afDir, lang: this.afLang, ref: (ref) => { var _a; return (_a = this.handleRef) === null || _a === void 0 ? void 0 : _a.call(this, ref, 'item', item); } }, h("a", { "aria-label": item.ariaLabel ? item.ariaLabel : null, href: menuItem.href ? menuItem.href : null, onClick: (e) => this.handleLinkClick(e, item, idx) }, item.title)));
+    }
+    renderDiv(item, idx) {
+        return (h("div", { role: "option", id: `${this.afId}-listbox-item-${item.id}`, key: item.id, class: {
+                'digi-navigation-context-menu__item': true,
+                'digi-navigation-context-menu__item--active': this.isActive(idx)
+            }, dir: this.afDir, lang: this.afLang, "aria-selected": this.isActive(idx).toString(), tabIndex: this.isSelected(idx) ? 0 : -1, onClick: () => { var _a; return (_a = this.handleChangeItem) === null || _a === void 0 ? void 0 : _a.call(this, item, idx); }, ref: (ref) => { var _a; return (_a = this.handleRef) === null || _a === void 0 ? void 0 : _a.call(this, ref, 'item', item); } }, h("div", { class: "content-wrapper" }, h("digi-icon-check", { class: "digi-navigation-context-menu__button-icon", slot: "icon", style: {
+                visibility: idx === this.activeItemIdx && this.visible
+                    ? 'visible'
+                    : 'hidden'
+            } }), h("span", { "aria-label": item.ariaLabel ? item.ariaLabel : null }, item.title)), ' '));
     }
     render() {
-        let heading = '';
-        if (!this._chartData.subTitle)
-            heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
-        else
-            heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        const menuItems = this.afMenuItems;
+        return (h(Host, { key: '8b9ddb1d31e294505f5ae3f226510ba587ecfc04', class: 'digi-navigation-context-menu' }, h("div", { key: 'bcc94554eb00a58409b7cae6a5c3668767ddb26d', id: `${this.afId}-identifier`, class: "digi-navigation-context-menu--id-wrapper" }, h("digi-button", { key: '287e0f1f1afba43c8250185e5ea589aa26c5367c', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
+                'digi-navigation-context-menu__trigger-button': true,
+                'digi-navigation-context-menu--active': this.visible
+            } }, !!this.afIcon && h(this.digiIcon, { key: 'db42fdd3432f87096be2e5da8b3e05732b0aedf4', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '7977ded8cc5a7aa0aec7e2735dc38f95a4d31a06', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '5ff21d52bb2f57c8777bd04bf906730c960bc054', class: "digi-navigation-context-menu__list" }, h("div", { key: 'a8e81ab1b3c371ef501bf96f7c14c11d54a97836', onKeyDown: (e) => {
+                this.handleKey(e);
+            }, id: `${this.afId}-dropdown`, style: {
+                visibility: this.visible ? 'visible' : 'hidden'
+            }, role: this.isLink() ? 'list' : 'listbox', "aria-labelledby": `${this.afId}-trigger`, class: {
+                'dropdown-wrapper': true,
+                'dropdown-wrapper--visible': this.visible,
+                'dropdown-wrapper--position-right': this.afMenuPosition === 'right-bottom',
+                'dropdown-wrapper--position-center': this.afMenuPosition === 'center-bottom'
+            } }, menuItems &&
+            menuItems.map((item, idx) => {
+                const menuItem = menuItems[idx];
+                if (menuItem.type && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) === 'link') {
+                    return this.renderLink(item, idx);
+                }
+                return this.renderDiv(item, idx);
+            }))))));
     }
-    get element() { return getElement(this); }
     static get watchers() { return {
-        "afChartData": ["afChartDataUpdate"]
+        "afActiveItem": ["syncActiveItem"],
+        "afMenuItems": ["syncItems"]
     }; }
 };
-ChartLine.style = DigiChartLineStyle0;
+ContextMenu.style = DigiContextMenuStyle0;
 
-const iconChartCss = ".sc-digi-icon-chart-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chart-h svg.sc-digi-icon-chart{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
-const DigiIconChartStyle0 = iconChartCss;
+const iconCheckCss = ".sc-digi-icon-check-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-check-h svg.sc-digi-icon-check{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconCheckStyle0 = iconCheckCss;
 
-const IconChart = class {
+const IconCheck = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.afTitle = undefined;
@@ -2443,19 +366,19 @@ const IconChart = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '16fa86185d0c09aca9cba8c771b007e8da0f33fe', width: "56", height: "62", viewBox: "0 0 56 62", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'b93763762cb15da9dd043c599d28801dd1b7b6d2', class: "digi-icon-check", width: "23", height: "18", viewBox: "0 0 23 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined }, h("title", { key: '36b652e61c6fcf06ac8f7f2440c6db532330fefd' }, "Chart"), this.afTitle && h("title", { key: '7e849c2dec73881e6d69ca01f3be4b79450c707c', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '507107a648cb518b296a97c0fb55fe1614ea96e2' }, this.afDesc), h("defs", { key: '2fa14be022112356237148f175862a94bba776df' }, h("polygon", { key: 'c3200df2ca6d403cb829772fa66e8c3995c4dcd9', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("polygon", { key: '9b8af3cbaee3f0b21d0bd55054b57a203c812d8e', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), h("g", { key: 'ff03cd865063a27189ccf82fd2c701bcaa8067a9', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'cc604bbc6a53c122295fbb641fd296fc3824019c', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, h("g", { key: '6f4ac52c2ff705f933f68fda82bd23c1dffd32a9', transform: "translate(1013.063248, 823.768116)" }, h("g", { key: 'd76200f0fafa52c56dc6787def0aa2570e05ea33', id: "Group", transform: "translate(-0.000000, 0.000000)" }, h("path", { key: '604cd4482c210807d5a46877fbf318a8b80abc75', d: "M11.2871933,17.0724638 L3.19179715,17.0724638 C1.47642907,17.0724638 0.0891563449,18.5157634 0.0891563449,20.3004089 L0,39.003939 C0,40.7885845 1.38727273,42.2318841 3.1026408,42.2318841 L11.1980369,42.2318841 C12.913405,42.2318841 14.3006777,40.7885845 14.3006777,39.003939 L14.3898341,20.3004089 C14.3898341,18.5157634 12.9989951,17.0724638 11.2871933,17.0724638", id: "Fill-1", fill: "currentColor" }), h("path", { key: '1e6689f0e175c46119bade00fb2f3a1309174771', d: "M31.292107,11.2318841 L23.077661,11.2318841 C21.3370669,11.2318841 19.9293931,12.6247 19.9293931,14.3469222 L19.8389256,39.1168459 C19.8389256,40.8354877 21.2465994,42.2318841 22.9871935,42.2318841 L31.2016396,42.2318841 C32.9422337,42.2318841 34.3499075,40.8354877 34.3499075,39.1168459 L34.4403749,14.3469222 C34.4403749,12.6247 33.0290824,11.2318841 31.292107,11.2318841", id: "Fill-3", fill: "currentColor" }), h("path", { key: 'e330afda18dce8a563536cc7caa97e22438fde24', d: "M51.0899571,0 L43.0444095,0 C41.339604,0 39.9608736,1.42791855 39.9608736,3.19354534 L39.7836589,39.0420095 C39.7836589,40.8039655 41.1659336,42.2318841 42.8671948,42.2318841 L50.9162867,42.2318841 C52.6175479,42.2318841 53.9962783,40.8039655 53.9962783,39.0420095 L54.173493,3.19354534 C54.173493,1.42791855 52.7912183,0 51.0899571,0", id: "Fill-6", fill: "currentColor" }), h("polygon", { key: 'f2ceda4f246b04bb146a3e5339f45e86a253840e', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("g", { key: 'e25d52aba3921e0ac509e45c621f71aa5511a2d0', id: "Clip-4" }), h("polygon", { key: '18fbd043c2aa0072efc4519123e5eee5a51c3c86', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), h("g", { key: 'd30388dfdc1ff1ceb0643819e034532166f332ed', id: "Clip-9" }), h("path", { key: '037a94cff19391bac5b81666e244f6d57c0340df', d: "M2.64246183,-0.393115942 L24.287738,-0.393115942 C24.783165,-0.393115942 25.2716142,-0.501190406 25.7216852,-0.713736852 L51.853716,-12.8829215 C53.6086441,-13.6970825 54.3936517,-15.8297519 53.5981773,-17.6454029 C52.8027029,-19.4610539 50.7372607,-20.2680099 48.9858215,-19.4466439 L23.5376196,-7.59808021 L2.64246183,-7.59808021 C0.716576525,-7.59808021 -0.846460828,-5.98777069 -0.846460828,-3.99559807 C-0.846460828,-2.00342546 0.716576525,-0.393115942 2.64246183,-0.393115942", id: "Fill-8", fill: "currentColor", mask: "url(#mask-4)" })))))));
+                    : undefined }, this.afTitle && h("title", { key: '50601b1e8c8eaf8a33d0a1074005e9c65b87113d', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '06f9aacdab41e114f4f47f690ece821651ac4ee3' }, this.afDesc), h("path", { key: '1af3c61a39655f9002f6826fc8beaf48b2a976b1', class: "digi-icon-check__shape", d: "M20.547.18L7.315 13.627 2.453 8.686a.597.597 0 00-.853 0L.177 10.132a.62.62 0 000 .868l6.711 6.82c.236.24.618.24.854 0L22.823 2.493a.62.62 0 000-.867L21.4.18a.597.597 0 00-.853 0z", fill: "currentColor", "fill-rule": "nonzero" })));
     }
 };
-IconChart.style = DigiIconChartStyle0;
+IconCheck.style = DigiIconCheckStyle0;
 
-const iconTableCss = ".sc-digi-icon-table-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-table-h svg.sc-digi-icon-table{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
-const DigiIconTableStyle0 = iconTableCss;
+const iconChevronDownCss = ".sc-digi-icon-chevron-down-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-down-h svg.sc-digi-icon-chevron-down{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconChevronDownStyle0 = iconChevronDownCss;
 
-const IconTable = class {
+const IconChevronDown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.afTitle = undefined;
@@ -2465,36 +388,58 @@ const IconTable = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '7a55b48df78a8e9057dffe6e2089891ed68e4526', class: "digi-icon-table", width: "62px", height: "62px", viewBox: "0 0 62 62", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '5ac426b453a30750f70586d7ba38119c3ac36a73', class: "digi-icon-chevron-down", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && h("title", { key: '251e13c72598a28d9c7b873aa8e64948274ade7a', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '4b571dbbf204a916cc8b61af79de5c72725e2d3b' }, this.afDesc), h("defs", { key: 'a3e1391310514895299db5fdc7d6d4fe18da2a09' }, h("polygon", { key: '13d65fb502b902fd08eaddad665a296e9fee7b9a', points: "0 62 62 62 62 0 0 0" })), h("g", { key: 'af78d915d9840609c09edfb5b483e1509d029f6b', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '2417b04063a55d9814117c874ee8cac9af8446a4', transform: "translate(-302, -975)" }, h("g", { key: '1066e4a7c83bf853dce07b536d025dddd0b67cd5', transform: "translate(302, 975)" }, h("polygon", { key: '0f6d7e9801161c026e43fbfa9bae0aea6b3be4d0', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), h("g", { key: 'd38709e6df6250ccc8d53f230dff12dc347d8875' }, h("path", { key: '4b276b903f126171b12ba449fb95b950fc917599', d: "M35.3073208,0 L26.6931958,0 C24.7918625,0 23.2496125,1.53297409 23.2496125,3.42574093 L23.2496125,11.9939482 C23.2496125,13.886715 24.7918625,15.4196891 26.6931958,15.4196891 L35.3073208,15.4196891 C37.2086542,15.4196891 38.7496125,13.886715 38.7496125,11.9939482 L38.7496125,3.42574093 C38.7496125,1.53297409 37.2086542,0 35.3073208,0", fill: "currentColor" }), h("polygon", { key: 'd8220374c70f8584f74779cbb8b774b600c4b0b7', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), h("path", { key: '47365747c094d031b9e48d49663ebedb6665fb77', d: "M12.0573208,0 L3.44319583,0 C1.5418625,0 -0.0003875,1.53297409 -0.0003875,3.42574093 L-0.0003875,11.9939482 C-0.0003875,13.886715 1.5418625,15.4196891 3.44319583,15.4196891 L12.0573208,15.4196891 C13.9586542,15.4196891 15.4996125,13.886715 15.4996125,11.9939482 L15.4996125,3.42574093 C15.4996125,1.53297409 13.9586542,0 12.0573208,0", fill: "currentColor" }), h("polygon", { key: 'dc793c79b6c27faaaea06cea0178d38532aed949', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), h("path", { key: 'd49570ecca15c91e851ca767de81716832b71584', d: "M58.5573208,0 L49.9431958,0 C48.0418625,0 46.4996125,1.53297409 46.4996125,3.42574093 L46.4996125,11.9939482 C46.4996125,13.886715 48.0418625,15.4196891 49.9431958,15.4196891 L58.5573208,15.4196891 C60.4586542,15.4196891 61.9996125,13.886715 61.9996125,11.9939482 L61.9996125,3.42574093 C61.9996125,1.53297409 60.4586542,0 58.5573208,0", fill: "currentColor" }), h("polygon", { key: '5ebe8db44a5b79fd8fedd84e2c63885ef2d87456', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), h("path", { key: 'fc3542bc89983679cc1ad86e8bcbe416f29a2666', d: "M35.3073208,46.5803109 L26.6931958,46.5803109 C24.7918625,46.5803109 23.2496125,48.113285 23.2496125,50.0060518 L23.2496125,58.5742591 C23.2496125,60.4670259 24.7918625,62 26.6931958,62 L35.3073208,62 C37.2086542,62 38.7496125,60.4670259 38.7496125,58.5742591 L38.7496125,50.0060518 C38.7496125,48.113285 37.2086542,46.5803109 35.3073208,46.5803109", fill: "currentColor" }), h("polygon", { key: '350e985e2584b82a3ef07d953a5eab8d4b0a3ffb', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), h("path", { key: '98e055d750e0a2025941c6c40ee09fbeb90d27c5', d: "M12.0573208,46.5803109 L3.44319583,46.5803109 C1.5418625,46.5803109 -0.0003875,48.113285 -0.0003875,50.0060518 L-0.0003875,58.5742591 C-0.0003875,60.4670259 1.5418625,62 3.44319583,62 L12.0573208,62 C13.9586542,62 15.4996125,60.4670259 15.4996125,58.5742591 L15.4996125,50.0060518 C15.4996125,48.113285 13.9586542,46.5803109 12.0573208,46.5803109", fill: "currentColor" }), h("polygon", { key: 'a3e32fc6300b6e55ac15a930be79b761e7f238a8', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), h("path", { key: '820460300b290dbe8094655a5ada2c17bfc66a86', d: "M58.5573208,46.5803109 L49.9431958,46.5803109 C48.0418625,46.5803109 46.4996125,48.113285 46.4996125,50.0060518 L46.4996125,58.5742591 C46.4996125,60.4670259 48.0418625,62 49.9431958,62 L58.5573208,62 C60.4586542,62 61.9996125,60.4670259 61.9996125,58.5742591 L61.9996125,50.0060518 C61.9996125,48.113285 60.4586542,46.5803109 58.5573208,46.5803109", fill: "currentColor" }), h("polygon", { key: '763b0e581317426587568946fb1a0c3fd3eb0428', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), h("path", { key: '8a7abc98191f8a2701424c868ad4eba09ec425d7', d: "M35.3073208,23.2901554 L26.6931958,23.2901554 C24.7918625,23.2901554 23.2496125,24.8231295 23.2496125,26.7158964 L23.2496125,35.2841036 C23.2496125,37.1768705 24.7918625,38.7098446 26.6931958,38.7098446 L35.3073208,38.7098446 C37.2086542,38.7098446 38.7496125,37.1768705 38.7496125,35.2841036 L38.7496125,26.7158964 C38.7496125,24.8231295 37.2086542,23.2901554 35.3073208,23.2901554", fill: "currentColor" }), h("polygon", { key: '2249138c4d6553a0733aa612bacd347425067933', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), h("path", { key: 'f9fc8bc339295ed603da771e9aa41697a7401581', d: "M12.0573208,23.2901554 L3.44319583,23.2901554 C1.5418625,23.2901554 -0.0003875,24.8231295 -0.0003875,26.7158964 L-0.0003875,35.2841036 C-0.0003875,37.1768705 1.5418625,38.7098446 3.44319583,38.7098446 L12.0573208,38.7098446 C13.9586542,38.7098446 15.4996125,37.1768705 15.4996125,35.2841036 L15.4996125,26.7158964 C15.4996125,24.8231295 13.9586542,23.2901554 12.0573208,23.2901554", fill: "currentColor" }), h("polygon", { key: 'd5c75887f9b7b0f7e2693c1f57fb1b7d98b29c61', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), h("path", { key: '18286e1aea29564ef8dbdaa3fcf4143ad7843ed4', d: "M58.5573208,23.2901554 L49.9431958,23.2901554 C48.0418625,23.2901554 46.4996125,24.8231295 46.4996125,26.7158964 L46.4996125,35.2841036 C46.4996125,37.1768705 48.0418625,38.7098446 49.9431958,38.7098446 L58.5573208,38.7098446 C60.4586542,38.7098446 61.9996125,37.1768705 61.9996125,35.2841036 L61.9996125,26.7158964 C61.9996125,24.8231295 60.4586542,23.2901554 58.5573208,23.2901554", fill: "currentColor" })))))));
+                    : undefined }, this.afTitle && h("title", { key: '7f9ebb68d4f0a68f17df66c02e290e46b24a3004', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '5267ccd4d49aaf68cc85bb84dbcca21b1540d8c5' }, this.afDesc), h("path", { key: '4c0d7b31ff1e20fc32941d442ca3b04ca8349081', class: "digi-icon-chevron-down__shape", d: "M1 1l6.074 6L13 1.147", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
     }
 };
-IconTable.style = DigiIconTableStyle0;
+IconChevronDown.style = DigiIconChevronDownStyle0;
 
-const iconXCss = ".sc-digi-icon-x-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-x-h svg.sc-digi-icon-x{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
-const DigiIconXStyle0 = iconXCss;
+const layoutContainerCss = ".digi--util--fs--xs.sc-digi-layout-container{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-layout-container{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-layout-container{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-layout-container{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-layout-container{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-layout-container{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-layout-container{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-layout-container{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-layout-container{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-layout-container{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-layout-container{padding-top:5rem !important}.digi--util--pb--1.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-layout-container{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-layout-container{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-layout-container{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-layout-container{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-layout-container{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-layout-container{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-layout-container{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-layout-container{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-layout-container{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-layout-container{padding:2.5rem !important}.digi--util--p--60.sc-digi-layout-container{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-layout-container{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-layout-container{padding:4.5rem !important}.digi--util--p--90.sc-digi-layout-container{padding:5rem !important}.digi--util--ptb--1.sc-digi-layout-container{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-layout-container{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-layout-container{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-layout-container{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-layout-container{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-layout-container{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-layout-container{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-layout-container{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-layout-container{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-layout-container{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-layout-container{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-layout-container{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-layout-container{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-layout-container{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-layout-container{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-layout-container{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-layout-container{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-layout-container{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden.sc-digi-layout-container{display:none}.sc-digi-layout-container-h{--digi--layout-container--width:var(--digi--container-width--smaller);--digi--layout-container--gutter:var(--digi--container-gutter--base);--digi--layout-container--vertical-padding:0;--digi--layout-container--margin-top:0;--digi--layout-container--margin-bottom:0}.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{box-sizing:border-box;width:100%;max-width:var(--digi--layout-container--width);padding:var(--digi--layout-container--vertical-padding) var(--digi--layout-container--gutter);margin-left:auto;margin-right:auto;margin-top:var(--digi--layout-container--margin-top);margin-bottom:var(--digi--layout-container--margin-bottom);box-sizing:border-box}@media (min-width: 36rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--small);--digi--layout-container--gutter:var(--digi--container-gutter--small)}}@media (min-width: 48rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--medium);--digi--layout-container--gutter:var(--digi--container-gutter--medium)}}@media (min-width: 62rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--large);--digi--layout-container--gutter:var(--digi--container-gutter--large)}}@media (min-width: 75rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--larger);--digi--layout-container--gutter:var(--digi--container-gutter--larger)}}@media (min-width: 87.5rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--largest);--digi--layout-container--gutter:var(--digi--container-gutter--largest)}.sc-digi-layout-container-h .digi-layout-container--max-width-1200.sc-digi-layout-container{--digi--layout-container--width:var(--digi--global--size--larger)}}.sc-digi-layout-container-h .digi-layout-container--fluid.sc-digi-layout-container{--digi--layout-container--width:none !important}.sc-digi-layout-container-h .digi-layout-container--no-gutter.sc-digi-layout-container{--digi--layout-container--gutter:0}.sc-digi-layout-container-h .digi-layout-container--vertical-padding.sc-digi-layout-container{--digi--layout-container--vertical-padding:var(--digi--padding--large)}.sc-digi-layout-container-h .digi-layout-container--margin-top.sc-digi-layout-container{--digi--layout-container--margin-top:var(--digi--margin--large)}.sc-digi-layout-container-h .digi-layout-container--margin-bottom.sc-digi-layout-container{--digi--layout-container--margin-bottom:var(--digi--margin--large)}";
+const DigiLayoutContainerStyle0 = layoutContainerCss;
 
-const IconX = class {
+const LayoutContainer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.afTitle = undefined;
-        this.afDesc = undefined;
-        this.afSvgAriaHidden = true;
-        this.afSvgAriaLabelledby = undefined;
-        this.titleId = randomIdGenerator('icontitle');
+        this._variation = LayoutContainerVariation.STATIC;
+        this.afVariation = LayoutContainerVariation.STATIC;
+        this.afMaxWidth = LayoutContainerMaxWidth.WIDTH_1400;
+        this.afNoGutter = undefined;
+        this.afVerticalPadding = undefined;
+        this.afMarginTop = undefined;
+        this.afMarginBottom = undefined;
+    }
+    variationChangeHandler() {
+        this._variation = this.afVariation;
+    }
+    componentWillLoad() {
+        this.variationChangeHandler();
+    }
+    get cssModifiers() {
+        if (this._variation === LayoutContainerVariation.NONE) {
+            return {};
+        }
+        return {
+            'digi-layout-container': true,
+            'digi-layout-container--static': this._variation === LayoutContainerVariation.STATIC,
+            'digi-layout-container--fluid': this._variation === LayoutContainerVariation.FLUID,
+            'digi-layout-container--max-width-1200': this.afMaxWidth === LayoutContainerMaxWidth.WIDTH_1200,
+            'digi-layout-container--no-gutter': this.afNoGutter,
+            'digi-layout-container--vertical-padding': this.afVerticalPadding,
+            'digi-layout-container--margin-top': this.afMarginTop,
+            'digi-layout-container--margin-bottom': this.afMarginBottom
+        };
     }
     render() {
-        return (h("svg", { key: '06415f56b7bdcf4e4d01e3f8e22c972cd166039e', class: "digi-icon-x", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '12da73d80236640ba89463221e4f15cccddee097', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'e9083ab8497e6b711aa1452456f2d5897e1e6829' }, this.afDesc), h("g", { key: 'd8a9bbd2743f1b3e01739576fec36cbe470d4c52', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, h("path", { key: '5a20c2fee197c4120038b297cd243a22b5aab5f2', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
+        return (h("div", { key: '01d65500134b20d0b99a22905e9159325fca4931', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: '256b8c6ee913710e1cc359fe228be062705b9546' })));
     }
+    static get watchers() { return {
+        "afVariation": ["variationChangeHandler"]
+    }; }
 };
-IconX.style = DigiIconXStyle0;
+LayoutContainer.style = DigiLayoutContainerStyle0;
 
 const typographyCss = ".digi--util--fs--xs{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50{padding-top:2.5rem !important}.digi--util--pt--60{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80{padding-top:4.5rem !important}.digi--util--pt--90{padding-top:5rem !important}.digi--util--pb--1{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50{padding-bottom:2.5rem !important}.digi--util--pb--60{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80{padding-bottom:4.5rem !important}.digi--util--pb--90{padding-bottom:5rem !important}.digi--util--p--1{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50{padding:2.5rem !important}.digi--util--p--60{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80{padding:4.5rem !important}.digi--util--p--90{padding:5rem !important}.digi--util--ptb--1{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden{display:none}digi-typography{--digi--typography--h1--margin--small:var(--digi--margin--h1-small);--digi--typography--h1--margin--medium:var(--digi--margin--h1-medium);--digi--typography--h1--margin--large:var(--digi--margin--h1-large);--digi--typography--h2--margin--small:var(--digi--margin--h2-small);--digi--typography--h2--margin--large:var(--digi--margin--h2-large);--digi--typography--h3--margin--small:var(--digi--margin--h3-small);--digi--typography--h3--margin--large:var(--digi--margin--h3-large);--digi--typography--h4--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h4--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--h5--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h6--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--paragraph--margin--small:var(--digi--margin--text-small);--digi--typography--paragraph--margin--large:var(--digi--margin--text-large);--digi--typography--paragraph--margin-top:initial;--digi--typography--color--text:var(--digi--color--text--primary);--digi--typography--text-decoration-thickness--hover:0.156em;--digi--typography--text-decoration-thickness--default:0.05em;--digi--typography--text-underline-offset:3px;font-family:var(--digi--global--typography--font-family--default);color:var(--digi--typography--color--text);--FONT-SIZE--BODY:var(--digi--typography--body--font-size--mobile);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--mobile);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--mobile);--TEXT-DECORATION--BODY:var(\n    --digi--typography--body--text-decoration--mobile\n  );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--mobile);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--mobile);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--mobile);--TEXT-DECORATION--LINK:var(\n    --digi--typography--link--text-decoration--mobile\n  );--FONT-SIZE--HEADING-1:var(--digi--typography--heading-1--font-size--mobile);--LINE-HEIGHT--HEADING-1:var(\n    --digi--typography--heading-1--line-height--mobile\n  );--FONT-WEIGHT--HEADING-1:var(\n    --digi--typography--heading-1--font-weight--mobile\n  );--TEXT-DECORATION--HEADING-1:var(\n    --digi--typography--heading-1--text-decoration--mobile\n  );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--small);--FONT-SIZE--HEADING-2:var(--digi--typography--heading-2--font-size--mobile);--LINE-HEIGHT--HEADING-2:var(\n    --digi--typography--heading-2--line-height--mobile\n  );--FONT-WEIGHT--HEADING-2:var(\n    --digi--typography--heading-2--font-weight--mobile\n  );--TEXT-DECORATION--HEADING-2:var(\n    --digi--typography--heading-2--text-decoration--mobile\n  );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(--digi--typography--heading-3--font-size--mobile);--LINE-HEIGHT--HEADING-3:var(\n    --digi--typography--heading-3--line-height--mobile\n  );--FONT-WEIGHT--HEADING-3:var(\n    --digi--typography--heading-3--font-weight--mobile\n  );--TEXT-DECORATION--HEADING-3:var(\n    --digi--typography--heading-3--text-decoration--mobile\n  );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-4:var(\n    --digi--typography--heading-4--line-height--mobile\n  );--FONT-WEIGHT--HEADING-4:var(\n    --digi--typography--heading-4--font-weight--mobile\n  );--TEXT-DECORATION--HEADING-4:var(\n    --digi--typography--heading-4--text-decoration--mobile\n  );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-5:var(\n    --digi--typography--heading-4--line-height--mobile\n  );--FONT-WEIGHT--HEADING-5:var(\n    --digi--typography--heading-4--font-weight--mobile\n  );--TEXT-DECORATION--HEADING-5:var(\n    --digi--typography--heading-4--text-decoration--mobile\n  );--MARGIN--HEADING-5:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-6:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-6:var(\n    --digi--typography--heading-4--line-height--mobile\n  );--FONT-WEIGHT--HEADING-6:var(\n    --digi--typography--heading-4--font-weight--mobile\n  );--TEXT-DECORATION--HEADING-6:var(\n    --digi--typography--heading-4--text-decoration--mobile\n  );--MARGIN--HEADING-6:var(--digi--typography--h4--margin--small);font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY)}@media (min-width: 62rem){digi-typography{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--desktop);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--desktop);--TEXT-DECORATION--BODY:var(\n      --digi--typography--body--text-decoration--desktop\n    );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--desktop);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--desktop);--TEXT-DECORATION--LINK:var(\n      --digi--typography--link--text-decoration--desktop\n    );--FONT-SIZE--HEADING-1:var(\n      --digi--typography--heading-1--font-size--desktop\n    );--LINE-HEIGHT--HEADING-1:var(\n      --digi--typography--heading-1--line-height--desktop\n    );--FONT-WEIGHT--HEADING-1:var(\n      --digi--typography--heading-1--font-weight--desktop\n    );--TEXT-DECORATION--HEADING-1:var(\n      --digi--typography--heading-1--text-decoration--desktop\n    );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var(\n      --digi--typography--heading-2--font-size--desktop\n    );--LINE-HEIGHT--HEADING-2:var(\n      --digi--typography--heading-2--line-height--desktop\n    );--FONT-WEIGHT--HEADING-2:var(\n      --digi--typography--heading-2--font-weight--desktop\n    );--TEXT-DECORATION--HEADING-2:var(\n      --digi--typography--heading-2--text-decoration--desktop\n    );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(\n      --digi--typography--heading-3--font-size--desktop\n    );--LINE-HEIGHT--HEADING-3:var(\n      --digi--typography--heading-3--line-height--desktop\n    );--FONT-WEIGHT--HEADING-3:var(\n      --digi--typography--heading-3--font-weight--desktop\n    );--TEXT-DECORATION--HEADING-3:var(\n      --digi--typography--heading-3--text-decoration--desktop\n    );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(\n      --digi--typography--heading-4--font-size--desktop\n    );--LINE-HEIGHT--HEADING-4:var(\n      --digi--typography--heading-4--line-height--desktop\n    );--FONT-WEIGHT--HEADING-4:var(\n      --digi--typography--heading-4--font-weight--desktop\n    );--TEXT-DECORATION--HEADING-4:var(\n      --digi--typography--heading-4--text-decoration--desktop\n    );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(\n      --digi--typography--heading-4--font-size--desktop\n    );--LINE-HEIGHT--HEADING-5:var(\n      --digi--typography--heading-4--line-height--desktop\n    );--FONT-WEIGHT--HEADING-5:var(\n      --digi--typography--heading-4--font-weight--desktop\n    );--TEXT-DECORATION--HEADING-5:var(\n      --digi--typography--heading-4--text-decoration--desktop\n    );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var(\n      --digi--typography--heading-4--font-size--desktop\n    );--LINE-HEIGHT--HEADING-6:var(\n      --digi--typography--heading-4--line-height--desktop\n    );--FONT-WEIGHT--HEADING-6:var(\n      --digi--typography--heading-4--font-weight--desktop\n    );--TEXT-DECORATION--HEADING-6:var(\n      --digi--typography--heading-4--text-decoration--desktop\n    );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}}digi-typography .digi-typography--large{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--desktop);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--desktop);--TEXT-DECORATION--BODY:var(\n    --digi--typography--body--text-decoration--desktop\n  );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--desktop);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--desktop);--TEXT-DECORATION--LINK:var(\n    --digi--typography--link--text-decoration--desktop\n  );--FONT-SIZE--HEADING-1:var(\n    --digi--typography--heading-1--font-size--desktop\n  );--LINE-HEIGHT--HEADING-1:var(\n    --digi--typography--heading-1--line-height--desktop\n  );--FONT-WEIGHT--HEADING-1:var(\n    --digi--typography--heading-1--font-weight--desktop\n  );--TEXT-DECORATION--HEADING-1:var(\n    --digi--typography--heading-1--text-decoration--desktop\n  );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var(\n    --digi--typography--heading-2--font-size--desktop\n  );--LINE-HEIGHT--HEADING-2:var(\n    --digi--typography--heading-2--line-height--desktop\n  );--FONT-WEIGHT--HEADING-2:var(\n    --digi--typography--heading-2--font-weight--desktop\n  );--TEXT-DECORATION--HEADING-2:var(\n    --digi--typography--heading-2--text-decoration--desktop\n  );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(\n    --digi--typography--heading-3--font-size--desktop\n  );--LINE-HEIGHT--HEADING-3:var(\n    --digi--typography--heading-3--line-height--desktop\n  );--FONT-WEIGHT--HEADING-3:var(\n    --digi--typography--heading-3--font-weight--desktop\n  );--TEXT-DECORATION--HEADING-3:var(\n    --digi--typography--heading-3--text-decoration--desktop\n  );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(\n    --digi--typography--heading-4--font-size--desktop\n  );--LINE-HEIGHT--HEADING-4:var(\n    --digi--typography--heading-4--line-height--desktop\n  );--FONT-WEIGHT--HEADING-4:var(\n    --digi--typography--heading-4--font-weight--desktop\n  );--TEXT-DECORATION--HEADING-4:var(\n    --digi--typography--heading-4--text-decoration--desktop\n  );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(\n    --digi--typography--heading-4--font-size--desktop\n  );--LINE-HEIGHT--HEADING-5:var(\n    --digi--typography--heading-4--line-height--desktop\n  );--FONT-WEIGHT--HEADING-5:var(\n    --digi--typography--heading-4--font-weight--desktop\n  );--TEXT-DECORATION--HEADING-5:var(\n    --digi--typography--heading-4--text-decoration--desktop\n  );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var(\n    --digi--typography--heading-4--font-size--desktop\n  );--LINE-HEIGHT--HEADING-6:var(\n    --digi--typography--heading-4--line-height--desktop\n  );--FONT-WEIGHT--HEADING-6:var(\n    --digi--typography--heading-4--font-weight--desktop\n  );--TEXT-DECORATION--HEADING-6:var(\n    --digi--typography--heading-4--text-decoration--desktop\n  );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}@media (min-width: 62rem){digi-typography .digi-typography--large{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop-large);--LINE-HEIGHT--BODY:var(\n      --digi--typography--body--line-height--desktop-large\n    );--FONT-WEIGHT--BODY:var(\n      --digi--typography--body--font-weight--desktop-large\n    );--TEXT-DECORATION--BODY:var(\n      --digi--typography--body--text-decoration--desktop-large\n    );--MARGIN--BODY:var(--digi--typography--paragraph--margin--large);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop-large);--LINE-HEIGHT--LINK:var(\n      --digi--typography--link--line-height--desktop-large\n    );--FONT-WEIGHT--LINK:var(\n      --digi--typography--link--font-weight--desktop-large\n    );--TEXT-DECORATION--LINK:var(\n      --digi--typography--link--text-decoration--desktop-large\n    );--FONT-SIZE--HEADING-1:var(\n      --digi--typography--heading-1--font-size--desktop-large\n    );--LINE-HEIGHT--HEADING-1:var(\n      --digi--typography--heading-1--line-height--desktop-large\n    );--FONT-WEIGHT--HEADING-1:var(\n      --digi--typography--heading-1--font-weight--desktop-large\n    );--TEXT-DECORATION--HEADING-1:var(\n      --digi--typography--heading-1--text-decoration--desktop-large\n    );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--large);--FONT-SIZE--HEADING-2:var(\n      --digi--typography--heading-2--font-size--desktop-large\n    );--LINE-HEIGHT--HEADING-2:var(\n      --digi--typography--heading-2--line-height--desktop-large\n    );--FONT-WEIGHT--HEADING-2:var(\n      --digi--typography--heading-2--font-weight--desktop-large\n    );--TEXT-DECORATION--HEADING-2:var(\n      --digi--typography--heading-2--text-decoration--desktop-large\n    );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--large);--FONT-SIZE--HEADING-3:var(\n      --digi--typography--heading-3--font-size--desktop-large\n    );--LINE-HEIGHT--HEADING-3:var(\n      --digi--typography--heading-3--line-height--desktop-large\n    );--FONT-WEIGHT--HEADING-3:var(\n      --digi--typography--heading-3--font-weight--desktop-large\n    );--TEXT-DECORATION--HEADING-3:var(\n      --digi--typography--heading-3--text-decoration--desktop-large\n    );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--large);--FONT-SIZE--HEADING-4:var(\n      --digi--typography--heading-4--font-size--desktop-large\n    );--LINE-HEIGHT--HEADING-4:var(\n      --digi--typography--heading-4--line-height--desktop-large\n    );--FONT-WEIGHT--HEADING-4:var(\n      --digi--typography--heading-4--font-weight--desktop-large\n    );--TEXT-DECORATION--HEADING-4:var(\n      --digi--typography--heading-4--text-decoration--desktop-large\n    );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--large);--FONT-SIZE--HEADING-5:var(\n      --digi--typography--heading-4--font-size--desktop-large\n    );--LINE-HEIGHT--HEADING-5:var(\n      --digi--typography--heading-4--line-height--desktop-large\n    );--FONT-WEIGHT--HEADING-5:var(\n      --digi--typography--heading-4--font-weight--desktop-large\n    );--TEXT-DECORATION--HEADING-5:var(\n      --digi--typography--heading-4--text-decoration--desktop-large\n    );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--large);--FONT-SIZE--HEADING-6:var(\n      --digi--typography--heading-4--font-size--desktop-large\n    );--LINE-HEIGHT--HEADING-6:var(\n      --digi--typography--heading-4--line-height--desktop-large\n    );--FONT-WEIGHT--HEADING-6:var(\n      --digi--typography--heading-4--font-weight--desktop-large\n    );--TEXT-DECORATION--HEADING-6:var(\n      --digi--typography--heading-4--text-decoration--desktop-large\n    );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--large)}}digi-typography .digi-typography--hide-visited a:visited{color:var(--digi--color--text--link-secondary, var(--digi--color--text--link))}digi-typography h1,digi-typography h2,digi-typography h3,digi-typography h4,digi-typography h5,digi-typography h6{margin-top:0;}digi-typography h1,digi-typography .digi-h1{font-size:var(--FONT-SIZE--HEADING-1);line-height:var(--LINE-HEIGHT--HEADING-1);font-weight:var(--FONT-WEIGHT--HEADING-1);text-decoration:var(--TEXT-DECORATION--HEADING-1);margin-bottom:var(--MARGIN--HEADING-1)}digi-typography h2,digi-typography .digi-h2{font-size:var(--FONT-SIZE--HEADING-2);line-height:var(--LINE-HEIGHT--HEADING-2);font-weight:var(--FONT-WEIGHT--HEADING-2);text-decoration:var(--TEXT-DECORATION--HEADING-2);margin-bottom:var(--MARGIN--HEADING-2)}digi-typography h3,digi-typography .digi-h3{font-size:var(--FONT-SIZE--HEADING-3);line-height:var(--LINE-HEIGHT--HEADING-3);font-weight:var(--FONT-WEIGHT--HEADING-3);text-decoration:var(--TEXT-DECORATION--HEADING-3);margin-bottom:var(--MARGIN--HEADING-3)}digi-typography h4,digi-typography .digi-h4{font-size:var(--FONT-SIZE--HEADING-4);line-height:var(--LINE-HEIGHT--HEADING-4);font-weight:var(--FONT-WEIGHT--HEADING-4);text-decoration:var(--TEXT-DECORATION--HEADING-4);margin-bottom:var(--MARGIN--HEADING-4)}digi-typography h5,digi-typography .digi-h5{font-size:var(--FONT-SIZE--HEADING-5);line-height:var(--LINE-HEIGHT--HEADING-5);font-weight:var(--FONT-WEIGHT--HEADING-5);text-decoration:var(--TEXT-DECORATION--HEADING-5);margin-bottom:var(--MARGIN--HEADING-5)}digi-typography h6,digi-typography .digi-h6{font-size:var(--FONT-SIZE--HEADING-6);line-height:var(--LINE-HEIGHT--HEADING-6);font-weight:var(--FONT-WEIGHT--HEADING-6);text-decoration:var(--TEXT-DECORATION--HEADING-6);margin-bottom:var(--MARGIN--HEADING-6)}digi-typography p,digi-typography blockquote{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);margin-top:initial;margin-bottom:var(--MARGIN--BODY);max-width:var(--digi--paragraph-width--medium)}digi-typography p:last-child,digi-typography blockquote:last-child{margin-bottom:0}digi-typography blockquote{margin-inline:0}digi-typography digi-typography-preamble{display:block;margin-bottom:var(--MARGIN--BODY)}digi-typography digi-typography-preamble:last-child{margin-bottom:0}digi-typography ul,digi-typography ol,digi-typography dl{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);max-width:var(--digi--paragraph-width--medium);margin-bottom:var(--MARGIN--BODY)}digi-typography ul:last-child,digi-typography ol:last-child,digi-typography dl:last-child{margin-bottom:0}digi-typography a{font-size:1em;line-height:var(--LINE-HEIGHT--LINK);font-weight:inherit;text-decoration:var(--TEXT-DECORATION--LINK);color:var(--digi--color--text--link-secondary, var(--digi--color--text--link));text-decoration-thickness:var(--digi--typography--text-decoration-thickness--default);text-underline-offset:var(--digi--typography--text-underline-offset)}digi-typography a:hover{text-decoration:var(--TEXT-DECORATION--LINK);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover)}digi-typography a:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}digi-typography a:visited{color:var(--digi--color--text--link-secondary-visited, var(--digi--color--text--link-visited))}digi-typography strong{font-weight:var(--digi--typography--label--font-weight--desktop)}";
 const DigiTypographyStyle0 = typographyCss;
@@ -2513,9 +458,9 @@ const Typography = class {
         };
     }
     render() {
-        return (h("div", { key: '92db21eeb2f0a66bf419556019ada5c087823bfa', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, h("slot", { key: '07d933c905ff5103fc49e10810db6b6f1d894de8' })));
+        return (h("div", { key: 'd4c7dde696cb9e4f629649c2d12e5b015c7aa713', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, h("slot", { key: '4512f6b74ec58c3f04437c6ef598eb1d3625d347' })));
     }
 };
 Typography.style = DigiTypographyStyle0;
 
-export { Button as digi_button, ChartLine as digi_chart_line, IconChart as digi_icon_chart, IconTable as digi_icon_table, IconX as digi_icon_x, Typography as digi_typography };
+export { Button as digi_button, ContextMenu as digi_context_menu, IconCheck as digi_icon_check, IconChevronDown as digi_icon_chevron_down, LayoutContainer as digi_layout_container, Typography as digi_typography };