@zonos/elements 1.3.15-alpha.1 → 1.3.15-alpha.3

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

@@ -34,7 +34,7 @@
 [data-theme=LIGHT],
 .zonos--elements {
   color-scheme: light;
-  --amino-transition: all 0.2s ease-in-out 0s;
+  --amino-transition: all 0.2s ease-in-out 0s, visibility 0s;
   --amino-type-scale-base: 16px;
   --amino-glass-0: #10111600;
   --amino-glass-50: #1011160a;
@@ -52,95 +52,98 @@
   --amino-glass-1200: #101116f5;
   --amino-gray-0: #ffffff;
   --amino-gray-50: #f6f6f8;
-  --amino-gray-100: #eaebed;
-  --amino-gray-200: #d9dadd;
-  --amino-gray-300: #c5c6ca;
-  --amino-gray-400: #acaeb3;
-  --amino-gray-500: #94969e;
-  --amino-gray-600: #6a6d77;
-  --amino-gray-700: #5c5e68;
-  --amino-gray-800: #4d505a;
-  --amino-gray-900: #40424c;
-  --amino-gray-1000: #2e3038;
-  --amino-gray-1100: #1e1f26;
+  --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: #deedfe;
-  --amino-blue-200: #c5ddfd;
-  --amino-blue-300: #aacbfc;
-  --amino-blue-400: #89b2fa;
-  --amino-blue-500: #5f92f6;
+  --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: #364bd4;
-  --amino-blue-800: #2c3baf;
-  --amino-blue-900: #252e7e;
-  --amino-blue-1000: #1c2154;
-  --amino-cyan-100: #dbfffe;
-  --amino-cyan-200: #bafdfd;
-  --amino-cyan-300: #8ff6fa;
-  --amino-cyan-400: #65e6ef;
-  --amino-cyan-500: #4ec6d4;
-  --amino-cyan-600: #37a5b4;
-  --amino-cyan-700: #2c8896;
-  --amino-cyan-800: #26707e;
-  --amino-cyan-900: #245660;
-  --amino-cyan-1000: #183339;
-  --amino-red-100: #ffedeb;
-  --amino-red-200: #fdd3d0;
-  --amino-red-300: #fcb4b2;
-  --amino-red-400: #fa8b8b;
-  --amino-red-500: #f95c67;
-  --amino-red-600: #d92141;
-  --amino-red-700: #b4223d;
-  --amino-red-800: #8c1d33;
-  --amino-red-900: #641627;
-  --amino-red-1000: #49121f;
-  --amino-orange-100: #ffefe0;
-  --amino-orange-200: #fed7b8;
-  --amino-orange-300: #fdc7a0;
-  --amino-orange-400: #fca975;
-  --amino-orange-500: #f88c53;
+  --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: #b6471b;
-  --amino-orange-800: #903a1d;
-  --amino-orange-900: #692c1c;
-  --amino-orange-1000: #441c13;
-  --amino-green-100: #e0ffe3;
-  --amino-green-200: #c8fdce;
-  --amino-green-300: #a9f9b5;
-  --amino-green-400: #7de490;
-  --amino-green-500: #56c76f;
-  --amino-green-600: #2b9c4d;
-  --amino-green-700: #298549;
-  --amino-green-800: #266e3e;
-  --amino-green-900: #245234;
-  --amino-green-1000: #1c3626;
-  --amino-purple-100: #f4eeff;
-  --amino-purple-200: #e7d8fd;
-  --amino-purple-300: #ddc5fc;
-  --amino-purple-400: #cea9fa;
-  --amino-purple-500: #bd82f8;
-  --amino-purple-600: #ab30ee;
-  --amino-purple-700: #922bc5;
-  --amino-purple-800: #742498;
-  --amino-purple-900: #54206a;
-  --amino-purple-1000: #3b1948;
+  --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 0px 0px 1px rgba(110, 110, 120, 0.1),
-    0px 1px 2px rgba(10, 10, 11, 0.06), 0px 1px 3px rgba(10, 10, 11, 0.1);
-  --amino-v3-shadow-medium: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
-    0px 4px 6px rgba(10, 10, 11, 0.1), 0px 2px 4px rgba(10, 10, 11, 0.06);
-  --amino-v3-shadow-large: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
-    0px 10px 15px rgba(10, 10, 11, 0.1), 0px 4px 6px rgba(10, 10, 11, 0.05);
-  --amino-v3-shadow-xl: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
-    0px 20px 25px rgba(10, 10, 11, 0.1), 0px 10px 10px rgba(12, 12, 13, 0.04);
-  --amino-v3-shadow-xxl: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
-    0px 32px 50px rgba(10, 10, 11, 0.24);
-  --amino-v3-shadow-inset: 0px 1px 0px #ffffff, 0px 2px 4px rgba(0, 0, 0, 0.04),
-    inset 0px 1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 4px rgba(0, 0, 0, 0.04),
+  --amino-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),
+    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),
+    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),
+    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),
+    0px 0px 0px 1px rgba(110, 110, 120, 0.1);
+  --amino-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 0px 8px rgba(0, 0, 0, 0.02);
+    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,
     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,
