@iress-oss/ids-components 6.0.0-alpha.7 → 6.0.0-alpha.9

package/dist/patterns/Shadow/Shadow.js

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as b, useRef as _, useState as y, useEffect as g, useImperativeHandle as h } from "react";
 import { createPortal as f } from "react-dom";
-import { i as w, I as k } from "../../Provider-CDIbqQK0.js";
+import { i as w, I as k } from "../../Provider-X4oBUpVt.js";
 const z = `@layer reset, base, tokens, recipes, utilities;
 
 @layer reset{
@@ -289,23 +289,35 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     --sizes-container\\.lg: 100%;
     --sizes-container\\.xl: 1280px;
     --sizes-container\\.xxl: 1280px;
-    --sizes-input\\.2: calc(var(--iress-typography-base-size, .875rem) * 2.5);
+    --sizes-input\\.2: calc(var(--iress-typography-base-size, .875rem) * 2);
     --sizes-input\\.4: calc(var(--iress-typography-base-size, .875rem) * 4);
     --sizes-input\\.6: calc(var(--iress-typography-base-size, .875rem) * 6);
     --sizes-input\\.8: calc(var(--iress-typography-base-size, .875rem) * 8);
     --sizes-input\\.10: calc(var(--iress-typography-base-size, .875rem) * 10);
     --sizes-input\\.12: calc(var(--iress-typography-base-size, .875rem) * 12);
     --sizes-input\\.16: calc(var(--iress-typography-base-size, .875rem) * 16);
-    --sizes-input\\.25perc: 25%;
-    --sizes-input\\.50perc: 50%;
-    --sizes-input\\.75perc: 75%;
-    --sizes-input\\.100perc: 100%;
+    --sizes-input\\.25\\%: 25%;
+    --sizes-input\\.50\\%: 50%;
+    --sizes-input\\.75\\%: 75%;
+    --sizes-input\\.100\\%: 100%;
+    --sizes-input\\.height: calc(var(--iress-typography-base-size, .875rem) * (36 / 14));
+    --sizes-1\\/12: 8.333333333333332%;
+    --sizes-2\\/12: 16.666666666666664%;
+    --sizes-3\\/12: 25%;
+    --sizes-4\\/12: 33.33333333333333%;
+    --sizes-5\\/12: 41.66666666666667%;
+    --sizes-6\\/12: 50%;
+    --sizes-7\\/12: 58.333333333333336%;
+    --sizes-8\\/12: 66.66666666666666%;
+    --sizes-9\\/12: 75%;
+    --sizes-10\\/12: 83.33333333333334%;
+    --sizes-11\\/12: 91.66666666666666%;
+    --sizes-12\\/12: 100%;
     --sizes-overlay\\.sm: 375px;
     --sizes-overlay\\.md: 640px;
     --sizes-overlay\\.lg: 900px;
     --sizes-chevron\\.select: calc(var(--iress-typography-base-size, .875rem) * 0.5);
     --sizes-chevron\\.table: calc(var(--iress-typography-base-size, .875rem) * 0.85);
-    --sizes-input\\.height: calc(var(--iress-typography-base-size, .875rem) * (36 / 14));
     --sizes-progress\\.height: var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem)));
     --sizes-slider\\.track: calc(var(--iress-typography-base-size, .875rem) * (10 / 14));
     --sizes-slider\\.thumb: calc(var(--iress-typography-base-size, .875rem) * 2);
@@ -1383,22 +1395,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       font: var(--iress-typography-heading-1, 500 calc(var(--iress-typography-base-size, .875rem) * (36 / 14)) / 1.3 var(--iress-typography-base-heading-font, Ubuntu, Helvetica, sans-serif));
 }
 
-    .animationStyle_loading-fade-next {
-      animation-name: loadingFadeNext;
-      animation-duration: 0.6s;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-}
-
-    .layerStyle_dots {
-      background: radial-gradient(circle closest-side, currentcolor 90%, transparent) 0 / calc(100% / 3) 100% space;
-}
-
-    .animationStyle_field-footer {
-      animation-name: fieldFooter;
-      animation-duration: 0.5s;
-      animation-timing-function: ease-in-out;
-      animation-fill-mode: forwards;
+    .textStyle_typography\\.heading\\.3 {
+      font: var(--iress-typography-heading-3, 500 calc(var(--iress-typography-base-size, .875rem) * (26 / 14)) / 1.3 var(--iress-typography-base-heading-font, Ubuntu, Helvetica, sans-serif));
 }
 
     .textStyle_typography\\.body\\.lg {
@@ -1417,8 +1415,22 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       font-size: 0.9em !important;
 }
 
-    .textStyle_typography\\.heading\\.3 {
-      font: var(--iress-typography-heading-3, 500 calc(var(--iress-typography-base-size, .875rem) * (26 / 14)) / 1.3 var(--iress-typography-base-heading-font, Ubuntu, Helvetica, sans-serif));
+    .animationStyle_loading-fade-next {
+      animation-name: loadingFadeNext;
+      animation-duration: 0.6s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+}
+
+    .layerStyle_dots {
+      background: radial-gradient(circle closest-side, currentcolor 90%, transparent) 0 / calc(100% / 3) 100% space;
+}
+
+    .animationStyle_field-footer {
+      animation-name: fieldFooter;
+      animation-duration: 0.5s;
+      animation-timing-function: ease-in-out;
+      animation-fill-mode: forwards;
 }
 
     .textStyle_typography\\.heading\\.2 {
@@ -1475,6 +1487,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
 }
 
+    .textStyle_inherit {
+      font: inherit;
+}
+
     .directNestedHeadings\\:textStyle_typography\\.body\\.md\\.strong > h1,.directNestedHeadings\\:textStyle_typography\\.body\\.md\\.strong > h2,.directNestedHeadings\\:textStyle_typography\\.body\\.md\\.strong > h3,.directNestedHeadings\\:textStyle_typography\\.body\\.md\\.strong > h4,.directNestedHeadings\\:textStyle_typography\\.body\\.md\\.strong > h5,.directNestedHeadings\\:textStyle_typography\\.body\\.md\\.strong > h6 {
       font: var(--iress-typography-body-md-strong, 600 var(--iress-typography-base-size, .875rem) / 1.5 var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif));
 }
@@ -1737,6 +1753,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
       .xs\\:textStyle_typography\\.code {
         font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
+}
+      .xs\\:textStyle_inherit {
+        font: inherit;
 }
 }
 
@@ -1856,6 +1875,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
       .sm\\:textStyle_typography\\.code {
         font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
+}
+      .sm\\:textStyle_inherit {
+        font: inherit;
 }
 }
 
@@ -1975,6 +1997,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
       .md\\:textStyle_typography\\.code {
         font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
+}
+      .md\\:textStyle_inherit {
+        font: inherit;
 }
 }
 
@@ -2094,6 +2119,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
       .lg\\:textStyle_typography\\.code {
         font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
+}
+      .lg\\:textStyle_inherit {
+        font: inherit;
 }
 }
 
@@ -2213,6 +2241,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
       .xl\\:textStyle_typography\\.code {
         font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
+}
+      .xl\\:textStyle_inherit {
+        font: inherit;
 }
 }
 
@@ -2332,6 +2363,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
       .xxl\\:textStyle_typography\\.code {
         font: var(--iress-typography-code, 400 var(--iress-typography-base-size, .875rem) / 1.6 Space, monospace);
+}
+      .xxl\\:textStyle_inherit {
+        font: inherit;
 }
 }
 }
@@ -2380,6 +2414,18 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     padding: var(--spacing-xs);
 }
 
+  .p_none {
+    padding: var(--spacing-none);
+}
+
+  .p_sm {
+    padding: var(--spacing-sm);
+}
+
+  .p_md {
+    padding: var(--spacing-md);
+}
+
   .bg_colour\\.neutral\\.10 {
     background: var(--colors-colour\\.neutral\\.10);
 }
@@ -2480,10 +2526,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     padding: var(--spacing-lg);
 }
 
-  .p_md {
-    padding: var(--spacing-md);
-}
-
   .bd_placeholder {
     border: var(--borders-placeholder);
 }
@@ -2516,6 +2558,46 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-transparent);
 }
 
+  .p_spacing\\.6 {
+    padding: var(--spacing-spacing\\.6);
+}
+
+  .m_spacing\\.4 {
+    margin: var(--spacing-spacing\\.4);
+}
+
+  .bg_colour\\.system\\.info\\.surface {
+    background: var(--colors-colour\\.system\\.info\\.surface);
+}
+
+  .bg_colour\\.system\\.success\\.surface {
+    background: var(--colors-colour\\.system\\.success\\.surface);
+}
+
+  .bg_colour\\.system\\.warning\\.surface {
+    background: var(--colors-colour\\.system\\.warning\\.surface);
+}
+
+  .bg_colour\\.system\\.danger\\.surface {
+    background: var(--colors-colour\\.system\\.danger\\.surface);
+}
+
+  .m_auto {
+    margin: auto;
+}
+
+  .p_spacing\\.5 {
+    padding: var(--spacing-spacing\\.5);
+}
+
+  .p_xl {
+    padding: var(--spacing-xl);
+}
+
+  .m_lg {
+    margin: var(--spacing-lg);
+}
+
   .bg_colour\\.primary\\.text {
     background: var(--colors-colour\\.primary\\.text);
 }
@@ -2532,10 +2614,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.neutral\\.80);
 }
 
-  .bg_colour\\.system\\.danger\\.surface {
-    background: var(--colors-colour\\.system\\.danger\\.surface);
-}
-
   .p_spacing\\.10 {
     padding: var(--spacing-spacing\\.10);
 }
@@ -2600,10 +2678,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.system\\.success\\.on-fill);
 }
 
-  .bg_colour\\.system\\.success\\.surface {
-    background: var(--colors-colour\\.system\\.success\\.surface);
-}
-
   .bg_colour\\.system\\.success\\.surfaceHover {
     background: var(--colors-colour\\.system\\.success\\.surface-hover);
 }
@@ -2632,10 +2706,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.system\\.warning\\.on-fill);
 }
 
-  .bg_colour\\.system\\.warning\\.surface {
-    background: var(--colors-colour\\.system\\.warning\\.surface);
-}
-
   .bg_colour\\.system\\.warning\\.text {
     background: var(--colors-colour\\.system\\.warning\\.text);
 }
@@ -2644,10 +2714,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.system\\.info\\.on-fill);
 }
 
-  .bg_colour\\.system\\.info\\.surface {
-    background: var(--colors-colour\\.system\\.info\\.surface);
-}
-
   .bg_colour\\.system\\.info\\.text {
     background: var(--colors-colour\\.system\\.info\\.text);
 }
@@ -2676,10 +2742,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin: var(--spacing-spacing\\.3);
 }
 
-  .m_spacing\\.4 {
-    margin: var(--spacing-spacing\\.4);
-}
-
   .m_spacing\\.5 {
     margin: var(--spacing-spacing\\.5);
 }
@@ -2712,10 +2774,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin: var(--spacing-md);
 }
 
-  .m_lg {
-    margin: var(--spacing-lg);
-}
-
   .m_xl {
     margin: var(--spacing-xl);
 }
@@ -2784,38 +2842,14 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin: calc(var(--spacing-xl) * -1);
 }
 
-  .m_auto {
-    margin: auto;
-}
-
   .p_spacing\\.1 {
     padding: var(--spacing-spacing\\.1);
 }
 
-  .p_spacing\\.5 {
-    padding: var(--spacing-spacing\\.5);
-}
-
-  .p_spacing\\.6 {
-    padding: var(--spacing-spacing\\.6);
-}
-
   .p_spacing\\.8 {
     padding: var(--spacing-spacing\\.8);
 }
 
-  .p_none {
-    padding: var(--spacing-none);
-}
-
-  .p_sm {
-    padding: var(--spacing-sm);
-}
-
-  .p_xl {
-    padding: var(--spacing-xl);
-}
-
   .gap_lg {
     gap: var(--spacing-lg);
 }
@@ -2982,10 +3016,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     border-color: var(--colors-colour\\.neutral\\.70);
 }
 
-  .bdr_radius\\.025 {
-    border-radius: var(--radii-radius\\.025);
-}
-
   .offset_1 {
     margin-left: calc(1 / 12 * 100%);
 }
@@ -3102,6 +3132,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     flex: 1 1 auto;
 }
 
+  .bdr_radius\\.025 {
+    border-radius: var(--radii-radius\\.025);
+}
+
   .bd-b_\\[1px_dashed_currentColor\\] {
     border-bottom: 1px dashed currentColor;
 }
@@ -3194,6 +3228,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     flex: 0 0 0;
 }
 
+  .gap_spacing\\.3 {
+    gap: var(--spacing-spacing\\.3);
+}
+
   .bd-e_table {
     border-inline-end: var(--borders-table);
 }
@@ -3286,10 +3324,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     border-radius: var(--radii-none);
 }
 
-  .gap_spacing\\.3 {
-    gap: var(--spacing-spacing\\.3);
-}
-
   .gap_spacing\\.6 {
     gap: var(--spacing-spacing\\.6);
 }
@@ -4810,6 +4844,14 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     key: test;
 }
 
+  .key_id {
+    key: id;
+}
+
+  .label_ID {
+    label: ID;
+}
+
   .divider_true {
     divider: true;
 }
@@ -4826,6 +4868,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     position: top-center;
 }
 
+  .c_muted {
+    color: var(--colors-muted);
+}
+
   .inset-s_\\[-100\\%\\] {
     inset-inline-start: -100%;
 }
@@ -4958,10 +5004,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-alt);
 }
 
-  .c_muted {
-    color: var(--colors-muted);
-}
-
   .c_text {
     color: var(--colors-text);
 }
@@ -5106,14 +5148,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     column-gap: calc(var(--spacing-slider\\.tick) * -1);
 }
 
-  .hide_true {
-    display: none;
-}
-
-  .hide_false {
-    display: unset;
-}
-
   .rg_spacing\\.0 {
     row-gap: var(--spacing-spacing\\.0);
 }
@@ -5298,6 +5332,105 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
+  .scrollable_x {
+    overflow-x: auto;
+    scrollbar-gutter: stable;
+}
+
+  .scrollable_x::-webkit-scrollbar {
+    width: var(--iress-typography-base-size, .875rem);
+    height: var(--iress-typography-base-size, .875rem);
+}
+
+  .scrollable_x::-webkit-scrollbar-track {
+    background: var(--iress-colour-neutral-20, #F9F9F9);
+    border-radius: var(--iress-radius-100, 1rem);
+}
+
+  .scrollable_x::-webkit-scrollbar-thumb {
+    background-color: var(--iress-colour-neutral-60, #878B92);
+    border-radius: var(--iress-radius-025, calc(0.25 * var(--iress-radius-100, 1rem)));
+}
+
+  .scrollable_x::-webkit-scrollbar-thumb:hover {
+    background-color: var(--iress-colour-primary-fill, #13213F);
+}
+
+  .scrollable_x::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+}
+
+  .scrollable_x {
+    scrollbar-width: thin;
+    scrollbar-color: var(--iress-colour-neutral-60, #878B92) var(--iress-colour-neutral-20, #F9F9F9);
+}
+
+  .scrollable_y {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+}
+
+  .scrollable_y::-webkit-scrollbar {
+    width: var(--iress-typography-base-size, .875rem);
+    height: var(--iress-typography-base-size, .875rem);
+}
+
+  .scrollable_y::-webkit-scrollbar-track {
+    background: var(--iress-colour-neutral-20, #F9F9F9);
+    border-radius: var(--iress-radius-100, 1rem);
+}
+
+  .scrollable_y::-webkit-scrollbar-thumb {
+    background-color: var(--iress-colour-neutral-60, #878B92);
+    border-radius: var(--iress-radius-025, calc(0.25 * var(--iress-radius-100, 1rem)));
+}
+
+  .scrollable_y::-webkit-scrollbar-thumb:hover {
+    background-color: var(--iress-colour-primary-fill, #13213F);
+}
+
+  .scrollable_y::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+}
+
+  .scrollable_y {
+    scrollbar-width: thin;
+    scrollbar-color: var(--iress-colour-neutral-60, #878B92) var(--iress-colour-neutral-20, #F9F9F9);
+}
+
+  .scrollable_true {
+    overflow: auto;
+    scrollbar-gutter: stable;
+}
+
+  .scrollable_true::-webkit-scrollbar {
+    width: var(--iress-typography-base-size, .875rem);
+    height: var(--iress-typography-base-size, .875rem);
+}
+
+  .scrollable_true::-webkit-scrollbar-track {
+    background: var(--iress-colour-neutral-20, #F9F9F9);
+    border-radius: var(--iress-radius-100, 1rem);
+}
+
+  .scrollable_true::-webkit-scrollbar-thumb {
+    background-color: var(--iress-colour-neutral-60, #878B92);
+    border-radius: var(--iress-radius-025, calc(0.25 * var(--iress-radius-100, 1rem)));
+}
+
+  .scrollable_true::-webkit-scrollbar-thumb:hover {
+    background-color: var(--iress-colour-primary-fill, #13213F);
+}
+
+  .scrollable_true::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+}
+
+  .scrollable_true {
+    scrollbar-width: thin;
+    scrollbar-color: var(--iress-colour-neutral-60, #878B92) var(--iress-colour-neutral-20, #F9F9F9);
+}
+
   .mt_lg {
     margin-top: var(--spacing-lg);
 }
@@ -5482,20 +5615,20 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     max-width: fit-content;
 }
 
-  .w_input\\.25perc {
-    width: var(--sizes-input\\.25perc);
+  .w_input\\.25\\% {
+    width: var(--sizes-input\\.25\\%);
 }
 
-  .w_input\\.50perc {
-    width: var(--sizes-input\\.50perc);
+  .w_input\\.50\\% {
+    width: var(--sizes-input\\.50\\%);
 }
 
-  .w_input\\.75perc {
-    width: var(--sizes-input\\.75perc);
+  .w_input\\.75\\% {
+    width: var(--sizes-input\\.75\\%);
 }
 
-  .w_input\\.100perc {
-    width: var(--sizes-input\\.100perc);
+  .w_input\\.100\\% {
+    width: var(--sizes-input\\.100\\%);
 }
 
   .w_input\\.2 {
@@ -5530,8 +5663,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     width: 10px;
 }
 
-  .w_25perc {
-    width: 25perc;
+  .w_25\\% {
+    width: 25%;
 }
 
   .top_-spacing\\.1 {
@@ -5730,6 +5863,14 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     height: 50px;
 }
 
+  .max-w_2\\/12 {
+    max-width: 16.666667%;
+}
+
+  .mb_spacing\\.3 {
+    margin-bottom: var(--spacing-spacing\\.3);
+}
+
   .pt_md {
     padding-top: var(--spacing-md);
 }
@@ -5886,8 +6027,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin-left: var(--spacing-xs);
 }
 
-  .w_100perc {
-    width: 100perc;
+  .w_100\\% {
+    width: 100%;
 }
 
   .h_250px {
@@ -5910,10 +6051,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     height: 200px;
 }
 
-  .w_25\\% {
-    width: 25%;
-}
-
   .w_200px {
     width: 200px;
 }
@@ -5930,240 +6067,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     right: var(--spacing-spacing\\.1);
 }
 
-  .max-w_container\\.xs {
-    max-width: var(--sizes-container\\.xs);
-}
-
-  .max-w_container\\.sm {
-    max-width: var(--sizes-container\\.sm);
-}
-
-  .max-w_container\\.xxl {
-    max-width: var(--sizes-container\\.xxl);
-}
-
-  .max-w_input\\.2 {
-    max-width: var(--sizes-input\\.2);
-}
-
-  .max-w_input\\.4 {
-    max-width: var(--sizes-input\\.4);
-}
-
-  .max-w_input\\.6 {
-    max-width: var(--sizes-input\\.6);
-}
-
-  .max-w_input\\.8 {
-    max-width: var(--sizes-input\\.8);
-}
-
-  .max-w_input\\.10 {
-    max-width: var(--sizes-input\\.10);
-}
-
-  .max-w_input\\.25perc {
-    max-width: var(--sizes-input\\.25perc);
-}
-
-  .max-w_input\\.50perc {
-    max-width: var(--sizes-input\\.50perc);
-}
-
-  .max-w_input\\.75perc {
-    max-width: var(--sizes-input\\.75perc);
-}
-
-  .max-w_input\\.100perc {
-    max-width: var(--sizes-input\\.100perc);
-}
-
-  .max-w_overlay\\.sm {
-    max-width: var(--sizes-overlay\\.sm);
-}
-
-  .max-w_overlay\\.md {
-    max-width: var(--sizes-overlay\\.md);
-}
-
-  .max-w_overlay\\.lg {
-    max-width: var(--sizes-overlay\\.lg);
-}
-
-  .max-w_chevron\\.select {
-    max-width: var(--sizes-chevron\\.select);
-}
-
-  .max-w_chevron\\.table {
-    max-width: var(--sizes-chevron\\.table);
-}
-
-  .max-w_input\\.height {
-    max-width: var(--sizes-input\\.height);
-}
-
-  .max-w_progress\\.height {
-    max-width: var(--sizes-progress\\.height);
-}
-
-  .max-w_slider\\.track {
-    max-width: var(--sizes-slider\\.track);
-}
-
-  .max-w_slider\\.thumb {
-    max-width: var(--sizes-slider\\.thumb);
-}
-
-  .max-w_slider\\.tick {
-    max-width: var(--sizes-slider\\.tick);
-}
-
-  .max-w_toggle\\.width {
-    max-width: var(--sizes-toggle\\.width);
-}
-
-  .max-w_toggle\\.thumb {
-    max-width: var(--sizes-toggle\\.thumb);
-}
-
-  .max-w_typography\\.base {
-    max-width: var(--sizes-typography\\.base);
-}
-
-  .max-w_breakpoint-xs {
-    max-width: var(--sizes-breakpoint-xs);
-}
-
-  .max-w_breakpoint-sm {
-    max-width: var(--sizes-breakpoint-sm);
-}
-
-  .max-w_breakpoint-md {
-    max-width: var(--sizes-breakpoint-md);
-}
-
-  .max-w_breakpoint-lg {
-    max-width: var(--sizes-breakpoint-lg);
-}
-
-  .max-w_breakpoint-xl {
-    max-width: var(--sizes-breakpoint-xl);
-}
-
-  .max-w_breakpoint-xxl {
-    max-width: var(--sizes-breakpoint-xxl);
-}
-
-  .max-w_1\\/2 {
-    max-width: 50%;
-}
-
-  .max-w_1\\/3 {
-    max-width: 33.333333%;
-}
-
-  .max-w_2\\/3 {
-    max-width: 66.666667%;
-}
-
-  .max-w_1\\/4 {
-    max-width: 25%;
-}
-
-  .max-w_2\\/4 {
-    max-width: 50%;
-}
-
-  .max-w_3\\/4 {
-    max-width: 75%;
-}
-
-  .max-w_1\\/5 {
-    max-width: 20%;
-}
-
-  .max-w_2\\/5 {
-    max-width: 40%;
-}
-
-  .max-w_3\\/5 {
-    max-width: 60%;
-}
-
-  .max-w_4\\/5 {
-    max-width: 80%;
-}
-
-  .max-w_1\\/6 {
-    max-width: 16.666667%;
-}
-
-  .max-w_2\\/6 {
-    max-width: 33.333333%;
-}
-
-  .max-w_3\\/6 {
-    max-width: 50%;
-}
-
-  .max-w_4\\/6 {
-    max-width: 66.666667%;
-}
-
-  .max-w_5\\/6 {
-    max-width: 83.333333%;
-}
-
-  .max-w_1\\/12 {
-    max-width: 8.333333%;
-}
-
-  .max-w_2\\/12 {
-    max-width: 16.666667%;
-}
-
-  .max-w_3\\/12 {
-    max-width: 25%;
-}
-
-  .max-w_4\\/12 {
-    max-width: 33.333333%;
-}
-
-  .max-w_5\\/12 {
-    max-width: 41.666667%;
-}
-
-  .max-w_6\\/12 {
-    max-width: 50%;
-}
-
-  .max-w_7\\/12 {
-    max-width: 58.333333%;
-}
-
-  .max-w_8\\/12 {
-    max-width: 66.666667%;
-}
-
-  .max-w_9\\/12 {
-    max-width: 75%;
-}
-
-  .max-w_10\\/12 {
-    max-width: 83.333333%;
-}
-
-  .max-w_11\\/12 {
-    max-width: 91.666667%;
-}
-
-  .max-w_screen {
-    max-width: 100vw;
-}
-
-  .mt_spacing\\.0 {
-    margin-top: var(--spacing-spacing\\.0);
+  .mt_spacing\\.0 {
+    margin-top: var(--spacing-spacing\\.0);
 }
 
   .mt_spacing\\.3 {
@@ -6274,10 +6179,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin-bottom: var(--spacing-spacing\\.2);
 }
 
-  .mb_spacing\\.3 {
-    margin-bottom: var(--spacing-spacing\\.3);
-}
-
   .mb_spacing\\.5 {
     margin-bottom: var(--spacing-spacing\\.5);
 }
@@ -6866,6 +6767,58 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     width: var(--sizes-container\\.xxl);
 }
 
+  .w_input\\.height {
+    width: var(--sizes-input\\.height);
+}
+
+  .w_1\\/12 {
+    width: 8.333333%;
+}
+
+  .w_2\\/12 {
+    width: 16.666667%;
+}
+
+  .w_3\\/12 {
+    width: 25%;
+}
+
+  .w_4\\/12 {
+    width: 33.333333%;
+}
+
+  .w_5\\/12 {
+    width: 41.666667%;
+}
+
+  .w_6\\/12 {
+    width: 50%;
+}
+
+  .w_7\\/12 {
+    width: 58.333333%;
+}
+
+  .w_8\\/12 {
+    width: 66.666667%;
+}
+
+  .w_9\\/12 {
+    width: 75%;
+}
+
+  .w_10\\/12 {
+    width: 83.333333%;
+}
+
+  .w_11\\/12 {
+    width: 91.666667%;
+}
+
+  .w_12\\/12 {
+    width: var(--sizes-12\\/12);
+}
+
   .w_chevron\\.select {
     width: var(--sizes-chevron\\.select);
 }
@@ -6874,10 +6827,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     width: var(--sizes-chevron\\.table);
 }
 
-  .w_input\\.height {
-    width: var(--sizes-input\\.height);
-}
-
   .w_progress\\.height {
     width: var(--sizes-progress\\.height);
 }
@@ -6986,52 +6935,240 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     width: 83.333333%;
 }
 
-  .w_1\\/12 {
-    width: 8.333333%;
+  .w_screen {
+    width: 100vw;
 }
 
-  .w_2\\/12 {
-    width: 16.666667%;
+  .max-w_container\\.xs {
+    max-width: var(--sizes-container\\.xs);
 }
 
-  .w_3\\/12 {
-    width: 25%;
+  .max-w_container\\.sm {
+    max-width: var(--sizes-container\\.sm);
 }
 
-  .w_4\\/12 {
-    width: 33.333333%;
+  .max-w_container\\.xxl {
+    max-width: var(--sizes-container\\.xxl);
 }
 
-  .w_5\\/12 {
-    width: 41.666667%;
+  .max-w_input\\.2 {
+    max-width: var(--sizes-input\\.2);
 }
 
-  .w_6\\/12 {
-    width: 50%;
+  .max-w_input\\.4 {
+    max-width: var(--sizes-input\\.4);
 }
 
-  .w_7\\/12 {
-    width: 58.333333%;
+  .max-w_input\\.6 {
+    max-width: var(--sizes-input\\.6);
 }
 
-  .w_8\\/12 {
-    width: 66.666667%;
+  .max-w_input\\.8 {
+    max-width: var(--sizes-input\\.8);
 }
 
-  .w_9\\/12 {
-    width: 75%;
+  .max-w_input\\.10 {
+    max-width: var(--sizes-input\\.10);
 }
 
-  .w_10\\/12 {
-    width: 83.333333%;
+  .max-w_input\\.25\\% {
+    max-width: var(--sizes-input\\.25\\%);
 }
 
-  .w_11\\/12 {
-    width: 91.666667%;
+  .max-w_input\\.50\\% {
+    max-width: var(--sizes-input\\.50\\%);
 }
 
-  .w_screen {
-    width: 100vw;
+  .max-w_input\\.75\\% {
+    max-width: var(--sizes-input\\.75\\%);
+}
+
+  .max-w_input\\.100\\% {
+    max-width: var(--sizes-input\\.100\\%);
+}
+
+  .max-w_input\\.height {
+    max-width: var(--sizes-input\\.height);
+}
+
+  .max-w_1\\/12 {
+    max-width: 8.333333%;
+}
+
+  .max-w_3\\/12 {
+    max-width: 25%;
+}
+
+  .max-w_4\\/12 {
+    max-width: 33.333333%;
+}
+
+  .max-w_5\\/12 {
+    max-width: 41.666667%;
+}
+
+  .max-w_6\\/12 {
+    max-width: 50%;
+}
+
+  .max-w_7\\/12 {
+    max-width: 58.333333%;
+}
+
+  .max-w_8\\/12 {
+    max-width: 66.666667%;
+}
+
+  .max-w_9\\/12 {
+    max-width: 75%;
+}
+
+  .max-w_10\\/12 {
+    max-width: 83.333333%;
+}
+
+  .max-w_11\\/12 {
+    max-width: 91.666667%;
+}
+
+  .max-w_12\\/12 {
+    max-width: var(--sizes-12\\/12);
+}
+
+  .max-w_overlay\\.sm {
+    max-width: var(--sizes-overlay\\.sm);
+}
+
+  .max-w_overlay\\.md {
+    max-width: var(--sizes-overlay\\.md);
+}
+
+  .max-w_overlay\\.lg {
+    max-width: var(--sizes-overlay\\.lg);
+}
+
+  .max-w_chevron\\.select {
+    max-width: var(--sizes-chevron\\.select);
+}
+
+  .max-w_chevron\\.table {
+    max-width: var(--sizes-chevron\\.table);
+}
+
+  .max-w_progress\\.height {
+    max-width: var(--sizes-progress\\.height);
+}
+
+  .max-w_slider\\.track {
+    max-width: var(--sizes-slider\\.track);
+}
+
+  .max-w_slider\\.thumb {
+    max-width: var(--sizes-slider\\.thumb);
+}
+
+  .max-w_slider\\.tick {
+    max-width: var(--sizes-slider\\.tick);
+}
+
+  .max-w_toggle\\.width {
+    max-width: var(--sizes-toggle\\.width);
+}
+
+  .max-w_toggle\\.thumb {
+    max-width: var(--sizes-toggle\\.thumb);
+}
+
+  .max-w_typography\\.base {
+    max-width: var(--sizes-typography\\.base);
+}
+
+  .max-w_breakpoint-xs {
+    max-width: var(--sizes-breakpoint-xs);
+}
+
+  .max-w_breakpoint-sm {
+    max-width: var(--sizes-breakpoint-sm);
+}
+
+  .max-w_breakpoint-md {
+    max-width: var(--sizes-breakpoint-md);
+}
+
+  .max-w_breakpoint-lg {
+    max-width: var(--sizes-breakpoint-lg);
+}
+
+  .max-w_breakpoint-xl {
+    max-width: var(--sizes-breakpoint-xl);
+}
+
+  .max-w_breakpoint-xxl {
+    max-width: var(--sizes-breakpoint-xxl);
+}
+
+  .max-w_1\\/2 {
+    max-width: 50%;
+}
+
+  .max-w_1\\/3 {
+    max-width: 33.333333%;
+}
+
+  .max-w_2\\/3 {
+    max-width: 66.666667%;
+}
+
+  .max-w_1\\/4 {
+    max-width: 25%;
+}
+
+  .max-w_2\\/4 {
+    max-width: 50%;
+}
+
+  .max-w_3\\/4 {
+    max-width: 75%;
+}
+
+  .max-w_1\\/5 {
+    max-width: 20%;
+}
+
+  .max-w_2\\/5 {
+    max-width: 40%;
+}
+
+  .max-w_3\\/5 {
+    max-width: 60%;
+}
+
+  .max-w_4\\/5 {
+    max-width: 80%;
+}
+
+  .max-w_1\\/6 {
+    max-width: 16.666667%;
+}
+
+  .max-w_2\\/6 {
+    max-width: 33.333333%;
+}
+
+  .max-w_3\\/6 {
+    max-width: 50%;
+}
+
+  .max-w_4\\/6 {
+    max-width: 66.666667%;
+}
+
+  .max-w_5\\/6 {
+    max-width: 83.333333%;
+}
+
+  .max-w_screen {
+    max-width: 100vw;
 }
 
   .before\\:bg_transparent::before {
@@ -8252,6 +8389,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   @media screen and (min-width: 0rem) {
+    .hide_xs {
+      display: none;
+}
     .xs\\:bg_colour\\.primary\\.fill {
       background: var(--colors-colour\\.primary\\.fill);
 }
@@ -9273,12 +9413,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xs\\:cg_-slider\\.tick {
       column-gap: calc(var(--spacing-slider\\.tick) * -1);
-}
-    .xs\\:hide_true {
-      display: none;
-}
-    .xs\\:hide_false {
-      display: unset;
 }
     .xs\\:rg_spacing\\.0 {
       row-gap: var(--spacing-spacing\\.0);
@@ -9506,194 +9640,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .xs\\:max-w_container\\.xs {
       max-width: var(--sizes-container\\.xs);
 }
-    .xs\\:max-w_auto {
-      max-width: auto;
-}
-    .xs\\:max-w_container\\.sm {
-      max-width: var(--sizes-container\\.sm);
-}
-    .xs\\:max-w_container\\.md {
-      max-width: var(--sizes-container\\.md);
-}
-    .xs\\:max-w_container\\.lg {
-      max-width: var(--sizes-container\\.lg);
-}
-    .xs\\:max-w_container\\.xl {
-      max-width: var(--sizes-container\\.xl);
-}
-    .xs\\:max-w_container\\.xxl {
-      max-width: var(--sizes-container\\.xxl);
-}
-    .xs\\:max-w_input\\.2 {
-      max-width: var(--sizes-input\\.2);
-}
-    .xs\\:max-w_input\\.4 {
-      max-width: var(--sizes-input\\.4);
-}
-    .xs\\:max-w_input\\.6 {
-      max-width: var(--sizes-input\\.6);
-}
-    .xs\\:max-w_input\\.8 {
-      max-width: var(--sizes-input\\.8);
-}
-    .xs\\:max-w_input\\.10 {
-      max-width: var(--sizes-input\\.10);
-}
-    .xs\\:max-w_input\\.12 {
-      max-width: var(--sizes-input\\.12);
-}
-    .xs\\:max-w_input\\.16 {
-      max-width: var(--sizes-input\\.16);
-}
-    .xs\\:max-w_input\\.25perc {
-      max-width: var(--sizes-input\\.25perc);
-}
-    .xs\\:max-w_input\\.50perc {
-      max-width: var(--sizes-input\\.50perc);
-}
-    .xs\\:max-w_input\\.75perc {
-      max-width: var(--sizes-input\\.75perc);
-}
-    .xs\\:max-w_input\\.100perc {
-      max-width: var(--sizes-input\\.100perc);
-}
-    .xs\\:max-w_overlay\\.sm {
-      max-width: var(--sizes-overlay\\.sm);
-}
-    .xs\\:max-w_overlay\\.md {
-      max-width: var(--sizes-overlay\\.md);
-}
-    .xs\\:max-w_overlay\\.lg {
-      max-width: var(--sizes-overlay\\.lg);
-}
-    .xs\\:max-w_chevron\\.select {
-      max-width: var(--sizes-chevron\\.select);
-}
-    .xs\\:max-w_chevron\\.table {
-      max-width: var(--sizes-chevron\\.table);
-}
-    .xs\\:max-w_input\\.height {
-      max-width: var(--sizes-input\\.height);
-}
-    .xs\\:max-w_progress\\.height {
-      max-width: var(--sizes-progress\\.height);
-}
-    .xs\\:max-w_slider\\.track {
-      max-width: var(--sizes-slider\\.track);
-}
-    .xs\\:max-w_slider\\.thumb {
-      max-width: var(--sizes-slider\\.thumb);
-}
-    .xs\\:max-w_slider\\.tick {
-      max-width: var(--sizes-slider\\.tick);
-}
-    .xs\\:max-w_toggle\\.width {
-      max-width: var(--sizes-toggle\\.width);
-}
-    .xs\\:max-w_toggle\\.thumb {
-      max-width: var(--sizes-toggle\\.thumb);
-}
-    .xs\\:max-w_typography\\.base {
-      max-width: var(--sizes-typography\\.base);
-}
-    .xs\\:max-w_breakpoint-xs {
-      max-width: var(--sizes-breakpoint-xs);
-}
-    .xs\\:max-w_breakpoint-sm {
-      max-width: var(--sizes-breakpoint-sm);
-}
-    .xs\\:max-w_breakpoint-md {
-      max-width: var(--sizes-breakpoint-md);
-}
-    .xs\\:max-w_breakpoint-lg {
-      max-width: var(--sizes-breakpoint-lg);
-}
-    .xs\\:max-w_breakpoint-xl {
-      max-width: var(--sizes-breakpoint-xl);
-}
-    .xs\\:max-w_breakpoint-xxl {
-      max-width: var(--sizes-breakpoint-xxl);
-}
-    .xs\\:max-w_1\\/2 {
-      max-width: 50%;
-}
-    .xs\\:max-w_1\\/3 {
-      max-width: 33.333333%;
-}
-    .xs\\:max-w_2\\/3 {
-      max-width: 66.666667%;
-}
-    .xs\\:max-w_1\\/4 {
-      max-width: 25%;
-}
-    .xs\\:max-w_2\\/4 {
-      max-width: 50%;
-}
-    .xs\\:max-w_3\\/4 {
-      max-width: 75%;
-}
-    .xs\\:max-w_1\\/5 {
-      max-width: 20%;
-}
-    .xs\\:max-w_2\\/5 {
-      max-width: 40%;
-}
-    .xs\\:max-w_3\\/5 {
-      max-width: 60%;
-}
-    .xs\\:max-w_4\\/5 {
-      max-width: 80%;
-}
-    .xs\\:max-w_1\\/6 {
-      max-width: 16.666667%;
-}
-    .xs\\:max-w_2\\/6 {
-      max-width: 33.333333%;
-}
-    .xs\\:max-w_3\\/6 {
-      max-width: 50%;
-}
-    .xs\\:max-w_4\\/6 {
-      max-width: 66.666667%;
-}
-    .xs\\:max-w_5\\/6 {
-      max-width: 83.333333%;
-}
-    .xs\\:max-w_1\\/12 {
-      max-width: 8.333333%;
-}
-    .xs\\:max-w_2\\/12 {
-      max-width: 16.666667%;
-}
-    .xs\\:max-w_3\\/12 {
-      max-width: 25%;
-}
-    .xs\\:max-w_4\\/12 {
-      max-width: 33.333333%;
-}
-    .xs\\:max-w_5\\/12 {
-      max-width: 41.666667%;
-}
-    .xs\\:max-w_6\\/12 {
-      max-width: 50%;
-}
-    .xs\\:max-w_7\\/12 {
-      max-width: 58.333333%;
-}
-    .xs\\:max-w_8\\/12 {
-      max-width: 66.666667%;
-}
-    .xs\\:max-w_9\\/12 {
-      max-width: 75%;
-}
-    .xs\\:max-w_10\\/12 {
-      max-width: 83.333333%;
-}
-    .xs\\:max-w_11\\/12 {
-      max-width: 91.666667%;
-}
-    .xs\\:max-w_screen {
-      max-width: 100vw;
+    .xs\\:w_200px {
+      width: 200px;
 }
     .xs\\:mt_spacing\\.0 {
       margin-top: var(--spacing-spacing\\.0);
@@ -10325,17 +10273,56 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .xs\\:w_input\\.16 {
       width: var(--sizes-input\\.16);
 }
-    .xs\\:w_input\\.25perc {
-      width: var(--sizes-input\\.25perc);
+    .xs\\:w_input\\.25\\% {
+      width: var(--sizes-input\\.25\\%);
+}
+    .xs\\:w_input\\.50\\% {
+      width: var(--sizes-input\\.50\\%);
+}
+    .xs\\:w_input\\.75\\% {
+      width: var(--sizes-input\\.75\\%);
+}
+    .xs\\:w_input\\.100\\% {
+      width: var(--sizes-input\\.100\\%);
+}
+    .xs\\:w_input\\.height {
+      width: var(--sizes-input\\.height);
+}
+    .xs\\:w_1\\/12 {
+      width: 8.333333%;
+}
+    .xs\\:w_2\\/12 {
+      width: 16.666667%;
+}
+    .xs\\:w_3\\/12 {
+      width: 25%;
+}
+    .xs\\:w_4\\/12 {
+      width: 33.333333%;
+}
+    .xs\\:w_5\\/12 {
+      width: 41.666667%;
+}
+    .xs\\:w_6\\/12 {
+      width: 50%;
+}
+    .xs\\:w_7\\/12 {
+      width: 58.333333%;
+}
+    .xs\\:w_8\\/12 {
+      width: 66.666667%;
+}
+    .xs\\:w_9\\/12 {
+      width: 75%;
 }
-    .xs\\:w_input\\.50perc {
-      width: var(--sizes-input\\.50perc);
+    .xs\\:w_10\\/12 {
+      width: 83.333333%;
 }
-    .xs\\:w_input\\.75perc {
-      width: var(--sizes-input\\.75perc);
+    .xs\\:w_11\\/12 {
+      width: 91.666667%;
 }
-    .xs\\:w_input\\.100perc {
-      width: var(--sizes-input\\.100perc);
+    .xs\\:w_12\\/12 {
+      width: var(--sizes-12\\/12);
 }
     .xs\\:w_overlay\\.sm {
       width: var(--sizes-overlay\\.sm);
@@ -10351,9 +10338,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xs\\:w_chevron\\.table {
       width: var(--sizes-chevron\\.table);
-}
-    .xs\\:w_input\\.height {
-      width: var(--sizes-input\\.height);
 }
     .xs\\:w_progress\\.height {
       width: var(--sizes-progress\\.height);
@@ -10438,39 +10422,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xs\\:w_5\\/6 {
       width: 83.333333%;
-}
-    .xs\\:w_1\\/12 {
-      width: 8.333333%;
-}
-    .xs\\:w_2\\/12 {
-      width: 16.666667%;
-}
-    .xs\\:w_3\\/12 {
-      width: 25%;
-}
-    .xs\\:w_4\\/12 {
-      width: 33.333333%;
-}
-    .xs\\:w_5\\/12 {
-      width: 41.666667%;
-}
-    .xs\\:w_6\\/12 {
-      width: 50%;
-}
-    .xs\\:w_7\\/12 {
-      width: 58.333333%;
-}
-    .xs\\:w_8\\/12 {
-      width: 66.666667%;
-}
-    .xs\\:w_9\\/12 {
-      width: 75%;
-}
-    .xs\\:w_10\\/12 {
-      width: 83.333333%;
-}
-    .xs\\:w_11\\/12 {
-      width: 91.666667%;
 }
     .xs\\:w_screen {
       width: 100vw;
@@ -10478,6 +10429,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   @media screen and (min-width: 36rem) {
+    .hide_sm {
+      display: none;
+}
     .sm\\:bg_colour\\.primary\\.fill {
       background: var(--colors-colour\\.primary\\.fill);
 }
@@ -11485,12 +11439,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .sm\\:cg_-slider\\.tick {
       column-gap: calc(var(--spacing-slider\\.tick) * -1);
-}
-    .sm\\:hide_true {
-      display: none;
-}
-    .sm\\:hide_false {
-      display: unset;
 }
     .sm\\:rg_spacing\\.0 {
       row-gap: var(--spacing-spacing\\.0);
@@ -11670,253 +11618,64 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .sm\\:gutter_spacing\\.4,.sm\\:gutter_spacing\\.5 {
       margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .sm\\:gutter_spacing\\.5 {
-      --col-gap: var(--iress-spacing-5, calc(5 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_spacing\\.6 {
-      --col-gap: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_spacing\\.6,.sm\\:gutter_spacing\\.7 {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .sm\\:gutter_spacing\\.7 {
-      --col-gap: var(--iress-spacing-7, calc(7 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_spacing\\.8 {
-      --col-gap: var(--iress-spacing-8, calc(8 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_spacing\\.8,.sm\\:gutter_none {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .sm\\:gutter_none {
-      --col-gap: var(--iress-spacing-0, 0rem);
-}
-    .sm\\:gutter_xs {
-      --col-gap: var(--iress-spacing-1, .25rem);
-}
-    .sm\\:gutter_xs,.sm\\:gutter_sm {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .sm\\:gutter_sm {
-      --col-gap: var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_md {
-      --col-gap: var(--iress-spacing-4, calc(4 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_md,.sm\\:gutter_lg {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .sm\\:gutter_lg {
-      --col-gap: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
-}
-    .sm\\:gutter_xl {
-      --col-gap: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .sm\\:max-w_container\\.sm {
-      max-width: var(--sizes-container\\.sm);
-}
-    .sm\\:max-w_auto {
-      max-width: auto;
-}
-    .sm\\:max-w_container\\.xs {
-      max-width: var(--sizes-container\\.xs);
-}
-    .sm\\:max-w_container\\.md {
-      max-width: var(--sizes-container\\.md);
-}
-    .sm\\:max-w_container\\.lg {
-      max-width: var(--sizes-container\\.lg);
-}
-    .sm\\:max-w_container\\.xl {
-      max-width: var(--sizes-container\\.xl);
-}
-    .sm\\:max-w_container\\.xxl {
-      max-width: var(--sizes-container\\.xxl);
-}
-    .sm\\:max-w_input\\.2 {
-      max-width: var(--sizes-input\\.2);
-}
-    .sm\\:max-w_input\\.4 {
-      max-width: var(--sizes-input\\.4);
-}
-    .sm\\:max-w_input\\.6 {
-      max-width: var(--sizes-input\\.6);
-}
-    .sm\\:max-w_input\\.8 {
-      max-width: var(--sizes-input\\.8);
-}
-    .sm\\:max-w_input\\.10 {
-      max-width: var(--sizes-input\\.10);
-}
-    .sm\\:max-w_input\\.12 {
-      max-width: var(--sizes-input\\.12);
-}
-    .sm\\:max-w_input\\.16 {
-      max-width: var(--sizes-input\\.16);
-}
-    .sm\\:max-w_input\\.25perc {
-      max-width: var(--sizes-input\\.25perc);
-}
-    .sm\\:max-w_input\\.50perc {
-      max-width: var(--sizes-input\\.50perc);
-}
-    .sm\\:max-w_input\\.75perc {
-      max-width: var(--sizes-input\\.75perc);
-}
-    .sm\\:max-w_input\\.100perc {
-      max-width: var(--sizes-input\\.100perc);
-}
-    .sm\\:max-w_overlay\\.sm {
-      max-width: var(--sizes-overlay\\.sm);
-}
-    .sm\\:max-w_overlay\\.md {
-      max-width: var(--sizes-overlay\\.md);
-}
-    .sm\\:max-w_overlay\\.lg {
-      max-width: var(--sizes-overlay\\.lg);
-}
-    .sm\\:max-w_chevron\\.select {
-      max-width: var(--sizes-chevron\\.select);
-}
-    .sm\\:max-w_chevron\\.table {
-      max-width: var(--sizes-chevron\\.table);
-}
-    .sm\\:max-w_input\\.height {
-      max-width: var(--sizes-input\\.height);
-}
-    .sm\\:max-w_progress\\.height {
-      max-width: var(--sizes-progress\\.height);
-}
-    .sm\\:max-w_slider\\.track {
-      max-width: var(--sizes-slider\\.track);
-}
-    .sm\\:max-w_slider\\.thumb {
-      max-width: var(--sizes-slider\\.thumb);
-}
-    .sm\\:max-w_slider\\.tick {
-      max-width: var(--sizes-slider\\.tick);
-}
-    .sm\\:max-w_toggle\\.width {
-      max-width: var(--sizes-toggle\\.width);
-}
-    .sm\\:max-w_toggle\\.thumb {
-      max-width: var(--sizes-toggle\\.thumb);
-}
-    .sm\\:max-w_typography\\.base {
-      max-width: var(--sizes-typography\\.base);
-}
-    .sm\\:max-w_breakpoint-xs {
-      max-width: var(--sizes-breakpoint-xs);
-}
-    .sm\\:max-w_breakpoint-sm {
-      max-width: var(--sizes-breakpoint-sm);
-}
-    .sm\\:max-w_breakpoint-md {
-      max-width: var(--sizes-breakpoint-md);
-}
-    .sm\\:max-w_breakpoint-lg {
-      max-width: var(--sizes-breakpoint-lg);
-}
-    .sm\\:max-w_breakpoint-xl {
-      max-width: var(--sizes-breakpoint-xl);
-}
-    .sm\\:max-w_breakpoint-xxl {
-      max-width: var(--sizes-breakpoint-xxl);
-}
-    .sm\\:max-w_1\\/2 {
-      max-width: 50%;
-}
-    .sm\\:max-w_1\\/3 {
-      max-width: 33.333333%;
-}
-    .sm\\:max-w_2\\/3 {
-      max-width: 66.666667%;
-}
-    .sm\\:max-w_1\\/4 {
-      max-width: 25%;
-}
-    .sm\\:max-w_2\\/4 {
-      max-width: 50%;
-}
-    .sm\\:max-w_3\\/4 {
-      max-width: 75%;
-}
-    .sm\\:max-w_1\\/5 {
-      max-width: 20%;
-}
-    .sm\\:max-w_2\\/5 {
-      max-width: 40%;
-}
-    .sm\\:max-w_3\\/5 {
-      max-width: 60%;
-}
-    .sm\\:max-w_4\\/5 {
-      max-width: 80%;
-}
-    .sm\\:max-w_1\\/6 {
-      max-width: 16.666667%;
-}
-    .sm\\:max-w_2\\/6 {
-      max-width: 33.333333%;
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .sm\\:max-w_3\\/6 {
-      max-width: 50%;
+    .sm\\:gutter_spacing\\.5 {
+      --col-gap: var(--iress-spacing-5, calc(5 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_4\\/6 {
-      max-width: 66.666667%;
+    .sm\\:gutter_spacing\\.6 {
+      --col-gap: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_5\\/6 {
-      max-width: 83.333333%;
+    .sm\\:gutter_spacing\\.6,.sm\\:gutter_spacing\\.7 {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .sm\\:max-w_1\\/12 {
-      max-width: 8.333333%;
+    .sm\\:gutter_spacing\\.7 {
+      --col-gap: var(--iress-spacing-7, calc(7 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_2\\/12 {
-      max-width: 16.666667%;
+    .sm\\:gutter_spacing\\.8 {
+      --col-gap: var(--iress-spacing-8, calc(8 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_3\\/12 {
-      max-width: 25%;
+    .sm\\:gutter_spacing\\.8,.sm\\:gutter_none {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .sm\\:max-w_4\\/12 {
-      max-width: 33.333333%;
+    .sm\\:gutter_none {
+      --col-gap: var(--iress-spacing-0, 0rem);
 }
-    .sm\\:max-w_5\\/12 {
-      max-width: 41.666667%;
+    .sm\\:gutter_xs {
+      --col-gap: var(--iress-spacing-1, .25rem);
 }
-    .sm\\:max-w_6\\/12 {
-      max-width: 50%;
+    .sm\\:gutter_xs,.sm\\:gutter_sm {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .sm\\:max-w_7\\/12 {
-      max-width: 58.333333%;
+    .sm\\:gutter_sm {
+      --col-gap: var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_8\\/12 {
-      max-width: 66.666667%;
+    .sm\\:gutter_md {
+      --col-gap: var(--iress-spacing-4, calc(4 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_9\\/12 {
-      max-width: 75%;
+    .sm\\:gutter_md,.sm\\:gutter_lg {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .sm\\:max-w_10\\/12 {
-      max-width: 83.333333%;
+    .sm\\:gutter_lg {
+      --col-gap: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
 }
-    .sm\\:max-w_11\\/12 {
-      max-width: 91.666667%;
+    .sm\\:gutter_xl {
+      --col-gap: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .sm\\:max-w_screen {
-      max-width: 100vw;
+    .sm\\:max-w_container\\.sm {
+      max-width: var(--sizes-container\\.sm);
 }
     .sm\\:mt_spacing\\.0 {
       margin-top: var(--spacing-spacing\\.0);
@@ -12548,17 +12307,56 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .sm\\:w_input\\.16 {
       width: var(--sizes-input\\.16);
 }
-    .sm\\:w_input\\.25perc {
-      width: var(--sizes-input\\.25perc);
+    .sm\\:w_input\\.25\\% {
+      width: var(--sizes-input\\.25\\%);
+}
+    .sm\\:w_input\\.50\\% {
+      width: var(--sizes-input\\.50\\%);
+}
+    .sm\\:w_input\\.75\\% {
+      width: var(--sizes-input\\.75\\%);
+}
+    .sm\\:w_input\\.100\\% {
+      width: var(--sizes-input\\.100\\%);
+}
+    .sm\\:w_input\\.height {
+      width: var(--sizes-input\\.height);
+}
+    .sm\\:w_1\\/12 {
+      width: 8.333333%;
+}
+    .sm\\:w_2\\/12 {
+      width: 16.666667%;
+}
+    .sm\\:w_3\\/12 {
+      width: 25%;
+}
+    .sm\\:w_4\\/12 {
+      width: 33.333333%;
+}
+    .sm\\:w_5\\/12 {
+      width: 41.666667%;
+}
+    .sm\\:w_6\\/12 {
+      width: 50%;
+}
+    .sm\\:w_7\\/12 {
+      width: 58.333333%;
+}
+    .sm\\:w_8\\/12 {
+      width: 66.666667%;
+}
+    .sm\\:w_9\\/12 {
+      width: 75%;
 }
-    .sm\\:w_input\\.50perc {
-      width: var(--sizes-input\\.50perc);
+    .sm\\:w_10\\/12 {
+      width: 83.333333%;
 }
-    .sm\\:w_input\\.75perc {
-      width: var(--sizes-input\\.75perc);
+    .sm\\:w_11\\/12 {
+      width: 91.666667%;
 }
-    .sm\\:w_input\\.100perc {
-      width: var(--sizes-input\\.100perc);
+    .sm\\:w_12\\/12 {
+      width: var(--sizes-12\\/12);
 }
     .sm\\:w_overlay\\.sm {
       width: var(--sizes-overlay\\.sm);
@@ -12574,9 +12372,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .sm\\:w_chevron\\.table {
       width: var(--sizes-chevron\\.table);
-}
-    .sm\\:w_input\\.height {
-      width: var(--sizes-input\\.height);
 }
     .sm\\:w_progress\\.height {
       width: var(--sizes-progress\\.height);
@@ -12661,39 +12456,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .sm\\:w_5\\/6 {
       width: 83.333333%;
-}
-    .sm\\:w_1\\/12 {
-      width: 8.333333%;
-}
-    .sm\\:w_2\\/12 {
-      width: 16.666667%;
-}
-    .sm\\:w_3\\/12 {
-      width: 25%;
-}
-    .sm\\:w_4\\/12 {
-      width: 33.333333%;
-}
-    .sm\\:w_5\\/12 {
-      width: 41.666667%;
-}
-    .sm\\:w_6\\/12 {
-      width: 50%;
-}
-    .sm\\:w_7\\/12 {
-      width: 58.333333%;
-}
-    .sm\\:w_8\\/12 {
-      width: 66.666667%;
-}
-    .sm\\:w_9\\/12 {
-      width: 75%;
-}
-    .sm\\:w_10\\/12 {
-      width: 83.333333%;
-}
-    .sm\\:w_11\\/12 {
-      width: 91.666667%;
 }
     .sm\\:w_screen {
       width: 100vw;
@@ -12710,6 +12472,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   @media screen and (min-width: 48rem) {
+    .hide_md {
+      display: none;
+}
     .md\\:bg_colour\\.primary\\.fill {
       background: var(--colors-colour\\.primary\\.fill);
 }
@@ -13723,12 +13488,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .md\\:cg_-slider\\.tick {
       column-gap: calc(var(--spacing-slider\\.tick) * -1);
-}
-    .md\\:hide_true {
-      display: none;
-}
-    .md\\:hide_false {
-      display: unset;
 }
     .md\\:rg_spacing\\.0 {
       row-gap: var(--spacing-spacing\\.0);
@@ -13960,195 +13719,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .md\\:max-w_container\\.md {
       max-width: var(--sizes-container\\.md);
-}
-    .md\\:max-w_auto {
-      max-width: auto;
-}
-    .md\\:max-w_container\\.xs {
-      max-width: var(--sizes-container\\.xs);
-}
-    .md\\:max-w_container\\.sm {
-      max-width: var(--sizes-container\\.sm);
-}
-    .md\\:max-w_container\\.lg {
-      max-width: var(--sizes-container\\.lg);
-}
-    .md\\:max-w_container\\.xl {
-      max-width: var(--sizes-container\\.xl);
-}
-    .md\\:max-w_container\\.xxl {
-      max-width: var(--sizes-container\\.xxl);
-}
-    .md\\:max-w_input\\.2 {
-      max-width: var(--sizes-input\\.2);
-}
-    .md\\:max-w_input\\.4 {
-      max-width: var(--sizes-input\\.4);
-}
-    .md\\:max-w_input\\.6 {
-      max-width: var(--sizes-input\\.6);
-}
-    .md\\:max-w_input\\.8 {
-      max-width: var(--sizes-input\\.8);
-}
-    .md\\:max-w_input\\.10 {
-      max-width: var(--sizes-input\\.10);
-}
-    .md\\:max-w_input\\.12 {
-      max-width: var(--sizes-input\\.12);
-}
-    .md\\:max-w_input\\.16 {
-      max-width: var(--sizes-input\\.16);
-}
-    .md\\:max-w_input\\.25perc {
-      max-width: var(--sizes-input\\.25perc);
-}
-    .md\\:max-w_input\\.50perc {
-      max-width: var(--sizes-input\\.50perc);
-}
-    .md\\:max-w_input\\.75perc {
-      max-width: var(--sizes-input\\.75perc);
-}
-    .md\\:max-w_input\\.100perc {
-      max-width: var(--sizes-input\\.100perc);
-}
-    .md\\:max-w_overlay\\.sm {
-      max-width: var(--sizes-overlay\\.sm);
-}
-    .md\\:max-w_overlay\\.md {
-      max-width: var(--sizes-overlay\\.md);
-}
-    .md\\:max-w_overlay\\.lg {
-      max-width: var(--sizes-overlay\\.lg);
-}
-    .md\\:max-w_chevron\\.select {
-      max-width: var(--sizes-chevron\\.select);
-}
-    .md\\:max-w_chevron\\.table {
-      max-width: var(--sizes-chevron\\.table);
-}
-    .md\\:max-w_input\\.height {
-      max-width: var(--sizes-input\\.height);
-}
-    .md\\:max-w_progress\\.height {
-      max-width: var(--sizes-progress\\.height);
-}
-    .md\\:max-w_slider\\.track {
-      max-width: var(--sizes-slider\\.track);
-}
-    .md\\:max-w_slider\\.thumb {
-      max-width: var(--sizes-slider\\.thumb);
-}
-    .md\\:max-w_slider\\.tick {
-      max-width: var(--sizes-slider\\.tick);
-}
-    .md\\:max-w_toggle\\.width {
-      max-width: var(--sizes-toggle\\.width);
-}
-    .md\\:max-w_toggle\\.thumb {
-      max-width: var(--sizes-toggle\\.thumb);
-}
-    .md\\:max-w_typography\\.base {
-      max-width: var(--sizes-typography\\.base);
-}
-    .md\\:max-w_breakpoint-xs {
-      max-width: var(--sizes-breakpoint-xs);
-}
-    .md\\:max-w_breakpoint-sm {
-      max-width: var(--sizes-breakpoint-sm);
-}
-    .md\\:max-w_breakpoint-md {
-      max-width: var(--sizes-breakpoint-md);
-}
-    .md\\:max-w_breakpoint-lg {
-      max-width: var(--sizes-breakpoint-lg);
-}
-    .md\\:max-w_breakpoint-xl {
-      max-width: var(--sizes-breakpoint-xl);
-}
-    .md\\:max-w_breakpoint-xxl {
-      max-width: var(--sizes-breakpoint-xxl);
-}
-    .md\\:max-w_1\\/2 {
-      max-width: 50%;
-}
-    .md\\:max-w_1\\/3 {
-      max-width: 33.333333%;
-}
-    .md\\:max-w_2\\/3 {
-      max-width: 66.666667%;
-}
-    .md\\:max-w_1\\/4 {
-      max-width: 25%;
-}
-    .md\\:max-w_2\\/4 {
-      max-width: 50%;
-}
-    .md\\:max-w_3\\/4 {
-      max-width: 75%;
-}
-    .md\\:max-w_1\\/5 {
-      max-width: 20%;
-}
-    .md\\:max-w_2\\/5 {
-      max-width: 40%;
-}
-    .md\\:max-w_3\\/5 {
-      max-width: 60%;
-}
-    .md\\:max-w_4\\/5 {
-      max-width: 80%;
-}
-    .md\\:max-w_1\\/6 {
-      max-width: 16.666667%;
-}
-    .md\\:max-w_2\\/6 {
-      max-width: 33.333333%;
-}
-    .md\\:max-w_3\\/6 {
-      max-width: 50%;
-}
-    .md\\:max-w_4\\/6 {
-      max-width: 66.666667%;
-}
-    .md\\:max-w_5\\/6 {
-      max-width: 83.333333%;
-}
-    .md\\:max-w_1\\/12 {
-      max-width: 8.333333%;
-}
-    .md\\:max-w_2\\/12 {
-      max-width: 16.666667%;
-}
-    .md\\:max-w_3\\/12 {
-      max-width: 25%;
-}
-    .md\\:max-w_4\\/12 {
-      max-width: 33.333333%;
-}
-    .md\\:max-w_5\\/12 {
-      max-width: 41.666667%;
-}
-    .md\\:max-w_6\\/12 {
-      max-width: 50%;
-}
-    .md\\:max-w_7\\/12 {
-      max-width: 58.333333%;
-}
-    .md\\:max-w_8\\/12 {
-      max-width: 66.666667%;
-}
-    .md\\:max-w_9\\/12 {
-      max-width: 75%;
-}
-    .md\\:max-w_10\\/12 {
-      max-width: 83.333333%;
-}
-    .md\\:max-w_11\\/12 {
-      max-width: 91.666667%;
-}
-    .md\\:max-w_screen {
-      max-width: 100vw;
 }
     .md\\:mt_spacing\\.0 {
       margin-top: var(--spacing-spacing\\.0);
@@ -14780,17 +14350,56 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .md\\:w_input\\.16 {
       width: var(--sizes-input\\.16);
 }
-    .md\\:w_input\\.25perc {
-      width: var(--sizes-input\\.25perc);
+    .md\\:w_input\\.25\\% {
+      width: var(--sizes-input\\.25\\%);
+}
+    .md\\:w_input\\.50\\% {
+      width: var(--sizes-input\\.50\\%);
+}
+    .md\\:w_input\\.75\\% {
+      width: var(--sizes-input\\.75\\%);
+}
+    .md\\:w_input\\.100\\% {
+      width: var(--sizes-input\\.100\\%);
 }
-    .md\\:w_input\\.50perc {
-      width: var(--sizes-input\\.50perc);
+    .md\\:w_input\\.height {
+      width: var(--sizes-input\\.height);
+}
+    .md\\:w_1\\/12 {
+      width: 8.333333%;
+}
+    .md\\:w_2\\/12 {
+      width: 16.666667%;
+}
+    .md\\:w_3\\/12 {
+      width: 25%;
+}
+    .md\\:w_4\\/12 {
+      width: 33.333333%;
+}
+    .md\\:w_5\\/12 {
+      width: 41.666667%;
+}
+    .md\\:w_6\\/12 {
+      width: 50%;
+}
+    .md\\:w_7\\/12 {
+      width: 58.333333%;
+}
+    .md\\:w_8\\/12 {
+      width: 66.666667%;
+}
+    .md\\:w_9\\/12 {
+      width: 75%;
+}
+    .md\\:w_10\\/12 {
+      width: 83.333333%;
 }
-    .md\\:w_input\\.75perc {
-      width: var(--sizes-input\\.75perc);
+    .md\\:w_11\\/12 {
+      width: 91.666667%;
 }
-    .md\\:w_input\\.100perc {
-      width: var(--sizes-input\\.100perc);
+    .md\\:w_12\\/12 {
+      width: var(--sizes-12\\/12);
 }
     .md\\:w_overlay\\.sm {
       width: var(--sizes-overlay\\.sm);
@@ -14806,9 +14415,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .md\\:w_chevron\\.table {
       width: var(--sizes-chevron\\.table);
-}
-    .md\\:w_input\\.height {
-      width: var(--sizes-input\\.height);
 }
     .md\\:w_progress\\.height {
       width: var(--sizes-progress\\.height);
@@ -14888,44 +14494,11 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .md\\:w_3\\/6 {
       width: 50%;
 }
-    .md\\:w_4\\/6 {
-      width: 66.666667%;
-}
-    .md\\:w_5\\/6 {
-      width: 83.333333%;
-}
-    .md\\:w_1\\/12 {
-      width: 8.333333%;
-}
-    .md\\:w_2\\/12 {
-      width: 16.666667%;
-}
-    .md\\:w_3\\/12 {
-      width: 25%;
-}
-    .md\\:w_4\\/12 {
-      width: 33.333333%;
-}
-    .md\\:w_5\\/12 {
-      width: 41.666667%;
-}
-    .md\\:w_6\\/12 {
-      width: 50%;
-}
-    .md\\:w_7\\/12 {
-      width: 58.333333%;
-}
-    .md\\:w_8\\/12 {
+    .md\\:w_4\\/6 {
       width: 66.666667%;
 }
-    .md\\:w_9\\/12 {
-      width: 75%;
-}
-    .md\\:w_10\\/12 {
+    .md\\:w_5\\/6 {
       width: 83.333333%;
-}
-    .md\\:w_11\\/12 {
-      width: 91.666667%;
 }
     .md\\:w_screen {
       width: 100vw;
@@ -14933,6 +14506,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   @media screen and (min-width: 64rem) {
+    .hide_lg {
+      display: none;
+}
     .lg\\:bg_colour\\.primary\\.fill {
       background: var(--colors-colour\\.primary\\.fill);
 }
@@ -15944,12 +15520,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .lg\\:cg_-slider\\.tick {
       column-gap: calc(var(--spacing-slider\\.tick) * -1);
-}
-    .lg\\:hide_true {
-      display: none;
-}
-    .lg\\:hide_false {
-      display: unset;
 }
     .lg\\:rg_spacing\\.0 {
       row-gap: var(--spacing-spacing\\.0);
@@ -16177,195 +15747,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .lg\\:max-w_container\\.lg {
       max-width: var(--sizes-container\\.lg);
-}
-    .lg\\:max-w_auto {
-      max-width: auto;
-}
-    .lg\\:max-w_container\\.xs {
-      max-width: var(--sizes-container\\.xs);
-}
-    .lg\\:max-w_container\\.sm {
-      max-width: var(--sizes-container\\.sm);
-}
-    .lg\\:max-w_container\\.md {
-      max-width: var(--sizes-container\\.md);
-}
-    .lg\\:max-w_container\\.xl {
-      max-width: var(--sizes-container\\.xl);
-}
-    .lg\\:max-w_container\\.xxl {
-      max-width: var(--sizes-container\\.xxl);
-}
-    .lg\\:max-w_input\\.2 {
-      max-width: var(--sizes-input\\.2);
-}
-    .lg\\:max-w_input\\.4 {
-      max-width: var(--sizes-input\\.4);
-}
-    .lg\\:max-w_input\\.6 {
-      max-width: var(--sizes-input\\.6);
-}
-    .lg\\:max-w_input\\.8 {
-      max-width: var(--sizes-input\\.8);
-}
-    .lg\\:max-w_input\\.10 {
-      max-width: var(--sizes-input\\.10);
-}
-    .lg\\:max-w_input\\.12 {
-      max-width: var(--sizes-input\\.12);
-}
-    .lg\\:max-w_input\\.16 {
-      max-width: var(--sizes-input\\.16);
-}
-    .lg\\:max-w_input\\.25perc {
-      max-width: var(--sizes-input\\.25perc);
-}
-    .lg\\:max-w_input\\.50perc {
-      max-width: var(--sizes-input\\.50perc);
-}
-    .lg\\:max-w_input\\.75perc {
-      max-width: var(--sizes-input\\.75perc);
-}
-    .lg\\:max-w_input\\.100perc {
-      max-width: var(--sizes-input\\.100perc);
-}
-    .lg\\:max-w_overlay\\.sm {
-      max-width: var(--sizes-overlay\\.sm);
-}
-    .lg\\:max-w_overlay\\.md {
-      max-width: var(--sizes-overlay\\.md);
-}
-    .lg\\:max-w_overlay\\.lg {
-      max-width: var(--sizes-overlay\\.lg);
-}
-    .lg\\:max-w_chevron\\.select {
-      max-width: var(--sizes-chevron\\.select);
-}
-    .lg\\:max-w_chevron\\.table {
-      max-width: var(--sizes-chevron\\.table);
-}
-    .lg\\:max-w_input\\.height {
-      max-width: var(--sizes-input\\.height);
-}
-    .lg\\:max-w_progress\\.height {
-      max-width: var(--sizes-progress\\.height);
-}
-    .lg\\:max-w_slider\\.track {
-      max-width: var(--sizes-slider\\.track);
-}
-    .lg\\:max-w_slider\\.thumb {
-      max-width: var(--sizes-slider\\.thumb);
-}
-    .lg\\:max-w_slider\\.tick {
-      max-width: var(--sizes-slider\\.tick);
-}
-    .lg\\:max-w_toggle\\.width {
-      max-width: var(--sizes-toggle\\.width);
-}
-    .lg\\:max-w_toggle\\.thumb {
-      max-width: var(--sizes-toggle\\.thumb);
-}
-    .lg\\:max-w_typography\\.base {
-      max-width: var(--sizes-typography\\.base);
-}
-    .lg\\:max-w_breakpoint-xs {
-      max-width: var(--sizes-breakpoint-xs);
-}
-    .lg\\:max-w_breakpoint-sm {
-      max-width: var(--sizes-breakpoint-sm);
-}
-    .lg\\:max-w_breakpoint-md {
-      max-width: var(--sizes-breakpoint-md);
-}
-    .lg\\:max-w_breakpoint-lg {
-      max-width: var(--sizes-breakpoint-lg);
-}
-    .lg\\:max-w_breakpoint-xl {
-      max-width: var(--sizes-breakpoint-xl);
-}
-    .lg\\:max-w_breakpoint-xxl {
-      max-width: var(--sizes-breakpoint-xxl);
-}
-    .lg\\:max-w_1\\/2 {
-      max-width: 50%;
-}
-    .lg\\:max-w_1\\/3 {
-      max-width: 33.333333%;
-}
-    .lg\\:max-w_2\\/3 {
-      max-width: 66.666667%;
-}
-    .lg\\:max-w_1\\/4 {
-      max-width: 25%;
-}
-    .lg\\:max-w_2\\/4 {
-      max-width: 50%;
-}
-    .lg\\:max-w_3\\/4 {
-      max-width: 75%;
-}
-    .lg\\:max-w_1\\/5 {
-      max-width: 20%;
-}
-    .lg\\:max-w_2\\/5 {
-      max-width: 40%;
-}
-    .lg\\:max-w_3\\/5 {
-      max-width: 60%;
-}
-    .lg\\:max-w_4\\/5 {
-      max-width: 80%;
-}
-    .lg\\:max-w_1\\/6 {
-      max-width: 16.666667%;
-}
-    .lg\\:max-w_2\\/6 {
-      max-width: 33.333333%;
-}
-    .lg\\:max-w_3\\/6 {
-      max-width: 50%;
-}
-    .lg\\:max-w_4\\/6 {
-      max-width: 66.666667%;
-}
-    .lg\\:max-w_5\\/6 {
-      max-width: 83.333333%;
-}
-    .lg\\:max-w_1\\/12 {
-      max-width: 8.333333%;
-}
-    .lg\\:max-w_2\\/12 {
-      max-width: 16.666667%;
-}
-    .lg\\:max-w_3\\/12 {
-      max-width: 25%;
-}
-    .lg\\:max-w_4\\/12 {
-      max-width: 33.333333%;
-}
-    .lg\\:max-w_5\\/12 {
-      max-width: 41.666667%;
-}
-    .lg\\:max-w_6\\/12 {
-      max-width: 50%;
-}
-    .lg\\:max-w_7\\/12 {
-      max-width: 58.333333%;
-}
-    .lg\\:max-w_8\\/12 {
-      max-width: 66.666667%;
-}
-    .lg\\:max-w_9\\/12 {
-      max-width: 75%;
-}
-    .lg\\:max-w_10\\/12 {
-      max-width: 83.333333%;
-}
-    .lg\\:max-w_11\\/12 {
-      max-width: 91.666667%;
-}
-    .lg\\:max-w_screen {
-      max-width: 100vw;
 }
     .lg\\:mt_spacing\\.0 {
       margin-top: var(--spacing-spacing\\.0);
@@ -16997,17 +16378,56 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .lg\\:w_input\\.16 {
       width: var(--sizes-input\\.16);
 }
-    .lg\\:w_input\\.25perc {
-      width: var(--sizes-input\\.25perc);
+    .lg\\:w_input\\.25\\% {
+      width: var(--sizes-input\\.25\\%);
+}
+    .lg\\:w_input\\.50\\% {
+      width: var(--sizes-input\\.50\\%);
+}
+    .lg\\:w_input\\.75\\% {
+      width: var(--sizes-input\\.75\\%);
+}
+    .lg\\:w_input\\.100\\% {
+      width: var(--sizes-input\\.100\\%);
+}
+    .lg\\:w_input\\.height {
+      width: var(--sizes-input\\.height);
+}
+    .lg\\:w_1\\/12 {
+      width: 8.333333%;
+}
+    .lg\\:w_2\\/12 {
+      width: 16.666667%;
+}
+    .lg\\:w_3\\/12 {
+      width: 25%;
+}
+    .lg\\:w_4\\/12 {
+      width: 33.333333%;
+}
+    .lg\\:w_5\\/12 {
+      width: 41.666667%;
+}
+    .lg\\:w_6\\/12 {
+      width: 50%;
+}
+    .lg\\:w_7\\/12 {
+      width: 58.333333%;
+}
+    .lg\\:w_8\\/12 {
+      width: 66.666667%;
+}
+    .lg\\:w_9\\/12 {
+      width: 75%;
 }
-    .lg\\:w_input\\.50perc {
-      width: var(--sizes-input\\.50perc);
+    .lg\\:w_10\\/12 {
+      width: 83.333333%;
 }
-    .lg\\:w_input\\.75perc {
-      width: var(--sizes-input\\.75perc);
+    .lg\\:w_11\\/12 {
+      width: 91.666667%;
 }
-    .lg\\:w_input\\.100perc {
-      width: var(--sizes-input\\.100perc);
+    .lg\\:w_12\\/12 {
+      width: var(--sizes-12\\/12);
 }
     .lg\\:w_overlay\\.sm {
       width: var(--sizes-overlay\\.sm);
@@ -17023,9 +16443,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .lg\\:w_chevron\\.table {
       width: var(--sizes-chevron\\.table);
-}
-    .lg\\:w_input\\.height {
-      width: var(--sizes-input\\.height);
 }
     .lg\\:w_progress\\.height {
       width: var(--sizes-progress\\.height);
@@ -17110,39 +16527,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .lg\\:w_5\\/6 {
       width: 83.333333%;
-}
-    .lg\\:w_1\\/12 {
-      width: 8.333333%;
-}
-    .lg\\:w_2\\/12 {
-      width: 16.666667%;
-}
-    .lg\\:w_3\\/12 {
-      width: 25%;
-}
-    .lg\\:w_4\\/12 {
-      width: 33.333333%;
-}
-    .lg\\:w_5\\/12 {
-      width: 41.666667%;
-}
-    .lg\\:w_6\\/12 {
-      width: 50%;
-}
-    .lg\\:w_7\\/12 {
-      width: 58.333333%;
-}
-    .lg\\:w_8\\/12 {
-      width: 66.666667%;
-}
-    .lg\\:w_9\\/12 {
-      width: 75%;
-}
-    .lg\\:w_10\\/12 {
-      width: 83.333333%;
-}
-    .lg\\:w_11\\/12 {
-      width: 91.666667%;
 }
     .lg\\:w_screen {
       width: 100vw;
@@ -17150,6 +16534,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   @media screen and (min-width: 75rem) {
+    .hide_xl {
+      display: none;
+}
     .xl\\:bg_colour\\.primary\\.fill {
       background: var(--colors-colour\\.primary\\.fill);
 }
@@ -18139,12 +17526,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xl\\:cg_-slider\\.tick {
       column-gap: calc(var(--spacing-slider\\.tick) * -1);
-}
-    .xl\\:hide_true {
-      display: none;
-}
-    .xl\\:hide_false {
-      display: unset;
 }
     .xl\\:rg_spacing\\.0 {
       row-gap: var(--spacing-spacing\\.0);
@@ -18355,232 +17736,43 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       row-gap: var(--col-gap);
 }
     .xl\\:gutter_spacing\\.10 {
-      --col-gap: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
-}
-    .xl\\:gutter_none {
-      --col-gap: var(--iress-spacing-0, 0rem);
-}
-    .xl\\:gutter_none,.xl\\:gutter_xs {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .xl\\:gutter_xs {
-      --col-gap: var(--iress-spacing-1, .25rem);
-}
-    .xl\\:gutter_sm {
-      --col-gap: var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem)));
-}
-    .xl\\:gutter_sm,.xl\\:gutter_md {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .xl\\:gutter_md {
-      --col-gap: var(--iress-spacing-4, calc(4 * var(--iress-spacing-100, .25rem)));
-}
-    .xl\\:gutter_lg {
-      --col-gap: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
-}
-    .xl\\:gutter_lg,.xl\\:gutter_xl {
-      margin-inline: calc(-1 * var(--col-gap) / 2);
-      column-gap: var(--iress-spacing-0, 0rem);
-      row-gap: var(--col-gap);
-}
-    .xl\\:gutter_xl {
-      --col-gap: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
-}
-    .xl\\:max-w_container\\.xl {
-      max-width: var(--sizes-container\\.xl);
-}
-    .xl\\:max-w_auto {
-      max-width: auto;
-}
-    .xl\\:max-w_container\\.xs {
-      max-width: var(--sizes-container\\.xs);
-}
-    .xl\\:max-w_container\\.sm {
-      max-width: var(--sizes-container\\.sm);
-}
-    .xl\\:max-w_container\\.md {
-      max-width: var(--sizes-container\\.md);
-}
-    .xl\\:max-w_container\\.lg {
-      max-width: var(--sizes-container\\.lg);
-}
-    .xl\\:max-w_container\\.xxl {
-      max-width: var(--sizes-container\\.xxl);
-}
-    .xl\\:max-w_input\\.2 {
-      max-width: var(--sizes-input\\.2);
-}
-    .xl\\:max-w_input\\.4 {
-      max-width: var(--sizes-input\\.4);
-}
-    .xl\\:max-w_input\\.6 {
-      max-width: var(--sizes-input\\.6);
-}
-    .xl\\:max-w_input\\.8 {
-      max-width: var(--sizes-input\\.8);
-}
-    .xl\\:max-w_input\\.10 {
-      max-width: var(--sizes-input\\.10);
-}
-    .xl\\:max-w_input\\.12 {
-      max-width: var(--sizes-input\\.12);
-}
-    .xl\\:max-w_input\\.16 {
-      max-width: var(--sizes-input\\.16);
-}
-    .xl\\:max-w_input\\.25perc {
-      max-width: var(--sizes-input\\.25perc);
-}
-    .xl\\:max-w_input\\.50perc {
-      max-width: var(--sizes-input\\.50perc);
-}
-    .xl\\:max-w_input\\.75perc {
-      max-width: var(--sizes-input\\.75perc);
-}
-    .xl\\:max-w_input\\.100perc {
-      max-width: var(--sizes-input\\.100perc);
-}
-    .xl\\:max-w_overlay\\.sm {
-      max-width: var(--sizes-overlay\\.sm);
-}
-    .xl\\:max-w_overlay\\.md {
-      max-width: var(--sizes-overlay\\.md);
-}
-    .xl\\:max-w_overlay\\.lg {
-      max-width: var(--sizes-overlay\\.lg);
-}
-    .xl\\:max-w_chevron\\.select {
-      max-width: var(--sizes-chevron\\.select);
-}
-    .xl\\:max-w_chevron\\.table {
-      max-width: var(--sizes-chevron\\.table);
-}
-    .xl\\:max-w_input\\.height {
-      max-width: var(--sizes-input\\.height);
-}
-    .xl\\:max-w_progress\\.height {
-      max-width: var(--sizes-progress\\.height);
-}
-    .xl\\:max-w_slider\\.track {
-      max-width: var(--sizes-slider\\.track);
-}
-    .xl\\:max-w_slider\\.thumb {
-      max-width: var(--sizes-slider\\.thumb);
-}
-    .xl\\:max-w_slider\\.tick {
-      max-width: var(--sizes-slider\\.tick);
-}
-    .xl\\:max-w_toggle\\.width {
-      max-width: var(--sizes-toggle\\.width);
-}
-    .xl\\:max-w_toggle\\.thumb {
-      max-width: var(--sizes-toggle\\.thumb);
-}
-    .xl\\:max-w_typography\\.base {
-      max-width: var(--sizes-typography\\.base);
-}
-    .xl\\:max-w_breakpoint-xs {
-      max-width: var(--sizes-breakpoint-xs);
-}
-    .xl\\:max-w_breakpoint-sm {
-      max-width: var(--sizes-breakpoint-sm);
-}
-    .xl\\:max-w_breakpoint-md {
-      max-width: var(--sizes-breakpoint-md);
-}
-    .xl\\:max-w_breakpoint-lg {
-      max-width: var(--sizes-breakpoint-lg);
-}
-    .xl\\:max-w_breakpoint-xl {
-      max-width: var(--sizes-breakpoint-xl);
-}
-    .xl\\:max-w_breakpoint-xxl {
-      max-width: var(--sizes-breakpoint-xxl);
-}
-    .xl\\:max-w_1\\/2 {
-      max-width: 50%;
-}
-    .xl\\:max-w_1\\/3 {
-      max-width: 33.333333%;
-}
-    .xl\\:max-w_2\\/3 {
-      max-width: 66.666667%;
-}
-    .xl\\:max-w_1\\/4 {
-      max-width: 25%;
-}
-    .xl\\:max-w_2\\/4 {
-      max-width: 50%;
-}
-    .xl\\:max-w_3\\/4 {
-      max-width: 75%;
-}
-    .xl\\:max-w_1\\/5 {
-      max-width: 20%;
-}
-    .xl\\:max-w_2\\/5 {
-      max-width: 40%;
-}
-    .xl\\:max-w_3\\/5 {
-      max-width: 60%;
-}
-    .xl\\:max-w_4\\/5 {
-      max-width: 80%;
-}
-    .xl\\:max-w_1\\/6 {
-      max-width: 16.666667%;
-}
-    .xl\\:max-w_2\\/6 {
-      max-width: 33.333333%;
-}
-    .xl\\:max-w_3\\/6 {
-      max-width: 50%;
-}
-    .xl\\:max-w_4\\/6 {
-      max-width: 66.666667%;
-}
-    .xl\\:max-w_5\\/6 {
-      max-width: 83.333333%;
-}
-    .xl\\:max-w_1\\/12 {
-      max-width: 8.333333%;
-}
-    .xl\\:max-w_2\\/12 {
-      max-width: 16.666667%;
+      --col-gap: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
 }
-    .xl\\:max-w_3\\/12 {
-      max-width: 25%;
+    .xl\\:gutter_none {
+      --col-gap: var(--iress-spacing-0, 0rem);
 }
-    .xl\\:max-w_4\\/12 {
-      max-width: 33.333333%;
+    .xl\\:gutter_none,.xl\\:gutter_xs {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .xl\\:max-w_5\\/12 {
-      max-width: 41.666667%;
+    .xl\\:gutter_xs {
+      --col-gap: var(--iress-spacing-1, .25rem);
 }
-    .xl\\:max-w_6\\/12 {
-      max-width: 50%;
+    .xl\\:gutter_sm {
+      --col-gap: var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem)));
 }
-    .xl\\:max-w_7\\/12 {
-      max-width: 58.333333%;
+    .xl\\:gutter_sm,.xl\\:gutter_md {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .xl\\:max-w_8\\/12 {
-      max-width: 66.666667%;
+    .xl\\:gutter_md {
+      --col-gap: var(--iress-spacing-4, calc(4 * var(--iress-spacing-100, .25rem)));
 }
-    .xl\\:max-w_9\\/12 {
-      max-width: 75%;
+    .xl\\:gutter_lg {
+      --col-gap: var(--iress-spacing-6, calc(6 * var(--iress-spacing-100, .25rem)));
 }
-    .xl\\:max-w_10\\/12 {
-      max-width: 83.333333%;
+    .xl\\:gutter_lg,.xl\\:gutter_xl {
+      margin-inline: calc(-1 * var(--col-gap) / 2);
+      column-gap: var(--iress-spacing-0, 0rem);
+      row-gap: var(--col-gap);
 }
-    .xl\\:max-w_11\\/12 {
-      max-width: 91.666667%;
+    .xl\\:gutter_xl {
+      --col-gap: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
 }
-    .xl\\:max-w_screen {
-      max-width: 100vw;
+    .xl\\:max-w_container\\.xl {
+      max-width: var(--sizes-container\\.xl);
 }
     .xl\\:mt_spacing\\.0 {
       margin-top: var(--spacing-spacing\\.0);
@@ -19212,17 +18404,56 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .xl\\:w_input\\.16 {
       width: var(--sizes-input\\.16);
 }
-    .xl\\:w_input\\.25perc {
-      width: var(--sizes-input\\.25perc);
+    .xl\\:w_input\\.25\\% {
+      width: var(--sizes-input\\.25\\%);
+}
+    .xl\\:w_input\\.50\\% {
+      width: var(--sizes-input\\.50\\%);
+}
+    .xl\\:w_input\\.75\\% {
+      width: var(--sizes-input\\.75\\%);
+}
+    .xl\\:w_input\\.100\\% {
+      width: var(--sizes-input\\.100\\%);
+}
+    .xl\\:w_input\\.height {
+      width: var(--sizes-input\\.height);
+}
+    .xl\\:w_1\\/12 {
+      width: 8.333333%;
+}
+    .xl\\:w_2\\/12 {
+      width: 16.666667%;
+}
+    .xl\\:w_3\\/12 {
+      width: 25%;
+}
+    .xl\\:w_4\\/12 {
+      width: 33.333333%;
+}
+    .xl\\:w_5\\/12 {
+      width: 41.666667%;
+}
+    .xl\\:w_6\\/12 {
+      width: 50%;
+}
+    .xl\\:w_7\\/12 {
+      width: 58.333333%;
+}
+    .xl\\:w_8\\/12 {
+      width: 66.666667%;
+}
+    .xl\\:w_9\\/12 {
+      width: 75%;
 }
-    .xl\\:w_input\\.50perc {
-      width: var(--sizes-input\\.50perc);
+    .xl\\:w_10\\/12 {
+      width: 83.333333%;
 }
-    .xl\\:w_input\\.75perc {
-      width: var(--sizes-input\\.75perc);
+    .xl\\:w_11\\/12 {
+      width: 91.666667%;
 }
-    .xl\\:w_input\\.100perc {
-      width: var(--sizes-input\\.100perc);
+    .xl\\:w_12\\/12 {
+      width: var(--sizes-12\\/12);
 }
     .xl\\:w_overlay\\.sm {
       width: var(--sizes-overlay\\.sm);
@@ -19238,9 +18469,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xl\\:w_chevron\\.table {
       width: var(--sizes-chevron\\.table);
-}
-    .xl\\:w_input\\.height {
-      width: var(--sizes-input\\.height);
 }
     .xl\\:w_progress\\.height {
       width: var(--sizes-progress\\.height);
@@ -19325,39 +18553,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xl\\:w_5\\/6 {
       width: 83.333333%;
-}
-    .xl\\:w_1\\/12 {
-      width: 8.333333%;
-}
-    .xl\\:w_2\\/12 {
-      width: 16.666667%;
-}
-    .xl\\:w_3\\/12 {
-      width: 25%;
-}
-    .xl\\:w_4\\/12 {
-      width: 33.333333%;
-}
-    .xl\\:w_5\\/12 {
-      width: 41.666667%;
-}
-    .xl\\:w_6\\/12 {
-      width: 50%;
-}
-    .xl\\:w_7\\/12 {
-      width: 58.333333%;
-}
-    .xl\\:w_8\\/12 {
-      width: 66.666667%;
-}
-    .xl\\:w_9\\/12 {
-      width: 75%;
-}
-    .xl\\:w_10\\/12 {
-      width: 83.333333%;
-}
-    .xl\\:w_11\\/12 {
-      width: 91.666667%;
 }
     .xl\\:w_screen {
       width: 100vw;
@@ -19365,6 +18560,9 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
   @media screen and (min-width: 93.75rem) {
+    .hide_xxl {
+      display: none;
+}
     .xxl\\:bg_colour\\.primary\\.fill {
       background: var(--colors-colour\\.primary\\.fill);
 }
@@ -20366,12 +19564,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xxl\\:cg_-slider\\.tick {
       column-gap: calc(var(--spacing-slider\\.tick) * -1);
-}
-    .xxl\\:hide_true {
-      display: none;
-}
-    .xxl\\:hide_false {
-      display: unset;
 }
     .xxl\\:rg_spacing\\.0 {
       row-gap: var(--spacing-spacing\\.0);
@@ -20609,195 +19801,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xxl\\:max-w_container\\.xxl {
       max-width: var(--sizes-container\\.xxl);
-}
-    .xxl\\:max-w_auto {
-      max-width: auto;
-}
-    .xxl\\:max-w_container\\.xs {
-      max-width: var(--sizes-container\\.xs);
-}
-    .xxl\\:max-w_container\\.sm {
-      max-width: var(--sizes-container\\.sm);
-}
-    .xxl\\:max-w_container\\.md {
-      max-width: var(--sizes-container\\.md);
-}
-    .xxl\\:max-w_container\\.lg {
-      max-width: var(--sizes-container\\.lg);
-}
-    .xxl\\:max-w_container\\.xl {
-      max-width: var(--sizes-container\\.xl);
-}
-    .xxl\\:max-w_input\\.2 {
-      max-width: var(--sizes-input\\.2);
-}
-    .xxl\\:max-w_input\\.4 {
-      max-width: var(--sizes-input\\.4);
-}
-    .xxl\\:max-w_input\\.6 {
-      max-width: var(--sizes-input\\.6);
-}
-    .xxl\\:max-w_input\\.8 {
-      max-width: var(--sizes-input\\.8);
-}
-    .xxl\\:max-w_input\\.10 {
-      max-width: var(--sizes-input\\.10);
-}
-    .xxl\\:max-w_input\\.12 {
-      max-width: var(--sizes-input\\.12);
-}
-    .xxl\\:max-w_input\\.16 {
-      max-width: var(--sizes-input\\.16);
-}
-    .xxl\\:max-w_input\\.25perc {
-      max-width: var(--sizes-input\\.25perc);
-}
-    .xxl\\:max-w_input\\.50perc {
-      max-width: var(--sizes-input\\.50perc);
-}
-    .xxl\\:max-w_input\\.75perc {
-      max-width: var(--sizes-input\\.75perc);
-}
-    .xxl\\:max-w_input\\.100perc {
-      max-width: var(--sizes-input\\.100perc);
-}
-    .xxl\\:max-w_overlay\\.sm {
-      max-width: var(--sizes-overlay\\.sm);
-}
-    .xxl\\:max-w_overlay\\.md {
-      max-width: var(--sizes-overlay\\.md);
-}
-    .xxl\\:max-w_overlay\\.lg {
-      max-width: var(--sizes-overlay\\.lg);
-}
-    .xxl\\:max-w_chevron\\.select {
-      max-width: var(--sizes-chevron\\.select);
-}
-    .xxl\\:max-w_chevron\\.table {
-      max-width: var(--sizes-chevron\\.table);
-}
-    .xxl\\:max-w_input\\.height {
-      max-width: var(--sizes-input\\.height);
-}
-    .xxl\\:max-w_progress\\.height {
-      max-width: var(--sizes-progress\\.height);
-}
-    .xxl\\:max-w_slider\\.track {
-      max-width: var(--sizes-slider\\.track);
-}
-    .xxl\\:max-w_slider\\.thumb {
-      max-width: var(--sizes-slider\\.thumb);
-}
-    .xxl\\:max-w_slider\\.tick {
-      max-width: var(--sizes-slider\\.tick);
-}
-    .xxl\\:max-w_toggle\\.width {
-      max-width: var(--sizes-toggle\\.width);
-}
-    .xxl\\:max-w_toggle\\.thumb {
-      max-width: var(--sizes-toggle\\.thumb);
-}
-    .xxl\\:max-w_typography\\.base {
-      max-width: var(--sizes-typography\\.base);
-}
-    .xxl\\:max-w_breakpoint-xs {
-      max-width: var(--sizes-breakpoint-xs);
-}
-    .xxl\\:max-w_breakpoint-sm {
-      max-width: var(--sizes-breakpoint-sm);
-}
-    .xxl\\:max-w_breakpoint-md {
-      max-width: var(--sizes-breakpoint-md);
-}
-    .xxl\\:max-w_breakpoint-lg {
-      max-width: var(--sizes-breakpoint-lg);
-}
-    .xxl\\:max-w_breakpoint-xl {
-      max-width: var(--sizes-breakpoint-xl);
-}
-    .xxl\\:max-w_breakpoint-xxl {
-      max-width: var(--sizes-breakpoint-xxl);
-}
-    .xxl\\:max-w_1\\/2 {
-      max-width: 50%;
-}
-    .xxl\\:max-w_1\\/3 {
-      max-width: 33.333333%;
-}
-    .xxl\\:max-w_2\\/3 {
-      max-width: 66.666667%;
-}
-    .xxl\\:max-w_1\\/4 {
-      max-width: 25%;
-}
-    .xxl\\:max-w_2\\/4 {
-      max-width: 50%;
-}
-    .xxl\\:max-w_3\\/4 {
-      max-width: 75%;
-}
-    .xxl\\:max-w_1\\/5 {
-      max-width: 20%;
-}
-    .xxl\\:max-w_2\\/5 {
-      max-width: 40%;
-}
-    .xxl\\:max-w_3\\/5 {
-      max-width: 60%;
-}
-    .xxl\\:max-w_4\\/5 {
-      max-width: 80%;
-}
-    .xxl\\:max-w_1\\/6 {
-      max-width: 16.666667%;
-}
-    .xxl\\:max-w_2\\/6 {
-      max-width: 33.333333%;
-}
-    .xxl\\:max-w_3\\/6 {
-      max-width: 50%;
-}
-    .xxl\\:max-w_4\\/6 {
-      max-width: 66.666667%;
-}
-    .xxl\\:max-w_5\\/6 {
-      max-width: 83.333333%;
-}
-    .xxl\\:max-w_1\\/12 {
-      max-width: 8.333333%;
-}
-    .xxl\\:max-w_2\\/12 {
-      max-width: 16.666667%;
-}
-    .xxl\\:max-w_3\\/12 {
-      max-width: 25%;
-}
-    .xxl\\:max-w_4\\/12 {
-      max-width: 33.333333%;
-}
-    .xxl\\:max-w_5\\/12 {
-      max-width: 41.666667%;
-}
-    .xxl\\:max-w_6\\/12 {
-      max-width: 50%;
-}
-    .xxl\\:max-w_7\\/12 {
-      max-width: 58.333333%;
-}
-    .xxl\\:max-w_8\\/12 {
-      max-width: 66.666667%;
-}
-    .xxl\\:max-w_9\\/12 {
-      max-width: 75%;
-}
-    .xxl\\:max-w_10\\/12 {
-      max-width: 83.333333%;
-}
-    .xxl\\:max-w_11\\/12 {
-      max-width: 91.666667%;
-}
-    .xxl\\:max-w_screen {
-      max-width: 100vw;
 }
     .xxl\\:mt_spacing\\.0 {
       margin-top: var(--spacing-spacing\\.0);
@@ -21429,17 +20432,56 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .xxl\\:w_input\\.16 {
       width: var(--sizes-input\\.16);
 }
-    .xxl\\:w_input\\.25perc {
-      width: var(--sizes-input\\.25perc);
+    .xxl\\:w_input\\.25\\% {
+      width: var(--sizes-input\\.25\\%);
+}
+    .xxl\\:w_input\\.50\\% {
+      width: var(--sizes-input\\.50\\%);
+}
+    .xxl\\:w_input\\.75\\% {
+      width: var(--sizes-input\\.75\\%);
+}
+    .xxl\\:w_input\\.100\\% {
+      width: var(--sizes-input\\.100\\%);
+}
+    .xxl\\:w_input\\.height {
+      width: var(--sizes-input\\.height);
+}
+    .xxl\\:w_1\\/12 {
+      width: 8.333333%;
+}
+    .xxl\\:w_2\\/12 {
+      width: 16.666667%;
+}
+    .xxl\\:w_3\\/12 {
+      width: 25%;
+}
+    .xxl\\:w_4\\/12 {
+      width: 33.333333%;
+}
+    .xxl\\:w_5\\/12 {
+      width: 41.666667%;
+}
+    .xxl\\:w_6\\/12 {
+      width: 50%;
+}
+    .xxl\\:w_7\\/12 {
+      width: 58.333333%;
 }
-    .xxl\\:w_input\\.50perc {
-      width: var(--sizes-input\\.50perc);
+    .xxl\\:w_8\\/12 {
+      width: 66.666667%;
+}
+    .xxl\\:w_9\\/12 {
+      width: 75%;
+}
+    .xxl\\:w_10\\/12 {
+      width: 83.333333%;
 }
-    .xxl\\:w_input\\.75perc {
-      width: var(--sizes-input\\.75perc);
+    .xxl\\:w_11\\/12 {
+      width: 91.666667%;
 }
-    .xxl\\:w_input\\.100perc {
-      width: var(--sizes-input\\.100perc);
+    .xxl\\:w_12\\/12 {
+      width: var(--sizes-12\\/12);
 }
     .xxl\\:w_overlay\\.sm {
       width: var(--sizes-overlay\\.sm);
@@ -21455,9 +20497,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
     .xxl\\:w_chevron\\.table {
       width: var(--sizes-chevron\\.table);
-}
-    .xxl\\:w_input\\.height {
-      width: var(--sizes-input\\.height);
 }
     .xxl\\:w_progress\\.height {
       width: var(--sizes-progress\\.height);
@@ -21543,48 +20582,48 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .xxl\\:w_5\\/6 {
       width: 83.333333%;
 }
-    .xxl\\:w_1\\/12 {
-      width: 8.333333%;
-}
-    .xxl\\:w_2\\/12 {
-      width: 16.666667%;
-}
-    .xxl\\:w_3\\/12 {
-      width: 25%;
-}
-    .xxl\\:w_4\\/12 {
-      width: 33.333333%;
+    .xxl\\:w_screen {
+      width: 100vw;
 }
-    .xxl\\:w_5\\/12 {
-      width: 41.666667%;
 }
-    .xxl\\:w_6\\/12 {
-      width: 50%;
+
+  @media screen and (max-width: 93.7475rem) {
+    .show_xxl {
+      display: none;
 }
-    .xxl\\:w_7\\/12 {
-      width: 58.333333%;
 }
-    .xxl\\:w_8\\/12 {
-      width: 66.666667%;
+
+  @media screen and (max-width: 74.9975rem) {
+    .show_xl {
+      display: none;
 }
-    .xxl\\:w_9\\/12 {
-      width: 75%;
 }
-    .xxl\\:w_10\\/12 {
-      width: 83.333333%;
+
+  @media screen and (max-width: 63.9975rem) {
+    .show_lg {
+      display: none;
 }
-    .xxl\\:w_11\\/12 {
-      width: 91.666667%;
 }
-    .xxl\\:w_screen {
-      width: 100vw;
+
+  @media screen and (max-width: 47.9975rem) {
+    .show_md {
+      display: none;
 }
 }
 
   @media screen and (max-width: 35.9975rem) {
+    .show_sm {
+      display: none;
+}
     .smDown\\:w_\\[100\\%\\] {
       width: 100%;
 }
+}
+
+  @media screen and (max-width: -0.0025rem) {
+    .show_xs {
+      display: none;
+}
 }
 
   @media (prefers-contrast: more) {
@@ -21616,16 +20655,16 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       visibility: visible;
 }
 }
-}`, E = b(
+}`, F = b(
   ({
     children: v,
-    fontFaceUrls: e = [...w],
-    noIcons: o,
+    fontFaceUrls: o = [...w],
+    noIcons: e,
     stylesheetContents: p = {},
-    stylesheetUrls: t = [],
+    stylesheetUrls: l = [],
     ...x
   }, u) => {
-    const i = _(null), l = _(null), [a, m] = y(null);
+    const i = _(null), t = _(null), [a, m] = y(null);
     return g(() => {
       if (i.current)
         if (i.current.shadowRoot)
@@ -21634,27 +20673,27 @@ const z = `@layer reset, base, tokens, recipes, utilities;
           const n = i.current.attachShadow({ mode: "open" }), r = document.createElement("style"), s = document.querySelector("meta[name='csp-nonce']")?.getAttribute("content");
           s && r.setAttribute("nonce", s), r.textContent = z, n.appendChild(r);
           const c = document.createElement("div");
