genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { autoUpdate, computePosition } from '@floating-ui/dom';
 import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { hideDelay, menuNavigation } from '../gux-menu.common';
 /**
@@ -10,13 +10,6 @@ export class GuxSubmenu {
     this.label = undefined;
     this.isShown = false;
   }
-  forceUpdate(isShown) {
-    if (isShown) {
-      if (this.popperInstance) {
-        void this.popperInstance.update();
-      }
-    }
-  }
   /**
    * Focus on the components button element
    */
@@ -97,27 +90,30 @@ export class GuxSubmenu {
       }, hideDelay);
     }
   }
-  runPopper() {
-    this.popperInstance = createPopper(this.buttonElement, this.submenuElement, {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [-8, 0]
-          }
-        },
-        {
-          name: 'flip',
-          enabled: false
-        }
-      ],
-      placement: 'right-start'
-    });
-  }
-  destroyPopper() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+  runUpdatePosition() {
+    if (this.root.isConnected) {
+      this.cleanupUpdatePosition = autoUpdate(this.buttonElement, this.submenuElement, () => this.updatePosition(), {
+        ancestorScroll: true,
+        elementResize: true,
+        animationFrame: true,
+        ancestorResize: true
+      });
+    }
+    else {
+      this.disconnectedCallback();
+    }
+  }
+  updatePosition() {
+    if (this.submenuElement) {
+      void computePosition(this.buttonElement, this.submenuElement, {
+        placement: 'right-start',
+        middleware: []
+      }).then(({ x, y }) => {
+        Object.assign(this.submenuElement.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
     }
   }
   focusOnSubmenu() {
@@ -129,10 +125,22 @@ export class GuxSubmenu {
     void nextFocusableElement.guxFocus();
   }
   componentDidLoad() {
-    this.runPopper();
+    if (this.isShown) {
+      this.runUpdatePosition();
+    }
+  }
+  componentDidUpdate() {
+    if (this.isShown) {
+      this.runUpdatePosition();
+    }
+    else if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
   }
   disconnectedCallback() {
-    this.destroyPopper();
+    if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
   }
   render() {
     return (h(Host, null, h("button", { type: "button", class: "gux-submenu-button", role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { class: "gux-submenu-button-text" }, this.label), h("gux-icon", { class: "gux-submenu-open-icon", "icon-name": "chevron-small-right", decorative: true })), h("div", { ref: el => (this.submenuElement = el), class: {
@@ -198,12 +206,6 @@ export class GuxSubmenu {
     };
   }
   static get elementRef() { return "root"; }
-  static get watchers() {
-    return [{
-        "propName": "isShown",
-        "methodName": "forceUpdate"
-      }];
-  }
   static get listeners() {
     return [{
         "name": "keydown",

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.css

@@ -40,7 +40,7 @@
   pointer-events: none;
 }
 .gux-month-calendar .gux-year-header .gux-year {
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-weight: 700;
 }
@@ -58,7 +58,7 @@
   border: none;
   border-radius: 4px;
   outline: none;
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.css

@@ -6,4 +6,4 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
-}
+}

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -14,7 +14,7 @@ export class GuxScreenReader {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-screen-reader.less"]
+      "$": ["gux-screen-reader.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/beta/gux-time/gux-time.js

@@ -2,17 +2,21 @@ import { h, Host } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
 import { DateTimeFormatter } from '../../../i18n/DateTimeFormatter';
 import { getDesiredLocale } from '../../../i18n/index';
+import { getValidTimezone } from '../../../utils/date/get-valid-timezone';
 export class GuxTime {
   constructor() {
     this.datetime = new Date().toISOString();
     this.format = 'short';
+    this.timeZone = undefined;
   }
   componentWillLoad() {
     trackComponent(this.root);
     this.formatter = new DateTimeFormatter(getDesiredLocale(this.root));
   }
   render() {
-    return (h(Host, null, this.formatter.formatTime(new Date(this.datetime), this.format)));
+    return (h(Host, null, this.formatter.formatTime(new Date(this.datetime), this.format, {
+      timeZone: getValidTimezone(this.timeZone)
+    })));
   }
   static get is() { return "gux-time-beta"; }
   static get encapsulation() { return "shadow"; }
@@ -58,6 +62,28 @@ export class GuxTime {
         "attribute": "format",
         "reflect": false,
         "defaultValue": "'short'"
+      },
+      "timeZone": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxTimeZoneIdentifier",
+          "resolved": "\"Africa/Abidjan\" | \"Africa/Accra\" | \"Africa/Addis_Ababa\" | \"Africa/Algiers\" | \"Africa/Asmara\" | \"Africa/Bamako\" | \"Africa/Bangui\" | \"Africa/Banjul\" | \"Africa/Bissau\" | \"Africa/Blantyre\" | \"Africa/Brazzaville\" | \"Africa/Bujumbura\" | \"Africa/Cairo\" | \"Africa/Casablanca\" | \"Africa/Ceuta\" | \"Africa/Conakry\" | \"Africa/Dakar\" | \"Africa/Dar_es_Salaam\" | \"Africa/Djibouti\" | \"Africa/Douala\" | \"Africa/El_Aaiun\" | \"Africa/Freetown\" | \"Africa/Gaborone\" | \"Africa/Harare\" | \"Africa/Johannesburg\" | \"Africa/Juba\" | \"Africa/Kampala\" | \"Africa/Khartoum\" | \"Africa/Kigali\" | \"Africa/Kinshasa\" | \"Africa/Lagos\" | \"Africa/Libreville\" | \"Africa/Lome\" | \"Africa/Luanda\" | \"Africa/Lubumbashi\" | \"Africa/Lusaka\" | \"Africa/Malabo\" | \"Africa/Maputo\" | \"Africa/Maseru\" | \"Africa/Mbabane\" | \"Africa/Mogadishu\" | \"Africa/Monrovia\" | \"Africa/Nairobi\" | \"Africa/Ndjamena\" | \"Africa/Niamey\" | \"Africa/Nouakchott\" | \"Africa/Ouagadougou\" | \"Africa/Porto-Novo\" | \"Africa/Sao_Tome\" | \"Africa/Tripoli\" | \"Africa/Tunis\" | \"Africa/Windhoek\" | \"America/Adak\" | \"America/Anchorage\" | \"America/Anguilla\" | \"America/Antigua\" | \"America/Araguaina\" | \"America/Argentina/Buenos_Aires\" | \"America/Argentina/Catamarca\" | \"America/Argentina/Cordoba\" | \"America/Argentina/Jujuy\" | \"America/Argentina/La_Rioja\" | \"America/Argentina/Mendoza\" | \"America/Argentina/Rio_Gallegos\" | \"America/Argentina/Salta\" | \"America/Argentina/San_Juan\" | \"America/Argentina/San_Luis\" | \"America/Argentina/Tucuman\" | \"America/Argentina/Ushuaia\" | \"America/Aruba\" | \"America/Asuncion\" | \"America/Atikokan\" | \"America/Bahia\" | \"America/Bahia_Banderas\" | \"America/Barbados\" | \"America/Belem\" | \"America/Belize\" | \"America/Blanc-Sablon\" | \"America/Boa_Vista\" | \"America/Bogota\" | \"America/Boise\" | \"America/Cambridge_Bay\" | \"America/Campo_Grande\" | \"America/Cancun\" | \"America/Caracas\" | \"America/Cayenne\" | \"America/Cayman\" | \"America/Chicago\" | \"America/Chihuahua\" | \"America/Costa_Rica\" | \"America/Creston\" | \"America/Cuiaba\" | \"America/Curacao\" | \"America/Danmarkshavn\" | \"America/Dawson\" | \"America/Dawson_Creek\" | \"America/Denver\" | \"America/Detroit\" | \"America/Dominica\" | \"America/Edmonton\" | \"America/Eirunepe\" | \"America/El_Salvador\" | \"America/Fort_Nelson\" | \"America/Fortaleza\" | \"America/Glace_Bay\" | \"America/Goose_Bay\" | \"America/Grand_Turk\" | \"America/Grenada\" | \"America/Guadeloupe\" | \"America/Guatemala\" | \"America/Guayaquil\" | \"America/Guyana\" | \"America/Halifax\" | \"America/Havana\" | \"America/Hermosillo\" | \"America/Indiana/Indianapolis\" | \"America/Indiana/Knox\" | \"America/Indiana/Marengo\" | \"America/Indiana/Petersburg\" | \"America/Indiana/Tell_City\" | \"America/Indiana/Vevay\" | \"America/Indiana/Vincennes\" | \"America/Indiana/Winamac\" | \"America/Inuvik\" | \"America/Iqaluit\" | \"America/Jamaica\" | \"America/Juneau\" | \"America/Kentucky/Louisville\" | \"America/Kentucky/Monticello\" | \"America/Kralendijk\" | \"America/La_Paz\" | \"America/Lima\" | \"America/Los_Angeles\" | \"America/Lower_Princes\" | \"America/Maceio\" | \"America/Managua\" | \"America/Manaus\" | \"America/Marigot\" | \"America/Martinique\" | \"America/Matamoros\" | \"America/Mazatlan\" | \"America/Menominee\" | \"America/Merida\" | \"America/Metlakatla\" | \"America/Mexico_City\" | \"America/Miquelon\" | \"America/Moncton\" | \"America/Monterrey\" | \"America/Montevideo\" | \"America/Montserrat\" | \"America/Nassau\" | \"America/New_York\" | \"America/Nome\" | \"America/Noronha\" | \"America/North_Dakota/Beulah\" | \"America/North_Dakota/Center\" | \"America/North_Dakota/New_Salem\" | \"America/Nuuk\" | \"America/Ojinaga\" | \"America/Panama\" | \"America/Paramaribo\" | \"America/Phoenix\" | \"America/Port-au-Prince\" | \"America/Port_of_Spain\" | \"America/Porto_Velho\" | \"America/Puerto_Rico\" | \"America/Punta_Arenas\" | \"America/Rankin_Inlet\" | \"America/Recife\" | \"America/Regina\" | \"America/Resolute\" | \"America/Rio_Branco\" | \"America/Santarem\" | \"America/Santiago\" | \"America/Santo_Domingo\" | \"America/Sao_Paulo\" | \"America/Scoresbysund\" | \"America/Sitka\" | \"America/St_Barthelemy\" | \"America/St_Johns\" | \"America/St_Kitts\" | \"America/St_Lucia\" | \"America/St_Thomas\" | \"America/St_Vincent\" | \"America/Swift_Current\" | \"America/Tegucigalpa\" | \"America/Thule\" | \"America/Tijuana\" | \"America/Toronto\" | \"America/Tortola\" | \"America/Vancouver\" | \"America/Whitehorse\" | \"America/Winnipeg\" | \"America/Yakutat\" | \"Antarctica/Casey\" | \"Antarctica/Davis\" | \"Antarctica/DumontDUrville\" | \"Antarctica/Macquarie\" | \"Antarctica/Mawson\" | \"Antarctica/McMurdo\" | \"Antarctica/Palmer\" | \"Antarctica/Rothera\" | \"Antarctica/Syowa\" | \"Antarctica/Troll\" | \"Antarctica/Vostok\" | \"Arctic/Longyearbyen\" | \"Asia/Aden\" | \"Asia/Almaty\" | \"Asia/Amman\" | \"Asia/Anadyr\" | \"Asia/Aqtau\" | \"Asia/Aqtobe\" | \"Asia/Ashgabat\" | \"Asia/Atyrau\" | \"Asia/Baghdad\" | \"Asia/Bahrain\" | \"Asia/Baku\" | \"Asia/Bangkok\" | \"Asia/Barnaul\" | \"Asia/Beirut\" | \"Asia/Bishkek\" | \"Asia/Brunei\" | \"Asia/Chita\" | \"Asia/Choibalsan\" | \"Asia/Colombo\" | \"Asia/Damascus\" | \"Asia/Dhaka\" | \"Asia/Dili\" | \"Asia/Dubai\" | \"Asia/Dushanbe\" | \"Asia/Famagusta\" | \"Asia/Gaza\" | \"Asia/Hebron\" | \"Asia/Ho_Chi_Minh\" | \"Asia/Hong_Kong\" | \"Asia/Hovd\" | \"Asia/Irkutsk\" | \"Asia/Jakarta\" | \"Asia/Jayapura\" | \"Asia/Jerusalem\" | \"Asia/Kabul\" | \"Asia/Kamchatka\" | \"Asia/Karachi\" | \"Asia/Kathmandu\" | \"Asia/Khandyga\" | \"Asia/Kolkata\" | \"Asia/Krasnoyarsk\" | \"Asia/Kuala_Lumpur\" | \"Asia/Kuching\" | \"Asia/Kuwait\" | \"Asia/Macau\" | \"Asia/Magadan\" | \"Asia/Makassar\" | \"Asia/Manila\" | \"Asia/Muscat\" | \"Asia/Nicosia\" | \"Asia/Novokuznetsk\" | \"Asia/Novosibirsk\" | \"Asia/Omsk\" | \"Asia/Oral\" | \"Asia/Phnom_Penh\" | \"Asia/Pontianak\" | \"Asia/Pyongyang\" | \"Asia/Qatar\" | \"Asia/Qostanay\" | \"Asia/Qyzylorda\" | \"Asia/Riyadh\" | \"Asia/Sakhalin\" | \"Asia/Samarkand\" | \"Asia/Seoul\" | \"Asia/Shanghai\" | \"Asia/Singapore\" | \"Asia/Srednekolymsk\" | \"Asia/Taipei\" | \"Asia/Tashkent\" | \"Asia/Tbilisi\" | \"Asia/Tehran\" | \"Asia/Thimphu\" | \"Asia/Tokyo\" | \"Asia/Tomsk\" | \"Asia/Ulaanbaatar\" | \"Asia/Urumqi\" | \"Asia/Ust-Nera\" | \"Asia/Vientiane\" | \"Asia/Vladivostok\" | \"Asia/Yakutsk\" | \"Asia/Yangon\" | \"Asia/Yekaterinburg\" | \"Asia/Yerevan\" | \"Atlantic/Azores\" | \"Atlantic/Bermuda\" | \"Atlantic/Canary\" | \"Atlantic/Cape_Verde\" | \"Atlantic/Faroe\" | \"Atlantic/Madeira\" | \"Atlantic/Reykjavik\" | \"Atlantic/South_Georgia\" | \"Atlantic/St_Helena\" | \"Atlantic/Stanley\" | \"Australia/Adelaide\" | \"Australia/Brisbane\" | \"Australia/Broken_Hill\" | \"Australia/Darwin\" | \"Australia/Eucla\" | \"Australia/Hobart\" | \"Australia/Lindeman\" | \"Australia/Lord_Howe\" | \"Australia/Melbourne\" | \"Australia/Perth\" | \"Australia/Sydney\" | \"CET\" | \"CST6CDT\" | \"EET\" | \"EST\" | \"EST5EDT\" | \"Etc/GMT\" | \"Etc/GMT+1\" | \"Etc/GMT+10\" | \"Etc/GMT+11\" | \"Etc/GMT+12\" | \"Etc/GMT+2\" | \"Etc/GMT+3\" | \"Etc/GMT+4\" | \"Etc/GMT+5\" | \"Etc/GMT+6\" | \"Etc/GMT+7\" | \"Etc/GMT+8\" | \"Etc/GMT+9\" | \"Etc/GMT-1\" | \"Etc/GMT-10\" | \"Etc/GMT-11\" | \"Etc/GMT-12\" | \"Etc/GMT-13\" | \"Etc/GMT-14\" | \"Etc/GMT-2\" | \"Etc/GMT-3\" | \"Etc/GMT-4\" | \"Etc/GMT-5\" | \"Etc/GMT-6\" | \"Etc/GMT-7\" | \"Etc/GMT-8\" | \"Etc/GMT-9\" | \"Etc/UTC\" | \"Europe/Amsterdam\" | \"Europe/Andorra\" | \"Europe/Astrakhan\" | \"Europe/Athens\" | \"Europe/Belgrade\" | \"Europe/Berlin\" | \"Europe/Bratislava\" | \"Europe/Brussels\" | \"Europe/Bucharest\" | \"Europe/Budapest\" | \"Europe/Busingen\" | \"Europe/Chisinau\" | \"Europe/Copenhagen\" | \"Europe/Dublin\" | \"Europe/Gibraltar\" | \"Europe/Guernsey\" | \"Europe/Helsinki\" | \"Europe/Isle_of_Man\" | \"Europe/Istanbul\" | \"Europe/Jersey\" | \"Europe/Kaliningrad\" | \"Europe/Kirov\" | \"Europe/Kyiv\" | \"Europe/Lisbon\" | \"Europe/Ljubljana\" | \"Europe/London\" | \"Europe/Luxembourg\" | \"Europe/Madrid\" | \"Europe/Malta\" | \"Europe/Mariehamn\" | \"Europe/Minsk\" | \"Europe/Monaco\" | \"Europe/Moscow\" | \"Europe/Oslo\" | \"Europe/Paris\" | \"Europe/Podgorica\" | \"Europe/Prague\" | \"Europe/Riga\" | \"Europe/Rome\" | \"Europe/Samara\" | \"Europe/San_Marino\" | \"Europe/Sarajevo\" | \"Europe/Saratov\" | \"Europe/Simferopol\" | \"Europe/Skopje\" | \"Europe/Sofia\" | \"Europe/Stockholm\" | \"Europe/Tallinn\" | \"Europe/Tirane\" | \"Europe/Ulyanovsk\" | \"Europe/Vaduz\" | \"Europe/Vatican\" | \"Europe/Vienna\" | \"Europe/Vilnius\" | \"Europe/Volgograd\" | \"Europe/Warsaw\" | \"Europe/Zagreb\" | \"Europe/Zurich\" | \"HST\" | \"Indian/Antananarivo\" | \"Indian/Chagos\" | \"Indian/Christmas\" | \"Indian/Cocos\" | \"Indian/Comoro\" | \"Indian/Kerguelen\" | \"Indian/Mahe\" | \"Indian/Maldives\" | \"Indian/Mauritius\" | \"Indian/Mayotte\" | \"Indian/Reunion\" | \"MET\" | \"MST\" | \"MST7MDT\" | \"PST8PDT\" | \"Pacific/Apia\" | \"Pacific/Auckland\" | \"Pacific/Bougainville\" | \"Pacific/Chatham\" | \"Pacific/Chuuk\" | \"Pacific/Easter\" | \"Pacific/Efate\" | \"Pacific/Fakaofo\" | \"Pacific/Fiji\" | \"Pacific/Funafuti\" | \"Pacific/Galapagos\" | \"Pacific/Gambier\" | \"Pacific/Guadalcanal\" | \"Pacific/Guam\" | \"Pacific/Honolulu\" | \"Pacific/Kanton\" | \"Pacific/Kiritimati\" | \"Pacific/Kosrae\" | \"Pacific/Kwajalein\" | \"Pacific/Majuro\" | \"Pacific/Marquesas\" | \"Pacific/Midway\" | \"Pacific/Nauru\" | \"Pacific/Niue\" | \"Pacific/Norfolk\" | \"Pacific/Noumea\" | \"Pacific/Pago_Pago\" | \"Pacific/Palau\" | \"Pacific/Pitcairn\" | \"Pacific/Pohnpei\" | \"Pacific/Port_Moresby\" | \"Pacific/Rarotonga\" | \"Pacific/Saipan\" | \"Pacific/Tahiti\" | \"Pacific/Tarawa\" | \"Pacific/Tongatapu\" | \"Pacific/Wake\" | \"Pacific/Wallis\" | \"UTC\" | \"WET\"",
+          "references": {
+            "GuxTimeZoneIdentifier": {
+              "location": "import",
+              "path": "../../../i18n/time-zone/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Time zone identifier"
+        },
+        "attribute": "time-zone",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/beta/gux-time-zone-picker/generic-zones.js

@@ -0,0 +1,438 @@
+// Generic time zones not included in @vvo/tzdb that we want to support
+export const genericTimeZones = [
+  {
+    name: 'Etc/GMT',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: 0,
+    abbreviation: 'Etc/GMT',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: 0,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+0',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: 0,
+    abbreviation: 'Etc/GMT+0',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: 0,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+1',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -60,
+    abbreviation: 'Etc/GMT+1',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -60,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+2',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -120,
+    abbreviation: 'Etc/GMT+2',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -120,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+3',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -180,
+    abbreviation: 'Etc/GMT+3',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -180,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+4',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -240,
+    abbreviation: 'Etc/GMT+4',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -240,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+5',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -300,
+    abbreviation: 'Etc/GMT+5',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -300,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+6',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -360,
+    abbreviation: 'Etc/GMT+6',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -360,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+8',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -480,
+    abbreviation: 'Etc/GMT+8',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -480,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+9',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -540,
+    abbreviation: 'Etc/GMT+9',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -540,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+10',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -600,
+    abbreviation: 'Etc/GMT+10',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -600,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+11',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -660,
+    abbreviation: 'Etc/GMT+11',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -660,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+12',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -720,
+    abbreviation: 'Etc/GMT+11',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -720,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT+12',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: -720,
+    abbreviation: 'Etc/GMT+11',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: -720,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-0',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +0,
+    abbreviation: 'Etc/GMT-0',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +0,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-1',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +60,
+    abbreviation: 'Etc/GMT-1',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +60,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-2',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +120,
+    abbreviation: 'Etc/GMT-2',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +120,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-3',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +180,
+    abbreviation: 'Etc/GMT-3',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +180,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-4',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +240,
+    abbreviation: 'Etc/GMT-4',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +240,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-5',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +300,
+    abbreviation: 'Etc/GMT-5',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +300,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-6',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +360,
+    abbreviation: 'Etc/GMT-6',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +360,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-7',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +420,
+    abbreviation: 'Etc/GMT-7',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +420,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-8',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +480,
+    abbreviation: 'Etc/GMT-8',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +480,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-9',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +540,
+    abbreviation: 'Etc/GMT-9',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +540,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-10',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +600,
+    abbreviation: 'Etc/GMT-10',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +600,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-11',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +660,
+    abbreviation: 'Etc/GMT-11',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +660,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-12',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +720,
+    abbreviation: 'Etc/GMT-12',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +720,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-13',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +780,
+    abbreviation: 'Etc/GMT-13',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +780,
+    currentTimeFormat: '',
+    mainCities: []
+  },
+  {
+    name: 'Etc/GMT-14',
+    alternativeName: '',
+    group: [],
+    continentCode: '',
+    continentName: '',
+    countryName: '',
+    countryCode: '',
+    rawOffsetInMinutes: +840,
+    abbreviation: 'Etc/GMT-14',
+    rawFormat: '',
+    currentTimeOffsetInMinutes: +840,
+    currentTimeFormat: '',
+    mainCities: []
+  }
+];

package/dist/collection/components/beta/gux-time-zone-picker/gux-time-zone-picker.css

@@ -0,0 +1,19 @@
+.has-defaults gux-option {
+  padding-left: 20px;
+}
+
+gux-dropdown .zone-header {
+  padding: 6px 12px;
+  color: #6b7585;
+  text-transform: uppercase;
+}
+gux-dropdown .tz-utc {
+  color: #596373;
+}
+gux-dropdown gux-list-divider {
+  width: 97%;
+  margin-left: 15px;
+}
+gux-dropdown gux-option.gux-active .tz-utc, gux-dropdown gux-option.gux-hovered:not(:disabled) .tz-utc {
+  color: #e2e6ee;
+}