@@ -153,47 +156,18 @@
   --amino-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-space-negative-80: -5rem;
-  --amino-space-negative-76: -4.75rem;
-  --amino-space-negative-72: -4.5rem;
-  --amino-space-negative-68: -4.25rem;
-  --amino-space-negative-64: -4rem;
-  --amino-space-negative-60: -3.75rem;
-  --amino-space-negative-56: -3.5rem;
-  --amino-space-negative-52: -3.25rem;
-  --amino-space-negative-48: -3rem;
-  --amino-space-negative-44: -2.75rem;
-  --amino-space-negative-40: -2.5rem;
-  --amino-space-negative-36: -2.25rem;
-  --amino-space-negative-32: -2rem;
-  --amino-space-negative-28: -1.75rem;
-  --amino-space-negative-24: -1.5rem;
-  --amino-space-negative-20: -1.25rem;
-  --amino-space-negative-16: -1rem;
-  --amino-space-negative-12: -0.75rem;
-  --amino-space-negative-8: -0.5rem;
-  --amino-space-negative-4: -0.25rem;
-  --amino-space-0: 0;
-  --amino-space-4: 0.25rem;
-  --amino-space-8: 0.5rem;
-  --amino-space-12: 0.75rem;
-  --amino-space-16: 1rem;
-  --amino-space-20: 1.25rem;
-  --amino-space-24: 1.5rem;
-  --amino-space-28: 1.75rem;
-  --amino-space-32: 2rem;
-  --amino-space-36: 2.25rem;
-  --amino-space-40: 2.5rem;
-  --amino-space-44: 2.75rem;
-  --amino-space-48: 3rem;
-  --amino-space-52: 3.25rem;
-  --amino-space-56: 3.5rem;
-  --amino-space-60: 3.75rem;
-  --amino-space-64: 4rem;
-  --amino-space-68: 4.25rem;
-  --amino-space-72: 4.5rem;
-  --amino-space-76: 4.75rem;
-  --amino-space-80: 5rem;
+  --amino-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),
+    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),
+    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),
+    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);
@@ -203,6 +177,7 @@
   --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);
@@ -225,7 +200,7 @@
   --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-1000);
+  --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,
@@ -234,7 +209,9 @@
     var(--amino-button-focus-ring);
   --amino-surface-color: var(--amino-gray-0);
   --amino-surface-color-secondary: var(--amino-gray-50);
