@onemrvapublic/design-system-theme 18.3.0-develop.1 → 18.3.0-develop.2

package/components/_button-toggle.scss

@@ -1,18 +1,18 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.button-toggle-base($theme);
   @include mat.button-toggle-theme($theme);
 
-  $spacer: map-get($theme, 'spacer');
+  $spacer: map.get($theme, 'spacer');
   $accent400: µ.accent($theme, 400);
   $accent500: µ.accent($theme, 500);
 
   mat-button-toggle-group {
-    --mat-standard-button-toggle-shape: #{$onemrva-button-border-radius};
+    --mat-standard-button-toggle-shape: #{variables.$onemrva-button-border-radius};
     --mat-standard-button-toggle-divider-color: #{µ.grayscale($theme, 300)};
     --mat-standard-button-toggle-selected-state-background-color: #{µ.primary(
         $theme,

package/components/_button.scss

@@ -1,13 +1,13 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.button-base($theme);
   @include mat.button-theme($theme);
 
-  $spacer: map-get($theme, 'spacer');
+  $spacer: map.get($theme, 'spacer');
   $accent400: µ.accent($theme, 400);
   $accent500: µ.accent($theme, 500);
   $accent-gradient: transparent
@@ -95,7 +95,7 @@
     position: relative;
 
     &:not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
-      border-radius: $onemrva-button-border-radius;
+      border-radius: variables.$onemrva-button-border-radius;
       padding: $spacer 2 * $spacer;
       vertical-align: middle;
       text-decoration: none;
@@ -173,7 +173,7 @@
     }
 
     &:hover:not(:disabled):not(.choice-btn) {
-      box-shadow: $box-shadow;
+      box-shadow: variables.$box-shadow;
       .mat-button-focus-overlay {
         background: transparent;
         opacity: 0;
@@ -231,49 +231,61 @@
       &.mat-primary {
         &:after {
           outline: 5px solid
-            µ.primary($theme, default, $onemrva-button-outline-opacity);
+            µ.primary(
+              $theme,
+              default,
+              variables.$onemrva-button-outline-opacity
+            );
         }
       }
 
       &.mat-accent {
         &:after {
           outline: 5px solid
-            µ.accent($theme, default, $onemrva-button-outline-opacity);
+            µ.accent($theme, default, variables.$onemrva-button-outline-opacity);
         }
       }
 
       &.mat-warn {
         &:after {
           outline: 5px solid
-            µ.warn($theme, default, $onemrva-button-outline-opacity);
+            µ.warn($theme, default, variables.$onemrva-button-outline-opacity);
         }
       }
 
       &.mat-error {
         &:after {
           outline: 5px solid
-            µ.error($theme, default, $onemrva-button-outline-opacity);
+            µ.error($theme, default, variables.$onemrva-button-outline-opacity);
         }
       }
 
       &.mat-success {
         &:after {
           outline: 5px solid
-            µ.success($theme, default, $onemrva-button-outline-opacity);
+            µ.success(
+              $theme,
+              default,
+              variables.$onemrva-button-outline-opacity
+            );
         }
       }
 
       &.mat-info {
         &:after {
           outline: 5px solid
-            µ.info($theme, default, $onemrva-button-outline-opacity);
+            µ.info($theme, default, variables.$onemrva-button-outline-opacity);
         }
       }
 
       &.mat-grayscale {
         &:after {
           outline: 5px solid
-            µ.grayscale($theme, default, $onemrva-button-outline-opacity);
+            µ.grayscale(
+              $theme,
+              default,
+              variables.$onemrva-button-outline-opacity
+            );
         }
       }
     }

package/components/_checkbox.scss

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.checkbox-base($theme);
@@ -12,7 +12,7 @@
       .mdc-checkbox__native-control:enabled:checked,
       .mdc-checkbox__native-control:enabled:indeterminate {
         ~ .mdc-checkbox__background {
-          background: $onemrva-accent-gradient-vertical;
+          background: variables.$onemrva-accent-gradient-vertical;
           border: µ.accent($theme, 500);
         }
       }

package/components/_chips.scss

@@ -1,11 +1,11 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   $primary: µ.primary($theme);
-  $color: mat.m2-get-color-from-palette(map-get($theme, 'grayscale'));
+  $color: mat.m2-get-color-from-palette(map.get($theme, 'grayscale'));
 
   @include mat.chips-base($theme);
   @include mat.chips-theme($theme);
@@ -20,7 +20,8 @@
     }
   }
 
