@linzjs/lui 18.11.2 → 19.0.0

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+# [19.0.0](https://github.com/linz/lui/compare/v18.11.2...v19.0.0) (2023-09-14)
+
 ## [18.11.2](https://github.com/linz/lui/compare/v18.11.1...v18.11.2) (2023-09-13)
 
 

package/dist/index.js

@@ -25517,7 +25517,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
+var css_248z$d = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
 styleInject(css_248z$d);
 
 /**
@@ -27784,7 +27784,7 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-var css_248z$c = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
+var css_248z$c = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px; /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
 styleInject(css_248z$c);
 
 var GutterComponent = function (props) {
@@ -67765,7 +67765,7 @@ var LuiAccordicardStatic = function (props) {
             React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
 };
 
-var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-accordion {\n  padding: 8px;\n  display: flex;\n  border-radius: 5px;\n  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;\n}\n.lui-accordion .chevron {\n  transition: all 0.3s ease-in-out;\n  transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n  transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n  padding: 4px;\n}\n.lui-accordion h4 {\n  padding: 4px;\n}\n.lui-accordion > summary {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lui-accordion > summary h4 {\n  margin-top: 0;\n  display: inline-block;\n}";
+var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-accordion {\n  padding: 8px;\n  display: flex;\n  border-radius: 5px;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n  transition: all 0.3s ease-in-out;\n  transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n  transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n  padding: 4px;\n}\n.lui-accordion h4 {\n  padding: 4px;\n}\n.lui-accordion > summary {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lui-accordion > summary h4 {\n  margin-top: 0;\n  display: inline-block;\n}";
 styleInject(css_248z$6);
 
 var LuiAccordion = function (props) {
@@ -71440,7 +71440,7 @@ var LuiProgressBar = function (_a) {
         React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
 };
 
-var css_248z$1 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Toolbar {\n  position: absolute;\n  align-items: center;\n  align-self: center;\n  background: #ffffff;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  margin: 0 0.75rem;\n  padding: 0;\n  width: fit-content;\n  z-index: 1000;\n  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
+var css_248z$1 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Toolbar {\n  position: absolute;\n  align-items: center;\n  align-self: center;\n  background: #ffffff;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  margin: 0 0.75rem;\n  padding: 0;\n  width: fit-content;\n  z-index: 1000;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
 styleInject(css_248z$1);
 
 exports.ToolbarDirection = void 0;

package/dist/lui.css

@@ -290,14 +290,12 @@ html {
 }
 
 ::selection {
-  background: #c7e9f3;
-  /* WebKit/Blink Browsers */
+  background: #c7e9f3; /* WebKit/Blink Browsers */
   color: #004b50;
 }
 
 ::-moz-selection {
-  background: #c7e9f3;
-  /* Gecko Browsers */
+  background: #c7e9f3; /* Gecko Browsers */
   color: #004b50;
 }
 