-  --amino-backdrop-color: var(--amino-gray-1200);
+  --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(
     180deg,
     #445eee 0%,
@@ -280,14 +257,14 @@
   --amino-radius-8: 0.5rem;
   --amino-radius-10: 0.625rem;
   --amino-radius-12: 0.75rem;
-  --amino-font-size-3xl: 2.125rem;
-  --amino-font-size-2xl: 1.75rem;
-  --amino-font-size-xl: 1.375rem;
+  --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.875rem;
+  --amino-font-size-base: 0.813rem;
   --amino-font-size-s: 0.75rem;
-  --amino-font-size-xs: 0.625rem;
+  --amino-font-size-xs: 0.688rem;
   --amino-line-height-3xl: 3rem;
   --amino-line-height-2xl: 2.5rem;
   --amino-line-height-xl: 2rem;
@@ -325,112 +302,135 @@
   --amino-glass-1100: #fffffff4;
   --amino-glass-1200: #fffffffa;
   --amino-gray-0: #101116;
-  --amino-gray-50: #1e1f26;
-  --amino-gray-100: #2e3038;
-  --amino-gray-200: #40424c;
-  --amino-gray-300: #4d505a;
-  --amino-gray-400: #5c5e68;
-  --amino-gray-500: #6a6d77;
-  --amino-gray-600: #94969e;
-  --amino-gray-700: #acaeb3;
-  --amino-gray-800: #c5c6ca;
-  --amino-gray-900: #d9dadd;
-  --amino-gray-1000: #eaebed;
+  --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: #1c2154;
-  --amino-blue-200: #252e7e;
-  --amino-blue-300: #2c3baf;
-  --amino-blue-400: #364bd4;
+  --amino-blue-100: #152141;
+  --amino-blue-200: #212f68;
+  --amino-blue-300: #2e3d94;
+  --amino-blue-400: #3843c2;
   --amino-blue-500: #445eee;
-  --amino-blue-600: #5f92f6;
-  --amino-blue-700: #89b2fa;
-  --amino-blue-800: #aacbfc;
-  --amino-blue-900: #c5ddfd;
-  --amino-blue-1000: #deedfe;
-  --amino-cyan-100: #183339;
-  --amino-cyan-200: #245660;
-  --amino-cyan-300: #26707e;
-  --amino-cyan-400: #2c8896;
-  --amino-cyan-500: #37a5b4;
-  --amino-cyan-600: #4ec6d4;
-  --amino-cyan-700: #65e6ef;
-  --amino-cyan-800: #8ff6fa;
-  --amino-cyan-900: #bafdfd;
-  --amino-cyan-1000: #dbfffe;
-  --amino-red-100: #49121f;
-  --amino-red-200: #641627;
-  --amino-red-300: #8c1d33;
-  --amino-red-400: #b4223d;
-  --amino-red-500: #d92141;
-  --amino-red-600: #f95c67;
-  --amino-red-700: #fa8b8b;
-  --amino-red-800: #fcb4b2;
-  --amino-red-900: #fdd3d0;
-  --amino-red-1000: #ffedeb;
-  --amino-orange-100: #441c13;
-  --amino-orange-200: #692c1c;
-  --amino-orange-300: #903a1d;
-  --amino-orange-400: #b6471b;
+  --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: #f88c53;
-  --amino-orange-700: #fca975;
-  --amino-orange-800: #fdc7a0;
-  --amino-orange-900: #fed7b8;
-  --amino-orange-1000: #ffefe0;
-  --amino-green-100: #1c3626;
-  --amino-green-200: #245234;
-  --amino-green-300: #266e3e;
-  --amino-green-400: #298549;
-  --amino-green-500: #2b9c4d;
-  --amino-green-600: #56c76f;
-  --amino-green-700: #7de490;
-  --amino-green-800: #a9f9b5;
-  --amino-green-900: #c8fdce;
-  --amino-green-1000: #e0ffe3;
-  --amino-purple-100: #3b1948;
-  --amino-purple-200: #54206a;
-  --amino-purple-300: #742498;
-  --amino-purple-400: #922bc5;
-  --amino-purple-500: #ab30ee;
-  --amino-purple-600: #bd82f8;
-  --amino-purple-700: #cea9fa;
-  --amino-purple-800: #ddc5fc;
-  --amino-purple-900: #e7d8fd;
-  --amino-purple-1000: #f4eeff;
+  --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 0px 0px 1px rgba(255, 255, 255, 0.12),
-    0px 1px 3px rgba(0, 0, 0, 0.9), 0px 1px 2px rgba(0, 0, 0, 0.8);
-  --amino-v3-shadow-medium: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
-    0px 4px 6px rgba(0, 0, 0, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.8);
-  --amino-v3-shadow-large: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
-    0px 10px 15px rgba(0, 0, 0, 0.9), 0px 4px 6px rgba(0, 0, 0, 0.8);
-  --amino-v3-shadow-xl: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
-    0px 20px 25px rgba(0, 0, 0, 0.9), 0px 10px 10px rgba(0, 0, 0, 0.8);
-  --amino-v3-shadow-xxl: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
-    0px 32px 50px rgba(0, 0, 0, 0.96);
-  --amino-v3-shadow-inset: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
-    0px 0px 6px rgba(255, 255, 255, 0.08), 0px 1px 0px #111114,
-    0px 2px 4px rgba(0, 0, 0, 0.24), inset 0px 1px 1px rgba(0, 0, 0, 0.24),
-    inset 0px 2px 4px rgba(0, 0, 0, 0.24),
+  --amino-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),
+    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),
+    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),
+    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),
+    0px 0px 0px 1px rgba(255, 255, 255, 0.12);
+  --amino-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 0px 8px rgba(0, 0, 0, 0.16);
-  --amino-shadow-button-primary: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 0.5px #000, 0px 1px 3px 0px rgba(95, 146, 246, 0.4);
-  --amino-shadow-button-success: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset, 0px 0px 0px 0.5px #000,
+    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,
+    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,
+    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 -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,
-    0px 1px 3px 0px rgba(229, 89, 26, 0.4);
+  --amino-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,
+    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 -1px 1px 0px rgba(0, 0, 0, 0.4) inset,
+  --amino-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,
+    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,
+    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,
+    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,
+    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);
@@ -440,6 +440,7 @@
   --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);
