@felleslosninger/minid-elements 0.0.102 → 0.0.104

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\nimport { HasSlotController } from '../internal/slot';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  @state()\n  hasFocus = false;\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ??= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode}${this.nationalnumber}`;\n    }, 0);\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.setValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      event.preventDefault();\n      return;\n    }\n\n    onKeyDown(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.setValue(event);\n  }\n\n  private setValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    this.value = value;\n    this.nationalnumber = this.removePhonePrefix(value);\n    this.dispatchEvent(this.currentEvent);\n    this.setFormValue(this.value);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"input\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            class=\"border-neutral focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"border-neutral focus-visible:focus-ring grow rounded-r border px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\nimport { HasSlotController } from '../internal/slot';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  @state()\n  hasFocus = false;\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ??= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode}${this.nationalnumber}`;\n    }, 0);\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.setValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      event.preventDefault();\n      return;\n    }\n\n    onKeyDown(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.setValue(event);\n  }\n\n  private setValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    this.value = value;\n    this.nationalnumber = this.removePhonePrefix(value);\n    this.dispatchEvent(this.currentEvent);\n    this.setFormValue(this.value);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"input\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            class=\"border-neutral focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"border-neutral focus-visible:focus-ring grow rounded-r border px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/designsystemet-tailwind.css

@@ -22,6 +22,16 @@
   --font-sans: 'Inter', 'Arial', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-sans--font-feature-settings: 'cv05' 1;
   --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --text-1: 0.75rem;
+  --text-2: 0.875rem;
+  --text-3: 1rem;
+  --text-4: 1.125rem;
+  --text-5: 1.3125rem;
+  --text-6: 1.5rem;
+  --text-7: 1.875rem;
+  --text-8: 2.25rem;
+  --text-9: 3rem;
+  --text-10: 3.75rem;
   --text-heading-2xl--font-weight: 500;
   --text-heading-2xl--line-height: 1.3;
   --text-heading-2xl: 3.75rem;
@@ -110,19 +120,6 @@
   --text-body-long-xs--line-height: 1.7;
   --text-body-long-xs: 0.875rem;
   --text-body-long-xs--letter-spacing: 0.15%;
-  --text-1: 0.75rem;
-  --text-2: 0.875rem;
-  --text-3: 1rem;
-  --text-4: 1.125rem;
-  --text-5: 1.3125rem;
-  --text-6: 1.5rem;
-  --text-7: 1.875rem;
-  --text-8: 2.25rem;
-  --text-9: 3rem;
-  --text-10: 3.75rem;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-regular: 400;
   --leading-sm: 1.3;
   --leading-md: 1.5;
   --leading-lg: 1.7;
