@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/input/demo/api.min.js

@@ -0,0 +1,4068 @@
+/**
+ * Function used for the lang switch demo
+ * @private
+ */
+const changeLang = () => {
+  const englishButton = document.getElementById("enButton");
+  const spanishButton = document.getElementById("esButton");
+
+  englishButton.addEventListener("click", () => {
+    document.documentElement.setAttribute("lang", "en");
+  });
+
+  spanishButton.addEventListener("click", () => {
+    document.documentElement.setAttribute("lang", "es");
+  });
+};
+
+function customError() {
+  const elem = document.querySelector('#setCustomErrorExample');
+  // set custom error
+  document.querySelector('#setCustomErrorBtn').addEventListener('click', () => {
+    elem.error = "Custom Error Message";
+  });
+
+  // remove custom error
+  document.querySelector('#setCustomErrorClearBtn').addEventListener('click', () => {
+    elem.removeAttribute('error');
+  });
+}
+
+function setReadonlyValue() {
+  const elem = document.querySelector('#readonlyExample');
+
+  // set value of auro-input element
+  document.querySelector('#setReadonlyValueBtn').addEventListener('click', () => {
+      elem.value = "Auro Alaska";
+  });
+
+  document.querySelector('#resetReadonlyValueBtn').addEventListener('click', () => {
+    elem.value = undefined;
+});
+}
+
+function swapInputValues() {
+  const btn = document.querySelector('#swapExampleBtn');
+  const inputOne = document.querySelector('#swapExampleLeft');
+  const inputTwo = document.querySelector('#swapExampleRight');
+
+  btn.addEventListener('click', () => {
+    const valueOne = inputOne.value;
+    const valueTwo = inputTwo.value;
+
+    inputOne.value = valueTwo;
+    inputTwo.value = valueOne;
+  });
+}
+
+function programmaticallySetValue() {
+  const elem = document.querySelector('#setProgrammaticValueExample');
+  
+  // set value of auro-input element
+  document.querySelector('#setValidValueBtn').addEventListener('click', () => {
+      elem.value = "Alaska Airlines is the best";
+  });
+
+  // reset the value of auro-input element
+  document.querySelector('#resetValueBtn').addEventListener('click', () => {
+      elem.value = '';
+  });
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$3=globalThis,i$5=t$3.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h$1,n$3=`<${o$4}>`,r$4=document,l$2=()=>r$4.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$4=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$4.createTreeWalker(r$4,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$1;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$1?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1):void 0!==u[3]&&(c=m$1):c===m$1?">"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g:p$2):c===g||c===p$2?c=m$1:c===v$1||c===_?c=f$1:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$4)){const i=v[a++],s=r.getAttribute(t).split(h$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$1),s=t.length-1;if(s>0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2());}}}else if(8===r.nodeType)if(r.data===o$4)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1,t+1));)d.push({type:7,index:c}),t+=h$1.length-1;}c++;}}static createElement(t,i){const s=r$4.createElement("template");return s.innerHTML=t,s}}function S$1(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$3(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$1(t,h._$AS(t,i.values),h,e)),i}let M$1 = class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$4).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$4,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$1(this,t,i),c$3(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$4(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c$3(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$4.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$2()),this.O(l$2()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$1(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c$3(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$1(this,t);}}const Z={M:e$4,P:h$1,A:o$4,C:1,L:V,R:M$1,D:u$4,V:S$1,I:R,H:k,N:I,U:L,B:H,F:z},j=t$3.litHtmlPolyfillSupport;j?.(N,R),(t$3.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a$1=Symbol.for(""),o$3=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$3(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$3=n$2(x);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$3=t=>(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const {I:t$1}=Z,s$1=()=>document.createComment(""),r$3=(o,i,n)=>{const e=o._$AA.parentNode,l=void 0===i?o._$AB:i._$AA;if(void 0===n){const i=e.insertBefore(s$1(),l),c=e.insertBefore(s$1(),l);n=new t$1(i,c,o,o.options);}else {const t=n._$AB.nextSibling,i=n._$AM,c=i!==o;if(c){let t;n._$AQ?.(o),n._$AM=o,void 0!==n._$AP&&(t=o._$AU)!==i._$AU&&n._$AP(t);}if(t!==l||c){let o=n._$AA;for(;o!==t;){const t=o.nextSibling;e.insertBefore(o,l),o=t;}}}return n},v=(o,t,i=o)=>(o._$AI(t,i),o),u$2={},m=(o,t=u$2)=>o._$AH=t,p$1=o=>o._$AH,M=o=>{o._$AP?.(!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=o;}};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u$1=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c$2=e$3(class extends i$3{constructor(e){if(super(e),e.type!==t$2.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=p$1(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p[w]),r$3(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p[k]),r$3(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u$1(a,k,w),y=u$1(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r$3(s,d[x]);v(e,p[k]),v$1[k]=e;}else v$1[k]=v(t,p[k]),r$3(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r$3(s,v$1[w+1]);v(e,p[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T}});
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e$2=e$3(class extends i$3{constructor(t){if(super(t),t.type!==t$2.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o$2=o=>o??E;
+
+const watchedItems = new Set();
+
+
+/**
+ * Function for setting the value of the lang attribute.
+ * @private
+ * @param {object} item - Individual DOM node from set of watchedItems.
+ * @param {string} lang - Current language set for the document.
+ */
+function setLang(item, lang) {
+
+  /**
+   * It is desired that if the lang is `en` to maintain `undefined` as not to
+   * add the `lang` attribute to the individual element.
+   */
+  item.lang = lang === 'en' ? undefined : lang;
+}
+
+/**
+ * Change handler for MutationObserver() callback.
+ * @private
+ * @param {MutationRecord[]} mutationList - Observed list of mutations.
+ */
+function handleChange(mutationList) {
+  const [mutation] = mutationList;
+  const lang = mutation.target.getAttribute('lang');
+  watchedItems.forEach((item) => {
+    setLang(item, lang);
+  });
+}
+
+if (typeof window !== "undefined") {
+  if (window.MutationObserver) {
+    const observer = new MutationObserver(handleChange);
+    observer.observe(document.documentElement, { attributes: true,
+      attributeFilter: ['lang'] });
+  }
+}
+
+const stringsES = {
+  'optional': 'opcional',
+  'validCard': 'Por favor, introduzca un número de tarjeta de crédito válida.',
+  'email': 'Introduzca una dirección de correo electrónico válida (nombre@dominio.com).',
+  'password': `Las contraseñas válidas deben constar de al menos 8 caracteres, incluyendo al menos una letra mayúscula, una letra minúscula y un número.`,
+  'creditcard': 'Por favor, introduzca un número de tarjeta de crédito válida.',
+  'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA',
+  'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA',
+  'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA',
+  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD',
+  'dateYY': 'Ingrese una fecha completa en el formato AA',
+  'dateYYYY': 'Ingrese una fecha completa en el formato AAAA',
+  'dateMM': 'Ingrese una fecha completa en el formato MM',
+};
+
+const stringsEN = {
+  'optional': 'optional',
+  'validCard': 'Please enter a valid credit card number.',
+  'email': 'Please enter a valid email address (name@domain.com).',
+  'password': 'Valid passwords must consist of at least 8 characters, including at least one uppercase letter, one lowercase letter, and one number.',
+  'creditcard': 'Please enter a valid credit card number.',
+  'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY',
+  'dateMMYY': 'Please enter a complete date in the format MM/YY',
+  'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY',
+  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD',
+  'dateYYY': 'Please enter a complete date in the format YY',
+  'dateYYYYY': 'Please enter a complete date in the format YYYY',
+  'dateMM': 'Please enter a complete date in the format MM'
+};
+
+/**
+ * Function to support the selected of a string in the set lang.
+ * @param {string} lang - Requested lang for content return.
+ * @param {string} requestedString - String requested in context.
+ * @private
+ * @returns {string} Value of string request.
+ */
+function i18n(lang, requestedString) {
+  if (lang === 'es') {
+    return stringsES[requestedString];
+  }
+
+  return stringsEN[requestedString];
+}
+
+/**
+ * @private
+ * @param {object} element - Pass in the scope of the element in use.
+ */
+function notifyOnLangChange(element) {
+  if (!element.lang) {
+    setLang(element, document.documentElement.lang);
+  }
+  watchedItems.add(element);
+}
+
+/**
+ * @private
+ * @param {object} element - Pass in the scope of the element in use.
+ */
+function stopNotifyingOnLangChange(element) {
+  watchedItems.delete(element);
+}
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$1=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$1.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$1("string"==typeof t?t:t+"",void 0,s),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
+
+var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
+
+var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+
+var tokensCss$3 = i$2`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var NumeralFormatter = function (numeralDecimalMark,
+                                 numeralIntegerScale,
+                                 numeralDecimalScale,
+                                 numeralThousandsGroupStyle,
+                                 numeralPositiveOnly,
+                                 stripLeadingZeroes,
+                                 prefix,
+                                 signBeforePrefix,
+                                 tailPrefix,
+                                 delimiter) {
+    var owner = this;
+
+    owner.numeralDecimalMark = numeralDecimalMark || '.';
+    owner.numeralIntegerScale = numeralIntegerScale > 0 ? numeralIntegerScale : 0;
+    owner.numeralDecimalScale = numeralDecimalScale >= 0 ? numeralDecimalScale : 2;
+    owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand;
+    owner.numeralPositiveOnly = !!numeralPositiveOnly;
+    owner.stripLeadingZeroes = stripLeadingZeroes !== false;
+    owner.prefix = (prefix || prefix === '') ? prefix : '';
+    owner.signBeforePrefix = !!signBeforePrefix;
+    owner.tailPrefix = !!tailPrefix;
+    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ',';
+    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
+};
+
+NumeralFormatter.groupStyle = {
+    thousand: 'thousand',
+    lakh:     'lakh',
+    wan:      'wan',
+    none:     'none'    
+};
+
+NumeralFormatter.prototype = {
+    getRawValue: function (value) {
+        return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.');
+    },
+
+    format: function (value) {
+        var owner = this, parts, partSign, partSignAndPrefix, partInteger, partDecimal = '';
+
+        // strip alphabet letters
+        value = value.replace(/[A-Za-z]/g, '')
+            // replace the first decimal mark with reserved placeholder
+            .replace(owner.numeralDecimalMark, 'M')
+
+            // strip non numeric letters except minus and "M"
+            // this is to ensure prefix has been stripped
+            .replace(/[^\dM-]/g, '')
+
+            // replace the leading minus with reserved placeholder
+            .replace(/^\-/, 'N')
+
+            // strip the other minus sign (if present)
+            .replace(/\-/g, '')
+
+            // replace the minus sign (if present)
+            .replace('N', owner.numeralPositiveOnly ? '' : '-')
+
+            // replace decimal mark
+            .replace('M', owner.numeralDecimalMark);
+
+        // strip any leading zeros
+        if (owner.stripLeadingZeroes) {
+            value = value.replace(/^(-)?0+(?=\d)/, '$1');
+        }
+
+        partSign = value.slice(0, 1) === '-' ? '-' : '';
+        if (typeof owner.prefix != 'undefined') {
+            if (owner.signBeforePrefix) {
+                partSignAndPrefix = partSign + owner.prefix;
+            } else {
+                partSignAndPrefix = owner.prefix + partSign;
+            }
+        } else {
+            partSignAndPrefix = partSign;
+        }
+        
+        partInteger = value;
+
+        if (value.indexOf(owner.numeralDecimalMark) >= 0) {
+            parts = value.split(owner.numeralDecimalMark);
+            partInteger = parts[0];
+            partDecimal = owner.numeralDecimalMark + parts[1].slice(0, owner.numeralDecimalScale);
+        }
+
+        if(partSign === '-') {
+            partInteger = partInteger.slice(1);
+        }
+
+        if (owner.numeralIntegerScale > 0) {
+          partInteger = partInteger.slice(0, owner.numeralIntegerScale);
+        }
+
+        switch (owner.numeralThousandsGroupStyle) {
+        case NumeralFormatter.groupStyle.lakh:
+            partInteger = partInteger.replace(/(\d)(?=(\d\d)+\d$)/g, '$1' + owner.delimiter);
+
+            break;
+
+        case NumeralFormatter.groupStyle.wan:
+            partInteger = partInteger.replace(/(\d)(?=(\d{4})+$)/g, '$1' + owner.delimiter);
+
+            break;
+
+        case NumeralFormatter.groupStyle.thousand:
+            partInteger = partInteger.replace(/(\d)(?=(\d{3})+$)/g, '$1' + owner.delimiter);
+
+            break;
+        }
+
+        if (owner.tailPrefix) {
+            return partSign + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '') + owner.prefix;
+        }
+
+        return partSignAndPrefix + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '');
+    }
+};
+
+var NumeralFormatter_1 = NumeralFormatter;
+
+var DateFormatter = function (datePattern, dateMin, dateMax) {
+    var owner = this;
+
+    owner.date = [];
+    owner.blocks = [];
+    owner.datePattern = datePattern;
+    owner.dateMin = dateMin
+      .split('-')
+      .reverse()
+      .map(function(x) {
+        return parseInt(x, 10);
+      });
+    if (owner.dateMin.length === 2) owner.dateMin.unshift(0);
+
+    owner.dateMax = dateMax
+      .split('-')
+      .reverse()
+      .map(function(x) {
+        return parseInt(x, 10);
+      });
+    if (owner.dateMax.length === 2) owner.dateMax.unshift(0);
+    
+    owner.initBlocks();
+};
+
+DateFormatter.prototype = {
+    initBlocks: function () {
+        var owner = this;
+        owner.datePattern.forEach(function (value) {
+            if (value === 'Y') {
+                owner.blocks.push(4);
+            } else {
+                owner.blocks.push(2);
+            }
+        });
+    },
+
+    getISOFormatDate: function () {
+        var owner = this,
+            date = owner.date;
+
+        return date[2] ? (
+            date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0])
+        ) : '';
+    },
+
+    getBlocks: function () {
+        return this.blocks;
+    },
+
+    getValidatedDate: function (value) {
+        var owner = this, result = '';
+
+        value = value.replace(/[^\d]/g, '');
+
+        owner.blocks.forEach(function (length, index) {
+            if (value.length > 0) {
+                var sub = value.slice(0, length),
+                    sub0 = sub.slice(0, 1),
+                    rest = value.slice(length);
+
+                switch (owner.datePattern[index]) {
+                case 'd':
+                    if (sub === '00') {
+                        sub = '01';
+                    } else if (parseInt(sub0, 10) > 3) {
+                        sub = '0' + sub0;
+                    } else if (parseInt(sub, 10) > 31) {
+                        sub = '31';
+                    }
+
+                    break;
+
+                case 'm':
+                    if (sub === '00') {
+                        sub = '01';
+                    } else if (parseInt(sub0, 10) > 1) {
+                        sub = '0' + sub0;
+                    } else if (parseInt(sub, 10) > 12) {
+                        sub = '12';
+                    }
+
+                    break;
+                }
+
+                result += sub;
+
+                // update remaining string
+                value = rest;
+            }
+        });
+
+        return this.getFixedDateString(result);
+    },
+
+    getFixedDateString: function (value) {
+        var owner = this, datePattern = owner.datePattern, date = [],
+            dayIndex = 0, monthIndex = 0, yearIndex = 0,
+            dayStartIndex = 0, monthStartIndex = 0, yearStartIndex = 0,
+            day, month, year, fullYearDone = false;
+
+        // mm-dd || dd-mm
+        if (value.length === 4 && datePattern[0].toLowerCase() !== 'y' && datePattern[1].toLowerCase() !== 'y') {
+            dayStartIndex = datePattern[0] === 'd' ? 0 : 2;
+            monthStartIndex = 2 - dayStartIndex;
+            day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10);
+            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
+
+            date = this.getFixedDate(day, month, 0);
+        }
+
+        // yyyy-mm-dd || yyyy-dd-mm || mm-dd-yyyy || dd-mm-yyyy || dd-yyyy-mm || mm-yyyy-dd
+        if (value.length === 8) {
+            datePattern.forEach(function (type, index) {
+                switch (type) {
+                case 'd':
+                    dayIndex = index;
+                    break;
+                case 'm':
+                    monthIndex = index;
+                    break;
+                default:
+                    yearIndex = index;
+                    break;
+                }
+            });
+
+            yearStartIndex = yearIndex * 2;
+            dayStartIndex = (dayIndex <= yearIndex) ? dayIndex * 2 : (dayIndex * 2 + 2);
+            monthStartIndex = (monthIndex <= yearIndex) ? monthIndex * 2 : (monthIndex * 2 + 2);
+
+            day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10);
+            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
+            year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10);
+
+            fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4;
+
+            date = this.getFixedDate(day, month, year);
+        }
+
+        // mm-yy || yy-mm
+        if (value.length === 4 && (datePattern[0] === 'y' || datePattern[1] === 'y')) {
+            monthStartIndex = datePattern[0] === 'm' ? 0 : 2;
+            yearStartIndex = 2 - monthStartIndex;
+            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
+            year = parseInt(value.slice(yearStartIndex, yearStartIndex + 2), 10);
+
+            fullYearDone = value.slice(yearStartIndex, yearStartIndex + 2).length === 2;
+
+            date = [0, month, year];
+        }
+
+        // mm-yyyy || yyyy-mm
+        if (value.length === 6 && (datePattern[0] === 'Y' || datePattern[1] === 'Y')) {
+            monthStartIndex = datePattern[0] === 'm' ? 0 : 4;
+            yearStartIndex = 2 - 0.5 * monthStartIndex;
+            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
+            year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10);
+
+            fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4;
+
+            date = [0, month, year];
+        }
+
+        date = owner.getRangeFixedDate(date);
+        owner.date = date;
+
+        var result = date.length === 0 ? value : datePattern.reduce(function (previous, current) {
+            switch (current) {
+            case 'd':
+                return previous + (date[0] === 0 ? '' : owner.addLeadingZero(date[0]));
+            case 'm':
+                return previous + (date[1] === 0 ? '' : owner.addLeadingZero(date[1]));
+            case 'y':
+                return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], false) : '');
+            case 'Y':
+                return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], true) : '');
+            }
+        }, '');
+
+        return result;
+    },
+
+    getRangeFixedDate: function (date) {
+        var owner = this,
+            datePattern = owner.datePattern,
+            dateMin = owner.dateMin || [],
+            dateMax = owner.dateMax || [];
+
+        if (!date.length || (dateMin.length < 3 && dateMax.length < 3)) return date;
+
+        if (
+          datePattern.find(function(x) {
+            return x.toLowerCase() === 'y';
+          }) &&
+          date[2] === 0
+        ) return date;
+
+        if (dateMax.length && (dateMax[2] < date[2] || (
+          dateMax[2] === date[2] && (dateMax[1] < date[1] || (
+            dateMax[1] === date[1] && dateMax[0] < date[0]
+          ))
+        ))) return dateMax;
+
+        if (dateMin.length && (dateMin[2] > date[2] || (
+          dateMin[2] === date[2] && (dateMin[1] > date[1] || (
+            dateMin[1] === date[1] && dateMin[0] > date[0]
+          ))
+        ))) return dateMin;
+
+        return date;
+    },
+
+    getFixedDate: function (day, month, year) {
+        day = Math.min(day, 31);
+        month = Math.min(month, 12);
+        year = parseInt((year || 0), 10);
+
+        if ((month < 7 && month % 2 === 0) || (month > 8 && month % 2 === 1)) {
+            day = Math.min(day, month === 2 ? (this.isLeapYear(year) ? 29 : 28) : 30);
+        }
+
+        return [day, month, year];
+    },
+
+    isLeapYear: function (year) {
+        return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
+    },
+
+    addLeadingZero: function (number) {
+        return (number < 10 ? '0' : '') + number;
+    },
+
+    addLeadingZeroForYear: function (number, fullYearMode) {
+        if (fullYearMode) {
+            return (number < 10 ? '000' : (number < 100 ? '00' : (number < 1000 ? '0' : ''))) + number;
+        }
+
+        return (number < 10 ? '0' : '') + number;
+    }
+};
+
+var DateFormatter_1 = DateFormatter;
+
+var TimeFormatter = function (timePattern, timeFormat) {
+    var owner = this;
+
+    owner.time = [];
+    owner.blocks = [];
+    owner.timePattern = timePattern;
+    owner.timeFormat = timeFormat;
+    owner.initBlocks();
+};
+
+TimeFormatter.prototype = {
+    initBlocks: function () {
+        var owner = this;
+        owner.timePattern.forEach(function () {
+            owner.blocks.push(2);
+        });
+    },
+
+    getISOFormatTime: function () {
+        var owner = this,
+            time = owner.time;
+
+        return time[2] ? (
+            owner.addLeadingZero(time[0]) + ':' + owner.addLeadingZero(time[1]) + ':' + owner.addLeadingZero(time[2])
+        ) : '';
+    },
+
+    getBlocks: function () {
+        return this.blocks;
+    },
+
+    getTimeFormatOptions: function () {
+        var owner = this;
+        if (String(owner.timeFormat) === '12') {
+            return {
+                maxHourFirstDigit: 1,
+                maxHours: 12,
+                maxMinutesFirstDigit: 5,
+                maxMinutes: 60
+            };
+        }
+
+        return {
+            maxHourFirstDigit: 2,
+            maxHours: 23,
+            maxMinutesFirstDigit: 5,
+            maxMinutes: 60
+        };
+    },
+
+    getValidatedTime: function (value) {
+        var owner = this, result = '';
+
+        value = value.replace(/[^\d]/g, '');
+
+        var timeFormatOptions = owner.getTimeFormatOptions();
+
+        owner.blocks.forEach(function (length, index) {
+            if (value.length > 0) {
+                var sub = value.slice(0, length),
+                    sub0 = sub.slice(0, 1),
+                    rest = value.slice(length);
+
+                switch (owner.timePattern[index]) {
+
+                case 'h':
+                    if (parseInt(sub0, 10) > timeFormatOptions.maxHourFirstDigit) {
+                        sub = '0' + sub0;
+                    } else if (parseInt(sub, 10) > timeFormatOptions.maxHours) {
+                        sub = timeFormatOptions.maxHours + '';
+                    }
+
+                    break;
+
+                case 'm':
+                case 's':
+                    if (parseInt(sub0, 10) > timeFormatOptions.maxMinutesFirstDigit) {
+                        sub = '0' + sub0;
+                    } else if (parseInt(sub, 10) > timeFormatOptions.maxMinutes) {
+                        sub = timeFormatOptions.maxMinutes + '';
+                    }
+                    break;
+                }
+
+                result += sub;
+
+                // update remaining string
+                value = rest;
+            }
+        });
+
+        return this.getFixedTimeString(result);
+    },
+
+    getFixedTimeString: function (value) {
+        var owner = this, timePattern = owner.timePattern, time = [],
+            secondIndex = 0, minuteIndex = 0, hourIndex = 0,
+            secondStartIndex = 0, minuteStartIndex = 0, hourStartIndex = 0,
+            second, minute, hour;
+
+        if (value.length === 6) {
+            timePattern.forEach(function (type, index) {
+                switch (type) {
+                case 's':
+                    secondIndex = index * 2;
+                    break;
+                case 'm':
+                    minuteIndex = index * 2;
+                    break;
+                case 'h':
+                    hourIndex = index * 2;
+                    break;
+                }
+            });
+
+            hourStartIndex = hourIndex;
+            minuteStartIndex = minuteIndex;
+            secondStartIndex = secondIndex;
+
+            second = parseInt(value.slice(secondStartIndex, secondStartIndex + 2), 10);
+            minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10);
+            hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10);
+
+            time = this.getFixedTime(hour, minute, second);
+        }
+
+        if (value.length === 4 && owner.timePattern.indexOf('s') < 0) {
+            timePattern.forEach(function (type, index) {
+                switch (type) {
+                case 'm':
+                    minuteIndex = index * 2;
+                    break;
+                case 'h':
+                    hourIndex = index * 2;
+                    break;
+                }
+            });
+
+            hourStartIndex = hourIndex;
+            minuteStartIndex = minuteIndex;
+
+            second = 0;
+            minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10);
+            hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10);
+
+            time = this.getFixedTime(hour, minute, second);
+        }
+
+        owner.time = time;
+
+        return time.length === 0 ? value : timePattern.reduce(function (previous, current) {
+            switch (current) {
+            case 's':
+                return previous + owner.addLeadingZero(time[2]);
+            case 'm':
+                return previous + owner.addLeadingZero(time[1]);
+            case 'h':
+                return previous + owner.addLeadingZero(time[0]);
+            }
+        }, '');
+    },
+
+    getFixedTime: function (hour, minute, second) {
+        second = Math.min(parseInt(second || 0, 10), 60);
+        minute = Math.min(minute, 60);
+        hour = Math.min(hour, 60);
+
+        return [hour, minute, second];
+    },
+
+    addLeadingZero: function (number) {
+        return (number < 10 ? '0' : '') + number;
+    }
+};
+
+var TimeFormatter_1 = TimeFormatter;
+
+var PhoneFormatter = function (formatter, delimiter) {
+    var owner = this;
+
+    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' ';
+    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
+
+    owner.formatter = formatter;
+};
+
+PhoneFormatter.prototype = {
+    setFormatter: function (formatter) {
+        this.formatter = formatter;
+    },
+
+    format: function (phoneNumber) {
+        var owner = this;
+
+        owner.formatter.clear();
+
+        // only keep number and +
+        phoneNumber = phoneNumber.replace(/[^\d+]/g, '');
+
+        // strip non-leading +
+        phoneNumber = phoneNumber.replace(/^\+/, 'B').replace(/\+/g, '').replace('B', '+');
+
+        // strip delimiter
+        phoneNumber = phoneNumber.replace(owner.delimiterRE, '');
+
+        var result = '', current, validated = false;
+
+        for (var i = 0, iMax = phoneNumber.length; i < iMax; i++) {
+            current = owner.formatter.inputDigit(phoneNumber.charAt(i));
+
+            // has ()- or space inside
+            if (/[\s()-]/g.test(current)) {
+                result = current;
+
+                validated = true;
+            } else {
+                if (!validated) {
+                    result = current;
+                }
+                // else: over length input
+                // it turns to invalid number again
+            }
+        }
+
+        // strip ()
+        // e.g. US: 7161234567 returns (716) 123-4567
+        result = result.replace(/[()]/g, '');
+        // replace library delimiter with user customized delimiter
+        result = result.replace(/[\s-]/g, owner.delimiter);
+
+        return result;
+    }
+};
+
+var PhoneFormatter_1 = PhoneFormatter;
+
+var CreditCardDetector = {
+    blocks: {
+        uatp:          [4, 5, 6],
+        amex:          [4, 6, 5],
+        diners:        [4, 6, 4],
+        discover:      [4, 4, 4, 4],
+        mastercard:    [4, 4, 4, 4],
+        dankort:       [4, 4, 4, 4],
+        instapayment:  [4, 4, 4, 4],
+        jcb15:         [4, 6, 5],
+        jcb:           [4, 4, 4, 4],
+        maestro:       [4, 4, 4, 4],
+        visa:          [4, 4, 4, 4],
+        mir:           [4, 4, 4, 4],
+        unionPay:      [4, 4, 4, 4],
+        general:       [4, 4, 4, 4]
+    },
+
+    re: {
+        // starts with 1; 15 digits, not starts with 1800 (jcb card)
+        uatp: /^(?!1800)1\d{0,14}/,
+
+        // starts with 34/37; 15 digits
+        amex: /^3[47]\d{0,13}/,
+
+        // starts with 6011/65/644-649; 16 digits
+        discover: /^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/,
+
+        // starts with 300-305/309 or 36/38/39; 14 digits
+        diners: /^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/,
+
+        // starts with 51-55/2221–2720; 16 digits
+        mastercard: /^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,
+
+        // starts with 5019/4175/4571; 16 digits
+        dankort: /^(5019|4175|4571)\d{0,12}/,
+
+        // starts with 637-639; 16 digits
+        instapayment: /^63[7-9]\d{0,13}/,
+
+        // starts with 2131/1800; 15 digits
+        jcb15: /^(?:2131|1800)\d{0,11}/,
+
+        // starts with 2131/1800/35; 16 digits
+        jcb: /^(?:35\d{0,2})\d{0,12}/,
+
+        // starts with 50/56-58/6304/67; 16 digits
+        maestro: /^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/,
+
+        // starts with 22; 16 digits
+        mir: /^220[0-4]\d{0,12}/,
+
+        // starts with 4; 16 digits
+        visa: /^4\d{0,15}/,
+
+        // starts with 62/81; 16 digits
+        unionPay: /^(62|81)\d{0,14}/
+    },
+
+    getStrictBlocks: function (block) {
+      var total = block.reduce(function (prev, current) {
+        return prev + current;
+      }, 0);
+
+      return block.concat(19 - total);
+    },
+
+    getInfo: function (value, strictMode) {
+        var blocks = CreditCardDetector.blocks,
+            re = CreditCardDetector.re;
+
+        // Some credit card can have up to 19 digits number.
+        // Set strictMode to true will remove the 16 max-length restrain,
+        // however, I never found any website validate card number like
+        // this, hence probably you don't want to enable this option.
+        strictMode = !!strictMode;
+
+        for (var key in re) {
+            if (re[key].test(value)) {
+                var matchedBlocks = blocks[key];
+                return {
+                    type: key,
+                    blocks: strictMode ? this.getStrictBlocks(matchedBlocks) : matchedBlocks
+                };
+            }
+        }
+
+        return {
+            type: 'unknown',
+            blocks: strictMode ? this.getStrictBlocks(blocks.general) : blocks.general
+        };
+    }
+};
+
+var CreditCardDetector_1 = CreditCardDetector;
+
+var Util = {
+    noop: function () {
+    },
+
+    strip: function (value, re) {
+        return value.replace(re, '');
+    },
+
+    getPostDelimiter: function (value, delimiter, delimiters) {
+        // single delimiter
+        if (delimiters.length === 0) {
+            return value.slice(-delimiter.length) === delimiter ? delimiter : '';
+        }
+
+        // multiple delimiters
+        var matchedDelimiter = '';
+        delimiters.forEach(function (current) {
+            if (value.slice(-current.length) === current) {
+                matchedDelimiter = current;
+            }
+        });
+
+        return matchedDelimiter;
+    },
+
+    getDelimiterREByDelimiter: function (delimiter) {
+        return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
+    },
+
+    getNextCursorPosition: function (prevPos, oldValue, newValue, delimiter, delimiters) {
+      // If cursor was at the end of value, just place it back.
+      // Because new value could contain additional chars.
+      if (oldValue.length === prevPos) {
+          return newValue.length;
+      }
+
+      return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter ,delimiters);
+    },
+
+    getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) {
+        var oldRawValue, newRawValue, lengthOffset;
+
+        oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
+        newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
+        lengthOffset = oldRawValue.length - newRawValue.length;
+
+        return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0;
+    },
+
+    stripDelimiters: function (value, delimiter, delimiters) {
+        var owner = this;
+
+        // single delimiter
+        if (delimiters.length === 0) {
+            var delimiterRE = delimiter ? owner.getDelimiterREByDelimiter(delimiter) : '';
+
+            return value.replace(delimiterRE, '');
+        }
+
+        // multiple delimiters
+        delimiters.forEach(function (current) {
+            current.split('').forEach(function (letter) {
+                value = value.replace(owner.getDelimiterREByDelimiter(letter), '');
+            });
+        });
+
+        return value;
+    },
+
+    headStr: function (str, length) {
+        return str.slice(0, length);
+    },
+
+    getMaxLength: function (blocks) {
+        return blocks.reduce(function (previous, current) {
+            return previous + current;
+        }, 0);
+    },
+
+    // strip prefix
+    // Before type  |   After type    |     Return value
+    // PEFIX-...    |   PEFIX-...     |     ''
+    // PREFIX-123   |   PEFIX-123     |     123
+    // PREFIX-123   |   PREFIX-23     |     23
+    // PREFIX-123   |   PREFIX-1234   |     1234
+    getPrefixStrippedValue: function (value, prefix, prefixLength, prevResult, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix) {
+        // No prefix
+        if (prefixLength === 0) {
+          return value;
+        }
+
+        // Value is prefix
+        if (value === prefix && value !== '') {
+          return '';
+        }
+
+        if (signBeforePrefix && (value.slice(0, 1) == '-')) {
+            var prev = (prevResult.slice(0, 1) == '-') ? prevResult.slice(1) : prevResult;
+            return '-' + this.getPrefixStrippedValue(value.slice(1), prefix, prefixLength, prev, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix);
+        }
+
+        // Pre result prefix string does not match pre-defined prefix
+        if (prevResult.slice(0, prefixLength) !== prefix && !tailPrefix) {
+            // Check if the first time user entered something
+            if (noImmediatePrefix && !prevResult && value) return value;
+            return '';
+        } else if (prevResult.slice(-prefixLength) !== prefix && tailPrefix) {
+            // Check if the first time user entered something
+            if (noImmediatePrefix && !prevResult && value) return value;
+            return '';
+        }
+
+        var prevValue = this.stripDelimiters(prevResult, delimiter, delimiters);
+
+        // New value has issue, someone typed in between prefix letters
+        // Revert to pre value
+        if (value.slice(0, prefixLength) !== prefix && !tailPrefix) {
+            return prevValue.slice(prefixLength);
+        } else if (value.slice(-prefixLength) !== prefix && tailPrefix) {
+            return prevValue.slice(0, -prefixLength - 1);
+        }
+
+        // No issue, strip prefix for new value
+        return tailPrefix ? value.slice(0, -prefixLength) : value.slice(prefixLength);
+    },
+
+    getFirstDiffIndex: function (prev, current) {
+        var index = 0;
+
+        while (prev.charAt(index) === current.charAt(index)) {
+            if (prev.charAt(index++) === '') {
+                return -1;
+            }
+        }
+
+        return index;
+    },
+
+    getFormattedValue: function (value, blocks, blocksLength, delimiter, delimiters, delimiterLazyShow) {
+        var result = '',
+            multipleDelimiters = delimiters.length > 0,
+            currentDelimiter = '';
+
+        // no options, normal input
+        if (blocksLength === 0) {
+            return value;
+        }
+
+        blocks.forEach(function (length, index) {
+            if (value.length > 0) {
+                var sub = value.slice(0, length),
+                    rest = value.slice(length);
+
+                if (multipleDelimiters) {
+                    currentDelimiter = delimiters[delimiterLazyShow ? (index - 1) : index] || currentDelimiter;
+                } else {
+                    currentDelimiter = delimiter;
+                }
+
+                if (delimiterLazyShow) {
+                    if (index > 0) {
+                        result += currentDelimiter;
+                    }
+
+                    result += sub;
+                } else {
+                    result += sub;
+
+                    if (sub.length === length && index < blocksLength - 1) {
+                        result += currentDelimiter;
+                    }
+                }
+
+                // update remaining string
+                value = rest;
+            }
+        });
+
+        return result;
+    },
+
+    // move cursor to the end
+    // the first time user focuses on an input with prefix
+    fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
+        if (!el) {
+            return;
+        }
+
+        var val = el.value,
+            appendix = delimiter || (delimiters[0] || ' ');
+
+        if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) <= val.length) {
+            return;
+        }
+
+        var len = val.length * 2;
+
+        // set timeout to avoid blink
+        setTimeout(function () {
+            el.setSelectionRange(len, len);
+        }, 1);
+    },
+
+    // Check if input field is fully selected
+    checkFullSelection: function(value) {
+      try {
+        var selection = window.getSelection() || document.getSelection() || {};
+        return selection.toString().length === value.length;
+      } catch (ex) {
+        // Ignore
+      }
+
+      return false;
+    },
+
+    setSelection: function (element, position, doc) {
+        if (element !== this.getActiveElement(doc)) {
+            return;
+        }
+
+        // cursor is already in the end
+        if (element && element.value.length <= position) {
+          return;
+        }
+
+        if (element.createTextRange) {
+            var range = element.createTextRange();
+
+            range.move('character', position);
+            range.select();
+        } else {
+            try {
+                element.setSelectionRange(position, position);
+            } catch (e) {
+                // eslint-disable-next-line
+                console.warn('The input element type does not support selection');
+            }
+        }
+    },
+
+    getActiveElement: function(parent) {
+        var activeElement = parent.activeElement;
+        if (activeElement && activeElement.shadowRoot) {
+            return this.getActiveElement(activeElement.shadowRoot);
+        }
+        return activeElement;
+    },
+
+    isAndroid: function () {
+        return navigator && /android/i.test(navigator.userAgent);
+    },
+
+    // On Android chrome, the keyup and keydown events
+    // always return key code 229 as a composition that
+    // buffers the user’s keystrokes
+    // see https://github.com/nosir/cleave.js/issues/147
+    isAndroidBackspaceKeydown: function (lastInputValue, currentInputValue) {
+        if (!this.isAndroid() || !lastInputValue || !currentInputValue) {
+            return false;
+        }
+
+        return currentInputValue === lastInputValue.slice(0, -1);
+    }
+};
+
+var Util_1 = Util;
+
+/**
+ * Props Assignment
+ *
+ * Separate this, so react module can share the usage
+ */
+var DefaultProperties = {
+    // Maybe change to object-assign
+    // for now just keep it as simple
+    assign: function (target, opts) {
+        target = target || {};
+        opts = opts || {};
+
+        // credit card
+        target.creditCard = !!opts.creditCard;
+        target.creditCardStrictMode = !!opts.creditCardStrictMode;
+        target.creditCardType = '';
+        target.onCreditCardTypeChanged = opts.onCreditCardTypeChanged || (function () {});
+
+        // phone
+        target.phone = !!opts.phone;
+        target.phoneRegionCode = opts.phoneRegionCode || 'AU';
+        target.phoneFormatter = {};
+
+        // time
+        target.time = !!opts.time;
+        target.timePattern = opts.timePattern || ['h', 'm', 's'];
+        target.timeFormat = opts.timeFormat || '24';
+        target.timeFormatter = {};
+
+        // date
+        target.date = !!opts.date;
+        target.datePattern = opts.datePattern || ['d', 'm', 'Y'];
+        target.dateMin = opts.dateMin || '';
+        target.dateMax = opts.dateMax || '';
+        target.dateFormatter = {};
+
+        // numeral
+        target.numeral = !!opts.numeral;
+        target.numeralIntegerScale = opts.numeralIntegerScale > 0 ? opts.numeralIntegerScale : 0;
+        target.numeralDecimalScale = opts.numeralDecimalScale >= 0 ? opts.numeralDecimalScale : 2;
+        target.numeralDecimalMark = opts.numeralDecimalMark || '.';
+        target.numeralThousandsGroupStyle = opts.numeralThousandsGroupStyle || 'thousand';
+        target.numeralPositiveOnly = !!opts.numeralPositiveOnly;
+        target.stripLeadingZeroes = opts.stripLeadingZeroes !== false;
+        target.signBeforePrefix = !!opts.signBeforePrefix;
+        target.tailPrefix = !!opts.tailPrefix;
+
+        // others
+        target.swapHiddenInput = !!opts.swapHiddenInput;
+        
+        target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
+
+        target.uppercase = !!opts.uppercase;
+        target.lowercase = !!opts.lowercase;
+
+        target.prefix = (target.creditCard || target.date) ? '' : (opts.prefix || '');
+        target.noImmediatePrefix = !!opts.noImmediatePrefix;
+        target.prefixLength = target.prefix.length;
+        target.rawValueTrimPrefix = !!opts.rawValueTrimPrefix;
+        target.copyDelimiter = !!opts.copyDelimiter;
+
+        target.initValue = (opts.initValue !== undefined && opts.initValue !== null) ? opts.initValue.toString() : '';
+
+        target.delimiter =
+            (opts.delimiter || opts.delimiter === '') ? opts.delimiter :
+                (opts.date ? '/' :
+                    (opts.time ? ':' :
+                        (opts.numeral ? ',' :
+                            (opts.phone ? ' ' :
+                                ' '))));
+        target.delimiterLength = target.delimiter.length;
+        target.delimiterLazyShow = !!opts.delimiterLazyShow;
+        target.delimiters = opts.delimiters || [];
+
+        target.blocks = opts.blocks || [];
+        target.blocksLength = target.blocks.length;
+
+        target.root = (typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window;
+        target.document = opts.document || target.root.document;
+
+        target.maxLength = 0;
+
+        target.backspace = false;
+        target.result = '';
+
+        target.onValueChanged = opts.onValueChanged || (function () {});
+
+        return target;
+    }
+};
+
+var DefaultProperties_1 = DefaultProperties;
+
+/**
+ * Construct a new Cleave instance by passing the configuration object
+ *
+ * @param {String | HTMLElement} element
+ * @param {Object} opts
+ */
+var Cleave = function (element, opts) {
+    var owner = this;
+    var hasMultipleElements = false;
+
+    if (typeof element === 'string') {
+        owner.element = document.querySelector(element);
+        hasMultipleElements = document.querySelectorAll(element).length > 1;
+    } else {
+      if (typeof element.length !== 'undefined' && element.length > 0) {
+        owner.element = element[0];
+        hasMultipleElements = element.length > 1;
+      } else {
+        owner.element = element;
+      }
+    }
+
+    if (!owner.element) {
+        throw new Error('[cleave.js] Please check the element');
+    }
+
+    if (hasMultipleElements) {
+      try {
+        // eslint-disable-next-line
+        console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
+      } catch (e) {
+        // Old IE
+      }
+    }
+
+    opts.initValue = owner.element.value;
+
+    owner.properties = Cleave.DefaultProperties.assign({}, opts);
+
+    owner.init();
+};
+
+Cleave.prototype = {
+    init: function () {
+        var owner = this, pps = owner.properties;
+
+        // no need to use this lib
+        if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) {
+            owner.onInput(pps.initValue);
+
+            return;
+        }
+
+        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
+
+        owner.isAndroid = Cleave.Util.isAndroid();
+        owner.lastInputValue = '';
+        owner.isBackward = '';
+
+        owner.onChangeListener = owner.onChange.bind(owner);
+        owner.onKeyDownListener = owner.onKeyDown.bind(owner);
+        owner.onFocusListener = owner.onFocus.bind(owner);
+        owner.onCutListener = owner.onCut.bind(owner);
+        owner.onCopyListener = owner.onCopy.bind(owner);
+
+        owner.initSwapHiddenInput();
+
+        owner.element.addEventListener('input', owner.onChangeListener);
+        owner.element.addEventListener('keydown', owner.onKeyDownListener);
+        owner.element.addEventListener('focus', owner.onFocusListener);
+        owner.element.addEventListener('cut', owner.onCutListener);
+        owner.element.addEventListener('copy', owner.onCopyListener);
+
+
+        owner.initPhoneFormatter();
+        owner.initDateFormatter();
+        owner.initTimeFormatter();
+        owner.initNumeralFormatter();
+
+        // avoid touch input field if value is null
+        // otherwise Firefox will add red box-shadow for <input required />
+        if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) {
+            owner.onInput(pps.initValue);
+        }
+    },
+
+    initSwapHiddenInput: function () {
+        var owner = this, pps = owner.properties;
+        if (!pps.swapHiddenInput) return;
+
+        var inputFormatter = owner.element.cloneNode(true);
+        owner.element.parentNode.insertBefore(inputFormatter, owner.element);
+
+        owner.elementSwapHidden = owner.element;
+        owner.elementSwapHidden.type = 'hidden';
+
+        owner.element = inputFormatter;
+        owner.element.id = '';
+    },
+
+    initNumeralFormatter: function () {
+        var owner = this, pps = owner.properties;
+
+        if (!pps.numeral) {
+            return;
+        }
+
+        pps.numeralFormatter = new Cleave.NumeralFormatter(
+            pps.numeralDecimalMark,
+            pps.numeralIntegerScale,
+            pps.numeralDecimalScale,
+            pps.numeralThousandsGroupStyle,
+            pps.numeralPositiveOnly,
+            pps.stripLeadingZeroes,
+            pps.prefix,
+            pps.signBeforePrefix,
+            pps.tailPrefix,
+            pps.delimiter
+        );
+    },
+
+    initTimeFormatter: function() {
+        var owner = this, pps = owner.properties;
+
+        if (!pps.time) {
+            return;
+        }
+
+        pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat);
+        pps.blocks = pps.timeFormatter.getBlocks();
+        pps.blocksLength = pps.blocks.length;
+        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
+    },
+
+    initDateFormatter: function () {
+        var owner = this, pps = owner.properties;
+
+        if (!pps.date) {
+            return;
+        }
+
+        pps.dateFormatter = new Cleave.DateFormatter(pps.datePattern, pps.dateMin, pps.dateMax);
+        pps.blocks = pps.dateFormatter.getBlocks();
+        pps.blocksLength = pps.blocks.length;
+        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
+    },
+
+    initPhoneFormatter: function () {
+        var owner = this, pps = owner.properties;
+
+        if (!pps.phone) {
+            return;
+        }
+
+        // Cleave.AsYouTypeFormatter should be provided by
+        // external google closure lib
+        try {
+            pps.phoneFormatter = new Cleave.PhoneFormatter(
+                new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode),
+                pps.delimiter
+            );
+        } catch (ex) {
+            throw new Error('[cleave.js] Please include phone-type-formatter.{country}.js lib');
+        }
+    },
+
+    onKeyDown: function (event) {
+        var owner = this,
+            charCode = event.which || event.keyCode;
+
+        owner.lastInputValue = owner.element.value;
+        owner.isBackward = charCode === 8;
+    },
+
+    onChange: function (event) {
+        var owner = this, pps = owner.properties,
+            Util = Cleave.Util;
+
+        owner.isBackward = owner.isBackward || event.inputType === 'deleteContentBackward';
+
+        var postDelimiter = Util.getPostDelimiter(owner.lastInputValue, pps.delimiter, pps.delimiters);
+
+        if (owner.isBackward && postDelimiter) {
+            pps.postDelimiterBackspace = postDelimiter;
+        } else {
+            pps.postDelimiterBackspace = false;
+        }
+
+        this.onInput(this.element.value);
+    },
+
+    onFocus: function () {
+        var owner = this,
+            pps = owner.properties;
+        owner.lastInputValue = owner.element.value;
+
+        if (pps.prefix && pps.noImmediatePrefix && !owner.element.value) {
+            this.onInput(pps.prefix);
+        }
+
+        Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
+    },
+
+    onCut: function (e) {
+        if (!Cleave.Util.checkFullSelection(this.element.value)) return;
+        this.copyClipboardData(e);
+        this.onInput('');
+    },
+
+    onCopy: function (e) {
+        if (!Cleave.Util.checkFullSelection(this.element.value)) return;
+        this.copyClipboardData(e);
+    },
+
+    copyClipboardData: function (e) {
+        var owner = this,
+            pps = owner.properties,
+            Util = Cleave.Util,
+            inputValue = owner.element.value,
+            textToCopy = '';
+
+        if (!pps.copyDelimiter) {
+            textToCopy = Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters);
+        } else {
+            textToCopy = inputValue;
+        }
+
+        try {
+            if (e.clipboardData) {
+                e.clipboardData.setData('Text', textToCopy);
+            } else {
+                window.clipboardData.setData('Text', textToCopy);
+            }
+
+            e.preventDefault();
+        } catch (ex) {
+            //  empty
+        }
+    },
+
+    onInput: function (value) {
+        var owner = this, pps = owner.properties,
+            Util = Cleave.Util;
+
+        // case 1: delete one more character "4"
+        // 1234*| -> hit backspace -> 123|
+        // case 2: last character is not delimiter which is:
+        // 12|34* -> hit backspace -> 1|34*
+        // note: no need to apply this for numeral mode
+        var postDelimiterAfter = Util.getPostDelimiter(value, pps.delimiter, pps.delimiters);
+        if (!pps.numeral && pps.postDelimiterBackspace && !postDelimiterAfter) {
+            value = Util.headStr(value, value.length - pps.postDelimiterBackspace.length);
+        }
+
+        // phone formatter
+        if (pps.phone) {
+            if (pps.prefix && (!pps.noImmediatePrefix || value.length)) {
+                pps.result = pps.prefix + pps.phoneFormatter.format(value).slice(pps.prefix.length);
+            } else {
+                pps.result = pps.phoneFormatter.format(value);
+            }
+            owner.updateValueState();
+
+            return;
+        }
+
+        // numeral formatter
+        if (pps.numeral) {
+            // Do not show prefix when noImmediatePrefix is specified
+            // This mostly because we need to show user the native input placeholder
+            if (pps.prefix && pps.noImmediatePrefix && value.length === 0) {
+                pps.result = '';
+            } else {
+                pps.result = pps.numeralFormatter.format(value);
+            }
+            owner.updateValueState();
+
+            return;
+        }
+
+        // date
+        if (pps.date) {
+            value = pps.dateFormatter.getValidatedDate(value);
+        }
+
+        // time
+        if (pps.time) {
+            value = pps.timeFormatter.getValidatedTime(value);
+        }
+
+        // strip delimiters
+        value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters);
+
+        // strip prefix
+        value = Util.getPrefixStrippedValue(value, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix);
+
+        // strip non-numeric characters
+        value = pps.numericOnly ? Util.strip(value, /[^\d]/g) : value;
+
+        // convert case
+        value = pps.uppercase ? value.toUpperCase() : value;
+        value = pps.lowercase ? value.toLowerCase() : value;
+
+        // prevent from showing prefix when no immediate option enabled with empty input value
+        if (pps.prefix) {
+            if (pps.tailPrefix) {
+                value = value + pps.prefix;
+            } else {
+                value = pps.prefix + value;
+            }
+
+
+            // no blocks specified, no need to do formatting
+            if (pps.blocksLength === 0) {
+                pps.result = value;
+                owner.updateValueState();
+
+                return;
+            }
+        }
+
+        // update credit card props
+        if (pps.creditCard) {
+            owner.updateCreditCardPropsByValue(value);
+        }
+
+        // strip over length characters
+        value = Util.headStr(value, pps.maxLength);
+
+        // apply blocks
+        pps.result = Util.getFormattedValue(
+            value,
+            pps.blocks, pps.blocksLength,
+            pps.delimiter, pps.delimiters, pps.delimiterLazyShow
+        );
+
+        owner.updateValueState();
+    },
+
+    updateCreditCardPropsByValue: function (value) {
+        var owner = this, pps = owner.properties,
+            Util = Cleave.Util,
+            creditCardInfo;
+
+        // At least one of the first 4 characters has changed
+        if (Util.headStr(pps.result, 4) === Util.headStr(value, 4)) {
+            return;
+        }
+
+        creditCardInfo = Cleave.CreditCardDetector.getInfo(value, pps.creditCardStrictMode);
+
+        pps.blocks = creditCardInfo.blocks;
+        pps.blocksLength = pps.blocks.length;
+        pps.maxLength = Util.getMaxLength(pps.blocks);
+
+        // credit card type changed
+        if (pps.creditCardType !== creditCardInfo.type) {
+            pps.creditCardType = creditCardInfo.type;
+
+            pps.onCreditCardTypeChanged.call(owner, pps.creditCardType);
+        }
+    },
+
+    updateValueState: function () {
+        var owner = this,
+            Util = Cleave.Util,
+            pps = owner.properties;
+
+        if (!owner.element) {
+            return;
+        }
+
+        var endPos = owner.element.selectionEnd;
+        var oldValue = owner.element.value;
+        var newValue = pps.result;
+
+        endPos = Util.getNextCursorPosition(endPos, oldValue, newValue, pps.delimiter, pps.delimiters);
+
+        // fix Android browser type="text" input field
+        // cursor not jumping issue
+        if (owner.isAndroid) {
+            window.setTimeout(function () {
+                owner.element.value = newValue;
+                Util.setSelection(owner.element, endPos, pps.document, false);
+                owner.callOnValueChanged();
+            }, 1);
+
+            return;
+        }
+
+        owner.element.value = newValue;
+        if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue();
+
+        Util.setSelection(owner.element, endPos, pps.document, false);
+        owner.callOnValueChanged();
+    },
+
+    callOnValueChanged: function () {
+        var owner = this,
+            pps = owner.properties;
+
+        pps.onValueChanged.call(owner, {
+            target: {
+                name: owner.element.name,
+                value: pps.result,
+                rawValue: owner.getRawValue()
+            }
+        });
+    },
+
+    setPhoneRegionCode: function (phoneRegionCode) {
+        var owner = this, pps = owner.properties;
+
+        pps.phoneRegionCode = phoneRegionCode;
+        owner.initPhoneFormatter();
+        owner.onChange();
+    },
+
+    setRawValue: function (value) {
+        var owner = this, pps = owner.properties;
+
+        value = value !== undefined && value !== null ? value.toString() : '';
+
+        if (pps.numeral) {
+            value = value.replace('.', pps.numeralDecimalMark);
+        }
+
+        pps.postDelimiterBackspace = false;
+
+        owner.element.value = value;
+        owner.onInput(value);
+    },
+
+    getRawValue: function () {
+        var owner = this,
+            pps = owner.properties,
+            Util = Cleave.Util,
+            rawValue = owner.element.value;
+
+        if (pps.rawValueTrimPrefix) {
+            rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix);
+        }
+
+        if (pps.numeral) {
+            rawValue = pps.numeralFormatter.getRawValue(rawValue);
+        } else {
+            rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
+        }
+
+        return rawValue;
+    },
+
+    getISOFormatDate: function () {
+        var owner = this,
+            pps = owner.properties;
+
+        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
+    },
+
+    getISOFormatTime: function () {
+        var owner = this,
+            pps = owner.properties;
+
+        return pps.time ? pps.timeFormatter.getISOFormatTime() : '';
+    },
+
+    getFormattedValue: function () {
+        return this.element.value;
+    },
+
+    destroy: function () {
+        var owner = this;
+
+        owner.element.removeEventListener('input', owner.onChangeListener);
+        owner.element.removeEventListener('keydown', owner.onKeyDownListener);
+        owner.element.removeEventListener('focus', owner.onFocusListener);
+        owner.element.removeEventListener('cut', owner.onCutListener);
+        owner.element.removeEventListener('copy', owner.onCopyListener);
+    },
+
+    toString: function () {
+        return '[Cleave Object]';
+    }
+};
+
+Cleave.NumeralFormatter = NumeralFormatter_1;
+Cleave.DateFormatter = DateFormatter_1;
+Cleave.TimeFormatter = TimeFormatter_1;
+Cleave.PhoneFormatter = PhoneFormatter_1;
+Cleave.CreditCardDetector = CreditCardDetector_1;
+Cleave.Util = Util_1;
+Cleave.DefaultProperties = DefaultProperties_1;
+
+// for angular directive
+((typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window)['Cleave'] = Cleave;
+
+// CommonJS
+var Cleave_1 = Cleave;
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+}
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroFormValidation {
+  constructor() {
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  /**
+   * Determines the validity state of the element based on the common attribute restrictions (pattern).
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  validateAttributes(elem) {
+    if (elem.pattern) {
+      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
+
+      if (!pattern.test(elem.value)) {
+        elem.validity = 'badInput';
+        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+      }
+    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+      elem.validity = 'tooShort';
+      elem.setCustomValidity = elem.setCustomValidityTooShort || '';
+    } else if (elem.value && elem.value.length > elem.maxLength) {
+      elem.validity = 'tooLong';
+      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
+    }
+  }
+
+  /**
+   * Determines the validity state of the element based on the type attribute.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  validateType(elem) {
+    if (elem.hasAttribute('type')) {
+      if (elem.type === 'email') {
+        const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
+
+        if (!elem.value.match(emailRegex)) {
+          elem.validity = 'badInput';
+          elem.setCustomValidity = elem.setCustomValidityForType || '';
+        }
+      } else if (elem.type === 'credit-card') {
+        if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
+          elem.validity = 'tooShort';
+          elem.setCustomValidity = elem.setCustomValidityForType || '';
+        }
+      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+        if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
+          elem.validity = 'rangeOverflow';
+          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+        }
+
+        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+          elem.validity = 'rangeUnderflow';
+          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+        }
+
+      } else if (elem.type === 'month-day-year' ||
+                 elem.type === 'month-year' ||
+                 elem.type === 'month-fullYear' ||
+                 elem.type === 'year-month-day'
+      ) {
+        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+          elem.validity = 'tooShort';
+          elem.setCustomValidity = elem.setCustomValidityForType || '';
+        } else {
+          const valueDate = new Date(elem.value);
+
+          // validate max
+          if (elem.max !== undefined) {
+            const maxDate = new Date(elem.max);
+
+            if (valueDate > maxDate) {
+              elem.validity = 'rangeOverflow';
+              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+            }
+          }
+
+          // validate min
+          if (elem.min) {
+            const minDate = new Date(elem.min);
+
+            if (valueDate < minDate) {
+              elem.validity = 'rangeUnderflow';
+              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Determines the validity state of the element.
+   * @param {object} elem - HTML element to validate.
+   * @param {boolean} force - Boolean that forces validation to run.
+   * @returns {void}
+   */
+  validate(elem, force) {
+    this.getInputElements(elem);
+    this.getAuroInputs(elem);
+
+    // Validate only if noValidate is not true and the input does not have focus
+    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+
+    if (elem.hasAttribute('error')) {
+      elem.validity = 'customError';
+      elem.setCustomValidity = elem.error;
+    } else if (validationShouldRun) {
+      elem.validity = 'valid';
+      elem.setCustomValidity = '';
+
+      /**
+       * Only validate once we interact with the datepicker
+       * elem.value === undefined is the initial state pre-interaction.
+       *
+       * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
+       */
+
+      let hasValue = elem.value && elem.value.length > 0;
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
+      if (this.auroInputElements && this.auroInputElements.length === 2) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+          hasValue = false;
+        }
+      }
+
+      if (!hasValue && elem.required) {
+        elem.validity = 'valueMissing';
+        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+        this.validateType(elem);
+        this.validateAttributes(elem);
+      }
+    }
+
+    if (this.auroInputElements && this.auroInputElements.length > 0) {
+      elem.validity = this.auroInputElements[0].validity;
+      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+
+      if (elem.validity === 'valid') {
+        if (this.auroInputElements.length > 1) {
+          elem.validity = this.auroInputElements[1].validity;
+          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
+        }
+      }
+    }
+
+    if (validationShouldRun || elem.hasAttribute('error')) {
+      if (elem.validity && elem.validity !== 'valid') {
+        elem.isValid = false;
+
+        // Use the validity message override if it is declared
+        if (elem.ValidityMessageOverride) {
+          elem.setCustomValidity = elem.ValidityMessageOverride;
+        }
+      } else {
+        elem.isValid = true;
+      }
+
+      this.getErrorMessage(elem);
+
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
+  }
+
+  /**
+   * Gets all the HTML5 `inputs` in the element shadow DOM.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  getInputElements(elem) {
+    this.inputElements = elem.renderRoot.querySelectorAll('input');
+  }
+
+  /**
+   * Gets all the `auro-inputs` in the element shadow DOM.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  getAuroInputs(elem) {
+    this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]');
+  }
+
+  /**
+   * Return appropriate error message.
+   * @private
+   * @param {object} elem - HTML element to validate.
+   * @returns {void}
+   */
+  getErrorMessage(elem) {
+    if (elem.validity !== 'valid') {
+      if (elem.setCustomValidity) {
+        elem.errorMessage = elem.setCustomValidity;
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+        const input = elem.renderRoot.querySelector('input');
+
+        if (input.validationMessage.length > 0) {
+          elem.errorMessage = input.validationMessage;
+        }
+      } else if (this.inputElements && this.inputElements.length > 0) {
+        const firstInput = this.inputElements[0];
+
+        if (firstInput.validationMessage.length > 0) {
+          elem.errorMessage = firstInput.validationMessage;
+        } else if (this.inputElements.length === 2) {
+          const secondInput = this.inputElements[1];
+
+          if (secondInput.validationMessage.length > 0) {
+            elem.errorMessage = secondInput.validationMessage;
+          }
+        }
+      }
+    } else {
+      elem.errorMessage = undefined;
+    }
+  }
+}
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * Auro-input provides users a way to enter data into a text field.
+ *
+ * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position.
+ * @attr {String}  autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]
+ * @attr {String}  autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+ * @attr {String}  autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box.
+ * @attr {Boolean} bordered - Applies bordered UI variant.
+ * @attr {Boolean} borderless - Applies borderless UI variant.
+ * @attr {Boolean} disabled - If set, disables the input.
+ * @attr {String}  error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @prop {String}  errorMessage - Contains the help text message for the current validity error.
+ * @attr {String}  helpText - Deprecated, see `slot`.
+ * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
+ * @attr {String}  id - Sets the unique ID of the element.
+ * @attr {String}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
+ * @attr {String}  label - Deprecated, see `slot`.
+ * @attr {String}  lang - defines the language of an element.
+ * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+ * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {Number}  minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`.
+ * @attr {String}  name - Populates the `name` attribute on the input.
+ * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
+ * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically.
+ * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
+ * @attr {String}  pattern - Specifies a regular expression the form control's value should match.
+ * @attr {String}  placeholder - Define custom placeholder text, only supported by date input formats.
+ * @attr {String}  setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String}  setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
+ * @attr {String}  setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
+ * @attr {String}  setCustomValidityBadInput - Custom help text message to display when validity = `badInput`.
+ * @attr {String}  setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`.
+ * @attr {String}  setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`.
+ * @attr {String}  setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails.
+ * @attr {String}  setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`.
+ * @attr {String}  setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`.
+ * @attr {String}  spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+ * @attr {String}  type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`.
+ * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input.
+ * @attr {String}  validity - Specifies the `validityState` this element is in.
+ * @attr {String}  value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
+ *
+ * @slot helptext - Sets the help text displayed below the input.
+ * @slot label - Sets the label text for the input.
+ *
+ * @csspart wrapper - Use for customizing the style of the root element
+ * @csspart label - Use for customizing the style of the label element
+ * @csspart helpText - Use for customizing the style of the helpText element
+ * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
+ * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
+ * @event input - Event fires when the value of an `auro-input` has been changed.
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
+ */
+
+class BaseInput extends r {
+
+  constructor() {
+    super();
+
+    this.isValid = false;
+
+    this.icon = false;
+    this.disabled = false;
+    this.required = false;
+    this.noValidate = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.maxLength = undefined;
+    this.minLength = undefined;
+    this.label = 'Input label is undefined';
+    this.activeLabel = false;
+
+    this.setCustomValidityForType = undefined;
+  }
+
+  /**
+   * Internal Defaults.
+   * @private
+   * @returns {void}
+   */
+  privateDefaults() {
+    this.validation = new AuroFormValidation();
+    this.inputIconName = undefined;
+    this.showPassword = false;
+    this.validationCCLength = undefined;
+    this.hasValue = false;
+
+    this.allowedInputTypes = [
+      "text",
+      "email",
+      "password",
+      "credit-card",
+      "month-day-year",
+      "year-month-day",
+      "month-year"
+    ];
+
+    this.dateInputTypes = [
+      "month-day-year",
+      "year-month-day",
+      "month-year",
+      "month-fullYear",
+      "month",
+      "year",
+      "fullYear"
+    ];
+
+    this.autoFormattingTypes = [
+      'credit-card',
+      'month-day-year',
+      'month-year',
+      'month-fullyear',
+      'year-month-day'
+    ];
+
+    /**
+     * Credit Card is not included as this caused cursor placement issues.
+     * The Safari issue.
+     */
+    this.setSelectionInputTypes = [
+      "text",
+      "password",
+      "email",
+    ];
+
+    const idLength = 36;
+    const idSubstrEnd = 8;
+    const idSubstrStart = 2;
+
+    this.uniqueId = Math.random()
+      .toString(idLength)
+      .substring(idSubstrStart, idSubstrEnd);
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      id:                      { type: String },
+      label:                   { type: String },
+      name:                    { type: String },
+      type:                    { type: String,
+        reflect: true },
+      value:                   { type: String },
+      lang:                    { type: String },
+      pattern:                 {
+        type: String,
+        reflect: true
+      },
+      icon:                    { type: Boolean },
+      disabled:                { type: Boolean },
+      required:                { type: Boolean },
+      noValidate:              { type: Boolean },
+      helpText:                { type: String },
+      spellcheck:              { type: String },
+      autocorrect:             { type: String },
+      autocapitalize:          { type: String },
+      autocomplete:            {
+        type: String,
+        reflect: true
+      },
+      placeholder:             { type: String },
+      activeLabel:             {
+        type: Boolean,
+        reflect: true
+      },
+      max:               { type: String },
+      min:               { type: String },
+      maxLength:               { type: Number },
+      minLength:               { type: Number },
+
+      /**
+       * @ignore
+       */
+      showPassword:            { state: true },
+      validateOnInput:         { type: Boolean },
+      readonly:                { type: Boolean },
+      error:                   {
+        type: String,
+        reflect: true
+      },
+      errorMessage:            { type: String },
+      isValid: {
+        type: String,
+        reflect: true
+      },
+      validity:                {
+        type: String,
+        reflect: true
+      },
+      setCustomValidity:               { type: String },
+      setCustomValidityCustomError:    { type: String },
+      setCustomValidityValueMissing:   { type: String },
+      setCustomValidityBadInput:       { type: String },
+      setCustomValidityTooShort:       { type: String },
+      setCustomValidityTooLong:        { type: String },
+      setCustomValidityRangeOverflow:  { type: String},
+      setCustomValidityRangeUnderflow: { type: String},
+      customValidityTypeEmail:         { type: String }
+    };
+  }
+
+  static get styles() {
+    return [
+      i$2`${styleCss$3}`,
+      i$2`${colorCss$3}`,
+      i$2`${tokensCss$3}`
+    ];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.privateDefaults();
+
+    notifyOnLangChange(this);
+
+    // Process auto-formatting if defined for CleaveJS
+    if (this.type) {
+      let config = null;
+
+      // Set config for credit card
+      switch (this.type) {
+        case 'number':
+          config = {
+            numeral: true,
+            delimiter: ''
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'credit-card':
+          config = {
+            creditCard: true
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month-day-year':
+          config = {
+            date: true,
+            delimiter: '/',
+            datePattern: [
+              'm',
+              'd',
+              'Y'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'year-month-day':
+          config = {
+            date: true,
+            delimiter: '/',
+            datePattern: [
+              'Y',
+              'm',
+              'd'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month-year':
+          config = {
+            date: true,
+            datePattern: [
+              'm',
+              'y'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month-fullYear':
+          config = {
+            date: true,
+            datePattern: [
+              'm',
+              'Y'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'fullYear':
+          config = {
+            date: true,
+            datePattern: ['Y']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'year':
+          config = {
+            date: true,
+            datePattern: ['y']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month':
+          config = {
+            date: true,
+            datePattern: ['m']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+          // Do nothing
+      }
+
+      // initialize CleaveJS if we have a defined config for the requested format
+      if (config) {
+        // eslint-disable-next-line no-unused-vars
+        new Cleave_1(this, config);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    stopNotifyingOnLangChange(this);
+  }
+
+  firstUpdated() {
+    // add attribute for query selectors when auro-input is registered under a custom name
+    if (this.tagName.toLowerCase() !== 'auro-input') {
+      this.setAttribute('auro-input', true);
+    }
+
+    this.inputElement = this.renderRoot.querySelector('input');
+    this.labelElement = this.shadowRoot.querySelector('label');
+
+    // use validity message override if declared when initializing the component
+    if (this.hasAttribute('setCustomValidity')) {
+      this.ValidityMessageOverride = this.setCustomValidity;
+    }
+
+    // if setCustomValidityForType is not set, use our default
+    if (!this.setCustomValidityForType) {
+      if (this.type === 'password') {
+        this.setCustomValidityForType = i18n(this.lang, 'password');
+      } else if (this.type === 'credit-card') {
+        this.setCustomValidityForType = i18n(this.lang, 'creditcard');
+      } else if (this.type === 'email') {
+        this.setCustomValidityForType = i18n(this.lang, 'email');
+      } else if (this.type === 'month-day-year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY');
+      } else if (this.type === 'month-year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMMYY');
+      } else if (this.type === 'month-fullyear') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY');
+      } else if (this.type === 'year-month-day') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD');
+      } else if (this.type === 'year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYY');
+      } else if (this.type === 'fullYear') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYYYY');
+      } else if (this.type === 'month') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMM');
+      }
+    }
+
+    this.addEventListener('keydown', (evt) => {
+      if (this.autoFormattingTypes.includes(this.type)) {
+        if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
+          if (evt.key.length === 1) {
+            const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart;
+
+            if (numCharSelected > 1) {
+              this.cursorPosition = this.inputElement.selectionStart + 1;
+            } else if (numCharSelected === 1) {
+              this.cursorPosition = this.inputElement.selectionEnd;
+            } else {
+              this.cursorPosition = this.inputElement.selectionEnd + 1;
+            }
+          } else if (evt.key === 'Backspace') {
+            this.cursorPosition = this.inputElement.selectionEnd - 1;
+          } else if (evt.key === 'Delete') {
+            this.cursorPosition = this.inputElement.selectionEnd;
+          }
+        }
+
+        if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") {
+          if (evt.key === 'ArrowUp') {
+            this.cursorPosition = 0;
+          } else if (evt.key === 'ArrowDown') {
+            this.cursorPosition = this.value.length;
+          } else if (evt.key === 'ArrowLeft') {
+            this.cursorPosition = this.inputElement.selectionEnd - 1;
+          } else if (evt.key === 'ArrowRight') {
+            this.cursorPosition = this.inputElement.selectionEnd + 1;
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (this.type === 'password') {
+      this.spellcheck = 'false';
+    }
+
+    if (this.spellcheck === 'false') {
+      this.autocorrect = 'off';
+      this.autocapitalize = 'none';
+    } else {
+      this.autocorrect = this.autocorrect ? this.autocorrect : undefined;
+      this.autocapitalize = undefined;
+    }
+
+    if (changedProperties.has('readonly')) {
+      if (this.readonly) {
+        this.inputElement.setAttribute('readonly', true);
+        this.inputElement.setAttribute('aria-readonly', true);
+      } else {
+        this.inputElement.removeAttribute('readonly');
+        this.inputElement.removeAttribute('aria-readonly');
+      }
+    }
+
+    if (changedProperties.has('type')) {
+      this.configureDataForType();
+    }
+
+    if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+        this.requestUpdate();
+      } else {
+        this.hasValue = false;
+        this.requestUpdate();
+      }
+
+      if (this.value !== this.inputElement.value) {
+        if (this.value) {
+          this.inputElement.value = this.value;
+        } else {
+          this.inputElement.value = '';
+        }
+
+        if (!this.shadowRoot.contains(this.getActiveElement())) {
+          this.validation.validate(this);
+        }
+
+        this.notifyValueChanged();
+      }
+      this.autoFormatHandling();
+    }
+
+    if (changedProperties.has('error')) {
+      this.validation.validate(this, true);
+    }
+
+    if (changedProperties.has('validity')) {
+      this.notifyValidityChange();
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void} Handles cursor position when input auto-formats.
+   */
+  autoFormatHandling() {
+    if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) {
+      if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') {
+        this.cursorPosition += 1;
+      } else if (this.dateInputTypes.includes(this.type)) {
+        const divider = '/';
+        const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider;
+
+        if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) {
+          this.cursorPosition += 1;
+        } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider
+                  && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak
+          this.cursorPosition += 2;
+        }
+      }
+
+      this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition);
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void} Notify validity state changed via event.
+   */
+  notifyValidityChange() {
+    this.dispatchEvent(new CustomEvent('auroInput-validityChange', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  /**
+   * @private
+   * @returns {string}
+   */
+  definePattern() {
+    if (this.type === 'credit-card' && !this.noValidate && this.maxLength) {
+      return `.{${this.maxLength},${this.maxLength}}`;
+    }
+
+    return this.pattern;
+  }
+
+  /**
+   * Function to set element focus.
+   * @private
+   * @return {void}
+   */
+  focus() {
+    this.inputElement.focus();
+  }
+
+  /**
+   * Required to convert SVG icons from data to HTML string.
+   * @private
+   * @param {string} icon HTML string for requested icon.
+   * @returns {object} Appended HTML for SVG.
+   */
+  getIconAsHtml(icon) {
+    const dom = new DOMParser().parseFromString(icon.svg, 'text/html');
+
+    return dom.body.firstChild;
+  }
+
+  /**
+   * Sends event notifying that the input has changed it's value.
+   * @private
+   * @returns {void}
+   */
+  notifyValueChanged() {
+    let inputEvent = null;
+
+    inputEvent = new Event('input', {
+      bubbles: true,
+      composed: true,
+    });
+
+    // Dispatched event to alert outside shadow DOM context of event firing.
+    this.dispatchEvent(inputEvent);
+  }
+
+  /**
+   * Handles event of clearing input content by clicking the X icon.
+   * @private
+   * @return {void}
+   */
+  handleClickClear() {
+    this.inputElement.value = "";
+    this.value = "";
+    this.labelElement.classList.remove('inputElement-label--sticky');
+    this.focus();
+    this.validation.validate(this);
+    this.notifyValueChanged();
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  handleInput() {
+    // Prevent non-numeric characters from being entered on credit card fields.
+    if (this.type === 'credit-card') {
+      this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
+    }
+
+    // Sets value property to value of element value (el.value).
+    this.value = this.inputElement.value;
+
+    // Validation on blur or input.
+    if (this.validateOnInput) {
+      this.validation.validate(this);
+    }
+
+    // Prevents cursor jumping in Safari.
+    const { selectionStart } = this.inputElement;
+
+    if (this.setSelectionInputTypes.includes(this.type)) {
+      this.updateComplete.then(() => {
+        try {
+          this.inputElement.setSelectionRange(selectionStart, selectionStart);
+        } catch (error) { // eslint-disable-line
+          // do nothing
+        }
+      });
+    }
+  }
+
+  /**
+   * Function to support @focusin event.
+   * @private
+   * @return {void}
+   */
+  handleFocusin() {
+
+    /**
+     * The input is considered to be in it's initial state based on
+     * if this.value === undefined. The first time we interact with the
+     * input manually, by applying focusin, we need to flag the
+     * input as no longer in the initial state.
+     */
+    if (this.value === undefined) {
+      this.value = '';
+    }
+  }
+
+  /**
+   * Function to support @blur event.
+   * @private
+   * @return {void}
+   */
+  handleBlur() {
+    this.inputElement.scrollLeft = 100;
+
+    if (!this.noValidate) {
+      this.validation.validate(this);
+    }
+  }
+
+  /**
+   * Returns focused element, even if it's in the shadow DOM.
+   * @private
+   * @param {Object} root - Element to check for focus.
+   * @returns {Object}
+   */
+  getActiveElement(root = document) {
+    const activeEl = root.activeElement;
+
+    if (!activeEl) {
+      return null;
+    }
+
+    if (activeEl.shadowRoot) {
+      return this.getActiveElement(activeEl.shadowRoot);
+    }
+
+    return activeEl;
+  }
+
+  /**
+   * Public method force validation of input.
+   * @returns {void}
+   */
+  validate() {
+    this.validation.validate(this);
+  }
+
+
+  /**
+   * Sets configuration data used elsewhere based on the `type` attribute.
+   * @private
+   * @returns {void}
+   */
+  configureDataForType() {
+    if (this.type === 'month-day-year' || this.type === 'year-month-day') {
+      this.dateStrLength = 10;
+    } else if (this.type === 'month-year') {
+      this.dateStrLength = 5;
+    } else if (this.type === 'month-fullYear') {
+      this.dateStrLength = 7;
+    } else if (this.type === 'month' || this.type === 'year') {
+      this.dateStrLength = 2;
+    } else if (this.type === 'fullYear') {
+      this.dateStrLength = 4;
+    }
+  }
+
+  /**
+   * Validates against list of supported this.allowedInputTypes; return type=text if invalid request.
+   * @private
+   * @param {string} type Value entered into component prop.
+   * @returns {string} Iterates over allowed types array.
+   */
+  getInputType(type) {
+    if (this.allowedInputTypes.includes(type)) {
+      return type;
+    }
+
+    return "text";
+  }
+
+  /**
+   * Determines default help text string.
+   * @private
+   * @param {string} type Value entered into component prop.
+   * @returns {string} Evaluates pre-determined help text.
+   */
+  getHelpText(type) {
+    if (type === 'password') {
+      this.helpText = i18n(this.lang, 'password');
+    } else if (type === 'email') {
+      this.helpText = i18n(this.lang, 'email');
+    } else if (type === 'credit-card') {
+      this.helpText = i18n(this.lang, 'creditcard');
+    } else if (type === 'month-day-year') {
+      this.helpText = i18n(this.lang, 'dateMMDDYYYY');
+    } else if (type === 'month-year') {
+      this.helpText = i18n(this.lang, 'dateMMYY');
+    } else if (type === 'month-fullyear') {
+      this.helpText = i18n(this.lang, 'dateMMYYYY');
+    } else if (type === 'year-month-day') {
+      this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+    } else if (type === 'month') {
+      this.helpText = i18n(this.lang, 'dateMM');
+    } else if (type === 'year') {
+      this.helpText = i18n(this.lang, 'dateYY');
+    } else if (type === 'fullYear') {
+      this.helpText = i18n(this.lang, 'dateYYYY');
+    } else {
+      this.helpText = '';
+    }
+
+    return this.helpText;
+  }
+
+  /**
+   * Function to support show-password feature.
+   * @private
+   * @returns {void}
+   */
+  handleClickShowPassword() {
+    this.showPassword = !this.showPassword;
+    this.focus();
+  }
+
+  /**
+   * Support placeholder text.
+   * @private
+   * @returns {string}
+   */
+  getPlaceholder() {
+    if (this.type === 'month-day-year') {
+      return !this.placeholder ? 'MM/DD/YYYY' : this.placeholder;
+    } else if (this.type === 'month-year') {
+      return !this.placeholder ? 'MM/YY' : this.placeholder;
+    } else if (this.type === 'month-fullYear') {
+      return !this.placeholder ? 'MM/YYYY' : this.placeholder;
+    } else if (this.type === 'year-month-day') {
+      return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder;
+    } else if (this.type === 'year') {
+      return !this.placeholder ? 'YY' : this.placeholder;
+    } else if (this.type === 'fullYear') {
+      return !this.placeholder ? 'YYYY' : this.placeholder;
+    } else if (this.type === 'month') {
+      return !this.placeholder ? 'MM' : this.placeholder;
+    }
+
+    return o$2(this.placeholder);
+  }
+
+  /**
+   * Defines placement of input icon based on type, used with classMap.
+   * @private
+   * @returns {boolean}
+   */
+  defineInputIcon() {
+    if (this.icon && this.type === 'credit-card') {
+      return true;
+    } else if (this.dateInputTypes.includes(this.type)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Defines padding of input label based on type, used with classMap.
+   * @private
+   * @returns {boolean}
+   */
+  defineLabelPadding() {
+    if (this.icon && this.type === 'credit-card' && (this.value === "" || this.value === undefined)) {
+      return true;
+    } else if (this.dateInputTypes.includes(this.type)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // Functions specific to Credit Card component support
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+  /**
+   * Function to support credit-card feature type.
+   * @private
+   * @returns {void}
+   */
+  processCreditCard() {
+    const card = this.matchInputValueToCreditCard();
+
+    this.maxLength = card.formatLength;
+    this.minLength = card.formatMinLength;
+
+    this.setCustomValidity = card.setCustomValidity;
+
+    if (this.icon) {
+      this.inputIconName = card.cardIcon;
+    }
+  }
+
+  /**
+   * Function to support credit-card feature type.
+   * @private
+   * @returns {object} JSON with data for credit card formatting.
+   */
+  matchInputValueToCreditCard() {
+    const CreditCardValidationMessage = `${i18n(this.lang, 'validCard')}`;
+
+    const creditCardTypes = [
+      {
+        name: 'Airlines',
+        regex: /^(?<num>1|2)\d{0}/u,
+        formatMinLength: 17,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'credit-card'
+      },
+      {
+        name: 'Commercial',
+        regex: /^(?<num>2)\d{0}/u,
+        formatMinLength: 8,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'credit-card'
+      },
+      {
+        name: 'Alaska Commercial',
+        regex: /^(?<num>27)\d{0}/u,
+        formatMinLength: 8,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-alaska'
+      },
+      {
+        name: 'American Express',
+        regex: /^(?<num>34|37)\d{0}/u,
+        formatLength: 17,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-amex'
+      },
+      {
+        name: 'Diners club',
+        regex: /^(?<num>36|38)\d{0}/u,
+        formatLength: 16,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'credit-card'
+      },
+      {
+        name: 'Visa',
+        regex: /^(?<num>4)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-visa'
+      },
+      {
+        name: 'Alaska Airlines Visa',
+        regex: /^(?<num>4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-alaska'
+      },
+      {
+        name: 'Master Card',
+        regex: /^(?<num>5)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-mastercard'
+      },
+      {
+        name: 'Discover Card',
+        regex: /^(?<num>6)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-discover'
+      }
+    ];
+
+    let type = {
+      name: 'Default Card',
+      formatLength: 19,
+      setCustomValidity: CreditCardValidationMessage,
+      cardIcon: 'credit-card'
+    };
+
+    creditCardTypes.forEach((cardType) => {
+      if (cardType.regex.exec(this.value)) {
+        type = cardType;
+      }
+    });
+
+    this.validationCCLength = type.formatLength;
+
+    return type;
+  }
+}
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroDependencyVersioning {
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @private
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
+
+    return result;
+  }
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = i$4`${s$2(elementName)}`;
+
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
+    }
+
+    return tag;
+  }
+}
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+class AuroElement extends r {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
+  }
+
+  /**
+   * @private Function that determines state of aria-hidden
+   */
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
+  }
+}
+
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
+
+const _fetchMap = new Map();
+
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
+
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
+  }
+  return _fetchMap.get(uri);
+};
+
+var styleCss$2 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return i$2`
+      ${styleCss$2}
+    `;
+  }
+
+  /**
+   * Async function to fetch requested icon from npm CDN.
+   * @private
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   */
+  async fetchIcon(category, name) {
+    let iconHTML = '';
+
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
+    }
+
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+
+    return dom.body.querySelector('svg');
+  }
+
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
+
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+
+        this.svg = penDOM.body.firstChild;
+      }
+    }
+  }
+}
+
+var tokensCss$2 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+
+var colorCss$2 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
+ *
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
+ * @attr {Boolean} customColor - Removes primary selector.
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
+ * @attr {Boolean} label - Exposes content in slot as icon label.
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
+ * @attr {Boolean} error - Sets the icon to use the error style.
+ * @attr {Boolean} info - Sets the icon to use the info style.
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
+ * @attr {Boolean} success - Sets the icon to use the success style.
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
+ * @slot svg - Used for custom SVG content.
+ */
+
+// build the component class
+class AuroIcon extends BaseIcon {
+  constructor() {
+    super();
+
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+
+    this.privateDefaults();
+  }
+
+  /**
+   * Internal Defaults.
+   * @private
+   * @returns {void}
+   */
+  privateDefaults() {
+    this.accent = false;
+    this.customColor = false;
+    this.customSvg = false;
+    this.disabled = false;
+    this.emphasis = false;
+    this.error = false;
+    this.info = false;
+    this.label = false;
+    this.primary = false;
+    this.secondary = false;
+    this.subtle = false;
+    this.success = false;
+    this.tertiary = false;
+    this.warning = false;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      accent: {
+        type: Boolean,
+        reflect: true
+      },
+      ariaHidden: {
+        type: String,
+        reflect: true
+      },
+      category: {
+        type: String,
+        reflect: true
+      },
+      customColor: {
+        type: Boolean
+      },
+      customSvg: {
+        type: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      emphasis: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      info: {
+        type: Boolean,
+        reflect: true
+      },
+      label: {
+        type: Boolean,
+        reflect: true
+      },
+      name: {
+        type: String,
+        reflect: true
+      },
+      primary: {
+        type: Boolean,
+        reflect: true
+      },
+      secondary: {
+        type: Boolean,
+        reflect: true
+      },
+      subtle: {
+        type: Boolean,
+        reflect: true
+      },
+      success: {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary: {
+        type: Boolean,
+        reflect: true
+      },
+      uri: {
+        type: String
+      },
+      warning: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      i$2`${tokensCss$2}`,
+      i$2`${styleCss$2}`,
+      i$2`${colorCss$2}`
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
+   *
+   */
+  static register(name = "auro-icon") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+  }
+
+  /**
+   * @returns {void} Exposes CSS parts for styling from parent components.
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'svg:iconSvg');
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const a11y = {
+      'labelContainer': true,
+      'util_displayHiddenVisually': !this.label
+    };
+
+    const classes = {
+      'label': this.label
+    };
+
+    return x`
+      <div
+        class="${e$2(classes)}"
+        title="${o$2(this.title || undefined)}">
+        <span aria-hidden="${o$2(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x`
+              <slot name="svg"></slot>
+            ` : x`
+              ${this.svg}
+            `
+          }
+        </span>
+
+        <div class="${e$2(a11y)}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+var iconVersion = '6.1.1';
+
+var styleCss$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
+
+var colorCss$1 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
+
+var tokensCss$1 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
+
+var styleCss = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
+
+var colorCss = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
+
+var tokensCss = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-loader element is an easy to use animated loader component.
+ *
+ * @attr {Boolean} pulse - sets loader type
+ * @attr {Boolean} ringworm - sets loader type
+ * @attr {Boolean} laser - sets loader type
+ * @attr {Boolean} orbit - sets loader type
+ * @attr {Boolean} white - sets color of loader to white
+ * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
+ * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
+ * @attr {Boolean} xs - sets size to extra small
+ * @attr {Boolean} sm - sets size to small
+ * @attr {Boolean} md - sets size to medium
+ * @attr {Boolean} lg - sets size to large
+ * @csspart element - apply style to adjust speed of animation
+ */
+
+// build the component class
+class AuroLoader extends r {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+    /**
+     * @private
+     */
+    this.mdCount = 3;
+
+    /**
+     * @private
+     */
+    this.smCount = 2;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    this.orbit = false;
+    this.ringworm = false;
+    this.laser = false;
+    this.pulse = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      pulse: {
+        type: Boolean,
+        reflect: true
+      },
+      orbit: {
+        type: Boolean,
+        reflect: true
+      },
+      ringworm: {
+        type: Boolean,
+        reflect: true
+      },
+      laser: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      i$2`${styleCss}`,
+      i$2`${colorCss}`,
+      i$2`${tokensCss}`
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-loader"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
+   *
+   */
+  static register(name = "auro-loader") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  /**
+   * @private
+   * @returns {Array} Numbered array for template map.
+   */
+  defineTemplate() {
+    let nodes = Array.from(Array(this.mdCount).keys());
+
+    if (this.orbit || this.laser) {
+      nodes = Array.from(Array(this.smCount).keys());
+    } else if (this.ringworm) {
+      nodes = Array.from(Array(0).keys());
+    }
+
+    return nodes;
+  }
+
+  // When using auroElement, use the following attribute and function when hiding content from screen readers.
+  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return x`
+      ${this.defineTemplate().map((idx) => x`
+        <span part="element" class="loader node-${idx}"></span>
+      `)}
+
+      <div class="no-animation">Loading...</div>
+
+      ${this.ringworm ? x`
+        <svg  part="element" class="circular" viewBox="25 25 50 50">
+          <circle class="path" cx="50" cy="50" r="20" fill="none"/>
+        </svg>`
+        : ``
+      }
+    `;
+  }
+}
+
+var loaderVersion = '3.1.1';
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
+ * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
+ * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
+ * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-button
+ * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
+ * @attr {Boolean} slim - Set value for slim version of auro-button
+ * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
+ * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
+ * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
+ * @attr {String} id - Set the unique ID of an element.
+ * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
+ * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
+ * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
+ * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
+ * @attr {Boolean} secondary - DEPRECATED
+ * @attr {Boolean} tertiary - DEPRECATED
+ * @prop {Boolean} ready - When false the component API should not be called.
+ * @event auroButton-ready - Notifies that the component has finished initializing.
+ * @slot - Default slot for the text of the button.
+ * @slot icon - Slot to provide auro-icon for the button.
+ * @csspart button - Apply CSS to HTML5 button.
+ * @csspart loader - Apply CSS to auro-loader.
+ * @csspart text - Apply CSS to text slot.
+ * @csspart icon - Apply CSS to icon slot.
+ */
+
+/* eslint-disable lit/no-invalid-html, lit/binding-positions */
+
+class AuroButton extends r {
+
+  constructor() {
+    super();
+    this.autofocus = false;
+    this.disabled = false;
+    this.iconOnly = false;
+    this.loading = false;
+    this.onDark = false;
+    this.ready = false;
+    this.secondary = false;
+    this.tertiary = false;
+    this.rounded = false;
+    this.slim = false;
+    this.fluid = false;
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+  }
+
+  static get styles() {
+    return [
+      tokensCss$1,
+      styleCss$1,
+      colorCss$1
+    ];
+  }
+
+  static get properties() {
+    return {
+      autofocus:        {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:         {
+        type: Boolean,
+        reflect: true
+      },
+      secondary:         {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary:         {
+        type: Boolean,
+        reflect: true
+      },
+      fluid:         {
+        type: Boolean,
+        reflect: true
+      },
+      iconOnly: {
+        type: Boolean,
+        reflect: true
+      },
+      loading:          {
+        type: Boolean,
+        reflect: true
+      },
+      onDark:           {
+        type: Boolean,
+        reflect: true
+      },
+      rounded: {
+        type: Boolean,
+        reflect: true
+      },
+      slim: {
+        type: Boolean,
+        reflect: true
+      },
+      arialabel:        {
+        type: String,
+        reflect: true
+      },
+      arialabelledby:   {
+        type: String,
+        reflect: true
+      },
+      title:            {
+        type: String,
+        reflect: true
+      },
+      type:             {
+        type: String,
+        reflect: true
+      },
+      value:            {
+        type: String,
+        reflect: true
+      },
+      variant:          {
+        type: String,
+        reflect: true
+      },
+      ready: { type: Boolean },
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-button"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroButton.register("custom-button") // this will register this element to <custom-button/>
+   *
+   */
+  static register(name = "auro-button") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
+  }
+
+  /**
+   * Internal method to apply focus to the HTML5 button.
+   * @private
+   * @returns {void}
+   */
+  focus() {
+    this.renderRoot.querySelector('button').focus();
+  }
+
+  /**
+   *  Marks the component as ready and sends event.
+   * @private
+   * @returns {void}
+   */
+  notifyReady() {
+    this.ready = true;
+
+    this.dispatchEvent(new CustomEvent('auroButton-ready', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  updated() {
+    // support the old `secondary` and `tertiary` attributes` that are deprecated
+    if (this.secondary) {
+      this.setAttribute('variant', 'secondary');
+    }
+
+    if (this.tertiary) {
+      this.setAttribute('variant', 'tertiary');
+    }
+  }
+
+  firstUpdated() {
+    this.notifyReady();
+  }
+
+  render() {
+    const classes = {
+      'util_insetLg--squish': true,
+      'auro-button': true,
+      'auro-button--rounded': this.rounded,
+      'auro-button--slim': this.slim,
+      'auro-button--iconOnly': this.iconOnly,
+      'auro-button--iconOnlySlim': this.iconOnly && this.slim,
+      'loading': this.loading
+    };
+
+    return u$3`
+      <button
+        part="button"
+        aria-label="${o$2(this.arialabel ? this.arialabel : undefined)}"
+        aria-labelledby="${o$2(this.arialabelledby ? this.arialabelledby : undefined)}"
+        ?autofocus="${this.autofocus}"
+        class="${e$2(classes)}"
+        ?disabled="${this.disabled || this.loading}"
+        ?onDark="${this.onDark}"
+        title="${o$2(this.title ? this.title : undefined)}"
+        name="${o$2(this.name ? this.name : undefined)}"
+        type="${o$2(this.type ? this.type : undefined)}"
+        variant="${o$2(this.variant ? this.variant : undefined)}"
+        .value="${o$2(this.value ? this.value : undefined)}"
+        @click="${() => {}}"
+      >
+        ${o$2(this.loading ? u$3`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
+
+        <span class="contentWrapper">
+          <span class="textSlot" part="text">
+            ${this.iconOnly ? undefined : u$3`<slot></slot>`}
+          </span>
+
+          <span part="icon">
+            <slot name="icon"></slot>
+          </span>
+        </span>
+      </button>
+    `;
+  }
+}
+
+var buttonVersion = '8.2.0';
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// build the component class
+class AuroInput extends BaseInput {
+  constructor() {
+    super();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-input"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroInput.register("custom-input") // this will register this element to <custom-input/>
+   *
+   */
+  static register(name = "auro-input") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroInput);
+  }
+
+  /**
+   * Function to determine if the input is meant to render an icon visualizing the input type.
+   * @private
+   * @returns {boolean} - Returns true if the input type is meant to render an icon.
+   */
+  hasTypeIcon() {
+    const typesWithIcons = [
+      'month-day-year',
+      'month-year',
+      'year-month-day',
+      'month-fullYear',
+      'month',
+      'year',
+      'fullYear'
+    ];
+
+    if (this.icon || typesWithIcons.includes(this.type)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  isDateType() {
+    let isDateType = false;
+
+    switch (this.type) {
+      case 'month-day-year':
+      case 'month-year':
+      case 'year-month-day':
+      case 'month-fullYear':
+      case 'month':
+      case 'year':
+      case 'fullYear':
+        isDateType = true;
+        break;
+    }
+
+    return isDateType;
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
+    const labelClasses = {
+      'is-disabled': this.disabled,
+      'withIcon': this.hasTypeIcon(),
+      'withValue': this.value && this.value.length > 0
+    };
+
+    return u$3`
+      <div class="wrapper" part="wrapper">
+        <div class="main">
+          <div class="typeIcon">
+            ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
+
+            <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
+               This should be cleaned up when auro-icon issue #31 is resolved. -->
+            ${this.inputIconName
+            ? c$2([this.inputIconName], (val) => val, (name) => u$3`
+              <${this.iconTag}
+                class="accentIcon"
+                category="payment"
+                name="${name}"
+                part="accentIcon"
+                ?disabled="${this.disabled}">
+              </${this.iconTag}>
+            `) : undefined
+            }
+
+            ${this.isDateType()
+            ? u$3`
+              <${this.iconTag}
+                class="accentIcon"
+                category="interface"
+                name="calendar"
+                part="accentIcon"
+                ?disabled="${this.disabled}">
+              </${this.iconTag}>`
+            : undefined
+            }
+          </div>
+          <label for=${this.id} class="${e$2(labelClasses)}" part="label">
+            <slot name="label">
+              ${this.label}
+            </slot>
+            ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
+          </label>
+          <input
+            @input="${this.handleInput}"
+            @focusin="${this.handleFocusin}"
+            @blur="${this.handleBlur}"
+            id="${this.id}"
+            name="${o$2(this.name)}"
+            type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
+            pattern="${o$2(this.definePattern())}"
+            maxlength="${o$2(this.maxLength ? this.maxLength : undefined)}"
+            minlength="${o$2(this.minLength ? this.minLength : undefined)}"
+            inputMode="${o$2(this.inputMode ? this.inputMode : undefined)}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            aria-describedby="${this.uniqueId}"
+            aria-invalid="${this.validity !== 'valid'}"
+            placeholder=${this.getPlaceholder()}
+            lang="${o$2(this.lang)}"
+            ?activeLabel="${this.activeLabel}"
+            spellcheck="${o$2(this.spellcheck ? this.spellcheck : undefined)}"
+            autocorrect="${o$2(this.autocorrect ? this.autocorrect : undefined)}"
+            autocapitalize="${o$2(this.autocapitalize ? this.autocapitalize : undefined)}"
+            autocomplete="${o$2(this.autocomplete ? this.autocomplete : undefined)}"
+            part="input"
+            />
+        </div>
+        <div
+          class="notificationIcons"
+          part="notificationIcons"
+          ?hasValue="${this.hasValue}">
+          ${this.validity && this.validity !== 'valid' ? u$3`
+            <div class="notification alertNotification">
+              <${this.iconTag}
+                category="alert"
+                name="error-stroke"
+                error>
+              </${this.iconTag}>
+            </div>
+          ` : undefined}
+          ${this.hasValue ? u$3`
+            ${this.type === 'password' ? u$3`
+              <div class="notification">
+                <${this.buttonTag}
+                  variant="flat"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  @click="${this.handleClickShowPassword}"
+                  class="notificationBtn passwordBtn">
+                  <${this.iconTag}
+                    category="interface"
+                    name="hide-password-stroke"
+                    customColor
+                    ?hidden=${!this.showPassword}>
+                  </${this.iconTag}>
+                  <${this.iconTag}
+                    category="interface"
+                    name="view-password-stroke"
+                    customColor
+                    ?hidden=${this.showPassword}>
+                  </${this.iconTag}>
+                </${this.buttonTag}>
+              </div>
+            ` : undefined}
+            ${!this.disabled && !this.readonly ? u$3`
+              <div class="notification">
+                <${this.buttonTag}
+                  variant="flat"
+                  class="notificationBtn clearBtn"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  @click="${this.handleClickClear}">
+                  <${this.iconTag}
+                    customColor
+                    category="interface"
+                    name="x-lg"
+                    >
+                  </${this.iconTag}>
+                </${this.buttonTag}>
+              </div>
+            ` : undefined}
+          ` : undefined}
+        </div>
+      </div>
+      <!-- Help text and error message template -->
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ? u$3`
+        <p class="inputElement-helpText" id="${this.uniqueId}" part="helpText">
+          <slot name="helptext">${this.getHelpText(this.type)}</slot>
+        </p>`
+      : u$3`
+        <p class="inputElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+          ${this.errorMessage}
+        </p>`
+
+      }
+    `;
+  }
+}
+
+AuroInput.register();
+AuroInput.register('custom-input');
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    changeLang();
+    customError();
+    setReadonlyValue();
+    swapInputValues();
+    programmaticallySetValue();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };