@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/components/charts.scss

@@ -79,7 +79,7 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   --index-menu: 200;
   --index-overlay: 1000;
   --key-label-width: 100%;
-  --label-size: #{rem(12)};
+  --label-size: 0.75rem;
   --pie-size: calc(50% - 1.4rem);
   --line-thickness: 1px;
   --yaxis-width: auto;
@@ -102,7 +102,7 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
 
   &:has(.chart__options) {
     position: relative;
-    padding-top: rem(24);
+    padding-top: 1.5rem;
   }
 
   > * {
@@ -136,7 +136,7 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
       --bar-gap: 0;
     }
   }
-  @container (max-width: 63em) {
+  @container (max-width: 62em) {
     :has(tr:nth-child(10)) {
       --bar-gap: 0;
     }
@@ -154,7 +154,7 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
 
   @container (min-width: 62em) {
     .chart__wrapper {
-      --label-size: #{rem(14)};
+      --label-size: 0.875rem; /* 14/16 */
       --pie-size: calc(25% - 1.5rem);
       --line-thickness: 0.5px;
     }
@@ -176,7 +176,7 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
 .chart__source {
   border-top: 1px solid black;
   position: relative;
-  padding-top: rem(4);
+  padding-top: 0.25rem;
 }
 // #endregion
 
@@ -234,12 +234,12 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
   > span:first-child {
     text-align: right;
     display: block;
-    height: rem(24);
+    height: 1.5rem;
 
     &:before {
       content: '';
-      height: rem(16);
-      width: rem(16);
+      height: 1rem;
+      width: 1rem;
       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3cpath d='M31 19.3v-6.5l-3.9-.5c-.1-.4-.3-.9-.5-1.5l2.4-3-4.7-4.7-3.1 2.4c-.4-.2-.9-.4-1.5-.6L19.2 1h-6.5l-.5 3.9c-.6.2-1.1.4-1.5.6l-3-2.4L3 7.7l2.4 3c-.2.5-.4 1.1-.5 1.5l-3.9.5v6.5l3.9.5c.2.5.3 1 .6 1.5l-2.4 3 4.7 4.7 3-2.3c.4.2 1 .5 1.5.6l.5 3.8h6.5l.5-3.8c.5-.2 1.1-.4 1.5-.6l3 2.3 4.7-4.7-2.4-3 .6-1.5 3.8-.4zm-2.1-1.9-3.4.5c-.3 1.5-.8 2.7-1.6 3.6l2.1 2.6-1.9 2-2.6-2c-1 .7-2.5 1.3-3.7 1.5l-.5 3.3h-2.6l-.5-3.3c-1.2-.2-2.7-.8-3.7-1.5l-2.6 2-1.9-2 2.1-2.6c-.8-.9-1.2-2.1-1.6-3.6l-3.4-.5v-2.7l3.5-.5c.2-1.1.6-2.3 1.4-3.7L6 7.9l1.9-2L10.6 8c.8-.7 1.7-1.1 3.6-1.6l.5-3.4h2.6l.5 3.4c1.9.5 2.8.9 3.6 1.6l2.7-2L26 8l-2 2.5c.8 1.4 1.2 2.6 1.4 3.7l3.5.5v2.7zM16 20.8c-2.7 0-4.7-2-4.7-4.8 0-2.7 2-4.7 4.7-4.7s4.7 2 4.7 4.7-2 4.8-4.7 4.8zm0 2.2c3.9 0 6.9-3 6.9-7 0-3.9-3-6.9-6.9-6.9s-6.9 3-6.9 6.9c0 4 3 7 6.9 7z'%3e%3c/path%3e%3c/svg%3e");
       background-size: 100% 100%;
       display: inline-block;

package/assets/sass/components/collapsible-side.scss

@@ -1,14 +1,13 @@
 @use '../_func' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/container.scss' as *;
-@use '../elements/type.scss' as *;
+@use '../elements/buttons' as *;
+@use '../elements/container' as *;
+@use '../elements/type' as *;
+
 
-$darkMode: 'true' !default;
 
 // Host
 :host {
-  --colour-border: #e9e9e9;
-  --side-link-hover: var(--colour-canvas-2);
+  --side-link-hover: light-dark(#eeeeee,var(--colour-canvas-2));
   grid-column: full-width;
 
   display: block;
@@ -19,11 +18,8 @@ $darkMode: 'true' !default;
   overflow: hidden;
   position: relative;
 
-  @include light-mode($darkMode) {
-    --side-link-hover: #eeeeee;
-  }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     max-height: calc(100vh - var(--nav-height));
     overflow: auto;
   }
@@ -36,7 +32,7 @@ $darkMode: 'true' !default;
   padding-bottom: 0 !important;
   padding-left: 0 !important;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     padding-left: 5.25rem !important;
   }
 
@@ -58,7 +54,7 @@ $darkMode: 'true' !default;
   min-height: calc(100vh - var(--nav-height));
   width: rem(70);
   height: calc(100% - var(--nav-height));
-  padding: 0 rem(40) 0 0;
+  padding: 0 2.5rem 0 0;
   transition: width 1s;
 
   &:before {
@@ -66,17 +62,17 @@ $darkMode: 'true' !default;
     position: absolute;
     z-index: 1;
     top: 0;
-    right: rem(40);
+    right: 2.5rem;
     height: 100%;
     border-right: 2px solid var(--colour-border);
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     left: 0;
     width: rem(80);
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     left: rem(84);
     margin-left: #{rem(-84)};
     position: fixed;
@@ -95,14 +91,13 @@ $darkMode: 'true' !default;
   .btn {
     display: var(--btn-display, block);
     position: absolute;
-    top: rem(32);
-    right: rem(40);
+    top: 2rem;
+    right: 2.5rem;
     margin-bottom: 0;
     margin-right: rem(-20);
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
-    color: var(--colour-primary-theme);
     transition: opacity 0.2s;
 
     &[aria-expanded] {
@@ -111,7 +106,7 @@ $darkMode: 'true' !default;
         content: '\f053' !important;
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         opacity: 0;
       }
     }
@@ -121,18 +116,18 @@ $darkMode: 'true' !default;
     border: 2px solid var(--colour-border);
     color: var(--colour-primary);
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       opacity: 1;
     }
   }
 
   &:is(.open) {
-    width: calc(100% - var(--container-padding-x) + rem(40));
+    width: calc(100% - var(--container-padding-x) + 2.5rem);
 
-    @include media-breakpoint-up(sm) {
+    @media screen and (min-width: 36em) {
       width: rem(422);
     }
-    @include media-breakpoint-up(md) {
+    @media screen and (min-width: 62em) {
       width: rem(344);
     }
   }
@@ -141,8 +136,8 @@ $darkMode: 'true' !default;
   .side-menu-content {
     position: absolute;
     top: 0;
-    right: rem(40);
-    padding: rem(32) rem(40) rem(40) 0;
+    right: 2.5rem;
+    padding: 2rem 2.5rem 2.5rem 0;
     width: rem(351);
     background-color: var(--colour-canvas);
     opacity: 0;
@@ -153,21 +148,21 @@ $darkMode: 'true' !default;
     scrollbar-width: thin;
 
     .h3 {
-      padding-left: rem(24);
+      padding-left: 1.5rem;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       .h3 {
-        padding-left: rem(40);
+        padding-left: 2.5rem;
       }
 
       width: rem(382);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       width: rem(304);
 
       .h3 {
-        padding-left: var(--container-padding-x-md);
+        padding-left: var(--container-padding-x);
       }
     }
   }
@@ -180,7 +175,7 @@ $darkMode: 'true' !default;
     opacity: 1;
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     &.hover .side-menu-content {
       opacity: 1;
     }
@@ -194,15 +189,15 @@ $darkMode: 'true' !default;
 .main-content {
   position: relative;
   z-index: 10;
-  padding-top: rem(24);
+  padding-top: 1.5rem;
   padding-left: rem(60);
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     padding-left: rem(80);
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
-    padding-top: rem(40) !important;
+  @media screen and (min-width: 62em) {
+    padding-top: 2.5rem !important;
     padding-left: 0;
   }
 
@@ -210,9 +205,9 @@ $darkMode: 'true' !default;
     padding-top: 0.75rem;
 
     border-bottom: 2px solid var(--colour-border);
-    margin-bottom: rem(40) !important;
+    margin-bottom: 2.5rem !important;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       display: none;
     }
   }
@@ -220,12 +215,12 @@ $darkMode: 'true' !default;
 
 ::slotted(.main-content__title) {
   border-bottom: 2px solid var(--colour-border);
-  margin-bottom: rem(40) !important;
+  margin-bottom: 2.5rem !important;
   max-width: 100% !important;
   display: block;
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   ::slotted(.main-content__title) {
     display: none;
   }
@@ -234,7 +229,7 @@ $darkMode: 'true' !default;
 // #endregion
 
 // #region Desktop open state
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   .container:has(.side-menu.open) {
     padding-left: 2rem !important;
     margin-left: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
@@ -244,7 +239,7 @@ $darkMode: 'true' !default;
 }
 // #endregion
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   :host([open-always]) {
     --btn-display: none;
   }
@@ -254,7 +249,7 @@ $darkMode: 'true' !default;
   width: 100%;
   max-width: 100%;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     max-width: min(var(--container-max-width), 100% - 19rem);
   }
 }
@@ -263,12 +258,12 @@ $darkMode: 'true' !default;
   .container {
     padding-right: 0 !important;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       padding-right: 5.25rem !important;
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     .container:has(.side-menu.open) {
       margin-right: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
       margin-left: 0;
@@ -278,9 +273,9 @@ $darkMode: 'true' !default;
   .side-menu {
     left: auto;
     right: -2.5rem;
-    padding: 0 0 0 rem(40);
+    padding: 0 0 0 2.5rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       right: 0;
     }
 
@@ -301,11 +296,11 @@ $darkMode: 'true' !default;
     padding-left: var(--container-padding-x);
     padding-right: rem(60);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       padding-right: rem(80);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       padding-right: 0;
     }
   }

package/assets/sass/components/darkmode.component.scss

@@ -1,11 +1,9 @@
 @use '../_func.scss' as *;
 
-$icon-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M296 552L296 496C296 482.7 306.7 472 320 472C333.3 472 344 482.7 344 496L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552zM296 144L296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 144C344 157.3 333.3 168 320 168C306.7 168 296 157.3 296 144zM139 139C148.4 129.6 163.6 129.6 172.9 139L212.5 178.6C221.9 188 221.9 203.2 212.5 212.5C203.1 221.8 187.9 221.9 178.6 212.5L139 172.9C129.6 163.5 129.6 148.3 139 139zM427.5 427.5C436.9 418.1 452.1 418.1 461.4 427.5L501 467.1C510.4 476.5 510.4 491.7 501 501C491.6 510.3 476.4 510.4 467.1 501L427.5 461.4C418.1 452 418.1 436.8 427.5 427.5zM64 320C64 306.7 74.7 296 88 296L144 296C157.3 296 168 306.7 168 320C168 333.3 157.3 344 144 344L88 344C74.7 344 64 333.3 64 320zM472 320C472 306.7 482.7 296 496 296L552 296C565.3 296 576 306.7 576 320C576 333.3 565.3 344 552 344L496 344C482.7 344 472 333.3 472 320zM139 501C129.6 491.6 129.6 476.4 139 467.1L178.6 427.5C188 418.1 203.2 418.1 212.5 427.5C221.8 436.9 221.9 452.1 212.5 461.4L172.9 501C163.5 510.4 148.3 510.4 139 501zM427.5 212.5C418.1 203.1 418.1 187.9 427.5 178.6L467.1 139C476.5 129.6 491.7 129.6 501 139C510.3 148.4 510.4 163.6 501 172.9L461.4 212.5C452 221.9 436.8 221.9 427.5 212.5zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM208 320C208 258.1 258.1 208 320 208C381.9 208 432 258.1 432 320C432 381.9 381.9 432 320 432C258.1 432 208 381.9 208 320z'/></svg>");
-$icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M503.8 153.8C504.8 157.4 508.2 160 512 160C515.8 160 519.1 157.5 520.2 153.8L531.2 115.2L569.8 104.2C573.4 103.2 576 99.8 576 96C576 92.2 573.5 88.9 569.8 87.8L531.2 76.8L520.2 38.2C519.2 34.6 515.8 32 512 32C508.2 32 504.9 34.5 503.8 38.2L492.8 76.8L454.2 87.8C450.6 88.8 448 92.2 448 96C448 99.8 450.5 103.1 454.2 104.2L492.8 115.2L503.8 153.8zM288 128C164.3 128 64 228.3 64 352C64 475.7 164.3 576 288 576C348.2 576 402.9 552.2 443.1 513.6C449.5 507.5 451.3 497.9 447.7 489.8C444.1 481.7 435.7 476.8 426.9 477.5C422.6 477.8 418.3 478 414 478C325.1 478 253 405.9 253 317C253 253.9 289.3 199.2 342.3 172.8C350.2 168.8 354.9 160.3 353.8 151.5C352.7 142.7 346.2 135.5 337.6 133.5C321.6 129.9 305 128 288 128zM419.2 332.8L435.8 390.8C437.4 396.3 442.4 400 448 400C453.6 400 458.7 396.2 460.2 390.8L476.8 332.8L534.8 316.2C540.3 314.6 544 309.6 544 304C544 298.4 540.2 293.3 534.8 291.8L476.8 275.2L460.2 217.2C458.6 211.7 453.6 208 448 208C442.4 208 437.3 211.8 435.8 217.2L419.2 275.2L361.2 291.8C355.7 293.4 352 298.4 352 304C352 309.6 355.8 314.7 361.2 316.2L419.2 332.8z'/></svg>");
 
 ::slotted(.toggle):after {
-  --icon: #{escape-svg($icon-light)};
-  background: var(--colour-primary-theme);
+  --icon: var(--icon-light);
+  background: red;
   mask-image: var(--icon);
   mask-size: 100%;
   mask-repeat: no-repeat;
@@ -18,5 +16,5 @@ $icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 }
 
 ::slotted(.toggle.dark-theme):after {
-  --icon: #{escape-svg($icon-dark)};
+  --icon: var(--icon-dark);
 }

package/assets/sass/components/doughnutchart.component.scss

@@ -6,9 +6,9 @@
   display: block;
 }
 
-@for $i from 1 to 11 {
+@for $i from 1 through 10 {
   .chart__wrapper .doughnut path:nth-child(11n - #{11 - $i}) {
-    fill: var(#{'--chart-colour-' + $i + '-set'});
+    fill: var(#{'--chart-colour-' + $i});
   }
 }
 
@@ -23,7 +23,7 @@
   margin-bottom: 0;
 
   .btn-action {
-    font-size: rem(12);
+    font-size: 0.75rem;
     margin-right: rem(-6) !important;
     border-color: transparent !important;
   }
@@ -120,7 +120,7 @@
     display: inline-block;
     max-width: var(--doughnut-size);
 
-    @container (min-width: #{em($device-xs-width,16)}) {
+    @container (min-width: 36em) {
       width: var(--doughnut-size);
     }
 

package/assets/sass/components/fileupload.scss

@@ -3,8 +3,7 @@
 @use '../elements/forms.scss' as *;
 @use '../elements/buttons.scss' as *;
 
-
-@include display();
+@use '../utilities/display' as *;
 
 hr {
     --border-style: solid;
@@ -22,7 +21,7 @@ hr {
 
 .file-upload {
   max-width: rem(400) !important;
-  padding-bottom: rem(16);
+  padding-bottom: 1rem;
 
   .drop-area > input {
     display: none;
@@ -30,19 +29,19 @@ hr {
 
   .file-upload__title {
     margin-top: 0; // 1
-    margin-bottom: $headings-margin-bottom;
-    font-family: $headings-font-family;
-    font-style: $headings-font-style;
-    font-weight: $headings-font-weight;
-    line-height: $headings-line-height;
-    color: $headings-color;
+    margin-bottom: 0;
+    font-family: var(--font-heading);
+    font-style: normal;
+    font-weight: var(--heading-weight);
+    line-height: 2rem;
+    color: var(--colour-heading);
     clear: both;
     display: block;
     padding-bottom: 2rem;
 
-    font-size: map.get($heading-sizes, 'h4_fs');
-    line-height: map.get($heading-sizes, 'h4_lh');
-    padding-bottom: map.get($heading-sizes, 'h4_pb');
+    font-size: var(--h4-fs);
+    line-height: var(--h4-lh);
+    padding-bottom: var(--h4-pb);
     max-width: var(--content-max-width);
   }
 
@@ -55,13 +54,13 @@ hr {
   span {
     display: block;
     width: 100%;
-    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
-    font-size: var(--input-fs, #{rem(16)});
-    line-height: var(--input-lh, #{rem(20)});
+    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
     border: 2px solid var(--colour-primary-theme);
     appearance: none; // Fix appearance for date inputs in Safari
-    border-radius: rem(8);
-    margin-bottom: rem(16);
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
     color: var(--colour-primary);
     border-color: #d8d8d8;
     background: #d8d8d8;
@@ -85,13 +84,13 @@ hr {
     button {
       position: absolute;
       top: calc(50% - #{rem(9)});
-      right: rem(14);
+      right: 0.875rem; /* 14/16 */
       z-index: var(--index-floating);
       text-indent: 300%;
       overflow: hidden;
       border: none;
-      height: rem(18);
-      width: rem(18);
+      height: 1.125rem; /* 18/16 */
+      width: 1.125rem; /* 18/16 */
       background: transparent;
       color: inherit;
 
@@ -101,8 +100,8 @@ hr {
         left: 0;
         position: absolute;
         display: block;
-        height: rem(18);
-        width: rem(18);
+        height: 1.125rem; /* 18/16 */
+        width: 1.125rem; /* 18/16 */
         z-index: var(--index-focus);
         background: currentColor;
         mask-image: var(--icon-close);
@@ -131,7 +130,7 @@ hr {
     border: 2px dashed var(--colour-primary-theme);
     color: transparent;
     position: relative;
-    padding: rem(24) rem(32) rem(24) rem(32);
+    padding: 1.5rem 2rem 1.5rem 2rem;
     user-select: none;
     max-width: 100%;
     min-width: 100%;
@@ -149,7 +148,7 @@ hr {
   .drop-area::before {
     content: 'Drag and drop files here or click to upload';
     position: absolute;
-    inset: rem(24) rem(32) rem(24) rem(32);
+    inset: 1.5rem 2rem 1.5rem 2rem;
     z-index: 1;
     pointer-events: none;
   }

package/assets/sass/components/filter-card.component.scss

@@ -2,9 +2,9 @@
 @use 'card.module.scss' as *;
 
 :host {
-  --top-padding: #{rem(24)};
+  --top-padding: 1.5rem;
   --right-padding: 1rem;
-  --bottom-padding: #{rem(24)};
+  --bottom-padding: 1.5rem;
   --left-padding: 1rem;
 
   &:has(.card__total) .card__body {
@@ -18,13 +18,13 @@
   }
 
   &.card--has-icon {
-    --bottom-padding: #{rem(16)};
+    --bottom-padding: 1rem;
     border: none;
   }
 
   .icon {
-    font-size: rem(18) !important;
-    height: rem(18) !important;
+    font-size: 1.125rem !important;
+    height: 1.125rem !important;
     margin: 0 0 0.5rem 0 !important;
     font-weight: 400 !important;
     display: block !important;
@@ -40,7 +40,7 @@
   outline: none;
 
   :is(.card__body, .card__footer) {
-    background: #eeeeee;
+    background: light-dark(#eeeeee, var(--colour-canvas));
   }
 }
 
@@ -59,7 +59,7 @@
 
 ::slotted(i) {
   display: block !important;
-  font-size: rem(18) !important;
+  font-size: 1.125rem !important;
   margin: 0 0 0.5rem 0 !important;
 }
 
@@ -73,10 +73,10 @@
     position: absolute;
     top: 1rem;
     right: 1rem;
-    font-size: rem(16);
+    font-size: 1rem;
     line-height: 1;
-    height: rem(16);
-    width: rem(16);
+    height: 1rem;
+    width: 1rem;
     display: inline-block;
     font-weight: normal;
     color: var(--colour, var(--colour-primary));

package/assets/sass/components/header.scss

@@ -11,7 +11,7 @@
 
 :host {
   padding-top: 0 !important;
-  margin-bottom: rem(32);
+  margin-bottom: 2rem;
   background-color: transparent !important;
   display: block !important;
 }
@@ -28,7 +28,7 @@
   position: relative;
   height: auto;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     padding-top: rem(84);
   }
 
@@ -78,10 +78,10 @@
 
 // Web component CSS
 ::slotted(.breadcrumb) {
-  margin-top: rem(24) !important;
+  margin-top: 1.5rem !important;
   margin-bottom: -0.5rem !important;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     position: absolute !important;
     top: 0 !important;
     left: 5.25rem !important;

package/assets/sass/components/inline-edit.preload.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   iam-inline-edit {
     .optional-text {
       display: none;
@@ -76,7 +76,7 @@ $darkMode: 'true' !default;
       padding-inline: 1rem;
       opacity: 0;
       white-space: nowrap;
-      font-size: rem(16);
+      font-size: 1rem;
       line-height: rem(26);
       pointer-events: none;
       color: var(--colour-heading);

package/assets/sass/components/inline-edit.scss

@@ -1,7 +1,7 @@
 @use '../_func' as *;
 @use '../elements/buttons--action.scss' as *;
 
-@include display();
+@use '../utilities/display' as *;
 
 *,
 *::before,

package/assets/sass/components/input-range.component.scss

@@ -13,7 +13,7 @@
 
   flex-direction: column;
 
-  @include media-breakpoint-up(sm) {
+  @media screen and (min-width: 36em) {
     flex-direction: row;
     align-items: center;
   }
@@ -33,7 +33,7 @@
 ::slotted(:last-child) {
   order: 3;
 }
-@include media-breakpoint-up(sm) {
+@media screen and (min-width: 36em) {
 
   .wrapper:before {
     content: "";

package/assets/sass/components/input.component.scss

@@ -82,9 +82,8 @@
   max-height: 100%!important;
   min-height: 100%!important;
 
-  $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
-
-  background: escape-svg($form-select-indicator-new)!important;
+  
+  background: var(--icon-select)!important;
   background-position: center right!important;
   background-size: 1.25rem!important;
   background-repeat: no-repeat!important;

package/assets/sass/components/marketing.component.scss

@@ -58,7 +58,7 @@ img {
   mix-blend-mode: multiply;
 }
 
-@include slotted('*', $isComponent) {
+::slotted {
   position: relative;
   z-index: 2;
   text-align: center;