@vonage/vivid 5.9.0 → 5.10.0

package/card/index.js

@@ -1,75 +1,75 @@
-import { I as b, i as x } from "../bundled/definition2.js";
+import { I as m, i as x } from "../bundled/definition2.js";
 import { E as g, e as y } from "../bundled/definition4.js";
-import { V as $, a as l, o as f, h as o, c as _, d as w } from "../bundled/vivid-element.js";
+import { V as $, a as l, o as f, h as r, c as _, d as w } from "../bundled/vivid-element.js";
 import { L as C } from "../bundled/linkable.js";
 import { A as c } from "../bundled/enums.js";
 import { d as k } from "../bundled/delegates-aria.js";
 import { w as i } from "../bundled/when.js";
 import { s as u } from "../bundled/slotted.js";
 import { c as S } from "../bundled/class-names.js";
-const E = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
-var H = Object.defineProperty, n = (e, a, t, h) => {
-  for (var d = void 0, s = e.length - 1, m; s >= 0; s--)
-    (m = e[s]) && (d = m(a, t, d) || d);
-  return d && H(a, t, d), d;
+const E = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+var H = Object.defineProperty, n = (e, a, o, h) => {
+  for (var d = void 0, s = e.length - 1, b; s >= 0; s--)
+    (b = e[s]) && (d = b(a, o, d) || d);
+  return d && H(a, o, d), d;
 };
-class r extends C($) {
+class t extends C($) {
   constructor() {
     super(...arguments), this.clickableCard = !1;
   }
 }
 n([
   l
-], r.prototype, "appearance");
+], t.prototype, "appearance");
 n([
   l
-], r.prototype, "headline");
+], t.prototype, "headline");
 n([
   l
-], r.prototype, "subtitle");
+], t.prototype, "subtitle");
 n([
   l
-], r.prototype, "text");
+], t.prototype, "text");
 n([
   l
-], r.prototype, "icon");
+], t.prototype, "icon");
 n([
   l
-], r.prototype, "elevation");
+], t.prototype, "elevation");
 n([
   l({
     mode: "boolean",
     attribute: "clickable-card"
   })
-], r.prototype, "clickableCard");
+], t.prototype, "clickableCard");
 n([
   f
-], r.prototype, "footerSlottedContent");
+], t.prototype, "footerSlottedContent");
 n([
   f
-], r.prototype, "graphicSlottedContent");
+], t.prototype, "graphicSlottedContent");
 n([
   f
-], r.prototype, "hasMetaSlottedContent");
+], t.prototype, "hasMetaSlottedContent");
 const v = (e) => S(
   "base",
   ["hide-footer", !e.footerSlottedContent || !e.footerSlottedContent.length],
   ["hide-header", L(e)]
 );
 function z(e) {
-  return o`
+  return r`
 		<${e} class="icon" inline name="${(a) => a.icon}"></${e}>`;
 }
 function A() {
-  return o`
+  return r`
 		<div class="header-headline" id="card-headline">${(e) => e.headline}</div>
 	`;
 }
 function D() {
-  return o` <div class="header-subtitle">${(e) => e.subtitle}</div> `;
+  return r` <div class="header-subtitle">${(e) => e.subtitle}</div> `;
 }
 function F() {
-  return o`
+  return r`
 		<div class="header-content">
 			${i((e) => e.headline, A())}
 			${i((e) => e.subtitle, D())}
@@ -77,7 +77,7 @@ function F() {
 	`;
 }
 function I(e) {
-  return o` <div class="header">
+  return r` <div class="header">
 		<slot name="graphic" ${u("graphicSlottedContent")}
 			>${i((a) => a.icon, z(e))}</slot
 		>
@@ -88,13 +88,13 @@ function L(e) {
   return !e.headline && !e.subtitle && !e.icon && (!e.graphicSlottedContent || !e.graphicSlottedContent.length);
 }
 function O() {
-  return o` <slot name="meta" ${u("metaSlottedContent")}></slot> `;
+  return r` <slot name="meta" ${u("metaSlottedContent")}></slot> `;
 }
 function V() {
-  return o` <div class="text">${(e) => e.text}</div> `;
+  return r` <div class="text">${(e) => e.text}</div> `;
 }
 function B(e) {
-  return o`<button
+  return r`<button
 		class="${v}"
 		type="button"
 		${k()}
@@ -104,19 +104,19 @@ function B(e) {
 	</button>`;
 }
 function G(e, a) {
-  return e.href ? e._renderLinkElement(a, v) : e.clickableCard ? B(a) : o`<div
+  return e.href ? e._renderLinkElement(a, v) : e.clickableCard ? B(a) : r`<div
 			class="${v}"
-			aria-labelledby="${(t) => t.headline ? "card-headline" : null}"
+			aria-labelledby="${(o) => o.headline ? "card-headline" : null}"
 		>
 			${a}
 		</div>`;
 }
 function p(e) {
-  const a = e.tagFor(b);
-  return o`
-		${(t) => G(
-    t,
-    o`<div class="wrapper">
+  const a = e.tagFor(m);
+  return r`
+		${(o) => G(
+    o,
+    r`<div class="wrapper">
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
 					</div>
@@ -137,31 +137,31 @@ function p(e) {
 }
 const M = (e) => {
   const a = e.tagFor(g);
-  return o`
+  return r`
 		${i(
-    (t) => t.appearance !== c.Ghost && t.appearance !== c.Outlined,
-    o`
-			<${a} dp=${(t) => t.elevation ?? "4"}>
+    (o) => o.appearance !== c.Ghost && o.appearance !== c.Outlined,
+    r`
+			<${a} dp=${(o) => o.elevation ?? "4"}>
 			  ${p(e)}
 			</${a}>
 		`
   )}
 		${i(
-    (t) => t.appearance === c.Outlined,
-    o`
+    (o) => o.appearance === c.Outlined,
+    r`
 			<${a} dp='0')}>
 			  ${p(e)}
 			</${a}>
 		`
   )}
 		${i(
-    (t) => t.appearance === c.Ghost,
-    o` ${p(e)} `
+    (o) => o.appearance === c.Ghost,
+    r` ${p(e)} `
   )}
 	`;
 }, P = w(
   "card",
-  r,
+  t,
   M,
   [x, y],
   {

package/country/definition.cjs

@@ -0,0 +1,340 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+
+const styles = ":host{display:inline-flex}.base{display:inline-flex;align-items:center;column-gap:8px}.icon{display:inline-flex;align-items:center}.icon vwc-icon{flex-shrink:0;block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:auto}.icon ::slotted(*){display:block;border-radius:2px;block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:auto;object-fit:contain}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+
+const countries = [
+  { code: "AF", countryCode: "+93", iconFlagName: "flag-afghanistan" },
+  { code: "AL", countryCode: "+355", iconFlagName: "flag-albania" },
+  { code: "DZ", countryCode: "+213", iconFlagName: "flag-algeria" },
+  { code: "AS", countryCode: "+1", iconFlagName: "" },
+  { code: "AD", countryCode: "+376", iconFlagName: "" },
+  { code: "AO", countryCode: "+244", iconFlagName: "" },
+  { code: "AI", countryCode: "+43", iconFlagName: "" },
+  { code: "AG", countryCode: "+1", iconFlagName: "" },
+  { code: "AR", countryCode: "+54", iconFlagName: "flag-argentina" },
+  { code: "AM", countryCode: "+374", iconFlagName: "flag-armenia" },
+  { code: "AW", countryCode: "+297", iconFlagName: "flag-aruba" },
+  { code: "AU", countryCode: "+61", iconFlagName: "flag-australia" },
+  { code: "AT", countryCode: "+43", iconFlagName: "flag-austria" },
+  { code: "AZ", countryCode: "+994", iconFlagName: "" },
+  { code: "BS", countryCode: "+1", iconFlagName: "flag-bahamas" },
+  { code: "BH", countryCode: "+973", iconFlagName: "flag-bahrain" },
+  { code: "BD", countryCode: "+880", iconFlagName: "flag-bangladesh" },
+  { code: "BB", countryCode: "+1", iconFlagName: "" },
+  { code: "BY", countryCode: "+375", iconFlagName: "flag-belarus" },
+  { code: "BE", countryCode: "+32", iconFlagName: "flag-belgium" },
+  { code: "BZ", countryCode: "+501", iconFlagName: "" },
+  { code: "BJ", countryCode: "+229", iconFlagName: "flag-benin" },
+  { code: "BM", countryCode: "+1", iconFlagName: "" },
+  { code: "BT", countryCode: "+975", iconFlagName: "" },
+  { code: "BO", countryCode: "+591", iconFlagName: "flag-bolivia" },
+  { code: "BA", countryCode: "+387", iconFlagName: "" },
+  { code: "BW", countryCode: "+267", iconFlagName: "flag-botswana" },
+  { code: "BR", countryCode: "+55", iconFlagName: "flag-brazil" },
+  { code: "IO", countryCode: "+246", iconFlagName: "" },
+  { code: "VG", countryCode: "+1", iconFlagName: "" },
+  { code: "VI", countryCode: "+1", iconFlagName: "" },
+  { code: "BN", countryCode: "+673", iconFlagName: "" },
+  { code: "BG", countryCode: "+359", iconFlagName: "flag-bulgaria" },
+  { code: "BF", countryCode: "+226", iconFlagName: "flag-burkina-faso" },
+  { code: "BI", countryCode: "+257", iconFlagName: "" },
+  { code: "KH", countryCode: "+855", iconFlagName: "flag-cambodia" },
+  { code: "CM", countryCode: "+237", iconFlagName: "" },
+  { code: "CA", countryCode: "+1", iconFlagName: "flag-canada" },
+  { code: "CV", countryCode: "+238", iconFlagName: "" },
+  { code: "KY", countryCode: "+1", iconFlagName: "flag-cayman-islands" },
+  {
+    code: "CF",
+    countryCode: "+236",
+    iconFlagName: "flag-central-african-republic"
+  },
+  {
+    code: "CF",
+    countryCode: "+236",
+    iconFlagName: "flag-central-african-republic"
+  },
+  { code: "CL", countryCode: "+56", iconFlagName: "flag-chile" },
+  { code: "CN", countryCode: "+86", iconFlagName: "flag-china" },
+  { code: "CO", countryCode: "+57", iconFlagName: "flag-colombia" },
+  { code: "KM", countryCode: "+269", iconFlagName: "" },
+  { code: "CG", countryCode: "+242", iconFlagName: "" },
+  { code: "CD", countryCode: "+243", iconFlagName: "" },
+  { code: "CK", countryCode: "+682", iconFlagName: "" },
+  { code: "CR", countryCode: "+506", iconFlagName: "flag-costa-rica" },
+  { code: "HR", countryCode: "+385", iconFlagName: "flag-croatia" },
+  { code: "CU", countryCode: "+53", iconFlagName: "" },
+  { code: "CU", countryCode: "+53", iconFlagName: "" },
+  { code: "CY", countryCode: "+357", iconFlagName: "flag-cyprus" },
+  { code: "CZ", countryCode: "+420", iconFlagName: "flag-czech-republic" },
+  { code: "DK", countryCode: "+45", iconFlagName: "flag-denmark" },
+  { code: "DJ", countryCode: "+253", iconFlagName: "" },
+  { code: "DM", countryCode: "+1", iconFlagName: "" },
+  { code: "DO", countryCode: "+1", iconFlagName: "flag-dominican-republic" },
+  { code: "EC", countryCode: "+593", iconFlagName: "" },
+  { code: "EG", countryCode: "+20", iconFlagName: "flag-egypt" },
+  { code: "SV", countryCode: "+503", iconFlagName: "flag-el-salvador" },
+  { code: "GQ", countryCode: "+240", iconFlagName: "" },
+  { code: "ER", countryCode: "+291", iconFlagName: "" },
+  { code: "EE", countryCode: "+372", iconFlagName: "flag-estonia" },
+  { code: "ET", countryCode: "+251", iconFlagName: "" },
+  { code: "FK", countryCode: "+500", iconFlagName: "" },
+  { code: "FO", countryCode: "+298", iconFlagName: "" },
+  { code: "FJ", countryCode: "+679", iconFlagName: "" },
+  { code: "FI", countryCode: "+358", iconFlagName: "flag-finland" },
+  { code: "FR", countryCode: "+33", iconFlagName: "flag-france" },
+  { code: "GF", countryCode: "+594", iconFlagName: "" },
+  { code: "PF", countryCode: "+689", iconFlagName: "" },
+  { code: "GA", countryCode: "+241", iconFlagName: "" },
+  { code: "GM", countryCode: "+220", iconFlagName: "" },
+  { code: "GE", countryCode: "+995", iconFlagName: "flag-georgia" },
+  { code: "DE", countryCode: "+49", iconFlagName: "flag-germany" },
+  { code: "GH", countryCode: "+233", iconFlagName: "flag-ghana" },
+  { code: "GI", countryCode: "+350", iconFlagName: "" },
+  { code: "GR", countryCode: "+30", iconFlagName: "flag-greece" },
+  { code: "GL", countryCode: "+299", iconFlagName: "" },
+  { code: "GD", countryCode: "+1", iconFlagName: "flag-grenada" },
+  { code: "GP", countryCode: "+590", iconFlagName: "" },
+  { code: "GU", countryCode: "+1", iconFlagName: "" },
+  { code: "GT", countryCode: "+502", iconFlagName: "flag-guatemala" },
+  { code: "GN", countryCode: "+224", iconFlagName: "" },
+  { code: "GW", countryCode: "+245", iconFlagName: "" },
+  { code: "GY", countryCode: "+592", iconFlagName: "" },
+  { code: "HT", countryCode: "+509", iconFlagName: "" },
+  { code: "VA", countryCode: "+39", iconFlagName: "" },
+  { code: "HN", countryCode: "+504", iconFlagName: "flag-honduras" },
+  { code: "HK", countryCode: "+852", iconFlagName: "flag-hong-kong" },
+  { code: "HU", countryCode: "+36", iconFlagName: "flag-hungary" },
+  { code: "IS", countryCode: "+354", iconFlagName: "flag-iceland" },
+  { code: "IN", countryCode: "+91", iconFlagName: "flag-india" },
+  { code: "ID", countryCode: "+62", iconFlagName: "flag-indonesia" },
+  { code: "CI", countryCode: "+225", iconFlagName: "" },
+  { code: "IR", countryCode: "+98", iconFlagName: "" },
+  { code: "IQ", countryCode: "+964", iconFlagName: "" },
+  { code: "IE", countryCode: "+353", iconFlagName: "flag-ireland" },
+  { code: "IL", countryCode: "+972", iconFlagName: "flag-israel" },
+  { code: "IT", countryCode: "+39", iconFlagName: "flag-italy" },
+  { code: "JM", countryCode: "+1", iconFlagName: "flag-jamaica" },
+  { code: "JP", countryCode: "+81", iconFlagName: "flag-japan" },
+  { code: "JO", countryCode: "+962", iconFlagName: "" },
+  { code: "KZ", countryCode: "+7", iconFlagName: "" },
+  { code: "KE", countryCode: "+254", iconFlagName: "" },
+  { code: "KI", countryCode: "+686", iconFlagName: "" },
+  { code: "KW", countryCode: "+965", iconFlagName: "" },
+  { code: "KG", countryCode: "+996", iconFlagName: "" },
+  { code: "LA", countryCode: "+856", iconFlagName: "" },
+  { code: "LV", countryCode: "+371", iconFlagName: "flag-latvia" },
+  { code: "LB", countryCode: "+961", iconFlagName: "" },
+  { code: "LS", countryCode: "+266", iconFlagName: "" },
+  { code: "LR", countryCode: "+231", iconFlagName: "" },
+  { code: "LY", countryCode: "+218", iconFlagName: "" },
+  { code: "LI", countryCode: "+423", iconFlagName: "flag-liechtenstein" },
+  { code: "LT", countryCode: "+370", iconFlagName: "flag-lithuania" },
+  { code: "LU", countryCode: "+352", iconFlagName: "flag-luxembourg" },
+  { code: "MO", countryCode: "+853", iconFlagName: "flag-macao" },
+  { code: "MK", countryCode: "+389", iconFlagName: "" },
+  { code: "MG", countryCode: "+261", iconFlagName: "" },
+  { code: "MW", countryCode: "+265", iconFlagName: "" },
+  { code: "MY", countryCode: "+60", iconFlagName: "flag-malaysia" },
+  { code: "MV", countryCode: "+960", iconFlagName: "" },
+  { code: "ML", countryCode: "+223", iconFlagName: "" },
+  { code: "MT", countryCode: "+356", iconFlagName: "flag-malta" },
+  { code: "MH", countryCode: "+692", iconFlagName: "" },
+  { code: "MQ", countryCode: "+596", iconFlagName: "" },
+  { code: "MR", countryCode: "+222", iconFlagName: "" },
+  { code: "MU", countryCode: "+230", iconFlagName: "flag-mauritius" },
+  { code: "YT", countryCode: "+262", iconFlagName: "" },
+  { code: "MX", countryCode: "+52", iconFlagName: "flag-mexico" },
+  { code: "FM", countryCode: "+691", iconFlagName: "" },
+  { code: "MD", countryCode: "+373", iconFlagName: "flag-moldova" },
+  { code: "MC", countryCode: "+377", iconFlagName: "" },
+  { code: "MN", countryCode: "+976", iconFlagName: "" },
+  { code: "ME", countryCode: "+382", iconFlagName: "" },
+  { code: "MS", countryCode: "+1", iconFlagName: "" },
+  { code: "MA", countryCode: "+212", iconFlagName: "" },
+  { code: "MZ", countryCode: "+258", iconFlagName: "" },
+  { code: "MM", countryCode: "+95", iconFlagName: "" },
+  { code: "NA", countryCode: "+264", iconFlagName: "" },
+  { code: "NR", countryCode: "+674", iconFlagName: "" },
+  { code: "NP", countryCode: "+977", iconFlagName: "" },
+  { code: "NL", countryCode: "+31", iconFlagName: "flag-netherlands" },
+  { code: "NC", countryCode: "+687", iconFlagName: "" },
+  { code: "NZ", countryCode: "+64", iconFlagName: "flag-new-zealand" },
+  { code: "NI", countryCode: "+505", iconFlagName: "" },
+  { code: "NE", countryCode: "+227", iconFlagName: "" },
+  { code: "NG", countryCode: "+234", iconFlagName: "flag-nigeria" },
+  { code: "NU", countryCode: "+683", iconFlagName: "" },
+  { code: "NF", countryCode: "+672", iconFlagName: "" },
+  { code: "KP", countryCode: "+850", iconFlagName: "" },
+  { code: "MP", countryCode: "+1", iconFlagName: "" },
+  { code: "NO", countryCode: "+47", iconFlagName: "flag-norway" },
+  { code: "OM", countryCode: "+968", iconFlagName: "" },
+  { code: "PK", countryCode: "+92", iconFlagName: "flag-pakistan" },
+  { code: "PW", countryCode: "+680", iconFlagName: "" },
+  { code: "PS", countryCode: "+970", iconFlagName: "" },
+  { code: "PA", countryCode: "+507", iconFlagName: "flag-panama" },
+  { code: "PG", countryCode: "+675", iconFlagName: "" },
+  { code: "PY", countryCode: "+595", iconFlagName: "" },
+  { code: "PE", countryCode: "+51", iconFlagName: "flag-peru" },
+  { code: "PH", countryCode: "+63", iconFlagName: "flag-philippines" },
+  { code: "PL", countryCode: "+48", iconFlagName: "flag-poland" },
+  { code: "PT", countryCode: "+351", iconFlagName: "flag-portugal" },
+  { code: "PR", countryCode: "+1", iconFlagName: "flag-puertorico" },
+  { code: "QA", countryCode: "+974", iconFlagName: "" },
+  { code: "XK", countryCode: "+381", iconFlagName: "" },
+  { code: "RE", countryCode: "+262", iconFlagName: "" },
+  { code: "RO", countryCode: "+40", iconFlagName: "flag-romania" },
+  { code: "RU", countryCode: "+7", iconFlagName: "flag-russia" },
+  { code: "RW", countryCode: "+250", iconFlagName: "flag-rwanda" },
+  { code: "BL", countryCode: "+590", iconFlagName: "" },
+  { code: "SH", countryCode: "+290", iconFlagName: "" },
+  { code: "KN", countryCode: "+1", iconFlagName: "" },
+  { code: "LC", countryCode: "+1", iconFlagName: "" },
+  { code: "MF", countryCode: "+590", iconFlagName: "" },
+  { code: "PM", countryCode: "+508", iconFlagName: "" },
+  { code: "VC", countryCode: "+1", iconFlagName: "" },
+  { code: "WS", countryCode: "+685", iconFlagName: "" },
+  { code: "SM", countryCode: "+378", iconFlagName: "" },
+  { code: "ST", countryCode: "+239", iconFlagName: "" },
+  { code: "SA", countryCode: "+966", iconFlagName: "flag-saudi-arabia" },
+  { code: "SN", countryCode: "+221", iconFlagName: "" },
+  { code: "RS", countryCode: "+381", iconFlagName: "flag-serbia" },
+  { code: "SC", countryCode: "+248", iconFlagName: "" },
+  { code: "SL", countryCode: "+232", iconFlagName: "" },
+  { code: "SG", countryCode: "+65", iconFlagName: "flag-singapore" },
+  { code: "SG", countryCode: "+65", iconFlagName: "flag-singapore" },
+  { code: "SK", countryCode: "+421", iconFlagName: "flag-slovakia" },
+  { code: "SI", countryCode: "+386", iconFlagName: "flag-slovenia" },
+  { code: "SB", countryCode: "+677", iconFlagName: "" },
+  { code: "SO", countryCode: "+252", iconFlagName: "" },
+  { code: "ZA", countryCode: "+27", iconFlagName: "flag-south-africa" },
+  { code: "KR", countryCode: "+82", iconFlagName: "flag-south-korea" },
+  { code: "ES", countryCode: "+34", iconFlagName: "flag-spain" },
+  { code: "LK", countryCode: "+94", iconFlagName: "flag-sri-lanka" },
+  { code: "SD", countryCode: "+249", iconFlagName: "" },
+  { code: "SR", countryCode: "+597", iconFlagName: "" },
+  { code: "SZ", countryCode: "+268", iconFlagName: "" },
+  { code: "SE", countryCode: "+46", iconFlagName: "flag-sweden" },
+  { code: "CH", countryCode: "+41", iconFlagName: "flag-switzerland" },
+  { code: "SY", countryCode: "+963", iconFlagName: "" },
+  { code: "TW", countryCode: "+886", iconFlagName: "flag-taiwan" },
+  { code: "TJ", countryCode: "+992", iconFlagName: "flag-tajikistan" },
+  { code: "TZ", countryCode: "+255", iconFlagName: "flag-tanzania" },
+  { code: "TH", countryCode: "+66", iconFlagName: "flag-thailand" },
+  { code: "TL", countryCode: "+670", iconFlagName: "" },
+  { code: "TG", countryCode: "+228", iconFlagName: "" },
+  { code: "TK", countryCode: "+690", iconFlagName: "" },
+  { code: "TO", countryCode: "+676", iconFlagName: "" },
+  { code: "TT", countryCode: "+1", iconFlagName: "flag-trinidad-and-tobago" },
+  { code: "TN", countryCode: "+216", iconFlagName: "" },
+  { code: "TR", countryCode: "+90", iconFlagName: "flag-turkey" },
+  { code: "TM", countryCode: "+993", iconFlagName: "" },
+  { code: "TC", countryCode: "+1", iconFlagName: "" },
+  { code: "TV", countryCode: "+688", iconFlagName: "" },
+  { code: "UG", countryCode: "+256", iconFlagName: "" },
+  { code: "UA", countryCode: "+380", iconFlagName: "flag-ukraine" },
+  {
+    code: "AE",
+    countryCode: "+971",
+    iconFlagName: "flag-united-arab-emirates"
+  },
+  { code: "GB", countryCode: "+44", iconFlagName: "flag-united-kingdom" },
+  { code: "UK", countryCode: "+44", iconFlagName: "flag-united-kingdom" },
+  { code: "US", countryCode: "+1", iconFlagName: "flag-united-states" },
+  { code: "UY", countryCode: "+598", iconFlagName: "flag-uruguay" },
+  { code: "UZ", countryCode: "+998", iconFlagName: "flag-uzbekistan" },
+  { code: "VU", countryCode: "+678", iconFlagName: "" },
+  { code: "VE", countryCode: "+58", iconFlagName: "flag-venezuela" },
+  { code: "VN", countryCode: "+84", iconFlagName: "flag-vietnam" },
+  { code: "WF", countryCode: "+681", iconFlagName: "" },
+  { code: "WF", countryCode: "+681", iconFlagName: "" },
+  { code: "YE", countryCode: "+967", iconFlagName: "" },
+  { code: "ZM", countryCode: "+260", iconFlagName: "flag-zambia" },
+  { code: "ZW", countryCode: "+263", iconFlagName: "" }
+];
+
+const CODE_TO_COUNTRY = new Map(
+  countries.map((c) => [c.code, c])
+);
+function getFlagIconName(countryCode) {
+  if (!countryCode || typeof countryCode !== "string") {
+    return void 0;
+  }
+  const icon = CODE_TO_COUNTRY.get(
+    countryCode.trim().toUpperCase()
+  )?.iconFlagName;
+  return icon && icon.length > 0 ? icon : void 0;
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Country extends vividElement.VividElement {
+  /** @internal */
+  get flagIconName() {
+    return getFlagIconName(this.code);
+  }
+  /** @internal */
+  get displayText() {
+    const customLabel = this.label?.trim();
+    if (customLabel) {
+      return customLabel;
+    }
+    const codeValue = this.code?.trim();
+    return codeValue ? codeValue.toUpperCase() : void 0;
+  }
+}
+__decorateClass([
+  fastElement.attr
+], Country.prototype, "code");
+__decorateClass([
+  fastElement.attr
+], Country.prototype, "label");
+
+const CountryTemplate = (context) => {
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		<div class="base">
+			<slot name="icon" class="icon">
+				${fastElement.when(
+    (x) => x.flagIconName,
+    fastElement.html`<${iconTag}
+						size="-4"
+						name="${(x) => x.flagIconName}"
+						aria-hidden="true"
+					></${iconTag}>`
+  )}
+			</slot>
+			${fastElement.when(
+    (x) => x.displayText,
+    fastElement.html`<span class="text">${(x) => x.displayText}</span>`
+  )}
+		</div>
+	`;
+};
+
+const countryDefinition = vividElement.defineVividComponent(
+  "country",
+  Country,
+  CountryTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerCountry = vividElement.createRegisterFunction(countryDefinition);
+
+exports.VwcCountryElement = Country;
+exports.countryDefinition = countryDefinition;
+exports.registerCountry = registerCountry;