npm - @wavemaker/foundation-css - Versions diffs - 11.10.5-next.27872 → 11.10.5-rc.207 - Mend

@wavemaker/foundation-css 11.10.5-next.27872 → 11.10.5-rc.207

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/foundation/foundation.css +1278 -1063
package/foundation/foundation.min.css +1 -1
package/index.d.ts +18 -27
package/index.js +92 -42
package/index.js.map +1 -0
package/npm-shrinkwrap.json +225 -8
package/package-lock.json +225 -8
package/package.json +10 -3
package/tokens/components/accordion/accordion.json +10 -0
package/tokens/components/anchor/anchor.json +86 -0
package/tokens/components/badge/badge.json +52 -0
package/tokens/components/breadcrumb/breadcrumb.json +98 -0
package/tokens/components/button/button.json +710 -0
package/tokens/components/button-group/button-group.json +18 -0
package/tokens/components/calendar/calendar.json +274 -0
package/tokens/components/cards/cards.json +176 -0
package/tokens/components/carousel/carousel.json +46 -0
package/tokens/components/checkbox/checkbox.json +106 -0
package/tokens/components/checkboxset/checkboxset.json +10 -0
package/tokens/components/chips/chips.json +202 -0
package/tokens/components/composite/composite.json +202 -0
package/tokens/components/container/container.json +32 -0
package/tokens/components/currency/currency.json +32 -0
package/tokens/components/data-table/data-table.json +170 -0
package/tokens/components/date/date.json +146 -0
package/tokens/components/dropdown-menu/dropdown-menu.json +116 -0
package/tokens/components/fileupload/fileupload.json +180 -0
package/tokens/components/grid-layout/grid-layout.json +18 -0
package/tokens/components/icon/icon.json +8 -0
package/tokens/components/label/label.json +8 -0
package/tokens/components/list/list.json +72 -0
package/tokens/components/message/message.json +144 -0
package/tokens/components/modal-dialog/modal-dialog.json +176 -0
package/tokens/components/nav/nav.json +222 -0
package/tokens/components/page-layout/page-layout.json +842 -0
package/tokens/components/pagination/pagination.json +250 -0
package/tokens/components/panel/panel.json +218 -0
package/tokens/components/picture/picture.json +42 -0
package/tokens/components/popover/popover.json +102 -0
package/tokens/components/progress-bar/progress-bar.json +122 -0
package/tokens/components/progress-circle/progress-circle.json +64 -0
package/tokens/components/radioset/radioset.json +116 -0
package/tokens/components/rating/rating.json +42 -0
package/tokens/components/richtext-editor/richtext-editor.json +546 -0
package/tokens/components/scrollbar/scrollbar.json +38 -0
package/tokens/components/search/search.json +200 -0
package/tokens/components/spinner/spinner.json +44 -0
package/tokens/components/switch/switch.json +106 -0
package/tokens/components/tabs/tabs.json +136 -0
package/tokens/components/tile/tile.json +186 -0
package/tokens/components/time/time.json +90 -0
package/tokens/components/toast/toast.json +214 -0
package/tokens/components/toggle/toggle.json +98 -0
package/tokens/components/wizard/wizard.json +232 -0
package/tokens/global/border/border.json +96 -0
package/tokens/global/box-shadow/box-shadow.json +9 -0
package/tokens/{primitives → global}/colors/color.dark.json +12 -3
package/tokens/global/colors/color.json +343 -0
package/tokens/{semantics → global}/font/font.json +74 -20
package/tokens/global/gap/gap.json +58 -0
package/tokens/{semantics → global}/icon/icon.json +1 -1
package/tokens/global/margin/margin.json +57 -0
package/tokens/global/radius/radius.json +45 -0
package/tokens/global/shadow/shadow.json +74 -0
package/tokens/global/space/space.json +57 -0
package/tokens/global/spacer/spacer.json +46 -0
package/utils/style-dictionary-utils.d.ts +7 -0
package/utils/style-dictionary-utils.js +65 -0
package/utils/style-dictionary-utils.js.map +1 -0
package/tokens/primitives/border/border.json +0 -10
package/tokens/primitives/colors/color.json +0 -163
package/tokens/primitives/font/font.json +0 -20
package/tokens/primitives/radius/radius.json +0 -14
package/tokens/primitives/space/space.json +0 -57
package/tokens/primitives/spacer/spacer.json +0 -45
package/tokens/semantics/box-shadow/box-shadow.json +0 -8
package/tokens/semantics/colors/color.json +0 -948
/package/tokens/{primitives → global}/colors/color.light.json +0 -0
/package/tokens/{semantics → global}/opacity/opacity.json +0 -0

package/foundation/foundation.css CHANGED Viewed