@@ -462,7 +463,7 @@
   --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-1000);
+  --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,
@@ -471,32 +472,30 @@
     var(--amino-button-focus-ring);
   --amino-surface-color: var(--amino-gray-50);
   --amino-surface-color-secondary: var(--amino-gray-100);
-  --amino-backdrop-color: var(--amino-gray-0);
+  --amino-backdrop-color: #000000;
+  --amino-raised-surface-color: #2c2e3899;
+  --amino-raised-color-secondary: var(--amino-gray-0);
   --amino-button-primary-hover: linear-gradient(
     180deg,
-    #5f92f6 0%,
-    #89b2fa 100%
+    #5a80f1 0%,
+    #7fa9f5 100%
   );
   --amino-button-success-hover: linear-gradient(
     180deg,
-    #56c76f 0%,
-    #7de490 100%
+    #39c049 0%,
+    #57db6c 100%
   );
   --amino-button-danger-hover: linear-gradient(
     180deg,
-    #f95c67 0%,
-    #fa8b8b 100%
+    #e9495c 0%,
+    #f37c82 100%
   );
   --amino-button-warning-hover: linear-gradient(
     180deg,
-    #f88c53 0%,
-    #fca975 100%
-  );
-  --amino-button-standard-hover: linear-gradient(
-    180deg,
-    #1e1f26 0%,
-    #2e3038 100%
+    #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);
@@ -515,7 +514,7 @@
   justify-content: space-between;
   background: var(--primary-color, var(--amino-surface-color-secondary));
   border-top: var(--amino-border);
-  padding: var(--amino-space-12);
+  padding: 12px;
   align-items: center;
 }
 :host .zonos--hello-dialog-footer a {
@@ -527,10 +526,10 @@
 :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 @media (max-width: 400px) {
   :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
-    gap: var(--amino-space-4);
+    gap: 4px;
   }
 }

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

@@ -17,9 +17,9 @@ export class ZonosHelloDialogFooter {
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: '57933a1dc8584daeb3f66393ebb98e7cdb1ff5e3', class: "zonos--elements" }, h("div", { key: '801626fa9eb4baa7a8e1ef1afda6336bbe085ca1', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: '6f6371c5650d77a11d8a2f049859446ffb39e78f', class: "zonos--elements" }, h("div", { key: '47efc7a11c14ac4fc60472baea2d43f132eb2b07', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: '0e03d262f71f5fced451b8b298462b1f070848ad', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e17d1eac7bc1e5e5bf2c86c384dc5b01725802ef', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'd7a065b6bd87b41aae013b0cddf4cb50852664fe', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '22a0a218fd1627519cde3663face486ba2d5ec41', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '6800d57eb7a877e873bb8050f313017c39a516e7', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'a34ae0513d778695aa5cc2051774e0105ec93c4e', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e3e558d3759a2ccffa44e8b70603ec4860fe219a', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'f76d9dff90b3e95db704a43f48abfd12938bdd7c', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'b3430483773438b84a05fc1850c75231f25ecb5c', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '351024225e4fb74e321b64fbdfe5b6b471d71077', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -109,8 +109,8 @@
 }
 :host .zonos--hello-dialog .zonos--close-button {
   position: absolute;
-  right: var(--amino-space-8);
-  top: var(--amino-space-8);
+  right: 8px;
+  top: 8px;
   width: var(--amino-size-md);
   height: var(--amino-size-md);
   display: flex;
@@ -124,7 +124,7 @@
   border-radius: var(--amino-radius-6);
 }
 :host .zonos--hello-dialog .zonos--hello-dialog-content {
-  padding: var(--amino-space-16);
+  padding: 16px;
 }
 :host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag {
   border-radius: var(--amino-radius-4);
@@ -134,7 +134,7 @@
 :host .zonos--hello-dialog .zonos--flex-message {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-12);
+  gap: 12px;
 }
 :host .zonos--hello-dialog.zonos--hello-dialog-mobile-override {
   position: sticky;