@zonos/elements 1.0.16

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

@@ -0,0 +1,522 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+[data-theme=LIGHT],
+.zonos--elements {
+  color-scheme: light;
+  --amino-transition: all 0.2s ease-in-out 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: #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-1200: #101116;
+  --amino-blue-100: #deedfe;
+  --amino-blue-200: #c5ddfd;
+  --amino-blue-300: #aacbfc;
+  --amino-blue-400: #89b2fa;
+  --amino-blue-500: #5f92f6;
+  --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-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-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),
+    inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06),
+    inset 0px 0px 8px rgba(0, 0, 0, 0.02);
+  --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,
+    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,
+    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-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),
+    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-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-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-1000);
+  --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: var(--amino-gray-1200);
+  --amino-button-primary-hover: linear-gradient(
+    180deg,
+    #445eee 0%,
+    #364bd4 100%
+  );
+  --amino-button-success-hover: linear-gradient(
+    180deg,
+    #2b9c4d 0%,
+    #298549 100%
+  );
+  --amino-button-danger-hover: linear-gradient(
+    180deg,
+    #d92141 0%,
+    #b4223d 100%
+  );
+  --amino-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: 2.125rem;
+  --amino-font-size-2xl: 1.75rem;
+  --amino-font-size-xl: 1.375rem;
+  --amino-font-size-l: 1.125rem;
+  --amino-font-size-base-docs: 1rem;
+  --amino-font-size-base: 0.875rem;
+  --amino-font-size-s: 0.75rem;
+  --amino-font-size-xs: 0.625rem;
+  --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,
+    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;
+}
+
+/* Night theme */
+[data-theme=DARK] .zonos--elements:not([data-theme=LIGHT]),
+.zonos--elements[data-theme=DARK],
+.zonos--elements [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: #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-1100: #f6f6f8;
+  --amino-gray-1200: #ffffff;
+  --amino-blue-100: #1c2154;
+  --amino-blue-200: #252e7e;
+  --amino-blue-300: #2c3baf;
+  --amino-blue-400: #364bd4;
+  --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-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-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),
+    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,
+    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-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,
+    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-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-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-1000);
+  --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: var(--amino-gray-0);
+  --amino-button-primary-hover: linear-gradient(
+    180deg,
+    #5f92f6 0%,
+    #89b2fa 100%
+  );
+  --amino-button-success-hover: linear-gradient(
+    180deg,
+    #56c76f 0%,
+    #7de490 100%
+  );
+  --amino-button-danger-hover: linear-gradient(
+    180deg,
+    #f95c67 0%,
+    #fa8b8b 100%
+  );
+  --amino-button-warning-hover: linear-gradient(
+    180deg,
+    #f88c53 0%,
+    #fca975 100%
+  );
+  --amino-button-standard-hover: linear-gradient(
+    180deg,
+    #1e1f26 0%,
+    #2e3038 100%
+  );
+  --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);
+}
+
+: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);
+  padding: var(--amino-space-12);
+  align-items: center;
+}
+:host .zonos--hello-dialog-footer a {
+  display: inline-flex;
+}
+:host .zonos--hello-dialog-footer zonos-button button.outline {
+  outline: 1px solid var(--amino-gray-800);
+}

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

@@ -0,0 +1,82 @@
+import { h, Host } from "@stencil/core";
+import { localizationStore } from "../../../store/hello/localization";
+import { isDarkColor } from "../../../utils/isDarkColor";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronDownIcon from "./assets/chevronDownIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ZonosIcon from "./assets/zonosIcon.svg";
+export class ZonosHelloDialogFooter {
+  constructor() {
+    this.appearanceSettings = undefined;
+    this.setShowCountrySelect = () => { };
+  }
+  render() {
+    var _a, _b;
+    const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
+    const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
+    return (h(Host, { class: "zonos--elements" }, h("div", { class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        '--primary-color': (_b = this.appearanceSettings) === null || _b === void 0 ? void 0 : _b.colorPrimary,
+      } }, h("a", { href: "https://zonos.com", target: "_blank" }, h("zonos-icon", { autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), h("zonos-button", { icon: h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localizationStore.selectedCountryCode))));
+  }
+  static get is() { return "zonos-hello-dialog-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-hello-dialog-footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-hello-dialog-footer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearanceSettings": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<AppearanceConfig>",
+          "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+          "references": {
+            "Partial": {
+              "location": "global",
+              "id": "global::Partial"
+            },
+            "AppearanceConfig": {
+              "location": "import",
+              "path": "src/components",
+              "id": "src/components.d.ts::AppearanceConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Appearance settings"
+        }
+      },
+      "setShowCountrySelect": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(value: boolean) => void",
+          "resolved": "(value: boolean) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not the country select dialog is open"
+        },
+        "defaultValue": "() => {}"
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-hello-dialog-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-hello-dialog-footer.js","sourceRoot":"","sources":["../../../../../src/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAE/D,6EAA6E;AAC7E,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,6EAA6E;AAC7E,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAO/C,MAAM,OAAO,sBAAsB;;;gCAUwB,GAAG,EAAE,GAAE,CAAC;;EAEjE,MAAM;;IACJ,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,YAAY,CAAC;IAC3D,MAAM,WAAW,GACf,YAAY,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAE/D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB;MAC3B,WACE,KAAK,EAAC,4BAA4B,gBACtB,WAAW,EACvB,KAAK,EAAE;UACL,iBAAiB,EAAE,MAAA,IAAI,CAAC,kBAAkB,0CAAE,YAAY;SACzD;QAED,SAAG,IAAI,EAAC,mBAAmB,EAAC,MAAM,EAAC,QAAQ;UACzC,kBACE,UAAU,QACV,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,GAAG,GACG,CACZ;QAEJ,oBACE,IAAI,EACF,kBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,eAAe,GACZ,EAEhB,SAAS,QACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAC9C,OAAO,EAAC,SAAS,IAEhB,iBAAiB,CAAC,mBAAmB,CACzB,CACX,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AppearanceConfig, ElementsUiTheme } from 'src/components';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronDownIcon from './assets/chevronDownIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ZonosIcon from './assets/zonosIcon.svg';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-hello-dialog-footer.scss',\n  tag: 'zonos-hello-dialog-footer',\n})\nexport class ZonosHelloDialogFooter {\n  /**\n   * Appearance settings\n   */\n  @Prop() appearanceSettings?: Partial<AppearanceConfig>;\n\n  /**\n   * Whether or not the country select dialog is open\n   * @default false\n   */\n  @Prop() setShowCountrySelect: (value: boolean) => void = () => {};\n\n  render() {\n    const primaryColor = this.appearanceSettings?.colorPrimary;\n    const footerTheme: ElementsUiTheme =\n      primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';\n\n    return (\n      <Host class=\"zonos--elements\">\n        <div\n          class=\"zonos--hello-dialog-footer\"\n          data-theme={footerTheme}\n          style={{\n            '--primary-color': this.appearanceSettings?.colorPrimary,\n          }}\n        >\n          <a href=\"https://zonos.com\" target=\"_blank\">\n            <zonos-icon\n              autoHeight\n              color=\"gray-1200\"\n              content={ZonosIcon}\n              size={108}\n            ></zonos-icon>\n          </a>\n\n          <zonos-button\n            icon={\n              <zonos-icon\n                color=\"gray-700\"\n                content={ChevronDownIcon}\n              ></zonos-icon>\n            }\n            iconRight\n            onClick={() => this.setShowCountrySelect(true)}\n            variant=\"outline\"\n          >\n            {localizationStore.selectedCountryCode}\n          </zonos-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}