@zonos/elements 1.3.15-alpha.3 → 1.3.16-alpha.0

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.css

@@ -31,489 +31,496 @@
   -webkit-font-smoothing: antialiased;
 }
 
-[data-theme=LIGHT],
-.zonos--elements {
+[data-theme=LIGHT] {
   color-scheme: light;
-  --amino-transition: all 0.2s ease-in-out 0s, visibility 0s;
-  --amino-type-scale-base: 16px;
-  --amino-glass-0: #10111600;
-  --amino-glass-50: #1011160a;
-  --amino-glass-100: #10111614;
-  --amino-glass-200: #10111626;
-  --amino-glass-300: #1011163d;
-  --amino-glass-400: #10111656;
-  --amino-glass-500: #10111670;
-  --amino-glass-600: #1011169b;
-  --amino-glass-700: #101116ad;
-  --amino-glass-800: #101116bc;
-  --amino-glass-900: #101116c6;
-  --amino-glass-1000: #101116dd;
-  --amino-glass-1100: #101116ef;
-  --amino-glass-1200: #101116f5;
-  --amino-gray-0: #ffffff;
-  --amino-gray-50: #f6f6f8;
-  --amino-gray-100: #ebebf0;
-  --amino-gray-200: #d9dae3;
-  --amino-gray-300: #bfc0ce;
-  --amino-gray-400: #a7a9b9;
-  --amino-gray-500: #888d9f;
-  --amino-gray-600: #676c7e;
-  --amino-gray-700: #575c6b;
-  --amino-gray-800: #484c5b;
-  --amino-gray-900: #383a48;
-  --amino-gray-1000: #2a2c37;
-  --amino-gray-1100: #1a1c23;
-  --amino-gray-1200: #101116;
-  --amino-blue-100: #e7f6fe;
-  --amino-blue-200: #c9e6fd;
-  --amino-blue-300: #a3cbfa;
-  --amino-blue-400: #7fa9f5;
-  --amino-blue-500: #5a80f1;
-  --amino-blue-600: #445eee;
-  --amino-blue-700: #3843c2;
-  --amino-blue-800: #2e3d94;
-  --amino-blue-900: #212f68;
-  --amino-blue-1000: #152141;
-  --amino-cyan-100: #d6fffe;
-  --amino-cyan-200: #c0f2f2;
-  --amino-cyan-300: #9be7e9;
-  --amino-cyan-400: #66d5db;
-  --amino-cyan-500: #3ec4d0;
-  --amino-cyan-600: #2ca0af;
-  --amino-cyan-700: #29818e;
-  --amino-cyan-800: #25646f;
-  --amino-cyan-900: #1d464e;
-  --amino-cyan-1000: #152d32;
-  --amino-red-100: #ffeceb;
-  --amino-red-200: #fdd0ce;
-  --amino-red-300: #faa9a9;
-  --amino-red-400: #f37c82;
-  --amino-red-500: #eb5c6c;
-  --amino-red-600: #de314f;
-  --amino-red-700: #bc2442;
-  --amino-red-800: #922033;
-  --amino-red-900: #6c1b26;
-  --amino-red-1000: #481419;
-  --amino-orange-100: #fff1e0;
-  --amino-orange-200: #fcdab8;
-  --amino-orange-300: #f5c193;
-  --amino-orange-400: #f7a464;
-  --amino-orange-500: #f47a34;
-  --amino-orange-600: #e5591a;
-  --amino-orange-700: #bd3c1c;
-  --amino-orange-800: #94301c;
-  --amino-orange-900: #6b2a1a;
-  --amino-orange-1000: #401d12;
-  --amino-green-100: #defde8;
-  --amino-green-200: #aff8c3;
-  --amino-green-300: #81ef98;
-  --amino-green-400: #57db6c;
-  --amino-green-500: #39c049;
-  --amino-green-600: #2ca03f;
-  --amino-green-700: #288129;
-  --amino-green-800: #246627;
-  --amino-green-900: #1d4920;
-  --amino-green-1000: #153219;
-  --amino-purple-100: #edebff;
-  --amino-purple-200: #dcd2fe;
-  --amino-purple-300: #ceb5fd;
-  --amino-purple-400: #c699fa;
-  --amino-purple-500: #b25cf5;
-  --amino-purple-600: #ab26ed;
-  --amino-purple-700: #901cca;
-  --amino-purple-800: #6e1e99;
-  --amino-purple-900: #471d68;
-  --amino-purple-1000: #2c1844;
-  --amino-transparent-white: #ffffffbb;
-  --amino-transparent-black: #101116bb;
-  --amino-transparent-gray-600: #6a6d771f;
-  --amino-v3-shadow-base: 0px 1px 3px 0px rgba(10, 10, 11, 0.1),
+}
+
+:root,
+[data-theme=LIGHT] {
+  --zonos-elements-transition: all 0.2s ease-in-out 0s, visibility 0s;
+  --zonos-elements-type-scale-base: 16px;
+  --zonos-elements-glass-0: #10111600;
+  --zonos-elements-glass-50: #1011160a;
+  --zonos-elements-glass-100: #10111614;
+  --zonos-elements-glass-200: #10111626;
+  --zonos-elements-glass-300: #1011163d;
+  --zonos-elements-glass-400: #10111656;
+  --zonos-elements-glass-500: #10111670;
+  --zonos-elements-glass-600: #1011169b;
+  --zonos-elements-glass-700: #101116ad;
+  --zonos-elements-glass-800: #101116bc;
+  --zonos-elements-glass-900: #101116c6;
+  --zonos-elements-glass-1000: #101116dd;
+  --zonos-elements-glass-1100: #101116ef;
+  --zonos-elements-glass-1200: #101116f5;
+  --zonos-elements-gray-0: #ffffff;
+  --zonos-elements-gray-50: #f6f6f8;
+  --zonos-elements-gray-100: #ebebf0;
+  --zonos-elements-gray-200: #d9dae3;
+  --zonos-elements-gray-300: #bfc0ce;
+  --zonos-elements-gray-400: #a7a9b9;
+  --zonos-elements-gray-500: #888d9f;
+  --zonos-elements-gray-600: #676c7e;
+  --zonos-elements-gray-700: #575c6b;
+  --zonos-elements-gray-800: #484c5b;
+  --zonos-elements-gray-900: #383a48;
+  --zonos-elements-gray-1000: #2a2c37;
+  --zonos-elements-gray-1100: #1a1c23;
+  --zonos-elements-gray-1200: #101116;
+  --zonos-elements-blue-100: #e7f6fe;
+  --zonos-elements-blue-200: #c9e6fd;
+  --zonos-elements-blue-300: #a3cbfa;
+  --zonos-elements-blue-400: #7fa9f5;
+  --zonos-elements-blue-500: #5a80f1;
+  --zonos-elements-blue-600: #445eee;
+  --zonos-elements-blue-700: #3843c2;
+  --zonos-elements-blue-800: #2e3d94;
+  --zonos-elements-blue-900: #212f68;
+  --zonos-elements-blue-1000: #152141;
+  --zonos-elements-cyan-100: #d6fffe;
+  --zonos-elements-cyan-200: #c0f2f2;
+  --zonos-elements-cyan-300: #9be7e9;
+  --zonos-elements-cyan-400: #66d5db;
+  --zonos-elements-cyan-500: #3ec4d0;
+  --zonos-elements-cyan-600: #2ca0af;
+  --zonos-elements-cyan-700: #29818e;
+  --zonos-elements-cyan-800: #25646f;
+  --zonos-elements-cyan-900: #1d464e;
+  --zonos-elements-cyan-1000: #152d32;
+  --zonos-elements-red-100: #ffeceb;
+  --zonos-elements-red-200: #fdd0ce;
+  --zonos-elements-red-300: #faa9a9;
+  --zonos-elements-red-400: #f37c82;
+  --zonos-elements-red-500: #eb5c6c;
+  --zonos-elements-red-600: #de314f;
+  --zonos-elements-red-700: #bc2442;
+  --zonos-elements-red-800: #922033;
+  --zonos-elements-red-900: #6c1b26;
+  --zonos-elements-red-1000: #481419;
+  --zonos-elements-orange-100: #fff1e0;
+  --zonos-elements-orange-200: #fcdab8;
+  --zonos-elements-orange-300: #f5c193;
+  --zonos-elements-orange-400: #f7a464;
+  --zonos-elements-orange-500: #f47a34;
+  --zonos-elements-orange-600: #e5591a;
+  --zonos-elements-orange-700: #bd3c1c;
+  --zonos-elements-orange-800: #94301c;
+  --zonos-elements-orange-900: #6b2a1a;
+  --zonos-elements-orange-1000: #401d12;
+  --zonos-elements-green-100: #defde8;
+  --zonos-elements-green-200: #aff8c3;
+  --zonos-elements-green-300: #81ef98;
+  --zonos-elements-green-400: #57db6c;
+  --zonos-elements-green-500: #39c049;
+  --zonos-elements-green-600: #2ca03f;
+  --zonos-elements-green-700: #288129;
+  --zonos-elements-green-800: #246627;
+  --zonos-elements-green-900: #1d4920;
+  --zonos-elements-green-1000: #153219;
+  --zonos-elements-purple-100: #edebff;
+  --zonos-elements-purple-200: #dcd2fe;
+  --zonos-elements-purple-300: #ceb5fd;
+  --zonos-elements-purple-400: #c699fa;
+  --zonos-elements-purple-500: #b25cf5;
+  --zonos-elements-purple-600: #ab26ed;
+  --zonos-elements-purple-700: #901cca;
+  --zonos-elements-purple-800: #6e1e99;
+  --zonos-elements-purple-900: #471d68;
+  --zonos-elements-purple-1000: #2c1844;
+  --zonos-elements-transparent-white: #ffffffbb;
+  --zonos-elements-transparent-black: #101116bb;
+  --zonos-elements-transparent-gray-600: #6a6d771f;
+  --zonos-elements-v3-shadow-base: 0px 1px 3px 0px rgba(10, 10, 11, 0.1),
     0px 1px 2px rgba(10, 10, 11, 0.06), 0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --amino-v3-shadow-medium: 0px 2px 4px 0px rgba(10, 10, 11, 0.06),
+  --zonos-elements-v3-shadow-medium: 0px 2px 4px 0px rgba(10, 10, 11, 0.06),
     0px 4px 6px rgba(10, 10, 11, 0.1), 0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --amino-v3-shadow-large: 0px 4px 6px 0px rgba(10, 10, 11, 0.05),
+  --zonos-elements-v3-shadow-large: 0px 4px 6px 0px rgba(10, 10, 11, 0.05),
     0px 10px 15px rgba(10, 10, 11, 0.1),
     0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --amino-v3-shadow-xl: 0px 10px 10px 0px rgba(12, 12, 13, 0.04),
+  --zonos-elements-v3-shadow-xl: 0px 10px 10px 0px rgba(12, 12, 13, 0.04),
     0px 20px 25px rgba(10, 10, 11, 0.1),
     0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --amino-v3-shadow-xxl: 0px 32px 50px 0px rgba(10, 10, 11, 0.24),
+  --zonos-elements-v3-shadow-xxl: 0px 32px 50px 0px rgba(10, 10, 11, 0.24),
     0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --amino-v3-shadow-inset: 0px 2px 4px rgba(0, 0, 0, 0.04),
+  --zonos-elements-v3-shadow-inset: 0px 2px 4px rgba(0, 0, 0, 0.04),
     0px 1px 0px 0px rgba(255, 255, 255, 1),
     inset 0px 0px 8px rgba(0, 0, 0, 0.02),
     inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06),
     inset 0px 2px 4px rgba(0, 0, 0, 0.04), inset 0px 1px 1px rgba(0, 0, 0, 0.04);
-  --amino-shadow-button-primary: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
+  --zonos-elements-shadow-button-primary: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 1px 3px 0px rgba(68, 94, 238, 0.4);
-  --amino-shadow-button-success: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
+  --zonos-elements-shadow-button-success: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 1px 3px 0px rgba(43, 156, 77, 0.4);
-  --amino-shadow-button-danger: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
+  --zonos-elements-shadow-button-danger: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 1px 3px 0px rgba(217, 33, 65, 0.4);
-  --amino-shadow-button-warning: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
+  --zonos-elements-shadow-button-warning: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 1px 3px 0px rgba(229, 89, 26, 0.4);
-  --amino-button-focus-ring: 0 0 0 2px var(--amino-blue-600);
-  --amino-shadow-button-standard: 0px 1px 3px 0px rgba(110, 110, 120, 0.12),
+  --zonos-elements-button-focus-ring: 0 0 0 2px var(--zonos-elements-blue-600);
+  --zonos-elements-shadow-button-standard: 0px 1px 3px 0px
+      rgba(110, 110, 120, 0.12),
     0px -1px 1px 1px rgba(0, 0, 0, 0.08) inset,
     0px 0px 0px 1px rgba(106, 109, 119, 0.12) inset;
-  --amino-shadow-button-disabled: 0px 1px 3px 0px rgba(16, 17, 22, 0.2),
+  --zonos-elements-shadow-button-disabled: 0px 1px 3px 0px rgba(16, 17, 22, 0.2),
     0px -1px 1px 1px rgba(0, 0, 0, 0.08) inset;
-  --amino-shadow-select-base: 0px 1px 3px 0px rgba(110, 110, 120, 0.12),
+  --zonos-elements-shadow-select-base: 0px 1px 3px 0px rgba(110, 110, 120, 0.12),
     0px -1px 1px 1px rgba(0, 0, 0, 0.08) inset,
     0px 0px 0px 1px rgba(106, 109, 119, 0.12) inset;
-  --amino-shadow-select-active: 0px 1px 3px 0px rgba(68, 94, 238, 0.4),
+  --zonos-elements-shadow-select-active: 0px 1px 3px 0px rgba(68, 94, 238, 0.4),
     0px 0px 0px 1px #445eee inset,
     0px -1px 1px 1px rgba(68, 94, 238, 0.12) inset;
-  --amino-shadow-select-error: 0px 1px 3px 0px rgba(221, 49, 78, 0.4),
+  --zonos-elements-shadow-select-error: 0px 1px 3px 0px rgba(221, 49, 78, 0.4),
     0px 0px 0px 1px #dd314e inset,
     0px -1px 1px 1px rgba(221, 49, 78, 0.12) inset;
-  --amino-opacity-disabled: 0.6;
-  --amino-border: 1px solid var(--amino-border-color);
-  --amino-border-blue: 1px solid var(--amino-blue-500);
-  --amino-border-red: 1px solid var(--amino-red-400);
-  --amino-border-cyan: 1px solid var(--amino-cyan-400);
-  --amino-border-orange: 1px solid var(--amino-orange-400);
-  --amino-border-green: 1px solid var(--amino-green-400);
-  --amino-border-purple: 1px solid var(--amino-purple-400);
-  --amino-border-amber: 1px solid var(--amino-amber-400);
-  --amino-border-transparent: 1px solid transparent;
-  --amino-border-subtle: 1px solid var(--amino-gray-100);
-  --amino-sidebar-color: var(--amino-gray-0);
-  --amino-header-color: var(--amino-gray-0);
-  --amino-danger: var(--amino-red-600);
-  --amino-danger-dark: var(--amino-red-700);
-  --amino-error: var(--amino-red-600);
-  --amino-primary: var(--amino-blue-600);
-  --amino-primary-light: var(--amino-blue-500);
-  --amino-primary-dark: var(--amino-blue-800);
-  --amino-success: var(--amino-green-600);
-  --amino-success-dark: var(--amino-green-700);
-  --amino-warning: var(--amino-orange-600);
-  --amino-warning-dark: var(--amino-orange-600);
-  --amino-glow-error: 0 0 0 1px var(--amino-red-600);
-  --amino-glow-blue: 0 0 0 1px var(--amino-primary);
-  --amino-glow-cyan: 0 0 0 1px var(--amino-cyan-600);
-  --amino-glow-red: 0 0 0 1px var(--amino-red-600);
-  --amino-glow-orange: 0 0 0 1px var(--amino-orange-600);
-  --amino-glow-green: 0 0 0 1px var(--amino-green-600);
-  --amino-glow-purple: 0 0 0 1px var(--amino-purple-600);
-  --amino-page-background: var(--amino-gray-0);
-  --amino-border-color: var(--amino-gray-200);
-  --amino-hover-color: var(--amino-gray-50);
-  --amino-text-color: var(--amino-gray-1200);
-  --amino-text-color-secondary: var(--amino-gray-800);
-  --amino-focus-button-standard: 0px 0px 0px 1px
-      var(--amino-transparent-gray-600) inset,
-    var(--amino-button-focus-ring);
-  --amino-focus-button: 0px 0px 0px 1px var(--amino-gray-0) inset,
-    var(--amino-button-focus-ring);
-  --amino-surface-color: var(--amino-gray-0);
-  --amino-surface-color-secondary: var(--amino-gray-50);
-  --amino-backdrop-color: #000000;
-  --amino-raised-surface-color: var(--amino-gray-0);
-  --amino-raised-color-secondary: var(--amino-gray-50);
-  --amino-button-primary-hover: linear-gradient(
+  --zonos-elements-opacity-disabled: 0.6;
+  --zonos-elements-border: 1px solid var(--zonos-elements-border-color);
+  --zonos-elements-border-blue: 1px solid var(--zonos-elements-blue-500);
+  --zonos-elements-border-red: 1px solid var(--zonos-elements-red-400);
+  --zonos-elements-border-cyan: 1px solid var(--zonos-elements-cyan-400);
+  --zonos-elements-border-orange: 1px solid var(--zonos-elements-orange-400);
+  --zonos-elements-border-green: 1px solid var(--zonos-elements-green-400);
+  --zonos-elements-border-purple: 1px solid var(--zonos-elements-purple-400);
+  --zonos-elements-border-amber: 1px solid var(--zonos-elements-amber-400);
+  --zonos-elements-border-transparent: 1px solid transparent;
+  --zonos-elements-border-subtle: 1px solid var(--zonos-elements-gray-100);
+  --zonos-elements-sidebar-color: var(--zonos-elements-gray-0);
+  --zonos-elements-header-color: var(--zonos-elements-gray-0);
+  --zonos-elements-danger: var(--zonos-elements-red-600);
+  --zonos-elements-danger-dark: var(--zonos-elements-red-700);
+  --zonos-elements-error: var(--zonos-elements-red-600);
+  --zonos-elements-primary: var(--zonos-elements-blue-600);
+  --zonos-elements-primary-light: var(--zonos-elements-blue-500);
+  --zonos-elements-primary-dark: var(--zonos-elements-blue-800);
+  --zonos-elements-success: var(--zonos-elements-green-600);
+  --zonos-elements-success-dark: var(--zonos-elements-green-700);
+  --zonos-elements-warning: var(--zonos-elements-orange-600);
+  --zonos-elements-warning-dark: var(--zonos-elements-orange-600);
+  --zonos-elements-glow-error: 0 0 0 1px var(--zonos-elements-red-600);
+  --zonos-elements-glow-blue: 0 0 0 1px var(--zonos-elements-primary);
+  --zonos-elements-glow-cyan: 0 0 0 1px var(--zonos-elements-cyan-600);
+  --zonos-elements-glow-red: 0 0 0 1px var(--zonos-elements-red-600);
+  --zonos-elements-glow-orange: 0 0 0 1px var(--zonos-elements-orange-600);
+  --zonos-elements-glow-green: 0 0 0 1px var(--zonos-elements-green-600);
+  --zonos-elements-glow-purple: 0 0 0 1px var(--zonos-elements-purple-600);
+  --zonos-elements-page-background: var(--zonos-elements-gray-0);
+  --zonos-elements-border-color: var(--zonos-elements-gray-200);
+  --zonos-elements-hover-color: var(--zonos-elements-gray-50);
+  --zonos-elements-text-color: var(--zonos-elements-gray-1200);
+  --zonos-elements-text-color-secondary: var(--zonos-elements-gray-800);
+  --zonos-elements-focus-button-standard: 0px 0px 0px 1px
+      var(--zonos-elements-transparent-gray-600) inset,
+    var(--zonos-elements-button-focus-ring);
+  --zonos-elements-focus-button: 0px 0px 0px 1px var(--zonos-elements-gray-0)
+      inset,
+    var(--zonos-elements-button-focus-ring);
+  --zonos-elements-surface-color: var(--zonos-elements-gray-0);
+  --zonos-elements-surface-color-secondary: var(--zonos-elements-gray-50);
+  --zonos-elements-backdrop-color: #000000;
+  --zonos-elements-raised-surface-color: var(--zonos-elements-gray-0);
+  --zonos-elements-raised-color-secondary: var(--zonos-elements-gray-50);
+  --zonos-elements-button-primary-hover: linear-gradient(
     180deg,
     #445eee 0%,
     #364bd4 100%
   );
-  --amino-button-success-hover: linear-gradient(
+  --zonos-elements-button-success-hover: linear-gradient(
     180deg,
     #2b9c4d 0%,
     #298549 100%
   );
-  --amino-button-danger-hover: linear-gradient(
+  --zonos-elements-button-danger-hover: linear-gradient(
     180deg,
     #d92141 0%,
     #b4223d 100%
   );
-  --amino-button-warning-hover: linear-gradient(
+  --zonos-elements-button-warning-hover: linear-gradient(
     180deg,
     #e5591a 0%,
     #b6471b 100%
   );
-  --amino-button-standard-hover: linear-gradient(180deg, #fff 0%, #eaebed 100%);
-  --amino-spinner-track-black: rgba(0, 0, 0, 0.3);
-  --amino-spinner-stroke-black: #0c0c0c;
-  --amino-spinner-track-white: rgba(255, 255, 255, 0.3);
-  --amino-spinner-stroke-white: #ffffff;
-  --amino-appbar-height: 55px;
-  --amino-sidebar-width: 232px;
-  --amino-elevation-0: 0;
-  --amino-elevation-100: 100;
-  --amino-elevation-200: 200;
-  --amino-elevation-300: 300;
-  --amino-elevation-400: 400;
-  --amino-elevation-500: 500;
-  --amino-dialog-elevation: var(--amino-elevation-400);
-  --amino-toast-elevation: var(--amino-elevation-500);
-  --amino-appbar-elevation: var(--amino-elevation-500);
-  --amino-size-xl: 56px;
-  --amino-size-lg: 48px;
-  --amino-size-md: 40px;
-  --amino-size-sm: 32px;
-  --amino-radius-4: 0.25rem;
-  --amino-radius-6: 0.375rem;
-  --amino-radius-8: 0.5rem;
-  --amino-radius-10: 0.625rem;
-  --amino-radius-12: 0.75rem;
-  --amino-font-size-3xl: 1.875rem;
-  --amino-font-size-2xl: 1.5rem;
-  --amino-font-size-xl: 1.25rem;
-  --amino-font-size-l: 1.125rem;
-  --amino-font-size-base-docs: 1rem;
-  --amino-font-size-base: 0.813rem;
-  --amino-font-size-s: 0.75rem;
-  --amino-font-size-xs: 0.688rem;
-  --amino-line-height-3xl: 3rem;
-  --amino-line-height-2xl: 2.5rem;
-  --amino-line-height-xl: 2rem;
-  --amino-line-height-l: 1.5rem;
-  --amino-line-height-base: 1.5rem;
-  --amino-line-height-s: 1rem;
-  --amino-line-height-xs: 0.75rem;
-  --amino-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
-  --amino-font-mono: Operator Mono, MonoLisa, Dank Mono, Menlo, Monaco,
+  --zonos-elements-button-standard-hover: linear-gradient(
+    180deg,
+    #fff 0%,
+    #eaebed 100%
+  );
+  --zonos-elements-spinner-track-black: rgba(0, 0, 0, 0.3);
+  --zonos-elements-spinner-stroke-black: #0c0c0c;
+  --zonos-elements-spinner-track-white: rgba(255, 255, 255, 0.3);
+  --zonos-elements-spinner-stroke-white: #ffffff;
+  --zonos-elements-appbar-height: 55px;
+  --zonos-elements-sidebar-width: 232px;
+  --zonos-elements-elevation-0: 0;
+  --zonos-elements-elevation-100: 100;
+  --zonos-elements-elevation-200: 200;
+  --zonos-elements-elevation-300: 300;
+  --zonos-elements-elevation-400: 400;
+  --zonos-elements-elevation-500: 500;
+  --zonos-elements-dialog-elevation: var(--zonos-elements-elevation-400);
+  --zonos-elements-toast-elevation: var(--zonos-elements-elevation-500);
+  --zonos-elements-appbar-elevation: var(--zonos-elements-elevation-500);
+  --zonos-elements-size-xl: 56px;
+  --zonos-elements-size-lg: 48px;
+  --zonos-elements-size-md: 40px;
+  --zonos-elements-size-sm: 32px;
+  --zonos-elements-radius-4: 0.25rem;
+  --zonos-elements-radius-6: 0.375rem;
+  --zonos-elements-radius-8: 0.5rem;
+  --zonos-elements-radius-10: 0.625rem;
+  --zonos-elements-radius-12: 0.75rem;
+  --zonos-elements-font-size-3xl: 1.875rem;
+  --zonos-elements-font-size-2xl: 1.5rem;
+  --zonos-elements-font-size-xl: 1.25rem;
+  --zonos-elements-font-size-l: 1.125rem;
+  --zonos-elements-font-size-base-docs: 1rem;
+  --zonos-elements-font-size-base: 0.813rem;
+  --zonos-elements-font-size-s: 0.75rem;
+  --zonos-elements-font-size-xs: 0.688rem;
+  --zonos-elements-line-height-3xl: 3rem;
+  --zonos-elements-line-height-2xl: 2.5rem;
+  --zonos-elements-line-height-xl: 2rem;
+  --zonos-elements-line-height-l: 1.5rem;
+  --zonos-elements-line-height-base: 1.5rem;
+  --zonos-elements-line-height-s: 1rem;
+  --zonos-elements-line-height-xs: 0.75rem;
+  --zonos-elements-font-sans: "Inter", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  --zonos-elements-font-mono: Operator Mono, MonoLisa, Dank Mono, Menlo, Monaco,
     Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
     Courier New, monospace;
-  --amino-font-harmonized-codes: "Fira Code", var(--amino-font-sans);
-  --amino-input-background: inherit;
+  --zonos-elements-font-harmonized-codes: "Fira Code",
+    var(--zonos-elements-font-sans);
+  --zonos-elements-input-background: inherit;
 }
 
 /* Night theme */
-[data-theme=DARK] .zonos--elements:not([data-theme=LIGHT]),
-.zonos--elements[data-theme=DARK],
-.zonos--elements [data-theme=DARK] {
+[data-theme=DARK] {
   color-scheme: dark;
-  --amino-glass-0: #ffffff00;
-  --amino-glass-50: #ffffff0a;
-  --amino-glass-100: #ffffff21;
-  --amino-glass-200: #ffffff26;
-  --amino-glass-300: #ffffff44;
-  --amino-glass-400: #ffffff51;
-  --amino-glass-500: #ffffff63;
-  --amino-glass-600: #ffffff8e;
-  --amino-glass-700: #ffffffa8;
-  --amino-glass-800: #ffffffc1;
-  --amino-glass-900: #ffffffd8;
-  --amino-glass-1000: #ffffffea;
-  --amino-glass-1100: #fffffff4;
-  --amino-glass-1200: #fffffffa;
-  --amino-gray-0: #101116;
-  --amino-gray-50: #1a1c23;
-  --amino-gray-100: #2a2c37;
-  --amino-gray-200: #383a48;
-  --amino-gray-300: #484c5b;
-  --amino-gray-400: #575c6b;
-  --amino-gray-500: #676c7e;
-  --amino-gray-600: #888d9f;
-  --amino-gray-700: #a7a9b9;
-  --amino-gray-800: #bfc0ce;
-  --amino-gray-900: #d9dae3;
-  --amino-gray-1000: #ebebf0;
-  --amino-gray-1100: #f6f6f8;
-  --amino-gray-1200: #ffffff;
-  --amino-blue-100: #152141;
-  --amino-blue-200: #212f68;
-  --amino-blue-300: #2e3d94;
-  --amino-blue-400: #3843c2;
-  --amino-blue-500: #445eee;
-  --amino-blue-600: #5a80f1;
-  --amino-blue-700: #7fa9f5;
-  --amino-blue-800: #a8cefa;
-  --amino-blue-900: #c9e6fd;
-  --amino-blue-1000: #e7f6fe;
-  --amino-cyan-100: #152d32;
-  --amino-cyan-200: #1d464e;
-  --amino-cyan-300: #25646f;
-  --amino-cyan-400: #29818e;
-  --amino-cyan-500: #2ca0af;
-  --amino-cyan-600: #3ec4d0;
-  --amino-cyan-700: #66d5db;
-  --amino-cyan-800: #9be7e9;
-  --amino-cyan-900: #c0f2f2;
-  --amino-cyan-1000: #d6fffe;
-  --amino-red-100: #481419;
-  --amino-red-200: #6c1b26;
-  --amino-red-300: #922033;
-  --amino-red-400: #bc2442;
-  --amino-red-500: #de314f;
-  --amino-red-600: #eb5c6c;
-  --amino-red-700: #f37c82;
-  --amino-red-800: #faa9a9;
-  --amino-red-900: #fdd0ce;
-  --amino-red-1000: #ffeceb;
-  --amino-orange-100: #401d12;
-  --amino-orange-200: #6b2a1a;
-  --amino-orange-300: #94301c;
-  --amino-orange-400: #bd3c1c;
-  --amino-orange-500: #e5591a;
-  --amino-orange-600: #f47a34;
-  --amino-orange-700: #f7a464;
-  --amino-orange-800: #f5c193;
-  --amino-orange-900: #fcdab8;
-  --amino-orange-1000: #fff1e0;
-  --amino-green-100: #153219;
-  --amino-green-200: #1d4920;
-  --amino-green-300: #246627;
-  --amino-green-400: #288129;
-  --amino-green-500: #2ca03f;
-  --amino-green-600: #39c049;
-  --amino-green-700: #57db6c;
-  --amino-green-800: #81ef98;
-  --amino-green-900: #aff8c3;
-  --amino-green-1000: #defde8;
-  --amino-purple-100: #2c1844;
-  --amino-purple-200: #471d68;
-  --amino-purple-300: #6e1e99;
-  --amino-purple-400: #901cca;
-  --amino-purple-500: #ab26ed;
-  --amino-purple-600: #b25cf5;
-  --amino-purple-700: #c699fa;
-  --amino-purple-800: #ceb5fd;
-  --amino-purple-900: #dcd2fe;
-  --amino-purple-1000: #edebff;
-  --amino-transparent-white: #101116bb;
-  --amino-transparent-black: #ffffffbb;
-  --amino-transparent-gray-600: #94969e1f;
-  --amino-v3-shadow-base: 0px 1px 4px 0px rgba(0, 0, 0, 0.7),
+  --zonos-elements-glass-0: #ffffff00;
+  --zonos-elements-glass-50: #ffffff0a;
+  --zonos-elements-glass-100: #ffffff21;
+  --zonos-elements-glass-200: #ffffff26;
+  --zonos-elements-glass-300: #ffffff44;
+  --zonos-elements-glass-400: #ffffff51;
+  --zonos-elements-glass-500: #ffffff63;
+  --zonos-elements-glass-600: #ffffff8e;
+  --zonos-elements-glass-700: #ffffffa8;
+  --zonos-elements-glass-800: #ffffffc1;
+  --zonos-elements-glass-900: #ffffffd8;
+  --zonos-elements-glass-1000: #ffffffea;
+  --zonos-elements-glass-1100: #fffffff4;
+  --zonos-elements-glass-1200: #fffffffa;
+  --zonos-elements-gray-0: #101116;
+  --zonos-elements-gray-50: #1a1c23;
+  --zonos-elements-gray-100: #2a2c37;
+  --zonos-elements-gray-200: #383a48;
+  --zonos-elements-gray-300: #484c5b;
+  --zonos-elements-gray-400: #575c6b;
+  --zonos-elements-gray-500: #676c7e;
+  --zonos-elements-gray-600: #888d9f;
+  --zonos-elements-gray-700: #a7a9b9;
+  --zonos-elements-gray-800: #bfc0ce;
+  --zonos-elements-gray-900: #d9dae3;
+  --zonos-elements-gray-1000: #ebebf0;
+  --zonos-elements-gray-1100: #f6f6f8;
+  --zonos-elements-gray-1200: #ffffff;
+  --zonos-elements-blue-100: #152141;
+  --zonos-elements-blue-200: #212f68;
+  --zonos-elements-blue-300: #2e3d94;
+  --zonos-elements-blue-400: #3843c2;
+  --zonos-elements-blue-500: #445eee;
+  --zonos-elements-blue-600: #5a80f1;
+  --zonos-elements-blue-700: #7fa9f5;
+  --zonos-elements-blue-800: #a8cefa;
+  --zonos-elements-blue-900: #c9e6fd;
+  --zonos-elements-blue-1000: #e7f6fe;
+  --zonos-elements-cyan-100: #152d32;
+  --zonos-elements-cyan-200: #1d464e;
+  --zonos-elements-cyan-300: #25646f;
+  --zonos-elements-cyan-400: #29818e;
+  --zonos-elements-cyan-500: #2ca0af;
+  --zonos-elements-cyan-600: #3ec4d0;
+  --zonos-elements-cyan-700: #66d5db;
+  --zonos-elements-cyan-800: #9be7e9;
+  --zonos-elements-cyan-900: #c0f2f2;
+  --zonos-elements-cyan-1000: #d6fffe;
+  --zonos-elements-red-100: #481419;
+  --zonos-elements-red-200: #6c1b26;
+  --zonos-elements-red-300: #922033;
+  --zonos-elements-red-400: #bc2442;
+  --zonos-elements-red-500: #de314f;
+  --zonos-elements-red-600: #eb5c6c;
+  --zonos-elements-red-700: #f37c82;
+  --zonos-elements-red-800: #faa9a9;
+  --zonos-elements-red-900: #fdd0ce;
+  --zonos-elements-red-1000: #ffeceb;
+  --zonos-elements-orange-100: #401d12;
+  --zonos-elements-orange-200: #6b2a1a;
+  --zonos-elements-orange-300: #94301c;
+  --zonos-elements-orange-400: #bd3c1c;
+  --zonos-elements-orange-500: #e5591a;
+  --zonos-elements-orange-600: #f47a34;
+  --zonos-elements-orange-700: #f7a464;
+  --zonos-elements-orange-800: #f5c193;
+  --zonos-elements-orange-900: #fcdab8;
+  --zonos-elements-orange-1000: #fff1e0;
+  --zonos-elements-green-100: #153219;
+  --zonos-elements-green-200: #1d4920;
+  --zonos-elements-green-300: #246627;
+  --zonos-elements-green-400: #288129;
+  --zonos-elements-green-500: #2ca03f;
+  --zonos-elements-green-600: #39c049;
+  --zonos-elements-green-700: #57db6c;
+  --zonos-elements-green-800: #81ef98;
+  --zonos-elements-green-900: #aff8c3;
+  --zonos-elements-green-1000: #defde8;
+  --zonos-elements-purple-100: #2c1844;
+  --zonos-elements-purple-200: #471d68;
+  --zonos-elements-purple-300: #6e1e99;
+  --zonos-elements-purple-400: #901cca;
+  --zonos-elements-purple-500: #ab26ed;
+  --zonos-elements-purple-600: #b25cf5;
+  --zonos-elements-purple-700: #c699fa;
+  --zonos-elements-purple-800: #ceb5fd;
+  --zonos-elements-purple-900: #dcd2fe;
+  --zonos-elements-purple-1000: #edebff;
+  --zonos-elements-transparent-white: #101116bb;
+  --zonos-elements-transparent-black: #ffffffbb;
+  --zonos-elements-transparent-gray-600: #94969e1f;
+  --zonos-elements-v3-shadow-base: 0px 1px 4px 0px rgba(0, 0, 0, 0.7),
     0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --amino-v3-shadow-medium: 0px 2px 4px 0px rgba(0, 0, 0, 0.6),
+  --zonos-elements-v3-shadow-medium: 0px 2px 4px 0px rgba(0, 0, 0, 0.6),
     0px 4px 6px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --amino-v3-shadow-large: 0px 4px 6px 0px rgba(0, 0, 0, 0.6),
+  --zonos-elements-v3-shadow-large: 0px 4px 6px 0px rgba(0, 0, 0, 0.6),
     0px 10px 15px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --amino-v3-shadow-xl: 0px 10px 10px 0px rgba(0, 0, 0, 0.6),
+  --zonos-elements-v3-shadow-xl: 0px 10px 10px 0px rgba(0, 0, 0, 0.6),
     0px 20px 25px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --amino-v3-shadow-xxl: 0px 32px 50px 0px rgba(0, 0, 0, 0.7),
+  --zonos-elements-v3-shadow-xxl: 0px 32px 50px 0px rgba(0, 0, 0, 0.7),
     0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --amino-v3-shadow-inset: 0px 2px 4px rgba(0, 0, 0, 0.24),
+  --zonos-elements-v3-shadow-inset: 0px 2px 4px rgba(0, 0, 0, 0.24),
     0px 1px 0px rgba(17, 17, 20, 1), inset 0px 0px 8px rgba(0, 0, 0, 0.16),
     inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.24),
     inset 0px 2px 4px rgba(0, 0, 0, 0.24), inset 0px 1px 1px rgba(0, 0, 0, 0.24),
     0px 0px 6px rgba(255, 255, 255, 0.08),
     0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --amino-shadow-button-primary: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-button-primary: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(95, 146, 246, 0.4);
-  --amino-shadow-button-success: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-button-success: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(86, 199, 111, 0.6);
-  --amino-shadow-button-danger: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-button-danger: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(249, 92, 103, 0.6);
-  --amino-shadow-button-warning: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-button-warning: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(248, 140, 83, 0.6);
-  --amino-button-focus-ring: 0 0 0 2px var(--amino-blue-600);
-  --amino-shadow-button-standard: 0px 0px 0px 1px #000,
+  --zonos-elements-button-focus-ring: 0 0 0 2px var(--zonos-elements-blue-600);
+  --zonos-elements-shadow-button-standard: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.4) inset,
     0px 0px 2px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(0, 0, 0, 0.8),
     0px 0px 0px 1px rgba(148, 150, 158, 0.12) inset;
-  --amino-shadow-button-disabled: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-button-disabled: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
     0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(255, 255, 255, 0);
-  --amino-shadow-select-base: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-select-base: 0px 0px 0px 1px #000,
     0px -1px 1px 0px rgba(0, 0, 0, 0.4) inset,
     0px 0px 2px 1px rgba(255, 255, 255, 0.08) inset,
     0px 1px 3px 0px rgba(0, 0, 0, 0.8),
     0px 0px 0px 1px rgba(148, 150, 158, 0.12) inset;
-  --amino-shadow-select-active: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-select-active: 0px 0px 0px 1px #000,
     0px -1px 1px 1px rgba(114, 146, 243, 0.24) inset,
     0px 0px 0px 1px #7292f3 inset, 0px 1px 3px 0px rgba(114, 146, 243, 0.4);
-  --amino-shadow-select-error: 0px 0px 0px 1px #000,
+  --zonos-elements-shadow-select-error: 0px 0px 0px 1px #000,
     0px -1px 1px 1px rgba(235, 92, 108, 0.24) inset,
     0px 0px 0px 1px #eb5c6c inset, 0px 1px 3px 0px rgba(235, 92, 108, 0.6);
-  --amino-border: 1px solid var(--amino-border-color);
-  --amino-border-blue: 1px solid var(--amino-blue-500);
-  --amino-border-red: 1px solid var(--amino-red-400);
-  --amino-border-cyan: 1px solid var(--amino-cyan-400);
-  --amino-border-orange: 1px solid var(--amino-orange-400);
-  --amino-border-green: 1px solid var(--amino-green-400);
-  --amino-border-purple: 1px solid var(--amino-purple-400);
-  --amino-border-amber: 1px solid var(--amino-amber-400);
-  --amino-border-transparent: 1px solid transparent;
-  --amino-border-subtle: 1px solid var(--amino-gray-100);
-  --amino-sidebar-color: var(--amino-gray-0);
-  --amino-header-color: var(--amino-gray-0);
-  --amino-danger: var(--amino-red-600);
-  --amino-danger-dark: var(--amino-red-700);
-  --amino-error: var(--amino-red-600);
-  --amino-primary: var(--amino-blue-600);
-  --amino-primary-light: var(--amino-blue-500);
-  --amino-primary-dark: var(--amino-blue-800);
-  --amino-success: var(--amino-green-600);
-  --amino-success-dark: var(--amino-green-700);
-  --amino-warning: var(--amino-orange-600);
-  --amino-warning-dark: var(--amino-orange-600);
-  --amino-glow-error: 0 0 0 1px var(--amino-red-600);
-  --amino-glow-blue: 0 0 0 1px var(--amino-primary);
-  --amino-glow-cyan: 0 0 0 1px var(--amino-cyan-600);
-  --amino-glow-red: 0 0 0 1px var(--amino-red-600);
-  --amino-glow-orange: 0 0 0 1px var(--amino-orange-600);
-  --amino-glow-green: 0 0 0 1px var(--amino-green-600);
-  --amino-glow-purple: 0 0 0 1px var(--amino-purple-600);
-  --amino-page-background: var(--amino-gray-0);
-  --amino-border-color: var(--amino-gray-200);
-  --amino-hover-color: var(--amino-gray-50);
-  --amino-text-color: var(--amino-gray-1200);
-  --amino-text-color-secondary: var(--amino-gray-800);
-  --amino-focus-button-standard: 0px 0px 0px 1px
-      var(--amino-transparent-gray-600) inset,
-    var(--amino-button-focus-ring);
-  --amino-focus-button: 0px 0px 0px 1px var(--amino-gray-0) inset,
-    var(--amino-button-focus-ring);
-  --amino-surface-color: var(--amino-gray-50);
-  --amino-surface-color-secondary: var(--amino-gray-100);
-  --amino-backdrop-color: #000000;
-  --amino-raised-surface-color: #2c2e3899;
-  --amino-raised-color-secondary: var(--amino-gray-0);
-  --amino-button-primary-hover: linear-gradient(
+  --zonos-elements-border: 1px solid var(--zonos-elements-border-color);
+  --zonos-elements-border-blue: 1px solid var(--zonos-elements-blue-500);
+  --zonos-elements-border-red: 1px solid var(--zonos-elements-red-400);
+  --zonos-elements-border-cyan: 1px solid var(--zonos-elements-cyan-400);
+  --zonos-elements-border-orange: 1px solid var(--zonos-elements-orange-400);
+  --zonos-elements-border-green: 1px solid var(--zonos-elements-green-400);
+  --zonos-elements-border-purple: 1px solid var(--zonos-elements-purple-400);
+  --zonos-elements-border-amber: 1px solid var(--zonos-elements-amber-400);
+  --zonos-elements-border-transparent: 1px solid transparent;
+  --zonos-elements-border-subtle: 1px solid var(--zonos-elements-gray-100);
+  --zonos-elements-sidebar-color: var(--zonos-elements-gray-0);
+  --zonos-elements-header-color: var(--zonos-elements-gray-0);
+  --zonos-elements-danger: var(--zonos-elements-red-600);
+  --zonos-elements-danger-dark: var(--zonos-elements-red-700);
+  --zonos-elements-error: var(--zonos-elements-red-600);
+  --zonos-elements-primary: var(--zonos-elements-blue-600);
+  --zonos-elements-primary-light: var(--zonos-elements-blue-500);
+  --zonos-elements-primary-dark: var(--zonos-elements-blue-800);
+  --zonos-elements-success: var(--zonos-elements-green-600);
+  --zonos-elements-success-dark: var(--zonos-elements-green-700);
+  --zonos-elements-warning: var(--zonos-elements-orange-600);
+  --zonos-elements-warning-dark: var(--zonos-elements-orange-600);
+  --zonos-elements-glow-error: 0 0 0 1px var(--zonos-elements-red-600);
+  --zonos-elements-glow-blue: 0 0 0 1px var(--zonos-elements-primary);
+  --zonos-elements-glow-cyan: 0 0 0 1px var(--zonos-elements-cyan-600);
+  --zonos-elements-glow-red: 0 0 0 1px var(--zonos-elements-red-600);
+  --zonos-elements-glow-orange: 0 0 0 1px var(--zonos-elements-orange-600);
+  --zonos-elements-glow-green: 0 0 0 1px var(--zonos-elements-green-600);
+  --zonos-elements-glow-purple: 0 0 0 1px var(--zonos-elements-purple-600);
+  --zonos-elements-page-background: var(--zonos-elements-gray-0);
+  --zonos-elements-border-color: var(--zonos-elements-gray-200);
+  --zonos-elements-hover-color: var(--zonos-elements-gray-50);
+  --zonos-elements-text-color: var(--zonos-elements-gray-1200);
+  --zonos-elements-text-color-secondary: var(--zonos-elements-gray-800);
+  --zonos-elements-focus-button-standard: 0px 0px 0px 1px
+      var(--zonos-elements-transparent-gray-600) inset,
+    var(--zonos-elements-button-focus-ring);
+  --zonos-elements-focus-button: 0px 0px 0px 1px var(--zonos-elements-gray-0)
+      inset,
+    var(--zonos-elements-button-focus-ring);
+  --zonos-elements-surface-color: var(--zonos-elements-gray-50);
+  --zonos-elements-surface-color-secondary: var(--zonos-elements-gray-100);
+  --zonos-elements-backdrop-color: #000000;
+  --zonos-elements-raised-surface-color: #2c2e3899;
+  --zonos-elements-raised-color-secondary: var(--zonos-elements-gray-0);
+  --zonos-elements-button-primary-hover: linear-gradient(
     180deg,
     #5a80f1 0%,
     #7fa9f5 100%
   );
-  --amino-button-success-hover: linear-gradient(
+  --zonos-elements-button-success-hover: linear-gradient(
     180deg,
     #39c049 0%,
     #57db6c 100%
   );
-  --amino-button-danger-hover: linear-gradient(
+  --zonos-elements-button-danger-hover: linear-gradient(
     180deg,
     #e9495c 0%,
     #f37c82 100%
   );
-  --amino-button-warning-hover: linear-gradient(
+  --zonos-elements-button-warning-hover: linear-gradient(
     180deg,
     #f47a34 0%,
     #f7a464 100%
   );
-  --amino-button-standard-hover: linear-gradient(180deg, #2c2e3800, #2c2e38e5);
-  --amino-spinner-track-black: rgba(255, 255, 255, 0.3);
-  --amino-spinner-stroke-black: #ffffff;
-  --amino-spinner-track-white: rgba(0, 0, 0, 0.3);
-  --amino-spinner-stroke-white: #0c0c0c;
-  /* Fix for dark mode surface hover color. Dark mode surfaces have a lighter color than day mode inverted to see shadows better. */
-}
-[data-theme=DARK] .zonos--elements:not([data-theme=LIGHT]) .elevated,
-.zonos--elements[data-theme=DARK] .elevated,
-.zonos--elements [data-theme=DARK] .elevated {
-  --amino-hover-color: var(--amino-gray-100);
+  --zonos-elements-button-standard-hover: linear-gradient(
+    180deg,
+    #2c2e3800,
+    #2c2e38e5
+  );
+  --zonos-elements-spinner-track-black: rgba(255, 255, 255, 0.3);
+  --zonos-elements-spinner-stroke-black: #ffffff;
+  --zonos-elements-spinner-track-white: rgba(0, 0, 0, 0.3);
+  --zonos-elements-spinner-stroke-white: #0c0c0c;
 }
 
 :host .zonos--hello-dialog-footer {
   text-align: left;
   display: flex;
   justify-content: space-between;
-  background: var(--primary-color, var(--amino-surface-color-secondary));
-  border-top: var(--amino-border);
+  background: var(--primary-color, var(--zonos-elements-surface-color-secondary));
+  border-top: var(--zonos-elements-border);
   padding: 12px;
   align-items: center;
 }
@@ -521,7 +528,7 @@
   display: inline-flex;
 }
 :host .zonos--hello-dialog-footer zonos-button button.outline {
-  outline: 1px solid var(--amino-gray-800);
+  outline: 1px solid var(--zonos-elements-gray-800);
 }
 :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
   display: flex;