@iamproperty/components 7.7.1--beta5 → 7.7.1--beta7

package/assets/sass/elements/lists--tick-list.scss

@@ -22,7 +22,7 @@
         width: 1em;
         height: 1em;
         font-size: 1em;
-        //color: var(--tick-colour, var(--colour-complete));
+        /* color: var(--tick-colour, var(--colour-complete)); */
         font-family: var(--fa-family,'Font Awesome 7 Pro');
         font-weight: var(--icon-weight, 900);
         color: var(--colour-white);

package/assets/sass/elements/modal.scss

@@ -1,23 +1,19 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-
-
-
-
 @layer elements {
-  // #region modal styling
+  /* #region modal styling */
 
-  *:not(.dialog__wrapper) > dialog[open] { // change this selector to be a dialog without a popover attribute
+  *:not(.dialog__wrapper) > dialog[open] { /*  change this selector to be a dialog without a popover attribute */
     
 
     &:has(.mh-lg){
       overflow-y: hidden!important;
     }
     width: 90vw;
-    max-width: 20.25rem; /* 324 */  // col-width*4
+    max-width: 20.25rem; /* 324 */  /*  col-width*4 */
 
-    //height: 90vh;
+    /* height: 90vh; */
     max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
 
@@ -34,7 +30,7 @@
       max-width: 46rem; /* 736 */ 
     }
 
-    // Close button
+    /*  Close button */
     > form:first-child {
       position: static;
     }
@@ -138,9 +134,9 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Transactional
+  /* #region Transactional */
   *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
     text-align: center;
 
@@ -220,9 +216,9 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region youTube video
+  /* #region youTube video */
   *:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
     display: block;
 
@@ -241,9 +237,9 @@
       max-width: 46rem; /* 736 */ 
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region admin panel dialog
+  /* #region admin panel dialog */
   dialog:has(> .admin-panel) {
     .dialog__close {
       margin-top: -0.8rem;
@@ -258,9 +254,9 @@
     }
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region Multi step modal
+  /* #region Multi step modal */
 
   *:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
     padding: 0;
@@ -371,9 +367,9 @@
     }
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region mobile fullwidth view For multi step modal
+  /* #region mobile fullwidth view For multi step modal */
   @media screen and (max-width: 36em) {
     dialog[open]:has(iam-multi-step) {
       min-width: 100%;
@@ -411,5 +407,5 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/popover.scss

@@ -6,7 +6,7 @@
 
 
 @layer elements {
-  // #region popover styling
+  /* #region popover styling */
   .dialog__wrapper {
     position: relative;
     display: inline-block;
@@ -22,12 +22,12 @@
       transition:
         background 0.1s,
         color 0.1s;
-      //color: var(--colour-btn);
+      /* color: var(--colour-btn); */
       border-radius: 1.5rem;
     }
 
     > .btn:first-child {
-      //margin-bottom: 0.25rem;
+      /* margin-bottom: 0.25rem; */
 
       &:not(.btn-compact):not([class*='fa-']):after {
         content: '';
@@ -69,9 +69,9 @@
 
       position-try-fallbacks: flip-block, flip-inline !important;
 
-      //right: auto;
+      /* right: auto; */
       margin: 0 0 0 0.25rem;
-      //padding: 1rem;
+      /* padding: 1rem; */
       padding: 1.5rem;
 
       &::backdrop {
@@ -237,7 +237,7 @@
     }
   }
 
-  // Show hide the indidual or multiple label
+  /*  Show hide the indidual or multiple label */
   .dialog__wrapper :is(.empty, .individual) {
     display: none;
   }
@@ -254,6 +254,6 @@
   .dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
     display: none;
   }
-  // #endregion
+  /* #endregion */
 }
 

package/assets/sass/elements/prefix.scss

@@ -24,7 +24,7 @@
     border: 2px solid var(--colour-primary);
     color: var(--colour-white);
     margin: 0 !important;
-    //margin-bottom: 1rem;
+    /* margin-bottom: 1rem; */
     border-end-start-radius: 0.5rem;
     border-start-start-radius: 0.5rem;
     min-width: calc(2.75rem + 4px);

package/assets/sass/elements/progress.scss

@@ -1,9 +1,3 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
   :is(label, .label):has(progress) {
     position: relative;
@@ -53,7 +47,7 @@
     border-radius: var(--border-radius, 0.3125rem);
   }
 
-  // #region inline progress
+  /* #region inline progress */
   :is(label, .label):has(.progress--inline) {
     font-size: 1rem;
     color: var(--colour-body);
@@ -67,9 +61,9 @@
     }
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region Circular
+  /* #region Circular */
   label:has(.progress--circular) {
     --max-width: 12.5rem;
     --pt: 5.625rem;
@@ -116,7 +110,7 @@
     --label-fs: 0.75rem;
   }
 
-  // Responsive-ish settings
+  /*  Responsive-ish settings */
   *:has(> label > .progress--circular) {
     container-type: inline-size;
   }
@@ -148,7 +142,7 @@
     margin-left: 2rem;
   }
 
-  // Needed to allow it to be animated
+  /*  Needed to allow it to be animated */
   @property --progress {
     syntax: '<percentage>';
     inherits: false;
@@ -210,5 +204,5 @@
     border-radius: 50%;
   }
 
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/table.element.scss

@@ -5,7 +5,7 @@
 
 
 @layer elements {
-  // #region reset
+  /* #region reset */
   table {
     caption-side: bottom;
     border-collapse: collapse;
@@ -18,14 +18,14 @@
     text-align: left;
   }
 
-  // 1. Removes font-weight bold by inheriting
-  // 2. Matches default `<td>` alignment by inheriting `text-align`.
-  // 3. Fix alignment for Safari
+  /*  1. Removes font-weight bold by inheriting */
+  /*  2. Matches default `<td>` alignment by inheriting `text-align`. */
+  /*  3. Fix alignment for Safari */
 
   th {
-    font-weight: normal; // 1
-    text-align: inherit; // 2
-    text-align: -webkit-match-parent; // 3
+    font-weight: normal; /*  1 */
+    text-align: inherit; /*  2 */
+    text-align: -webkit-match-parent; /*  3 */
   }
 
   thead,
@@ -38,9 +38,9 @@
     border-style: solid;
     border-width: 0;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Default table
+  /* #region Default table */
   table {
     --border-width: 2px;
     --inner-border-width: 2px;
@@ -101,7 +101,7 @@
     }
   }
 
-  // Error messages
+  /*  Error messages */
   tr td[colspan='100%']:first-child:last-child span {
     max-width: 39rem;
     font-weight: bold;
@@ -140,5 +140,5 @@
     --border-width: 0px;
     --inner-border-width: 0px;
   }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/{textarea.scss → textarea.css}

@@ -1,20 +1,11 @@
-@use 'sass:map';
-@use 'sass:math';
-
-@use '../_func' as *;
-
-
 @layer elements {
 
-
   textarea {
-
     --textarea-height-scale: 3;
 
-    margin: 0; // 1
+    margin: 0; /*  1 */
     font-family: inherit;
-  
-    resize: vertical; // 1
+    resize: vertical; /*  1 */
     display: block;
     width: 100%;
     display: block;
@@ -26,12 +17,11 @@
     background-color: var(--colour-canvas-2);
     background-clip: padding-box;
     border: 2px solid var(--colour-primary);
-    appearance: none; // Fix appearance for date inputs in Safari
+    appearance: none; /*  Fix appearance for date inputs in Safari */
     border-radius: 0.5rem;
     margin-bottom: 1.5rem;
     max-height: 100%;
 
-    
     &:not([rows]){
       
       min-height: calc(
@@ -57,7 +47,7 @@
       ) !important;
     }
 
-    // Customize the `:focus` state to imitate native WebKit styles.
+    /*  Customize the `:focus` state to imitate native WebKit styles. */
     &:is(:focus, .focus):not(:disabled) {
       border-color: var(--colour-info);
       outline: 0;
@@ -67,8 +57,7 @@
       box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
     }
     
-
-    // Disabled inputs
+    /*  Disabled inputs */
     &:disabled {
       background-color: #ccd6d8;
       opacity: 0.4;
@@ -93,5 +82,4 @@
       margin-bottom: 0 !important;
     }
   }
-
 }

package/assets/sass/elements/{toggle-button.scss → toggle-button.css}

@@ -1,11 +1,5 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
-  // #region toggle
+  /* #region toggle */
   .toggle {
     --outline-width: 0.25rem !important;
     padding-left: 3.25rem !important;
@@ -47,7 +41,7 @@
     -ms-transform: translateX(1rem) !important;
     transform: translateX(1rem) !important;
   }
-  // #endregion
+  /* #endregion */
 
   label.toggle:has(+ label.toggle) {
     margin-bottom: 0 !important;

package/assets/sass/elements/tooltips.scss

@@ -30,7 +30,7 @@
     }
 
     &:is(:hover, .hover, :focus, :active) {
-      > span {
+      & > span {
         opacity: 1;
         display: block;
         z-index: var(--index-floating);
@@ -46,19 +46,12 @@
         border-radius: 0.5rem;
         box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
 
-        > strong:first-child {
+        & > strong:first-child {
           display: block;
           padding-bottom: 1rem;
           color: inherit;
         }
 
-        @media screen and (min-width: 36em) {
-          width: 20.9375rem; /* 335 */ 
-        }
-
-        @media screen and (min-width: 62em) {
-          width: 22.5rem; /* 360 */ 
-        }
 
         &::after {
           content: '';
@@ -71,6 +64,14 @@
           border-color: transparent transparent var(--colour-primary) transparent;
           margin-bottom: -1px;
         }
+        
+        @media screen and (min-width: 36em) {
+          width: 20.9375rem; /* 335 */ 
+        }
+
+        @media screen and (min-width: 62em) {
+          width: 22.5rem; /* 360 */ 
+        }
       }
     }
 

package/assets/sass/email.scss

@@ -1,18 +1,18 @@
 @charset "UTF-8";
 
-// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
+/*  Set mobile only variable so that the media query mixin doesn't print out non mobile rules */
 
 @use '_functions/bs_functions' as *;
 @use '_functions/bs_variables' as *;
 @use '_functions/bs_mixins' as *;
 @use '_functions/utility-mixins' as *;
 
-// Update the breakpoints to just one to remove some utility classes
+/*  Update the breakpoints to just one to remove some utility classes */
 $grid-breakpoints: (
   xs: 0,
 );
 
-// Simplify the grid
+/*  Simplify the grid */
 $grid-columns: 4;
 
 $device-xs-width: 600;

package/assets/sass/error.scss

@@ -1,8 +1,6 @@
-@use 'sass:map';
-
 @charset "UTF-8";
 
-// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
+/*  Set mobile only variable so that the media query mixin doesn't print out non mobile rules */
 @use '_functions/bs_functions' as *;
 @use '_functions/bs_variables' as *;
 @use '_functions/bs_mixins' as *;

package/assets/sass/foundations/colours.scss

@@ -10,7 +10,7 @@
   }
 
 
-  // On any background colour we change the default text colour to our primary colour to stand out more
+  /*  On any background colour we change the default text colour to our primary colour to stand out more */
   [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
     
     --colour-heading: var(--colour-primary-theme);
@@ -38,8 +38,8 @@
       color-scheme: dark;
     }
   }
-  // #region When the theme is set to dark via the dark mode component
-  // OR when the dark mode is set via the browser or device when no component is present
+  /* #region When the theme is set to dark via the dark mode component */
+  /*  OR when the dark mode is set via the browser or device when no component is present */
   
   .dark-theme :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
     
@@ -47,7 +47,7 @@
       --colour-body: var(--colour-primary-theme);
       color: var(--colour-primary-theme);
 
-      // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
+      /*  Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten */
       > * {
         color-scheme: light;
       }
@@ -70,7 +70,7 @@
       --colour-body: var(--colour-primary-theme);
       color: var(--colour-primary-theme);
 
-      // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
+      /*  Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten */
       > * {
         color-scheme: light;
       }
@@ -86,7 +86,7 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
   .invert-colours {
     > * {

package/assets/sass/foundations/reboot.scss

@@ -12,7 +12,7 @@
   /* Reset & Defaults */
   html {
     --root-fs-px: 375;
-    -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
+    -webkit-font-smoothing: antialiased; /*  Fix for Safari/iOS */
     height: 100%;
     width: 100%;
     overflow-x: hidden;
@@ -29,7 +29,7 @@
 
     
       @media (min-width: #{em(1280)}) {
-        //font-size: 100%;
+        /* font-size: 100%; */
         --root-fs-px: 1280;
 
         &:has(.nav--large) {
@@ -46,7 +46,7 @@
       }
 
       @media (min-width: #{em(1680)}) {
-        //font-size: 131.25%;
+        /* font-size: 131.25%; */
       }
 
       @media print {
@@ -54,7 +54,7 @@
       }
 
       @media screen and (min-width: 120em) {
-        // 1920
+        /*  1920 */
 
         &:has(.nav--large) {
           --root-fs-px: 1920;
@@ -65,20 +65,20 @@
   }
 
   body {
-    margin: 0; // 1
+    margin: 0; /*  1 */
     background: var(--colour-canvas);
     font-family: var(--font-body);
 
     width: 100%;
     line-height: 1.2;
     min-height: 100%;
-    -webkit-text-size-adjust: 100%; // 3
-    -webkit-tap-highlight-color: rgba(#000, 0); // 4
+    -webkit-text-size-adjust: 100%; /*  3 */
+    -webkit-tap-highlight-color: rgba(#000, 0); /*  4 */
 
     color: var(--colour-body);
   }
 
-  // #region scrollbars
+  /* #region scrollbars */
   :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar {
     width: 10px;
     height: 10px;
@@ -97,7 +97,7 @@
     border-left: 4px solid var(--colour-canvas-2);
   }
 
-  //#endregion
+  /* #endregion */
 
   body > footer,
   body > #app > footer {
@@ -140,7 +140,7 @@
     max-width: 100%;
   }
 
-  // Details reset
+  /*  Details reset */
   summary {
     list-style: none;
   }

package/assets/sass/foundations/root.scss

@@ -127,7 +127,7 @@
     --type-scale: 1.2;
     --body-fs: 1rem;
     /* #endregion */
-    // #region heading
+    /* #region heading */
     --h1-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 6)), 0.25rem);
     --h2-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 5)), 0.25rem);
     --h3-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 3)), 0.25rem);