-          n.appendChild(c), l.current = c, m(n);
+          n.appendChild(c), t.current = c, m(n);
         }
     }, []), g(() => {
-      e.forEach((n) => {
+      o.forEach((n) => {
         if (document.head.querySelector(`link[href="${n}"]`))
           return;
         const r = document.createElement("link");
         r.href = n, r.rel = "stylesheet", document.head.appendChild(r);
       });
-    }, [e]), g(() => {
-      if (o || !a) return;
+    }, [o]), g(() => {
+      if (e || !a) return;
       const n = document.createElement("link");
       n.href = "https://cdn.iress.com/icons/5.15.4/css/combined.min.css", n.rel = "stylesheet", a.appendChild(n), document.head.querySelector(`link[href="${n.href}"]`) || document.head.appendChild(n.cloneNode());
-    }, [o, a]), g(() => {
-      a && t.forEach((n) => {
+    }, [e, a]), g(() => {
+      a && l.forEach((n) => {
         if (a.querySelector(`link[href="${n}"]`))
           return;
         const r = document.createElement("link");
         r.href = n, r.rel = "stylesheet", a.appendChild(r);
       });
-    }, [a, t]), g(() => {
+    }, [a, l]), g(() => {
       a && Object.entries(p).forEach(([n, r]) => {
         if (a.querySelector(`style[id="${n}"]`))
           return;
@@ -21664,9 +20703,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     }, [a, p]), h(
       u,
       () => a ?? null
-    ), /* @__PURE__ */ d("div", { ref: i, ...x, children: /* @__PURE__ */ d(k, { container: l, noDefaultFont: !0, noIcons: !0, children: a && f(v, a) }) });
+    ), /* @__PURE__ */ d("div", { ref: i, ...x, children: /* @__PURE__ */ d(k, { container: t, noDefaultFont: !0, noIcons: !0, children: a && f(v, a) }) });
   }
 );
+F.displayName = "IressShadow";
 export {
-  E as IressShadow
+  F as IressShadow
 };