@@ -1,10 +1,47 @@
 /**--import css variables file--**/
 @import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 :root {
+  --wm-icon-size: 24px;
+  --wm-icon-size-xs: calc(var(--wm-icon-size) * 0.5);
+  --wm-icon-size-sm: calc(var(--wm-icon-size) * 0.75);
+  --wm-icon-size-md: calc(var(--wm-icon-size) * 1);
+  --wm-icon-size-lg: calc(var(--wm-icon-size) * 1.25);
+  --wm-icon-size-2x: calc(var(--wm-icon-size) * 1.5);
+  --wm-icon-size-3x: calc(var(--wm-icon-size) * 1.75);
+  --wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
+  --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
   --wm-border-color: var(--wm-color-outline-variant);
   --wm-border-color-translucent: rgba(0, 0, 0, 0.175);
-  --wm-border-width: 1px;
-  --wm-border-style: solid;
+  --wm-border-width-0: calc(var(--wm-border-width-base) * 0);
+  --wm-border-width-1: calc(var(--wm-border-width-base) * 1);
+  --wm-border-width-2: calc(var(--wm-border-width-base) * 2);
+  --wm-border-width-3: calc(var(--wm-border-width-base) * 3);
+  --wm-border-width-4: calc(var(--wm-border-width-base) * 4);
+  --wm-border-width-5: calc(var(--wm-border-width-base) * 5);
+  --wm-border-width-6: calc(var(--wm-border-width-base) * 6);
+  --wm-border-width-7: calc(var(--wm-border-width-base) * 7);
+  --wm-border-width-8: calc(var(--wm-border-width-base) * 8);
+  --wm-border-width-9: calc(var(--wm-border-width-base) * 9);
+  --wm-border-width-10: calc(var(--wm-border-width-base) * 10);
+  --wm-border-width-11: calc(var(--wm-border-width-base) * 11);
+  --wm-border-width-12: calc(var(--wm-border-width-base) * 12);
+  --wm-border-width-base: 1px;
+  --wm-border-style-base: var(--wm-border-style-solid);
+  --wm-border-style-none: none;
+  --wm-border-style-solid: solid;
+  --wm-border-style-dotted: dotted;
+  --wm-border-style-dashed: dashed;
+  --wm-border-style-double: double;
+  --wm-border-style-groove: groove;
+  --wm-border-style-ridge: ridge;
+  --wm-border-style-inset: inset;
+  --wm-border-style-outset: outset;
+  --wm-border-style-hidden: hidden;
+  --wm-box-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --wm-box-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --wm-box-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+  --wm-box-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
+  --wm-box-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
   --wm-color-primary: #FF7250;
   --wm-color-primary-container: #ffe3dc;
   --wm-color-primary-fixed: #ffe8e2;
@@ -31,15 +68,15 @@
   --wm-color-on-tertiary-fixed-variant: #544c31;
   --wm-color-success: #5AC588;
   --wm-color-success-container: #d6ffe8;
-  --wm-color-on-success: #ffffff;
+  --wm-color-on-success: #FFFFFF;
   --wm-color-on-success-container: #11251a;
   --wm-color-info: #00c8ff;
   --wm-color-info-container: #ddf7ff;
-  --wm-color-on-info: #ffffff;
+  --wm-color-on-info: #FFFFFF;
   --wm-color-on-info-container: #191919;
   --wm-color-warning: #ffae00;
   --wm-color-warning-container: #fff4d5;
-  --wm-color-on-warning: #ffffff;
+  --wm-color-on-warning: #FFFFFF;
   --wm-color-on-warning-container: #1b1b1b;
   --wm-color-error: #EF3F3F;
   --wm-color-error-container: #F9DEDC;
@@ -47,14 +84,18 @@
   --wm-color-on-error-container: #410E0B;
   --wm-color-background: #FFFFFF;
   --wm-color-on-background: #35363B;
+  --wm-color-outline: #79747E;
+  --wm-color-outline-variant: #E4E4E4;
+  --wm-color-shadow: #000000;
+  --wm-color-scrim: #000000;
   --wm-color-surface: #FFFFFF;
   --wm-color-surface-variant: #FBFBFC;
   --wm-color-surface-bright: #f3f4fe;
   --wm-color-surface-dim: #c5c6d4;
   --wm-color-surface-tint: #474b98;
   --wm-color-surface-container: #ebebf7;
-  --wm-color-surface-container-low: #f2f3fc;
-  --wm-color-surface-container-lowest: #FFFFFF;
+  --wm-color-surface-container-low: #f0f2ff;
+  --wm-color-surface-container-lowest: #f5f7ff;
   --wm-color-surface-container-high: #e8e8f1;
   --wm-color-surface-container-highest: #dfe0e9;
   --wm-color-on-surface: #1D1B20;
@@ -62,10 +103,6 @@
   --wm-color-inverse-surface: #2d2d33;
   --wm-color-inverse-on-surface: #f5f5ff;
   --wm-color-inverse-primary: #ffd4c9;
-  --wm-color-outline: #79747E;
-  --wm-color-outline-variant: #E4E4E4;
-  --wm-color-shadow: #000000;
-  --wm-color-scrim: #000000;
   --wm-color-white: #FFFFFF;
   --wm-color-black: #000000;
   --wm-font-weight-thin: 100;
@@ -80,257 +117,21 @@
   --wm-font-family-brand: Roboto, var(--wm-font-family-backup);
   --wm-font-family-plain: Roboto, var(--wm-font-family-backup);
   --wm-font-family-backup: Arial, Helvetica, sans-serif;
-  --wm-radius-none: 0px;
-  --wm-radius-xxs: 2px;
-  --wm-radius-xs: 4px;
-  --wm-radius-sm: 8px;
-  --wm-radius-md: 12px;
-  --wm-radius-lg: 16px;
-  --wm-radius-xl: 28px;
-  --wm-radius-xxl: 32px;
-  --wm-radius-pill: 1000px;
-  --wm-radius-circle: 50%;
-  --wm-space-0: calc(var(--wm-space-rule) * 0);
-  --wm-space-1: calc(var(--wm-space-rule) * 1);
-  --wm-space-2: calc(var(--wm-space-rule) * 2);
-  --wm-space-3: calc(var(--wm-space-rule) * 3);
-  --wm-space-4: calc(var(--wm-space-rule) * 4);
-  --wm-space-5: calc(var(--wm-space-rule) * 5);
-  --wm-space-6: calc(var(--wm-space-rule) * 6);
-  --wm-space-7: calc(var(--wm-space-rule) * 7);
-  --wm-space-8: calc(var(--wm-space-rule) * 8);
-  --wm-space-9: calc(var(--wm-space-rule) * 9);
-  --wm-space-10: calc(var(--wm-space-rule) * 10);
-  --wm-space-11: calc(var(--wm-space-rule) * 11);
-  --wm-space-12: calc(var(--wm-space-rule) * 12);
-  --wm-space-rule: 0.25rem;
-  --wm-spacer-0: calc(var(--wm-spacer) * 0);
-  --wm-spacer-1: calc(var(--wm-spacer) * 0.25);
-  --wm-spacer-2: calc(var(--wm-spacer) * 0.5);
-  --wm-spacer-3: calc(var(--wm-spacer) * 1);
-  --wm-spacer-4: calc(var(--wm-spacer) * 1.6);
-  --wm-spacer-5: calc(var(--wm-spacer) * 2.5);
-  --wm-spacer-6: calc(var(--wm-spacer) * 3.5);
-  --wm-spacer-7: calc(var(--wm-spacer) * 4);
-  --wm-spacer-8: calc(var(--wm-spacer) * 8);
-  --wm-spacer-9: calc(var(--wm-spacer) * 11);
-  --wm-spacer: 1rem;
-}
-@media (prefers-color-scheme: dark) {
-  :root:not(:has(.wm-studio)) {
-    --wm-color-primary: #d0bcfe;
-    --wm-color-primary-container: #4f378b;
-    --wm-color-primary-fixed: #eaddff;
-    --wm-color-primary-fixed-dim: #d0bcff;
-    --wm-color-on-primary: #381e72;
-    --wm-color-on-primary-container: #eaddff;
-    --wm-color-on-primary-fixed: #21005d;
-    --wm-color-on-primary-fixed-variant: #4f378b;
-    --wm-color-secondary: #ccc2dc;
-    --wm-color-secondary-container: #4a4458;
-    --wm-color-secondary-fixed: #e8def8;
-    --wm-color-secondary-fixed-dim: #ccc2dc;
-    --wm-color-on-secondary: #332d41;
-    --wm-color-on-secondary-container: #e8def8;
-    --wm-color-on-secondary-fixed: #1d192b;
-    --wm-color-on-secondary-fixed-variant: #4a4458;
-    --wm-color-tertiary: #efb8c8;
-    --wm-color-tertiary-container: #633b48;
-    --wm-color-tertiary-fixed: #ffd8e4;
-    --wm-color-tertiary-fixed-dim: #efb8c8;
-    --wm-color-on-tertiary: #492532;
-    --wm-color-on-tertiary-container: #ffd8e4;
-    --wm-color-on-tertiary-fixed: #31111d;
-    --wm-color-on-tertiary-fixed-variant: #633b48;
-    --wm-color-error: #f2b8b5;
-    --wm-color-error-container: #8c1d18;
-    --wm-color-on-error: #601410;
-    --wm-color-on-error-container: #f9dedc;
-    --wm-color-background: #141218;
-    --wm-color-on-background: #e6e0e9;
-    --wm-color-surface: #141218;
-    --wm-color-surface-variant: #49454f;
-    --wm-color-surface-bright: #3b383e;
-    --wm-color-surface-dim: #141218;
-    --wm-color-surface-tint: #d0bcff;
-    --wm-color-surface-container: #211f26;
-    --wm-color-surface-container-low: #1d1b20;
-    --wm-color-surface-container-lowest: #0f0d13;
-    --wm-color-surface-container-high: #2b2930;
-    --wm-color-surface-container-highest: #36343b;
-    --wm-color-on-surface: #e6e0e9;
-    --wm-color-on-surface-variant: #cac4d0;
-    --wm-color-inverse-surface: #e6e0e9;
-    --wm-color-inverse-on-surface: #322f35;
-    --wm-color-inverse-primary: #6750a4;
-    --wm-color-outline: #938f99;
-    --wm-color-outline-variant: #49454f;
-    --wm-color-shadow: #ffffff;
-    --wm-color-scrim: #000000;
-    --wm-color-on-success: #1d192b;
-  }
-}
-:root {
-  --wm-color-primary-container-hover: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-primary-container-focus: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-primary-container-active: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-primary-fixed-hover: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-primary-fixed-focus: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-primary-fixed-active: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-primary-hover: color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-primary-focus: color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-primary-active: color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-primary-container-hover: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-primary-container-focus: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-primary-container-active: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-primary-fixed-hover: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-primary-fixed-focus: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-primary-fixed-active: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-primary-hover: color-mix(in srgb, var(--wm-color-on-primary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-primary-focus: color-mix(in srgb, var(--wm-color-on-primary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-primary-active: color-mix(in srgb, var(--wm-color-on-primary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-secondary-container-hover: color-mix(in srgb, var(--wm-color-secondary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-secondary-container-focus: color-mix(in srgb, var(--wm-color-secondary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-secondary-container-active: color-mix(in srgb, var(--wm-color-secondary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-secondary-fixed-hover: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-secondary-fixed-focus: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-secondary-fixed-active: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-secondary-hover: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-secondary-focus: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-secondary-active: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-secondary-container-hover: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-secondary-container-focus: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-secondary-container-active: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-secondary-fixed-hover: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-secondary-fixed-focus: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-secondary-fixed-active: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-secondary-hover: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-secondary-focus: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-secondary-active: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-tertiary-container-hover: color-mix(in srgb, var(--wm-color-tertiary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-tertiary-container-focus: color-mix(in srgb, var(--wm-color-tertiary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-tertiary-container-active: color-mix(in srgb, var(--wm-color-tertiary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-tertiary-fixed-hover: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-tertiary-fixed-focus: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-tertiary-fixed-active: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-tertiary-hover: color-mix(in srgb, var(--wm-color-tertiary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-tertiary-focus: color-mix(in srgb, var(--wm-color-tertiary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-tertiary-active: color-mix(in srgb, var(--wm-color-tertiary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-tertiary-container-hover: color-mix(in srgb, var(--wm-color-on-tertiary-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-tertiary-container-focus: color-mix(in srgb, var(--wm-color-on-tertiary-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-tertiary-container-active: color-mix(in srgb, var(--wm-color-on-tertiary-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-tertiary-fixed-hover: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-tertiary-fixed-focus: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-tertiary-fixed-active: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-tertiary-hover: color-mix(in srgb, var(--wm-color-on-tertiary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-tertiary-focus: color-mix(in srgb, var(--wm-color-on-tertiary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-tertiary-active: color-mix(in srgb, var(--wm-color-on-tertiary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-success-container-hover: color-mix(in srgb, var(--wm-color-success-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-success-container-focus: color-mix(in srgb, var(--wm-color-success-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-success-container-active: color-mix(in srgb, var(--wm-color-success-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-success-hover: color-mix(in srgb, var(--wm-color-success), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-success-focus: color-mix(in srgb, var(--wm-color-success), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-success-active: color-mix(in srgb, var(--wm-color-success), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-success-container-hover: color-mix(in srgb, var(--wm-color-on-success-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-success-container-focus: color-mix(in srgb, var(--wm-color-on-success-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-success-container-active: color-mix(in srgb, var(--wm-color-on-success-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-success-hover: color-mix(in srgb, var(--wm-color-on-success), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-success-focus: color-mix(in srgb, var(--wm-color-on-success), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-success-active: color-mix(in srgb, var(--wm-color-on-success), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-info-container-hover: color-mix(in srgb, var(--wm-color-info-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-info-container-focus: color-mix(in srgb, var(--wm-color-info-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-info-container-active: color-mix(in srgb, var(--wm-color-info-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-info-hover: color-mix(in srgb, var(--wm-color-info), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-info-focus: color-mix(in srgb, var(--wm-color-info), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-info-active: color-mix(in srgb, var(--wm-color-info), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-info-container-hover: color-mix(in srgb, var(--wm-color-on-info-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-info-container-focus: color-mix(in srgb, var(--wm-color-on-info-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-info-container-active: color-mix(in srgb, var(--wm-color-on-info-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-info-hover: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-info-focus: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-info-active: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-warning-container-hover: color-mix(in srgb, var(--wm-color-warning-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-warning-container-focus: color-mix(in srgb, var(--wm-color-warning-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-warning-container-active: color-mix(in srgb, var(--wm-color-warning-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-warning-hover: color-mix(in srgb, var(--wm-color-warning), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-warning-focus: color-mix(in srgb, var(--wm-color-warning), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-warning-active: color-mix(in srgb, var(--wm-color-warning), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-warning-container-hover: color-mix(in srgb, var(--wm-color-on-warning-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-warning-container-focus: color-mix(in srgb, var(--wm-color-on-warning-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-warning-container-active: color-mix(in srgb, var(--wm-color-on-warning-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-warning-hover: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-warning-focus: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-warning-active: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-error-container-hover: color-mix(in srgb, var(--wm-color-error-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-error-container-focus: color-mix(in srgb, var(--wm-color-error-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-error-container-active: color-mix(in srgb, var(--wm-color-error-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-error-hover: color-mix(in srgb, var(--wm-color-error), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-error-focus: color-mix(in srgb, var(--wm-color-error), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-error-active: color-mix(in srgb, var(--wm-color-error), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-error-container-hover: color-mix(in srgb, var(--wm-color-on-error-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-error-container-focus: color-mix(in srgb, var(--wm-color-on-error-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-error-container-active: color-mix(in srgb, var(--wm-color-on-error-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-error-hover: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-error-focus: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-error-active: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-background-hover: color-mix(in srgb, var(--wm-color-background), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-background-focus: color-mix(in srgb, var(--wm-color-background), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-background-active: color-mix(in srgb, var(--wm-color-background), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-background-hover: color-mix(in srgb, var(--wm-color-on-background), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-background-focus: color-mix(in srgb, var(--wm-color-on-background), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-background-active: color-mix(in srgb, var(--wm-color-on-background), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-surface-container-hover: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-surface-container-focus: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-surface-container-active: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-surface-hover: color-mix(in srgb, var(--wm-color-surface), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-surface-focus: color-mix(in srgb, var(--wm-color-surface), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-surface-active: color-mix(in srgb, var(--wm-color-surface), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-on-surface-hover: color-mix(in srgb, var(--wm-color-on-surface), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-on-surface-focus: color-mix(in srgb, var(--wm-color-on-surface), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-on-surface-active: color-mix(in srgb, var(--wm-color-on-surface), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-inverse-surface-hover: color-mix(in srgb, var(--wm-color-inverse-surface), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-inverse-surface-focus: color-mix(in srgb, var(--wm-color-inverse-surface), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-inverse-surface-active: color-mix(in srgb, var(--wm-color-inverse-surface), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-inverse-on-surface-hover: color-mix(in srgb, var(--wm-color-inverse-on-surface), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-inverse-on-surface-focus: color-mix(in srgb, var(--wm-color-inverse-on-surface), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-inverse-on-surface-active: color-mix(in srgb, var(--wm-color-inverse-on-surface), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-inverse-primary-hover: color-mix(in srgb, var(--wm-color-inverse-primary), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-inverse-primary-focus: color-mix(in srgb, var(--wm-color-inverse-primary), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-inverse-primary-active: color-mix(in srgb, var(--wm-color-inverse-primary), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-outline-hover: color-mix(in srgb, var(--wm-color-outline), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-outline-focus: color-mix(in srgb, var(--wm-color-outline), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-outline-active: color-mix(in srgb, var(--wm-color-outline), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-shadow-hover: color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-shadow-focus: color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-shadow-active: color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-scrim-hover: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-scrim-focus: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-scrim-active: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-white-hover: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-white-focus: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-white-active: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-color-black-hover: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-hover)));
-  --wm-color-black-focus: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-focus)));
-  --wm-color-black-active: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-active)));
-  --wm-box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.1);
-  --wm-box-shadow-sm: 0 0.125rem 0.25rem rgba(29, 58, 83, 0.15);
-  --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
-  --wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --wm-display-large-font-family: var(--wm-font-family-brand);
-  --wm-display-large-font-weight: var(--wm-font-weight-regular);
-  --wm-display-large-font-size: 57px;
-  --wm-display-large-line-height: 64px;
-  --wm-display-large-letter-spacing: -0.25px;
-  --wm-display-medium-font-family: var(--wm-font-family-brand);
-  --wm-display-medium-font-weight: var(--wm-font-weight-regular);
-  --wm-display-medium-font-size: 45px;
-  --wm-display-medium-line-height: 52px;
-  --wm-display-medium-letter-spacing: 0px;
-  --wm-display-small-font-family: var(--wm-font-family-brand);
-  --wm-display-small-font-weight: var(--wm-font-weight-regular);
-  --wm-display-small-font-size: 36px;
-  --wm-display-small-line-height: 44px;
-  --wm-display-small-letter-spacing: 0px;
+  --wm-body-large-font-family: var(--wm-font-family-brand);
+  --wm-body-large-font-weight: var(--wm-font-weight-regular);
+  --wm-body-large-font-size: 16px;
+  --wm-body-large-line-height: 24px;
+  --wm-body-large-letter-spacing: 0.5px;
+  --wm-body-medium-font-family: var(--wm-font-family-brand);
+  --wm-body-medium-font-weight: var(--wm-font-weight-regular);
+  --wm-body-medium-font-size: 14px;
+  --wm-body-medium-line-height: 20px;
+  --wm-body-medium-letter-spacing: 0.25px;
+  --wm-body-small-font-family: var(--wm-font-family-brand);
+  --wm-body-small-font-weight: var(--wm-font-weight-regular);
+  --wm-body-small-font-size: 12px;
+  --wm-body-small-line-height: 16px;
+  --wm-body-small-letter-spacing: 0.4px;
   --wm-h1-font-family: var(--wm-font-family-brand);
   --wm-h1-font-weight: var(--wm-font-weight-regular);
   --wm-h1-font-size: 32px;
@@ -376,39 +177,165 @@
   --wm-label-small-font-size: 11px;
   --wm-label-small-line-height: 16px;
   --wm-label-small-letter-spacing: 0.5px;
-  --wm-body-large-font-family: var(--wm-font-family-brand);
-  --wm-body-large-font-weight: var(--wm-font-weight-regular);
-  --wm-body-large-font-size: 16px;
-  --wm-body-large-line-height: 24px;
-  --wm-body-large-letter-spacing: 0.5px;
-  --wm-body-medium-font-family: var(--wm-font-family-brand);
-  --wm-body-medium-font-weight: var(--wm-font-weight-regular);
-  --wm-body-medium-font-size: 14px;
-  --wm-body-medium-line-height: 20px;
-  --wm-body-medium-letter-spacing: 0.25px;
-  --wm-body-small-font-family: var(--wm-font-family-brand);
-  --wm-body-small-font-weight: var(--wm-font-weight-regular);
-  --wm-body-small-font-size: 12px;
-  --wm-body-small-line-height: 16px;
-  --wm-body-small-letter-spacing: 0.4px;
-  --wm-icon-size: 1.5rem;
-  --wm-icon-size-xs: calc(var(--wm-icon-size) * 0.5);
-  --wm-icon-size-sm: calc(var(--wm-icon-size) * 0.75);
-  --wm-icon-size-md: calc(var(--wm-icon-size) * 1);
-  --wm-icon-size-lg: calc(var(--wm-icon-size) * 1.25);
-  --wm-icon-size-2x: calc(var(--wm-icon-size) * 1.5);
-  --wm-icon-size-3x: calc(var(--wm-icon-size) * 1.75);
-  --wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
-  --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
+  --wm-display-large-font-family: var(--wm-font-family-brand);
+  --wm-display-large-font-weight: var(--wm-font-weight-regular);
+  --wm-display-large-font-size: 57px;
+  --wm-display-large-line-height: 64px;
+  --wm-display-large-letter-spacing: -0.25px;
+  --wm-display-medium-font-family: var(--wm-font-family-brand);
+  --wm-display-medium-font-weight: var(--wm-font-weight-regular);
+  --wm-display-medium-font-size: 45px;
+  --wm-display-medium-line-height: 52px;
+  --wm-display-medium-letter-spacing: 0px;
+  --wm-display-small-font-family: var(--wm-font-family-brand);
+  --wm-display-small-font-weight: var(--wm-font-weight-regular);
+  --wm-display-small-font-size: 36px;
+  --wm-display-small-line-height: 44px;
+  --wm-display-small-letter-spacing: 0px;
+  --wm-gap-0: calc(var(--wm-gap-base) * 0);
+  --wm-gap-1: calc(var(--wm-gap-base) * 1);
+  --wm-gap-2: calc(var(--wm-gap-base) * 2);
+  --wm-gap-3: calc(var(--wm-gap-base) * 3);
+  --wm-gap-4: calc(var(--wm-gap-base) * 4);
+  --wm-gap-5: calc(var(--wm-gap-base) * 5);
+  --wm-gap-6: calc(var(--wm-gap-base) * 6);
+  --wm-gap-7: calc(var(--wm-gap-base) * 7);
+  --wm-gap-8: calc(var(--wm-gap-base) * 8);
+  --wm-gap-9: calc(var(--wm-gap-base) * 9);
+  --wm-gap-10: calc(var(--wm-gap-base) * 10);
+  --wm-gap-11: calc(var(--wm-gap-base) * 11);
+  --wm-gap-12: calc(var(--wm-gap-base) * 12);
+  --wm-gap-base: 4px;
+  --wm-margin-0: calc(var(--wm-margin-base) * 0);
+  --wm-margin-1: calc(var(--wm-margin-base) * 1);
+  --wm-margin-2: calc(var(--wm-margin-base) * 2);
+  --wm-margin-3: calc(var(--wm-margin-base) * 3);
+  --wm-margin-4: calc(var(--wm-margin-base) * 4);
+  --wm-margin-5: calc(var(--wm-margin-base) * 5);
+  --wm-margin-6: calc(var(--wm-margin-base) * 6);
+  --wm-margin-7: calc(var(--wm-margin-base) * 7);
+  --wm-margin-8: calc(var(--wm-margin-base) * 8);
+  --wm-margin-9: calc(var(--wm-margin-base) * 9);
+  --wm-margin-10: calc(var(--wm-margin-base) * 10);
+  --wm-margin-11: calc(var(--wm-margin-base) * 11);
+  --wm-margin-12: calc(var(--wm-margin-base) * 12);
+  --wm-margin-base: 4px;
   --wm-opacity-hover: 8%;
   --wm-opacity-focus: 12%;
   --wm-opacity-active: 16%;
+  --wm-radius-base: 2px;
+  --wm-radius-none: calc(var(--wm-radius-base) * 0);
+  --wm-radius-xxs: calc(var(--wm-radius-base) * 1);
+  --wm-radius-xs: calc(var(--wm-radius-base) * 2);
+  --wm-radius-sm: calc(var(--wm-radius-base) * 4);
+  --wm-radius-md: calc(var(--wm-radius-base) * 6);
+  --wm-radius-lg: calc(var(--wm-radius-base) * 8);
+  --wm-radius-xl: calc(var(--wm-radius-base) * 14);
+  --wm-radius-xxl: calc(var(--wm-radius-base) * 16);
+  --wm-radius-pill: 1000px;
+  --wm-radius-circle: 50%;
+  --wm-shadow-1: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
+  --wm-shadow-2: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
+  --wm-shadow-3: 0px 4px 8px 3px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
+  --wm-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
+  --wm-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
+  --wm-shadow-addon-1: 0px 1px 3px 1px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
+  --wm-shadow-addon-2: 0px 2px 6px 2px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
+  --wm-shadow-addon-3: 0px 1px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
+  --wm-shadow-addon-4: 0px 2px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
+  --wm-shadow-addon-5: 0px 4px 4px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
+  --wm-elevation-shadow-1: var(--wm-shadow-1), var(--wm-shadow-addon-1);
+  --wm-elevation-shadow-2: var(--wm-shadow-2), var(--wm-shadow-addon-2);
+  --wm-elevation-shadow-3: var(--wm-shadow-3), var(--wm-shadow-addon-3);
+  --wm-elevation-shadow-4: var(--wm-shadow-4), var(--wm-shadow-addon-4);
+  --wm-elevation-shadow-5: var(--wm-shadow-5), var(--wm-shadow-addon-5);
+  --wm-elevation-shadow-none: none;
+  --wm-space-0: calc(var(--wm-space-rule) * 0);
+  --wm-space-1: calc(var(--wm-space-rule) * 1);
+  --wm-space-2: calc(var(--wm-space-rule) * 2);
+  --wm-space-3: calc(var(--wm-space-rule) * 3);
+  --wm-space-4: calc(var(--wm-space-rule) * 4);
+  --wm-space-5: calc(var(--wm-space-rule) * 5);
+  --wm-space-6: calc(var(--wm-space-rule) * 6);
+  --wm-space-7: calc(var(--wm-space-rule) * 7);
+  --wm-space-8: calc(var(--wm-space-rule) * 8);
+  --wm-space-9: calc(var(--wm-space-rule) * 9);
+  --wm-space-10: calc(var(--wm-space-rule) * 10);
+  --wm-space-11: calc(var(--wm-space-rule) * 11);
+  --wm-space-12: calc(var(--wm-space-rule) * 12);
+  --wm-space-rule: 4px;
+  --wm-spacer-0: calc(var(--wm-spacer) * 0);
+  --wm-spacer-1: calc(var(--wm-spacer) * 0.25);
+  --wm-spacer-2: calc(var(--wm-spacer) * 0.5);
+  --wm-spacer-3: calc(var(--wm-spacer) * 1);
+  --wm-spacer-4: calc(var(--wm-spacer) * 1.6);
+  --wm-spacer-5: calc(var(--wm-spacer) * 2.5);
+  --wm-spacer-6: calc(var(--wm-spacer) * 3.5);
+  --wm-spacer-7: calc(var(--wm-spacer) * 4);
+  --wm-spacer-8: calc(var(--wm-spacer) * 8);
+  --wm-spacer-9: calc(var(--wm-spacer) * 11);
+  --wm-spacer: 1rem;
+}
+:root[color='dark'] {
+  --wm-color-primary: #d0bcfe;
+  --wm-color-primary-container: #4f378b;
+  --wm-color-primary-fixed: #eaddff;
+  --wm-color-primary-fixed-dim: #d0bcff;
+  --wm-color-on-primary: #381e72;
+  --wm-color-on-primary-container: #eaddff;
+  --wm-color-on-primary-fixed: #21005d;
+  --wm-color-on-primary-fixed-variant: #4f378b;
+  --wm-color-secondary: #ccc2dc;
+  --wm-color-secondary-container: #4a4458;
+  --wm-color-secondary-fixed: #e8def8;
+  --wm-color-secondary-fixed-dim: #ccc2dc;
+  --wm-color-on-secondary: #332d41;
+  --wm-color-on-secondary-container: #e8def8;
+  --wm-color-on-secondary-fixed: #1d192b;
+  --wm-color-on-secondary-fixed-variant: #4a4458;
+  --wm-color-tertiary: #efb8c8;
+  --wm-color-tertiary-container: #633b48;
+  --wm-color-tertiary-fixed: #ffd8e4;
+  --wm-color-tertiary-fixed-dim: #efb8c8;
+  --wm-color-on-tertiary: #492532;
+  --wm-color-on-tertiary-container: #ffd8e4;
+  --wm-color-on-tertiary-fixed: #31111d;
+  --wm-color-on-tertiary-fixed-variant: #633b48;
+  --wm-color-error: #f2b8b5;
+  --wm-color-error-container: #8c1d18;
+  --wm-color-error-fixed: #f9dedc;
+  --wm-color-on-error: #601410;
+  --wm-color-on-error-container: #f9dedc;
+  --wm-color-background: #141218;
+  --wm-color-on-background: #e6e0e9;
+  --wm-color-surface: #141218;
+  --wm-color-surface-variant: #49454f;
+  --wm-color-surface-bright: #3b383e;
+  --wm-color-surface-dim: #141218;
+  --wm-color-surface-tint: #d0bcff;
+  --wm-color-surface-container: #211f26;
+  --wm-color-surface-container-low: #1d1b20;
+  --wm-color-surface-container-lowest: #0f0d13;
+  --wm-color-surface-container-high: #2b2930;
+  --wm-color-surface-container-highest: #36343b;
+  --wm-color-on-surface: #e6e0e9;
+  --wm-color-on-surface-variant: #cac4d0;
+  --wm-color-inverse-surface: #e6e0e9;
+  --wm-color-inverse-on-surface: #322f35;
+  --wm-color-inverse-primary: #6750a4;
+  --wm-color-outline: #938f99;
+  --wm-color-outline-variant: #49454f;
+  --wm-color-shadow: #ffffff;
+  --wm-color-scrim: #000000;
+  --wm-color-on-success: #1d192b;
 }
 :root {
   /**--Components--**/
   --wm-accordion-group-gap: var(--wm-space-2);
-  /*--Anchor--*/
   --wm-anchor-color: var(--wm-color-primary);
+  --wm-anchor-color-hover: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-hover));
+  --wm-anchor-color-focus: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-focus));
+  --wm-anchor-color-active: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-active));
   --wm-anchor-font-size: var(--wm-body-medium-font-size);
   --wm-anchor-font-family: var(--wm-body-medium-font-family);
   --wm-anchor-font-weight: var(--wm-body-medium-font-weight);
@@ -419,9 +346,6 @@
   --wm-anchor-text-decoration-hover: none;
   --wm-anchor-text-decoration-focus: none;
   --wm-anchor-text-decoration-active: none;
-  --wm-anchor-color-hover: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-hover));
-  --wm-anchor-color-focus: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-focus));
-  --wm-anchor-color-active: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-active));
   --wm-anchor-gap: var(--wm-space-1);
   --wm-anchor-icon-size: var(--wm-icon-size);
   --wm-anchor-image-size: var(--wm-icon-size);
@@ -438,6 +362,7 @@
   --wm-badge-line-height: 1;
   --wm-badge-letter-spacing: var(--wm-body-small-letter-spacing);
   --wm-breadcrumb-gap: var(--wm-space-1);
+  --wm-breadcrumb-item-gap: var(--wm-space-1);
   --wm-breadcrumb-item-font-size: var(--wm-body-large-font-size);
   --wm-breadcrumb-item-font-family: var(--wm-body-large-font-family);
   --wm-breadcrumb-item-font-weight: var(--wm-body-large-font-weight);
@@ -452,15 +377,12 @@
   --wm-breadcrumb-item-color-hover: color-mix(in srgb, var(--wm-breadcrumb-item-color), var(--wm-color-black) var(--wm-opacity-hover));
   --wm-breadcrumb-item-color-focus: color-mix(in srgb, var(--wm-breadcrumb-item-color), var(--wm-color-black) var(--wm-opacity-focus));
   --wm-breadcrumb-item-color-active: color-mix(in srgb, var(--wm-breadcrumb-item-color), var(--wm-color-black) var(--wm-opacity-active));
-  --wm-breadcrumb-item-gap: var(--wm-space-1);
   --wm-breadcrumb-item-icon-color: var(--wm-color-on-background);
   --wm-breadcrumb-item-icon-size: var(--wm-icon-size-sm);
   --wm-breadcrumb-item-separator-color: var(--wm-color-outline);
   --wm-breadcrumb-item-separator-size: var(--wm-icon-size-sm);
-  /*--Button Group--*/
   --wm-button-group-horizontal-radius: var(--wm-btn-radius);
   --wm-button-group-vertical-radius: var(--wm-btn-xs-radius);
-  /*--button--*/
   --wm-btn-font-size: var(--wm-label-large-font-size);
   --wm-btn-font-family: var(--wm-label-large-font-family);
   --wm-btn-font-weight: var(--wm-label-large-font-weight);
@@ -484,8 +406,8 @@
   --wm-btn-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-btn-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-btn-disabled-color: var(--wm-color-on-surface);
-  --wm-btn-disabled-background: var(--wm-color-on-surface-active);
-  --wm-btn-disabled-border-color: var(--wm-color-on-surface-active);
+  --wm-btn-disabled-background: var(--wm-color-surface-container-highest);
+  --wm-btn-disabled-border-color: var(--wm-color-surface-container-highest);
   --wm-btn-disabled-opacity: 0.38;
   --wm-btn-icon-md-size: var(--wm-icon-size-md);
   --wm-btn-icon-md-width: 40px;
@@ -502,71 +424,67 @@
   --wm-btn-icon-lg-size: var(--wm-icon-size-lg);
   --wm-btn-icon-lg-width: 56px;
   --wm-btn-icon-lg-height: 56px;
-  --wm-btn-elevated: var(--wm-elevation-shadow-1);
-  --wm-btn-elevated-hover: var(--wm-elevation-shadow-2);
-  --wm-btn-elevated-focus: var(--wm-elevation-shadow-1);
-  --wm-btn-elevated-active: var(--wm-elevation-shadow-1);
   --wm-btn-default-background: var(--wm-color-surface);
   --wm-btn-default-color: var(--wm-color-on-surface);
   --wm-btn-default-border-color: var(--wm-color-surface-container-highest);
   --wm-btn-default-state-layer-color: var(--wm-color-on-surface);
+  --wm-btn-default-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-default-outlined-color: var(--wm-btn-color);
+  --wm-btn-default-outlined-border-color: var(--wm-color-surface-container-highest);
+  --wm-btn-default-outlined-state-layer-color: var(--wm-btn-color);
   --wm-btn-primary-background: var(--wm-color-primary);
   --wm-btn-primary-color: var(--wm-color-on-primary);
   --wm-btn-primary-border-color: var(--wm-color-primary);
   --wm-btn-primary-state-layer-color: var(--wm-color-on-primary);
+  --wm-btn-primary-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-primary-outlined-color: var(--wm-color-primary);
+  --wm-btn-primary-outlined-border-color: var(--wm-color-primary);
+  --wm-btn-primary-outlined-state-layer-color: var(--wm-color-primary);
   --wm-btn-secondary-background: var(--wm-color-secondary);
   --wm-btn-secondary-color: var(--wm-color-on-secondary);
   --wm-btn-secondary-border-color: var(--wm-color-secondary);
   --wm-btn-secondary-state-layer-color: var(--wm-color-on-secondary);
+  --wm-btn-secondary-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-secondary-outlined-color: var(--wm-color-secondary);
+  --wm-btn-secondary-outlined-border-color: var(--wm-color-secondary);
+  --wm-btn-secondary-outlined-state-layer-color: var(--wm-color-secondary);
   --wm-btn-tertiary-background: var(--wm-color-tertiary);
   --wm-btn-tertiary-color: var(--wm-color-on-tertiary);
   --wm-btn-tertiary-border-color: var(--wm-color-tertiary);
   --wm-btn-tertiary-state-layer-color: var(--wm-color-on-tertiary);
+  --wm-btn-tertiary-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-tertiary-outlined-color: var(--wm-color-tertiary);
+  --wm-btn-tertiary-outlined-border-color: var(--wm-color-tertiary);
+  --wm-btn-tertiary-outlined-state-layer-color: var(--wm-color-tertiary);
   --wm-btn-success-background: var(--wm-color-primary);
   --wm-btn-success-color: var(--wm-color-on-primary);
   --wm-btn-success-border-color: var(--wm-color-primary);
   --wm-btn-success-state-layer-color: var(--wm-color-on-primary);
+  --wm-btn-success-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-success-outlined-color: var(--wm-color-primary);
+  --wm-btn-success-outlined-border-color: var(--wm-color-primary);
+  --wm-btn-success-outlined-state-layer-color: var(--wm-color-primary);
   --wm-btn-info-background: var(--wm-color-info);
   --wm-btn-info-color: var(--wm-color-on-info);
   --wm-btn-info-border-color: var(--wm-color-info);
   --wm-btn-info-state-layer-color: var(--wm-color-on-info);
+  --wm-btn-info-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-info-outlined-color: var(--wm-color-info);
+  --wm-btn-info-outlined-border-color: var(--wm-color-info);
+  --wm-btn-info-outlined-state-layer-color: var(--wm-color-info);
   --wm-btn-warning-background: var(--wm-color-warning);
   --wm-btn-warning-color: var(--wm-color-on-warning);
   --wm-btn-warning-border-color: var(--wm-color-warning);
   --wm-btn-warning-state-layer-color: var(--wm-color-on-warning);
+  --wm-btn-warning-outlined-background: rgba(0, 0, 0, 0);
+  --wm-btn-warning-outlined-color: var(--wm-color-warning);
+  --wm-btn-warning-outlined-border-color: var(--wm-color-warning);
+  --wm-btn-warning-outlined-state-layer-color: var(--wm-color-warning);
   --wm-btn-danger-background: var(--wm-color-error);
   --wm-btn-danger-color: var(--wm-color-on-error);
   --wm-btn-danger-border-color: var(--wm-color-error);
   --wm-btn-danger-state-layer-color: var(--wm-color-on-error);
-  --wm-btn-default-outlined-background: transparent;
-  --wm-btn-default-outlined-color: var(--wm-btn-color);
-  --wm-btn-default-outlined-border-color: var(--wm-color-surface-container-highest);
-  --wm-btn-default-outlined-state-layer-color: var(--wm-btn-color);
-  --wm-btn-primary-outlined-background: transparent;
-  --wm-btn-primary-outlined-color: var(--wm-color-primary);
-  --wm-btn-primary-outlined-border-color: var(--wm-color-primary);
-  --wm-btn-primary-outlined-state-layer-color: var(--wm-color-primary);
-  --wm-btn-secondary-outlined-background: transparent;
-  --wm-btn-secondary-outlined-color: var(--wm-color-secondary);
-  --wm-btn-secondary-outlined-border-color: var(--wm-color-secondary);
-  --wm-btn-secondary-outlined-state-layer-color: var(--wm-color-secondary);
-  --wm-btn-tertiary-outlined-background: transparent;
-  --wm-btn-tertiary-outlined-color: var(--wm-color-tertiary);
-  --wm-btn-tertiary-outlined-border-color: var(--wm-color-tertiary);
-  --wm-btn-tertiary-outlined-state-layer-color: var(--wm-color-tertiary);
-  --wm-btn-success-outlined-background: transparent;
-  --wm-btn-success-outlined-color: var(--wm-color-primary);
-  --wm-btn-success-outlined-border-color: var(--wm-color-primary);
-  --wm-btn-success-outlined-state-layer-color: var(--wm-color-primary);
-  --wm-btn-info-outlined-background: transparent;
-  --wm-btn-info-outlined-color: var(--wm-color-info);
-  --wm-btn-info-outlined-border-color: var(--wm-color-info);
-  --wm-btn-info-outlined-state-layer-color: var(--wm-color-info);
-  --wm-btn-warning-outlined-background: transparent;
-  --wm-btn-warning-outlined-color: var(--wm-color-warning);
-  --wm-btn-warning-outlined-border-color: var(--wm-color-warning);
-  --wm-btn-warning-outlined-state-layer-color: var(--wm-color-warning);
-  --wm-btn-danger-outlined-background: transparent;
+  --wm-btn-danger-outlined-background: rgba(0, 0, 0, 0);
   --wm-btn-danger-outlined-color: var(--wm-color-error);
   --wm-btn-danger-outlined-border-color: var(--wm-color-error);
   --wm-btn-danger-outlined-state-layer-color: var(--wm-color-error);
@@ -587,7 +505,7 @@
   --wm-btn-sm-line-height: var(--wm-label-medium-line-height);
   --wm-btn-sm-letter-spacing: var(--wm-label-medium-letter-spacing);
   --wm-btn-sm-radius: var(--wm-btn-radius);
-  --wm-btn-sm-padding: var(--wm-space-0) var(--wm-space-4);
+  --wm-btn-sm-padding: var(--wm-space-1) var(--wm-space-4);
   --wm-btn-sm-min-width: auto;
   --wm-btn-sm-height: 36px;
   --wm-btn-sm-gap: var(--wm-space-1);
@@ -603,12 +521,11 @@
   --wm-btn-lg-height: 44px;
   --wm-btn-lg-gap: var(--wm-space-2);
   --wm-btn-lg-icon-size: var(--wm-icon-size-lg);
-  /*--card--*/
   --wm-card-list-gap: var(--wm-space-4);
   --wm-card-background: var(--wm-color-surface);
   --wm-card-background-active: var(--wm-color-secondary-container);
-  --wm-card-border-width: var(--wm-border-width);
-  --wm-card-border-style: var(--wm-border-style);
+  --wm-card-border-width: var(--wm-border-width-base);
+  --wm-card-border-style: var(--wm-border-style-base);
   --wm-card-border-color: var(--wm-color-outline-variant);
   --wm-card-border-radius: var(--wm-radius-md);
   --wm-card-shadow: none;
@@ -641,8 +558,8 @@
   --wm-card-footer-border-color: var(--wm-card-border-color);
   --wm-calendar-view-shadow: var(--wm-elevation-shadow-1);
   --wm-calendar-view-border: var(--wm-border-color-translucent);
-  --wm-calendar-view-border-style: var(--wm-border-style);
-  --wm-calendar-view-border-width: var(--wm-border-width);
+  --wm-calendar-view-border-style: var(--wm-border-style-base);
+  --wm-calendar-view-border-width: var(--wm-border-width-base);
   --wm-calendar-view-radius: var(--wm-radius-md);
   --wm-calendar-fc-header-vertical-padding: var(--wm-space-4);
   --wm-calendar-fc-header-horizontal-padding: var(--wm-space-5);
@@ -660,28 +577,27 @@
   --wm-calendar-fc-event-background: var(--wm-color-primary-fixed);
   --wm-calendar-fc-event-color: var(--wm-color-surface-tint);
   --wm-calendar-fc-event-dot-color: var(--wm-color-surface-tint);
+  --wm-calendar-fc-event-dot-primary: var(--wm-color-primary);
+  --wm-calendar-fc-event-dot-secondary: var(--wm-color-secondary);
+  --wm-calendar-fc-event-dot-tertiary: var(--wm-color-tertiary);
+  --wm-calendar-fc-event-dot-info: var(--wm-color-info);
+  --wm-calendar-fc-event-dot-success: var(--wm-color-success);
+  --wm-calendar-fc-event-dot-warning: var(--wm-color-warning);
+  --wm-calendar-fc-event-dot-danger: var(--wm-color-error);
   --wm-calendar-fc-event-primary-background: var(--wm-color-primary-container);
   --wm-calendar-fc-event-primary-color: var(--wm-color-primary);
-  --wm-calendar-fc-event-dot-primary: var(--wm-color-primary);
   --wm-calendar-fc-event-secondary-background: var(--wm-color-secondary-container);
   --wm-calendar-fc-event-secondary-color: var(--wm-color-secondary);
-  --wm-calendar-fc-event-dot-secondary: var(--wm-color-secondary);
   --wm-calendar-fc-event-tertiary-background: var(--wm-color-tertiary-container);
   --wm-calendar-fc-event-tertiary-color: var(--wm-color-tertiary);
-  --wm-calendar-fc-event-dot-tertiary: var(--wm-color-tertiary);
   --wm-calendar-fc-event-info-background: var(--wm-color-info-container);
   --wm-calendar-fc-event-info-color: var(--wm-color-info);
-  --wm-calendar-fc-event-dot-info: var(--wm-color-info);
   --wm-calendar-fc-event-success-background: var(--wm-color-success-container);
   --wm-calendar-fc-event-success-color: var(--wm-color-success);
-  --wm-calendar-fc-event-dot-success: var(--wm-color-success);
   --wm-calendar-fc-event-warning-background: var(--wm-color-warning-container);
   --wm-calendar-fc-event-warning-color: var(--wm-color-warning);
-  --wm-calendar-fc-event-dot-warning: var(--wm-color-warning);
   --wm-calendar-fc-event-danger-background: var(--wm-color-error-container);
   --wm-calendar-fc-event-danger-color: var(--wm-color-error);
-  --wm-calendar-fc-event-dot-danger: var(--wm-color-error);
-  --wm-calendar-fc-anchor-color: var(--wm-color-on-background);
   --wm-calendar-fc-event-future-background: var(--wm-color-tertiary-container);
   --wm-calendar-fc-event-future-color: var(--wm-color-tertiary);
   --wm-calendar-fc-event-future-dot: var(--wm-color-tertiary);
@@ -691,15 +607,15 @@
   --wm-calendar-fc-event-today-background: var(--wm-color-success-container);
   --wm-calendar-fc-event-today-color: var(--wm-color-success);
   --wm-calendar-fc-event-today-dot: var(--wm-color-success);
+  --wm-calendar-fc-anchor-color: var(--wm-color-on-background);
   --wm-carousel-indicators-border: var(--wm-color-primary-container);
+  --wm-carousel-indicators-border-style: var(--wm-border-style-base);
+  --wm-carousel-indicators-border-width: var(--wm-border-width-base);
   --wm-carousel-indicators-radius: var(--wm-radius-circle);
-  --wm-carousel-indicators-border-style: var(--wm-border-style);
-  --wm-carousel-indicators-border-width: var(--wm-border-width);
   --wm-carousel-indicators-background: var(--wm-color-primary-container);
   --wm-carousel-indicators-size: 10px;
   --wm-carousel-indicators-gap: var(--wm-space-2);
   --wm-carousel-control-icon-font-size: 48px;
-  /*--checkbox--*/
   --wm-checkbox-gap: var(--wm-space-1);
   --wm-checkbox-caption-font-size: var(--wm-body-large-font-size);
   --wm-checkbox-caption-font-family: var(--wm-body-large-font-family);
@@ -708,13 +624,13 @@
   --wm-checkbox-caption-letter-spacing: var(--wm-body-large-letter-spacing);
   --wm-checkbox-size: 18px;
   --wm-checkbox-icon-size: 10px;
-  --wm-checkbox-background: transparent;
+  --wm-checkbox-icon-color-selected: var(--wm-color-on-secondary);
+  --wm-checkbox-background: rgba(0, 0, 0, 0);
+  --wm-checkbox-background-selected: var(--wm-color-primary);
   --wm-checkbox-border-width: 2px;
   --wm-checkbox-border-color: var(--wm-color-on-surface-variant);
+  --wm-checkbox-border-color-selected: var(--wm-color-primary);
   --wm-checkbox-border-radius: var(--wm-radius-xxs);
-  --wm-checkbox-background-selected: var(--wm-color-secondary);
-  --wm-checkbox-icon-color-selected: var(--wm-color-on-secondary);
-  --wm-checkbox-border-color-selected: var(--wm-color-secondary);
   --wm-checkbox-state-layer-size: 40px;
   --wm-checkbox-state-layer-color: var(--wm-color-on-surface);
   --wm-checkbox-state-layer-opacity: 0;
@@ -722,7 +638,6 @@
   --wm-checkbox-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-checkbox-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-checkboxset-item-gap: var(--wm-space-6);
-  /* --chips-- */
   --wm-chips-list-gap: var(--wm-space-3);
   --wm-chips-list-icon-size: var(--wm-icon-size-sm);
   --wm-chips-list-padding: var(--wm-form-control-padding);
@@ -736,16 +651,17 @@
   --wm-chips-list-border-color-error: var(--wm-form-control-border-color-error);
   --wm-chips-list-border-radius: var(--wm-form-control-radius);
   --wm-chips-list-place-holder-color: var(--wm-form-control-color-place-holder);
-  --wm-chips-input-padding: var(--wm-space-0);
   --wm-chips-list-height: var(--wm-form-control-height);
+  --wm-chips-input-padding: var(--wm-space-0);
   --wm-chip-item-height: 32px;
   --wm-chip-item-padding: var(--wm-space-1) var(--wm-space-3);
   --wm-chip-item-gap: var(--wm-space-2);
   --wm-chip-item-color: var(--wm-color-on-surface-variant);
+  --wm-chip-item-color-selected: var(--wm-color-on-surface-variant);
   --wm-chip-item-background: none;
   --wm-chip-item-background-selected: var(--wm-color-secondary-container);
-  --wm-chip-item-border-width: var(--wm-border-width);
-  --wm-chip-item-border-style: var(--wm-border-style);
+  --wm-chip-item-border-width: var(--wm-border-width-base);
+  --wm-chip-item-border-style: var(--wm-border-style-base);
   --wm-chip-item-border-color: var(--wm-color-outline);
   --wm-chip-item-border-color-selected: var(--wm-color-secondary-container);
   --wm-chip-item-border-radius: var(--wm-radius-sm);
@@ -762,26 +678,13 @@
   --wm-chip-item-layer-opacity-active: var(--wm-opacity-active);
   --wm-chip-item-avatar-size: var(--wm-icon-size);
   --wm-chip-item-avatar-radius: var(--wm-radius-pill);
-  /*--form field/composite--*/
   --wm-form-group-gap: var(--wm-space-0);
-  --wm-caption-font-family: var(--wm-body-large-font-family);
-  --wm-caption-font-size: var(--wm-body-large-font-size);
-  --wm-caption-font-weight: var(--wm-body-large-font-weight);
-  --wm-caption-line-height: var(--wm-body-large-line-height);
-  --wm-caption-letter-spacing: var(--wm-body-large-letter-spacing);
-  --wm-caption-color: var(--wm-color-on-surface-variant);
-  --wm-caption-margin: var(--wm-space-0);
-  --wm-caption-padding: var(--wm-space-0);
-  --wm-caption-gap: calc(var(--wm-space-1) * 0.5);
-  --wm-required-content: "*";
-  --wm-required-color: var(--wm-color-error);
-  --wm-required-font-size: inherit;
-  --wm-required-font-weight: var(--wm-font-weight-bold);
   --wm-form-control-color: var(--wm-color-on-surface);
-  --wm-form-control-background: var(--wm-color-surface-container-lowest);
-  --wm-form-control-border-width: var(--wm-border-width);
-  --wm-form-control-border-style: var(--wm-border-style);
+  --wm-form-control-color-place-holder: var(--wm-color-outline);
+  --wm-form-control-background: var(--wm-color-surface);
+  --wm-form-control-border-width: var(--wm-border-width-base);
   --wm-form-control-border-width-focus: 2px;
+  --wm-form-control-border-style: var(--wm-border-style-base);
   --wm-form-control-border-color: var(--wm-color-outline);
   --wm-form-control-border-color-hover: var(--wm-color-on-surface);
   --wm-form-control-border-color-focus: var(--wm-color-secondary);
@@ -794,7 +697,19 @@
   --wm-form-control-font-weight: var(--wm-body-large-font-weight);
   --wm-form-control-line-height: var(--wm-body-large-line-height);
   --wm-form-control-letter-spacing: var(--wm-body-large-letter-spacing);
-  --wm-form-control-color-place-holder: var(--wm-color-outline);
+  --wm-caption-font-family: var(--wm-body-large-font-family);
+  --wm-caption-font-size: var(--wm-body-large-font-size);
+  --wm-caption-font-weight: var(--wm-body-large-font-weight);
+  --wm-caption-line-height: var(--wm-body-large-line-height);
+  --wm-caption-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-caption-color: var(--wm-color-on-surface-variant);
+  --wm-caption-margin: var(--wm-space-0);
+  --wm-caption-padding: var(--wm-space-0);
+  --wm-caption-gap: calc(var(--wm-space-1) * 0.5);
+  --wm-required-content: "*";
+  --wm-required-color: var(--wm-color-error);
+  --wm-required-font-size: inherit;
+  --wm-required-font-weight: var(--wm-font-weight-bold);
   --wm-help-block-color: var(--wm-color-on-surface);
   --wm-help-block-font-family: var(--wm-body-small-font-family);
   --wm-help-block-font-size: var(--wm-body-small-font-size);
@@ -805,10 +720,9 @@
   --wm-input-group-btn-height: var(--wm-btn-icon-md-height);
   --wm-input-group-btn-font-size: var(--wm-btn-icon-md-size);
   --wm-input-group-btn-border-radius: var(--wm-btn-icon-md-radius);
-  /*--Container--*/
   --wm-container-outlined-border-color: var(--wm-color-outline-variant);
-  --wm-container-outlined-border-width: var(--wm-border-width);
-  --wm-container-outlined-border-style: var(--wm-border-style);
+  --wm-container-outlined-border-width: var(--wm-border-width-base);
+  --wm-container-outlined-border-style: var(--wm-border-style-base);
   --wm-container-elevation-border-radius: var(--wm-radius-sm);
   --wm-container-elevation-shadow: var(--wm-elevation-shadow-1);
   --wm-currency-inputgroup-addon-width: 40px;
@@ -817,12 +731,11 @@
   --wm-currency-inputgroup-addon-font-weight: var(--wm-form-control-font-weight);
   --wm-currency-inputgroup-addon-line-height: var(--wm-form-control-line-height);
   --wm-currency-inputgroup-addon-letter-spacing: var(--wm-form-control-letter-spacing);
-  /* table variables   */
   --wm-data-table-border-collapse: unset;
-  --wm-data-table-overlay-background: var(--wm-color-surface-container-lowest);
-  --wm-data-table-overlay-color: var(--wm-color-black);
-  --wm-data-table-overlay-opacity: 75%;
   --wm-data-table-border-spacing: unset;
+  --wm-data-table-overlay-background: var(--wm-color-surface-container-lowest);
+  --wm-data-table-overlay-color: inherit;
+  --wm-data-table-overlay-opacity: 90%;
   --wm-data-table-padding: var(--wm-space-3);
   --wm-data-table-padding-condensed: var(--wm-space-1) var(--wm-space-2);
   --wm-data-table-thead-tr-color: var(--wm-color-on-background);
@@ -831,15 +744,14 @@
   --wm-data-table-thead-tr-font-weight: var(--wm-h5-font-weight);
   --wm-data-table-thead-tr-font-family: var(--wm-h5-font-family);
   --wm-data-table-thead-tr-line-height: var(--wm-h5-line-height);
-  --wm-data-table-thead-tr-letter-spacing: var(--wm-h5-letter-spacing);
+  --wm-data-table-thead-tr-letterspacing: var(--wm-h5-letter-spacing);
   --wm-data-table-thead-th-padding: var(--wm-data-table-padding);
-  --wm-data-table-thead-th-border-width: var(--wm-border-width);
-  --wm-data-table-thead-th-border-style: var(--wm-border-style);
+  --wm-data-table-thead-th-border-width: var(--wm-border-width-base);
+  --wm-data-table-thead-th-border-style: var(--wm-border-style-base);
   --wm-data-table-thead-th-border-color: var(--wm-border-color);
-  /*tale body*/
-  --wm-data-table-tbody-tr-background: var(--wm-color-surface-container-lowest);
-  --wm-data-table-tbody-tr-background-hover: var(--wm-color-surface-container-low);
-  --wm-data-table-tbody-tr-background-active: var(--wm-color-surface-variant);
+  --wm-data-table-tbody-tr-background: var(--wm-color-surface);
+  --wm-data-table-tbody-tr-background-hover: var(--wm-color-surface-variant);
+  --wm-data-table-tbody-tr-background-active: var(--wm-color-surface-container-lowest);
   --wm-data-table-tbody-tr-color: var(--wm-color-on-background);
   --wm-data-table-tbody-tr-font-size: var(--wm-body-large-font-size);
   --wm-data-table-tbody-tr-font-weight: var(--wm-body-large-font-weight);
@@ -847,13 +759,12 @@
   --wm-data-table-tbody-tr-line-height: var(--wm-body-large-line-height);
   --wm-data-table-tbody-tr-letter-spacing: var(--wm-body-large-letter-spacing);
   --wm-data-table-tbody-td-padding: var(--wm-data-table-padding);
-  --wm-data-table-tbody-td-border-width: var(--wm-border-width);
-  --wm-data-table-tbody-td-border-style: var(--wm-border-style);
+  --wm-data-table-tbody-td-border-width: var(--wm-border-width-base);
+  --wm-data-table-tbody-td-border-style: var(--wm-border-style-base);
   --wm-data-table-tbody-td-border-color: var(--wm-border-color);
   --wm-data-table-tbody-td-border-radius: var(--wm-radius-md);
   --wm-data-table-sort-icon-size: var(--wm-icon-size-sm);
   --wm-data-table-sort-icon-color: var(--wm-data-table-thead-tr-color);
-  /* datepicker variables */
   --wm-datepicker-color: var(--wm-color-on-surface);
   --wm-datepicker-background: var(--wm-color-surface-container-high);
   --wm-datepicker-border-radius: var(--wm-radius-lg);
@@ -870,8 +781,8 @@
   --wm-datepicker-date-height: var(--wm-space-8);
   --wm-datepicker-date-color: var(--wm-color-on-surface);
   --wm-datepicker-date-background: var(--wm-color-surface-container-high);
-  --wm-datepicker-date-border-width: var(--wm-border-width);
-  --wm-datepicker-date-border-style: var(--wm-border-style);
+  --wm-datepicker-date-border-width: var(--wm-border-width-base);
+  --wm-datepicker-date-border-style: var(--wm-border-style-base);
   --wm-datepicker-date-border-color: var(--wm-color-surface-container-high);
   --wm-datepicker-date-border-radius: var(--wm-radius-pill);
   --wm-datepicker-date-font-family: var(--wm-body-medium-font-family);
@@ -884,20 +795,19 @@
   --wm-datepicker-date-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-datepicker-date-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-datepicker-date-state-layer-opacity-active: var(--wm-opacity-active);
-  /* dropdown menu variables */
   --wm-dropdown-menu-background: var(--wm-color-surface);
   --wm-dropdown-menu-border-radius: var(--wm-radius-xs);
   --wm-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
   --wm-dropdown-menu-horizontal-padding: var(--wm-space-0) var(--wm-space-2);
+  --wm-dropdown-menu-horizontal-inline-submenu-padding: var(--wm-space-0);
   --wm-dropdown-menu-vertical-padding: var(--wm-space-2) var(--wm-space-0);
+  --wm-dropdown-menu-vertical-inline-submenu-padding: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-4);
   --wm-dropdown-menu-width: 220px;
   --wm-dropdown-menu-caret-size: var(--wm-icon-size-sm);
-  --wm-dropdown-menu-vertical-inline-submenu-padding: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-4);
-  --wm-dropdown-menu-horizontal-inline-submenu-padding: var(--wm-space-0);
   --wm-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
   --wm-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
-  --wm-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
   --wm-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
+  --wm-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
   --wm-dropdown-menu-item-letter-spacing: var(--wm-body-large-letter-spacing);
   --wm-dropdown-menu-item-color: var(--wm-color-on-surface);
   --wm-dropdown-menu-item-gap: var(--wm-space-3);
@@ -906,11 +816,10 @@
   --wm-dropdown-menu-item-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-dropdown-menu-item-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-dropdown-menu-item-state-layer-opacity-active: var(--wm-opacity-active);
-  /*--file upload--*/
   --wm-file-upload-status-padding: var(--wm-space-4);
   --wm-file-upload-status-border-color: var(--wm-border-color);
-  --wm-file-upload-status-border-width: var(--wm-border-width);
-  --wm-file-upload-status-border-style: var(--wm-border-style);
+  --wm-file-upload-status-border-width: var(--wm-border-width-base);
+  --wm-file-upload-status-border-style: var(--wm-border-style-base);
   --wm-file-upload-status-background: var(--wm-color-surface-container-low);
   --wm-file-upload-status-radius: var(--wm-radius-xs);
   --wm-file-upload-status-bottom-space: var(--wm-space-1);
@@ -928,8 +837,8 @@
   --wm-file-upload-gap: var(--wm-space-3);
   --wm-file-upload-drop-box-gap: var(--wm-space-3);
   --wm-file-upload-drop-box-bottom-space: var(--wm-space-2);
-  --wm-file-upload-multi-file-radius: var(--wm-radius-sm);
   --wm-file-upload-drop-box-background: var(--wm-btn-background);
+  --wm-file-upload-multi-file-radius: var(--wm-radius-sm);
   --wm-file-upload-message-caption-color: var(--wm-color-black);
   --wm-file-upload-message-caption-font-size: var(--wm-body-large-font-size);
   --wm-file-upload-message-caption-font-family: var(--wm-font-family-brand);
@@ -943,6 +852,15 @@
   --wm-file-upload-media-icon-size: var(--wm-icon-size);
   --wm-file-upload-media-icon-padding: var(--wm-space-1);
   --wm-icon-gap: var(--wm-space-1);
+  --wm-icon-size: 24px;
+  --wm-icon-size-xs: calc(var(--wm-icon-size) * 0.5);
+  --wm-icon-size-sm: calc(var(--wm-icon-size) * 0.75);
+  --wm-icon-size-md: calc(var(--wm-icon-size) * 1);
+  --wm-icon-size-lg: calc(var(--wm-icon-size) * 1.25);
+  --wm-icon-size-2x: calc(var(--wm-icon-size) * 1.5);
+  --wm-icon-size-3x: calc(var(--wm-icon-size) * 1.75);
+  --wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
+  --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
   --wm-grid-layout-row-gap: var(--wm-space-0);
   --wm-grid-layout-column-padding: var(--wm-space-2);
   --wm-list-background: var(--wm-color-surface);
@@ -951,51 +869,43 @@
   --wm-list-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-list-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-list-state-layer-opacity-active: var(--wm-opacity-active);
-  --wm-list-item-background: var(--wm-color-surface-container-lowest);
+  --wm-list-item-background: var(--wm-list-background);
   --wm-list-item-background-active: var(--wm-color-secondary-container);
   --wm-list-item-padding: var(--wm-space-3) var(--wm-space-4);
   --wm-list-item-header-padding: var(--wm-space-3) var(--wm-space-4);
-  --wm-list-item-header-background: var(--wm-color-surface-container-low);
+  --wm-list-item-header-background: var(--wm-color-surface-container-lowest);
   --wm-list-item-header-color: var(--wm-color-on-surface);
-  /* list variables */
   --wm-list-disabled-opacity: 0.38;
-  /*headings*/
   --wm-headings-color: var(--wm-color-on-surface);
-  /*--Message--*/
   --wm-message-container-shadow: var(--wm-elevation-shadow-3);
   --wm-message-container-border-radius: var(--wm-radius-xs);
-  --wm-message-container-border-width: var(--wm-border-width);
-  --wm-message-container-border-style: var(--wm-border-style);
+  --wm-message-container-border-width: var(--wm-border-width-base);
+  --wm-message-container-border-style: var(--wm-border-style-base);
+  --wm-message-container-border-color: var(--wm-color-primary);
   --wm-message-container-padding: var(--wm-space-3) var(--wm-space-4);
   --wm-message-container-gap: var(--wm-space-3);
-  --wm-message-font-family: var(--wm-label-large-font-family);
-  --wm-message-font-weight: var(--wm-label-large-font-weight);
-  --wm-message-font-size: var(--wm-label-large-font-size);
-  --wm-message-line-height: var(--wm-label-large-line-height);
-  --wm-message-letter-spacing: var(--wm-label-large-letter-spacing);
   --wm-message-container-background: var(--wm-color-primary);
   --wm-message-container-color: var(--wm-color-on-primary);
-  --wm-message-container-border-color: var(--wm-color-primary);
-  /* Success message */
   --wm-message-container-success-background: var(--wm-color-success);
   --wm-message-container-success-color: var(--wm-color-on-success);
   --wm-message-container-success-border-color: var(--wm-color-success);
-  /* info message */
   --wm-message-container-info-background: var(--wm-color-info);
   --wm-message-container-info-color: var(--wm-color-on-info);
   --wm-message-container-info-border-color: var(--wm-color-info);
-  /* Warning message */
   --wm-message-container-warning-background: var(--wm-color-warning);
   --wm-message-container-warning-color: var(--wm-color-on-warning);
   --wm-message-container-warning-border-color: var(--wm-color-warning);
-  /* Error message */
   --wm-message-container-danger-background: var(--wm-color-error);
   --wm-message-container-danger-color: var(--wm-color-on-error);
   --wm-message-container-danger-border-color: var(--wm-color-error);
-  /* loading message */
   --wm-message-container-loading-background: var(--wm-color-primary);
   --wm-message-container-loading-color: var(--wm-color-on-primary);
   --wm-message-container-loading-border-color: var(--wm-color-primary);
+  --wm-message-font-family: var(--wm-label-large-font-family);
+  --wm-message-font-weight: var(--wm-label-large-font-weight);
+  --wm-message-font-size: var(--wm-label-large-font-size);
+  --wm-message-line-height: var(--wm-label-large-line-height);
+  --wm-message-letter-spacing: var(--wm-label-large-letter-spacing);
   --wm-modal-margin: var(--wm-space-6);
   --wm-modal-backdrop-opacity: 50%;
   --wm-modal-backdrop-background: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
@@ -1029,13 +939,13 @@
   --wm-modal-sheet-margin: var(--wm-space-0);
   --wm-login-dialog-form-body-padding: var(--wm-space-1);
   --wm-login-dialog-form-elements-gap: var(--wm-space-2);
-  /*--Nav--*/
   --wm-nav-min-height: var(--wm-nav-item-min-height);
   --wm-nav-background: var(--wm-color-surface-container-low);
   --wm-nav-padding: var(--wm-space-2);
   --wm-nav-gap: var(--wm-space-2);
   --wm-nav-item-min-height: 44px;
-  --wm-nav-item-padding: var(--wm-space-2) var(--wm-space-6);
+  --wm-nav-item-padding-block: var(--wm-space-2);
+  --wm-nav-item-padding-inline: var(--wm-space-6);
   --wm-nav-item-font-size: var(--wm-label-large-font-size);
   --wm-nav-item-font-family: var(--wm-label-large-font-family);
   --wm-nav-item-font-weight: var(--wm-label-large-font-weight);
@@ -1044,8 +954,8 @@
   --wm-nav-item-radius: var(--wm-radius-pill);
   --wm-nav-item-gap: var(--wm-space-2);
   --wm-nav-item-color: var(--wm-color-on-surface-variant);
-  --wm-nav-item-background: var(--wm-nav-background);
   --wm-nav-item-color-selected: var(--wm-color-on-secondary-container);
+  --wm-nav-item-background: var(--wm-nav-background);
   --wm-nav-item-background-selected: var(--wm-color-secondary-container);
   --wm-nav-item-state-layer-color: var(--wm-color-on-surface);
   --wm-nav-item-state-layer-opacity-hover: var(--wm-opacity-hover);
@@ -1065,25 +975,24 @@
   --wm-nav-tabs-indicator-height: 3px;
   --wm-nav-tabs-indicator-background: var(--wm-color-secondary);
   --wm-nav-tabs-indicator-radius: var(--wm-radius-md) var(--wm-radius-md) var(--wm-radius-none) var(--wm-radius-none);
-  --wm-nav-tabs-indicator-width: calc(100% - var(--wm-space-12));
+  --wm-nav-tabs-indicator-width: calc(100% - var(--wm-space-1));
   --wm-nav-tabs-stacked-min-height: var(--wm-nav-tabs-stacked-item-min-height);
   --wm-nav-tabs-stacked-background: var(--wm-color-surface-container-low);
   --wm-nav-tabs-stacked-padding: var(--wm-space-0);
   --wm-nav-tabs-stacked-gap: var(--wm-space-0);
   --wm-nav-tabs-stacked-item-min-height: 48px;
   --wm-nav-tabs-stacked-indicator-width: 100%;
-  --wm-app-font-family: var(--wm-body-medium-font-family), var(--wm-font-family-backup);
+  --wm-app-font-family: var(--wm-body-medium-font-family);
   --wm-app-font-size: var(--wm-body-medium-font-size);
   --wm-app-font-weight: var(--wm-body-medium-font-weight);
   --wm-app-line-height: var(--wm-body-medium-line-height);
   --wm-app-letter-spacing: var(--wm-body-medium-letter-spacing);
-  --wm-app-background: var(--wm-color-surface-container-lowest);
+  --wm-app-font-smoothing: antialiased;
+  --wm-app-background: var(--wm-color-surface);
   --wm-app-color: var(--wm-color-on-background);
   --wm-app-text-transform: none;
   --wm-app-margin: 0;
   --wm-app-padding: 0;
-  /**--Page Layout--**/
-  /*--app header--*/
   --wm-header-background: var(--wm-color-white);
   --wm-header-color: var(--wm-color-on-surface-variant);
   --wm-header-height: 82px;
@@ -1097,14 +1006,12 @@
   --wm-header-link-color-hover: var(--wm-color-secondary);
   --wm-header-link-color-active: var(--wm-color-secondary);
   --wm-header-leftnav-toggle-width: 50px;
-  /*--app top nav--*/
   --wm-top-nav-background: none;
   --wm-top-nav-color: none;
   --wm-top-nav-box-shadow: none;
   --wm-top-nav-z-index: 3;
-  /*--app left panel/nav--*/
   --wm-aside-panel-width: 220px;
-  --wm-aside-panel-background: var(--wm-color-surface-container-lowest);
+  --wm-aside-panel-background: var(--wm-color-surface);
   --wm-aside-panel-color: var(--wm-color-on-surface-variant);
   --wm-aside-panel-border: 1px solid var(--wm-color-outline-variant);
   --wm-aside-panel-shadow: var(--wm-elevation-shadow-none);
@@ -1112,6 +1019,15 @@
   --wm-aside-panel-padding-right: var(--wm-space-0);
   --wm-aside-panel-padding-bottom: var(--wm-space-0);
   --wm-aside-panel-padding-left: var(--wm-space-0);
+  --wm-aside-panel-rail-width: 102px;
+  --wm-aside-panel-rail-background: var(--wm-color-surface);
+  --wm-aside-panel-rail-color: var(--wm-color-on-surface-variant);
+  --wm-aside-panel-rail-border: 1px solid var(--wm-color-outline-variant);
+  --wm-aside-panel-rail-shadow: var(--wm-elevation-shadow-none);
+  --wm-aside-panel-rail-padding-top: var(--wm-space-7);
+  --wm-aside-panel-rail-padding-right: var(--wm-space-0);
+  --wm-aside-panel-rail-padding-bottom: var(--wm-space-0);
+  --wm-aside-panel-rail-padding-left: var(--wm-space-0);
   --wm-aside-nav-padding: var(--wm-space-0);
   --wm-aside-nav-background: var(--wm-aside-panel-background);
   --wm-aside-nav-color: var(--wm-aside-panel-color);
@@ -1129,14 +1045,14 @@
   --wm-aside-nav-item-icon-height: var(--wm-icon-size);
   --wm-aside-nav-item-icon-radius: calc(var(--wm-radius-sm) * 0.75);
   --wm-aside-nav-item-icon-background: inherit;
-  --wm-aside-nav-item-icon-color: inherit;
   --wm-aside-nav-item-icon-background-active: inherit;
+  --wm-aside-nav-item-icon-color: inherit;
   --wm-aside-nav-item-icon-color-active: inherit;
   --wm-aside-nav-item-gap: var(--wm-space-2);
   --wm-aside-nav-item-color: var(--wm-aside-nav-color);
-  --wm-aside-nav-item-background: var(--wm-aside-nav-background);
   --wm-aside-nav-item-color-active: var(--wm-color-secondary);
-  --wm-aside-nav-item-background-active: linear-gradient(106deg, var(--wm-color-secondary-hover) 44.21%, var(--wm-color-primary-hover) 103.73%);
+  --wm-aside-nav-item-background: none;
+  --wm-aside-nav-item-background-active: linear-gradient(106deg, color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-hover))) 44.21%, color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-hover))) 103.73%);
   --wm-aside-nav-item-state-layer-color: var(--wm-color-on-surface);
   --wm-aside-nav-item-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-aside-nav-item-state-layer-opacity-focus: var(--wm-opacity-focus);
@@ -1166,18 +1082,9 @@
   --wm-aside-nav-submenu-item-radius: var(--wm-aside-nav-item-radius);
   --wm-aside-nav-submenu-item-gap: var(--wm-space-2);
   --wm-aside-nav-submenu-item-color: var(--wm-aside-nav-submenu-color);
-  --wm-aside-nav-submenu-item-background: var(--wm-aside-nav-submenu-background);
   --wm-aside-nav-submenu-item-color-active: var(--wm-color-on-secondary-container);
+  --wm-aside-nav-submenu-item-background: var(--wm-aside-nav-submenu-background);
   --wm-aside-nav-submenu-item-background-active: var(--wm-color-secondary-container);
-  --wm-aside-panel-rail-width: 102px;
-  --wm-aside-panel-rail-background: var(--wm-color-surface-container-lowest);
-  --wm-aside-panel-rail-color: var(--wm-color-on-surface-variant);
-  --wm-aside-panel-rail-border: 1px solid var(--wm-color-outline-variant);
-  --wm-aside-panel-rail-shadow: var(--wm-elevation-shadow-none);
-  --wm-aside-panel-rail-padding-top: var(--wm-space-7);
-  --wm-aside-panel-rail-padding-right: var(--wm-space-0);
-  --wm-aside-panel-rail-padding-bottom: var(--wm-space-0);
-  --wm-aside-panel-rail-padding-left: var(--wm-space-0);
   --wm-aside-nav-rail-padding: var(--wm-space-0);
   --wm-aside-nav-rail-background: var(--wm-aside-panel-rail-background);
   --wm-aside-nav-rail-color: var(--wm-aside-panel-rail-color);
@@ -1191,9 +1098,9 @@
   --wm-aside-nav-rail-item-line-height: var(--wm-label-medium-line-height);
   --wm-aside-nav-rail-item-letter-spacing: var(--wm-label-medium-letter-spacing);
   --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-color);
-  --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-background);
   --wm-aside-nav-rail-item-color-active: var(--wm-color-secondary);
-  --wm-aside-nav-rail-item-background-active: linear-gradient(106deg, var(--wm-color-secondary-hover) 44.21%, var(--wm-color-primary-hover) 103.73%);
+  --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-background);
+  --wm-aside-nav-rail-item-background-active: linear-gradient(106deg, var(--wm-color-secondary) 44.21%, var(--wm-color-primary) 103.73%);
   --wm-aside-nav-rail-item-radius: var(--wm-radius-none);
   --wm-aside-nav-rail-item-gap: var(--wm-space-1);
   --wm-aside-nav-rail-item-state-layer-color: var(--wm-color-on-surface);
@@ -1206,8 +1113,8 @@
   --wm-aside-nav-rail-item-icon-radius: var(--wm-radius-none);
   --wm-aside-nav-rail-item-icon-radius-active: var(--wm-radius-none);
   --wm-aside-nav-rail-item-icon-color: var(--wm-aside-nav-rail-item-color);
-  --wm-aside-nav-rail-item-icon-background: none;
   --wm-aside-nav-rail-item-icon-color-active: var(--wm-aside-nav-rail-item-color-active);
+  --wm-aside-nav-rail-item-icon-background: none;
   --wm-aside-nav-rail-item-icon-background-active: none;
   --wm-aside-nav-rail-item-icon-state-layer-color: none;
   --wm-aside-nav-rail-item-icon-state-layer-opacity-hover: var(--wm-opacity-hover);
@@ -1238,14 +1145,11 @@
   --wm-aside-nav-rail-submenu-item-radius: var(--wm-aside-nav-rail-item-radius);
   --wm-aside-nav-rail-submenu-item-gap: var(--wm-space-2);
   --wm-aside-nav-rail-submenu-item-color: var(--wm-aside-nav-rail-submenu-color);
-  --wm-aside-nav-rail-submenu-item-background: var(--wm-aside-nav-rail-submenu-background);
   --wm-aside-nav-rail-submenu-item-color-active: var(--wm-color-on-secondary-container);
+  --wm-aside-nav-rail-submenu-item-background: var(--wm-aside-nav-rail-submenu-background);
   --wm-aside-nav-rail-submenu-item-background-active: var(--wm-color-secondary-container);
-  /*--right--*/
   --wm-aside-right-nav-rail-submenu-radius: var(--wm-radius-sm) var(--wm-radius-none) var(--wm-radius-none) var(--wm-radius-sm);
-  /*--app page content--*/
   --wm-page-content-padding: var(--wm-space-0);
-  /*--app footer--*/
   --wm-footer-height: auto;
   --wm-footer-background: var(--wm-color-white);
   --wm-footer-color: var(--wm-color-on-surface);
@@ -1254,8 +1158,7 @@
   --wm-footer-shadow: var(--wm-elevation-shadow-none);
   --wm-footer-padding: var(--wm-space-0);
   --wm-pagination-item-padding: var(--wm-space-1) var(--wm-space-1);
-  --wm-pagination-item-gap: 2px;
-  /* pagination variables */
+  --wm-pagination-item-gap: var(--wm-space-1);
   --wm-pagination-page-item-link-color: var(--wm-color-on-surface);
   --wm-pagination-page-item-link-height: 32px;
   --wm-pagination-page-item-link-width: 32px;
@@ -1263,20 +1166,22 @@
   --wm-pagination-page-item-link-radius: var(--wm-radius-xs);
   --wm-pagination-page-item-link-active-background: var(--wm-color-primary);
   --wm-pagination-page-item-link-active-color: var(--wm-color-on-primary);
-  --wm-pagination-page-item-link-hover-background: var(--wm-color-primary-container);
   --wm-pagination-page-item-link-active-font-weight: var(--wm-label-medium-font-weight);
+  --wm-pagination-page-item-link-hover-background: var(--wm-color-primary-container);
   --wm-pagination-page-item-icon-size: var(--wm-icon-size-sm);
   --wm-pagination-page-item-totalcount-color: var(--wm-color-on-surface);
-  --wm-pagination-item-gap: var(--wm-space-1);
-  /* pagination pager variables */
   --wm-pagination-pager-link-elevation: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   --wm-pagination-pager-link-radius: var(--wm-radius-pill);
   --wm-pagination-pager-link-padding: var(--wm-space-2) var(--wm-space-6);
-  --wm-pagination-pager-link-background: transparent;
-  --wm-pagination-pager-previous-link-background: transparent;
+  --wm-pagination-pager-link-background: rgba(0, 0, 0, 0);
   --wm-pagination-pager-link-border-color: var(--wm-color-primary);
-  --wm-pagination-pager-link-border-width: var(--wm-border-width);
-  --wm-pagination-pager-link-border-style: var(--wm-border-style);
+  --wm-pagination-pager-link-border-width: var(--wm-border-width-base);
+  --wm-pagination-pager-link-border-style: var(--wm-border-style-base);
+  --wm-pagination-pager-link-min-width: auto;
+  --wm-pagination-pager-link-min-height: 32px;
+  --wm-pagination-pager-link-gap: var(--wm-space-2);
+  --wm-pagination-pager-link-color: var(--wm-color-on-surface);
+  --wm-pagination-pager-previous-link-background: rgba(0, 0, 0, 0);
   --wm-pagination-pager-previous-link-color: var(--wm-color-primary);
   --wm-pagination-pager-next-link-color: var(--wm-color-on-primary);
   --wm-pagination-pager-next-link-background: var(--wm-color-primary);
@@ -1288,33 +1193,43 @@
   --wm-pagination-pager-state-next-link-hover-background: var(--wm-opacity-hover);
   --wm-pagination-pager-state-next-link-active-background: var(--wm-opacity-active);
   --wm-pagination-pager-state-next-link-background: var(--wm-color-on-primary);
-  --wm-pagination-pager-link-min-width: auto;
-  --wm-pagination-pager-link-min-height: 32px;
-  --wm-pagination-pager-link-gap: var(--wm-space-2);
   --wm-pagination-pager-gap: var(--wm-space-2);
-  --wm-pagination-pager-link-color: var(--wm-color-on-surface);
-  /* classic pagination variables */
   --wm-pagination-pagecount-input-height: 32px;
   --wm-pagination-pagecount-input-width: 48px;
   --wm-pagination-pagecount-input-padding: var(--wm-space-1);
-  /* horizontal pagination variables */
   --wm-horizontal-page-slider-padding: var(--wm-space-1);
   --wm-horizontal-page-slider-gap: var(--wm-space-1);
   --wm-horizontal-page-slider-anchor-width: 32px;
   --wm-horizontal-page-slider-anchor-icon-size: var(--wm-icon-size-sm);
-  /* panel variables */
-  --wm-panel-background: var(--wm-color-surface-container-lowest);
+  --wm-panel-background: var(--wm-color-surface);
+  --wm-panel-background-default: var(--wm-color-surface-container);
+  --wm-panel-background-primary: var(--wm-color-primary-container);
+  --wm-panel-background-secondary: var(--wm-color-secondary-container);
+  --wm-panel-background-tertiary: var(--wm-color-tertiary-container);
+  --wm-panel-background-success: var(--wm-color-success-container);
+  --wm-panel-background-info: var(--wm-color-info-container);
+  --wm-panel-background-warning: var(--wm-color-warning-container);
+  --wm-panel-background-danger: var(--wm-color-error-container);
   --wm-panel-radius: var(--wm-radius-xs);
   --wm-panel-shadow: var(--wm-elevation-shadow-1);
   --wm-panel-heading-gap: var(--wm-space-2);
-  --wm-panel-heading-padding: var(--wm-space-4);
+  --wm-panel-heading-padding-block: var(--wm-space-4);
+  --wm-panel-heading-padding-inline: var(--wm-space-4);
   --wm-panel-heading-font-family: var(--wm-h4-font-family);
   --wm-panel-heading-font-size: var(--wm-h4-font-size);
   --wm-panel-heading-font-weight: var(--wm-h4-font-weight);
   --wm-panel-heading-line-height: var(--wm-h4-line-height);
   --wm-panel-heading-letter-spacing: var(--wm-h4-letter-spacing);
   --wm-panel-heading-color: var(--wm-color-on-surface);
-  --wm-panel-heading-background: var(--wm-color-surface-container-lowest);
+  --wm-panel-heading-color-default: var(--wm-color-on-surface);
+  --wm-panel-heading-color-primary: var(--wm-color-primary);
+  --wm-panel-heading-color-secondary: var(--wm-color-secondary);
+  --wm-panel-heading-color-tertiary: var(--wm-color-tertiary);
+  --wm-panel-heading-color-success: var(--wm-color-success);
+  --wm-panel-heading-color-info: var(--wm-color-info);
+  --wm-panel-heading-color-warning: var(--wm-color-warning);
+  --wm-panel-heading-color-danger: var(--wm-color-error);
+  --wm-panel-heading-background: var(--wm-color-surface);
   --wm-panel-description-font-family: var(--wm-body-medium-font-family);
   --wm-panel-description-font-size: var(--wm-body-medium-font-size);
   --wm-panel-description-font-weight: var(--wm-body-medium-font-weight);
@@ -1323,97 +1238,69 @@
   --wm-panel-description-color: var(--wm-color-on-surface-variant);
   --wm-panel-actions-gap: var(--wm-space-2);
   --wm-panel-content-padding: var(--wm-space-4);
-  --wm-panel-help-message-header-background: var(--wm-color-surface-container-lowest);
+  --wm-panel-help-message-header-background: var(--wm-color-surface);
   --wm-panel-help-message-border: var(--wm-color-outline-variant);
-  --wm-panel-help-message-border-width: var(--wm-border-width);
-  --wm-panel-help-message-border-style: var(--wm-border-style);
+  --wm-panel-help-message-border-width: var(--wm-border-width-base);
+  --wm-panel-help-message-border-style: var(--wm-border-style-base);
   --wm-panel-help-message-padding: var(--wm-space-2);
   --wm-panel-help-message-background: #fffed0;
   --wm-panel-footer-padding: var(--wm-space-4);
   --wm-panel-footer-border: var(--wm-color-outline-variant);
-  --wm-panel-footer-border-width: var(--wm-border-width);
-  --wm-panel-footer-border-style: var(--wm-border-style);
-  /* default */
-  --wm-panel-background-default: var(--wm-color-surface-container);
-  --wm-panel-heading-color-default: var(--wm-color-on-surface);
-  /* primary */
-  --wm-panel-background-primary: var(--wm-color-primary-container);
-  --wm-panel-heading-color-primary: var(--wm-color-primary);
-  /* secondary */
-  --wm-panel-background-secondary: var(--wm-color-secondary-container);
-  --wm-panel-heading-color-secondary: var(--wm-color-secondary);
-  /* tertiary */
-  --wm-panel-background-tertiary: var(--wm-color-tertiary-container);
-  --wm-panel-heading-color-tertiary: var(--wm-color-tertiary);
-  /* success */
-  --wm-panel-background-success: var(--wm-color-success-container);
-  --wm-panel-heading-color-success: var(--wm-color-success);
-  /* info */
-  --wm-panel-background-info: var(--wm-color-info-container);
-  --wm-panel-heading-color-info: var(--wm-color-info);
-  /* warning */
-  --wm-panel-background-warning: var(--wm-color-warning-container);
-  --wm-panel-heading-color-warning: var(--wm-color-warning);
-  /* danger */
-  --wm-panel-background-danger: var(--wm-color-error-container);
-  --wm-panel-heading-color-danger: var(--wm-color-error);
-  /*--Picture--*/
+  --wm-panel-footer-border-width: var(--wm-border-width-base);
+  --wm-panel-footer-border-style: var(--wm-border-style-base);
   --wm-picture-radius-rounded: var(--wm-radius-xs);
   --wm-picture-radius-circle: var(--wm-radius-circle);
   --wm-picture-radius-thumbnail: var(--wm-radius-xs);
   --wm-picture-thumbnail-padding: var(--wm-space-1);
   --wm-picture-thumbnail-border-color: var(--wm-border-color);
-  --wm-picture-thumbnail-border-style: var(--wm-border-style);
-  --wm-picture-thumbnail-border-width: var(--wm-border-width);
+  --wm-picture-thumbnail-border-style: var(--wm-border-style-base);
+  --wm-picture-thumbnail-border-width: var(--wm-border-width-base);
   --wm-picture-thumbnail-background: var(--wm-color-surface-container-low);
-  /*--Progress Bar--*/
   --wm-progress-bar-height: 16px;
-  --wm-progress-bar-background-inactive: var(--wm-color-primary-active);
+  --wm-progress-bar-background-inactive: var(--wm-color-primary-container);
   --wm-progress-bar-background-active: var(--wm-color-primary);
   --wm-progress-bar-label-color: var(--wm-color-on-primary);
+  --wm-progress-bar-label-success-color: var(--wm-color-on-success);
+  --wm-progress-bar-label-info-color: var(--wm-color-on-info);
+  --wm-progress-bar-label-warning-color: var(--wm-color-on-warning);
+  --wm-progress-bar-label-danger-color: var(--wm-color-on-error);
   --wm-progress-bar-radius: var(--wm-radius-lg);
-  --wm-progress-bar-striped: linear-gradient(45deg, var(--wm-color-surface-container-lowest-active) 25%, transparent 25%, transparent 50%, var(--wm-color-surface-container-lowest-active) 50%, var(--wm-color-surface-container-lowest-active) 75%, transparent 75%, transparent);
+  --wm-progress-bar-striped: linear-gradient(45deg, var(--wm-color-surface-container-lowest) 25%, transparent 25%, transparent 50%, var(--wm-color-surface-container-lowest) 50%, var(--wm-color-surface-container-lowest) 75%, transparent 75%, transparent);
   --wm-progress-bar-striped-size: var(--wm-space-10) var(--wm-space-10);
   --wm-progress-bar-margin: var(--wm-space-2) var(--wm-space-0);
   --wm-progress-bar-transition-time: 0.5s;
-  --wm-progress-bar-label-success-color: var(--wm-color-on-success);
   --wm-progress-bar-success-background-active: var(--wm-color-success);
-  --wm-progress-bar-success-background-inactive: var(--wm-color-success-active);
-  --wm-progress-bar-label-info-color: var(--wm-color-on-info);
+  --wm-progress-bar-success-background-inactive: var(--wm-color-success-container);
   --wm-progress-bar-info-background-active: var(--wm-color-info);
-  --wm-progress-bar-info-background-inactive: var(--wm-color-info-active);
-  --wm-progress-bar-label-warning-color: var(--wm-color-on-warning);
+  --wm-progress-bar-info-background-inactive: var(--wm-color-info-container);
   --wm-progress-bar-warning-background-active: var(--wm-color-warning);
-  --wm-progress-bar-warning-background-inactive: var(--wm-color-warning-active);
-  --wm-progress-bar-label-danger-color: var(--wm-color-on-danger);
+  --wm-progress-bar-warning-background-inactive: var(--wm-color-warning-container);
   --wm-progress-bar-danger-background-active: var(--wm-color-error);
-  --wm-progress-bar-danger-background-inactive: var(--wm-color-error-active);
-  /*--Progress Circle--*/
-  --wm-progress-circle-stroke-inactive: var(--wm-color-secondary-container);
+  --wm-progress-bar-danger-background-inactive: var(--wm-color-error-container);
+  --wm-progress-circle-stroke-inactive: var(--wm-color-primary-container);
   --wm-progress-circle-stroke-active: var(--wm-color-primary);
-  --wm-progress-circle-success-stroke-inactive: var(--wm-color-success-focus);
+  --wm-progress-circle-success-stroke-inactive: var(--wm-color-success-container);
   --wm-progress-circle-success-stroke-active: var(--wm-color-success);
-  --wm-progress-circle-info-stroke-inactive: var(--wm-color-info-focus);
+  --wm-progress-circle-info-stroke-inactive: var(--wm-color-info-container);
   --wm-progress-circle-info-stroke-active: var(--wm-color-info);
-  --wm-progress-circle-warning-stroke-inactive: var(--wm-color-warning-focus);
+  --wm-progress-circle-warning-stroke-inactive: var(--wm-color-warning-container);
   --wm-progress-circle-warning-stroke-active: var(--wm-color-warning);
-  --wm-progress-circle-danger-stroke-inactive: var(--wm-color-error-focus);
+  --wm-progress-circle-danger-stroke-inactive: var(--wm-color-error-container);
   --wm-progress-circle-danger-stroke-active: var(--wm-color-error);
-  /*--radiobutton--*/
   --wm-radiobutton-gap: var(--wm-space-1);
   --wm-radiobutton-label-font-size: var(--wm-body-large-font-size);
   --wm-radiobutton-label-font-family: var(--wm-body-large-font-family);
   --wm-radiobutton-label-font-weight: var(--wm-body-large-font-weight);
   --wm-radiobutton-label-line-height: var(--wm-body-large-line-height);
   --wm-radiobutton-label-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-radiobutton-label-color: var(--wm-color-on-surface);
+  --wm-radiobutton-label-color-selected: var(--wm-color-on-surface);
   --wm-radiobutton-size: 20px;
   --wm-radiobutton-indicator-size: 10px;
-  --wm-radiobutton-color: transparent;
-  --wm-radiobutton-label-color: var(--wm-color-on-surface);
+  --wm-radiobutton-color: rgba(0, 0, 0, 0);
+  --wm-radiobutton-color-selected: var(--wm-color-secondary);
   --wm-radiobutton-border-width: 2px;
   --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
-  --wm-radiobutton-color-selected: var(--wm-color-secondary);
-  --wm-radiobutton-label-color-selected: var(--wm-color-on-surface);
   --wm-radiobutton-state-layer-size: 40px;
   --wm-radiobutton-state-layer-color: var(--wm-color-on-surface);
   --wm-radiobutton-state-layer-opacity: 0;
@@ -1422,7 +1309,6 @@
   --wm-radiobutton-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-radiobutton-set-item-column-gap: var(--wm-space-6);
   --wm-radiobutton-set-item-row-gap: var(--wm-space-2);
-  /*--Rating--*/
   --wm-rating-gap: var(--wm-space-2);
   --wm-rating-icon-gap: var(--wm-space-1);
   --wm-rating-icon-color: var(--wm-color-on-surface);
@@ -1431,7 +1317,6 @@
   --wm-rating-icon-opacity-inactive: 0.38;
   --wm-rating-icon-opacity-active: 1;
   --wm-rating-icon-opacity-readonly: 1;
-  /* search variables  */
   --wm-search-full-screen-background: var(--wm-color-surface-container);
   --wm-search-back-btn-margin-vertical: var(--wm-space-0);
   --wm-search-back-btn-margin-horizontal: var(--wm-space-1);
@@ -1444,10 +1329,11 @@
   --wm-search-dropdown-menu-item-height: 40px;
   --wm-search-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
   --wm-search-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
-  --wm-search-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
   --wm-search-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
+  --wm-search-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
   --wm-search-dropdown-menu-item-letter-spacing: var(--wm-body-large-letter-spacing);
   --wm-search-dropdown-menu-item-color: var(--wm-color-on-surface);
+  --wm-search-dropdown-menu-item-color-matched: var(--wm-color-secondary);
   --wm-search-dropdown-menu-item-gap: var(--wm-space-2);
   --wm-search-dropdown-menu-item-padding: var(--wm-space-2) var(--wm-space-4);
   --wm-search-dropdown-menu-item-state-layer-color: var(--wm-color-on-surface);
@@ -1461,43 +1347,41 @@
   --wm-search-dropdown-menu-group-item-padding: var(--wm-space-2) var(--wm-space-4);
   --wm-search-dropdown-menu-group-item-header-font-family: var(--wm-h4-font-family);
   --wm-search-dropdown-menu-group-item-header-font-size: var(--wm-h4-font-size);
-  --wm-search-dropdown-menu-group-item-header-line-height: var(--wm-h4-line-height);
   --wm-search-dropdown-menu-group-item-header-font-weight: var(--wm-h4-font-weight);
+  --wm-search-dropdown-menu-group-item-header-line-height: var(--wm-h4-line-height);
   --wm-search-dropdown-menu-group-item-header-letter-spacing: var(--wm-h4-letter-spacing);
   --wm-search-status-background: var(--wm-color-surface-dim);
   --wm-search-status-padding: var(--wm-space-2);
   --wm-spinner-min-height: 6rem;
   --wm-spinner-background: var(--wm-color-scrim);
   --wm-spinner-background-opacity: 0.3;
-  /*--loading data msg--*/
   --wm-spinner-loading-data-msg-background: var(--wm-color-scrim);
+  --wm-spinner-loading-data-msg-background-opacity: var(--wm-opacity-hover);
   --wm-spinner-loading-data-msg-color: inherit;
   --wm-spinner-loading-data-msg-radius: inherit;
-  --wm-spinner-loading-data-msg-background-opacity: var(--wm-opacity-hover);
-  /*--segmented button--*/
   --wm-switch-btn-height: 40px;
   --wm-switch-btn-height-sm: 36px;
   --wm-switch-btn-height-xs: 32px;
   --wm-switch-btn-height-xxs: 28px;
   --wm-switch-btn-padding: var(--wm-space-1) var(--wm-space-4);
-  --wm-switch-btn-border-width: var(--wm-border-width);
-  --wm-switch-btn-border-style: var(--wm-border-style);
-  --wm-switch-btn-border-color: var(--wm-border-color);
+  --wm-switch-btn-border-width: var(--wm-border-width-base);
+  --wm-switch-btn-border-style: var(--wm-border-style-base);
+  --wm-switch-btn-border-color: var(--wm-color-outline);
+  --wm-switch-btn-border-color-active: var(--wm-color-outline);
   --wm-switch-btn-radius: var(--wm-radius-pill);
   --wm-switch-btn-icon-size: var(--wm-icon-size-sm);
   --wm-switch-btn-background: none;
-  --wm-switch-btn-color: var(--wm-color-on-surface);
   --wm-switch-btn-background-active: var(--wm-color-secondary-container);
+  --wm-switch-btn-color: var(--wm-color-on-surface);
   --wm-switch-btn-color-active: var(--wm-color-on-secondary-container);
-  --wm-switch-btn-border-color-active: var(--wm-border-color);
   --wm-switch-btn-state-layer-color: var(--wm-switch-btn-color);
   --wm-switch-btn-state-layer-color-active: var(--wm-switch-btn-color);
   --wm-switch-btn-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-switch-btn-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-switch-btn-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-tabs-background: var(--wm-color-surface);
-  --wm-tabs-nav-border-width: var(--wm-border-width);
-  --wm-tabs-nav-border-style: var(--wm-border-style);
+  --wm-tabs-nav-border-width: var(--wm-border-width-base);
+  --wm-tabs-nav-border-style: var(--wm-border-style-base);
   --wm-tabs-nav-border-color: var(--wm-color-surface-container-highest);
   --wm-tabs-item-heading-height: 48px;
   --wm-tabs-item-heading-padding: var(--wm-space-2) var(--wm-space-6);
@@ -1509,21 +1393,21 @@
   --wm-tabs-item-heading-color: var(--wm-color-on-surface-variant);
   --wm-tabs-item-heading-color-active: var(--wm-color-secondary);
   --wm-tabs-item-heading-border-width: 0px;
-  --wm-tabs-item-heading-border-style: var(--wm-border-style);
+  --wm-tabs-item-heading-border-style: var(--wm-border-style-base);
   --wm-tabs-item-heading-border-color: var(--wm-border-color);
-  --wm-tabs-item-heading-state-layer-color: var(--wm-color-secondary);
+  --wm-tabs-item-heading-state-layer-color: var(--wm-color-primary);
   --wm-tabs-item-heading-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-tabs-item-heading-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-tabs-item-heading-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-tabs-item-heading-indicator-height: 3px;
   --wm-tabs-item-heading-indicator-width: calc(100% - var(--wm-space-12));
   --wm-tabs-item-heading-indicator-radius: var(--wm-radius-md) var(--wm-radius-md) var(--wm-radius-none) var(--wm-radius-none);
-  --wm-tabs-item-heading-indicator-background: var(--wm-color-secondary);
+  --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
   --wm-tabs-content-background: inherit;
   --wm-tabs-body-padding: var(--wm-space-4);
   --wm-tabs-body-height: 100px;
   --wm-tile-padding: var(--wm-space-4);
-  --wm-tile-background: var(--wm-color-surface-container-lowest);
+  --wm-tile-background: var(--wm-color-surface);
   --wm-tile-color: var(--wm-color-on-surface);
   --wm-tile-radius: var(--wm-radius-sm);
   --wm-tile-shadow: var(--wm-elevation-shadow-1);
@@ -1543,7 +1427,6 @@
   --wm-tile-warning-color: var(--wm-color-warning);
   --wm-tile-danger-background: var(--wm-color-error-container);
   --wm-tile-danger-color: var(--wm-color-error);
-  /*--filled--*/
   --wm-tile-filled-default-background: var(--wm-color-surface-container-highest);
   --wm-tile-filled-default-color: var(--wm-color-on-surface-variant);
   --wm-tile-filled-primary-background: var(--wm-color-primary);
@@ -1560,7 +1443,6 @@
   --wm-tile-filled-warning-color: var(--wm-color-on-warning);
   --wm-tile-filled-danger-background: var(--wm-color-error);
   --wm-tile-filled-danger-color: var(--wm-color-on-error);
-  /* Timepicker styles */
   --wm-timepicker-input-font-family: var(--wm-h3-font-family);
   --wm-timepicker-input-font-size: var(--wm-h3-font-size);
   --wm-timepicker-input-font-weight: var(--wm-h3-font-weight);
@@ -1571,7 +1453,7 @@
   --wm-timepicker-background: var(--wm-color-surface-container-high);
   --wm-timepicker-border-radius: var(--wm-radius-lg);
   --wm-timepicker-padding: var(--wm-space-4);
-  --wm-timepicker-period-selector-border: var(--wm-border-width) var(--wm-border-style) var(--wm-color-outline);
+  --wm-timepicker-period-selector-border: var(--wm-border-width-base) var(--wm-border-style-base) var(--wm-color-outline);
   --wm-timepicker-period-selector-border-radius: var(--wm-radius-sm);
   --wm-timepicker-period-selector-background: var(--wm-color-tertiary-container);
   --wm-timepicker-period-selector-color: var(--wm-color-on-tertiary-container);
@@ -1580,14 +1462,29 @@
   --wm-timepicker-period-selector-font-weight: var(--wm-h5-font-weight);
   --wm-timepicker-period-selector-line-height: var(--wm-h5-line-height);
   --wm-timepicker-period-selector-letter-spacing: var(--wm-h5-letter-spacing);
-  /*--Toast--*/
   --wm-toast-container-width: 344px;
   --wm-toast-container-shadow: var(--wm-elevation-shadow-3);
   --wm-toast-container-border-radius: var(--wm-radius-xs);
-  --wm-toast-container-border-width: var(--wm-border-width);
-  --wm-toast-container-border-style: var(--wm-border-style);
-  --wm-toast-container-padding: 14px var(--wm-space-4) 14px var(--wm-space-12);
+  --wm-toast-container-border-width: var(--wm-border-width-base);
+  --wm-toast-container-border-style: var(--wm-border-style-base);
+  --wm-toast-container-border-color: var(--wm-color-info);
+  --wm-toast-container-padding-block: var(--wm-space-4);
+  --wm-toast-container-padding-inline: var(--wm-space-3);
   --wm-toast-container-gap: var(--wm-space-1);
+  --wm-toast-container-background: var(--wm-color-info);
+  --wm-toast-container-color: var(--wm-color-on-info);
+  --wm-toast-container-success-background: var(--wm-color-success);
+  --wm-toast-container-success-color: var(--wm-color-on-success);
+  --wm-toast-container-success-border-color: var(--wm-color-success);
+  --wm-toast-container-info-background: var(--wm-color-info);
+  --wm-toast-container-info-color: var(--wm-color-on-info);
+  --wm-toast-container-info-border-color: var(--wm-color-info);
+  --wm-toast-container-warning-background: var(--wm-color-warning);
+  --wm-toast-container-warning-color: var(--wm-color-on-warning);
+  --wm-toast-container-warning-border-color: var(--wm-color-warning);
+  --wm-toast-container-error-background: var(--wm-color-error);
+  --wm-toast-container-error-color: var(--wm-color-on-error);
+  --wm-toast-container-error-border-color: var(--wm-color-error);
   --wm-toast-title-font-family: var(--wm-label-large-font-family);
   --wm-toast-title-font-weight: var(--wm-label-large-font-weight);
   --wm-toast-title-font-size: var(--wm-label-large-font-size);
@@ -1598,33 +1495,15 @@
   --wm-toast-message-font-size: var(--wm-label-large-font-size);
   --wm-toast-message-line-height: var(--wm-label-large-line-height);
   --wm-toast-message-letter-spacing: var(--wm-label-large-letter-spacing);
-  --wm-toast-container-background: var(--wm-color-info);
-  --wm-toast-container-color: var(--wm-color-on-info);
-  --wm-toast-container-border-color: var(--wm-color-info);
   --wm-toast-icon: "\f2ff";
+  --wm-toast-icon-size: var(--wm-icon-size-md);
   --wm-toast-position-top: var(--wm-space-3);
   --wm-toast-position-left: var(--wm-space-3);
   --wm-toast-position-right: var(--wm-space-3);
   --wm-toast-position-bottom: var(--wm-space-3);
-  /* Success toast */
-  --wm-toast-container-success-background: var(--wm-color-success);
-  --wm-toast-container-success-color: var(--wm-color-on-success);
-  --wm-toast-container-success-border-color: var(--wm-color-success);
   --wm-toast-success-icon: "\f1cf";
-  /* info toast */
-  --wm-toast-container-info-background: var(--wm-color-info);
-  --wm-toast-container-info-color: var(--wm-color-on-info);
-  --wm-toast-container-info-border-color: var(--wm-color-info);
   --wm-toast-info-icon: "\f2ff";
-  /* Warning toast */
-  --wm-toast-container-warning-background: var(--wm-color-warning);
-  --wm-toast-container-warning-color: var(--wm-color-on-warning);
-  --wm-toast-container-warning-border-color: var(--wm-color-warning);
   --wm-toast-warning-icon: "\f24c";
-  /* Error toast */
-  --wm-toast-container-error-background: var(--wm-color-error);
-  --wm-toast-container-error-color: var(--wm-color-on-error);
-  --wm-toast-container-error-border-color: var(--wm-color-error);
   --wm-toast-error-icon: "\f24d";
   --wm-toggle-width: 52px;
   --wm-toggle-height: 32px;
@@ -1632,7 +1511,7 @@
   --wm-toggle-background-selected: var(--wm-color-secondary);
   --wm-toggle-border-width: 2px;
   --wm-toggle-border-color: var(--wm-color-outline);
-  --wm-toggle-border-style: var(--wm-border-style);
+  --wm-toggle-border-style: var(--wm-border-style-base);
   --wm-toggle-radius: var(--wm-radius-pill);
   --wm-toggle-state-layer-size: 40px;
   --wm-toggle-state-layer-color: var(--wm-color-outline);
@@ -1645,7 +1524,6 @@
   --wm-toggle-handle-size-selected: 24px;
   --wm-toggle-handle-color: var(--wm-color-outline);
   --wm-toggle-handle-color-selected: var(--wm-color-on-secondary);
-  /*-- popovers --*/
   --wm-popover-z-index: 1060;
   --wm-popover-gap: calc(var(--wm-space-1) * 2.5);
   --wm-popover-margin: var(--wm-space-1);
@@ -1669,10 +1547,9 @@
   --wm-popover-body-letter-spacing: var(--wm-body-medium-letter-spacing);
   --wm-popover-arrow-background: var(--wm-popover-background);
   --wm-popover-arrow-size: var(--wm-space-3);
-  /* wizard variables */
-  --wm-wizard-background: var(--wm-color-surface-container-lowest);
-  --wm-wizard-radius: var(--wm-radius-md);
-  --wm-wizard-shadow: var(--wm-elevation-shadow-1);
+  --wm-wizard-background: var(--wm-panel-background);
+  --wm-wizard-radius: var(--wm-panel-radius);
+  --wm-wizard-shadow: var(--wm-panel-shadow);
   --wm-wizard-padding: var(--wm-space-1);
   --wm-wizard-gap: var(--wm-space-2);
   --wm-wizard-heading-background: var(--wm-color-surface-bright);
@@ -1692,7 +1569,7 @@
   --wm-wizard-step-description-line-height: var(--wm-label-medium-line-height);
   --wm-wizard-step-description-letter-spacing: var(--wm-label-medium-letter-spacing);
   --wm-wizard-step-indicator-size: 33px;
-  --wm-wizard-step-indicator-background: transparent;
+  --wm-wizard-step-indicator-background: rgba(0, 0, 0, 0);
   --wm-wizard-step-indicator-background-current: var(--wm-color-secondary);
   --wm-wizard-step-indicator-background-active: var(--wm-wizard-step-indicator-background-current);
   --wm-wizard-step-indicator-border-width: 1.5px;
@@ -1718,31 +1595,30 @@
   --wm-wizard-vertical-heading-width: 200px;
   --wm-wizard-vertical-heading-radius: var(--wm-wizard-radius) var(--wm-radius-none) var(--wm-radius-none) var(--wm-wizard-radius);
   --wm-wizard-vertical-heading-padding: var(--wm-space-7) var(--wm-space-7) var(--wm-space-0) var(--wm-space-7);
-  --wm-wizard-vertical-connector-height: 34px;
-  /* rich text editor variables */
-  --wm-note-editor-toolbar-border-style: var(--wm-border-style);
-  --wm-note-editor-toolbar-border-width: var(--wm-border-width);
+  --wm-wizard-vertical-connector-height: 100%;
   --wm-note-editor-toolbar-border: var(--wm-border-color-translucent);
+  --wm-note-editor-toolbar-border-style: var(--wm-border-style-base);
+  --wm-note-editor-toolbar-border-width: var(--wm-border-width-base);
+  --wm-note-editor-toolbar-border-gap: var(--wm-space-1);
   --wm-note-editor-toolbar-background: var(--wm-color-white);
   --wm-note-editor-toolbar-padding: var(--wm-space-2);
   --wm-note-editor-toolbar-gap: var(--wm-space-3);
-  --wm-note-editor-toolbar-border-gap: var(--wm-space-1);
   --wm-note-editor-radius: var(--wm-radius-sm);
   --wm-note-editor-border: var(--wm-border-color-translucent);
-  --wm-note-editor-border-style: var(--wm-border-style);
-  --wm-note-editor-border-width: var(--wm-border-width);
-  --wm-note-editable-background: var(--wm-color-surface-container-low);
-  --wm-note-editable-padding: var(--wm-space-3);
-  --wm-note-editable-color: var(--wm-color-black);
-  --wm-note-editable-hr-color: var(--wm-color-inverse-on-surface);
+  --wm-note-editor-border-style: var(--wm-border-style-base);
+  --wm-note-editor-border-width: var(--wm-border-width-base);
   --wm-note-editor-note-placeholder-pdding: var(--wm-space-3);
-  /* note btn variables */
+  --wm-note-editor-note-code-padding: var(--wm-space-3);
+  --wm-note-editor-note-code-background: var(--wm-color-on-warning);
+  --wm-note-editor-note-code-color: var(--wm-color-surface);
+  --wm-note-editor-note-code-font-size: var(--wm-body-medium-font-size);
+  --wm-note-editor-note-code-font-weight: var(--wm-body-medium-font-weight);
+  --wm-note-editor-note-code-font-family: Menlo, Monaco, monospace, sans-serif;
   --wm-note-editor-btn-group-gap: var(--wm-space-2);
   --wm-note-editor-btn-padding: var(--wm-space-1);
   --wm-note-editor-btn-min-height: 28px;
   --wm-note-editor-btn-width: 28px;
   --wm-note-editor-btn-radius: var(--wm-radius-xs);
-  /* note dropdown variables */
   --wm-note-editor-dropdown-menu-background: var(--wm-color-surface);
   --wm-note-editor-dropdown-menu-border-radius: var(--wm-radius-xs);
   --wm-note-editor-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
@@ -1751,17 +1627,16 @@
   --wm-note-editor-dropdown-menu-padding: var(--wm-space-2);
   --wm-note-editor-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
   --wm-note-editor-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
-  --wm-note-editor-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
   --wm-note-editor-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
+  --wm-note-editor-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
   --wm-note-editor-dropdown-menu-item-letter-spacing: var(--wm-body-large-letter-spacing);
   --wm-note-editor-dropdown-menu-item-color: var(--wm-color-on-surface);
   --wm-note-editor-dropdown-menu-item-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-note-editor-dropdown-menu-item-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-note-editor-dropdown-menu-item-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-note-editor-dropdown-menu-min-width: 180px;
-  /* note code variables */
   --wm-note-editor-pre-border-color: var(--wm-color-secondary-fixed);
-  --wm-note-editor-pre-border-width: var(--wm-border-width);
+  --wm-note-editor-pre-border-width: var(--wm-border-width-base);
   --wm-note-editor-pre-background: var(--wm-color-surface);
   --wm-note-editor-pre-padding: var(--wm-space-2);
   --wm-note-editor-pre-radius: var(--wm-radius-xs);
@@ -1770,95 +1645,67 @@
   --wm-note-editor-pre-font-weight: var(--wm-body-small-font-weight);
   --wm-note-editor-pre-line-height: var(--wm-body-small-line-height);
   --wm-note-editor-pre-color: var(--wm-color-on-secondary-fixed-variant);
-  /* note coding variables */
-  --wm-note-editor-note-code-padding: var(--wm-space-3);
-  --wm-note-editor-note-code-background: var(--wm-color-on-warning);
-  --wm-note-editor-note-code-color: var(--wm-color-surface);
-  --wm-note-editor-note-code-font-size: var(--wm-body-medium-font-size);
-  --wm-note-editor-note-code-font-weight: var(--wm-note-editor-note-code-font-weight);
-  --wm-note-editor-note-code-font-family: Menlo, Monaco, monospace, sans-serif;
-  /* note blockquote variables */
   --wm-note-editor-blockquote-border-color: var(--wm-color-primary-container);
   --wm-note-editor-blockquote-border-width: 4px;
+  --wm-note-editor-blockquote-border-hover-color: var(--wm-color-primary);
   --wm-note-editor-blockquote-margin: var(--wm-space-3);
   --wm-note-editor-blockquote-inline-padding: var(--wm-space-3);
   --wm-note-editor-blockquote-block-padding: var(--wm-space-2);
-  --wm-note-editor-blockquote-border-hover-color: var(--wm-color-primary);
-  /* para variables */
   --wm-note-editor-para-dropdown-padding: var(--wm-space-1);
-  /* note tooltip variables */
   --wm-note-editor-tooltip-border-color: var(--wm-color-black);
   --wm-note-editor-tooltip-content-color: var(--wm-color-white);
   --wm-note-editor-tooltip-content-background: var(--wm-color-black);
+  --wm-note-editor-tooltip-content-padding: var(--wm-space-1) var(--wm-space-2);
+  --wm-note-editor-tooltip-content-max-width: 200px;
   --wm-note-editor-tooltip-arrow-border-width: 5px;
+  --wm-note-editor-tooltip-arrow-margin: var(--wm-space-1);
   --wm-note-editor-tooltip-radius: var(--wm-radius-xs);
   --wm-note-editor-tooltip-font-size: var(--wm-body-medium-font-size);
   --wm-note-editor-tooltip-font-weight: var(--wm-body-medium-font-weight);
   --wm-note-editor-tooltip-font-family: var(--wm-body-medium-font-family);
   --wm-note-editor-tooltip-padding: var(--wm-space-1);
-  --wm-note-editor-tooltip-arrow-margin-value: var(--wm-space-1);
-  --wm-note-editor-tooltip-margin-value: var(--wm-space-1);
-  --wm-note-editor-tooltip-content-padding: var(--wm-space-1) var(--wm-space-2);
-  --wm-note-editor-tooltip-content-max-width: 200px;
-  /* note color picker vaibales */
+  --wm-note-editor-tooltip-margin: var(--wm-space-1);
   --wm-note-editor-color-btn-size: 16px;
-  --wm-note-editor-palette-width: 160px;
-  --wm-note-editor-palette-gap: var(--wm-space-2);
   --wm-note-editor-color-reset-background: var(--wm-color-white);
   --wm-note-editor-color-select-background: var(--wm-color-white);
+  --wm-note-editor-color-select-btn-width: 40px;
+  --wm-note-editor-color-select-btn-height: 14px;
+  --wm-note-editor-color-select-btn-min-height: 14px;
   --wm-note-editor-color-dropdown-gap: var(--wm-space-3);
   --wm-note-editor-color-dropdown-padding: var(--wm-space-3);
   --wm-note-editor-color-palette-gap-xs: var(--wm-space-1);
   --wm-note-editor-color-row-gap: var(--wm-space-1);
-  --wm-note-editor-color-select-btn-width: 40px;
-  --wm-note-editor-color-select-btn-height: 14px;
-  --wm-note-editor-color-select-btn-min-height: 14px;
-  /* note dropzone variables */
+  --wm-note-editor-palette-width: 160px;
+  --wm-note-editor-palette-gap: var(--wm-space-2);
   --wm-note-editor-dropzone-color: var(--wm-color-primary);
   --wm-note-editor-dropzone-background: var(--wm-color-white);
   --wm-note-editor-dropzone-hover-color: var(--wm-color-primary-container);
-  /* note table variables */
   --wm-note-editor-td-border-color: var(--wm-border-color-translucent);
-  --wm-note-editor-td-border-width: var(--wm-border-width);
-  --wm-note-editor-td-border-style: var(--wm-border-style);
+  --wm-note-editor-td-border-width: var(--wm-border-width-base);
+  --wm-note-editor-td-border-style: var(--wm-border-style-base);
   --wm-note-editor-td-padding: var(--wm-space-1);
-  /* note popover styles */
-  --wm-note-editor-popover-arrow-margin-value: var(--wm-space-2);
-  --wm-note-editor-popover-margin-value: var(--wm-space-1);
+  --wm-note-editor-popover-arrow-margin: var(--wm-space-2);
+  --wm-note-editor-popover-arrow-background: var(--wm-color-white);
+  --wm-note-editor-popover-margin: var(--wm-space-1);
   --wm-note-editor-popover-background: var(--wm-color-white);
   --wm-note-editor-popover-radius: var(--wm-radius-xs);
-  --wm-note-editor-popover-padding: var(--wm-space-2);
-  --wm-note-editor-popover-arrow-background: var(--wm-color-white);
+  --wm-note-editor-popover-padding: var(--wm-space-1);
+  --wm-note-editor-popover-padding-container: var(--wm-space-2);
   --wm-note-editor-popover-content-color: var(--wm-color-black);
   --wm-note-editor-popover-content-background: var(--wm-color-white);
-  --wm-note-editor-popover-padding-value: var(--wm-space-1);
-  --wm-note-editor-popover-padding-container: var(--wm-space-2);
-  --wm-note-editor-popover-border: var(--wm-color-outline-variant);
-  --wm-note-editor-popover-btn-group-gap: var(--wm-space-2);
   --wm-note-editor-popover-content-min-width: 100px;
   --wm-note-editor-popover-content-min-height: 30px;
   --wm-note-editor-popover-content-padding: var(--wm-space-1) var(--wm-space-2);
+  --wm-note-editor-popover-border: var(--wm-color-outline-variant);
+  --wm-note-editor-popover-btn-group-gap: var(--wm-space-2);
+  --wm-note-editable-background: var(--wm-color-surface-container-low);
+  --wm-note-editable-padding: var(--wm-space-3);
+  --wm-note-editable-color: var(--wm-color-black);
+  --wm-note-editable-hr-color: var(--wm-color-inverse-on-surface);
   /*-common-*/
-  /*--shadows(elevations)--*/
-  --wm-shadow-1: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
-  --wm-shadow-2: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
-  --wm-shadow-3: 0px 4px 8px 3px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
-  --wm-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
-  --wm-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
-  --wm-shadow-addon-1: 0px 1px 3px 1px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
-  --wm-shadow-addon-2: 0px 2px 6px 2px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
-  --wm-shadow-addon-3: 0px 1px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
-  --wm-shadow-addon-4: 0px 2px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
-  --wm-shadow-addon-5: 0px 4px 4px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
-  --wm-elevation-shadow-none: none;
-  --wm-elevation-shadow-1: var(--wm-shadow-1), var(--wm-shadow-addon-1);
-  --wm-elevation-shadow-2: var(--wm-shadow-2), var(--wm-shadow-addon-2);
-  --wm-elevation-shadow-3: var(--wm-shadow-3), var(--wm-shadow-addon-3);
-  --wm-elevation-shadow-4: var(--wm-shadow-4), var(--wm-shadow-addon-4);
-  --wm-elevation-shadow-5: var(--wm-shadow-5), var(--wm-shadow-addon-5);
   --wm-scroll-bar-width: 6px;
   --wm-scroll-bar-height: 6px;
-  --wm-scroll-bar-track-bg: var(--wm-color-surface-container-lowest);
+  --wm-scroll-bar-track-bg: var(--wm-color-surface);
   --wm-scroll-bar-track-radius: 6px;
   --wm-scroll-bar-thumb-bg: var(--wm-color-surface-container-high);
   --wm-scroll-bar-thumb-radius: 6px;
@@ -1885,7 +1732,8 @@
   text-transform: var(--wm-app-text-transform);
   margin: var(--wm-app-margin);
   padding: var(--wm-app-padding);
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: var(--wm-app-font-smoothing);
+  -moz-osx-font-smoothing: var(--wm-app-font-smoothing);
   /*--Layout styles--*/
   /* basic pagination styles */
   /* pager pagination styles */
@@ -1893,8 +1741,6 @@
   /* pagination horizontal styles */
   /* Timepicker styles */
   /* toast styles */
-  /*--bootstrap 5 utilities start--*/
-  /* rtl:begin:remove */
   /*--bootstrap 5 utilities end--*/
   /**--WM Utilities--**/
 }
@@ -4896,7 +4742,7 @@
   border-radius: 0;
   margin: 0;
 }
-.wm-app .app-button-group .btn + .btn {
+.wm-app .app-button-group .btn:not(.btn-icon) + .btn:not(.btn-icon) {
   margin: 0;
 }
 .wm-app .app-button-group .btn:first-of-type {
@@ -4930,6 +4776,7 @@
   line-height: var(--wm-btn-line-height);
   letter-spacing: var(--wm-btn-letter-spacing);
   text-transform: var(--wm-btn-text-transform);
+  white-space: nowrap;
   color: var(--wm-btn-color);
   background: var(--wm-btn-background);
   border: var(--wm-btn-border-width) var(--wm-btn-border-style) var(--wm-btn-border-color);
@@ -4957,8 +4804,8 @@
 .wm-app button:has(.anchor-caption:not(:empty)) .app-icon {
   margin-left: calc(calc(var(--wm-btn-icon-size) / 3)* -1);
 }
-.wm-app .btn + .btn,
-.wm-app button + .btn {
+.wm-app .btn:not(.btn-icon) + .btn:not(.btn-icon),
+.wm-app button:not(.btn-icon) + .btn:not(.btn-icon) {
   margin-left: var(--wm-space-3);
 }
 .wm-app .btn .app-icon,
@@ -5372,7 +5219,8 @@
 .wm-app .panel > .panel-heading {
   width: 100%;
   display: flex;
-  padding: var(--wm-panel-heading-padding);
+  padding-block: var(--wm-panel-heading-padding-block);
+  padding-inline: var(--wm-panel-heading-padding-inline);
   background: var(--wm-panel-heading-background);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -6202,6 +6050,7 @@
   max-width: 100%;
 }
 .wm-app .app-chips .chip-item.active {
+  --wm-chip-item-color: var(--wm-chip-item-color-selected);
   --wm-chip-item-background: var(--wm-chip-item-background-selected);
   --wm-chip-item-border-color: var(--wm-chip-item-border-color-selected);
 }
@@ -6585,6 +6434,9 @@
 .wm-app .app-currency.input-group .form-control.app-currency-input {
   padding-left: var(--wm-currency-inputgroup-addon-width);
 }
+.wm-app .app-grid:not(:has(>.panel-heading)) {
+  --wm-panel-radius: var(--wm-radius-none);
+}
 .wm-app .app-grid > .panel-heading .panel-title {
   width: 100%;
   display: flex;
@@ -6745,7 +6597,7 @@
   letter-spacing: var(--wm-data-table-tbody-tr-letter-spacing);
   line-height: var(--wm-data-table-tbody-tr-line-height);
   color: var(--wm-data-table-tbody-tr-color);
-  background: var(--wm-table-tr-hover-background);
+  background: var(--wm-data-table-tbody-tr-background);
 }
 .wm-app .app-grid .table > tbody > tr td {
   border-bottom: var(--wm-data-table-tbody-td-border-width) var(--wm-data-table-tbody-td-border-style) var(--wm-data-table-tbody-td-border-color);
@@ -6753,10 +6605,10 @@
   vertical-align: middle;
 }
 .wm-app .app-grid .table > tbody > tr:hover {
-  background: var(--wm-table-tr-hover-background);
+  background: var(--wm-data-table-tbody-tr-background-hover);
 }
 .wm-app .app-grid .table > tbody > tr.active {
-  background: var(--wm-table-tr-active-background);
+  background: var(--wm-data-table-tbody-tr-background-active);
 }
 .wm-app .app-grid .table > tbody > tr:last-child td {
   border: none;
@@ -6793,6 +6645,16 @@
 .wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-radio > label {
   width: var(--wm-radiobutton-state-layer-size);
 }
+.wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-checkbox > label .caption,
+.wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-checkbox > label .caption,
+.wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-checkbox > label .caption,
+.wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-checkbox > label .caption,
+.wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-radio > label .caption,
+.wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-radio > label .caption,
+.wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-radio > label .caption,
+.wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-radio > label .caption {
+  padding: unset;
+}
 .wm-app bs-datepicker-container {
   z-index: 1060;
   margin: var(--wm-space-3) var(--wm-space-0);
@@ -6979,7 +6841,7 @@
   justify-content: center;
   align-items: center;
   position: absolute;
-  right: calc(var(--wm-dropdown-menu-caret-size) / 1.5);
+  right: calc(var(--wm-dropdown-menu-caret-size) * 0.5);
   width: var(--wm-dropdown-menu-caret-size);
   height: var(--wm-dropdown-menu-caret-size);
   font-size: var(--wm-dropdown-menu-caret-size);
@@ -6987,10 +6849,11 @@
 }
 .wm-app .dropdown .btn:has(> .caret),
 .wm-app .dropdown a:has(> .caret) {
-  padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2);
+  padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2.25);
   width: 100%;
 }
-.wm-app .dropdown:not(.open) > .btn .caret {
+.wm-app .dropdown:not(.open) > .btn .caret,
+.wm-app .dropdown:not(.open) > a .caret {
   transform: rotate(0deg);
 }
 .wm-app .dropdown:not(.open) > .dropdown-menu {
@@ -7165,14 +7028,20 @@
 .wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails {
   word-wrap: break-word;
   display: block;
+  width: 100%;
 }
 .wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails .upload-title {
+  display: inline-block;
   width: auto;
   color: var(--wm-file-upload-title-color);
   font-size: var(--wm-file-upload-title-font-size);
   font-weight: var(--wm-file-upload-title-font-weight);
   line-height: var(--wm-file-upload-title-line-height);
 }
+.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails .upload-title + .status-icon {
+  top: calc(var(--wm-icon-size) - var(--wm-file-upload-title-line-height));
+  left: 4px;
+}
 .wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails .filesize {
   color: var(--wm-file-upload-size-color);
   font-size: var(--wm-file-upload-size-font-size);
@@ -7889,7 +7758,8 @@
   position: relative;
   width: 100%;
   min-height: var(--wm-nav-item-min-height);
-  padding: var(--wm-nav-item-padding);
+  padding-block: var(--wm-nav-item-padding-block);
+  padding-inline: var(--wm-nav-item-padding-inline);
   font-size: var(--wm-nav-item-font-size);
   font-family: var(--wm-nav-item-font-family);
   font-weight: var(--wm-nav-item-font-weight);
@@ -7905,6 +7775,24 @@
 .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
   margin-left: calc(var(--wm-space-2) * -1);
 }
+.wm-app .app-nav.nav .app-nav-item > .app-anchor:has( > .anchor-caption:empty),
+.wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:has( > .anchor-caption:empty),
+.wm-app .app-nav.nav .app-nav-item > .app-button:has( > .anchor-caption:empty),
+.wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:has( > .anchor-caption:empty) {
+  padding-inline: calc(var(--wm-nav-item-padding-inline) * 0.5);
+}
+.wm-app .app-nav.nav .app-nav-item > .app-anchor:has( > .anchor-caption:empty) > .app-icon,
+.wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:has( > .anchor-caption:empty) > .app-icon,
+.wm-app .app-nav.nav .app-nav-item > .app-button:has( > .anchor-caption:empty) > .app-icon,
+.wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:has( > .anchor-caption:empty) > .app-icon {
+  margin: var(--wm-space-0);
+}
+.wm-app .app-nav.nav .app-nav-item > .app-anchor:has( > .anchor-caption:empty) > .caret,
+.wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:has( > .anchor-caption:empty) > .caret,
+.wm-app .app-nav.nav .app-nav-item > .app-button:has( > .anchor-caption:empty) > .caret,
+.wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:has( > .anchor-caption:empty) > .caret {
+  display: none;
+}
 .wm-app .app-nav.nav .app-nav-item > .app-anchor:not(.btn),
 .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:not(.btn),
 .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:not(.btn) {
@@ -7965,6 +7853,9 @@
   position: relative;
   width: 100%;
 }
+.wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor {
+  padding-right: var(--wm-space-9);
+}
 .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor .anchor-caption {
   width: 100%;
 }
@@ -8128,7 +8019,7 @@
 }
 .wm-app .app-header .app-search,
 .wm-app .app-mobile-header .app-search {
-  --wm-form-control-background: var(--wm-color-surface-container-lowest);
+  --wm-form-control-background: var(--wm-color-surface);
   --wm-form-control-radius: var(--wm-radius-pill);
   --wm-input-group-btn-border-radius: var(--wm-form-control-radius);
 }
@@ -8148,6 +8039,15 @@
 .wm-app .app-mobile-header .app-grid-layout {
   --wm-grid-layout-column-padding: var(--wm-space-0);
 }
+.wm-app .app-top-nav {
+  flex: none;
+  min-height: var(--wm-top-nav-height);
+  background: var(--wm-top-nav-background);
+  color: var(--wm-top-nav-color);
+  z-index: var(--wm-top-nav-zindex);
+  border-bottom: var(--wm-top-nav-border);
+  box-shadow: var(--wm-top-nav-shadow);
+}
 .wm-app .app-content {
   flex-grow: 1;
   display: flex;
@@ -9515,6 +9415,9 @@
   line-height: var(--wm-search-dropdown-menu-item-line-height);
   letter-spacing: var(--wm-search-dropdown-menu-item-letter-spacing);
 }
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a strong {
+  color: var(--wm-search-dropdown-menu-item-color-matched);
+}
 .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a img {
   aspect-ratio: 1/1;
   border-radius: var(--wm-search-dropdown-menu-item-img-radius);
@@ -9660,9 +9563,11 @@
   --wm-switch-btn-color: var(--wm-switch-btn-color-active);
   --wm-switch-btn-border-color: var(--wm-switch-btn-border-color-active);
   --wm-switch-btn-state-layer-color: var(--wm-switch-btn-state-layer-color-active);
+  z-index: 1;
 }
 .wm-app .app-switch > .btn-group > .btn + .btn {
-  border-left: none;
+  margin: 0;
+  margin-left: -1px;
 }
 .wm-app .app-switch > .switch-handle {
   display: none;
@@ -9843,7 +9748,7 @@
   box-shadow: var(--wm-tile-shadow);
 }
 .wm-app .app-tile * {
-  color: currentColor;
+  color: inherit;
 }
 .wm-app .app-tile.bg-default {
   --wm-tile-background: var(--wm-tile-default-background);
@@ -9966,7 +9871,9 @@
   flex-shrink: 0;
   width: var(--wm-toast-container-width);
   margin: auto;
-  padding: var(--wm-toast-container-padding);
+  padding-block: var(--wm-toast-container-padding-block);
+  padding-inline: var(--wm-toast-container-padding-inline);
+  padding-left: calc(var(--wm-toast-container-padding-inline) + var(--wm-toast-icon-size) + var(--wm-toast-container-padding-inline));
   border: var(--wm-toast-container-border-width) var(--wm-toast-container-border-style) var(--wm-toast-container-border-color);
   border-radius: var(--wm-toast-container-border-radius);
   background: var(--wm-toast-container-background);
@@ -9978,11 +9885,14 @@
   position: absolute;
   content: var(--wm-toast-icon);
   font-family: wavicon;
-  top: 14px;
-  left: 12px;
-  font-size: var(--wm-icon-size-md);
-  min-width: var(--wm-icon-size-md);
-  height: var(--wm-icon-size-md);
+  top: calc(var(--wm-toast-container-padding-block) - calc(calc(var(--wm-toast-icon-size) - var(--wm-toast-message-line-height)) / 2));
+  left: var(--wm-toast-container-padding-inline);
+  font-size: var(--wm-toast-icon-size);
+  min-width: var(--wm-toast-icon-size);
+  height: var(--wm-toast-icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .wm-app .toast-container .toast .toast-title {
   font-family: var(--wm-toast-title-font-family);
@@ -11107,8 +11017,8 @@
   --wm-wizard-step-count-color: var(--wm-wizard-step-count-color-active);
   --wm-wizard-step-icon-color: var(--wm-wizard-step-icon-color-active);
 }
-.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current,
-.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:not(.ng-star-inserted),
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled:not(.ng-star-inserted) {
   pointer-events: none;
 }
 .wm-app .app-wizard .app-wizard-heading .app-wizard-steps.nav-justified > .app-wizard-step {
@@ -11143,7 +11053,7 @@
 .wm-app .app-wizard .app-wizard-actions.right {
   justify-content: flex-end;
 }
-.wm-app .app-wizard .app-wizard-actions.right:has(.app-wizard-skip) {
+.wm-app .app-wizard .app-wizard-actions.right:has(.app-wizard-skip:not([hidden])) {
   justify-content: space-between;
   gap: var(--wm-space-3);
 }
@@ -11174,7 +11084,6 @@
 }
 .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps.nav-justified {
   height: 100%;
-  --wm-wizard-vertical-connector-height: 100%;
 }
 .wm-app .app-wizard.vertical .app-wizard-body {
   grid-area: wizard-main;
@@ -14942,852 +14851,1186 @@
   }
 }
 .wm-app .m-0 {
-  margin: var(--wm-spacer-0) !important;
+  margin: var(--wm-margin-0) !important;
 }
 .wm-app .m-1 {
-  margin: var(--wm-spacer-1) !important;
+  margin: var(--wm-margin-1) !important;
 }
 .wm-app .m-2 {
-  margin: var(--wm-spacer-2) !important;
+  margin: var(--wm-margin-2) !important;
 }
 .wm-app .m-3 {
-  margin: var(--wm-spacer-3) !important;
+  margin: var(--wm-margin-3) !important;
 }
 .wm-app .m-4 {
-  margin: var(--wm-spacer-4) !important;
+  margin: var(--wm-margin-4) !important;
 }
 .wm-app .m-5 {
-  margin: var(--wm-spacer-5) !important;
+  margin: var(--wm-margin-5) !important;
 }
 .wm-app .m-6 {
-  margin: var(--wm-spacer-6) !important;
+  margin: var(--wm-margin-6) !important;
 }
 .wm-app .m-7 {
-  margin: var(--wm-spacer-7) !important;
+  margin: var(--wm-margin-7) !important;
 }
 .wm-app .m-8 {
-  margin: var(--wm-spacer-8) !important;
+  margin: var(--wm-margin-8) !important;
 }
 .wm-app .m-9 {
-  margin: var(--wm-spacer-9) !important;
+  margin: var(--wm-margin-9) !important;
+}
+.wm-app .m-10 {
+  margin: var(--wm-margin-10) !important;
 }
-.wm-app .m-auto {
-  margin: auto !important;
+.wm-app .m-11 {
+  margin: var(--wm-margin-11) !important;
+}
+.wm-app .m-12 {
+  margin: var(--wm-margin-12) !important;
 }
 .wm-app .mx-0 {
-  margin-right: var(--wm-spacer-0) !important;
-  margin-left: var(--wm-spacer-0) !important;
+  margin-right: var(--wm-margin-0) !important;
+  margin-left: var(--wm-margin-0) !important;
 }
 .wm-app .mx-1 {
-  margin-right: var(--wm-spacer-1) !important;
-  margin-left: var(--wm-spacer-1) !important;
+  margin-right: var(--wm-margin-1) !important;
+  margin-left: var(--wm-margin-1) !important;
 }
 .wm-app .mx-2 {
-  margin-right: var(--wm-spacer-2) !important;
-  margin-left: var(--wm-spacer-2) !important;
+  margin-right: var(--wm-margin-2) !important;
+  margin-left: var(--wm-margin-2) !important;
 }
 .wm-app .mx-3 {
-  margin-right: var(--wm-spacer-3) !important;
-  margin-left: var(--wm-spacer-3) !important;
+  margin-right: var(--wm-margin-3) !important;
+  margin-left: var(--wm-margin-3) !important;
 }
 .wm-app .mx-4 {
-  margin-right: var(--wm-spacer-4) !important;
-  margin-left: var(--wm-spacer-4) !important;
+  margin-right: var(--wm-margin-4) !important;
+  margin-left: var(--wm-margin-4) !important;
 }
 .wm-app .mx-5 {
-  margin-right: var(--wm-spacer-5) !important;
-  margin-left: var(--wm-spacer-5) !important;
+  margin-right: var(--wm-margin-5) !important;
+  margin-left: var(--wm-margin-5) !important;
 }
 .wm-app .mx-6 {
-  margin-right: var(--wm-spacer-6) !important;
-  margin-left: var(--wm-spacer-6) !important;
+  margin-right: var(--wm-margin-6) !important;
+  margin-left: var(--wm-margin-6) !important;
 }
 .wm-app .mx-7 {
-  margin-right: var(--wm-spacer-7) !important;
-  margin-left: var(--wm-spacer-7) !important;
+  margin-right: var(--wm-margin-7) !important;
+  margin-left: var(--wm-margin-7) !important;
 }
 .wm-app .mx-8 {
-  margin-right: var(--wm-spacer-8) !important;
-  margin-left: var(--wm-spacer-8) !important;
+  margin-right: var(--wm-margin-8) !important;
+  margin-left: var(--wm-margin-8) !important;
 }
 .wm-app .mx-9 {
-  margin-right: var(--wm-spacer-9) !important;
-  margin-left: var(--wm-spacer-9) !important;
+  margin-right: var(--wm-margin-9) !important;
+  margin-left: var(--wm-margin-9) !important;
+}
+.wm-app .mx-10 {
+  margin-right: var(--wm-margin-10) !important;
+  margin-left: var(--wm-margin-10) !important;
+}
+.wm-app .mx-11 {
+  margin-right: var(--wm-margin-11) !important;
+  margin-left: var(--wm-margin-11) !important;
+}
+.wm-app .mx-12 {
+  margin-right: var(--wm-margin-12) !important;
+  margin-left: var(--wm-margin-12) !important;
 }
 .wm-app .mx-auto {
   margin-right: auto !important;
   margin-left: auto !important;
 }
 .wm-app .my-0 {
-  margin-top: var(--wm-spacer-0) !important;
-  margin-bottom: var(--wm-spacer-0) !important;
+  margin-top: var(--wm-margin-0) !important;
+  margin-bottom: var(--wm-margin-0) !important;
 }
 .wm-app .my-1 {
-  margin-top: var(--wm-spacer-1) !important;
-  margin-bottom: var(--wm-spacer-1) !important;
+  margin-top: var(--wm-margin-1) !important;
+  margin-bottom: var(--wm-margin-1) !important;
 }
 .wm-app .my-2 {
-  margin-top: var(--wm-spacer-2) !important;
-  margin-bottom: var(--wm-spacer-2) !important;
+  margin-top: var(--wm-margin-2) !important;
+  margin-bottom: var(--wm-margin-2) !important;
 }
 .wm-app .my-3 {
-  margin-top: var(--wm-spacer-3) !important;
-  margin-bottom: var(--wm-spacer-3) !important;
+  margin-top: var(--wm-margin-3) !important;
+  margin-bottom: var(--wm-margin-3) !important;
 }
 .wm-app .my-4 {
-  margin-top: var(--wm-spacer-4) !important;
-  margin-bottom: var(--wm-spacer-4) !important;
+  margin-top: var(--wm-margin-4) !important;
+  margin-bottom: var(--wm-margin-4) !important;
 }
 .wm-app .my-5 {
-  margin-top: var(--wm-spacer-5) !important;
-  margin-bottom: var(--wm-spacer-5) !important;
+  margin-top: var(--wm-margin-5) !important;
+  margin-bottom: var(--wm-margin-5) !important;
 }
 .wm-app .my-6 {
-  margin-top: var(--wm-spacer-6) !important;
-  margin-bottom: var(--wm-spacer-6) !important;
+  margin-top: var(--wm-margin-6) !important;
+  margin-bottom: var(--wm-margin-6) !important;
 }
 .wm-app .my-7 {
-  margin-top: var(--wm-spacer-7) !important;
-  margin-bottom: var(--wm-spacer-7) !important;
+  margin-top: var(--wm-margin-7) !important;
+  margin-bottom: var(--wm-margin-7) !important;
 }
 .wm-app .my-8 {
-  margin-top: var(--wm-spacer-8) !important;
-  margin-bottom: var(--wm-spacer-8) !important;
+  margin-top: var(--wm-margin-8) !important;
+  margin-bottom: var(--wm-margin-8) !important;
 }
 .wm-app .my-9 {
-  margin-top: var(--wm-spacer-9) !important;
-  margin-bottom: var(--wm-spacer-9) !important;
+  margin-top: var(--wm-margin-9) !important;
+  margin-bottom: var(--wm-margin-9) !important;
+}
+.wm-app .my-10 {
+  margin-top: var(--wm-margin-10) !important;
+  margin-bottom: var(--wm-margin-10) !important;
+}
+.wm-app .my-11 {
+  margin-top: var(--wm-margin-11) !important;
+  margin-bottom: var(--wm-margin-11) !important;
+}
+.wm-app .my-12 {
+  margin-top: var(--wm-margin-12) !important;
+  margin-bottom: var(--wm-margin-12) !important;
 }
 .wm-app .my-auto {
   margin-top: auto !important;
   margin-bottom: auto !important;
 }
 .wm-app .mt-0 {
-  margin-top: var(--wm-spacer-0) !important;
+  margin-top: var(--wm-margin-0) !important;
 }
 .wm-app .mt-1 {
-  margin-top: var(--wm-spacer-1) !important;
+  margin-top: var(--wm-margin-1) !important;
 }
 .wm-app .mt-2 {
-  margin-top: var(--wm-spacer-2) !important;
+  margin-top: var(--wm-margin-2) !important;
 }
 .wm-app .mt-3 {
-  margin-top: var(--wm-spacer-3) !important;
+  margin-top: var(--wm-margin-3) !important;
 }
 .wm-app .mt-4 {
-  margin-top: var(--wm-spacer-4) !important;
+  margin-top: var(--wm-margin-4) !important;
 }
 .wm-app .mt-5 {
-  margin-top: var(--wm-spacer-5) !important;
+  margin-top: var(--wm-margin-5) !important;
 }
 .wm-app .mt-6 {
-  margin-top: var(--wm-spacer-6) !important;
+  margin-top: var(--wm-margin-6) !important;
 }
 .wm-app .mt-7 {
-  margin-top: var(--wm-spacer-7) !important;
+  margin-top: var(--wm-margin-7) !important;
 }
 .wm-app .mt-8 {
-  margin-top: var(--wm-spacer-8) !important;
+  margin-top: var(--wm-margin-8) !important;
 }
 .wm-app .mt-9 {
-  margin-top: var(--wm-spacer-9) !important;
+  margin-top: var(--wm-margin-9) !important;
+}
+.wm-app .mt-10 {
+  margin-top: var(--wm-margin-10) !important;
+}
+.wm-app .mt-11 {
+  margin-top: var(--wm-margin-11) !important;
+}
+.wm-app .mt-12 {
+  margin-top: var(--wm-margin-12) !important;
 }
 .wm-app .mt-auto {
   margin-top: auto !important;
 }
 .wm-app .me-0 {
-  margin-right: var(--wm-spacer-0) !important;
+  margin-right: var(--wm-margin-0) !important;
 }
 .wm-app .me-1 {
-  margin-right: var(--wm-spacer-1) !important;
+  margin-right: var(--wm-margin-1) !important;
 }
 .wm-app .me-2 {
-  margin-right: var(--wm-spacer-2) !important;
+  margin-right: var(--wm-margin-2) !important;
 }
 .wm-app .me-3 {
-  margin-right: var(--wm-spacer-3) !important;
+  margin-right: var(--wm-margin-3) !important;
 }
 .wm-app .me-4 {
-  margin-right: var(--wm-spacer-4) !important;
+  margin-right: var(--wm-margin-4) !important;
 }
 .wm-app .me-5 {
-  margin-right: var(--wm-spacer-5) !important;
+  margin-right: var(--wm-margin-5) !important;
 }
 .wm-app .me-6 {
-  margin-right: var(--wm-spacer-6) !important;
+  margin-right: var(--wm-margin-6) !important;
 }
 .wm-app .me-7 {
-  margin-right: var(--wm-spacer-7) !important;
+  margin-right: var(--wm-margin-7) !important;
 }
 .wm-app .me-8 {
-  margin-right: var(--wm-spacer-8) !important;
+  margin-right: var(--wm-margin-8) !important;
 }
 .wm-app .me-9 {
-  margin-right: var(--wm-spacer-9) !important;
+  margin-right: var(--wm-margin-9) !important;
+}
+.wm-app .me-10 {
+  margin-right: var(--wm-margin-10) !important;
+}
+.wm-app .me-11 {
+  margin-right: var(--wm-margin-11) !important;
+}
+.wm-app .me-12 {
+  margin-right: var(--wm-margin-12) !important;
 }
 .wm-app .me-auto {
   margin-right: auto !important;
 }
 .wm-app .mb-0 {
-  margin-bottom: var(--wm-spacer-0) !important;
+  margin-bottom: var(--wm-margin-0) !important;
 }
 .wm-app .mb-1 {
-  margin-bottom: var(--wm-spacer-1) !important;
+  margin-bottom: var(--wm-margin-1) !important;
 }
 .wm-app .mb-2 {
-  margin-bottom: var(--wm-spacer-2) !important;
+  margin-bottom: var(--wm-margin-2) !important;
 }
 .wm-app .mb-3 {
-  margin-bottom: var(--wm-spacer-3) !important;
+  margin-bottom: var(--wm-margin-3) !important;
 }
 .wm-app .mb-4 {
-  margin-bottom: var(--wm-spacer-4) !important;
+  margin-bottom: var(--wm-margin-4) !important;
 }
 .wm-app .mb-5 {
-  margin-bottom: var(--wm-spacer-5) !important;
+  margin-bottom: var(--wm-margin-5) !important;
 }
 .wm-app .mb-6 {
-  margin-bottom: var(--wm-spacer-6) !important;
+  margin-bottom: var(--wm-margin-6) !important;
 }
 .wm-app .mb-7 {
-  margin-bottom: var(--wm-spacer-7) !important;
+  margin-bottom: var(--wm-margin-7) !important;
 }
 .wm-app .mb-8 {
-  margin-bottom: var(--wm-spacer-8) !important;
+  margin-bottom: var(--wm-margin-8) !important;
 }
 .wm-app .mb-9 {
-  margin-bottom: var(--wm-spacer-9) !important;
+  margin-bottom: var(--wm-margin-9) !important;
+}
+.wm-app .mb-10 {
+  margin-bottom: var(--wm-margin-10) !important;
+}
+.wm-app .mb-11 {
+  margin-bottom: var(--wm-margin-11) !important;
+}
+.wm-app .mb-12 {
+  margin-bottom: var(--wm-margin-12) !important;
 }
 .wm-app .mb-auto {
   margin-bottom: auto !important;
 }
 .wm-app .ms-0 {
-  margin-left: var(--wm-spacer-0) !important;
+  margin-left: var(--wm-margin-0) !important;
 }
 .wm-app .ms-1 {
-  margin-left: var(--wm-spacer-1) !important;
+  margin-left: var(--wm-margin-1) !important;
 }
 .wm-app .ms-2 {
-  margin-left: var(--wm-spacer-2) !important;
+  margin-left: var(--wm-margin-2) !important;
 }
 .wm-app .ms-3 {
-  margin-left: var(--wm-spacer-3) !important;
+  margin-left: var(--wm-margin-3) !important;
 }
 .wm-app .ms-4 {
-  margin-left: var(--wm-spacer-4) !important;
+  margin-left: var(--wm-margin-4) !important;
 }
 .wm-app .ms-5 {
-  margin-left: var(--wm-spacer-5) !important;
+  margin-left: var(--wm-margin-5) !important;
 }
 .wm-app .ms-6 {
-  margin-left: var(--wm-spacer-6) !important;
+  margin-left: var(--wm-margin-6) !important;
 }
 .wm-app .ms-7 {
-  margin-left: var(--wm-spacer-7) !important;
+  margin-left: var(--wm-margin-7) !important;
 }
 .wm-app .ms-8 {
-  margin-left: var(--wm-spacer-8) !important;
+  margin-left: var(--wm-margin-8) !important;
 }
 .wm-app .ms-9 {
-  margin-left: var(--wm-spacer-9) !important;
+  margin-left: var(--wm-margin-9) !important;
+}
+.wm-app .ms-10 {
+  margin-left: var(--wm-margin-10) !important;
+}
+.wm-app .ms-11 {
+  margin-left: var(--wm-margin-11) !important;
+}
+.wm-app .ms-12 {
+  margin-left: var(--wm-margin-12) !important;
 }
 .wm-app .ms-auto {
   margin-left: auto !important;
 }
+.wm-app .m-n0 {
+  margin: calc(var(--wm-margin-0) * -1) !important;
+}
 .wm-app .m-n1 {
-  margin: -0.25rem !important;
+  margin: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .m-n2 {
-  margin: -0.5rem !important;
+  margin: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .m-n3 {
-  margin: -1rem !important;
+  margin: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .m-n4 {
-  margin: -1.6rem !important;
+  margin: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .m-n5 {
-  margin: -2.5rem !important;
+  margin: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .m-n6 {
-  margin: -3.5rem !important;
+  margin: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .m-n7 {
-  margin: -4rem !important;
+  margin: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .m-n8 {
-  margin: -8rem !important;
+  margin: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .m-n9 {
-  margin: -11rem !important;
+  margin: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .m-n10 {
+  margin: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .m-n11 {
+  margin: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .m-n12 {
+  margin: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .mx-n1 {
-  margin-right: -0.25rem !important;
-  margin-left: -0.25rem !important;
+  margin-right: calc(var(--wm-margin-1) * -1) !important;
+  margin-left: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .mx-n2 {
-  margin-right: -0.5rem !important;
-  margin-left: -0.5rem !important;
+  margin-right: calc(var(--wm-margin-2) * -1) !important;
+  margin-left: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .mx-n3 {
-  margin-right: -1rem !important;
-  margin-left: -1rem !important;
+  margin-right: calc(var(--wm-margin-3) * -1) !important;
+  margin-left: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .mx-n4 {
-  margin-right: -1.6rem !important;
-  margin-left: -1.6rem !important;
+  margin-right: calc(var(--wm-margin-4) * -1) !important;
+  margin-left: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .mx-n5 {
-  margin-right: -2.5rem !important;
-  margin-left: -2.5rem !important;
+  margin-right: calc(var(--wm-margin-5) * -1) !important;
+  margin-left: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .mx-n6 {
-  margin-right: -3.5rem !important;
-  margin-left: -3.5rem !important;
+  margin-right: calc(var(--wm-margin-6) * -1) !important;
+  margin-left: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .mx-n7 {
-  margin-right: -4rem !important;
-  margin-left: -4rem !important;
+  margin-right: calc(var(--wm-margin-7) * -1) !important;
+  margin-left: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .mx-n8 {
-  margin-right: -8rem !important;
-  margin-left: -8rem !important;
+  margin-right: calc(var(--wm-margin-8) * -1) !important;
+  margin-left: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .mx-n9 {
-  margin-right: -11rem !important;
-  margin-left: -11rem !important;
+  margin-right: calc(var(--wm-margin-9) * -1) !important;
+  margin-left: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .mx-n10 {
+  margin-right: calc(var(--wm-margin-10) * -1) !important;
+  margin-left: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .mx-n11 {
+  margin-right: calc(var(--wm-margin-11) * -1) !important;
+  margin-left: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .mx-n12 {
+  margin-right: calc(var(--wm-margin-12) * -1) !important;
+  margin-left: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .my-n1 {
-  margin-top: -0.25rem !important;
-  margin-bottom: -0.25rem !important;
+  margin-top: calc(var(--wm-margin-1) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .my-n2 {
-  margin-top: -0.5rem !important;
-  margin-bottom: -0.5rem !important;
+  margin-top: calc(var(--wm-margin-2) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .my-n3 {
-  margin-top: -1rem !important;
-  margin-bottom: -1rem !important;
+  margin-top: calc(var(--wm-margin-3) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .my-n4 {
-  margin-top: -1.6rem !important;
-  margin-bottom: -1.6rem !important;
+  margin-top: calc(var(--wm-margin-4) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .my-n5 {
-  margin-top: -2.5rem !important;
-  margin-bottom: -2.5rem !important;
+  margin-top: calc(var(--wm-margin-5) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .my-n6 {
-  margin-top: -3.5rem !important;
-  margin-bottom: -3.5rem !important;
+  margin-top: calc(var(--wm-margin-6) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .my-n7 {
-  margin-top: -4rem !important;
-  margin-bottom: -4rem !important;
+  margin-top: calc(var(--wm-margin-7) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .my-n8 {
-  margin-top: -8rem !important;
-  margin-bottom: -8rem !important;
+  margin-top: calc(var(--wm-margin-8) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .my-n9 {
-  margin-top: -11rem !important;
-  margin-bottom: -11rem !important;
+  margin-top: calc(var(--wm-margin-9) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .my-n10 {
+  margin-top: calc(var(--wm-margin-10) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .my-n11 {
+  margin-top: calc(var(--wm-margin-11) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .my-n12 {
+  margin-top: calc(var(--wm-margin-12) * -1) !important;
+  margin-bottom: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .mt-n1 {
-  margin-top: -0.25rem !important;
+  margin-top: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .mt-n2 {
-  margin-top: -0.5rem !important;
+  margin-top: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .mt-n3 {
-  margin-top: -1rem !important;
+  margin-top: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .mt-n4 {
-  margin-top: -1.6rem !important;
+  margin-top: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .mt-n5 {
-  margin-top: -2.5rem !important;
+  margin-top: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .mt-n6 {
-  margin-top: -3.5rem !important;
+  margin-top: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .mt-n7 {
-  margin-top: -4rem !important;
+  margin-top: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .mt-n8 {
-  margin-top: -8rem !important;
+  margin-top: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .mt-n9 {
-  margin-top: -11rem !important;
+  margin-top: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .mt-n10 {
+  margin-top: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .mt-n11 {
+  margin-top: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .mt-n12 {
+  margin-top: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .me-n1 {
-  margin-right: -0.25rem !important;
+  margin-right: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .me-n2 {
-  margin-right: -0.5rem !important;
+  margin-right: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .me-n3 {
-  margin-right: -1rem !important;
+  margin-right: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .me-n4 {
-  margin-right: -1.6rem !important;
+  margin-right: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .me-n5 {
-  margin-right: -2.5rem !important;
+  margin-right: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .me-n6 {
-  margin-right: -3.5rem !important;
+  margin-right: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .me-n7 {
-  margin-right: -4rem !important;
+  margin-right: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .me-n8 {
-  margin-right: -8rem !important;
+  margin-right: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .me-n9 {
-  margin-right: -11rem !important;
+  margin-right: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .me-n10 {
+  margin-right: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .me-n11 {
+  margin-right: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .me-n12 {
+  margin-right: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .mb-n1 {
-  margin-bottom: -0.25rem !important;
+  margin-bottom: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .mb-n2 {
-  margin-bottom: -0.5rem !important;
+  margin-bottom: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .mb-n3 {
-  margin-bottom: -1rem !important;
+  margin-bottom: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .mb-n4 {
-  margin-bottom: -1.6rem !important;
+  margin-bottom: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .mb-n5 {
-  margin-bottom: -2.5rem !important;
+  margin-bottom: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .mb-n6 {
-  margin-bottom: -3.5rem !important;
+  margin-bottom: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .mb-n7 {
-  margin-bottom: -4rem !important;
+  margin-bottom: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .mb-n8 {
-  margin-bottom: -8rem !important;
+  margin-bottom: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .mb-n9 {
-  margin-bottom: -11rem !important;
+  margin-bottom: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .mb-n10 {
+  margin-bottom: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .mb-n11 {
+  margin-bottom: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .mb-n12 {
+  margin-bottom: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .ms-n1 {
-  margin-left: -0.25rem !important;
+  margin-left: calc(var(--wm-margin-1) * -1) !important;
 }
 .wm-app .ms-n2 {
-  margin-left: -0.5rem !important;
+  margin-left: calc(var(--wm-margin-2) * -1) !important;
 }
 .wm-app .ms-n3 {
-  margin-left: -1rem !important;
+  margin-left: calc(var(--wm-margin-3) * -1) !important;
 }
 .wm-app .ms-n4 {
-  margin-left: -1.6rem !important;
+  margin-left: calc(var(--wm-margin-4) * -1) !important;
 }
 .wm-app .ms-n5 {
-  margin-left: -2.5rem !important;
+  margin-left: calc(var(--wm-margin-5) * -1) !important;
 }
 .wm-app .ms-n6 {
-  margin-left: -3.5rem !important;
+  margin-left: calc(var(--wm-margin-6) * -1) !important;
 }
 .wm-app .ms-n7 {
-  margin-left: -4rem !important;
+  margin-left: calc(var(--wm-margin-7) * -1) !important;
 }
 .wm-app .ms-n8 {
-  margin-left: -8rem !important;
+  margin-left: calc(var(--wm-margin-8) * -1) !important;
 }
 .wm-app .ms-n9 {
-  margin-left: -11rem !important;
+  margin-left: calc(var(--wm-margin-9) * -1) !important;
+}
+.wm-app .ms-n10 {
+  margin-left: calc(var(--wm-margin-10) * -1) !important;
+}
+.wm-app .ms-n11 {
+  margin-left: calc(var(--wm-margin-11) * -1) !important;
+}
+.wm-app .ms-n12 {
+  margin-left: calc(var(--wm-margin-12) * -1) !important;
 }
 .wm-app .p-0 {
-  padding: var(--wm-spacer-0) !important;
+  padding: var(--wm-space-0) !important;
 }
 .wm-app .p-1 {
-  padding: var(--wm-spacer-1) !important;
+  padding: var(--wm-space-1) !important;
 }
 .wm-app .p-2 {
-  padding: var(--wm-spacer-2) !important;
+  padding: var(--wm-space-2) !important;
 }
 .wm-app .p-3 {
-  padding: var(--wm-spacer-3) !important;
+  padding: var(--wm-space-3) !important;
 }
 .wm-app .p-4 {
-  padding: var(--wm-spacer-4) !important;
+  padding: var(--wm-space-4) !important;
 }
 .wm-app .p-5 {
-  padding: var(--wm-spacer-5) !important;
+  padding: var(--wm-space-5) !important;
 }
 .wm-app .p-6 {
-  padding: var(--wm-spacer-6) !important;
+  padding: var(--wm-space-6) !important;
 }
 .wm-app .p-7 {
-  padding: var(--wm-spacer-7) !important;
+  padding: var(--wm-space-7) !important;
 }
 .wm-app .p-8 {
-  padding: var(--wm-spacer-8) !important;
+  padding: var(--wm-space-8) !important;
 }
 .wm-app .p-9 {
-  padding: var(--wm-spacer-9) !important;
+  padding: var(--wm-space-9) !important;
+}
+.wm-app .p-10 {
+  padding: var(--wm-space-10) !important;
+}
+.wm-app .p-11 {
+  padding: var(--wm-space-11) !important;
+}
+.wm-app .p-12 {
+  padding: var(--wm-space-12) !important;
 }
 .wm-app .px-0 {
-  padding-right: var(--wm-spacer-0) !important;
-  padding-left: var(--wm-spacer-0) !important;
+  padding-right: var(--wm-space-0) !important;
+  padding-left: var(--wm-space-0) !important;
 }
 .wm-app .px-1 {
-  padding-right: var(--wm-spacer-1) !important;
-  padding-left: var(--wm-spacer-1) !important;
+  padding-right: var(--wm-space-1) !important;
+  padding-left: var(--wm-space-1) !important;
 }
 .wm-app .px-2 {
-  padding-right: var(--wm-spacer-2) !important;
-  padding-left: var(--wm-spacer-2) !important;
+  padding-right: var(--wm-space-2) !important;
+  padding-left: var(--wm-space-2) !important;
 }
 .wm-app .px-3 {
-  padding-right: var(--wm-spacer-3) !important;
-  padding-left: var(--wm-spacer-3) !important;
+  padding-right: var(--wm-space-3) !important;
+  padding-left: var(--wm-space-3) !important;
 }
 .wm-app .px-4 {
-  padding-right: var(--wm-spacer-4) !important;
-  padding-left: var(--wm-spacer-4) !important;
+  padding-right: var(--wm-space-4) !important;
+  padding-left: var(--wm-space-4) !important;
 }
 .wm-app .px-5 {
-  padding-right: var(--wm-spacer-5) !important;
-  padding-left: var(--wm-spacer-5) !important;
+  padding-right: var(--wm-space-5) !important;
+  padding-left: var(--wm-space-5) !important;
 }
 .wm-app .px-6 {
-  padding-right: var(--wm-spacer-6) !important;
-  padding-left: var(--wm-spacer-6) !important;
+  padding-right: var(--wm-space-6) !important;
+  padding-left: var(--wm-space-6) !important;
 }
 .wm-app .px-7 {
-  padding-right: var(--wm-spacer-7) !important;
-  padding-left: var(--wm-spacer-7) !important;
+  padding-right: var(--wm-space-7) !important;
+  padding-left: var(--wm-space-7) !important;
 }
 .wm-app .px-8 {
-  padding-right: var(--wm-spacer-8) !important;
-  padding-left: var(--wm-spacer-8) !important;
+  padding-right: var(--wm-space-8) !important;
+  padding-left: var(--wm-space-8) !important;
 }
 .wm-app .px-9 {
-  padding-right: var(--wm-spacer-9) !important;
-  padding-left: var(--wm-spacer-9) !important;
+  padding-right: var(--wm-space-9) !important;
+  padding-left: var(--wm-space-9) !important;
+}
+.wm-app .px-10 {
+  padding-right: var(--wm-space-10) !important;
+  padding-left: var(--wm-space-10) !important;
+}
+.wm-app .px-11 {
+  padding-right: var(--wm-space-11) !important;
+  padding-left: var(--wm-space-11) !important;
+}
+.wm-app .px-12 {
+  padding-right: var(--wm-space-12) !important;
+  padding-left: var(--wm-space-12) !important;
 }
 .wm-app .py-0 {
-  padding-top: var(--wm-spacer-0) !important;
-  padding-bottom: var(--wm-spacer-0) !important;
+  padding-top: var(--wm-space-0) !important;
+  padding-bottom: var(--wm-space-0) !important;
 }
 .wm-app .py-1 {
-  padding-top: var(--wm-spacer-1) !important;
-  padding-bottom: var(--wm-spacer-1) !important;
+  padding-top: var(--wm-space-1) !important;
+  padding-bottom: var(--wm-space-1) !important;
 }
 .wm-app .py-2 {
-  padding-top: var(--wm-spacer-2) !important;
-  padding-bottom: var(--wm-spacer-2) !important;
+  padding-top: var(--wm-space-2) !important;
+  padding-bottom: var(--wm-space-2) !important;
 }
 .wm-app .py-3 {
-  padding-top: var(--wm-spacer-3) !important;
-  padding-bottom: var(--wm-spacer-3) !important;
+  padding-top: var(--wm-space-3) !important;
+  padding-bottom: var(--wm-space-3) !important;
 }
 .wm-app .py-4 {
-  padding-top: var(--wm-spacer-4) !important;
-  padding-bottom: var(--wm-spacer-4) !important;
+  padding-top: var(--wm-space-4) !important;
+  padding-bottom: var(--wm-space-4) !important;
 }
 .wm-app .py-5 {
-  padding-top: var(--wm-spacer-5) !important;
-  padding-bottom: var(--wm-spacer-5) !important;
+  padding-top: var(--wm-space-5) !important;
+  padding-bottom: var(--wm-space-5) !important;
 }
 .wm-app .py-6 {
-  padding-top: var(--wm-spacer-6) !important;
-  padding-bottom: var(--wm-spacer-6) !important;
+  padding-top: var(--wm-space-6) !important;
+  padding-bottom: var(--wm-space-6) !important;
 }
 .wm-app .py-7 {
-  padding-top: var(--wm-spacer-7) !important;
-  padding-bottom: var(--wm-spacer-7) !important;
+  padding-top: var(--wm-space-7) !important;
+  padding-bottom: var(--wm-space-7) !important;
 }
 .wm-app .py-8 {
-  padding-top: var(--wm-spacer-8) !important;
-  padding-bottom: var(--wm-spacer-8) !important;
+  padding-top: var(--wm-space-8) !important;
+  padding-bottom: var(--wm-space-8) !important;
 }
 .wm-app .py-9 {
-  padding-top: var(--wm-spacer-9) !important;
-  padding-bottom: var(--wm-spacer-9) !important;
+  padding-top: var(--wm-space-9) !important;
+  padding-bottom: var(--wm-space-9) !important;
+}
+.wm-app .py-10 {
+  padding-top: var(--wm-space-10) !important;
+  padding-bottom: var(--wm-space-10) !important;
+}
+.wm-app .py-11 {
+  padding-top: var(--wm-space-11) !important;
+  padding-bottom: var(--wm-space-11) !important;
+}
+.wm-app .py-12 {
+  padding-top: var(--wm-space-12) !important;
+  padding-bottom: var(--wm-space-12) !important;
 }
 .wm-app .pt-0 {
-  padding-top: var(--wm-spacer-0) !important;
+  padding-top: var(--wm-space-0) !important;
 }
 .wm-app .pt-1 {
-  padding-top: var(--wm-spacer-1) !important;
+  padding-top: var(--wm-space-1) !important;
 }
 .wm-app .pt-2 {
-  padding-top: var(--wm-spacer-2) !important;
+  padding-top: var(--wm-space-2) !important;
 }
 .wm-app .pt-3 {
-  padding-top: var(--wm-spacer-3) !important;
+  padding-top: var(--wm-space-3) !important;
 }
 .wm-app .pt-4 {
-  padding-top: var(--wm-spacer-4) !important;
+  padding-top: var(--wm-space-4) !important;
 }
 .wm-app .pt-5 {
-  padding-top: var(--wm-spacer-5) !important;
+  padding-top: var(--wm-space-5) !important;
 }
 .wm-app .pt-6 {
-  padding-top: var(--wm-spacer-6) !important;
+  padding-top: var(--wm-space-6) !important;
 }
 .wm-app .pt-7 {
-  padding-top: var(--wm-spacer-7) !important;
+  padding-top: var(--wm-space-7) !important;
 }
 .wm-app .pt-8 {
-  padding-top: var(--wm-spacer-8) !important;
+  padding-top: var(--wm-space-8) !important;
 }
 .wm-app .pt-9 {
-  padding-top: var(--wm-spacer-9) !important;
+  padding-top: var(--wm-space-9) !important;
+}
+.wm-app .pt-10 {
+  padding-top: var(--wm-space-10) !important;
+}
+.wm-app .pt-11 {
+  padding-top: var(--wm-space-11) !important;
+}
+.wm-app .pt-12 {
+  padding-top: var(--wm-space-12) !important;
 }
 .wm-app .pe-0 {
-  padding-right: var(--wm-spacer-0) !important;
+  padding-right: var(--wm-space-0) !important;
 }
 .wm-app .pe-1 {
-  padding-right: var(--wm-spacer-1) !important;
+  padding-right: var(--wm-space-1) !important;
 }
 .wm-app .pe-2 {
-  padding-right: var(--wm-spacer-2) !important;
+  padding-right: var(--wm-space-2) !important;
 }
 .wm-app .pe-3 {
-  padding-right: var(--wm-spacer-3) !important;
+  padding-right: var(--wm-space-3) !important;
 }
 .wm-app .pe-4 {
-  padding-right: var(--wm-spacer-4) !important;
+  padding-right: var(--wm-space-4) !important;
 }
 .wm-app .pe-5 {
-  padding-right: var(--wm-spacer-5) !important;
+  padding-right: var(--wm-space-5) !important;
 }
 .wm-app .pe-6 {
-  padding-right: var(--wm-spacer-6) !important;
+  padding-right: var(--wm-space-6) !important;
 }
 .wm-app .pe-7 {
-  padding-right: var(--wm-spacer-7) !important;
+  padding-right: var(--wm-space-7) !important;
 }
 .wm-app .pe-8 {
-  padding-right: var(--wm-spacer-8) !important;
+  padding-right: var(--wm-space-8) !important;
 }
 .wm-app .pe-9 {
-  padding-right: var(--wm-spacer-9) !important;
+  padding-right: var(--wm-space-9) !important;
+}
+.wm-app .pe-10 {
+  padding-right: var(--wm-space-10) !important;
+}
+.wm-app .pe-11 {
+  padding-right: var(--wm-space-11) !important;
+}
+.wm-app .pe-12 {
+  padding-right: var(--wm-space-12) !important;
 }
 .wm-app .pb-0 {
-  padding-bottom: var(--wm-spacer-0) !important;
+  padding-bottom: var(--wm-space-0) !important;
 }
 .wm-app .pb-1 {
-  padding-bottom: var(--wm-spacer-1) !important;
+  padding-bottom: var(--wm-space-1) !important;
 }
 .wm-app .pb-2 {
-  padding-bottom: var(--wm-spacer-2) !important;
+  padding-bottom: var(--wm-space-2) !important;
 }
 .wm-app .pb-3 {
-  padding-bottom: var(--wm-spacer-3) !important;
+  padding-bottom: var(--wm-space-3) !important;
 }
 .wm-app .pb-4 {
-  padding-bottom: var(--wm-spacer-4) !important;
+  padding-bottom: var(--wm-space-4) !important;
 }
 .wm-app .pb-5 {
-  padding-bottom: var(--wm-spacer-5) !important;
+  padding-bottom: var(--wm-space-5) !important;
 }
 .wm-app .pb-6 {
-  padding-bottom: var(--wm-spacer-6) !important;
+  padding-bottom: var(--wm-space-6) !important;
 }
 .wm-app .pb-7 {
-  padding-bottom: var(--wm-spacer-7) !important;
+  padding-bottom: var(--wm-space-7) !important;
 }
 .wm-app .pb-8 {
-  padding-bottom: var(--wm-spacer-8) !important;
+  padding-bottom: var(--wm-space-8) !important;
 }
 .wm-app .pb-9 {
-  padding-bottom: var(--wm-spacer-9) !important;
+  padding-bottom: var(--wm-space-9) !important;
+}
+.wm-app .pb-10 {
+  padding-bottom: var(--wm-space-10) !important;
+}
+.wm-app .pb-11 {
+  padding-bottom: var(--wm-space-11) !important;
+}
+.wm-app .pb-12 {
+  padding-bottom: var(--wm-space-12) !important;
 }
 .wm-app .ps-0 {
-  padding-left: var(--wm-spacer-0) !important;
+  padding-left: var(--wm-space-0) !important;
 }
 .wm-app .ps-1 {
-  padding-left: var(--wm-spacer-1) !important;
+  padding-left: var(--wm-space-1) !important;
 }
 .wm-app .ps-2 {
-  padding-left: var(--wm-spacer-2) !important;
+  padding-left: var(--wm-space-2) !important;
 }
 .wm-app .ps-3 {
-  padding-left: var(--wm-spacer-3) !important;
+  padding-left: var(--wm-space-3) !important;
 }
 .wm-app .ps-4 {
-  padding-left: var(--wm-spacer-4) !important;
+  padding-left: var(--wm-space-4) !important;
 }
 .wm-app .ps-5 {
-  padding-left: var(--wm-spacer-5) !important;
+  padding-left: var(--wm-space-5) !important;
 }
 .wm-app .ps-6 {
-  padding-left: var(--wm-spacer-6) !important;
+  padding-left: var(--wm-space-6) !important;
 }
 .wm-app .ps-7 {
-  padding-left: var(--wm-spacer-7) !important;
+  padding-left: var(--wm-space-7) !important;
 }
 .wm-app .ps-8 {
-  padding-left: var(--wm-spacer-8) !important;
+  padding-left: var(--wm-space-8) !important;
 }
 .wm-app .ps-9 {
-  padding-left: var(--wm-spacer-9) !important;
+  padding-left: var(--wm-space-9) !important;
+}
+.wm-app .ps-10 {
+  padding-left: var(--wm-space-10) !important;
+}
+.wm-app .ps-11 {
+  padding-left: var(--wm-space-11) !important;
+}
+.wm-app .ps-12 {
+  padding-left: var(--wm-space-12) !important;
 }
 .wm-app .gap-0 {
-  gap: var(--wm-spacer-0) !important;
+  gap: var(--wm-gap-0) !important;
 }
 .wm-app .gap-1 {
-  gap: var(--wm-spacer-1) !important;
+  gap: var(--wm-gap-1) !important;
 }
 .wm-app .gap-2 {
-  gap: var(--wm-spacer-2) !important;
+  gap: var(--wm-gap-2) !important;
 }
 .wm-app .gap-3 {
-  gap: var(--wm-spacer-3) !important;
+  gap: var(--wm-gap-3) !important;
 }
 .wm-app .gap-4 {
-  gap: var(--wm-spacer-4) !important;
+  gap: var(--wm-gap-4) !important;
 }
 .wm-app .gap-5 {
-  gap: var(--wm-spacer-5) !important;
+  gap: var(--wm-gap-5) !important;
 }
 .wm-app .gap-6 {
-  gap: var(--wm-spacer-6) !important;
+  gap: var(--wm-gap-6) !important;
 }
 .wm-app .gap-7 {
-  gap: var(--wm-spacer-7) !important;
+  gap: var(--wm-gap-7) !important;
 }
 .wm-app .gap-8 {
-  gap: var(--wm-spacer-8) !important;
+  gap: var(--wm-gap-8) !important;
 }
 .wm-app .gap-9 {
-  gap: var(--wm-spacer-9) !important;
+  gap: var(--wm-gap-9) !important;
+}
+.wm-app .gap-10 {
+  gap: var(--wm-gap-10) !important;
+}
+.wm-app .gap-11 {
+  gap: var(--wm-gap-11) !important;
+}
+.wm-app .gap-12 {
+  gap: var(--wm-gap-12) !important;
 }
 .wm-app .row-gap-0 {
-  row-gap: var(--wm-spacer-0) !important;
+  row-gap: var(--wm-gap-0) !important;
 }
 .wm-app .row-gap-1 {
-  row-gap: var(--wm-spacer-1) !important;
+  row-gap: var(--wm-gap-1) !important;
 }
 .wm-app .row-gap-2 {
-  row-gap: var(--wm-spacer-2) !important;
+  row-gap: var(--wm-gap-2) !important;
 }
 .wm-app .row-gap-3 {
-  row-gap: var(--wm-spacer-3) !important;
+  row-gap: var(--wm-gap-3) !important;
 }
 .wm-app .row-gap-4 {
-  row-gap: var(--wm-spacer-4) !important;
+  row-gap: var(--wm-gap-4) !important;
 }
 .wm-app .row-gap-5 {
-  row-gap: var(--wm-spacer-5) !important;
+  row-gap: var(--wm-gap-5) !important;
 }
 .wm-app .row-gap-6 {
-  row-gap: var(--wm-spacer-6) !important;
+  row-gap: var(--wm-gap-6) !important;
 }
 .wm-app .row-gap-7 {
-  row-gap: var(--wm-spacer-7) !important;
+  row-gap: var(--wm-gap-7) !important;
 }
 .wm-app .row-gap-8 {
-  row-gap: var(--wm-spacer-8) !important;
+  row-gap: var(--wm-gap-8) !important;
 }
 .wm-app .row-gap-9 {
-  row-gap: var(--wm-spacer-9) !important;
+  row-gap: var(--wm-gap-9) !important;
+}
+.wm-app .row-gap-10 {
+  row-gap: var(--wm-gap-10) !important;
+}
+.wm-app .row-gap-11 {
+  row-gap: var(--wm-gap-11) !important;
+}
+.wm-app .row-gap-12 {
+  row-gap: var(--wm-gap-12) !important;
 }
 .wm-app .column-gap-0 {
-  -webkit-column-gap: var(--wm-spacer-0) !important;
-  -moz-column-gap: var(--wm-spacer-0) !important;
-  column-gap: var(--wm-spacer-0) !important;
+  column-gap: var(--wm-gap-0) !important;
 }
 .wm-app .column-gap-1 {
-  -webkit-column-gap: var(--wm-spacer-1) !important;
-  -moz-column-gap: var(--wm-spacer-1) !important;
-  column-gap: var(--wm-spacer-1) !important;
+  column-gap: var(--wm-gap-1) !important;
 }
 .wm-app .column-gap-2 {
-  -webkit-column-gap: var(--wm-spacer-2) !important;
-  -moz-column-gap: var(--wm-spacer-2) !important;
-  column-gap: var(--wm-spacer-2) !important;
+  column-gap: var(--wm-gap-2) !important;
 }
 .wm-app .column-gap-3 {
-  -webkit-column-gap: var(--wm-spacer-3) !important;
-  -moz-column-gap: var(--wm-spacer-3) !important;
-  column-gap: var(--wm-spacer-3) !important;
+  column-gap: var(--wm-gap-3) !important;
 }
 .wm-app .column-gap-4 {
-  -webkit-column-gap: var(--wm-spacer-4) !important;
-  -moz-column-gap: var(--wm-spacer-4) !important;
-  column-gap: var(--wm-spacer-4) !important;
+  column-gap: var(--wm-gap-4) !important;
 }
 .wm-app .column-gap-5 {
-  -webkit-column-gap: var(--wm-spacer-5) !important;
-  -moz-column-gap: var(--wm-spacer-5) !important;
-  column-gap: var(--wm-spacer-5) !important;
+  column-gap: var(--wm-gap-5) !important;
 }
 .wm-app .column-gap-6 {
-  -webkit-column-gap: var(--wm-spacer-6) !important;
-  -moz-column-gap: var(--wm-spacer-6) !important;
-  column-gap: var(--wm-spacer-6) !important;
+  column-gap: var(--wm-gap-6) !important;
 }
 .wm-app .column-gap-7 {
-  -webkit-column-gap: var(--wm-spacer-7) !important;
-  -moz-column-gap: var(--wm-spacer-7) !important;
-  column-gap: var(--wm-spacer-7) !important;
+  column-gap: var(--wm-gap-7) !important;
 }
 .wm-app .column-gap-8 {
-  -webkit-column-gap: var(--wm-spacer-8) !important;
-  -moz-column-gap: var(--wm-spacer-8) !important;
-  column-gap: var(--wm-spacer-8) !important;
+  column-gap: var(--wm-gap-8) !important;
 }
 .wm-app .column-gap-9 {
-  -webkit-column-gap: var(--wm-spacer-9) !important;
-  -moz-column-gap: var(--wm-spacer-9) !important;
-  column-gap: var(--wm-spacer-9) !important;
-}
-.wm-app .font-monospace {
-  font-family: var(--wm-font-family-brand) !important;
+  column-gap: var(--wm-gap-9) !important;
+}
+.wm-app .column-gap-10 {
+  column-gap: var(--wm-gap-10) !important;
+}
+.wm-app .column-gap-11 {
+  column-gap: var(--wm-gap-11) !important;
+}
+.wm-app .column-gap-12 {
+  column-gap: var(--wm-gap-12) !important;
+}
+.wm-app .shadow-1 {
+  box-shadow: var(--wm-box-shadow-1) !important;
+}
+.wm-app .shadow-2 {
+  box-shadow: var(--wm-box-shadow-2) !important;
+}
+.wm-app .shadow-3 {
+  box-shadow: var(--wm-box-shadow-3) !important;
+}
+.wm-app .shadow-4 {
+  box-shadow: var(--wm-box-shadow-4) !important;
+}
+.wm-app .shadow-5 {
+  box-shadow: var(--wm-box-shadow-5) !important;
+}
+.wm-app .fs-body-large {
+  font-family: var(--wm-body-large-font-family) !important;
+  font-size: var(--wm-body-large-font-size) !important;
+  font-weight: var(--wm-body-large-font-weight) !important;
+  line-height: var(--wm-body-large-line-height) !important;
+  letter-spacing: var(--wm-body-large-letter-spacing) !important;
+}
+.wm-app .fs-body-medium {
+  font-family: var(--wm-body-medium-font-family) !important;
+  font-size: var(--wm-body-medium-font-size) !important;
+  font-weight: var(--wm-body-medium-font-weight) !important;
+  line-height: var(--wm-body-medium-line-height) !important;
+  letter-spacing: var(--wm-body-medium-letter-spacing) !important;
+}
+.wm-app .fs-body-small {
+  font-family: var(--wm-body-small-font-family) !important;
+  font-size: var(--wm-body-small-font-size) !important;
+  font-weight: var(--wm-body-small-font-weight) !important;
+  line-height: var(--wm-body-small-line-height) !important;
+  letter-spacing: var(--wm-body-small-letter-spacing) !important;
+}
+.wm-app .fs-headline-large {
+  font-family: var(--wm-h1-font-family) !important;
+  font-size: var(--wm-h1-font-size) !important;
+  font-weight: var(--wm-h1-font-weight) !important;
+  line-height: var(--wm-h1-line-height) !important;
+  letter-spacing: var(--wm-h1-letter-spacing) !important;
+}
+.wm-app .fs-headline-medium {
+  font-family: var(--wm-h2-font-family) !important;
+  font-size: var(--wm-h2-font-size) !important;
+  font-weight: var(--wm-h2-font-weight) !important;
+  line-height: var(--wm-h2-line-height) !important;
+  letter-spacing: var(--wm-h2-letter-spacing) !important;
+}
+.wm-app .fs-headline-small {
+  font-family: var(--wm-h3-font-family) !important;
+  font-size: var(--wm-h3-font-size) !important;
+  font-weight: var(--wm-h3-font-weight) !important;
+  line-height: var(--wm-h3-line-height) !important;
+  letter-spacing: var(--wm-h3-letter-spacing) !important;
+}
+.wm-app .fs-title-large {
+  font-family: var(--wm-h4-font-family) !important;
+  font-size: var(--wm-h4-font-size) !important;
+  font-weight: var(--wm-h4-font-weight) !important;
+  line-height: var(--wm-h4-line-height) !important;
+  letter-spacing: var(--wm-h4-letter-spacing) !important;
+}
+.wm-app .fs-title-medium {
+  font-family: var(--wm-h5-font-family) !important;
+  font-size: var(--wm-h5-font-size) !important;
+  font-weight: var(--wm-h5-font-weight) !important;
+  line-height: var(--wm-h5-line-height) !important;
+  letter-spacing: var(--wm-h5-letter-spacing) !important;
+}
+.wm-app .fs-title-small {
+  font-family: var(--wm-h6-font-family) !important;
+  font-size: var(--wm-h6-font-size) !important;
+  font-weight: var(--wm-h6-font-weight) !important;
+  line-height: var(--wm-h6-line-height) !important;
+  letter-spacing: var(--wm-h6-letter-spacing) !important;
+}
+.wm-app .fs-label-large {
+  font-family: var(--wm-label-large-font-family) !important;
+  font-size: var(--wm-label-large-font-size) !important;
+  font-weight: var(--wm-label-large-font-weight) !important;
+  line-height: var(--wm-label-large-line-height) !important;
+  letter-spacing: var(--wm-label-large-letter-spacing) !important;
+}
+.wm-app .fs-label-medium {
+  font-family: var(--wm-label-medium-font-family) !important;
+  font-size: var(--wm-label-medium-font-size) !important;
+  font-weight: var(--wm-label-medium-font-weight) !important;
+  line-height: var(--wm-label-medium-line-height) !important;
+  letter-spacing: var(--wm-label-medium-letter-spacing) !important;
+}
+.wm-app .fs-label-small {
+  font-family: var(--wm-label-small-font-family) !important;
+  font-size: var(--wm-label-small-font-size) !important;
+  font-weight: var(--wm-label-small-font-weight) !important;
+  line-height: var(--wm-label-small-line-height) !important;
+  letter-spacing: var(--wm-label-small-letter-spacing) !important;
+}
+.wm-app .fs-display-large {
+  font-family: var(--wm-display-large-font-family) !important;
+  font-size: var(--wm-display-large-font-size) !important;
+  font-weight: var(--wm-display-large-font-weight) !important;
+  line-height: var(--wm-display-large-line-height) !important;
+  letter-spacing: var(--wm-display-large-letter-spacing) !important;
+}
+.wm-app .fs-display-medium {
+  font-family: var(--wm-display-medium-font-family) !important;
+  font-size: var(--wm-display-medium-font-size) !important;
+  font-weight: var(--wm-display-medium-font-weight) !important;
+  line-height: var(--wm-display-medium-line-height) !important;
+  letter-spacing: var(--wm-display-medium-letter-spacing) !important;
+}
+.wm-app .fs-display-small {
+  font-family: var(--wm-display-small-font-family) !important;
+  font-size: var(--wm-display-small-font-size) !important;
+  font-weight: var(--wm-display-small-font-weight) !important;
+  line-height: var(--wm-display-small-line-height) !important;
+  letter-spacing: var(--wm-display-small-letter-spacing) !important;
 }
-.wm-app .fs-1 {
-  font-size: calc(1.485rem + 2.82vw) !important;
+.wm-app .fst-italic {
+  font-style: italic !important;
 }
-.wm-app .fs-2 {
-  font-size: calc(1.4rem + 1.8vw) !important;
+.wm-app .fst-normal {
+  font-style: normal !important;
 }
-.wm-app .fs-3 {
-  font-size: calc(1.363rem + 1.356vw) !important;
+.wm-app .font-sans {
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
-.wm-app .fs-4 {
-  font-size: calc(1.325rem + 0.9vw) !important;
+.wm-app .font-serif {
+  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
 }
-.wm-app .fs-5 {
-  font-size: calc(1.275rem + 0.3vw) !important;
+.wm-app .font-monospace {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 }
-.wm-app .fs-6 {
-  font-size: 1.2rem !important;
+.wm-app .font-brand {
+  font-family: var(--wm-font-family-brand) !important;
 }
-.wm-app .fst-italic {
-  font-style: italic !important;
+.wm-app .font-plain {
+  font-family: var(--wm-font-family-plain) !important;
 }
-.wm-app .fst-normal {
-  font-style: normal !important;
+.wm-app .fw-thin {
+  font-weight: var(--wm-font-weight-thin) !important;
 }
-.wm-app .fw-lighter {
-  font-weight: lighter !important;
+.wm-app .fw-extralight {
+  font-weight: var(--wm-font-weight-extralight) !important;
 }
 .wm-app .fw-light {
-  font-weight: 400 !important;
+  font-weight: var(--wm-font-weight-light) !important;
 }
 .wm-app .fw-normal {
-  font-weight: 500 !important;
+  font-weight: var(--wm-font-weight-regular) !important;
 }
 .wm-app .fw-medium {
-  font-weight: 500 !important;
+  font-weight: var(--wm-font-weight-medium) !important;
 }
 .wm-app .fw-semibold {
-  font-weight: 600 !important;
+  font-weight: var(--wm-font-weight-semibold) !important;
 }
 .wm-app .fw-bold {
-  font-weight: 700 !important;
+  font-weight: var(--wm-font-weight-bold) !important;
+}
+.wm-app .fw-extrabold {
+  font-weight: var(--wm-font-weight-extrabold) !important;
 }
-.wm-app .fw-bolder {
-  font-weight: bolder !important;
+.wm-app .fw-black {
+  font-weight: var(--wm-font-weight-black) !important;
 }
 .wm-app .lh-1 {
   line-height: 1 !important;
@@ -15801,6 +16044,9 @@
 .wm-app .lh-lg {
   line-height: 2 !important;
 }
+.wm-app .lh-normal {
+  line-height: normal !important;
+}
 .wm-app .text-start {
   text-align: left !important;
 }
@@ -15870,12 +16116,12 @@
 .wm-app .visually-hidden-focusable:not(:focus):not(:focus-within) {
   width: 1px !important;
   height: 1px !important;
-  padding: var(--wm-spacer-0) !important;
+  padding: var(--wm-space-0) !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
-  border: var(--wm-spacer-0) !important;
+  border: none !important;
 }
 .wm-app .visually-hidden:not(caption),
 .wm-app .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
@@ -15899,7 +16145,7 @@
   display: inline-block;
   -ms-flex-item-align: stretch;
   align-self: stretch;
-  width: var(--wm-border-width);
+  width: var(--wm-border-width-base);
   min-height: 1em;
   background-color: currentcolor;
   opacity: 0.25;
@@ -16039,48 +16285,32 @@
 .wm-app .d-none {
   display: none !important;
 }
-.wm-app .shadow {
-  -webkit-box-shadow: var(--wm-box-shadow) !important;
-  box-shadow: var(--wm-box-shadow) !important;
-}
-.wm-app .shadow-sm {
-  -webkit-box-shadow: var(--wm-box-shadow-sm) !important;
-  box-shadow: var(--wm-box-shadow-sm) !important;
-}
-.wm-app .shadow-lg {
-  -webkit-box-shadow: var(--wm-box-shadow-lg) !important;
-  box-shadow: var(--wm-box-shadow-lg) !important;
-}
-.wm-app .shadow-none {
-  -webkit-box-shadow: none !important;
-  box-shadow: none !important;
-}
 .wm-app .border {
-  border: var(--wm-border-width) var(--wm-border-style) var(--wm-border-color) !important;
+  border: var(--wm-border-width-base) var(--wm-border-style-base) var(--wm-border-color) !important;
 }
 .wm-app .border-0 {
   border: 0 !important;
 }
 .wm-app .border-top {
-  border-top: var(--wm-border-width) var(--wm-border-style) var(--wm-border-color) !important;
+  border-top: var(--wm-border-width-base) var(--wm-border-style-base) var(--wm-border-color) !important;
 }
 .wm-app .border-top-0 {
   border-top: 0 !important;
 }
 .wm-app .border-end {
-  border-right: var(--wm-border-width) var(--wm-border-style) var(--wm-border-color) !important;
+  border-right: var(--wm-border-width-base) var(--wm-border-style-base) var(--wm-border-color) !important;
 }
 .wm-app .border-end-0 {
   border-right: 0 !important;
 }
 .wm-app .border-bottom {
-  border-bottom: var(--wm-border-width) var(--wm-border-style) var(--wm-border-color) !important;
+  border-bottom: var(--wm-border-width-base) var(--wm-border-style-base) var(--wm-border-color) !important;
 }
 .wm-app .border-bottom-0 {
   border-bottom: 0 !important;
 }
 .wm-app .border-start {
-  border-left: var(--wm-border-width) var(--wm-border-style) var(--wm-border-color) !important;
+  border-left: var(--wm-border-width-base) var(--wm-border-style-base) var(--wm-border-color) !important;
 }
 .wm-app .border-start-0 {
   border-left: 0 !important;
@@ -16383,7 +16613,7 @@
   border-radius: var(--wm-radius-md) !important;
 }
 .wm-app .rounded-0 {
-  border-radius: 0 !important;
+  border-radius: var(--wm-radius-none) !important;
 }
 .wm-app .rounded-1 {
   border-radius: var(--wm-radius-sm) !important;
@@ -16411,8 +16641,8 @@
   border-top-right-radius: var(--wm-radius-md) !important;
 }
 .wm-app .rounded-top-0 {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+  border-top-left-radius: var(--wm-radius-none) !important;
+  border-top-right-radius: var(--wm-radius-none) !important;
 }
 .wm-app .rounded-top-1 {
   border-top-left-radius: var(--wm-radius-sm) !important;
@@ -16447,8 +16677,8 @@
   border-bottom-right-radius: var(--wm-radius-md) !important;
 }
 .wm-app .rounded-end-0 {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
+  border-top-right-radius: var(--wm-radius-none) !important;
+  border-bottom-right-radius: var(--wm-radius-none) !important;
 }
 .wm-app .rounded-end-1 {
   border-top-right-radius: var(--wm-radius-sm) !important;
@@ -16483,8 +16713,8 @@
   border-bottom-left-radius: var(--wm-radius-md) !important;
 }
 .wm-app .rounded-bottom-0 {
-  border-bottom-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: var(--wm-radius-none) !important;
+  border-bottom-left-radius: var(--wm-radius-none) !important;
 }
 .wm-app .rounded-bottom-1 {
   border-bottom-right-radius: var(--wm-radius-sm) !important;
@@ -16519,8 +16749,8 @@
   border-top-left-radius: var(--wm-radius-md) !important;
 }
 .wm-app .rounded-start-0 {
-  border-bottom-left-radius: 0 !important;
-  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: var(--wm-radius-none) !important;
+  border-top-left-radius: var(--wm-radius-none) !important;
 }
 .wm-app .rounded-start-1 {
   border-bottom-left-radius: var(--wm-radius-sm) !important;
@@ -16587,35 +16817,35 @@
   cursor: not-allowed !important;
 }
 .wm-app .label-primary {
-  background: var(--wm-color-primary-focus);
+  background: var(--wm-color-primary-container);
   color: var(--wm-color-primary);
 }
 .wm-app .label-secondary {
-  background: var(--wm-color-secondary-focus);
+  background: var(--wm-color-secondary-container);
   color: var(--wm-color-secondary);
 }
 .wm-app .label-tertiary {
-  background: var(--wm-color-tertiary-focus);
+  background: var(--wm-color-tertiary-container);
   color: var(--wm-color-tertiary);
 }
 .wm-app .label-success {
-  background: var(--wm-color-success-focus);
+  background: var(--wm-color-success-container);
   color: var(--wm-color-success);
 }
 .wm-app .label-info {
-  background: var(--wm-color-info-focus);
+  background: var(--wm-color-info-container);
   color: var(--wm-color-info);
 }
 .wm-app .label-warning {
-  background: var(--wm-color-warning-focus);
+  background: var(--wm-color-warning-container);
   color: var(--wm-color-warning);
 }
 .wm-app .label-danger {
-  background: var(--wm-color-error-focus);
+  background: var(--wm-color-error-container);
   color: var(--wm-color-error);
 }
 .wm-app .label-muted {
-  background: var(--wm-color-on-surface-variant-focus);
+  background: var(--wm-color-surface-variant);
   color: var(--wm-color-on-surface-variant);
 }
 .wm-app .text-primary {
@@ -16642,21 +16872,6 @@
 .wm-app .text-muted {
   color: var(--wm-color-on-surface-variant);
 }
-.wm-app .elevation-1 {
-  box-shadow: var(--wm-elevation-shadow-1);
-}
-.wm-app .elevation-2 {
-  box-shadow: var(--wm-elevation-shadow-2);
-}
-.wm-app .elevation-3 {
-  box-shadow: var(--wm-elevation-shadow-3);
-}
-.wm-app .elevation-4 {
-  box-shadow: var(--wm-elevation-shadow-4);
-}
-.wm-app .elevation-5 {
-  box-shadow: var(--wm-elevation-shadow-5);
-}
 .wm-app .col-xs-1 {
   width: 8.33333333%;
 }