@@ -142,15 +142,15 @@
 
     --h4-lh: round(up, calc(1em * var(--type-scale)), 0.25rem);
     --h4-pb: round(up, calc(1em * var(--type-scale)), 0.25rem);
-    // #endregion
-    // #region rounded borders
+    /* #endregion */
+    /* #region rounded borders */
     --border-radius-sm: 0.25rem;
     --border-radius: 0.5rem;
     --border-radius-lg: 1rem;
     --border-radius-xl: 1.5rem;
     --border-radius-2xl: 3rem;
-    // #endregion
-    // #region Z-index
+    /* #endregion */
+    /* #region Z-index */
     --index-below: -1;
     --index-base: 0;
     --index-focus: 2;
@@ -158,8 +158,8 @@
     --index-floating: 100;
     --index-menu: 200;
     --index-overlay: 1000;
-    // #endregion
-    // #region Cards variables
+    /* #endregion */
+    /* #region Cards variables */
     --card-top-padding: 2rem;
     --card-right-padding: 3.5rem; /* 16+16+24 */
     --card-bottom-padding: 2rem;
@@ -168,15 +168,15 @@
     --card-box-shadow: 2px 0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
     --nav-height: 6rem; /* 96 */
     --code-color: #d63384;
-    // #endregion 
-    // #region Default borders
+    /* #endregion */ 
+    /* #region Default borders */
     --border-width: 1px;
     --border-style: solid;
     --border-color: var(--colour-border);