@@ -135,6 +132,9 @@
   --tracking-7: 0.25%;
   --tracking-8: 0.5%;
   --tracking-9: 1.5%;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-regular: 400;
 
   /****************************** 
   * Color 
@@ -297,7 +297,39 @@
   --border-color-warning: #a56d13;
   --border-color-warning-strong: #80540f;
 }
-
 @utility focus-ring {
   @apply ring-focus-inner outline-focus-outer ring-[3px] outline-[3px] outline-offset-[3px];
 }
+
+@custom-variant slotted (& ::slotted(*));
+
+@theme {
+  --animate-dash: dash 1.9s cubic-bezier(0.2, -0.01, 0.51, 0.96) infinite;
+  --animate-spin-slow: spin 2.2s linear infinite;
+  --animate-fade-out: fade-out 200ms ease-in forwards;
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}

package/dist/flags/AC.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#0052B4" width="513" height="342"/>
+<g>
+	<path fill="#FFFFFF" d="M440.1,181.1c-0.1,39.2-6.4,81.4-57.4,101.5c-51.1-20.1-57.3-62.3-57.4-101.5L440.1,181.1L440.1,181.1z"/>
+	<path fill="#29DBFF" d="M439.6,197.7c-2.8,34.9-12.4,67.4-57,85c-44.4-17.6-54.5-51.2-56.9-84.9"/>
+	<path fill="#FFFFFF" d="M437.8,214.1c-3.2,24.3-16.7,53.5-55.1,68.6c-38.4-15.1-50.5-42.5-55.1-68.4"/>
+	<path fill="#29DBFF" d="M434.2,230.3c-5.7,17.7-19.3,39.4-51.3,52.8c-32-12.6-45.2-33.8-51.4-53"/>
+	<path fill="#FFFFFF" d="M426.7,246.9c-6.5,11.3-17.7,25.4-44,35.9c-27.5-11.5-37.4-25.3-44-36.1"/>
+	<path fill="#29DBFF" d="M412.4,265.1c-8.1,7.2-12,11.2-29.6,17.9c-20.1-7.9-22.6-11.6-29.2-17.5"/>
+	<path fill="#5CC85C" d="M383.3,231.6c-0.2-0.2-27.9,35.7-27.9,35.7c-1.8-1.3-10-9.5-13.3-15l41.3-50.1l40.2,49.7
+		c-3.9,6.5-11.4,13.6-13.2,15"/>
+</g>
+<polygon fill="#5CC85C" points="382.6,85.3 356.1,130.3 409.1,130.3 409.1,130.3 "/>
+<ellipse transform="matrix(0.134 -0.991 0.991 0.134 28.7247 484.2523)" fill="#F7A226" cx="291.4" cy="225.7" rx="48.7" ry="15.7"/>
+<ellipse transform="matrix(0.373 -0.9278 0.9278 0.373 37.247 384.4472)" fill="#DDC7AB" cx="303.1" cy="164.7" rx="11.7" ry="7.2"/>
+<ellipse transform="matrix(0.1437 -0.9896 0.9896 0.1437 -19.091 521.3171)" fill="#DDC7AB" cx="291.7" cy="271.7" rx="11.4" ry="3.3"/>
+<ellipse transform="matrix(0.9986 -5.352928e-02 5.352928e-02 0.9986 -13.9925 16.4237)" fill="#DDC7AB" cx="299.6" cy="269.4" rx="3.3" ry="11"/>
+<ellipse transform="matrix(0.9303 -0.3668 0.3668 0.9303 -51.8254 129.3871)" fill="#DDC7AB" cx="314.5" cy="201.1" rx="4.1" ry="13.7"/>
+<ellipse transform="matrix(0.9303 -0.3668 0.3668 0.9303 -43.1881 128.875)" fill="#DDC7AB" cx="317.5" cy="178.1" rx="13.7" ry="4.1"/>
+<ellipse transform="matrix(0.991 -0.134 0.134 0.991 -26.0008 65.5194)" fill="#F7A226" cx="473.6" cy="225.9" rx="15.7" ry="48.7"/>
+<ellipse transform="matrix(0.9278 -0.373 0.373 0.9278 -28.1478 184.2457)" fill="#DDC7AB" cx="462" cy="164.9" rx="7.2" ry="11.7"/>
+<ellipse transform="matrix(0.9896 -0.1437 0.1437 0.9896 -34.1512 70.8368)" fill="#DDC7AB" cx="473.4" cy="271.9" rx="3.3" ry="11.4"/>
+<ellipse transform="matrix(5.352928e-02 -0.9986 0.9986 5.352928e-02 171.3404 719.9983)" fill="#DDC7AB" cx="465.5" cy="269.6" rx="11" ry="3.3"/>
+<ellipse transform="matrix(0.3668 -0.9303 0.9303 0.3668 98.0689 546.5782)" fill="#DDC7AB" cx="450.6" cy="201.2" rx="13.7" ry="4.1"/>
+<ellipse transform="matrix(0.3668 -0.9303 0.9303 0.3668 117.5679 529.2617)" fill="#DDC7AB" cx="447.6" cy="178.3" rx="4.1" ry="13.7"/>
+<polygon fill="#B0C6CC" points="373.3,130.3 356.1,155 373.9,181.1 396,181.1 400.7,155.7 395.3,130.3 "/>
+<polygon fill="#FFFFFF" points="256,0 256,117.4 209.9,117.4 256,148.1 256,170.7 233.4,170.7 160,121.8 160,170.7 96,170.7 96,121.8
+	22.6,170.7 0,170.7 0,148.1 46.1,117.4 0,117.4 0,53.4 46.1,53.4 0,22.7 0,0 22.6,0 96,48.9 96,0 160,0 160,48.9 233.4,0 "/>
+<polygon fill="#D80027" points="144,0 112,0 112,69.4 0,69.4 0,101.4 112,101.4 112,170.7 144,170.7 144,101.4 256,101.4 256,69.4
+	144,69.4 "/>
+<polygon fill="#2E52B2" points="256,22.7 256,53.4 209.9,53.4 "/>
+<g>
+	<polygon fill="#D80027" points="0,170.7 0,159.7 62.5,117.4 85.1,117.4 7.3,170.7 	"/>
+</g>
+<polygon fill="#D80027" points="7.3,0.1 85.1,53.3 62.5,53.3 0,11.1 0,0.1 "/>
+<polygon fill="#D80027" points="256,0.1 256,11.1 193.5,53.4 170.9,53.4 248.7,0.1 "/>
+<polygon fill="#D80027" points="248.7,170.7 170.9,117.4 193.5,117.4 256,159.7 256,170.7 "/>
+</svg>

package/dist/flags/AD.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#FFDA44" width="513" height="342"/>
+<rect fill="#0052B4" width="171" height="342"/>
+<rect x="342" fill="#D80027" width="171" height="342"/>
+<rect x="198.9" y="113.6" fill="#D80027" width="57.1" height="64.8"/>
+<g stroke="#D80027" stroke-width="7">
+  <line x1="267.6" y1="113.6" x2="267.6" y2="178.3"/>
+  <line x1="284.2" y1="113.6" x2="284.2" y2="178.3"/>
+  <line x1="300.8" y1="113.6" x2="300.8" y2="178.3"/>
+</g>
+<g stroke="#D80027" stroke-width="5">
+  <line x1="247.4" y1="178.4" x2="247.4" y2="243.1"/>
+  <line x1="234.1" y1="178.4" x2="234.1" y2="243.1"/>
+  <line x1="220.8" y1="178.5" x2="220.8" y2="232.4"/>
+  <line x1="207.1" y1="178.5" x2="207.1" y2="225.6"/>
+</g>
+<polygon fill="#FFDA44" points="199.9,146 227.5,113.6 256,145.9 227.9,178.3 "/>
+<path fill="#BC8B00" d="M182.2,95.9v92.2c0,34.3,27.3,54.2,48.6,64.5c-0.8,1.4,25.1,8.3,25.1,8.3s25.9-6.9,25.1-8.3
+	c21.4-10.3,48.6-30.1,48.6-64.5V95.9H182.2z M312.1,188.1c0,16.9-10,29.4-32.8,43.9c-8.6,5.5-17.5,9-23.3,11
+	c-5.8-2-14.7-5.5-23.3-11c-22.8-14.5-32.8-28-32.8-43.9v-74.5h112.2L312.1,188.1z"/>
+<rect x="264.4" y="188.9" fill="#D80027" width="29.5" height="8.6"/>
+<rect x="264.4" y="206.5" fill="#D80027" width="29.5" height="8.6"/>
+</svg>

package/dist/flags/AE.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#FFFFFF" width="513" height="342"/>
+<rect y="0" fill="#009e49" width="513" height="114"/>
+<rect y="228" fill="#000" width="513" height="114"/>
+<rect y="0" fill="#ce1126" width="171" height="342"/>
+</svg>

package/dist/flags/AF.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#DB3E00" width="513" height="342"/>
+<rect x="331" y="0" fill="#479900" width="182" height="342"/>
+<rect y="0" fill="#000" width="181.8" height="342"/>
+<path fill="#FFFFFF" d="M256,126.7c-19.4,0-35.2,15.8-35.2,35.2v52.8h70.4v-52.8C291.2,142.4,275.4,126.7,256,126.7z"/>
+<path fill="#FFFFFF" d="M256,84.3c-47.7,0-86.4,38.7-86.4,86.4S208.3,257,256,257c47.7,0,86.4-38.7,86.4-86.4S303.7,84.3,256,84.3z
+	 M256,242c-39.4,0-71.4-32-71.4-71.4c0-39.4,32-71.4,71.4-71.4c39.4,0,71.4,32,71.4,71.4C327.4,210.1,295.4,242,256,242z"/>
+</svg>

package/dist/flags/AG.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#000" y="0" width="513" height="342"/>
+<path fill="#0072c6" d="M88.8,136.5c-2.2,12.9-3.4,26.2-3.4,39.8c0,13.6,1.2,27,3.4,39.8L256,228.3l167.2-12.1
+	c2.2-12.9,3.4-26.2,3.4-39.8s-1.2-27-3.4-39.8"/>
+<path fill="#FFFFFF" d="M423.2,219H88.8c15.8,69.8,84.7,122.3,167.2,122.3S407.4,288.8,423.2,219z"/>
+<polygon fill="#FFDA44" points="365.9,136.5 146.1,136.5 191,115.4 167.1,71.9 215.9,81.3 222,32 256,68.2 290,32 296.1,81.3
+	344.9,71.9 321,115.4 "/>
+<g fill="#ce1126">
+	<polygon points="256.5,342 0,0 0,342 	"/>
+	<polygon points="513,342 513,0 256,342 	"/>
+</g>
+</svg>

package/dist/flags/AI.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#00318b" width="513" height="342"/>
+<path fill="#FFFFFF" d="M454.8,265.38c7.94-10.93,13.24-24.27,13.24-40.42V104.89c-10.04,7.54-22.5,12.01-36.02,12.01
+	c-19.64,0-37.07-9.43-48.03-24.01c-10.95,14.58-28.39,24.01-48.03,24.01c-13.52,0-25.99-4.47-36.02-12v120.06
+	c0,16.16,5.3,29.5,13.24,40.42L454.8,265.38L454.8,265.38z"/>
+<path fill="#8DCCFF" d="M310.23,260.98C332.65,296.96,384,309,384,309s51.35-12.04,73.77-48.02H310.23L310.23,260.98z"/>
+<path fill="#D87B00" d="M396.66,172.21c0.32,1.42,8.72,10.17,17.56,20.15c1.39,1.57-8.74,12.63-6.91,12.59
+	c4.75-0.12,19.27-17.26,19.34,6.65c0.05,15.94-30,27.51-30,27.51h17.47l0.65,14.96c0,0,4.97-13.34,7.59-16.57
+	c8.1-9.97,20.18-30.07,34.59-27.1c14.41,2.97-13.66-13.92-13.66-13.92s-5.2-15.19-16.63-16.97c-10.06-1.57-14.29-2.51-26.64-7.3
+	C398.34,171.56,396.14,169.89,396.66,172.21z"/>
+<path fill="#D87B00" d="M359.69,198.69c1.07-0.99,4.46-12.63,8.69-25.28c0.67-1.99,15.31,1.27,14.35-0.3
+	c-2.47-4.06-24.58-8.08-3.9-20.08c13.79-8,38.82,12.27,38.82,12.27l-8.72-15.14l12.64-8.03c0,0-14.05,2.35-18.14,1.69
+	c-12.68-2.04-36.13-2.48-40.75-16.45c-4.62-13.97-5.25,18.79-5.25,18.79s-10.56,12.08-6.4,22.88c3.66,9.5,4.96,13.64,6.97,26.73
+	C358.29,197.56,357.94,200.3,359.69,198.69z"/>
+<path fill="#D87B00" d="M395.67,219.87c-1.39-0.43-13.16,2.49-26.22,5.18c-2.06,0.42-6.59-13.88-7.47-12.26
+	c-2.27,4.17,5.36,25.31-15.41,13.45c-13.84-7.91-8.89-39.73-8.89-39.73l-8.71,15.14l-13.29-6.9c0,0,9.09,10.96,10.57,14.84
+	c4.6,11.99,16,32.49,6.24,43.49c-9.76,11.01,18.88-4.9,18.88-4.9s15.76,3.07,23-5.96c6.38-7.94,9.3-11.14,19.61-19.45
+	C395.41,221.65,397.95,220.58,395.67,219.87z"/>
+<g>
+	<polygon fill="#FFFFFF" points="256.5,0 233.4,0 160,48.9 160,0 96,0 96,48.9 22.6,0 0,0 0,22.7 46.1,53.4 0,53.4 0,117.4 46.1,117.4
+		0,148.1 0,171 22.6,171 96,121.8 96,171 160,171 160,121.8 233.4,171 256.5,171 256.5,148.1 209.9,117.4 256.5,117.4
+		256.5,53.4 209.9,53.4 256.5,22.7 	"/>
+	<polygon fill="#D80027" points="144,0 112,0 112,69.4 0,69.4 0,101.4 112,101.4 112,171 144,171 144,101.4 256.5,101.4 256.5,69.4
+		144,69.4 	"/>
+	<polygon fill="#D80027" points="0,171 0,159.7 62.5,117.4 85.1,117.4 7.3,171 	"/>
+	<polygon fill="#D80027" points="7.3,0.1 85.1,53.3 62.5,53.3 0,11.1 0,0.1 	"/>
+	<polygon fill="#D80027" points="256.5,0.1 256.5,11.1 193.5,53.4 170.9,53.4 248.7,0.1 	"/>
+	<polygon fill="#D80027" points="248.7,171 170.9,117.4 193.5,117.4 256.5,159.7 256.5,171 	"/>
+</g>
+</svg>

package/dist/flags/AL.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60">
+<rect x="0" fill="#ED2024" width="90" height="60"/>
+<polygon fill="#212121" points="32.5,12.2 32.5,28.2 39.6,30.7 34.6,35.6 37,38.6 42.3,33.1 43.5,35.4 40.5,40.3 44.1,45.9 42.3,48.5
+	45.1,52.1 47.8,48.4 46.3,45.8 49.3,40 46.6,35.4 47.8,33.1 53,38.6 55.5,35.7 50.3,30.6 57.5,28 57.5,12.2 52.3,14.1 52.2,17.9
+	48.9,18.2 48.9,15.6 50.6,13.3 56.2,11.1 53.9,10.7 55.3,9.5 56.2,9.9 55.4,8.5 54,9 53,7.9 47.5,9 48.9,10.1 45.1,15 41.3,10.2
+	42.6,9.1 37.6,7.9 36.2,9 34.7,8.6 33.9,10 34.8,9.4 36.4,10.5 34.1,11 39.6,13 41.2,15.3 41.2,18.2 37.9,17.9 37.9,14.3 "/>
+<g>
+	<rect x="26.2" y="25" fill="#212121" width="6.4" height="2.5"/>
+	<rect x="26.2" y="20.9" fill="#212121" width="6.4" height="2.7"/>
+	<rect x="26.2" y="16.7" fill="#212121" width="6.4" height="2.6"/>
+	<rect x="26.2" y="12.7" fill="#212121" width="6.4" height="2.5"/>
+</g>
+<g>
+	<rect x="57.4" y="25" fill="#212121" width="6.4" height="2.5"/>
+	<rect x="57.4" y="20.9" fill="#212121" width="6.4" height="2.7"/>
+	<rect x="57.4" y="16.7" fill="#212121" width="6.4" height="2.6"/>
+	<rect x="57.4" y="12.7" fill="#212121" width="6.4" height="2.5"/>
+</g>
+<rect x="53.4" y="36.1" fill="#212121" width="6.4" height="1.9"/>
+<rect x="30.2" y="36.1" fill="#212121" width="6.4" height="1.9"/>
+</svg>

package/dist/flags/AM.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#0052B4" width="513" height="342"/>
+<rect y="0" fill="#D80027" width="513" height="114"/>
+<rect y="228" fill="#FF9811" width="513" height="114"/>
+</svg>

package/dist/flags/AO.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#000000" y="171" width="513" height="171"/>
+<rect fill="#D80027" width="513" height="171"/>
+<g fill="#FFDA44">
+  <polygon points="332.7,135.6 350.2,127 342.8,108 324.1,114.2 "/>
+  <polygon points="287.1,79.6 292.6,60.8 273.5,53.6 265.5,71.6 "/>
+  <polygon points="316.5,102.8 328.7,87.5 313.8,73.6 299.6,87.2 "/>
+  <polygon points="335.9,171.7 355.4,170.9 355.4,149.6 332.5,149.8 "/>
+  <polygon points="323.3,209.8 342.1,215.3 349.4,196.3 331.4,188.3 "/>
+  <polygon points="294.3,242.2 309.2,254.9 323.6,240.5 310.5,225.8 "/>
+  <polygon points="247.3,94.5 257.1,114.4 279,117.7 263.1,133.2 266.7,155.1 247.1,144.7 227.4,154.9 231.2,133
+  	215.4,117.5 237.4,114.4 "/>
+  <path d="M250.8,61.3l-2.7,18.3c43.1,3.2,77,39.2,77,83.1c0,46-37.3,82.9-83.4,83.4c-29.2,0.3-51.3-14.8-67-33.7
+  	l-13.9,12.3c15,19,40.8,39.9,80.9,39.9c56.3,0,101.9-45.6,101.9-101.9C343.7,109.5,302.9,65.8,250.8,61.3z"/>
+  <path fill="#000000" d="M291.9,223.4l-11.8,14c0,0,51.9,38.9,53.6,40.4c1.7,1.5,5.2,2,9.1-2.7c3.7-4.5,2.8-8.1,0.9-9.7
+  C341.7,263.9,291.9,223.4,291.9,223.4z"/>
+  <path d="M206.1,157.2c-7.7,10.3-7.5,23.1,2.8,30.9c0,0,135.2,101.5,136.9,103c1.7,1.5,5.2,2,9.1-2.7
+  	c3.7-4.5,2.8-8.1,0.9-9.7C353.9,277.2,206.1,157.2,206.1,157.2z"/>
+  <polygon points="253.8,256.3 261.1,274.5 280.6,268.5 275.8,249.4 "/>
+  <polygon points="213.4,252.6 211.4,272.1 231.5,275.7 236,256.6 "/>
+  <polygon points="177.7,231.4 167.4,248 183.8,260.1 196.3,244.9 "/>
+</g>
+</svg>

package/dist/flags/AQ.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 744 496">
+	<path fill="#3A7DCE" d="M0,0h744v496H0V0z"/>
+	<polygon fill="#ffffff" points="120,125 210,188 264,174 287,93 348,57 440,71 545,126 551,216 585,228 585,320 520,435 442,459
+		370,442 388,412 380,380 370,389 208,364 159,279 179,233 130,171 "/>
+</svg>

package/dist/flags/AR.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#FFFFFF" width="512" height="342"/>
+<rect y="0" fill="#338AF3" width="512" height="114"/>
+<rect y="228" fill="#338AF3" width="512" height="114"/>
+<circle fill="#FFDA44" stroke="#d6ab00" stroke-width="5" cx="256.5" cy="171" r="40"/>
+</svg>

package/dist/flags/AS.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#10338c" width="513" height="342"/>
+<polygon fill="#D80027" points="513,33 95.3,171 513,310.76 513,342 0,171 513,0 "/>
+<polyline fill="#FFFFFF" points="513,287.18 513,311.76 81.72,171 513,30 513,54.16 "/>
+<path fill="#A2001D" d="M476.98,140.21l-21.89,10.68l-3.18-15.32l31.19-29.77c0,0-9.42-40.65-13.75-44.98l-112.32,55.82l-6.84,36.76
+	l-31.9,28.59l-0.4,34.2l34.29-22.76l67.23-2.66l-1.51,38.11h22.23l11.9-44.64l31.55-24.61L476.98,140.21z"/>
+<polygon fill="#EFC100" stroke="#231F20" stroke-miterlimit="10" points="317.89,238.41 295.65,227.3 317.89,216.19 462.35,216.19 462.35,238.41 "/>
+</svg>

package/dist/flags/AT.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="114" fill="#FFFFFF" width="513" height="114"/>
+<rect y="0" fill="#D80027" width="513" height="114"/>
+<rect y="228" fill="#D80027" width="513" height="114"/>
+</svg>

package/dist/flags/AU.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#10338c" width="513" height="342"/>
+<g fill="#FFFFFF">
+	<path d="M222.2,170.7c0.3-0.3,0.5-0.6,0.8-0.9C222.8,170.1,222.5,170.4,222.2,170.7L222.2,170.7z"/>
+	<polygon points="188,212.6 199,235.5 223.7,229.8 212.7,252.6 232.6,268.4 207.8,274 207.9,299.4 188,283.5
+		168.2,299.4 168.3,274 143.5,268.4 163.4,252.6 152.3,229.8 177.1,235.5 	"/>
+	<polygon points="385.9,241.1 391.1,252 402.9,249.3 397.6,260.2 407.1,267.7 395.3,270.3 395.3,282.5 385.9,274.9
+		376.4,282.5 376.5,270.3 364.7,267.7 374.2,260.2 368.9,249.3 380.7,252 	"/>
+	<polygon points="337.3,125.1 342.5,136 354.3,133.3 349,144.2 358.5,151.7 346.7,154.4 346.7,166.5 337.3,158.9
+		327.8,166.5 327.9,154.4 316,151.7 325.5,144.2 320.2,133.3 332,136 	"/>
+	<polygon points="385.9,58.9 391.1,69.8 402.9,67.1 397.6,78 407.1,85.5 395.3,88.2 395.3,100.3 385.9,92.7
+		376.4,100.3 376.5,88.2 364.7,85.5 374.2,78 368.9,67.1 380.7,69.8 	"/>
+	<polygon points="428.4,108.6 433.6,119.5 445.4,116.8 440.1,127.7 449.6,135.2 437.8,137.8 437.8,150 428.4,142.4
+		418.9,150 418.9,137.8 407.1,135.2 416.6,127.7 411.3,116.8 423.1,119.5 	"/>
+	<polygon points="398,166.5 402.1,179.2 415.4,179.2 404.6,187 408.8,199.7 398,191.8 387.2,199.7 391.3,187
+		380.6,179.2 393.9,179.2 	"/>
+	<polygon points="254.8,0 254.8,30.6 209.7,55.7 254.8,55.7 254.8,115 195.7,115 254.8,147.8 254.8,170.7 228.1,170.7
+		154.6,129.8 154.6,170.7 99,170.7 99,122.1 11.6,170.7 -1.2,170.7 -1.2,140.1 44,115 -1.2,115 -1.2,55.7 57.9,55.7 -1.2,22.8
+		-1.2,0 25.5,0 99,40.8 99,0 154.6,0 154.6,48.6 242.1,0 	"/>
+</g>
+<polygon fill="#D80027" points="142.8,0 110.8,0 110.8,69.3 -1.2,69.3 -1.2,101.3 110.8,101.3 110.8,170.7 142.8,170.7 142.8,101.3
+	254.8,101.3 254.8,69.3 142.8,69.3 "/>
+<polygon fill="#0052B4" points="154.6,115 254.8,170.7 254.8,154.9 183,115 "/>
+<polygon fill="#FFFFFF" points="154.6,115 254.8,170.7 254.8,154.9 183,115 "/>
+<g fill="#D80027">
+	<polygon points="154.6,115 254.8,170.7 254.8,154.9 183,115 	"/>
+	<polygon points="70.7,115 -1.2,154.9 -1.2,170.7 -1.2,170.7 99,115 	"/>
+</g>
+<polygon fill="#0052B4" points="99,55.7 -1.2,0 -1.2,15.7 70.7,55.7 "/>
+<polygon fill="#FFFFFF" points="99,55.7 -1.2,0 -1.2,15.7 70.7,55.7 "/>
+<g fill="#D80027">
+	<polygon points="99,55.7 -1.2,0 -1.2,15.7 70.7,55.7 	"/>
+	<polygon points="183,55.7 254.8,15.7 254.8,0 254.8,0 154.6,55.7 	"/>
+</g>
+</svg>

package/dist/flags/AW.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 242">
+<rect fill="#338AF3" width="363" height="242"/>
+<g>
+	<polygon fill="#FFFFFF" points="57,96.9 14.7,78.2 57,59.6 75.6,17.4 94.2,59.6 136.5,78.2 94.2,96.9 75.6,139.1 	"/>
+	<polygon fill="#f30028" points="75.6,40.6 87.1,66.7 113.2,78.2 87.1,89.7 75.6,115.8 64.1,89.7 38,78.2 64.1,66.7 	"/>
+</g>
+<g fill="#FFDA44">
+	<rect y="152.2" width="363" height="15.7"/>
+	<rect y="183.6" width="363" height="15.7"/>
+</g>
+</svg>

package/dist/flags/AX.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#0052B4" width="513" height="342"/>
+<polygon fill="#FFDA44" points="513,210.9 202.2,210.9 202.2,342 122.4,342 122.4,210.9 0,210.9 0,192.3 0,149.7 0,131.1 122.4,131.1
+	122.4,0 202.2,0 202.2,131.1 513,131.1 513,149.7 513,192.3 "/>
+<polygon fill="#D80027" points="513,149.7 513,192.3 183.7,192.3 183.7,342 141,342 141,192.3 0,192.3 0,149.7 141,149.7 141,0
+	183.7,0 183.7,149.7 "/>
+</svg>

package/dist/flags/AZ.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#ef3340" width="513" height="342"/>
+<rect fill="#00b5e2" width="513" height="114"/>
+<rect y="228" fill="#509e2f" width="513" height="114"/>
+<g fill="#FFFFFF">
+	<path d="M265.6,212.6c-23,0-41.6-18.6-41.6-41.6s18.6-41.6,41.6-41.6c7.2,0,13.9,1.8,19.8,5
+		c-9.2-9-21.9-14.6-35.8-14.6c-28.3,0-51.2,22.9-51.2,51.2s22.9,51.2,51.2,51.2c13.9,0,26.6-5.6,35.8-14.6
+		C279.5,210.8,272.8,212.6,265.6,212.6z"/>
+	<polygon points="297.6,142.2 303.1,157.7 318,150.6 310.9,165.5 326.4,171 310.9,176.5 318,191.4 303.1,184.3
+		297.6,199.8 292.1,184.3 277.2,191.4 284.3,176.5 268.8,171 284.3,165.5 277.2,150.6 292.1,157.7 	"/>
+</g>
+</svg>

package/dist/flags/BA.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 513 342">
+<rect fill="#10338C" width="513.1" height="342"/>
+<polyline fill="#F6C500" points="99.9,0 441.9,0 441.9,342 "/>
+<g>
+	<polygon fill="#FFFFFF" points="19.9,21.1 40.3,6.2 60.9,21 54,0 26.7,0 	"/>
+	<polygon fill="#FFFFFF" points="92.3,25.5 84.4,1.3 76.6,25.5 51.3,25.5 71.8,40.3 64,64.3 84.4,49.5 105,64.3 97.1,40.3 117.6,25.4
+		"/>
+	<polygon fill="#FFFFFF" points="136.3,69.2 128.5,45.2 120.7,69.2 95.5,69.2 115.9,84.1 108.1,108.1 128.5,93.3 149.1,108.1
+		141.3,84.1 161.7,69.2 	"/>
+	<polygon fill="#FFFFFF" points="179.4,112.3 171.6,88.2 163.8,112.3 138.5,112.3 159,127.2 151.2,151.2 171.6,136.4 192.2,151.2
+		184.3,127.2 204.8,112.2 	"/>
+	<polygon fill="#FFFFFF" points="222.5,155.3 214.7,131.3 206.9,155.3 181.5,155.3 202.1,170.3 194.3,194.3 214.7,179.4 235.1,194.3
+		227.3,170.3 247.9,155.3 	"/>
+	<polygon fill="#FFFFFF" points="265.6,198.4 257.8,174.4 250,198.4 224.6,198.4 245.2,213.3 237.4,237.4 257.8,222.5 278.2,237.4
+		270.4,213.2 290.9,198.4 	"/>
+	<polygon fill="#FFFFFF" points="308.7,241.5 300.8,217.5 293,241.5 267.7,241.5 288.2,256.3 280.3,280.5 300.9,265.6 321.3,280.4
+		313.5,256.3 334,241.5 	"/>
+	<polygon fill="#FFFFFF" points="351.7,284.6 343.9,260.4 336.1,284.6 310.8,284.6 331.2,299.4 323.4,323.5 343.9,308.6 364.4,323.5
+		356.6,299.4 377,284.6 	"/>
+	<polygon fill="#FFFFFF" points="387,303.5 379.1,327.6 353.8,327.7 373.6,342 400.2,342 420.1,327.6 394.8,327.6 	"/>
+</g>
+</svg>

package/dist/flags/BB.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#ffc726" width="513" height="342"/>
+<g fill="#00267f">
+	<rect y="0" width="171" height="342"/>
+	<rect x="342" y="0" width="171" height="342"/>
+</g>
+<path fill="#000" d="M325.74,101.02l-31.97,12.4c-0.68,1.35-5.79,7.54-8.18,53.06h-17.05v-60.42l-12.54-27.38l-12.54,27v60.8H226.4
+	c-2.39-45.53-7.8-52.48-8.47-53.84l-31.68-11.63c0.15,0.31,15.4,31.34,15.4,78.01v12.54h41.81v71.07h25.08v-71.07h41.81v-12.54
+	c0-24.13,4.17-44.02,7.68-56.46c3.82-13.57,7.7-21.49,7.74-21.57L325.74,101.02z"/>
+</svg>

package/dist/flags/BD.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 513 342">
+<rect y="85.331" fill="#2d6e41" width="513" height="342"/>
+<circle fill="#F40B32" cx="218.902" cy="256.5" r="115"/>
+</svg>

package/dist/flags/BE.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#fdda25" width="513" height="342"/>
+<rect y="0" fill="#000" width="171" height="342"/>
+<rect x="342" y="0" fill="#ef3340" width="171" height="342"/>
+</svg>

package/dist/flags/BF.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect y="0" fill="#3d944f" width="513" height="342"/>
+<rect y="0" fill="#ef2b2d" width="513" height="171"/>
+<polygon fill="#FFDA44" points="256,102.6 272.9,154.6 327.6,154.6 283.4,186.8 300.2,238.8 256,206.7 211.8,238.8 228.6,186.8
+  184.4,154.6 239.1,154.6 "/>
+</svg>

package/dist/flags/BG.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+	<rect y="0" fill="#00966e" width="513" height="342"/>
+	<rect y="0" fill="#FFFFFF" width="513" height="114"/>
+	<rect y="228" fill="#d62612" width="513" height="114"/>
+</svg>

package/dist/flags/BH.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+	<polygon fill="#D80027" points="0,0 513,0 513,342 0,342 "/>
+	<polygon fill="#FFFFFF" points="222.8,34.3 137.6,68.5 222.8,102.6 137.6,136.7 222.8,170.8 137.6,204.9 222.8,239 137.6,273.1
+		222.8,307.2 137.6,342 0,342 0,0 137.6,0 "/>
+</svg>
+
+

package/dist/flags/BI.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">
+<rect fill="#D80027" width="513" height="342"/>
+<g fill="#47a644">
+	<polygon points="215.9,170.7 0,314.6 0,26.8 	"/>
+	<polygon points="513,26.8 513,314.6 297.1,170.7 	"/>
+</g>
+<polygon fill="#0052B4" points="513,26.8 296.1,170.7 513,314.6 513,342 471.9,342 256,197.4 40.1,342 0,342 0,314.6
+	215.9,170.7 0,26.8 0,0 40.1,0 256,143.9 471.9,0 513,0 "/>
+<polygon fill="#FFFFFF" points="513,26.8 297.1,170.7 513,314.6 513,342 473,342 256,197.4 39,342 0,342 0,314.6 215.9,170.7 0,26.8
+		0,0 40.1,0 256,143.9 471.9,0 513,0 	"/>
+<circle fill="#FFFFFF" cx="251.6" cy="170.7" r="100.2"/>
+<g fill="#D80027" stroke="#47a644" stroke-width="3">
+	<polygon points="251.4,103.6 258.8,116.5 273.6,116.5 266.2,129.3 273.6,142.1 258.8,142.1 251.4,155 244,142.1
+		229.2,142.1 236.6,129.3 229.2,116.5 244,116.5 	"/>
+	<polygon points="290.2,170.3 297.6,183.2 312.4,183.2 305,196 312.4,208.8 297.6,208.8 290.2,221.7 282.8,208.8
+		267.9,208.8 275.3,196 267.9,183.2 282.8,183.2 	"/>
+	<polygon points="213,170.3 220.4,183.2 235.3,183.2 227.9,196 235.3,208.8 220.4,208.8 213,221.7 205.6,208.8
+		190.8,208.8 198.2,196 190.8,183.2 205.6,183.2 	"/>
+</g>
+</svg>

package/dist/flags/BJ.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 513 342">
+<rect y="85.333" fill="#008751" width="513" height="342"/>
+<rect x="196.666" y="85.333" fill="#fcd116" width="316.334" height="171"/>
+<rect x="196.666" y="256" fill="#e8112d" width="316.334" height="171"/>
+</svg>