-  mat-chip-option {
+  mat-chip-option,
+  mat-chip {
     transition: none;
     box-shadow: none;
     opacity: 1;
@@ -61,7 +62,7 @@
 
     &.mat-accent {
       --mdc-chip-label-text-color: #{µ.accent($theme, '500-contrast')};
-      background: $onemrva-accent-gradient-vertical !important;
+      background: variables.$onemrva-accent-gradient-vertical !important;
       border: none !important;
     }
 

package/components/_container.scss

@@ -1,4 +1,5 @@
-@use '../utilities/media';
+@use '../utilities/media' as media;
+@use 'sass:map';
 
 @mixin theme($theme, $breakpoints) {
   .onemrva-layout-container {
@@ -28,14 +29,14 @@
     @include media.media($breakpoints, xxlarge) {
       margin-right: auto;
       margin-left: auto;
-      max-width: #{map-get(map-get($breakpoints, xxlarge), min) - 112}px;
+      max-width: #{map.get(map.get($breakpoints, xxlarge), min) - 112}px;
     }
 
     //
     // DO NOT UNCOMMENT
     //
     // @include media.media(xlarge) {
-    //    max-width: #{map-get(map-get($breakpoints, xlarge), min) - 16}px;
+    //    max-width: #{map.get(map.get($breakpoints, xlarge), min) - 16}px;
     // }
   }
 }

package/components/_dialogs.scss

@@ -1,13 +1,13 @@
 @use './µ';
 @use 'sass:map';
 @use '@angular/material' as mat;
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.dialog-base($theme);
   @include mat.dialog-theme($theme);
 
-  $spacer: map-get($theme, 'spacer');
+  $spacer: map.get($theme, 'spacer');
 
   .mdc-dialog__title::before {
     height: auto;
@@ -21,7 +21,7 @@
     }
 
     .mat-toolbar.mat-accent {
-      background: $onemrva-accent-gradient;
+      background: variables.$onemrva-accent-gradient;
       color: white;
     }
 

package/components/_form-field.scss

@@ -7,8 +7,37 @@
   @include mat.form-field-theme($theme);
   mat-form-field {
     --mdc-outlined-text-field-focus-outline-width: 1px;
-    button.mat-mdc-icon-button.mat-mdc-button-base {
-      --mdc-icon-button-state-layer-size: 44px;
+    .mat-mdc-notch-piece {
+      --mat-mdc-form-field-floating-label-scale: 0.75;
+    }
+
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+      .mdc-notched-outline--upgraded {
+        .mdc-floating-label--float-above {
+          --mat-form-field-container-height: 44px;
+          --mat-mdc-form-field-floating-label-scale: 0.75;
+          --mat-mdc-form-field-label-transform: translateY(
+              calc(
+                calc(
+                    6.75px + var(--mat-form-field-container-height, 56px) / 2
+                  ) *
+                  -1.1
+              )
+            )
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+        }
+      }
+    }
+    .mat-mdc-form-field-flex,
+    .mat-mdc-form-field-infix {
+      --mat-form-field-container-height: 44px;
+    }
+    .mat-mdc-text-field-wrapper {
+      .mdc-text-field--outlined {
+        .mat-mdc-form-field-infix {
+          padding: 0 0 4px 0;
+        }
+      }
     }
   }
   .mdc-notched-outline__notch {

package/components/_icon-button.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 @use './µ';
 @use 'sass:map';
-@import '../utilities/variables';
 
 @mixin theme($theme) {
   @include mat.icon-button-base($theme);

package/components/_icon.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 @use './µ';
 @use 'sass:map';
-@import '../utilities/variables';
 
 @mixin theme($theme) {
   @include mat.icon-base($theme);

package/components/_input.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 @use './µ';
 @use 'sass:map';
-@import '../utilities/variables';
 
 @mixin inputStyle($color) {
   &.mat-focused,

package/components/_radio.scss

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.radio-base($theme);
@@ -18,7 +18,7 @@
 
     &.mat-accent {
       .mat-radio-inner-circle {
-        background: $onemrva-accent-gradient-vertical;
+        background: variables.$onemrva-accent-gradient-vertical;
       }
     }
 

package/components/_sidenav.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   mat-drawer {
@@ -21,7 +21,7 @@
   }
 
   .highlight-menu {
-    background: $onemrva-accent-gradient-vertical;
+    background: variables.$onemrva-accent-gradient-vertical;
   }
 
   .sidenav-item.menu-expanded,

package/components/_slide-toggle.scss

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.slide-toggle-base($theme);
@@ -16,7 +16,7 @@
 
     &.mat-accent {
       .mdc-switch:enabled .mdc-switch__track:after {
-        background: $onemrva-accent-gradient !important;
+        background: variables.$onemrva-accent-gradient !important;
       }
     }
 

package/components/_slider.scss

@@ -1,7 +1,4 @@
 @use '@angular/material' as mat;
-@use 'sass:map';
-@use './µ';
-@import '../utilities/variables';
 
 @mixin theme($theme) {
   @include mat.slider-base($theme);

package/components/_stepper.scss

@@ -6,7 +6,7 @@
   @include mat.stepper-base($theme);
   @include mat.stepper-theme($theme);
 
-  $spacer: map-get($theme, 'spacer');
+  $spacer: map.get($theme, 'spacer');
 
   mat-stepper,
   mat-vertical-stepper,

package/components/_table.scss

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.table-base($theme);
@@ -97,7 +97,7 @@
 
         &:hover,
         &:active {
-          box-shadow: $box-shadow;
+          box-shadow: variables.$box-shadow;
         }
 
         &.mat-primary {
@@ -105,7 +105,7 @@
         }
 
         &.mat-accent {
-          background: $onemrva-accent-gradient;
+          background: variables.$onemrva-accent-gradient;
           color: white;
         }
 

package/components/_toolbar.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
 
 @mixin theme($theme) {
   @include mat.toolbar-base($theme);

package/components/_tooltip.scss

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use './µ';
-@import '../utilities/variables';
+@use '../utilities/variables' as variables;
 
 @mixin theme($theme) {
   @include mat.tooltip-base($theme);
@@ -13,7 +13,7 @@
     background: #ffffff;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
     margin: 0 -1px -2px -2px;
-    padding: $gap;
+    padding: variables.$gap;
 
     .mdc-tooltip__surface {
       color: inherit;

package/components/_/302/265-colors.scss

@@ -34,7 +34,7 @@
 
 // SUCCESS
 @function successPalette($theme) {
-  @return map-get($theme, 'success');
+  @return map.get($theme, 'success');
 }
 
 @function success($theme, $hue: 600, $opacity: null) {
@@ -43,7 +43,7 @@
 
 // ERROR
 @function errorPalette($theme) {
-  @return map-get($theme, 'error');
+  @return map.get($theme, 'error');
 }
 
 @function error($theme, $hue: default, $opacity: null) {
@@ -52,7 +52,7 @@
 
 // INFO
 @function infoPalette($theme) {
-  @return map-get($theme, 'info');
+  @return map.get($theme, 'info');
 }
 
 @function info($theme, $hue: default, $opacity: null) {
@@ -61,7 +61,7 @@
 
 // GRAYSCALE
 @function grayscalePalette($theme) {
-  @return map-get($theme, 'grayscale');
+  @return map.get($theme, 'grayscale');
 }
 
 @function grayscale($theme, $hue: default, $opacity: null) {

package/fesm2022/onemrvapublic-design-system-theme.mjs

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 class OnemrvaThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaThemeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaThemeModule, providers: [
             {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                 useValue: {
@@ -15,7 +15,7 @@ class OnemrvaThemeModule {
             },
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [

package/fesm2022/onemrvapublic-design-system-theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-theme.mjs","sources":["../../../../projects/onemrva/theme/src/lib/theme.module.ts","../../../../projects/onemrva/theme/src/index.ts","../../../../projects/onemrva/theme/src/onemrvapublic-design-system-theme.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport {\n  MatFormFieldDefaultOptions,\n  MAT_FORM_FIELD_DEFAULT_OPTIONS,\n} from '@angular/material/form-field';\n\n@NgModule({\n  providers: [\n    {\n      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n      useValue: {\n        appearance: 'outline',\n        floatLabel: 'always',\n      } as MatFormFieldDefaultOptions,\n    },\n  ],\n  imports: [],\n})\nexport class OnemrvaThemeModule {}\n","/*\n * Public API Surface of theme\n */\n\nexport * from './lib/theme.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAkBa,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAlB,kBAAkB,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAXlB,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;AACvC,gBAAA,QAAQ,EAAE;AACR,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,UAAU,EAAE,QAAQ;AACS,iBAAA;AAChC,aAAA;AACF,SAAA,EAAA,CAAA,CAAA,EAAA;;4FAGU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,8BAA8B;AACvC,4BAAA,QAAQ,EAAE;AACR,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,UAAU,EAAE,QAAQ;AACS,6BAAA;AAChC,yBAAA;AACF,qBAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA,CAAA;;;ACjBD;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system-theme.mjs","sources":["../../../../projects/onemrva/theme/src/lib/theme.module.ts","../../../../projects/onemrva/theme/src/index.ts","../../../../projects/onemrva/theme/src/onemrvapublic-design-system-theme.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport {\n  MatFormFieldDefaultOptions,\n  MAT_FORM_FIELD_DEFAULT_OPTIONS,\n} from '@angular/material/form-field';\n\n@NgModule({\n  providers: [\n    {\n      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n      useValue: {\n        appearance: 'outline',\n        floatLabel: 'always',\n      } as MatFormFieldDefaultOptions,\n    },\n  ],\n  imports: [],\n})\nexport class OnemrvaThemeModule {}\n","/*\n * Public API Surface of theme\n */\n\nexport * from './lib/theme.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAkBa,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAlB,kBAAkB,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAXlB,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;AACvC,gBAAA,QAAQ,EAAE;AACR,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,UAAU,EAAE,QAAQ;AACS,iBAAA;AAChC,aAAA;AACF,SAAA,EAAA,CAAA,CAAA;;2FAGU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,8BAA8B;AACvC,4BAAA,QAAQ,EAAE;AACR,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,UAAU,EAAE,QAAQ;AACS,6BAAA;AAChC,yBAAA;AACF,qBAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACjBD;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v18.3.0-develop.1",
+    "version": "v18.3.0-develop.2",
     "publishConfig": {
         "access": "public"
     },
@@ -11,8 +11,6 @@
         ".": {
             "sass": "./index.scss",
             "types": "./index.d.ts",
-            "esm2022": "./esm2022/onemrvapublic-design-system-theme.mjs",
-            "esm": "./esm2022/onemrvapublic-design-system-theme.mjs",
             "default": "./fesm2022/onemrvapublic-design-system-theme.mjs"
         },
         "./package.json": {

package/utilities/_fonts.scss

@@ -3,7 +3,7 @@
 @use '../components/µ';
 
 @mixin theme($onemrva-theme, $production: true) {
-  & {
+  :root {
     $normal-font-size: mat.m2-font-size(
       map.get($onemrva-theme, 'typography'),
       'subtitle-2'
@@ -25,6 +25,7 @@
 
     --mat-form-field-container-height: 44px;
     --mat-form-field-outlined-label-text-populated-size: 12px;
+
     --mat-form-field-container-text-size: $normal-font-size;
     --mat-form-field-container-text-weight: $normal-font-weight;
 

package/utilities/_grid.scss

@@ -1,5 +1,6 @@
-@import 'media';
-@import 'variables';
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:list';
 
 @mixin colrules($suffix: '') {
   @for $i from 0 through 12 {
@@ -46,7 +47,7 @@
     .col,
     .col-auto {
       width: auto !important;
-      flex: 1 0 0% !important;
+      flex: 1 0 0 !important;
     }
     .offset-auto {
       margin-left: auto !important;
@@ -54,21 +55,21 @@
 
     @include colrules();
 
-    @each $breakpoint in $breakpoints {
-      @include media($breakpoints, nth($breakpoint, 1)) {
-        $sfx: -#{nth($breakpoint, 1)};
+    @each $breakpoint in variables.$breakpoints {
+      @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+        $sfx: -#{list.nth($breakpoint, 1)};
         @include colrules($sfx);
       }
     }
   }
-  @each $spacer in $spacers {
-    .gx#{nth($spacer, 1)},
-    .g#{nth($spacer, 1)} {
-      --bs-gutter-x: #{nth($spacer, 2)} !important;
+  @each $spacer in variables.$spacers {
+    .gx#{list.nth($spacer, 1)},
+    .g#{list.nth($spacer, 1)} {
+      --bs-gutter-x: #{list.nth($spacer, 2)} !important;
     }
-    .gy#{nth($spacer, 1)},
-    .g#{nth($spacer, 1)} {
-      --bs-gutter-y: #{nth($spacer, 2)} !important;
+    .gy#{list.nth($spacer, 1)},
+    .g#{list.nth($spacer, 1)} {
+      --bs-gutter-y: #{list.nth($spacer, 2)} !important;
     }
   }
 }

package/utilities/_media.scss

@@ -1,13 +1,14 @@
-@import 'variables';
+@use '../utilities/variables' as variables;
+@use 'sass:map';
 
 @mixin media($breakpoints, $from, $to: false) {
   $min: false;
   $max: false;
   @if $from {
-    $min: map-get(map-get($breakpoints, $from), min);
+    $min: map.get(map.get(variables.$breakpoints, $from), min);
   }
   @if $to {
-    $max: map-get(map-get($breakpoints, $to), max);
+    $max: map.get(map.get(variables.$breakpoints, $to), max);
   }
 
   @if $min {

package/utilities/_spacing.scss

@@ -1,5 +1,7 @@
-@import 'media';
-@import 'variables';
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:map';
+@use 'sass:list';
 
 @mixin padmarrules($name, $selector, $suffix, $value) {
   .#{$selector}l#{$suffix},
@@ -41,40 +43,43 @@
 }
 
 @mixin spacing() {
-  @each $spacer in $spacers {
+  @each $spacer in variables.$spacers {
     @include padmarrules(
       $name: 'padding',
       $selector: 'p',
-      $suffix: nth($spacer, 1),
-      $value: nth($spacer, 2)
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
     );
     @include padmarrules(
       $name: 'margin',
       $selector: 'm',
-      $suffix: nth($spacer, 1),
-      $value: nth($spacer, 2)
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
     );
 
-    @include gaprules($suffix: nth($spacer, 1), $value: nth($spacer, 2));
+    @include gaprules(
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
 
-    @each $breakpoint in $breakpoints {
-      //@media (min-width: nth($breakpoint, 2)) {
-      @include media($breakpoints, nth($breakpoint, 1)) {
-        $sfx: #{nth($spacer, 1)}-#{nth($breakpoint, 1)};
+    @each $breakpoint in variables.$breakpoints {
+      //@media (min-width: list.nth($breakpoint, 2)) {
+      @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+        $sfx: #{list.nth($spacer, 1)}-#{list.nth($breakpoint, 1)};
         @include padmarrules(
           $name: 'padding',
           $selector: 'p',
           $suffix: $sfx,
-          $value: nth($spacer, 2)
+          $value: list.nth($spacer, 2)
         );
         @include padmarrules(
           $name: 'margin',
           $selector: 'm',
           $suffix: $sfx,
-          $value: nth($spacer, 2)
+          $value: list.nth($spacer, 2)
         );
 
-        @include gaprules($suffix: $sfx, $value: nth($spacer, 2));
+        @include gaprules($suffix: $sfx, $value: list.nth($spacer, 2));
       }
     }
   }

package/utilities/_utilities.scss

@@ -1,5 +1,7 @@
-@import 'variables';
-@import 'media';
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:map';
+@use 'sass:list';
 
 @mixin utilities() {
   // text
@@ -14,17 +16,17 @@
   .text-start {
     text-align: left !important;
   }
-  @each $breakpoint in $breakpoints {
-    @include media($breakpoints, nth($breakpoint, 1)) {
-      .text-center-#{nth($breakpoint, 1)} {
+  @each $breakpoint in variables.$breakpoints {
+    @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+      .text-center-#{list.nth($breakpoint, 1)} {
         text-align: center !important;
       }
-      .text-right-#{nth($breakpoint, 1)},
-      .text-end-#{nth($breakpoint, 1)} {
+      .text-right-#{list.nth($breakpoint, 1)},
+      .text-end-#{list.nth($breakpoint, 1)} {
         text-align: right !important;
       }
-      .text-left-#{nth($breakpoint, 1)},
-      .text-start-#{nth($breakpoint, 1)} {
+      .text-left-#{list.nth($breakpoint, 1)},
+      .text-start-#{list.nth($breakpoint, 1)} {
         text-align: left !important;
       }
     }
@@ -83,14 +85,14 @@
   .float-start {
     float: left !important;
   }
-  @each $breakpoint in $breakpoints {
-    @include media($breakpoints, nth($breakpoint, 1)) {
-      .float-right-#{nth($breakpoint, 1)},
-      .float-end-#{nth($breakpoint, 1)} {
+  @each $breakpoint in variables.$breakpoints {
+    @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+      .float-right-#{list.nth($breakpoint, 1)},
+      .float-end-#{list.nth($breakpoint, 1)} {
         float: right !important;
       }
-      .float-left-#{nth($breakpoint, 1)},
-      .float-start-#{nth($breakpoint, 1)} {
+      .float-left-#{list.nth($breakpoint, 1)},
+      .float-start-#{list.nth($breakpoint, 1)} {
         float: left !important;
       }
     }
@@ -128,36 +130,36 @@
     display: inline-flex !important;
   }
 
-  @each $breakpoint in $breakpoints {
-    @include media($breakpoints, nth($breakpoint, 1)) {
-      .d-none-#{nth($breakpoint, 1)} {
+  @each $breakpoint in variables.$breakpoints {
+    @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+      .d-none-#{list.nth($breakpoint, 1)} {
         display: none !important;
       }
-      .d-inline-#{nth($breakpoint, 1)} {
+      .d-inline-#{list.nth($breakpoint, 1)} {
         display: inline !important;
       }
-      .d-inline-block-#{nth($breakpoint, 1)} {
+      .d-inline-block-#{list.nth($breakpoint, 1)} {
         display: inline-block !important;
       }
-      .d-block-#{nth($breakpoint, 1)} {
+      .d-block-#{list.nth($breakpoint, 1)} {
         display: block !important;
       }
-      .d-grid-#{nth($breakpoint, 1)} {
+      .d-grid-#{list.nth($breakpoint, 1)} {
         display: grid !important;
       }
-      .d-table-#{nth($breakpoint, 1)} {
+      .d-table-#{list.nth($breakpoint, 1)} {
         display: table !important;
       }
-      .d-table-cell-#{nth($breakpoint, 1)} {
+      .d-table-cell-#{list.nth($breakpoint, 1)} {
         display: table-cell !important;
       }
-      .d-table-row-#{nth($breakpoint, 1)} {
+      .d-table-row-#{list.nth($breakpoint, 1)} {
         display: table-row !important;
       }
-      .d-flex-#{nth($breakpoint, 1)} {
+      .d-flex-#{list.nth($breakpoint, 1)} {
         display: flex !important;
       }
-      .d-inline-flex-#{nth($breakpoint, 1)} {
+      .d-inline-flex-#{list.nth($breakpoint, 1)} {
         display: inline-flex !important;
       }
     }

package/utilities/_variables.scss

@@ -54,44 +54,67 @@ $breakpoints: (
 
 $onemrva-typography: mat.m2-define-typography-config(
   $font-family: $default-font-family,
-
   // Define h1 to h6 with mat.m2-define-typography-level(font-size, line-height, font-weight)
-  $headline-1:
-    mat.m2-define-typography-level(140px, 160px, 700, $header-font-family),
-  $headline-2:
-    mat.m2-define-typography-level(60px, 72px, 700, $header-font-family),
-  $headline-3:
-    mat.m2-define-typography-level(48px, 60px, 700, $header-font-family),
-  $headline-4:
-    mat.m2-define-typography-level(36px, 58px, 700, $header-font-family),
-  $headline-5:
-    mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
+  $headline-1: mat.m2-define-typography-level(
+      140px,
+      160px,
+      700,
+      $header-font-family
+    ),
+  $headline-2: mat.m2-define-typography-level(
+      60px,
+      72px,
+      700,
+      $header-font-family
+    ),
+  $headline-3: mat.m2-define-typography-level(
+      48px,
+      60px,
+      700,
+      $header-font-family
+    ),
+  $headline-4: mat.m2-define-typography-level(
+      36px,
+      58px,
+      700,
+      $header-font-family
+    ),
+  $headline-5: mat.m2-define-typography-level(
+      29px,
+      51px,
+      600,
+      $header-font-family
+    ),
   // H1
-  $headline-6:
-    mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
+  $headline-6: mat.m2-define-typography-level(
+      26px,
+      46px,
+      600,
+      $header-font-family
+    ),
   // H2
-  $subtitle-1:
-    mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
-  // H3
-  $subtitle-2:
-    mat.m2-define-typography-level(16px, 26px, 600, $default-font-family),
-  // body
-  // Define body text
-  $body-1: mat.m2-define-typography-level(
-      20px,
-      35px,
-      700,
-      $default-font-family
+  $subtitle-1: mat.m2-define-typography-level(
+      23px,
+      40px,
+      600,
+      $header-font-family
     ),
-  // H4
-  // Regular body text
-  $body-2: mat.m2-define-typography-level(
+  // H3
+  $subtitle-2: mat.m2-define-typography-level(
       16px,
       26px,
-      400,
+      600,
       $default-font-family
     ),
   // body
+  // Define body text
+  $body-1:
+    mat.m2-define-typography-level(16px, 20px, 400, $default-font-family),
+  // H4
+  // Regular body text
+  $body-2:
+    mat.m2-define-typography-level(16px, 26px, 400, $default-font-family),
+  // body
   // mat.m2-define-typography-level(18px, 32px, 600, $header-font-family), // H5 H6
   // Secondary body text
   // Optional: You can define other typography levels like caption, button, etc.
@@ -99,7 +122,6 @@ $onemrva-typography: mat.m2-define-typography-config(
   $caption: mat.m2-define-typography-level(14px, 16px, 400),
   $overline: mat.m2-define-typography-level(12px, 16px, 400),
 );
-
 //$onemrva-typography: map.merge(
 //    $onemrva-typography,
 //    (
@@ -110,7 +132,6 @@ $onemrva-typography: mat.m2-define-typography-config(
 //      mat-h4: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
 //    )
 //);
-
 $onemrva-primary: mat.m2-define-palette(palettes.$primary-palette);
 $onemrva-accent: mat.m2-define-palette(palettes.$accent-palette);
 $onemrva-warn: mat.m2-define-palette(palettes.$warn-palette);
@@ -131,7 +152,7 @@ $onemrva-theme-options: (
 );
 $onemrva-theme: mat.m2-define-light-theme($onemrva-theme-options);
 
-$onemrva-theme: map-merge(
+$onemrva-theme: map.merge(
   $onemrva-theme,
   (
     success: $onemrva-success,

package/esm2022/index.mjs

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of theme
- */
-export * from './lib/theme.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9vbmVtcnZhL3RoZW1lL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHRoZW1lXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvdGhlbWUubW9kdWxlJztcbiJdfQ==

package/esm2022/lib/theme.module.mjs

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS, } from '@angular/material/form-field';
-import * as i0 from "@angular/core";
-export class OnemrvaThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule, providers: [
-            {
-                provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                useValue: {
-                    appearance: 'outline',
-                    floatLabel: 'always',
-                },
-            },
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [
-                        {
-                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                            useValue: {
-                                appearance: 'outline',
-                                floatLabel: 'always',
-                            },
-                        },
-                    ],
-                    imports: [],
-                }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvb25lbXJ2YS90aGVtZS9zcmMvbGliL3RoZW1lLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFFTCw4QkFBOEIsR0FDL0IsTUFBTSw4QkFBOEIsQ0FBQzs7QUFjdEMsTUFBTSxPQUFPLGtCQUFrQjsrR0FBbEIsa0JBQWtCO2dIQUFsQixrQkFBa0I7Z0hBQWxCLGtCQUFrQixhQVhsQjtZQUNUO2dCQUNFLE9BQU8sRUFBRSw4QkFBOEI7Z0JBQ3ZDLFFBQVEsRUFBRTtvQkFDUixVQUFVLEVBQUUsU0FBUztvQkFDckIsVUFBVSxFQUFFLFFBQVE7aUJBQ1M7YUFDaEM7U0FDRjs7NEZBR1Usa0JBQWtCO2tCQVo5QixRQUFRO21CQUFDO29CQUNSLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsOEJBQThCOzRCQUN2QyxRQUFRLEVBQUU7Z0NBQ1IsVUFBVSxFQUFFLFNBQVM7Z0NBQ3JCLFVBQVUsRUFBRSxRQUFROzZCQUNTO3lCQUNoQztxQkFDRjtvQkFDRCxPQUFPLEVBQUUsRUFBRTtpQkFDWiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBNYXRGb3JtRmllbGREZWZhdWx0T3B0aW9ucyxcbiAgTUFUX0ZPUk1fRklFTERfREVGQVVMVF9PUFRJT05TLFxufSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcblxuQE5nTW9kdWxlKHtcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTUFUX0ZPUk1fRklFTERfREVGQVVMVF9PUFRJT05TLFxuICAgICAgdXNlVmFsdWU6IHtcbiAgICAgICAgYXBwZWFyYW5jZTogJ291dGxpbmUnLFxuICAgICAgICBmbG9hdExhYmVsOiAnYWx3YXlzJyxcbiAgICAgIH0gYXMgTWF0Rm9ybUZpZWxkRGVmYXVsdE9wdGlvbnMsXG4gICAgfSxcbiAgXSxcbiAgaW1wb3J0czogW10sXG59KVxuZXhwb3J0IGNsYXNzIE9uZW1ydmFUaGVtZU1vZHVsZSB7fVxuIl19

package/esm2022/onemrvapublic-design-system-theme.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib25lbXJ2YXB1YmxpYy1kZXNpZ24tc3lzdGVtLXRoZW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvb25lbXJ2YS90aGVtZS9zcmMvb25lbXJ2YXB1YmxpYy1kZXNpZ24tc3lzdGVtLXRoZW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19