-    // #endregion
+    /* #endregion */
     
  
-    // #region layout
+    /* #region layout */
     --gap: 1rem;
     --gutter: 1.5rem;
     --max-width: 80rem;
@@ -190,11 +190,11 @@
     --padding-inline: 1.5rem;
     --container-padding-x: 1.5rem;
     --container-padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom) var(--container-padding-x);
-    // #endregion
+    /* #endregion */
 
-    // #region icons
+    /* #region icons */
     $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
-    $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+    $icon-close: url("data:image/svg+xml,<svg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
     $icon-new-tab: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M304 24c0 13.3 10.7 24 24 24H430.1L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223V184c0 13.3 10.7 24 24 24s24-10.7 24-24V24c0-13.3-10.7-24-24-24H328c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V440c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z'/></svg>");
     $icon-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><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>");
@@ -219,9 +219,9 @@
     --icon-tick: #{escape-svg($icon-tick)};
 
     --fa-secondary-opacity: 0.1;
-    // #endregion
+    /* #endregion */
 
-    // #region spacing
+    /* #region spacing */
     --spacer: 1rem;
     --spacer-0: 0;
     --spacer-1: calc(var(--spacer) * 0.5);
@@ -229,13 +229,13 @@
     --spacer-3: calc(var(--spacer) * 1.5);
     --spacer-4: calc(var(--spacer) * 2);
     --spacer-5: calc(var(--spacer) * 3);
-    // #endregion
+    /* #endregion */
 
     --max-height-sm: 12.5rem; /* 200px */
     --max-height-md: 25rem; /* 400px */
     --max-height-lg: 37.5rem; /* 600px */
 
-    // Add in media query based updates to the global vars like updating the heading 1 font size
+    /*  Add in media query based updates to the global vars like updating the heading 1 font size */
     @media screen and (min-width: 36em) {
       --container-padding-x: 2.5rem;
       --padding-inline: 2.5rem;