@rolemodel/optics 1.13.1 → 2.0.0

package/dist/css/optics.min.css

@@ -0,0 +1,4907 @@
+@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
+/* Third party Vendors */
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* Tokens */
+/*
+Noto Sans supports:
+  font-weight: {anything between 100 and 900}
+  font-stretch: {anything between 62.5% and 100%}
+  font-style: {normal or italic}
+*/
+/*
+  Noto Serif supports:
+  font-weight: {anything between 100 and 900}
+  font-stretch: {anything between 62.5% and 100%}
+  font-style: {normal or italic}
+*/
+:root {
+  /* Color HSLs
+    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
+  */
+
+  /* Basic Colors */
+
+  /**
+  * @tokens Basic Colors
+  * @presenter Color
+  */
+  --op-color-white: hsl(0deg 100% 100%);
+  --op-color-black: hsl(0deg 0% 0%);
+
+  /**
+  * @tokens Primary Colors
+  * @presenter Color
+  */
+  --op-color-primary-h: 216;
+  --op-color-primary-s: 58%;
+  --op-color-primary-l: 48%;
+
+  /**
+  * @tokens Neutral Colors
+  * @presenter Color
+  */
+  --op-color-neutral-h: var(--op-color-primary-h);
+  --op-color-neutral-s: 4%;
+  --op-color-neutral-l: var(--op-color-primary-l);
+
+  /**
+  * @tokens Alerts Warning Colors
+  * @presenter Color
+  */
+  --op-color-alerts-warning-h: 47;
+  --op-color-alerts-warning-s: 100%;
+  --op-color-alerts-warning-l: 61%;
+
+  /**
+  * @tokens Alerts Danger Colors
+  * @presenter Color
+  */
+  --op-color-alerts-danger-h: 0;
+  --op-color-alerts-danger-s: 99%;
+  --op-color-alerts-danger-l: 76%;
+
+  /**
+  * @tokens Alerts Info Colors
+  * @presenter Color
+  */
+  --op-color-alerts-info-h: 216;
+  --op-color-alerts-info-s: 58%;
+  --op-color-alerts-info-l: 48%;
+
+  /**
+  * @tokens Alerts Notice Colors
+  * @presenter Color
+  */
+  --op-color-alerts-notice-h: 130;
+  --op-color-alerts-notice-s: 61%;
+  --op-color-alerts-notice-l: 64%;
+
+  /**
+  * @tokens Opacities
+  * @presenter Opacity
+  */
+  --op-opacity-none: 0;
+  --op-opacity-overlay: 0.2;
+  --op-opacity-disabled: 0.4;
+  --op-opacity-half: 0.5;
+  --op-opacity-full: 1;
+
+  /*
+    Breakpoints
+    CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
+    https://drafts.csswg.org/css-env-1/
+    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
+
+    Here is a list of breakpoints used throughout Optics:
+  */
+
+  /**
+  * @tokens Breakpoints
+  * @presenter Spacing
+  */
+  --op-breakpoint-x-small: 512px; /* vertical phone */
+  --op-breakpoint-small: 768px; /* vertical ipad */
+  --op-breakpoint-medium: 1024px; /* landscape ipad */
+  --op-breakpoint-large: 1280px; /* small laptop */
+  --op-breakpoint-x-large: 1440px; /* medium laptop */
+
+  /* Border */
+
+  /**
+  * @tokens Border Radius
+  * @presenter BorderRadius
+  */
+  --op-radius-small: 2px;
+  --op-radius-medium: 4px;
+  --op-radius-large: 8px;
+  --op-radius-x-large: 12px;
+  --op-radius-2x-large: 16px;
+  --op-radius-circle: 50%;
+  --op-radius-pill: 9999px;
+
+  /**
+  * @tokens Border Width
+  * @presenter Spacing
+  */
+  --op-border-width: 1px;
+  --op-border-width-large: 2px;
+  --op-border-width-x-large: 4px;
+
+  /**
+  * @tokens Border Color
+  * @presenter Color
+  */
+  --op-color-border: var(--op-color-neutral-plus-five);
+
+  /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */
+
+  /**
+  * @tokens Border Shadow
+  * @presenter Shadow
+  */
+  --op-border-none: 0 0 0 0;
+  --op-border-all: 0 0 0 var(--op-border-width);
+  --op-border-top: 0 calc(-1 * var(--op-border-width)) 0 0;
+  --op-border-right: var(--op-border-width) 0 0 0;
+  --op-border-bottom: 0 var(--op-border-width) 0 0;
+  --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
+  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
+  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);
+
+  /* Font */
+
+  /**
+  * @tokens Font Scale
+  * @presenter FontSize
+  */
+  --op-font-scale-unit: 1rem; /* 10px; */
+  --op-font-2x-small: calc(var(--op-font-scale-unit) * 1); /* 10px */
+  --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2); /* 12px */
+  --op-font-small: calc(var(--op-font-scale-unit) * 1.4); /* 14px */
+  --op-font-medium: calc(var(--op-font-scale-unit) * 1.6); /* 16px */
+  --op-font-large: calc(var(--op-font-scale-unit) * 1.8); /* 18px */
+  --op-font-x-large: calc(var(--op-font-scale-unit) * 2); /* 20px */
+  --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4); /* 24px */
+  --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8); /* 28px */
+  --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2); /* 32px */
+  --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6); /* 36px */
+  --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8); /* 48px */
+
+  /**
+  * @tokens Font Weight
+  * @presenter FontWeight
+  */
+  --op-font-weight-thin: 100;
+  --op-font-weight-extra-light: 200;
+  --op-font-weight-light: 300;
+  --op-font-weight-normal: 400;
+  --op-font-weight-medium: 500;
+  --op-font-weight-semi-bold: 600;
+  --op-font-weight-bold: 700;
+  --op-font-weight-extra-bold: 800;
+  --op-font-weight-black: 900;
+
+  /**
+  * @tokens Font Family
+  * @presenter FontFamily
+  */
+  --op-font-family: 'Noto Sans', sans-serif;
+  --op-font-family-alt: 'Noto Serif', serif;
+
+  /* Text */
+
+  /**
+  * @tokens Line Height
+  * @presenter LineHeight
+  */
+  --op-line-height-none: 0;
+  --op-line-height-densest: 1;
+  --op-line-height-denser: 1.15;
+  --op-line-height-dense: 1.3;
+  --op-line-height-base: 1.5;
+  --op-line-height-loose: 1.6;
+  --op-line-height-looser: 1.7;
+  --op-line-height-loosest: 1.8;
+
+  /**
+  * @tokens Letter Spacing
+  * @presenter LetterSpacing
+  */
+  --op-letter-spacing-navigation: 0.01rem;
+  --op-letter-spacing-label: 0.04rem;
+
+  /* Transitions and Animations */
+
+  /**
+  * @tokens Transition
+  */
+  --op-transition-accordion: rotate 120ms ease-in;
+  --op-transition-input: all 120ms ease-in;
+  --op-transition-sidebar: all 200ms ease-in-out;
+  --op-transition-modal: all 300ms ease-in;
+  --op-transition-panel: right 400ms ease-in;
+  --op-transition-tooltip: all 300ms ease-in 300ms;
+
+  /**
+  * @tokens Animation
+  * @presenter Animation
+  */
+  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;
+
+  /* Encoded Images */
+
+  /**
+  * @tokens Encoded Images
+  */
+  --op-encoded-images-dropdown-arrow-width: calc(
+    1.2 * var(--op-space-scale-unit)
+  ); /* 12px No way to string interpolate */
+
+  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');
+
+  /* Spacing */
+
+  /**
+  * @tokens Size Scale
+  * @presenter Spacing
+  */
+  --op-size-unit: 0.4rem; /* 4px */
+
+  /**
+  * @tokens Space Scale
+  * @presenter Spacing
+  */
+  --op-space-scale-unit: 1rem; /* 10px; */
+  --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2); /* 2px */
+  --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4); /* 4px */
+  --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8); /* 8px */
+  --op-space-small: calc(var(--op-space-scale-unit) * 1.2); /* 12px */
+  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6); /* 16px */
+  --op-space-large: calc(var(--op-space-scale-unit) * 2); /* 20px */
+  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4); /* 24px */
+  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8); /* 28px */
+  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
+  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
+
+  /* Shadows */
+
+  /**
+  * @tokens Shadows
+  * @presenter Shadow
+  */
+  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
+  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
+  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
+  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
+  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
+
+  /* Z Index */
+
+  /**
+  * @tokens Z-Index
+  */
+  --op-z-index-header: 500;
+  --op-z-index-footer: 500;
+  --op-z-index-sidebar: 700;
+  --op-z-index-dialog: 800;
+  --op-z-index-dialog-backdrop: 801;
+  --op-z-index-dialog-content: 802;
+  --op-z-index-dropdown: 900;
+  --op-z-index-alert-group: 950;
+  --op-z-index-tooltip: 1000;
+
+  /* Inputs */
+
+  /*
+    This should follow multiples of 4
+    https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
+  */
+
+  /**
+  * @tokens Input Heights
+  * @presenter Spacing
+  */
+  --op-input-height-small: 2.8rem; /* 28px */
+  --op-input-height-medium: 3.6rem; /* 36px */
+  --op-input-height-large: 4rem; /* 40px */
+  --op-input-height-x-large: 8.4rem; /* 84px */
+
+  /**
+  * @tokens Input Focus
+  * @presenter Shadow
+  */
+  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
+  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
+  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+  --op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
+    var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
+  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
+  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
+  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
+  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
+}
+/* Animations */
+@keyframes rm-slide-in-out-flash {
+  /*
+    If an duration of 5s is set:
+    Start off the Screen
+  */
+  0% {
+    right: -100%;
+  }
+
+  /* Animate onto the screen for 0.5s */
+  10% {
+    right: var(--op-space-large);
+  }
+
+  /* Stay on the screen for 3s */
+  70% {
+    right: var(--op-space-large);
+  }
+
+  /* Animate off the screen for 1.5s */
+  100% {
+    right: -100%;
+  }
+}
+:root {
+  /* Enable light and dark mode switching */
+  color-scheme: light dark;
+
+  /*
+    Semantic Scales: plus adds luminosity, minus removes luminosity
+    This borrows from the photography concept of Aperture f-stops.
+    https://www.adobe.com/creativecloud/photography/discover/f-stop.html
+  */
+
+  /**
+  * @tokens Primary Colors
+  * @presenter Color
+  */
+  --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
+
+  /* Main Scale */
+  --op-color-primary-plus-max: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
+  );
+  --op-color-primary-plus-eight: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
+  );
+  --op-color-primary-plus-seven: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
+  );
+  --op-color-primary-plus-six: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
+  );
+  --op-color-primary-plus-five: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
+  );
+  --op-color-primary-plus-four: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
+  );
+  --op-color-primary-plus-three: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
+  );
+  --op-color-primary-plus-two: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
+  );
+  --op-color-primary-plus-one: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
+  );
+  --op-color-primary-base: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
+  );
+  --op-color-primary-minus-one: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
+  );
+  --op-color-primary-minus-two: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
+  );
+  --op-color-primary-minus-three: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
+  );
+  --op-color-primary-minus-four: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
+  );
+  --op-color-primary-minus-five: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
+  );
+  --op-color-primary-minus-six: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
+  );
+  --op-color-primary-minus-seven: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
+  );
+  --op-color-primary-minus-eight: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
+  );
+  --op-color-primary-minus-max: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
+  );
+
+  /* On Scale */
+  --op-color-primary-on-plus-max: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
+  );
+  --op-color-primary-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
+  );
+  --op-color-primary-on-plus-eight: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
+  );
+  --op-color-primary-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
+  );
+  --op-color-primary-on-plus-seven: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
+  );
+  --op-color-primary-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
+  );
+  --op-color-primary-on-plus-six: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
+  );
+  --op-color-primary-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
+  );
+  --op-color-primary-on-plus-five: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
+  );
+  --op-color-primary-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
+  );
+  --op-color-primary-on-plus-four: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
+  );
+  --op-color-primary-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
+  );
+  --op-color-primary-on-plus-three: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
+  );
+  --op-color-primary-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
+  );
+  --op-color-primary-on-plus-two: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
+  );
+  --op-color-primary-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
+  );
+  --op-color-primary-on-plus-one: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
+  );
+  --op-color-primary-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
+  );
+  --op-color-primary-on-base: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
+  );
+  --op-color-primary-on-base-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
+  );
+  --op-color-primary-on-minus-one: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
+  );
+  --op-color-primary-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
+  );
+  --op-color-primary-on-minus-two: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
+  );
+  --op-color-primary-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
+  );
+  --op-color-primary-on-minus-three: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
+  );
+  --op-color-primary-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
+  );
+  --op-color-primary-on-minus-four: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
+  );
+  --op-color-primary-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
+  );
+  --op-color-primary-on-minus-five: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
+  );
+  --op-color-primary-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
+  );
+  --op-color-primary-on-minus-six: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
+  );
+  --op-color-primary-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
+  );
+  --op-color-primary-on-minus-seven: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
+  );
+  --op-color-primary-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
+  );
+  --op-color-primary-on-minus-eight: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
+  );
+  --op-color-primary-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
+  );
+  --op-color-primary-on-minus-max: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
+  );
+  --op-color-primary-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
+    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
+  );
+
+  /**
+  * @tokens Neutral Colors
+  * @presenter Color
+  */
+  --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
+
+  /* Main Scale */
+  --op-color-neutral-plus-max: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
+  );
+  --op-color-neutral-plus-eight: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
+  );
+  --op-color-neutral-plus-seven: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
+  );
+  --op-color-neutral-plus-six: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
+  );
+  --op-color-neutral-plus-five: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
+  );
+  --op-color-neutral-plus-four: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
+  );
+  --op-color-neutral-plus-three: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
+  );
+  --op-color-neutral-plus-two: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
+  );
+  --op-color-neutral-plus-one: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
+  );
+  --op-color-neutral-base: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
+  );
+  --op-color-neutral-minus-one: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
+  );
+  --op-color-neutral-minus-two: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
+  );
+  --op-color-neutral-minus-three: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
+  );
+  --op-color-neutral-minus-four: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
+  );
+  --op-color-neutral-minus-five: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
+  );
+  --op-color-neutral-minus-six: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
+  );
+  --op-color-neutral-minus-seven: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
+  );
+  --op-color-neutral-minus-eight: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
+  );
+  --op-color-neutral-minus-max: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
+  );
+
+  /* On Scale */
+  --op-color-neutral-on-plus-max: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
+  );
+  --op-color-neutral-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
+  );
+  --op-color-neutral-on-plus-eight: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
+  );
+  --op-color-neutral-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
+  );
+  --op-color-neutral-on-plus-seven: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
+  );
+  --op-color-neutral-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
+  );
+  --op-color-neutral-on-plus-six: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
+  );
+  --op-color-neutral-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
+  );
+  --op-color-neutral-on-plus-five: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
+  );
+  --op-color-neutral-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
+  );
+  --op-color-neutral-on-plus-four: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
+  );
+  --op-color-neutral-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
+  );
+  --op-color-neutral-on-plus-three: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
+  );
+  --op-color-neutral-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
+  );
+  --op-color-neutral-on-plus-two: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
+  );
+  --op-color-neutral-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
+  );
+  --op-color-neutral-on-plus-one: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
+  );
+  --op-color-neutral-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
+  );
+  --op-color-neutral-on-base: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
+  );
+  --op-color-neutral-on-base-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
+  );
+  --op-color-neutral-on-minus-one: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
+  );
+  --op-color-neutral-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
+  );
+  --op-color-neutral-on-minus-two: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
+  );
+  --op-color-neutral-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
+  );
+  --op-color-neutral-on-minus-three: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
+  );
+  --op-color-neutral-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
+  );
+  --op-color-neutral-on-minus-four: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
+  );
+  --op-color-neutral-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
+  );
+  --op-color-neutral-on-minus-five: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
+  );
+  --op-color-neutral-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
+  );
+  --op-color-neutral-on-minus-six: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
+  );
+  --op-color-neutral-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
+  );
+  --op-color-neutral-on-minus-seven: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
+  );
+  --op-color-neutral-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
+  );
+  --op-color-neutral-on-minus-eight: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
+  );
+  --op-color-neutral-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
+  );
+  --op-color-neutral-on-minus-max: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
+  );
+  --op-color-neutral-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
+    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
+  );
+
+  /**
+  * @tokens Alerts Warning Colors
+  * @presenter Color
+  */
+
+  /* prettier-ignore */
+  --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
+
+  /* Main Scale */
+  --op-color-alerts-warning-plus-max: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
+  );
+  --op-color-alerts-warning-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
+  );
+  --op-color-alerts-warning-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
+  );
+  --op-color-alerts-warning-plus-six: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
+  );
+  --op-color-alerts-warning-plus-five: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
+  );
+  --op-color-alerts-warning-plus-four: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
+  );
+  --op-color-alerts-warning-plus-three: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
+  );
+  --op-color-alerts-warning-plus-two: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
+  );
+  --op-color-alerts-warning-plus-one: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
+  );
+  --op-color-alerts-warning-base: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
+  );
+  --op-color-alerts-warning-minus-one: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
+  );
+  --op-color-alerts-warning-minus-two: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
+  );
+  --op-color-alerts-warning-minus-three: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
+  );
+  --op-color-alerts-warning-minus-four: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
+  );
+  --op-color-alerts-warning-minus-five: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
+  );
+  --op-color-alerts-warning-minus-six: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
+  );
+  --op-color-alerts-warning-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
+  );
+  --op-color-alerts-warning-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
+  );
+  --op-color-alerts-warning-minus-max: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
+  );
+
+  /* On Scale */
+  --op-color-alerts-warning-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
+  );
+  --op-color-alerts-warning-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
+  );
+  --op-color-alerts-warning-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
+  );
+  --op-color-alerts-warning-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
+  );
+  --op-color-alerts-warning-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
+  );
+  --op-color-alerts-warning-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
+  );
+  --op-color-alerts-warning-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
+  );
+  --op-color-alerts-warning-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
+  );
+  --op-color-alerts-warning-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
+  );
+  --op-color-alerts-warning-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
+  );
+  --op-color-alerts-warning-on-plus-four: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
+  );
+  --op-color-alerts-warning-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
+  );
+  --op-color-alerts-warning-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
+  );
+  --op-color-alerts-warning-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
+  );
+  --op-color-alerts-warning-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
+  );
+  --op-color-alerts-warning-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
+  );
+  --op-color-alerts-warning-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
+  );
+  --op-color-alerts-warning-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
+  );
+  --op-color-alerts-warning-on-base: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
+  );
+  --op-color-alerts-warning-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
+  );
+  --op-color-alerts-warning-on-minus-one: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
+  );
+  --op-color-alerts-warning-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
+  );
+  --op-color-alerts-warning-on-minus-two: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
+  );
+  --op-color-alerts-warning-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
+  );
+  --op-color-alerts-warning-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
+  );
+  --op-color-alerts-warning-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
+  );
+  --op-color-alerts-warning-on-minus-four: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
+  );
+  --op-color-alerts-warning-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
+  );
+  --op-color-alerts-warning-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
+  );
+  --op-color-alerts-warning-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
+  );
+  --op-color-alerts-warning-on-minus-six: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
+  );
+  --op-color-alerts-warning-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
+  );
+  --op-color-alerts-warning-on-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
+  );
+  --op-color-alerts-warning-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
+  );
+  --op-color-alerts-warning-on-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
+  );
+  --op-color-alerts-warning-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
+  );
+  --op-color-alerts-warning-on-minus-max: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
+  );
+  --op-color-alerts-warning-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
+    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
+  );
+
+  /**
+  * @tokens Alerts Danger Colors
+  * @presenter Color
+  */
+
+  /* prettier-ignore */
+  --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
+
+  /* Main Scale */
+  --op-color-alerts-danger-plus-max: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
+  );
+  --op-color-alerts-danger-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
+  );
+  --op-color-alerts-danger-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
+  );
+  --op-color-alerts-danger-plus-six: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
+  );
+  --op-color-alerts-danger-plus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
+  );
+  --op-color-alerts-danger-plus-four: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
+  );
+  --op-color-alerts-danger-plus-three: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
+  );
+  --op-color-alerts-danger-plus-two: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
+  );
+  --op-color-alerts-danger-plus-one: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
+  );
+  --op-color-alerts-danger-base: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
+  );
+  --op-color-alerts-danger-minus-one: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
+  );
+  --op-color-alerts-danger-minus-two: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
+  );
+  --op-color-alerts-danger-minus-three: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
+  );
+  --op-color-alerts-danger-minus-four: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%)
+  );
+  --op-color-alerts-danger-minus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
+  );
+  --op-color-alerts-danger-minus-six: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
+  );
+  --op-color-alerts-danger-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
+  );
+  --op-color-alerts-danger-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-minus-max: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
+  );
+
+  /* On Scale */
+  --op-color-alerts-danger-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
+  );
+  --op-color-alerts-danger-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
+  );
+  --op-color-alerts-danger-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
+  );
+  --op-color-alerts-danger-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
+  );
+  --op-color-alerts-danger-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
+  );
+  --op-color-alerts-danger-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%)
+  );
+  --op-color-alerts-danger-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
+  );
+  --op-color-alerts-danger-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
+  );
+  --op-color-alerts-danger-on-plus-four: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
+  );
+  --op-color-alerts-danger-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
+  );
+  --op-color-alerts-danger-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
+  );
+  --op-color-alerts-danger-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
+  );
+  --op-color-alerts-danger-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
+  );
+  --op-color-alerts-danger-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
+  );
+  --op-color-alerts-danger-on-base: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
+  );
+  --op-color-alerts-danger-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
+  );
+  --op-color-alerts-danger-on-minus-one: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
+  );
+  --op-color-alerts-danger-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-minus-two: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
+  );
+  --op-color-alerts-danger-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
+  );
+  --op-color-alerts-danger-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
+  );
+  --op-color-alerts-danger-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
+  );
+  --op-color-alerts-danger-on-minus-four: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
+  );
+  --op-color-alerts-danger-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
+  );
+  --op-color-alerts-danger-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
+  );
+  --op-color-alerts-danger-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
+  );
+  --op-color-alerts-danger-on-minus-six: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
+  );
+  --op-color-alerts-danger-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
+  );
+  --op-color-alerts-danger-on-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
+  );
+  --op-color-alerts-danger-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
+  );
+  --op-color-alerts-danger-on-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
+  );
+  --op-color-alerts-danger-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
+  );
+  --op-color-alerts-danger-on-minus-max: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
+  );
+  --op-color-alerts-danger-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
+  );
+
+  /**
+  * @tokens Alerts Info Colors
+  * @presenter Color
+  */
+
+  /* prettier-ignore */
+  --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
+
+  /* Main Scale */
+  --op-color-alerts-info-plus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
+  );
+  --op-color-alerts-info-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
+  );
+  --op-color-alerts-info-plus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
+  );
+  --op-color-alerts-info-plus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
+  );
+  --op-color-alerts-info-plus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
+  );
+  --op-color-alerts-info-plus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
+  );
+  --op-color-alerts-info-plus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
+  );
+  --op-color-alerts-info-plus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
+  );
+  --op-color-alerts-info-base: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
+  );
+  --op-color-alerts-info-minus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
+  );
+  --op-color-alerts-info-minus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
+  );
+  --op-color-alerts-info-minus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
+  );
+  --op-color-alerts-info-minus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
+  );
+  --op-color-alerts-info-minus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
+  );
+  --op-color-alerts-info-minus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
+  );
+  --op-color-alerts-info-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-minus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
+  );
+
+  /* On Scale */
+  --op-color-alerts-info-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
+  );
+  --op-color-alerts-info-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
+  );
+  --op-color-alerts-info-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
+  );
+  --op-color-alerts-info-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
+  );
+  --op-color-alerts-info-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
+  );
+  --op-color-alerts-info-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
+  );
+  --op-color-alerts-info-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
+  );
+  --op-color-alerts-info-on-plus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
+  );
+  --op-color-alerts-info-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
+  );
+  --op-color-alerts-info-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
+  );
+  --op-color-alerts-info-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
+  );
+  --op-color-alerts-info-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-base: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
+  );
+  --op-color-alerts-info-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
+  );
+  --op-color-alerts-info-on-minus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
+  );
+  --op-color-alerts-info-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-minus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
+  );
+  --op-color-alerts-info-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
+  );
+  --op-color-alerts-info-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
+  );
+  --op-color-alerts-info-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
+  );
+  --op-color-alerts-info-on-minus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
+  );
+  --op-color-alerts-info-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
+  );
+  --op-color-alerts-info-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
+  );
+  --op-color-alerts-info-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
+  );
+  --op-color-alerts-info-on-minus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
+  );
+  --op-color-alerts-info-on-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
+  );
+  --op-color-alerts-info-on-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
+  );
+  --op-color-alerts-info-on-minus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
+  );
+  --op-color-alerts-info-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
+  );
+
+  /**
+  * @tokens Alerts Notice Colors
+  * @presenter Color
+  */
+
+  /* prettier-ignore */
+  --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
+
+  /* Main Scale */
+  --op-color-alerts-notice-plus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
+  );
+  --op-color-alerts-notice-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
+  );
+  --op-color-alerts-notice-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
+  );
+  --op-color-alerts-notice-plus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
+  );
+  --op-color-alerts-notice-plus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
+  );
+  --op-color-alerts-notice-plus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
+  );
+  --op-color-alerts-notice-plus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
+  );
+  --op-color-alerts-notice-plus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
+  );
+  --op-color-alerts-notice-plus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
+  );
+  --op-color-alerts-notice-base: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
+  );
+  --op-color-alerts-notice-minus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
+  );
+  --op-color-alerts-notice-minus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
+  );
+  --op-color-alerts-notice-minus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
+  );
+  --op-color-alerts-notice-minus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
+  );
+  --op-color-alerts-notice-minus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
+  );
+  --op-color-alerts-notice-minus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
+  );
+  --op-color-alerts-notice-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
+  );
+  --op-color-alerts-notice-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
+  );
+  --op-color-alerts-notice-minus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
+  );
+
+  /* On Scale */
+  --op-color-alerts-notice-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
+  );
+  --op-color-alerts-notice-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
+  );
+  --op-color-alerts-notice-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
+  );
+  --op-color-alerts-notice-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
+  );
+  --op-color-alerts-notice-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
+  );
+  --op-color-alerts-notice-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
+  );
+  --op-color-alerts-notice-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
+  );
+  --op-color-alerts-notice-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
+  );
+  --op-color-alerts-notice-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
+  );
+  --op-color-alerts-notice-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
+  );
+  --op-color-alerts-notice-on-plus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
+  );
+  --op-color-alerts-notice-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
+  );
+  --op-color-alerts-notice-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
+  );
+  --op-color-alerts-notice-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
+  );
+  --op-color-alerts-notice-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
+  );
+  --op-color-alerts-notice-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
+  );
+  --op-color-alerts-notice-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
+  );
+  --op-color-alerts-notice-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
+  );
+  --op-color-alerts-notice-on-base: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
+  );
+  --op-color-alerts-notice-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
+  );
+  --op-color-alerts-notice-on-minus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
+  );
+  --op-color-alerts-notice-on-minus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
+  );
+  --op-color-alerts-notice-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
+  );
+  --op-color-alerts-notice-on-minus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
+  );
+  --op-color-alerts-notice-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
+  );
+  --op-color-alerts-notice-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
+  );
+  --op-color-alerts-notice-on-minus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
+  );
+  --op-color-alerts-notice-on-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
+  );
+  --op-color-alerts-notice-on-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
+  );
+  --op-color-alerts-notice-on-minus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
+  );
+  --op-color-alerts-notice-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
+  );
+
+  /**
+  * @tokens Dark Shadows
+  * @presenter Shadow
+  */
+  --op-color-background: var(--op-color-neutral-plus-eight);
+  --op-color-on-background: var(--op-color-neutral-on-plus-eight);
+  --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
+}
+/* Force Light Mode */
+:root[data-theme-mode='light'] {
+  color-scheme: only light;
+}
+/* Force Dark Mode */
+:root[data-theme-mode='dark'] {
+  color-scheme: only dark;
+
+  /**
+  * @tokens Dark Shadows
+  * @presenter Shadow
+  */
+  --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
+  --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
+  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
+  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
+  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
+
+  /**
+  * @tokens Encoded Images
+  */
+  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme-mode='light']) {
+    /**
+    * @tokens Dark Shadows
+    * @presenter Shadow
+    */
+    --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
+    --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
+    --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
+    --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
+    --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
+
+    /**
+    * @tokens Encoded Images
+    */
+    --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
+  }
+}
+/* Base styles and utilities */
+/* After a reset, introduce base element styles specific to this system */
+html {
+  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
+  font-family: var(--op-font-family);
+  font-size: 62.5%; /* 1rem = 10px */
+}
+body {
+  overflow: auto;
+  height: 100vh;
+  background: var(--op-color-background);
+  color: var(--op-color-on-background);
+  font-size: var(--op-font-medium);
+}
+button {
+  background: none;
+  cursor: pointer;
+}
+button,
+input[type='submit'] {
+  border: 0;
+}
+label {
+  display: inline-block;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+a {
+  color: var(--op-color-primary-original);
+}
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+figure,
+pre {
+  margin: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--op-space-small);
+  font-weight: var(--op-font-weight-normal);
+}
+h1 {
+  font-size: var(--op-font-3x-large);
+}
+h2 {
+  font-size: var(--op-font-2x-large);
+}
+h3 {
+  font-size: var(--op-font-large);
+}
+h4 {
+  font-size: var(--op-font-medium);
+}
+h5 {
+  font-size: var(--op-font-small);
+}
+h6 {
+  font-size: var(--op-font-x-small);
+}
+p {
+  margin-bottom: var(--op-space-small);
+  font-size: var(--op-font-medium);
+}
+small {
+  font-size: var(--op-font-small);
+}
+.app-with-sidebar {
+  display: grid;
+  width: 100%;
+  height: 100vh;
+  grid-template-columns: auto 1fr auto;
+}
+.app-body {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+}
+.app__header {
+  position: sticky;
+  z-index: var(--op-z-index-header);
+  top: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.app__content {
+  width: 100%;
+  max-width: var(--op-breakpoint-medium);
+  flex-grow: 1;
+  padding: 0 var(--op-space-large);
+  margin: 0 auto;
+}
+.app__content-no-margin {
+  width: 100%;
+  flex-grow: 1;
+  padding: 0 var(--op-space-large);
+  overflow-y: auto;
+}
+.app__footer {
+  position: sticky;
+  z-index: var(--op-z-index-footer);
+  bottom: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+/* Container Properties */
+.container {
+  width: 100%;
+  max-width: var(--op-breakpoint-medium);
+  padding: 0 var(--op-space-large);
+  margin: 0 auto;
+}
+.container--sm {
+  max-width: var(--op-breakpoint-small);
+}
+.container--md-padding {
+  padding: 0 var(--op-space-medium);
+}
+.container--sm-padding {
+  padding: 0 var(--op-space-small);
+}
+.container--xs {
+  max-width: var(--op-breakpoint-x-small);
+}
+/* Width Properties */
+.full-width {
+  width: 100%;
+}
+.half-width {
+  width: 50%;
+}
+.four-fifths-width {
+  width: calc(100% * 4 / 5);
+}
+.three-fifths-width {
+  width: calc(100% * 3 / 5);
+}
+.two-fifths-width {
+  width: calc(100% * 2 / 5);
+}
+.one-fifth-width {
+  width: calc(100% * 1 / 5);
+}
+.three-quarters-width {
+  width: calc(100% * 3 / 4);
+}
+.one-quarter-width {
+  width: calc(100% * 1 / 4);
+}
+.two-thirds-width {
+  width: calc(100% * 2 / 3);
+}
+.one-third-width {
+  width: calc(100% * 1 / 3);
+}
+/* Flex Properties */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+/* Gap Properties */
+.gap-xxs {
+  gap: var(--op-space-2x-small);
+
+  --op-gap: var(--op-space-2x-small);
+}
+.gap-xs {
+  gap: var(--op-space-x-small);
+
+  --op-gap: var(--op-space-x-small);
+}
+.gap-sm {
+  gap: var(--op-space-small);
+
+  --op-gap: var(--op-space-small);
+}
+.gap-md {
+  gap: var(--op-space-medium);
+
+  --op-gap: var(--op-space-medium);
+}
+.gap-lg {
+  gap: var(--op-space-large);
+
+  --op-gap: var(--op-space-large);
+}
+.gap-xl {
+  gap: var(--op-space-x-large);
+
+  --op-gap: var(--op-space-x-large);
+}
+/* Justify Content */
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+/* Align Items */
+.items-stretch {
+  align-items: stretch;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-center {
+  align-items: center;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-baseline {
+  align-items: baseline;
+}
+/* Align Self */
+.self-auto {
+  align-self: auto;
+}
+.self-start {
+  align-self: flex-start;
+}
+.self-center {
+  align-self: center;
+}
+.self-end {
+  align-self: flex-end;
+}
+.self-stretch {
+  align-self: stretch;
+}
+.self-baseline {
+  align-self: baseline;
+}
+/* Text Alignment */
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-justify {
+  text-align: justify;
+}
+/* Box Margin */
+.margin-xl {
+  margin: var(--op-space-x-large);
+}
+.margin-lg {
+  margin: var(--op-space-large);
+}
+.margin-md {
+  margin: var(--op-space-medium);
+}
+.margin-sm {
+  margin: var(--op-space-small);
+}
+.margin-xs {
+  margin: var(--op-space-x-small);
+}
+.margin-none {
+  margin: 0;
+}
+.margin-auto {
+  margin: auto;
+}
+/* Vertical Margin */
+.margin-y-xl {
+  margin-top: var(--op-space-x-large);
+  margin-bottom: var(--op-space-x-large);
+}
+.margin-y-lg {
+  margin-top: var(--op-space-large);
+  margin-bottom: var(--op-space-large);
+}
+.margin-y-md {
+  margin-top: var(--op-space-medium);
+  margin-bottom: var(--op-space-medium);
+}
+.margin-y-sm {
+  margin-top: var(--op-space-small);
+  margin-bottom: var(--op-space-small);
+}
+.margin-y-xs {
+  margin-top: var(--op-space-x-small);
+  margin-bottom: var(--op-space-x-small);
+}
+.margin-y-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+/* Horizontal Margin */
+.margin-x-xl {
+  margin-right: var(--op-space-x-large);
+  margin-left: var(--op-space-x-large);
+}
+.margin-x-lg {
+  margin-right: var(--op-space-large);
+  margin-left: var(--op-space-large);
+}
+.margin-x-md {
+  margin-right: var(--op-space-medium);
+  margin-left: var(--op-space-medium);
+}
+.margin-x-sm {
+  margin-right: var(--op-space-small);
+  margin-left: var(--op-space-small);
+}
+.margin-x-xs {
+  margin-right: var(--op-space-x-small);
+  margin-left: var(--op-space-x-small);
+}
+.margin-x-none {
+  margin-right: 0;
+  margin-left: 0;
+}
+/* Top Margin */
+.margin-top-xl {
+  margin-top: var(--op-space-x-large);
+}
+.margin-top-lg {
+  margin-top: var(--op-space-large);
+}
+.margin-top-md {
+  margin-top: var(--op-space-medium);
+}
+.margin-top-sm {
+  margin-top: var(--op-space-small);
+}
+.margin-top-xs {
+  margin-top: var(--op-space-x-small);
+}
+.margin-top-none {
+  margin-top: 0;
+}
+/* Bottom Margin */
+.margin-bottom-xl {
+  margin-bottom: var(--op-space-x-large);
+}
+.margin-bottom-lg {
+  margin-bottom: var(--op-space-large);
+}
+.margin-bottom-md {
+  margin-bottom: var(--op-space-medium);
+}
+.margin-bottom-sm {
+  margin-bottom: var(--op-space-small);
+}
+.margin-bottom-xs {
+  margin-bottom: var(--op-space-x-small);
+}
+.margin-bottom-none {
+  margin-bottom: 0;
+}
+/* Right Margin */
+.margin-right-xl {
+  margin-right: var(--op-space-x-large);
+}
+.margin-right-lg {
+  margin-right: var(--op-space-large);
+}
+.margin-right-md {
+  margin-right: var(--op-space-medium);
+}
+.margin-right-sm {
+  margin-right: var(--op-space-small);
+}
+.margin-right-xs {
+  margin-right: var(--op-space-x-small);
+}
+.margin-right-none {
+  margin-left: 0;
+}
+/* Left Margin */
+.margin-left-xl {
+  margin-left: var(--op-space-x-large);
+}
+.margin-left-lg {
+  margin-left: var(--op-space-large);
+}
+.margin-left-md {
+  margin-left: var(--op-space-medium);
+}
+.margin-left-sm {
+  margin-left: var(--op-space-small);
+}
+.margin-left-xs {
+  margin-left: var(--op-space-x-small);
+}
+.margin-left-none {
+  margin-left: 0;
+}
+/*
+  Accessibility
+  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
+  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
+.sr-only {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+}
+/* Components */
+.accordion {
+  /* Public API (customizable component options) */
+  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
+
+  summary {
+    display: grid;
+    min-height: var(--_op-accordion-summary-min-height);
+    align-items: center;
+    cursor: pointer;
+    gap: var(--op-space-2x-small);
+    grid-template-columns: auto 1fr auto;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+      content: '';
+    }
+
+    .accordion__label {
+      color: var(--op-color-neutral-on-plus-max);
+      font-size: var(--op-font-x-small);
+      font-weight: var(--op-font-weight-semi-bold);
+    }
+
+    .accordion__marker {
+      --op-mso-optical-sizing: 48;
+
+      font-size: var(--op-font-x-large);
+      justify-self: flex-end;
+      transition: var(--op-transition-accordion);
+      user-select: none;
+    }
+  }
+
+  &[open] {
+    summary .accordion__marker {
+      rotate: 0.25turn;
+    }
+  }
+}
+.alert {
+  display: flex;
+  align-items: center;
+  padding: var(--op-space-x-small) var(--op-space-medium);
+  border-radius: var(--op-radius-medium);
+  gap: var(--op-space-small);
+
+  /* Elements */
+
+  .alert__icon {
+    --op-mso-optical-sizing: 40; /* .icon--large styling */
+    --op-mso-weight: var(--op-font-weight-bold); /* .icon--weight-bold styling */
+
+    font-size: var(--op-font-large); /* .icon--large styling */
+    line-height: var(--op-line-height-dense);
+  }
+
+  .alert__messages {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--op-space-2x-small);
+  }
+
+  .alert__title {
+    font-size: var(--op-font-medium);
+    font-weight: var(--op-font-weight-medium);
+  }
+
+  .alert__description {
+    font-size: var(--op-font-small);
+  }
+
+  /* Modifiers */
+
+  &.alert--flash {
+    position: fixed;
+    z-index: var(--op-z-index-alert-group);
+    top: var(--op-space-large);
+    right: var(--op-space-large);
+    animation: var(--op-animation-flash);
+  }
+
+  &.alert--warning {
+    background-color: var(--op-color-alerts-warning-plus-eight);
+    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-plus-eight);
+
+    .alert__title {
+      color: var(--op-color-alerts-warning-on-plus-eight-alt);
+    }
+
+    &.alert--muted {
+      background-color: var(--op-color-alerts-warning-plus-five);
+      box-shadow: none;
+      color: var(--op-color-alerts-warning-on-plus-five);
+
+      .alert__title {
+        color: var(--op-color-alerts-warning-on-plus-five-alt);
+      }
+    }
+
+    &.alert--filled {
+      background-color: var(--op-color-alerts-warning-base);
+      box-shadow: none;
+      color: var(--op-color-alerts-warning-on-base);
+
+      .alert__title {
+        color: var(--op-color-alerts-warning-on-base-alt);
+      }
+    }
+  }
+
+  /* alert--alert is an alias for alert--danger. See Alert.mdx for reasoning. */
+  &.alert--danger,
+  &.alert--alert {
+    background-color: var(--op-color-alerts-danger-plus-eight);
+    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-plus-eight);
+
+    /* stylelint-disable no-descending-specificity */
+    .alert__title {
+      color: var(--op-color-alerts-danger-on-plus-eight-alt);
+    }
+    /* stylelint-enable no-descending-specificity */
+
+    &.alert--muted {
+      background-color: var(--op-color-alerts-danger-plus-five);
+      box-shadow: none;
+      color: var(--op-color-alerts-danger-on-plus-five);
+
+      .alert__title {
+        color: var(--op-color-alerts-danger-on-plus-five-alt);
+      }
+    }
+
+    &.alert--filled {
+      background-color: var(--op-color-alerts-danger-base);
+      box-shadow: none;
+      color: var(--op-color-alerts-danger-on-base);
+
+      .alert__title {
+        color: var(--op-color-alerts-danger-on-base-alt);
+      }
+    }
+  }
+
+  &.alert--info {
+    background-color: var(--op-color-alerts-info-plus-eight);
+    box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-plus-eight);
+
+    /* stylelint-disable no-descending-specificity */
+    .alert__title {
+      color: var(--op-color-alerts-info-on-plus-eight-alt);
+    }
+    /* stylelint-enable no-descending-specificity */
+
+    &.alert--muted {
+      background-color: var(--op-color-alerts-info-plus-five);
+      box-shadow: none;
+      color: var(--op-color-alerts-info-on-plus-five);
+
+      .alert__title {
+        color: var(--op-color-alerts-info-on-plus-five-alt);
+      }
+    }
+
+    &.alert--filled {
+      background-color: var(--op-color-alerts-info-base);
+      box-shadow: none;
+      color: var(--op-color-alerts-info-on-base);
+
+      .alert__title {
+        color: var(--op-color-alerts-info-on-base-alt);
+      }
+    }
+  }
+
+  &.alert--notice {
+    background-color: var(--op-color-alerts-notice-plus-eight);
+    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-plus-eight);
+
+    /* stylelint-disable no-descending-specificity */
+    .alert__title {
+      color: var(--op-color-alerts-notice-on-plus-eight-alt);
+    }
+    /* stylelint-enable no-descending-specificity */
+
+    &.alert--muted {
+      background-color: var(--op-color-alerts-notice-plus-five);
+      box-shadow: none;
+      color: var(--op-color-alerts-notice-on-plus-five);
+
+      .alert__title {
+        color: var(--op-color-alerts-notice-on-plus-five-alt);
+      }
+    }
+
+    &.alert--filled {
+      background-color: var(--op-color-alerts-notice-base);
+      box-shadow: none;
+      color: var(--op-color-alerts-notice-on-base);
+
+      .alert__title {
+        color: var(--op-color-alerts-notice-on-base-alt);
+      }
+    }
+  }
+}
+.avatar {
+  /* Public API (customizable component options) */
+  --_op-avatar-border-radius: var(--op-radius-circle);
+  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
+  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
+  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
+  --_op-avatar-outer-border-width: var(--op-border-width-large);
+  --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
+  --_op-avatar-hover-opacity: var(--op-opacity-overlay);
+  --_op-avatar-size-small: calc(8 * var(--op-size-unit)); /* 32px */
+  --_op-avatar-size-medium: calc(10 * var(--op-size-unit)); /* 40px */
+  --_op-avatar-size-large: calc(14 * var(--op-size-unit)); /* 56px */
+
+  /* Private API (component option defaults) */
+  --__op-avatar-size: var(--_op-avatar-size-large);
+
+  position: relative;
+  z-index: 1;
+  display: block;
+  overflow: hidden;
+  width: var(--__op-avatar-size);
+  min-width: var(--__op-avatar-size);
+  height: var(--__op-avatar-size);
+  min-height: var(--__op-avatar-size);
+  border-radius: var(--_op-avatar-border-radius);
+
+  &::before {
+    position: absolute;
+    z-index: 2;
+    content: '';
+    inset: 0;
+  }
+
+  &::after {
+    position: absolute;
+    z-index: 3;
+    border-radius: var(--_op-avatar-border-radius);
+    box-shadow:
+      inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color),
+      inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
+    content: '';
+    inset: 0;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Disabled State */
+  &.avatar--disabled {
+    opacity: var(--_op-avatar-disabled-opacity);
+    pointer-events: none;
+  }
+
+  /* Focus State */
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    outline: none;
+  }
+
+  /* Hover State */
+  &:hover:not(div, .avatar--disabled) {
+    --_op-avatar-inner-border-color: var(--op-color-primary-base);
+    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
+
+    cursor: pointer;
+
+    &::before {
+      background-color: var(--op-color-primary-base);
+      opacity: var(--_op-avatar-hover-opacity);
+    }
+  }
+
+  &:focus-visible:not(.avatar--disabled) {
+    --_op-avatar-outer-border-color: var(--op-color-primary-base);
+
+    cursor: pointer;
+  }
+
+  /* Size Modifiers */
+  &.avatar--small {
+    --__op-avatar-size: var(--_op-avatar-size-small);
+  }
+
+  &.avatar--medium {
+    --__op-avatar-size: var(--_op-avatar-size-medium);
+  }
+
+  &.avatar--large {
+    --__op-avatar-size: var(--_op-avatar-size-large);
+  }
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-neutral-base);
+  color: var(--op-color-neutral-on-base);
+  cursor: inherit;
+  font-size: var(--op-font-x-small);
+  font-weight: var(--op-font-weight-bold);
+  gap: var(--op-space-x-small);
+  letter-spacing: var(--op-letter-spacing-label);
+  line-height: var(--op-line-height-dense);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-x-small);
+  user-select: none;
+  white-space: nowrap;
+
+  /* Elements */
+
+  .material-symbols-outlined {
+    font-size: var(--op-font-small);
+  }
+
+  /* Modifiers */
+
+  &.badge--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+  }
+
+  &.badge--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+  }
+
+  &.badge--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+  }
+
+  &.badge--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+  }
+
+  &.badge--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+  }
+
+  &.badge--pill {
+    border-radius: var(--op-radius-pill);
+  }
+
+  &.badge--notification-right {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(50%);
+  }
+
+  &.badge--notification-left {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(-50%);
+  }
+}
+.breadcrumbs {
+  /* Public API (customizable component options) */
+  --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
+  --_op-breadcrumbs-font-size-large: var(--op-font-small);
+
+  /* Private API (component option defaults) */
+  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--op-space-x-small);
+
+  /* Elements */
+  .breadcrumbs__link {
+    font-size: var(--__op-breadcrumbs-font-size);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .breadcrumbs__text {
+    font-size: var(--__op-breadcrumbs-font-size);
+    font-weight: var(--op-font-weight-bold);
+  }
+
+  /* Modifiers */
+  &.breadcrumbs--small {
+    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
+  }
+
+  &.breadcrumbs--large {
+    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
+  }
+}
+.btn {
+  /* Public API (customizable component options) */
+  --_op-btn-height-small: var(--op-input-height-small);
+  --_op-btn-height-medium: var(--op-input-height-medium);
+  --_op-btn-height-large: var(--op-input-height-large);
+  --_op-btn-font-small: var(--op-font-x-small);
+  --_op-btn-font-medium: var(--op-font-small);
+  --_op-btn-font-large: var(--op-font-small);
+  --_op-btn-padding-small: 0 var(--op-space-x-small);
+  --_op-btn-padding-medium: 0 var(--op-space-small);
+  --_op-btn-padding-large: 0 var(--op-space-small);
+
+  /* Private API (component option defaults) */
+  --__op-btn-height: var(--_op-btn-height-large);
+  --__op-btn-font-size: var(--_op-btn-font-large);
+  --__op-btn-padding: var(--_op-btn-padding-large);
+
+  display: inline-flex;
+  min-height: var(--__op-btn-height);
+  align-items: center;
+  justify-content: center;
+  padding: var(--__op-btn-padding);
+  border-radius: var(--op-radius-medium);
+  appearance: none;
+  background-color: var(--op-color-neutral-plus-eight);
+  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
+  color: var(--op-color-neutral-on-plus-eight);
+  cursor: pointer;
+  font-size: var(--__op-btn-font-size);
+  font-weight: var(--op-font-weight-normal);
+  gap: var(--op-space-x-small);
+  text-align: center;
+  text-decoration: none;
+  transition: var(--op-transition-input);
+  white-space: nowrap;
+
+  /* Modifiers */
+
+  /* Default Active State */
+  &.btn--active {
+    background-color: var(--op-color-primary-plus-five);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+    color: var(--op-color-primary-on-plus-five);
+  }
+
+  /* Default Hover State */
+  &:hover {
+    background-color: var(--op-color-primary-plus-eight);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+    color: var(--op-color-primary-on-plus-eight);
+  }
+
+  /* Default Focus State */
+  &:focus-visible {
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: var(--op-input-focus-primary);
+    color: var(--op-color-neutral-on-plus-eight);
+  }
+
+  /* Default Borderless State */
+  &.btn--no-border {
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--op-color-primary-on-plus-max);
+
+    /* Default Borderless + Active State. */
+    &.btn--active {
+      background-color: var(--op-color-primary-plus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+      color: var(--op-color-primary-on-plus-five);
+    }
+
+    /* Default Borderless + Hover State */
+    &:hover {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
+      color: var(--op-color-primary-on-plus-eight);
+    }
+
+    /* Default Borderless + Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-plus-eight);
+    }
+  }
+
+  /* Pill Modifier */
+  &.btn--pill {
+    border-radius: var(--op-radius-pill);
+  }
+
+  /* Icon Modifier */
+  &.btn--icon {
+    width: var(--__op-btn-height);
+    min-width: var(--__op-btn-height);
+    padding: 0;
+  }
+
+  /* Icon With Label Modifier */
+  &.btn--icon-with-label {
+    flex-direction: column;
+    padding: var(--op-space-small);
+    gap: var(--op-space-3x-small);
+  }
+
+  /* Size Modifiers */
+  &.btn--small {
+    --__op-btn-height: var(--_op-btn-height-small);
+    --__op-btn-font-size: var(--_op-btn-font-small);
+    --__op-btn-padding: var(--_op-btn-padding-small);
+  }
+
+  &.btn--medium {
+    --__op-btn-height: var(--_op-btn-height-medium);
+    --__op-btn-font-size: var(--_op-btn-font-medium);
+    --__op-btn-padding: var(--_op-btn-padding-medium);
+  }
+
+  &.btn--large {
+    --__op-btn-height: var(--_op-btn-height-large);
+    --__op-btn-font-size: var(--_op-btn-font-large);
+    --__op-btn-padding: var(--_op-btn-padding-large);
+  }
+
+  /* Disabled Modifier */
+  &.btn--disabled,
+  &:disabled {
+    opacity: var(--op-opacity-disabled);
+    pointer-events: none;
+    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
+    user-select: none;
+  }
+
+  /* Button with notification style badge */
+  &.btn--with-badge {
+    position: relative;
+  }
+
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+
+  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */
+
+  /* --op-breakpoint-small */
+  @media (width <= 768px) {
+    --__op-btn-height: var(--_op-btn-height-large);
+    --__op-btn-font-size: var(--_op-btn-font-large);
+
+    &.btn--small,
+    &.btn--medium,
+    &.btn--large {
+      --__op-btn-height: var(--_op-btn-height-large);
+      --__op-btn-font-size: var(--_op-btn-font-large);
+      --__op-btn-padding: var(--_op-btn-padding-large);
+    }
+  }
+
+  /* Variant Modifiers */
+  &.btn--primary {
+    background-color: var(--op-color-primary-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+
+    /* Active State */
+    &.btn--active {
+      background-color: var(--op-color-primary-minus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
+      color: var(--op-color-primary-on-minus-five);
+    }
+
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-primary-plus-one);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
+      color: var(--op-color-primary-on-plus-one);
+    }
+
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-primary-base);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-base);
+    }
+
+    /* Borderless State */
+    &.btn--no-border {
+      background-color: transparent;
+      box-shadow: none;
+      color: var(--op-color-primary-base);
+
+      /* Borderless + Active State */
+      &.btn--active {
+        background-color: var(--op-color-primary-plus-five);
+        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+        color: var(--op-color-primary-on-plus-five);
+      }
+
+      /* Borderless + Hover State */
+      &:hover {
+        background-color: var(--op-color-primary-plus-eight);
+        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
+        color: var(--op-color-primary-on-plus-eight);
+      }
+
+      /* Borderless + Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-primary-plus-eight);
+        box-shadow: var(--op-input-focus-primary);
+        color: var(--op-color-primary-on-plus-eight);
+      }
+    }
+  }
+
+  &.btn--destructive,
+  &.btn--delete {
+    background-color: var(--op-color-alerts-danger-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+
+    /* Active State */
+    &.btn--active {
+      background-color: var(--op-color-alerts-danger-plus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
+      color: var(--op-color-alerts-danger-on-plus-five);
+    }
+
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-alerts-danger-minus-two);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
+      color: var(--op-color-alerts-danger-on-minus-two);
+    }
+
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-alerts-danger-base);
+      box-shadow: var(--op-input-focus-danger);
+      color: var(--op-color-alerts-danger-on-base);
+    }
+  }
+
+  &.btn--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+
+    /* Active State */
+    &.btn--active {
+      background-color: var(--op-color-alerts-warning-plus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
+      color: var(--op-color-alerts-warning-on-plus-five);
+    }
+
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-alerts-warning-minus-two);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
+      color: var(--op-color-alerts-warning-on-minus-two);
+    }
+
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-alerts-warning-base);
+      box-shadow: var(--op-input-focus-warning);
+      color: var(--op-color-alerts-warning-on-base);
+    }
+  }
+}
+.btn-group {
+  --op-btn-group-hover-z-index: 1;
+  --op-btn-group-active-z-index: 2;
+  --op-btn-group-focus-z-index: 3;
+
+  display: inline-flex;
+  align-items: center;
+
+  .btn {
+    + .btn {
+      margin-inline-start: calc(var(--op-border-width) * -1);
+    }
+
+    &:hover {
+      z-index: var(--op-btn-group-hover-z-index);
+    }
+
+    &.btn--active {
+      z-index: var(--op-btn-group-active-z-index);
+    }
+
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      z-index: var(--op-btn-group-focus-z-index);
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}
+.btn-group-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+}
+.card {
+  /* Public API (customizable component options) */
+  --_op-card-padding: var(--op-space-medium);
+  --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
+
+  position: relative;
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-background);
+  box-shadow: var(--_op-card-box-shadow);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+
+  /* Modifiers */
+
+  &.card--condensed {
+    --_op-card-padding: var(--op-space-x-small);
+  }
+
+  &.card--padded {
+    padding: var(--_op-card-padding);
+  }
+
+  &.card--shadow-x-small {
+    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-small);
+  }
+
+  &.card--shadow-small {
+    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-small);
+  }
+
+  &.card--shadow-medium {
+    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-medium);
+  }
+
+  &.card--shadow-large {
+    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-large);
+  }
+
+  &.card--shadow-x-large {
+    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-large);
+  }
+
+  /* Elements */
+  .card__header,
+  .card__body,
+  .card__footer {
+    padding: var(--_op-card-padding);
+  }
+
+  .card__header {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 0;
+    }
+  }
+}
+.confirm-dialog-wrapper {
+  position: fixed;
+  z-index: var(--op-z-index-dialog);
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  outline: 0;
+  visibility: hidden;
+
+  /* Elements */
+
+  .confirm-dialog-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    background: var(--op-color-black);
+    inset: 0;
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+
+  /* Modifiers */
+
+  &.confirm-dialog-wrapper--active {
+    visibility: visible;
+
+    .confirm-dialog {
+      opacity: var(--op-opacity-full);
+      transform: scale(1);
+    }
+
+    .confirm-dialog-wrapper__backdrop {
+      opacity: var(--op-opacity-half);
+      visibility: visible;
+    }
+  }
+}
+/* stylelint-disable no-descending-specificity */
+.confirm-dialog {
+  /* Public API (customizable component options) */
+  --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */
+
+  z-index: var(--op-z-index-dialog-content);
+  width: var(--_op-confirm-dialog-width);
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-background);
+  box-shadow: var(--op-border-all) var(--op-color-border);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: var(--op-opacity-none);
+  transform: scale(0.7);
+  transition: var(--op-transition-modal);
+
+  .confirm-dialog__header,
+  .confirm-dialog__body,
+  .confirm-dialog__footer {
+    padding: var(--op-space-medium);
+  }
+
+  .confirm-dialog__header {
+    font-size: var(--op-font-large);
+    font-weight: var(--op-font-weight-semi-bold);
+  }
+
+  .confirm-dialog__body {
+    box-shadow: var(--op-border-all) var(--op-color-border);
+  }
+
+  .confirm-dialog__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+/* stylelint-enable no-descending-specificity */
+.divider {
+  /* Public API (customizable component options) */
+  --_op-divider-vertical-min-height: var(--op-space-large);
+  --_op-divider-height-small: var(--op-border-width);
+  --_op-divider-height-medium: var(--op-border-width-large);
+  --_op-divider-height-large: var(--op-border-width-x-large);
+  --_op-divider-padding-small: var(--op-space-2x-small);
+  --_op-divider-padding-medium: var(--op-space-x-small);
+  --_op-divider-padding-large: var(--op-space-medium);
+
+  /* Private API (component option defaults) */
+  --__op-divider-height: var(--_op-divider-height-small);
+  --__op-divider-padding: 0;
+
+  width: 100%;
+  height: var(--__op-divider-height);
+  background-color: var(--op-color-border);
+  margin-block: var(--__op-divider-padding);
+  margin-inline: 0;
+
+  /* Size Modifiers */
+  &.divider--small {
+    --__op-divider-height: var(--_op-divider-height-small);
+  }
+
+  &.divider--medium {
+    --__op-divider-height: var(--_op-divider-height-medium);
+  }
+
+  &.divider--large {
+    --__op-divider-height: var(--_op-divider-height-large);
+  }
+
+  /* Spacing Modifiers */
+  &.divider--spacing-small {
+    --__op-divider-padding: var(--_op-divider-padding-small);
+  }
+
+  &.divider--spacing-medium {
+    --__op-divider-padding: var(--_op-divider-padding-medium);
+  }
+
+  &.divider--spacing-large {
+    --__op-divider-padding: var(--_op-divider-padding-large);
+  }
+
+  /* Direction Modifier */
+  &.divider--vertical {
+    width: var(--__op-divider-height);
+    height: 100%;
+    min-height: var(--_op-divider-vertical-min-height);
+    margin-block: 0;
+    margin-inline: var(--__op-divider-padding);
+  }
+}
+.form-control {
+  /* Public API (customizable component options) */
+  --_op-form-control-height-small: var(--op-input-height-small);
+  --_op-form-control-height-medium: var(--op-input-height-medium);
+  --_op-form-control-height-large: var(--op-input-height-large);
+  --_op-form-control-font-small: var(--op-font-x-small);
+  --_op-form-control-font-medium: var(--op-font-small);
+  --_op-form-control-font-large: var(--op-font-small);
+
+  /* Private API (component option defaults) */
+  --__op-form-control-height: var(--_op-form-control-height-large);
+  --__op-form-control-font-size: var(--_op-form-control-font-large);
+
+  min-width: var(--__op-form-control-height);
+  height: var(--__op-form-control-height);
+
+  /* Size Modifiers */
+  &.form-control--small {
+    --__op-form-control-height: var(--_op-form-control-height-small);
+    --__op-form-control-font-size: var(--_op-form-control-font-small);
+  }
+
+  &.form-control--medium {
+    --__op-form-control-height: var(--_op-form-control-height-medium);
+    --__op-form-control-font-size: var(--_op-form-control-font-medium);
+  }
+
+  &.form-control--large {
+    --__op-form-control-height: var(--_op-form-control-height-large);
+    --__op-form-control-font-size: var(--_op-form-control-font-large);
+  }
+
+  /* Disabled State */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--_op-form-control-opacity-disabled);
+  }
+
+  /* Readonly State */
+  &[readonly] {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--op-color-on-background);
+    pointer-events: none;
+    user-select: none;
+
+    /* stylelint-disable selector-no-vendor-prefix */
+    &::-webkit-input-placeholder {
+      color: var(--op-color-on-background);
+    }
+    /* stylelint-enable selector-no-vendor-prefix */
+  }
+}
+/* Radio or Checkbox Form Control */
+.form-control:is([type='radio'], [type='checkbox']) {
+  /* Public API (customizable component options) */
+  --_op-form-control-height-small: var(--op-space-medium);
+  --_op-form-control-height-medium: var(--op-space-large);
+  --_op-form-control-height-large: var(--op-space-x-large);
+
+  width: var(--__op-form-control-height);
+  height: var(--__op-form-control-height);
+  align-self: center;
+  margin: 0;
+  accent-color: var(--op-color-primary-base);
+  cursor: pointer;
+
+  & + label {
+    align-self: center;
+  }
+}
+/* Any Form Control that is not a radio or checkbox */
+.form-control:not([type='radio'], [type='checkbox']) {
+  /* Public API (customizable component options) */
+  --_op-form-control-opacity-disabled: var(--op-opacity-disabled);
+
+  /* Private API (component option defaults) */
+  --__op-form-control-border-color: var(--op-color-neutral-plus-four);
+
+  display: block;
+  width: 100%;
+  min-width: var(--__op-form-control-height);
+  height: var(--__op-form-control-height);
+  border: none;
+  border-radius: var(--op-radius-medium);
+  appearance: none;
+  background-color: var(--op-color-neutral-plus-eight);
+  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
+  color: var(--op-color-neutral-on-plus-eight);
+  cursor: text;
+  font-size: var(--__op-form-control-font-size);
+  line-height: var(--op-line-height-base);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-small) var(--op-space-x-small);
+
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+
+  /* Hover State */
+  &:hover:not(:disabled, [readonly]) {
+    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
+  }
+
+  &:focus-visible:not([readonly]) {
+    background-color: var(--op-color-primary-plus-seven);
+    box-shadow: var(--op-input-focus-primary);
+    color: var(--op-color-primary-on-plus-seven);
+  }
+
+  /* Borderless State */
+  &.form-control--no-border {
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--op-color-primary-on-plus-max);
+
+    &:focus-visible:not([readonly]) {
+      background-color: var(--op-color-primary-plus-seven);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-plus-seven);
+    }
+
+    /* Borderless + Hover State */
+    &:hover:not(:disabled, [readonly]) {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
+      color: var(--op-color-primary-on-plus-eight);
+    }
+  }
+}
+/* Color Form Control */
+.form-control[type='color'] {
+  padding: var(--op-space-2x-small);
+  cursor: pointer;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--op-radius-medium);
+  }
+}
+/* File Form Control */
+.form-control[type='file'] {
+  padding-block: 0;
+
+  &::file-selector-button {
+    --__op-btn-base-height: var(--op-input-height-small);
+    --__op-btn-height: var(--__op-btn-base-height);
+
+    display: inline-flex;
+    min-height: var(--__op-btn-height);
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: var(--op-radius-medium);
+    appearance: none;
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
+    color: var(--op-color-neutral-on-plus-eight);
+    cursor: pointer;
+    font-size: var(--op-font-x-small);
+    font-weight: var(--op-font-weight-normal);
+    gap: var(--op-space-x-small);
+    margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    padding-block: 0;
+    padding-inline: var(--op-space-x-small);
+    text-align: center;
+    text-decoration: none;
+    transition: var(--op-transition-input);
+    white-space: nowrap;
+  }
+
+  &.form-control--small::file-selector-button {
+    --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
+  }
+}
+select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
+  appearance: none;
+  background-image: var(--op-encoded-images-dropdown-arrow);
+  background-position: center right;
+  background-position-x: calc(
+    100% - ((var(--op-space-3x-large) / 2) - (var(--op-encoded-images-dropdown-arrow-width) / 2))
+  );
+  background-repeat: no-repeat;
+  cursor: pointer;
+  padding-inline-end: var(--op-space-3x-large);
+}
+select.form-control[multiple] {
+  min-height: calc(2 * var(--__op-form-control-height));
+}
+textarea.form-control:not([type='radio'], [type='checkbox']) {
+  max-width: 100%;
+  height: calc(2 * var(--__op-form-control-height));
+  min-height: var(--__op-form-control-height);
+}
+.form-label {
+  color: var(--op-color-on-background);
+  font-size: var(--op-font-x-small);
+  font-weight: var(--op-font-weight-normal);
+  letter-spacing: var(--op-letter-spacing-label);
+  line-height: var(--op-line-height-base);
+}
+.form-error {
+  width: fit-content;
+  color: var(--op-color-alerts-danger-base);
+  font-size: var(--op-font-x-small);
+}
+.form-hint {
+  display: block;
+  font-size: var(--op-font-small);
+  font-style: italic;
+}
+.form-error-summary {
+  padding: var(--op-space-large);
+  border-radius: var(--op-radius-large);
+  background-color: var(--op-color-alerts-danger-plus-seven);
+  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
+  color: var(--op-color-alerts-danger-on-plus-seven);
+  margin-block-end: var(--op-space-large);
+
+  h2 {
+    font-size: var(--op-font-medium);
+  }
+
+  ul {
+    margin-block-end: 0;
+  }
+}
+.form-group {
+  display: grid;
+  align-content: baseline;
+  gap: var(--op-space-x-small);
+  grid-auto-rows: auto;
+  grid-template-columns: auto 1fr;
+  padding-block: var(--op-space-small);
+  padding-inline: 0;
+
+  /* Group Alignment */
+  /* stylelint-disable no-descending-specificity */
+  .form-label,
+  .form-error,
+  .form-hint,
+  .form-control:not([type='radio'], [type='checkbox']) {
+    grid-column: 1 / 3;
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  .form-control[type='radio'],
+  .form-control[type='checkbox'] {
+    grid-column: 1 / 1;
+
+    & + .form-label {
+      grid-column: 2 / 3;
+      grid-row: 1;
+    }
+  }
+}
+.form-group--inline {
+  align-items: center;
+
+  /* Group Alignment */
+
+  /* stylelint-disable no-descending-specificity */
+  .form-label {
+    grid-column: unset;
+  }
+
+  .form-error,
+  .form-hint {
+    grid-column: 1 / 3;
+  }
+
+  .form-control:not([type='radio'], [type='checkbox']),
+  .switch {
+    grid-column: unset;
+  }
+  /* stylelint-enable no-descending-specificity */
+}
+.form-group--error {
+  /* stylelint-disable no-descending-specificity */
+  .form-control {
+    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
+
+    &[type='radio'],
+    &[type='checkbox'] {
+      box-shadow: none;
+
+      & + label {
+        color: var(--op-color-alerts-danger-minus-three);
+        font-weight: var(--op-font-weight-bold);
+      }
+    }
+
+    /* Error + Hover State */
+    &:hover:not(:disabled, [readonly]) {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+
+    /* Readonly State */
+    &[readonly] {
+      box-shadow: none;
+    }
+
+    /* Error + Focus State */
+    &:focus-visible:not([readonly]) {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      box-shadow: var(--op-input-focus-danger);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+
+    /* Borderless State */
+    &.form-control--no-border {
+      border-radius: 0;
+      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+
+      /* Readonly State */
+      &[readonly] {
+        box-shadow: none;
+      }
+
+      /* Borderless + Focus State */
+      &:focus-visible:not([readonly]) {
+        background-color: var(--op-color-alerts-danger-plus-seven);
+        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+        color: var(--op-color-alerts-danger-on-plus-seven);
+      }
+
+      /* Borderless + Hover State */
+      &:hover:not(:disabled, [readonly]) {
+        background-color: var(--op-color-alerts-danger-plus-eight);
+        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+        color: var(--op-color-alerts-danger-on-plus-eight);
+      }
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
+}
+/*
+  Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
+  Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
+  from Googles CDN like we do for our other fonts
+  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
+*/
+.material-symbols-outlined,
+.material-symbols {
+  --op-mso-fill: 0;
+  --op-mso-weight: var(--op-font-weight-normal);
+  --op-mso-grade: 0;
+  --op-mso-optical-sizing: 20;
+
+  font-size: var(--op-font-medium);
+  font-variation-settings:
+    'FILL' var(--op-mso-fill),
+    'wght' var(--op-mso-weight),
+    'GRAD' var(--op-mso-grade),
+    'opsz' var(--op-mso-optical-sizing);
+  line-height: var(--op-line-height-densest);
+  vertical-align: middle;
+}
+/* Fill */
+.icon--outlined {
+  --op-mso-fill: 0;
+}
+.icon--filled {
+  --op-mso-fill: 1;
+}
+/* Weight */
+.icon--weight-light {
+  --op-mso-weight: var(--op-font-weight-light);
+}
+.icon--weight-normal {
+  --op-mso-weight: var(--op-font-weight-normal);
+}
+.icon--weight-semi-bold {
+  --op-mso-weight: var(--op-font-weight-semi-bold);
+}
+.icon--weight-bold {
+  --op-mso-weight: var(--op-font-weight-bold);
+}
+/* Emphasis */
+.icon--low-emphasis {
+  --op-mso-grade: -20;
+}
+.icon--normal-emphasis {
+  --op-mso-grade: 0;
+}
+.icon--high-emphasis {
+  --op-mso-grade: 200;
+}
+/* Size */
+.icon--medium {
+  font-size: var(--op-font-medium);
+
+  --op-mso-optical-sizing: 20;
+}
+.icon--large {
+  font-size: var(--op-font-large);
+
+  --op-mso-optical-sizing: 40;
+}
+.icon--x-large {
+  font-size: var(--op-font-2x-large);
+
+  --op-mso-optical-sizing: 48;
+}
+.custom-icons {
+  display: inline-block;
+  width: var(--op-font-2x-large);
+  height: var(--op-font-2x-large);
+
+  &.icon--medium {
+    font-size: var(--op-font-small);
+
+    --op-mso-optical-sizing: 20;
+  }
+
+  &.icon--large {
+    width: var(--op-font-large);
+    height: var(--op-font-large);
+  }
+
+  &.icon--x-large {
+    width: var(--op-font-3x-large);
+    height: var(--op-font-3x-large);
+  }
+}
+.custom-icons svg {
+  width: 100%;
+  height: 100%;
+}
+.icon-link {
+  line-height: 0;
+}
+.modal-wrapper {
+  /* Public API (customizable component options) */
+  --_op-modal-backdrop-active-opacity: var(--op-opacity-half);
+
+  position: fixed;
+  z-index: var(--op-z-index-dialog);
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  outline: 0;
+  visibility: hidden;
+
+  /* Elements */
+
+  .modal-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    background: var(--op-color-black);
+    inset: 0;
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+
+  /* Modifiers */
+
+  &.modal-wrapper--active {
+    visibility: visible;
+
+    .modal {
+      opacity: var(--op-opacity-full);
+      transform: scale(1);
+    }
+
+    .modal-wrapper__backdrop {
+      opacity: var(--_op-modal-backdrop-active-opacity);
+      visibility: visible;
+    }
+  }
+}
+/* stylelint-disable no-descending-specificity */
+.modal {
+  /* Public API (customizable component options) */
+  --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
+  --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */
+
+  z-index: var(--op-z-index-dialog-content);
+  width: var(--_op-modal-width);
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-background);
+  box-shadow: var(--op-border-all) var(--op-color-border);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: var(--op-opacity-none);
+  transform: scale(0.7);
+  transition: var(--op-transition-modal);
+
+  .modal__header,
+  .modal__body,
+  .modal__footer {
+    padding: var(--op-space-medium);
+  }
+
+  .modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--op-font-large);
+    font-weight: var(--op-font-weight-semi-bold);
+  }
+
+  .modal__body {
+    max-height: var(--_op-modal-max-height);
+    box-shadow: var(--op-border-all) var(--op-color-border);
+    overflow-y: auto;
+  }
+
+  .modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--op-space-small);
+  }
+}
+/* stylelint-enable no-descending-specificity */
+dialog.modal {
+  position: fixed;
+  display: block;
+  padding: 0;
+  border: none;
+  inset: 0;
+
+  &::backdrop {
+    /* The Dialog backdrop does not inheret from :root so these need to be duplicated here. */
+    --op-color-black: hsl(0deg 0% 0%);
+    --_op-modal-backdrop-active-opacity: 0.5;
+    --op-opacity-none: 0;
+    --op-opacity-full: 1;
+
+    animation: show-backdrop 300ms ease-in;
+    background: var(--op-color-black);
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+
+  &[open] {
+    opacity: var(--op-opacity-full);
+    transform: scale(1);
+  }
+
+  &.modal--closing {
+    opacity: var(--op-opacity-none);
+    transform: scale(0.7);
+
+    &::backdrop {
+      animation: hide-backdrop 300ms ease-in;
+      opacity: var(--op-opacity-none);
+    }
+  }
+}
+/* Using the Dialog element */
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
+@keyframes show-backdrop {
+  from {
+    opacity: var(--op-opacity-none);
+  }
+
+  to {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+}
+@keyframes hide-backdrop {
+  from {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+
+  to {
+    opacity: var(--op-opacity-none);
+  }
+}
+.navbar {
+  /* Public API (customizable component options) */
+
+  /* Normal */
+  --_op-navbar-background-color: var(--op-color-neutral-plus-eight);
+  --_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
+  --_op-navbar-border-color: var(--op-color-neutral-plus-four);
+  --_op-navbar-brand-height: calc(12 * var(--op-size-unit)); /* 48px */
+
+  /* Spacing */
+  --_op-navbar-horizontal-spacing: var(--op-space-x-large);
+  --_op-navbar-content-spacing: var(--op-space-x-small);
+  --_op-navbar-content-item-spacing: var(--op-space-2x-small);
+
+  display: flex;
+  align-items: center;
+  padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
+  background-color: var(--_op-navbar-background-color);
+  box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
+  color: var(--_op-navbar-text-color);
+  gap: var(--_op-navbar-content-spacing);
+
+  /* Elements */
+
+  .navbar__brand {
+    height: var(--_op-navbar-brand-height);
+    margin-right: var(--_op-navbar-horizontal-spacing);
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .navbar__content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--_op-navbar-content-item-spacing);
+
+    &.navbar__content--justify-start {
+      margin-inline-end: auto;
+    }
+
+    &.navbar__content--justify-center {
+      margin-inline: auto;
+    }
+
+    &.navbar__content--justify-end {
+      margin-inline-start: auto;
+    }
+  }
+
+  /* Modifiers */
+
+  &.navbar--primary {
+    --_op-navbar-background-color: var(--op-color-primary-plus-six);
+    --_op-navbar-text-color: var(--op-color-primary-on-plus-six);
+    --_op-navbar-border-color: var(--op-color-primary-plus-four);
+  }
+}
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 0;
+
+  /* Showing Dropdown */
+  .form-group {
+    align-items: center;
+
+    .form-label {
+      grid-column: 1;
+    }
+
+    .form-control {
+      grid-column: 2;
+    }
+  }
+
+  /* ... Gap */
+  .pagination__divider {
+    height: 100%;
+    padding-inline: var(--op-space-x-small);
+  }
+}
+.sidebar {
+  /* Public API (customizable component options) */
+
+  /* Normal */
+  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
+  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
+  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
+
+  /* Width */
+  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
+  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
+  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
+  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
+  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
+  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
+
+  /* Spacing */
+  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
+  --_op-sidebar-brand-spacing: var(--op-space-medium);
+  --_op-sidebar-content-spacing: var(--op-space-x-small);
+  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
+
+  /* Animation */
+  --_op-sidebar-transition: var(--op-transition-sidebar);
+
+  /* Private API (component option defaults) */
+  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
+
+  z-index: var(--op-z-index-sidebar);
+  display: flex;
+  width: var(--__op-sidebar-width);
+  min-width: var(--__op-sidebar-width);
+  flex-direction: column;
+  background-color: var(--_op-sidebar-background-color);
+  box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
+  color: var(--_op-sidebar-text-color);
+  overflow-y: auto;
+  transition: var(--_op-sidebar-transition);
+
+  /* Elements */
+  .sidebar__brand {
+    height: var(--__op-sidebar-brand-width);
+    padding: var(--_op-sidebar-brand-spacing);
+    margin-inline: auto;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .sidebar__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--_op-sidebar-content-item-spacing);
+    padding-inline: var(--_op-sidebar-content-spacing);
+
+    > * {
+      justify-content: flex-start;
+
+      .material-symbols-outlined {
+        --op-mso-optical-sizing: 40;
+        --op-mso-weight: var(--op-font-weight-bold);
+
+        font-size: var(--op-font-large);
+      }
+    }
+
+    &.sidebar__content--start {
+      justify-content: start;
+    }
+
+    &.sidebar__content--center {
+      justify-content: center;
+    }
+
+    &.sidebar__content--end {
+      justify-content: end;
+    }
+  }
+
+  /* Modifiers */
+  &.sidebar--padded {
+    padding-block: var(--_op-sidebar-spacing);
+  }
+
+  /* Drawer Modifier */
+  &.sidebar--drawer {
+    /* Private API */
+    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
+  }
+
+  /* Compact Modifier */
+  &.sidebar--compact {
+    /* Private API (component option defaults) */
+    --__op-sidebar-width: var(--_op-sidebar-compact-width);
+    --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
+
+    /* Elements */
+    .sidebar__content {
+      > * {
+        /* Need to get icon-with-label behavior */
+        flex-direction: column;
+        padding: var(--op-space-small);
+        gap: var(--op-space-3x-small);
+      }
+    }
+  }
+
+  &.sidebar--rail {
+    /* Private API (component option defaults) */
+    --__op-sidebar-width: var(--_op-sidebar-rail-width);
+    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
+
+    /* Elements */
+    .sidebar__content {
+      align-items: center;
+
+      > * {
+        /* Need to get icon behavior */
+        width: var(--__op-btn-height);
+        min-width: var(--__op-btn-height);
+        justify-content: center;
+        padding: 0;
+        font-size: 0;
+        gap: 0;
+      }
+    }
+  }
+
+  /* Primary */
+  &.sidebar--primary {
+    --_op-sidebar-background-color: var(--op-color-primary-plus-six);
+    --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
+    --_op-sidebar-border-color: var(--op-color-primary-plus-four);
+  }
+}
+.side-panel {
+  /* Public API (customizable component options) */
+  --_op-side-panel-width: calc(54 * var(--op-size-unit)); /* 216px */
+  --_op-side-panel-header-padding: var(--op-space-medium);
+  --_op-side-panel-body-padding: var(--op-space-medium);
+  --_op-side-panel-footer-padding: var(--op-space-medium);
+  --_op-side-panel-section-padding: var(--op-space-medium);
+
+  display: flex;
+  width: var(--_op-side-panel-width);
+  min-width: var(--_op-side-panel-width);
+  height: 100vh;
+  max-height: 100%;
+  flex-direction: column;
+  background-color: var(--op-color-background);
+  color: var(--op-color-on-background);
+
+  /* Modifiers */
+  &.side-panel--border-left {
+    box-shadow: var(--op-border-left) var(--op-color-border);
+  }
+
+  &.side-panel--border-right {
+    box-shadow: var(--op-border-right) var(--op-color-border);
+  }
+
+  &.side-panel--border-left.side-panel--border-right {
+    box-shadow: var(--op-border-x);
+  }
+
+  /* Elements */
+  .side-panel__header {
+    &.side-panel__header--padded {
+      padding: var(--_op-side-panel-header-padding);
+    }
+
+    &.side-panel__header--padded-x {
+      padding-inline: var(--_op-side-panel-header-padding);
+    }
+
+    &.side-panel__header--padded-y {
+      padding-block: var(--_op-side-panel-header-padding);
+    }
+  }
+
+  .side-panel__body {
+    flex: 1;
+    overflow-y: auto;
+
+    &.side-panel__body--padded {
+      padding: var(--_op-side-panel-body-padding);
+    }
+
+    &.side-panel__body--padded-x {
+      padding-inline: var(--_op-side-panel-body-padding);
+    }
+
+    &.side-panel__body--padded-y {
+      padding-block: var(--_op-side-panel-body-padding);
+    }
+  }
+
+  .side-panel__footer {
+    &.side-panel__footer--padded {
+      padding: var(--_op-side-panel-footer-padding);
+    }
+
+    &.side-panel__footer--padded-x {
+      padding-inline: var(--_op-side-panel-footer-padding);
+    }
+
+    &.side-panel__footer--padded-y {
+      padding-block: var(--_op-side-panel-footer-padding);
+    }
+  }
+
+  .side-panel__section {
+    &.side-panel__section--padded {
+      padding: var(--_op-side-panel-section-padding);
+    }
+
+    &.side-panel__section--padded-x {
+      padding-inline: var(--_op-side-panel-section-padding);
+    }
+
+    &.side-panel__section--padded-y {
+      padding-block: var(--_op-side-panel-section-padding);
+    }
+  }
+}
+.spinner {
+  /* Public API (customizable component options) */
+  --_op-spinner-indicator-color: var(--op-color-primary-base);
+  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
+  --_op-spinner-track-width-x-small: var(--op-border-width);
+  --_op-spinner-track-width-small: var(--op-border-width-large);
+  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
+  --_op-spinner-track-width-large: var(--op-border-width-x-large);
+  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); /* 24px */
+  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); /* 40px */
+  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); /* 60px */
+  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); /* 80px */
+  --_op-spinner-animation-duration: 0.8s;
+  --_op-spinner-animation-timing-function: linear;
+
+  /* Private API (component option defaults) */
+  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
+  --__op-spinner-track-width: var(--_op-spinner-track-width-large);
+
+  width: var(--__op-spinner-diameter);
+  height: var(--__op-spinner-diameter);
+  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
+  border-radius: var(--__op-spinner-diameter);
+  border-top-color: var(--_op-spinner-indicator-color);
+  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
+
+  &.spinner--x-small {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
+  }
+
+  &.spinner--small {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
+  }
+
+  &.spinner--medium {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
+  }
+
+  &.spinner--large {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
+  }
+}
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.switch {
+  /* Public API (allowed to be overridden) */
+  --_op-switch-height-small: calc(4 * var(--op-size-unit)); /* 16px */
+  --_op-switch-height-large: calc(6 * var(--op-size-unit)); /* 24px */
+  --_op-switch-width-small: calc(7 * var(--op-size-unit)); /* 28px */
+  --_op-switch-width-large: calc(11 * var(--op-size-unit)); /* 44px */
+  --_op-switch-opacity-disabled: var(--op-opacity-disabled);
+  --_op-switch-switch-padding: var(--op-space-2x-small);
+
+  /* Private API (don't touch these) */
+  --__op-switch-width: var(--_op-switch-width-large);
+  --__op-switch-height: var(--_op-switch-height-large);
+  --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
+  --__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  label {
+    position: relative;
+    display: block;
+    width: var(--__op-switch-width);
+    height: var(--__op-switch-height);
+    border-radius: var(--op-radius-pill);
+    background: var(--op-color-neutral-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
+    text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */
+
+    &::after {
+      position: absolute;
+      width: var(--__op-switch-switch-size);
+      height: var(--__op-switch-switch-size);
+      border-radius: var(--op-radius-circle);
+      background-color: var(--op-color-neutral-plus-eight);
+      content: '';
+      inset-block-start: var(--__op-switch-half-switch-padding);
+      inset-inline-start: var(--__op-switch-half-switch-padding);
+      transition: var(--op-transition-input);
+    }
+  }
+
+  /* Prevent labels after the toggle being full width */
+  & + label {
+    width: fit-content;
+  }
+
+  input {
+    width: 0;
+    height: 0;
+    margin-inline-end: calc(-1 * var(--op-space-x-small));
+
+    &:disabled {
+      visibility: hidden;
+    }
+
+    &:disabled + label {
+      cursor: not-allowed;
+      opacity: var(--_op-switch-opacity-disabled);
+    }
+
+    &:checked + label {
+      background-color: var(--op-color-primary-base);
+      box-shadow: none;
+
+      &::after {
+        left: calc(100% - var(--__op-switch-half-switch-padding));
+        transform: translateX(-100%);
+      }
+    }
+
+    &:hover + label {
+      &::after {
+        background-color: var(--op-color-primary-plus-five);
+      }
+    }
+
+    &:focus-visible + label {
+      box-shadow:
+        0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six),
+        inset var(--op-border-all) var(--op-color-primary-minus-three);
+
+      &::after {
+        background-color: var(--op-color-neutral-plus-five);
+        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
+      }
+    }
+
+    &:focus-visible:checked + label {
+      &::after {
+        background-color: var(--op-color-primary-plus-six);
+        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
+      }
+    }
+  }
+
+  /* Size Modifiers */
+  &.switch--small {
+    --__op-switch-width: var(--_op-switch-width-small);
+    --__op-switch-height: var(--_op-switch-height-small);
+  }
+
+  &.switch--large {
+    --__op-switch-width: var(--_op-switch-width-large);
+    --__op-switch-height: var(--_op-switch-height-large);
+  }
+}
+.tab-group {
+  display: flex;
+  align-items: center;
+}
+.tab {
+  /* Public API */
+  --_op-tab-font-small: var(--op-font-x-small);
+  --_op-tab-font-large: var(--op-font-small);
+  --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
+  --_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
+  --_op-tab-indicator-width-small: var(--op-border-width-large);
+  --_op-tab-indicator-width-large: var(--op-border-width-x-large);
+  --_op-tab-disabled-opacity: var(--op-opacity-disabled);
+
+  /* Private API */
+  --__op-tab-font-size: var(--_op-tab-font-large);
+  --__op-tab-padding: var(--_op-tab-padding-large);
+  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
+  --__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;
+
+  padding: var(--__op-tab-padding);
+  background-color: var(--op-color-background);
+  color: var(--op-color-on-background);
+  font-size: var(--__op-tab-font-size);
+  text-decoration: none;
+
+  &.tab--active {
+    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
+  }
+
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+
+  /* Hover State */
+  &:hover {
+    background-color: var(--op-color-primary-plus-seven);
+    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
+    color: var(--op-color-primary-on-plus-seven);
+  }
+
+  /* Focus State */
+  &:focus-visible:not(.tab--disabled) {
+    z-index: 1;
+    box-shadow: var(--op-input-focus-primary);
+
+    &.tab--active {
+      box-shadow:
+        var(--__op-tab-indicator) var(--op-color-primary-plus-one),
+        var(--op-input-focus-primary);
+    }
+  }
+
+  /* Disabled State */
+  &.tab--disabled {
+    opacity: var(--_op-tab-disabled-opacity);
+    pointer-events: none;
+  }
+
+  /* Size Modifiers */
+  &.tab--small {
+    --__op-tab-padding: var(--_op-tab-padding-small);
+    --__op-tab-font-size: var(--_op-tab-font-small);
+    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
+  }
+
+  &.tab--large {
+    --__op-tab-padding: var(--_op-tab-padding-large);
+    --__op-tab-font-size: var(--_op-tab-font-large);
+    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
+  }
+}
+.table {
+  /* Public API */
+
+  /* Cells (for height, the appropriate variable is used when using the density modifiers) */
+  --_op-table-cell-height-default: calc(11 * var(--op-size-unit)); /* 44px */
+  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); /* 64px */
+  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); /* 32px */
+
+  /* Private API */
+
+  /* These allow for overriding specific padding versions easier. */
+  --__op-table-cell-height: var(--_op-table-cell-height-default);
+
+  width: 100%;
+  border-radius: var(--op-radius-medium);
+  border-collapse: collapse;
+  box-shadow: var(--op-border-all) var(--op-color-border);
+  contain: paint;
+  table-layout: auto;
+
+  /* Elements */
+
+  thead {
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
+    color: var(--op-color-neutral-on-plus-eight);
+
+    &:has(th input[type='checkbox']:checked) {
+      background-color: var(--op-color-primary-plus-seven);
+      color: var(--op-color-primary-on-plus-seven);
+    }
+  }
+
+  th {
+    font-weight: var(--op-font-weight-semi-bold);
+    text-align: left;
+  }
+
+  tbody,
+  tfoot {
+    background-color: var(--op-color-neutral-plus-max);
+    color: var(--op-color-neutral-on-plus-max);
+  }
+
+  th,
+  td {
+    height: var(--__op-table-cell-height);
+    font-size: var(--op-font-small);
+    padding-block: var(--op-space-2x-small);
+    padding-inline: var(--op-space-small);
+  }
+
+  tfoot tr {
+    box-shadow: var(--op-border-top) var(--op-color-border);
+  }
+
+  tr:not(:last-child) {
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
+  }
+
+  /* Modifiers */
+
+  /* stylelint-disable no-descending-specificity */
+  &.table--primary {
+    thead {
+      background-color: var(--op-color-primary-plus-seven);
+      color: var(--op-color-primary-on-plus-seven);
+    }
+  }
+
+  &.table--danger {
+    thead {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  &.table--container {
+    overflow-y: auto;
+  }
+
+  /* Layout Modifiers */
+  &.table--auto-layout {
+    table-layout: auto;
+  }
+
+  &.table--fixed-layout {
+    table-layout: fixed;
+  }
+
+  /* Table Density Modifiers */
+  &.table--default-density {
+    --__op-table-cell-height: var(--_op-table-cell-height-default);
+  }
+
+  &.table--comfortable-density {
+    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
+  }
+
+  &.table--compact-density {
+    --__op-table-cell-height: var(--_op-table-cell-height-compact);
+  }
+
+  /* Striped Modifiers */
+  &.table--even-striped {
+    tbody tr:nth-child(even) {
+      background-color: var(--op-color-neutral-plus-seven);
+      color: var(--op-color-neutral-on-plus-seven);
+    }
+  }
+
+  &.table--odd-striped {
+    tbody tr:nth-child(odd) {
+      background-color: var(--op-color-neutral-plus-seven);
+      color: var(--op-color-neutral-on-plus-seven);
+    }
+  }
+
+  /* Sticky Header Row Modifier */
+  /* stylelint-disable no-descending-specificity */
+  &.table--sticky-header thead {
+    position: sticky;
+    inset-block-start: 0;
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  /* Sticky Footer Row Modifier */
+  &.table--sticky-footer tfoot {
+    position: sticky;
+    inset-block-end: 0;
+  }
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--op-space-2x-small);
+  border-radius: var(--op-radius-pill);
+  background-color: var(--op-color-neutral-plus-four);
+  color: var(--op-color-neutral-on-plus-four);
+  font-size: var(--op-font-x-small);
+  font-weight: var(--op-font-weight-bold);
+  letter-spacing: var(--op-letter-spacing-label);
+  line-height: var(--op-line-height-dense);
+  user-select: none;
+  white-space: nowrap;
+
+  /* Elements */
+
+  .tag__label {
+    padding-inline: var(--op-space-2x-small);
+  }
+
+  .btn--icon {
+    --__op-btn-height: var(--op-font-medium);
+
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-neutral-minus-three);
+      box-shadow: none;
+      color: var(--op-color-neutral-on-minus-three);
+    }
+
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-neutral-base);
+      box-shadow: var(--op-input-focus-neutral);
+      color: var(--op-color-neutral-on-base);
+    }
+  }
+
+  /* Modifiers */
+
+  &.tag--read-only {
+    /* This is here for consistency */
+  }
+
+  &.tag--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+
+    .btn--icon {
+      color: var(--op-color-primary-on-base);
+
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-primary-minus-three);
+        box-shadow: none;
+        color: var(--op-color-primary-on-minus-three);
+      }
+
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-primary-base);
+        box-shadow: var(--op-input-focus-primary);
+        color: var(--op-color-primary-on-base);
+      }
+    }
+  }
+
+  &.tag--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-danger-on-base);
+
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-danger-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-danger-on-minus-three);
+      }
+
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-danger-base);
+        box-shadow: var(--op-input-focus-danger);
+        color: var(--op-color-alerts-danger-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+
+  &.tag--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-warning-on-base);
+
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-warning-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-warning-on-minus-three);
+      }
+
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-warning-base);
+        box-shadow: var(--op-input-focus-warning);
+        color: var(--op-color-alerts-warning-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+
+  &.tag--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-info-on-base);
+
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-info-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-info-on-minus-three);
+      }
+
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-info-base);
+        box-shadow: var(--op-input-focus-info);
+        color: var(--op-color-alerts-info-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+
+  &.tag--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-notice-on-base);
+
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-notice-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-notice-on-minus-three);
+      }
+
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-notice-base);
+        box-shadow: var(--op-input-focus-notice);
+        color: var(--op-color-alerts-notice-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+}
+.text-pair {
+  /* Public API (customizable component options) */
+  --_op-text-pair-font-size-small: var(--op-font-small);
+  --_op-text-pair-font-size-medium: var(--op-font-medium);
+  --_op-text-pair-font-size-large: var(--op-font-large);
+
+  /* Private API (component option defaults) */
+  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
+  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--op-space-x-small);
+
+  &.text-pair--inline {
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  .text-pair__title {
+    font-size: var(--__op-text-pair-title-font-size);
+    font-weight: var(--op-font-weight-semi-bold);
+    line-height: var(--op-line-height-dense);
+
+    &.text-pair__title--small {
+      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
+    }
+
+    &.text-pair__title--medium {
+      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
+    }
+
+    &.text-pair__title--large {
+      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
+    }
+  }
+
+  .text-pair__subtitle {
+    font-size: var(--__op-text-pair-subtitle-font-size);
+    font-weight: var(--op-font-weight-normal);
+    line-height: var(--op-line-height-dense);
+
+    &.text-pair__subtitle--small {
+      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
+    }
+
+    &.text-pair__subtitle--medium {
+      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
+    }
+
+    &.text-pair__subtitle--large {
+      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
+    }
+  }
+}
+/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
+[data-tooltip-text] {
+  /* Public API (customizable component options) */
+  --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); /* 200px */
+  --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
+  --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
+  --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
+  --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
+  --_op-tooltip-tooltip-offset: var(--op-space-x-small);
+  --_op-tooltip-tooltip-radius: var(--op-radius-medium);
+  --_op-tooltip-tooltip-font-size: var(--op-font-small);
+
+  position: relative;
+
+  &::before,
+  &::after {
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-tooltip);
+    visibility: hidden;
+  }
+
+  &::before {
+    position: absolute;
+    z-index: var(--op-z-index-tooltip);
+    display: block;
+    width: max-content;
+    max-width: var(--_op-tooltip-max-width);
+    padding: var(--_op-tooltip-padding);
+    border-radius: var(--_op-tooltip-tooltip-radius);
+    background-color: var(--_op-tooltip-background-color);
+    color: var(--_op-tooltip-text-color);
+    content: attr(data-tooltip-text);
+    font-family: var(--op-font-family); /* Makes tooltips on icons work */
+    font-size: var(--_op-tooltip-tooltip-font-size);
+    overflow-wrap: break-word;
+    pointer-events: none;
+    text-align: center;
+    white-space: normal;
+  }
+
+  &::after {
+    position: absolute;
+    z-index: var(--op-z-index-tooltip);
+    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
+    content: '';
+    pointer-events: none;
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      opacity: var(--op-opacity-full);
+      visibility: visible;
+    }
+  }
+
+  &[data-tooltip-position='top'],
+  &:not([data-tooltip-position]) {
+    &::before,
+    &::after {
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    &::before {
+      inset-block-end: 100%;
+      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
+      inset-block-end: 100%;
+      margin-block-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+
+  &[data-tooltip-position='left'] {
+    &::before,
+    &::after {
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    &::before {
+      inset-inline-end: 100%;
+      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
+      inset-inline-end: 100%;
+      margin-inline-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+
+  &[data-tooltip-position='bottom'] {
+    &::before,
+    &::after {
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    &::before {
+      inset-block-start: 100%;
+      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
+      inset-block-start: 100%;
+      margin-block-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+
+  &[data-tooltip-position='right'] {
+    &::before,
+    &::after {
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    &::before {
+      inset-inline-start: 100%;
+      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
+      inset-inline-start: 100%;
+      margin-inline-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+}