@@ -454,18 +452,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h1,
-.LuiBeta-fonts220222 .h1 {
-    font-size: calc(
-          34px + 10 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h1 {
+    font-size: calc(34px + 10 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h1,
-.LuiBeta-fonts220222 .h1 {
+  .LuiBeta-fonts220222 .h1 {
     font-size: 44px;
   }
 }
@@ -475,18 +468,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h1,
-.LuiBeta-fonts220222 .h1 {
-    line-height: calc(
-          44px + 8 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h1 {
+    line-height: calc(44px + 8 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h1,
-.LuiBeta-fonts220222 .h1 {
+  .LuiBeta-fonts220222 .h1 {
     line-height: 52px;
   }
 }
@@ -507,18 +495,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h2,
-.LuiBeta-fonts220222 .h2 {
-    font-size: calc(
-          28px + 4 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h2 {
+    font-size: calc(28px + 4 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h2,
-.LuiBeta-fonts220222 .h2 {
+  .LuiBeta-fonts220222 .h2 {
     font-size: 32px;
   }
 }
@@ -528,18 +511,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h2,
-.LuiBeta-fonts220222 .h2 {
-    line-height: calc(
-          36px + 4 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h2 {
+    line-height: calc(36px + 4 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h2,
-.LuiBeta-fonts220222 .h2 {
+  .LuiBeta-fonts220222 .h2 {
     line-height: 40px;
   }
 }
@@ -561,18 +539,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h3,
-.LuiBeta-fonts220222 .h3 {
-    font-size: calc(
-          24px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h3 {
+    font-size: calc(24px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h3,
-.LuiBeta-fonts220222 .h3 {
+  .LuiBeta-fonts220222 .h3 {
     font-size: 24px;
   }
 }
@@ -582,18 +555,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h3,
-.LuiBeta-fonts220222 .h3 {
-    line-height: calc(
-          32px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h3 {
+    line-height: calc(32px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h3,
-.LuiBeta-fonts220222 .h3 {
+  .LuiBeta-fonts220222 .h3 {
     line-height: 32px;
   }
 }
@@ -615,18 +583,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h4,
-.LuiBeta-fonts220222 .h4 {
-    font-size: calc(
-          20px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h4 {
+    font-size: calc(20px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h4,
-.LuiBeta-fonts220222 .h4 {
+  .LuiBeta-fonts220222 .h4 {
     font-size: 20px;
   }
 }
@@ -636,18 +599,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h4,
-.LuiBeta-fonts220222 .h4 {
-    line-height: calc(
-          24px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h4 {
+    line-height: calc(24px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h4,
-.LuiBeta-fonts220222 .h4 {
+  .LuiBeta-fonts220222 .h4 {
     line-height: 24px;
   }
 }
@@ -667,18 +625,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h5,
-.LuiBeta-fonts220222 .h5 {
-    font-size: calc(
-          16px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h5 {
+    font-size: calc(16px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h5,
-.LuiBeta-fonts220222 .h5 {
+  .LuiBeta-fonts220222 .h5 {
     font-size: 16px;
   }
 }
@@ -688,18 +641,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h5,
-.LuiBeta-fonts220222 .h5 {
-    line-height: calc(
-          24px + -2 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h5 {
+    line-height: calc(24px + -2 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h5,
-.LuiBeta-fonts220222 .h5 {
+  .LuiBeta-fonts220222 .h5 {
     line-height: 22px;
   }
 }
@@ -716,18 +664,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h6,
-.LuiBeta-fonts220222 .h6 {
-    font-size: calc(
-          14px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h6 {
+    font-size: calc(14px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h6,
-.LuiBeta-fonts220222 .h6 {
+  .LuiBeta-fonts220222 .h6 {
     font-size: 14px;
   }
 }
@@ -737,18 +680,13 @@ p.lui-small {
 }
 @media screen and (min-width: 480px) {
   .LuiBeta-fonts220222 h6,
-.LuiBeta-fonts220222 .h6 {
-    line-height: calc(
-          18px + 0 *
-            (
-              (100vw - 480px) / 800
-            )
-        );
+  .LuiBeta-fonts220222 .h6 {
+    line-height: calc(18px + 0 * (100vw - 480px) / 800);
   }
 }
 @media screen and (min-width: 1280px) {
   .LuiBeta-fonts220222 h6,
-.LuiBeta-fonts220222 .h6 {
+  .LuiBeta-fonts220222 .h6 {
     line-height: 18px;
   }
 }
@@ -799,21 +737,21 @@ p.lui-small {
 
 .Container {
   padding: 0 2.5%;
-  max-width: calc(480px + (2.5% * 2));
+  max-width: calc(480px + 2.5% * 2);
 }
 @media screen and (min-width: 480px) {
   .Container {
-    max-width: calc(768px + (2.5% * 2));
+    max-width: calc(768px + 2.5% * 2);
   }
 }
 @media screen and (min-width: 768px) {
   .Container {
-    max-width: calc(1024px + (2.5% * 2));
+    max-width: calc(1024px + 2.5% * 2);
   }
 }
 @media screen and (min-width: 1024px) {
   .Container {
-    max-width: calc(1280px + (2.5% * 2));
+    max-width: calc(1280px + 2.5% * 2);
   }
 }
 
@@ -3140,7 +3078,7 @@ table {
 table caption {
   padding: 0.5rem 0.5rem 0.5rem 0;
   text-align: left;
-  font-size: rem(14px);
+  font-size: toRem(14px);
 }
 table caption.lui-table-caption-bottom {
   caption-side: bottom;
@@ -3554,7 +3492,7 @@ table .lui-checkbox-container input {
 }
 @media screen and (min-width: 768px) {
   .lui-footer .lui-footer-nz-govt-logo,
-.lui-footer .lui-footer-copyright {
+  .lui-footer .lui-footer-copyright {
     text-align: right;
   }
 }
@@ -4035,7 +3973,7 @@ table .lui-checkbox-container input {
   position: absolute;
   top: 60px;
   z-index: 10;
-  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);
   border-radius: 3px;
 }
 .LuiHeaderV2-menu-item-button .menu-tooltip.dark {
@@ -4287,7 +4225,7 @@ body.LuiHeaderMenuV2-drawer-open {
   text-align: left;
   background-color: white;
   color: #2a292c;
-  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);
   border-radius: 3px;
   height: auto;
   z-index: 900;
@@ -4387,7 +4325,7 @@ body.LuiHeaderMenuV2-drawer-open {
   text-align: left;
   background-color: white;
   color: #2a292c;
-  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);
   border-radius: 3px;
   position: absolute;
   z-index: 900;
@@ -4989,8 +4927,8 @@ body.LuiHeaderMenuV2-drawer-open {
 
 .lui-large-feature-notification {
   width: 100%;
-  background: #00a1a1;
-  background: linear-gradient(62deg, #00a1a1 0%, #bfedf6 100%);
+  background: rgb(0, 161, 161);
+  background: linear-gradient(62deg, rgb(0, 161, 161) 0%, rgb(191, 237, 246) 100%);
   position: relative;
 }
 @media screen and (min-width: 480px) {
@@ -5013,13 +4951,13 @@ body.LuiHeaderMenuV2-drawer-open {
 .lui-feature-header h1 {
   color: #fff;
   margin: 0;
-  text-shadow: 1.5px 1.5px 1px #004b50;
+  text-shadow: 1.5px 1.5px 1px rgb(0, 75, 80);
   font-size: 1.5rem;
   line-height: 1.5rem;
 }
 @media screen and (min-width: 768px) {
   .lui-feature-header h1 {
-    text-shadow: 1px 1px 1px #004b50;
+    text-shadow: 1px 1px 1px rgb(0, 75, 80);
     font-size: 2rem;
     line-height: 2rem;
   }
@@ -5219,7 +5157,7 @@ body.LuiHeaderMenuV2-drawer-open {
   line-height: 1.3;
   text-align: right;
   padding-right: 32px;
-  border-right: 1px solid #00a599;
+  border-right: 1px solid rgb(0, 165, 153);
 }
 .LOLFirmSwitcherMenu-header span:first-child {
   font-family: "Open Sans", system-ui, sans-serif;
@@ -5656,12 +5594,7 @@ body.LuiHeaderMenuV2-drawer-open {
 }
 @media screen and (min-width: 1px) {
   .LuiTextAreaInput textarea {
-    font-size: calc(
-          14px + 2 *
-            (
-              (100vw - 1px) / 1279
-            )
-        );
+    font-size: calc(14px + 2 * (100vw - 1px) / 1279);
   }
 }
 @media screen and (min-width: 1280px) {
@@ -6011,7 +5944,7 @@ body.LuiHeaderMenuV2-drawer-open {
 }
 
 .LuiSearchInput {
-  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);
   background: #ffffff;
   border-radius: 0 3px 3px 0;
   margin: 0;
@@ -6020,7 +5953,7 @@ body.LuiHeaderMenuV2-drawer-open {
   transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
 }
 .LuiSearchInput:active, .LuiSearchInput:focus, .LuiSearchInput:focus-within {
-  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);
   border-radius: 3px;
 }
 
@@ -6201,7 +6134,7 @@ body.LuiHeaderMenuV2-drawer-open {
   align-items: center;
   margin: 0px;
   border-radius: 3px 0 0 3px;
-  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);
   color: #2a292c;
 }
 @media screen and (min-width: 480px) {
@@ -6388,17 +6321,17 @@ body.LuiHeaderMenuV2-drawer-open {
 }
 
 .LuiShadow {
-  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);
   border-radius: 5px;
   padding: 1.5rem;
   margin-top: 0.75rem;
   background-color: #ffffff;
 }
 .LuiShadow--md {
-  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);
 }
 .LuiShadow--lg {
-  box-shadow: 0px 3px 12px 0px #00000026, 0px 12px 18px 4px #00000040;
+  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1490196078), 0px 12px 18px 4px rgba(0, 0, 0, 0.2509803922);
 }
 
 .LuiBadge {
@@ -6483,7 +6416,7 @@ body.LuiHeaderMenuV2-drawer-open {
 }
 .LuiAccordicardStatic:not(.LuiAccordicardStatic--warning) {
   padding: 0.75rem 1rem;
-  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);
 }
 .LuiAccordicardStatic--warning {
   border: 1px solid #EA6A2E;
@@ -6579,7 +6512,7 @@ body.LuiHeaderMenuV2-drawer-open {
 }
 .LuiAccordicard:not(.LuiAccordicard--warning) {
   padding: 0.75rem 1rem;
-  box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);
 }
 .LuiAccordicard--warning {
   border: 1px solid #EA6A2E;
@@ -6759,7 +6692,7 @@ body.LuiHeaderMenuV2-drawer-open {
   bottom: 0;
   background: white;
   transition: width 0.2s ease;
-  box-shadow: 0px 3px 12px 0px #00000026, 0px 12px 18px 4px #00000040;
+  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1490196078), 0px 12px 18px 4px rgba(0, 0, 0, 0.2509803922);
   padding: 0;
   z-index: 3;
   overflow: auto;