@asante-org/atlascopco-vt-litesitegenerator 1.6.41 → 3.0.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useId, useEffect } from 'react';
+import React, { useState, useRef, useId, useEffect, useMemo, forwardRef, useCallback, useImperativeHandle } from 'react';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -1333,6 +1333,734 @@ var LsgFooter = function (_a) {
   }))))), bottomBar);
 };
 
+var LsgFormFieldText = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-text" : _b,
+    label = _a.label,
+    helpText = _a.helpText,
+    placeholder = _a.placeholder,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? "" : _c,
+    _d = _a.required,
+    required = _d === void 0 ? false : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    error = _a.error,
+    autocomplete = _a.autocomplete,
+    minLength = _a.minLength,
+    maxLength = _a.maxLength,
+    name = _a.name;
+  var helpId = helpText ? "".concat(id, "-help") : undefined;
+  var errorId = "".concat(id, "-error");
+  var ariaDescribedBy = [helpId, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--text"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__label",
+    htmlFor: id
+  }, label, required && /*#__PURE__*/React.createElement("abbr", {
+    className: "cmp-vtba-form__required",
+    title: "required"
+  }, "*")), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    className: "cmp-vtba-form__input",
+    id: id,
+    name: name,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    autoComplete: autocomplete,
+    minLength: minLength,
+    maxLength: maxLength,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  }), helpText && /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__help",
+    id: helpId
+  }, helpText), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var LsgFormFieldEmail = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-email" : _b,
+    label = _a.label,
+    helpText = _a.helpText,
+    placeholder = _a.placeholder,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? "" : _c,
+    _d = _a.required,
+    required = _d === void 0 ? false : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    error = _a.error,
+    maxLength = _a.maxLength,
+    name = _a.name;
+  var helpId = helpText ? "".concat(id, "-help") : undefined;
+  var errorId = "".concat(id, "-error");
+  var ariaDescribedBy = [helpId, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--email"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__label",
+    htmlFor: id
+  }, label, required && /*#__PURE__*/React.createElement("abbr", {
+    className: "cmp-vtba-form__required",
+    title: "required"
+  }, "*")), /*#__PURE__*/React.createElement("input", {
+    type: "email",
+    className: "cmp-vtba-form__input",
+    id: id,
+    name: name,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    autoComplete: "email",
+    maxLength: maxLength,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  }), helpText && /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__help",
+    id: helpId
+  }, helpText), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var M=[["Afghanistan","af","93"],["Albania","al","355"],["Algeria","dz","213"],["Andorra","ad","376"],["Angola","ao","244"],["Antigua and Barbuda","ag","1268"],["Argentina","ar","54",{default:"(..) .... ....","/^11/":"(..) .... ....","/^15/":"(..) ... ....","/^(2|3|4|5)/":"(.) .... ....","/^9/":"(.) .... ....."},0],["Armenia","am","374",".. ......"],["Aruba","aw","297"],["Australia","au","61",{default:". .... ....","/^4/":"... ... ...","/^5(?!50)/":"... ... ...","/^1(3|8)00/":".... ... ...","/^13/":".. .. ..","/^180/":"... ...."},0,[]],["Austria","at","43"],["Azerbaijan","az","994","(..) ... .. .."],["Bahamas","bs","1242"],["Bahrain","bh","973",".... ...."],["Bangladesh","bd","880"],["Barbados","bb","1246"],["Belarus","by","375","(..) ... .. .."],["Belgium","be","32","... .. .. .."],["Belize","bz","501"],["Benin","bj","229"],["Bhutan","bt","975"],["Bolivia","bo","591"],["Bosnia and Herzegovina","ba","387"],["Botswana","bw","267"],["Brazil","br","55","(..) .....-...."],["British Indian Ocean Territory","io","246"],["Brunei","bn","673"],["Bulgaria","bg","359"],["Burkina Faso","bf","226"],["Burundi","bi","257"],["Cambodia","kh","855"],["Cameroon","cm","237"],["Canada","ca","1","(...) ...-....",1,["204","226","236","249","250","289","306","343","365","387","403","416","418","431","437","438","450","506","514","519","548","579","581","587","604","613","639","647","672","705","709","742","778","780","782","807","819","825","867","873","902","905"]],["Cape Verde","cv","238"],["Caribbean Netherlands","bq","599","",1],["Cayman Islands","ky","1","... ... ....",4,["345"]],["Central African Republic","cf","236"],["Chad","td","235"],["Chile","cl","56"],["China","cn","86","... .... ...."],["Colombia","co","57","... ... ...."],["Comoros","km","269"],["Congo","cd","243"],["Congo","cg","242"],["Costa Rica","cr","506","....-...."],["C\xF4te d'Ivoire","ci","225",".. .. .. .. .."],["Croatia","hr","385"],["Cuba","cu","53"],["Cura\xE7ao","cw","599","",0],["Cyprus","cy","357",".. ......"],["Czech Republic","cz","420","... ... ..."],["Denmark","dk","45",".. .. .. .."],["Djibouti","dj","253",".. .. ...."],["Dominica","dm","1767"],["Dominican Republic","do","1","(...) ...-....",2,["809","829","849"]],["Ecuador","ec","593"],["Egypt","eg","20"],["El Salvador","sv","503","....-...."],["Equatorial Guinea","gq","240"],["Eritrea","er","291"],["Estonia","ee","372",".... ......"],["Ethiopia","et","251",".. ... ...."],["Faroe Islands","fo","298",".. .. .."],["Fiji","fj","679"],["Finland","fi","358",".. ... .. .."],["France","fr","33",". .. .. .. .."],["French Guiana","gf","594","... .. .. .."],["French Polynesia","pf","689",{"/^44/":".. .. ..","/^80[0-5]/":"... .. .. ..",default:".. .. .. .."}],["Gabon","ga","241"],["Gambia","gm","220"],["Georgia","ge","995"],["Germany","de","49","... ........."],["Ghana","gh","233"],["Gibraltar","gi","350"],["Greece","gr","30"],["Greenland","gl","299",".. .. .."],["Grenada","gd","1473"],["Guadeloupe","gp","590","... .. .. ..",0],["Guam","gu","1671"],["Guatemala","gt","502","....-...."],["Guinea","gn","224"],["Guinea-Bissau","gw","245"],["Guyana","gy","592"],["Haiti","ht","509","....-...."],["Honduras","hn","504"],["Hong Kong","hk","852",".... ...."],["Hungary","hu","36"],["Iceland","is","354","... ...."],["India","in","91",".....-....."],["Indonesia","id","62"],["Iran","ir","98","... ... ...."],["Iraq","iq","964"],["Ireland","ie","353",".. ......."],["Israel","il","972","... ... ...."],["Italy","it","39","... .......",0],["Jamaica","jm","1876"],["Japan","jp","81",".. .... ...."],["Jordan","jo","962"],["Kazakhstan","kz","7","... ...-..-..",0],["Kenya","ke","254"],["Kiribati","ki","686"],["Kosovo","xk","383"],["Kuwait","kw","965",".... ...."],["Kyrgyzstan","kg","996","... ... ..."],["Laos","la","856"],["Latvia","lv","371",".. ... ..."],["Lebanon","lb","961"],["Lesotho","ls","266"],["Liberia","lr","231"],["Libya","ly","218"],["Liechtenstein","li","423"],["Lithuania","lt","370"],["Luxembourg","lu","352"],["Macau","mo","853"],["Macedonia","mk","389"],["Madagascar","mg","261"],["Malawi","mw","265"],["Malaysia","my","60","..-....-...."],["Maldives","mv","960"],["Mali","ml","223"],["Malta","mt","356"],["Marshall Islands","mh","692"],["Martinique","mq","596","... .. .. .."],["Mauritania","mr","222"],["Mauritius","mu","230"],["Mayotte","yt","262","... .. .. ..",1,["269","639"]],["Mexico","mx","52","... ... ....",0],["Micronesia","fm","691"],["Moldova","md","373","(..) ..-..-.."],["Monaco","mc","377"],["Mongolia","mn","976"],["Montenegro","me","382"],["Morocco","ma","212"],["Mozambique","mz","258"],["Myanmar","mm","95"],["Namibia","na","264"],["Nauru","nr","674"],["Nepal","np","977"],["Netherlands","nl","31",{"/^06/":"(.). .........","/^6/":". .........","/^0(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":"(.).. ........","/^(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":".. ........","/^0/":"(.)... .......",default:"... ......."}],["New Caledonia","nc","687"],["New Zealand","nz","64","...-...-...."],["Nicaragua","ni","505"],["Niger","ne","227"],["Nigeria","ng","234"],["North Korea","kp","850"],["Norway","no","47","... .. ..."],["Oman","om","968",".... ...."],["Pakistan","pk","92","...-......."],["Palau","pw","680"],["Palestine","ps","970"],["Panama","pa","507"],["Papua New Guinea","pg","675"],["Paraguay","py","595"],["Peru","pe","51"],["Philippines","ph","63","... ... ...."],["Poland","pl","48","...-...-..."],["Portugal","pt","351"],["Puerto Rico","pr","1","(...) ...-....",3,["787","939"]],["Qatar","qa","974",".... ...."],["R\xE9union","re","262","... .. .. ..",0],["Romania","ro","40"],["Russia","ru","7","(...) ...-..-..",1],["Rwanda","rw","250"],["Saint Kitts and Nevis","kn","1869"],["Saint Lucia","lc","1758"],["Saint Pierre & Miquelon","pm","508",{"/^708/":"... ... ...","/^8/":"... .. .. ..",default:".. .. .."}],["Saint Vincent and the Grenadines","vc","1784"],["Samoa","ws","685"],["San Marino","sm","378"],["S\xE3o Tom\xE9 and Pr\xEDncipe","st","239"],["Saudi Arabia","sa","966",".. ... ...."],["Senegal","sn","221"],["Serbia","rs","381"],["Seychelles","sc","248"],["Sierra Leone","sl","232"],["Singapore","sg","65","....-...."],["Slovakia","sk","421"],["Slovenia","si","386"],["Solomon Islands","sb","677"],["Somalia","so","252"],["South Africa","za","27"],["South Korea","kr","82","... .... ...."],["South Sudan","ss","211"],["Spain","es","34","... ... ..."],["Sri Lanka","lk","94"],["Sudan","sd","249"],["Suriname","sr","597"],["Swaziland","sz","268"],["Sweden","se","46","... ... ..."],["Switzerland","ch","41",".. ... .. .."],["Syria","sy","963"],["Taiwan","tw","886"],["Tajikistan","tj","992"],["Tanzania","tz","255"],["Thailand","th","66"],["Timor-Leste","tl","670"],["Togo","tg","228"],["Tonga","to","676"],["Trinidad and Tobago","tt","1868"],["Tunisia","tn","216"],["Turkey","tr","90","... ... .. .."],["Turkmenistan","tm","993"],["Tuvalu","tv","688"],["Uganda","ug","256"],["Ukraine","ua","380","(..) ... .. .."],["United Arab Emirates","ae","971",{default:".. ... ....","/^5[024568]/":".. ... ....","/^[234679]/":". ... ...."}],["United Kingdom","gb","44",".... ......"],["United States","us","1","(...) ...-....",0],["Uruguay","uy","598"],["Uzbekistan","uz","998",".. ... .. .."],["Vanuatu","vu","678"],["Vatican City","va","39",".. .... ....",1],["Venezuela","ve","58"],["Vietnam","vn","84"],["Wallis & Futuna","wf","681",".. .. .."],["Yemen","ye","967"],["Zambia","zm","260"],["Zimbabwe","zw","263"]];var Ne="react-international-phone-",de=(...t)=>t.filter(e=>!!e).join(" ").trim(),Me=(...t)=>de(...t).split(" ").map(e=>`${Ne}${e}`).join(" "),S=({addPrefix:t,rawClassNames:e})=>de(Me(...t),...e);var ce=({value:t,mask:e,maskSymbol:n,offset:s=0,trimNonMaskCharsLeftover:r=false,allowMaskOverflow:a=false})=>{if(t.length<s)return t;let p=t.slice(0,s),i=t.slice(s),o=e.split("").filter(d=>d===n).length,u=i.slice(0,o),l=a?i.slice(o):"",m=p,y=0;for(let d of e.split("")){if(y>=u.length){if(!r&&d!==n){m+=d;continue}break}d===n?(m+=u[y],y+=1):m+=d;}return m+l};var O=t=>t?/^\d+$/.test(t):false;var V=t=>t.replace(/\D/g,"");var pe=(t,e)=>{let n=t.style.display;n!=="block"&&(t.style.display="block");let s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),a=r.top-s.top,p=s.bottom-r.bottom;a>=0&&p>=0||(Math.abs(a)<Math.abs(p)?t.scrollTop+=a:t.scrollTop-=p),t.style.display=n;};var me=()=>typeof window>"u"?false:window.navigator.userAgent.toLowerCase().includes("macintosh");var Ce=(t,e)=>{let n=e.disableDialCodeAndPrefix?false:e.forceDialCode,s=e.disableDialCodeAndPrefix?false:e.insertDialCodeOnEmpty,r=t,a=u=>e.trimNonDigitsEnd?u.trim():u;if(!r)return s&&!r.length||n?a(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`):a(r);if(r=V(r),r===e.dialCode&&!e.disableDialCodeAndPrefix)return a(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(e.dialCode.startsWith(r)&&!e.disableDialCodeAndPrefix)return a(n?`${e.prefix}${e.dialCode}${e.charAfterDialCode}`:`${e.prefix}${r}`);if(!r.startsWith(e.dialCode)&&!e.disableDialCodeAndPrefix){if(n)return a(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(r.length<e.dialCode.length)return a(`${e.prefix}${r}`)}let p=()=>{let u=e.dialCode.length,l=r.slice(0,u),m=r.slice(u);return {phoneLeftSide:l,phoneRightSide:m}},{phoneLeftSide:i,phoneRightSide:o}=p();return i=`${e.prefix}${i}${e.charAfterDialCode}`,o=ce({value:o,mask:e.mask,maskSymbol:e.maskChar,trimNonMaskCharsLeftover:e.trimNonDigitsEnd||e.disableDialCodeAndPrefix&&o.length===0,allowMaskOverflow:e.allowMaskOverflow}),e.disableDialCodeAndPrefix&&(i=""),a(`${i}${o}`)};var he=({phoneBeforeInput:t,phoneAfterInput:e,phoneAfterFormatted:n,cursorPositionAfterInput:s,leftOffset:r=0,deletion:a})=>{if(s<r)return r;if(!t)return n.length;let p=null;for(let l=s-1;l>=0;l-=1)if(O(e[l])){p=l;break}if(p===null){for(let l=0;l<e.length;l+=1)if(O(n[l]))return l;return e.length}let i=0;for(let l=0;l<p;l+=1)O(e[l])&&(i+=1);let o=0,u=0;for(let l=0;l<n.length&&(o+=1,O(n[l])&&(u+=1),!(u>=i+1));l+=1);if(a!=="backward")for(;!O(n[o])&&o<n.length;)o+=1;return o};var G=({phone:t,prefix:e})=>t?`${e}${V(t)}`:"";function W({value:t,country:e,insertDialCodeOnEmpty:n,trimNonDigitsEnd:s,countries:r,prefix:a,charAfterDialCode:p,forceDialCode:i,disableDialCodeAndPrefix:o,defaultMask:u,countryGuessingEnabled:l,disableFormatting:m,allowMaskOverflow:y}){let d=t;o&&(d=d.startsWith(`${a}`)?d:`${a}${e.dialCode}${d}`);let w=l?ee({phone:d,countries:r,currentCountryIso2:e?.iso2}):void 0,f=w?.country??e,v=Ce(d,{prefix:a,mask:Y({phone:d,country:f,defaultMask:u,disableFormatting:m}),maskChar:J,dialCode:f.dialCode,trimNonDigitsEnd:s,charAfterDialCode:p,forceDialCode:i,insertDialCodeOnEmpty:n,disableDialCodeAndPrefix:o,allowMaskOverflow:y}),g=l&&!w?.fullDialCodeMatch?e:f;return {phone:G({phone:o?`${g.dialCode}${v}`:v,prefix:a}),inputValue:v,country:g}}var _e=t=>{if(t?.toLocaleLowerCase().includes("delete")??false)return t?.toLocaleLowerCase().includes("forward")?"forward":"backward"},ye=(t,{country:e,insertDialCodeOnEmpty:n,phoneBeforeInput:s,prefix:r,charAfterDialCode:a,forceDialCode:p,disableDialCodeAndPrefix:i,countryGuessingEnabled:o,defaultMask:u,disableFormatting:l,countries:m,allowMaskOverflow:y})=>{let d=t.nativeEvent,w=d.inputType,f=_e(w),v=!!w?.startsWith("insertFrom"),g=w==="insertText",D=d?.data||void 0,I=t.target.value,_=t.target.selectionStart??0;if(w?.includes("history"))return {inputValue:s,phone:G({phone:s,prefix:r}),cursorPosition:s.length,country:e};if(g&&!O(D)&&I!==r)return {inputValue:s,phone:G({phone:i?`${e.dialCode}${s}`:s,prefix:r}),cursorPosition:_-(D?.length??0),country:e};if(p&&!I.startsWith(`${r}${e.dialCode}`)&&!v){let b=I?s:`${r}${e.dialCode}${a}`;return {inputValue:b,phone:G({phone:b,prefix:r}),cursorPosition:r.length+e.dialCode.length+a.length,country:e}}let{phone:c,inputValue:C,country:h}=W({value:I,country:e,trimNonDigitsEnd:f==="backward",insertDialCodeOnEmpty:n,countryGuessingEnabled:o,countries:m,prefix:r,charAfterDialCode:a,forceDialCode:p,disableDialCodeAndPrefix:i,disableFormatting:l,defaultMask:u,allowMaskOverflow:y}),P=he({cursorPositionAfterInput:_,phoneBeforeInput:s,phoneAfterInput:I,phoneAfterFormatted:C,leftOffset:p?r.length+e.dialCode.length+a.length:0,deletion:f});return {phone:c,inputValue:C,cursorPosition:P,country:h}};var ge=(t,e)=>{let n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return  false;for(let r of n)if(t[r]!==e[r])return  false;return  true};var we=()=>{let t=useRef(),e=useRef(Date.now()),n=useCallback(()=>{let s=Date.now(),r=t.current?s-e.current:void 0;return t.current=e.current,e.current=s,r},[]);return useMemo(()=>({check:n}),[n])};var Le={size:20,overrideLastItemDebounceMS:-1};function Pe(t,e){let{size:n,overrideLastItemDebounceMS:s,onChange:r}={...Le,...e},[a,p]=useState(t),i=useRef([a]),o=useRef(0),u=we(),l=useCallback((d,w)=>{let f=i.current[o.current];if(d===f||typeof d=="object"&&typeof f=="object"&&ge(d,f))return;let v=s>0,g=u.check(),E=v&&g!==void 0?g>s:true;if(w?.overrideLastItem!==void 0?w.overrideLastItem:!E)i.current=[...i.current.slice(0,o.current),d];else {let I=i.current.length>=n;i.current=[...i.current.slice(I?1:0,o.current+1),d],I||(o.current+=1);}p(d),r?.(d);},[r,s,n,u]),m=useCallback(()=>{if(o.current<=0)return {success:false};let d=i.current[o.current-1];return p(d),o.current-=1,r?.(d),{success:true,value:d}},[r]),y=useCallback(()=>{if(o.current+1>=i.current.length)return {success:false};let d=i.current[o.current+1];return p(d),o.current+=1,r?.(d),{success:true,value:d}},[r]);return [a,l,m,y]}var J=".",R={defaultCountry:"us",value:"",prefix:"+",defaultMask:"............",charAfterDialCode:" ",historySaveDebounceMS:200,disableCountryGuess:false,disableDialCodePrefill:false,forceDialCode:false,disableDialCodeAndPrefix:false,disableFormatting:false,allowMaskOverflow:false,countries:M},oe=({defaultCountry:t=R.defaultCountry,value:e=R.value,countries:n=R.countries,prefix:s=R.prefix,defaultMask:r=R.defaultMask,charAfterDialCode:a=R.charAfterDialCode,historySaveDebounceMS:p=R.historySaveDebounceMS,disableCountryGuess:i=R.disableCountryGuess,disableDialCodePrefill:o=R.disableDialCodePrefill,forceDialCode:u=R.forceDialCode,disableDialCodeAndPrefix:l=R.disableDialCodeAndPrefix,disableFormatting:m=R.disableFormatting,allowMaskOverflow:y=R.allowMaskOverflow,onChange:d,inputRef:w})=>{let g={countries:n,prefix:s,charAfterDialCode:a,forceDialCode:l?false:u,disableDialCodeAndPrefix:l,defaultMask:r,countryGuessingEnabled:!i,disableFormatting:m,allowMaskOverflow:y},E=useRef(null),D=w||E,I=x=>{Promise.resolve().then(()=>{typeof window>"u"||D.current!==document?.activeElement||D.current?.setSelectionRange(x,x);});},_=useCallback(x=>z({value:x,field:"iso2",countries:n}),[n]),c=useCallback(({inputValue:x,phone:T,country:k})=>{if(!d)return;let F=_(k);d({phone:T,inputValue:x,country:F});},[_,d]),[{phone:C,inputValue:h,country:P},b,L,$]=Pe(()=>{let x=z({value:t,field:"iso2",countries:n});x||console.error(`[react-international-phone]: can not find a country with "${t}" iso2 code`);let T=x||z({value:"us",field:"iso2",countries:n}),{phone:k,inputValue:F,country:U}=W({value:e,country:T,insertDialCodeOnEmpty:!o,...g});return I(F.length),{phone:k,inputValue:F,country:U.iso2}},{overrideLastItemDebounceMS:p,onChange:c}),A=useMemo(()=>_(P),[P,_]);useEffect(()=>{let x=D.current;if(!x)return;let T=k=>{if(!k.key)return;let F=k.ctrlKey,U=k.metaKey,Ie=k.shiftKey;if(k.key.toLowerCase()==="z"){if(me()){if(!U)return}else if(!F)return;Ie?$():L();}};return x.addEventListener("keydown",T),()=>{x.removeEventListener("keydown",T);}},[D,L,$]);let K=x=>{x.preventDefault();let{phone:T,inputValue:k,country:F,cursorPosition:U}=ye(x,{country:A,phoneBeforeInput:h,insertDialCodeOnEmpty:false,...g});return b({inputValue:k,phone:T,country:F.iso2}),I(U),e},Q=useCallback((x,T={focusOnInput:false})=>{let k=z({value:x,field:"iso2",countries:n});if(!k){console.error(`[react-international-phone]: can not find a country with "${x}" iso2 code`);return}let F=l?"":`${s}${k.dialCode}${a}`;b({inputValue:F,phone:`${s}${k.dialCode}`,country:k.iso2}),T.focusOnInput&&Promise.resolve().then(()=>{D.current?.focus();});},[n,l,s,a,b,D]),[X,j]=useState(false);return useEffect(()=>{if(!X){j(true),e!==C&&d?.({inputValue:h,phone:C,country:A});return}if(e===C)return;let{phone:x,inputValue:T,country:k}=W({value:e,country:A,insertDialCodeOnEmpty:!o,...g});b({phone:x,inputValue:T,country:k.iso2});},[e]),{phone:C,inputValue:h,country:A,setCountry:Q,handlePhoneValueChange:K,inputRef:D}};var Y=({phone:t,country:e,defaultMask:n="............",disableFormatting:s=false})=>{let r=e.format,a=i=>s?i.replace(new RegExp(`[^${J}]`,"g"),""):i;if(!r)return a(n);if(typeof r=="string")return a(r);if(!r.default)return console.error(`[react-international-phone]: default mask for ${e.iso2} is not provided`),a(n);let p=Object.keys(r).find(i=>{if(i==="default")return  false;if(!(i.charAt(0)==="/"&&i.charAt(i.length-1)==="/"))return console.error(`[react-international-phone]: format regex "${i}" for ${e.iso2} is not valid`),false;let u=new RegExp(i.substring(1,i.length-1)),l=t.replace(e.dialCode,"");return u.test(V(l))});return a(p?r[p]:r.default)};var N=t=>{let[e,n,s,r,a,p]=t;return {name:e,iso2:n,dialCode:s,format:r,priority:a,areaCodes:p}};var Oe=t=>`Field "${t}" is not supported`,z=({field:t,value:e,countries:n=M})=>{if(["priority"].includes(t))throw new Error(Oe(t));let s=n.find(r=>{let a=N(r);return e===a[t]});if(s)return N(s)};var ee=({phone:t,countries:e=M,currentCountryIso2:n})=>{let s={country:void 0,fullDialCodeMatch:false};if(!t)return s;let r=V(t);if(!r)return s;let a=s,p=({country:i,fullDialCodeMatch:o})=>{let u=i.dialCode===a.country?.dialCode,l=(i.priority??0)<(a.country?.priority??0);(!u||l)&&(a={country:i,fullDialCodeMatch:o});};for(let i of e){let o=N(i),{dialCode:u,areaCodes:l}=o;if(r.startsWith(u)){let m=a.country?Number(u)>=Number(a.country.dialCode):true;if(l){let y=r.substring(u.length);for(let d of l)if(y.startsWith(d))return {country:o,fullDialCodeMatch:true}}(m||u===r||!a.fullDialCodeMatch)&&p({country:o,fullDialCodeMatch:true});}a.fullDialCodeMatch||r.length<u.length&&u.startsWith(r)&&(!a.country||Number(u)<=Number(a.country.dialCode))&&p({country:o,fullDialCodeMatch:false});}if(n){let i=z({value:n,field:"iso2",countries:e});if(!i)return a;let u=i?(m=>{if(!m?.areaCodes)return  false;let y=r.substring(m.dialCode.length);return m.areaCodes.some(d=>d.startsWith(y))})(i):false;!!a&&a.country?.dialCode===i.dialCode&&a.country!==i&&a.fullDialCodeMatch&&(!i.areaCodes||u)&&(a={country:i,fullDialCodeMatch:true});}return a};var Ve=(t,e)=>{let n=parseInt(t,16);return Number(n+e).toString(16)},He="abcdefghijklmnopqrstuvwxyz",je="1f1e6",De=He.split("").reduce((t,e,n)=>({...t,[e]:Ve(je,n)}),{}),Be=t=>[De[t[0]],De[t[1]]].join("-"),q=({iso2:t,size:e,src:n,protocol:s="https",disableLazyLoading:r,className:a,style:p,...i})=>{if(!t)return React.createElement("img",{className:S({addPrefix:["flag-emoji"],rawClassNames:[a]}),width:e,height:e,...i});let o=()=>{if(n)return n;let u=Be(t);return `${s}://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${u}.svg`};return React.createElement("img",{className:S({addPrefix:["flag-emoji"],rawClassNames:[a]}),src:o(),width:e,height:e,draggable:false,"data-country":t,loading:r?void 0:"lazy",style:{width:e,height:e,...p},alt:"",...i})};var Ue=1e3,se=({show:t,dialCodePrefix:e="+",selectedCountry:n,countries:s=M,preferredCountries:r=[],flags:a,onSelect:p,onClose:i,...o})=>{let u=useRef(null),l=useRef(),m=useMemo(()=>{if(!r||!r.length)return s;let c=[],C=[...s];for(let h of r){let P=C.findIndex(b=>N(b).iso2===h);if(P!==-1){let b=C.splice(P,1)[0];c.push(b);}}return c.concat(C)},[s,r]),y=useRef({updatedAt:void 0,value:""}),d=c=>{let C=y.current.updatedAt&&new Date().getTime()-y.current.updatedAt.getTime()>Ue;y.current={value:C?c:`${y.current.value}${c}`,updatedAt:new Date};let h=m.findIndex(P=>N(P).name.toLowerCase().startsWith(y.current.value));h!==-1&&v(h);},w=useCallback(c=>m.findIndex(C=>N(C).iso2===c),[m]),[f,v]=useState(w(n)),g=()=>{l.current!==n&&v(w(n));},E=useCallback(c=>{v(w(c.iso2)),p?.(c);},[p,w]),D=c=>{let C=m.length-1,h=P=>c==="prev"?P-1:c==="next"?P+1:c==="last"?C:0;v(P=>{let b=h(P);return b<0?0:b>C?C:b});},I=c=>{if(c.stopPropagation(),c.key==="Enter"){c.preventDefault();let C=N(m[f]);E(C);return}if(c.key==="Escape"){i?.();return}if(c.key==="ArrowUp"){c.preventDefault(),D("prev");return}if(c.key==="ArrowDown"){c.preventDefault(),D("next");return}if(c.key==="PageUp"){c.preventDefault(),D("first");return}if(c.key==="PageDown"){c.preventDefault(),D("last");return}c.key===" "&&c.preventDefault(),c.key.length===1&&!c.altKey&&!c.ctrlKey&&!c.metaKey&&d(c.key.toLocaleLowerCase());},_=useCallback(()=>{if(!u.current||f===void 0)return;let c=N(m[f]).iso2;if(c===l.current)return;let C=u.current.querySelector(`[data-country="${c}"]`);C&&(pe(u.current,C),l.current=c);},[f,m]);return useEffect(()=>{_();},[f,_]),useEffect(()=>{u.current&&(t?u.current.focus():g());},[t]),useEffect(()=>{g();},[n]),React.createElement("ul",{ref:u,role:"listbox",className:S({addPrefix:["country-selector-dropdown"],rawClassNames:[o.className]}),style:{display:t?"block":"none",...o.style},onKeyDown:I,onBlur:i,tabIndex:-1,"aria-activedescendant":`react-international-phone__${N(m[f]).iso2}-option`},m.map((c,C)=>{let h=N(c),P=h.iso2===n,b=C===f,L=r.includes(h.iso2),$=C===r.length-1,A=a?.find(K=>K.iso2===h.iso2);return React.createElement(React.Fragment,{key:h.iso2},React.createElement("li",{"data-country":h.iso2,role:"option","aria-selected":P,"aria-label":`${h.name} ${e}${h.dialCode}`,id:`react-international-phone__${h.iso2}-option`,className:S({addPrefix:["country-selector-dropdown__list-item",L&&"country-selector-dropdown__list-item--preferred",P&&"country-selector-dropdown__list-item--selected",b&&"country-selector-dropdown__list-item--focused"],rawClassNames:[o.listItemClassName,L&&o.listItemPreferredClassName,P&&o.listItemSelectedClassName,b&&o.listItemFocusedClassName]}),onClick:()=>E(h),style:o.listItemStyle,title:h.name},React.createElement(q,{iso2:h.iso2,src:A?.src,className:S({addPrefix:["country-selector-dropdown__list-item-flag-emoji"],rawClassNames:[o.listItemFlagClassName]}),style:o.listItemFlagStyle}),React.createElement("span",{className:S({addPrefix:["country-selector-dropdown__list-item-country-name"],rawClassNames:[o.listItemCountryNameClassName]}),style:o.listItemCountryNameStyle},h.name),React.createElement("span",{className:S({addPrefix:["country-selector-dropdown__list-item-dial-code"],rawClassNames:[o.listItemDialCodeClassName]}),style:o.listItemDialCodeStyle},e,h.dialCode)),$?React.createElement("hr",{className:S({addPrefix:["country-selector-dropdown__preferred-list-divider"],rawClassNames:[o.preferredListDividerClassName]}),style:o.preferredListDividerStyle}):null)}))};var le=React.memo(({selectedCountry:t,onSelect:e,disabled:n,hideDropdown:s,countries:r=M,preferredCountries:a=[],flags:p,renderButtonWrapper:i,...o})=>{let[u,l]=useState(false),m=useMemo(()=>{if(t)return z({value:t,field:"iso2",countries:r})},[r,t]),y=useRef(null),d=f=>{f.key&&["ArrowUp","ArrowDown"].includes(f.key)&&(f.preventDefault(),l(true));},w=()=>{let f={title:m?.name,onClick:()=>l(g=>!g),onMouseDown:g=>g.preventDefault(),onKeyDown:d,disabled:s||n,role:"combobox","aria-label":"Country selector","aria-haspopup":"listbox","aria-expanded":u},v=React.createElement("div",{className:S({addPrefix:["country-selector-button__button-content"],rawClassNames:[o.buttonContentWrapperClassName]}),style:o.buttonContentWrapperStyle},React.createElement(q,{iso2:t,src:p?.find(g=>g.iso2===t)?.src,className:S({addPrefix:["country-selector-button__flag-emoji",n&&"country-selector-button__flag-emoji--disabled"],rawClassNames:[o.flagClassName]}),style:{visibility:t?"visible":"hidden",...o.flagStyle}}),!s&&React.createElement("div",{className:S({addPrefix:["country-selector-button__dropdown-arrow",n&&"country-selector-button__dropdown-arrow--disabled",u&&"country-selector-button__dropdown-arrow--active"],rawClassNames:[o.dropdownArrowClassName]}),style:o.dropdownArrowStyle}));return i?i({children:v,rootProps:f}):React.createElement("button",{...f,type:"button",className:S({addPrefix:["country-selector-button",u&&"country-selector-button--active",n&&"country-selector-button--disabled",s&&"country-selector-button--hide-dropdown"],rawClassNames:[o.buttonClassName]}),"data-country":t,style:o.buttonStyle},v)};return React.createElement("div",{className:S({addPrefix:["country-selector"],rawClassNames:[o.className]}),style:o.style,ref:y},w(),React.createElement(se,{show:u,countries:r,preferredCountries:a,flags:p,onSelect:f=>{l(false),e?.(f);},selectedCountry:t,onClose:()=>{l(false);},...o.dropdownStyleProps}))});var ue=({dialCode:t,prefix:e,disabled:n,style:s,className:r})=>React.createElement("div",{className:S({addPrefix:["dial-code-preview",n&&"dial-code-preview--disabled"],rawClassNames:[r]}),style:s},`${e}${t}`);forwardRef(({value:t,onChange:e,countries:n=M,preferredCountries:s,hideDropdown:r,showDisabledDialCodeAndPrefix:a,disableFocusAfterCountrySelect:p,flags:i,style:o,className:u,inputStyle:l,inputClassName:m,countrySelectorStyleProps:y,dialCodePreviewStyleProps:d,inputProps:w,placeholder:f,disabled:v,name:g,onFocus:E,onBlur:D,required:I,autoFocus:_,...c},C)=>{let h=useCallback(j=>{e?.(j.phone,{country:j.country,inputValue:j.inputValue});},[e]),{phone:P,inputValue:b,inputRef:L,country:$,setCountry:A,handlePhoneValueChange:K}=oe({value:t,countries:n,...c,onChange:h}),Q=c.disableDialCodeAndPrefix&&a&&$?.dialCode,X=useCallback(j=>{A(j.iso2,{focusOnInput:!p});},[A,p]);return useImperativeHandle(C,()=>L.current?Object.assign(L.current,{setCountry:A,state:{phone:P,inputValue:b,country:$}}):null,[L,A,P,b,$]),React.createElement("div",{ref:C,className:S({addPrefix:["input-container"],rawClassNames:[u]}),style:o},React.createElement(le,{onSelect:X,flags:i,selectedCountry:$?.iso2,countries:n,preferredCountries:s,disabled:v,hideDropdown:r,...y}),Q&&React.createElement(ue,{dialCode:$.dialCode,prefix:c.prefix??"+",disabled:v,...d}),React.createElement("input",{onChange:K,value:b,type:"tel",ref:L,className:S({addPrefix:["input",v&&"input--disabled"],rawClassNames:[m]}),placeholder:f,disabled:v,style:l,name:g,onFocus:E,onBlur:D,autoFocus:_,required:I,...w}))});
+
+/**
+ * Vanilla emoji-flag + dial-code picker for VTBA form tel fields.
+ *
+ * Framework-agnostic: this is the single source of truth for the phone flag
+ * picker. It is used two ways:
+ *   1. In AEM (server-rendered HTL) via the ac-react-app form runtime, which
+ *      calls {@link initTelPickers} on DOM-ready.
+ *   2. In Storybook via the React {@link ../LsgFormFieldTel} component, which
+ *      calls it from a `useEffect`.
+ *
+ * It enhances `.cmp-vtba-form__field--tel input[type="tel"]` with a country
+ * toggle (Unicode emoji flag + dial code) and a searchable dropdown. Emoji flags
+ * mean no image assets to ship. Country/dial-code data is reused from
+ * `react-international-phone` (data only — no React needed at runtime here).
+ *
+ * DOM strategy (so it is safe inside React too): if the input already sits in a
+ * `.cmp-vtba-tel` wrapper (React renders one), the picker only *appends* the
+ * toggle + dropdown and never moves the React-managed input. Otherwise (plain
+ * AEM markup) it creates the wrapper and moves the input in.
+ *
+ * On submit, the field value is the full international number
+ * (`+<dialCode><nationalDigits>`) via {@link getTelValue}.
+ */
+/** `defaultCountries` items are tuples `[name, iso2, dialCode, format?, ...]`. */
+var COUNTRIES = M.map(function (c) {
+  var t = c;
+  return {
+    name: t[0],
+    iso2: t[1],
+    dialCode: t[2]
+  };
+}).filter(function (c) {
+  return !!c.iso2 && !!c.dialCode;
+});
+var DEFAULT_ISO2 = "gb";
+/** Converts an ISO-2 country code to its Unicode regional-indicator flag emoji. */
+function flagEmoji(iso2) {
+  return iso2.toUpperCase().replace(/[A-Z]/g, function (ch) {
+    return String.fromCodePoint(0x1f1e6 + ch.charCodeAt(0) - 65);
+  });
+}
+function findCountry(iso2) {
+  var target = (iso2 || "").toLowerCase();
+  for (var i = 0; i < COUNTRIES.length; i++) {
+    if (COUNTRIES[i].iso2 === target) {
+      return COUNTRIES[i];
+    }
+  }
+  return undefined;
+}
+/**
+ * Enhances every tel field under {@code root} (or {@code root} itself when it is
+ * a tel field). Idempotent per input. Works whether {@code root} is the whole
+ * form (AEM) or a single field element (React component).
+ */
+function initTelPickers(root) {
+  if (!root) {
+    return;
+  }
+  var inputs = root.querySelectorAll("input[type='tel']");
+  for (var i = 0; i < inputs.length; i++) {
+    var input = inputs[i];
+    if (input.closest(".cmp-vtba-form__field--tel")) {
+      enhance(input);
+    }
+  }
+}
+/**
+ * Full international number for a picker-enhanced tel input:
+ * `+<dialCode><nationalDigits>`. Falls back to the raw value if not enhanced.
+ */
+function getTelValue(input) {
+  var dial = input.getAttribute("data-dial-code");
+  if (!dial) {
+    return input.value;
+  }
+  var national = (input.value || "").replace(/\D/g, "");
+  return national ? "+" + dial + national : "";
+}
+function enhance(input) {
+  if (input.getAttribute("data-tel-picker") === "true" || !input.parentElement) {
+    return;
+  }
+  input.setAttribute("data-tel-picker", "true");
+  var initialIso2 = (input.getAttribute("data-country") || DEFAULT_ISO2).toLowerCase();
+  var selected = findCountry(initialIso2) || findCountry(DEFAULT_ISO2) || COUNTRIES[0];
+  // Reuse a pre-rendered wrapper (React) — append-only, never move the input.
+  // Otherwise create the wrapper and move the input (plain vanilla markup).
+  var wrapper;
+  if (input.parentElement.classList.contains("cmp-vtba-tel")) {
+    wrapper = input.parentElement;
+  } else {
+    wrapper = document.createElement("div");
+    wrapper.className = "cmp-vtba-tel";
+    input.parentElement.insertBefore(wrapper, input);
+    wrapper.appendChild(input);
+  }
+  var toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "cmp-vtba-tel__toggle";
+  toggle.setAttribute("aria-haspopup", "listbox");
+  toggle.setAttribute("aria-expanded", "false");
+  var dropdown = document.createElement("div");
+  dropdown.className = "cmp-vtba-tel__dropdown";
+  dropdown.hidden = true;
+  var search = document.createElement("input");
+  search.type = "text";
+  search.className = "cmp-vtba-tel__search";
+  search.placeholder = "Search";
+  search.setAttribute("aria-label", "Search countries");
+  var list = document.createElement("ul");
+  list.className = "cmp-vtba-tel__list";
+  list.setAttribute("role", "listbox");
+  dropdown.appendChild(search);
+  dropdown.appendChild(list);
+  // Toggle goes before the input; dropdown after — both inside the wrapper.
+  wrapper.insertBefore(toggle, input);
+  wrapper.appendChild(dropdown);
+  function applySelected(country) {
+    selected = country;
+    input.setAttribute("data-dial-code", country.dialCode);
+    input.setAttribute("data-iso2", country.iso2);
+    toggle.textContent = "";
+    var flag = document.createElement("span");
+    flag.className = "cmp-vtba-tel__flag";
+    flag.setAttribute("aria-hidden", "true");
+    flag.textContent = flagEmoji(country.iso2);
+    var code = document.createElement("span");
+    code.className = "cmp-vtba-tel__code";
+    code.textContent = "+" + country.dialCode;
+    toggle.appendChild(flag);
+    toggle.appendChild(code);
+    toggle.setAttribute("aria-label", "Country calling code: " + country.name + " +" + country.dialCode);
+  }
+  function renderList(filter) {
+    list.textContent = "";
+    var f = filter.trim().toLowerCase();
+    var digits = f.replace(/[^0-9]/g, "");
+    var _loop_1 = function (i) {
+      var c = COUNTRIES[i];
+      var match = !f || c.name.toLowerCase().indexOf(f) !== -1 || c.iso2 === f || !!digits && c.dialCode.indexOf(digits) === 0;
+      if (!match) {
+        return "continue";
+      }
+      var li = document.createElement("li");
+      li.className = "cmp-vtba-tel__option";
+      li.setAttribute("role", "option");
+      li.tabIndex = -1;
+      li.setAttribute("data-iso2", c.iso2);
+      li.setAttribute("aria-selected", c.iso2 === selected.iso2 ? "true" : "false");
+      li.textContent = flagEmoji(c.iso2) + "  " + c.name + "  +" + c.dialCode;
+      li.addEventListener("click", function () {
+        applySelected(c);
+        close();
+        input.focus();
+      });
+      list.appendChild(li);
+    };
+    for (var i = 0; i < COUNTRIES.length; i++) {
+      _loop_1(i);
+    }
+  }
+  function open() {
+    dropdown.hidden = false;
+    toggle.setAttribute("aria-expanded", "true");
+    search.value = "";
+    renderList("");
+    search.focus();
+  }
+  function close() {
+    dropdown.hidden = true;
+    toggle.setAttribute("aria-expanded", "false");
+  }
+  toggle.addEventListener("click", function () {
+    if (dropdown.hidden) {
+      open();
+    } else {
+      close();
+    }
+  });
+  search.addEventListener("input", function () {
+    return renderList(search.value);
+  });
+  search.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") {
+      close();
+      toggle.focus();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      var first = list.querySelector(".cmp-vtba-tel__option");
+      if (first) {
+        first.focus();
+      }
+    }
+  });
+  list.addEventListener("keydown", function (e) {
+    var opts = Array.prototype.slice.call(list.querySelectorAll(".cmp-vtba-tel__option"));
+    var idx = opts.indexOf(document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      (opts[idx + 1] || opts[0]).focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (idx <= 0) {
+        search.focus();
+      } else {
+        opts[idx - 1].focus();
+      }
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      var iso2 = document.activeElement.getAttribute("data-iso2");
+      var c = iso2 ? findCountry(iso2) : undefined;
+      if (c) {
+        applySelected(c);
+        close();
+        input.focus();
+      }
+    } else if (e.key === "Escape") {
+      close();
+      toggle.focus();
+    }
+  });
+  document.addEventListener("click", function (e) {
+    if (!wrapper.contains(e.target)) {
+      close();
+    }
+  });
+  applySelected(selected);
+}
+
+var LsgFormFieldTel = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-tel" : _b,
+    label = _a.label,
+    helpText = _a.helpText,
+    placeholder = _a.placeholder,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? "" : _c,
+    _d = _a.required,
+    required = _d === void 0 ? false : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    error = _a.error,
+    minLength = _a.minLength,
+    maxLength = _a.maxLength,
+    pattern = _a.pattern,
+    name = _a.name,
+    defaultCountry = _a.defaultCountry;
+  var fieldRef = useRef(null);
+  var helpId = helpText ? "".concat(id, "-help") : undefined;
+  var errorId = "".concat(id, "-error");
+  var ariaDescribedBy = [helpId, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+  // Enhance the tel input with the shared emoji-flag + dial-code picker.
+  // The input is pre-wrapped in `.cmp-vtba-tel`, so the picker appends its
+  // toggle/dropdown without moving the React-managed input.
+  useEffect(function () {
+    initTelPickers(fieldRef.current);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--tel",
+    ref: fieldRef
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__label",
+    htmlFor: id
+  }, label, required && /*#__PURE__*/React.createElement("abbr", {
+    className: "cmp-vtba-form__required",
+    title: "required"
+  }, "*")), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-tel"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "tel",
+    className: "cmp-vtba-form__input",
+    id: id,
+    name: name,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    autoComplete: "tel",
+    minLength: minLength,
+    maxLength: maxLength,
+    pattern: pattern,
+    "data-country": defaultCountry,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  })), helpText && /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__help",
+    id: helpId
+  }, helpText), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var LsgFormFieldSelect = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-select" : _b,
+    label = _a.label,
+    helpText = _a.helpText,
+    _c = _a.placeholder,
+    placeholder = _c === void 0 ? "Please select" : _c,
+    _d = _a.defaultValue,
+    defaultValue = _d === void 0 ? "" : _d,
+    _e = _a.options,
+    options = _e === void 0 ? [] : _e,
+    _f = _a.required,
+    required = _f === void 0 ? false : _f,
+    _g = _a.disabled,
+    disabled = _g === void 0 ? false : _g,
+    error = _a.error,
+    name = _a.name;
+  var helpId = helpText ? "".concat(id, "-help") : undefined;
+  var errorId = "".concat(id, "-error");
+  var ariaDescribedBy = [helpId, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--select"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__label",
+    htmlFor: id
+  }, label, required && /*#__PURE__*/React.createElement("abbr", {
+    className: "cmp-vtba-form__required",
+    title: "required"
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__select-wrapper"
+  }, /*#__PURE__*/React.createElement("select", {
+    className: "cmp-vtba-form__select",
+    id: id,
+    name: name,
+    defaultValue: defaultValue,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("option", {
+    value: ""
+  }, placeholder), options.map(function (opt) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: opt.value,
+      value: opt.value
+    }, opt.label);
+  }))), helpText && /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__help",
+    id: helpId
+  }, helpText), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var COUNTRY_FIXTURE = [{
+  value: "us",
+  label: "United States"
+}, {
+  value: "gb",
+  label: "United Kingdom"
+}, {
+  value: "de",
+  label: "Germany"
+}, {
+  value: "fr",
+  label: "France"
+}, {
+  value: "se",
+  label: "Sweden"
+}, {
+  value: "jp",
+  label: "Japan"
+}, {
+  value: "cn",
+  label: "China"
+}, {
+  value: "in",
+  label: "India"
+}, {
+  value: "br",
+  label: "Brazil"
+}, {
+  value: "au",
+  label: "Australia"
+}];
+var LsgFormFieldCountry = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-country" : _b,
+    label = _a.label,
+    helpText = _a.helpText,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? "" : _c,
+    _d = _a.countries,
+    countries = _d === void 0 ? COUNTRY_FIXTURE : _d,
+    _e = _a.required,
+    required = _e === void 0 ? false : _e,
+    _f = _a.disabled,
+    disabled = _f === void 0 ? false : _f,
+    error = _a.error,
+    name = _a.name;
+  var helpId = helpText ? "".concat(id, "-help") : undefined;
+  var errorId = "".concat(id, "-error");
+  var ariaDescribedBy = [helpId, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--country"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__label",
+    htmlFor: id
+  }, label, required && /*#__PURE__*/React.createElement("abbr", {
+    className: "cmp-vtba-form__required",
+    title: "required"
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__select-wrapper"
+  }, /*#__PURE__*/React.createElement("select", {
+    className: "cmp-vtba-form__select",
+    id: id,
+    name: name,
+    defaultValue: defaultValue,
+    "data-country-list": "true",
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("option", {
+    value: ""
+  }, "Select a country"), countries.map(function (c) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: c.value,
+      value: c.value
+    }, c.label);
+  }))), helpText && /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__help",
+    id: helpId
+  }, helpText), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var LsgFormFieldTextarea = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-textarea" : _b,
+    label = _a.label,
+    helpText = _a.helpText,
+    placeholder = _a.placeholder,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? "" : _c,
+    _d = _a.required,
+    required = _d === void 0 ? false : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    error = _a.error,
+    autocomplete = _a.autocomplete,
+    maxLength = _a.maxLength,
+    _f = _a.rows,
+    rows = _f === void 0 ? 4 : _f,
+    name = _a.name;
+  var helpId = helpText ? "".concat(id, "-help") : undefined;
+  var errorId = "".concat(id, "-error");
+  var ariaDescribedBy = [helpId, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--textarea"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__label",
+    htmlFor: id
+  }, label, required && /*#__PURE__*/React.createElement("abbr", {
+    className: "cmp-vtba-form__required",
+    title: "required"
+  }, "*")), /*#__PURE__*/React.createElement("textarea", {
+    className: "cmp-vtba-form__textarea",
+    id: id,
+    name: name,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    autoComplete: autocomplete,
+    maxLength: maxLength,
+    rows: rows,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  }), helpText && /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__help",
+    id: helpId
+  }, helpText), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var LsgFormFieldConsent = function (_a) {
+  var _b = _a.id,
+    id = _b === void 0 ? "field-consent" : _b,
+    label = _a.label,
+    _c = _a.required,
+    required = _c === void 0 ? false : _c,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    error = _a.error,
+    name = _a.name;
+  var errorId = "".concat(id, "-error");
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__field cmp-vtba-form__field--consent"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__consent"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    className: "cmp-vtba-form__checkbox",
+    id: id,
+    name: name,
+    value: "true",
+    "data-consent": "",
+    "aria-describedby": error ? errorId : undefined,
+    "aria-invalid": error ? "true" : undefined,
+    required: required,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("label", {
+    className: "cmp-vtba-form__consent-label",
+    htmlFor: id,
+    dangerouslySetInnerHTML: {
+      __html: label
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "cmp-vtba-form__field-error",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive",
+    hidden: !error
+  }, error));
+};
+
+var LsgFormStep = function (_a) {
+  var title = _a.title,
+    description = _a.description,
+    children = _a.children,
+    stepId = _a.stepId;
+  return /*#__PURE__*/React.createElement("fieldset", {
+    className: "cmp-vtba-form__step",
+    "data-form-step": "",
+    "data-step-id": stepId
+  }, title && /*#__PURE__*/React.createElement("legend", {
+    className: "cmp-vtba-form__step-legend"
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    className: "cmp-vtba-form__step-description"
+  }, description), /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__fields"
+  }, children));
+};
+
+var LsgFormContainer = function (_a) {
+  var title = _a.title,
+    _b = _a.multiStep,
+    multiStep = _b === void 0 ? false : _b,
+    _c = _a.currentStep,
+    currentStep = _c === void 0 ? 1 : _c,
+    _d = _a.steps,
+    steps = _d === void 0 ? [] : _d,
+    children = _a.children,
+    formError = _a.formError,
+    successMessage = _a.successMessage;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form",
+    "data-vtba-form": ""
+  }, /*#__PURE__*/React.createElement("form", {
+    className: "cmp-vtba-form__form",
+    method: "post",
+    noValidate: true,
+    "aria-label": title
+  }, title && /*#__PURE__*/React.createElement("h2", {
+    className: "cmp-vtba-form__title"
+  }, title), multiStep && steps.length > 0 && /*#__PURE__*/React.createElement("nav", {
+    className: "cmp-vtba-form__progress",
+    "aria-label": "Form progress"
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "cmp-vtba-form__progress-list"
+  }, steps.map(function (stepTitle, i) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: i,
+      className: "cmp-vtba-form__progress-step",
+      "data-step-index": i,
+      "aria-current": i + 1 === currentStep ? "step" : undefined
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "cmp-vtba-form__progress-number"
+    }, i + 1), /*#__PURE__*/React.createElement("span", {
+      className: "cmp-vtba-form__progress-title"
+    }, stepTitle));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__steps"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__actions"
+  }, multiStep && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "cmp-vtba-form__prev",
+    "data-form-prev": "",
+    hidden: currentStep <= 1
+  }, "Back"), multiStep && currentStep < (steps.length || 1) ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "cmp-vtba-form__next",
+    "data-form-next": ""
+  }, "Continue") : /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    className: "cmp-vtba-form__submit",
+    "data-form-submit": ""
+  }, "Submit")), formError && /*#__PURE__*/React.createElement("p", {
+    className: "cmp-vtba-form__error",
+    role: "alert",
+    "aria-live": "assertive"
+  }, formError), successMessage && /*#__PURE__*/React.createElement("div", {
+    className: "cmp-vtba-form__success",
+    role: "status",
+    "aria-live": "polite"
+  }, successMessage)));
+};
+
 var BASE_COMPONENTS = {
   LsgButton: LsgButton,
   LsgBanner: LsgBanner,
@@ -1346,7 +2074,16 @@ var BASE_COMPONENTS = {
   LsgHeader: LsgHeader,
   LsgQuickLinks: LsgQuickLinks,
   LsgSocialMediaIcons: LsgSocialMediaIcons,
-  LsgFooter: LsgFooter
+  LsgFooter: LsgFooter,
+  LsgFormContainer: LsgFormContainer,
+  LsgFormFieldText: LsgFormFieldText,
+  LsgFormFieldEmail: LsgFormFieldEmail,
+  LsgFormFieldTel: LsgFormFieldTel,
+  LsgFormFieldSelect: LsgFormFieldSelect,
+  LsgFormFieldCountry: LsgFormFieldCountry,
+  LsgFormFieldTextarea: LsgFormFieldTextarea,
+  LsgFormFieldConsent: LsgFormFieldConsent,
+  LsgFormStep: LsgFormStep
 };
 function createThemeComponent(themeName, componentName, Component) {
   var WrappedComponent = function (props) {
@@ -1371,7 +2108,16 @@ function createThemeComponents(themeName) {
     LsgHeader: createThemeComponent(themeName, "header", BASE_COMPONENTS.LsgHeader),
     LsgQuickLinks: createThemeComponent(themeName, "quick-links", BASE_COMPONENTS.LsgQuickLinks),
     LsgSocialMediaIcons: createThemeComponent(themeName, "social-media-icons", BASE_COMPONENTS.LsgSocialMediaIcons),
-    LsgFooter: createThemeComponent(themeName, "footer", BASE_COMPONENTS.LsgFooter)
+    LsgFooter: createThemeComponent(themeName, "footer", BASE_COMPONENTS.LsgFooter),
+    LsgFormContainer: createThemeComponent(themeName, "form-container", BASE_COMPONENTS.LsgFormContainer),
+    LsgFormFieldText: createThemeComponent(themeName, "form-field-text", BASE_COMPONENTS.LsgFormFieldText),
+    LsgFormFieldEmail: createThemeComponent(themeName, "form-field-email", BASE_COMPONENTS.LsgFormFieldEmail),
+    LsgFormFieldTel: createThemeComponent(themeName, "form-field-tel", BASE_COMPONENTS.LsgFormFieldTel),
+    LsgFormFieldSelect: createThemeComponent(themeName, "form-field-select", BASE_COMPONENTS.LsgFormFieldSelect),
+    LsgFormFieldCountry: createThemeComponent(themeName, "form-field-country", BASE_COMPONENTS.LsgFormFieldCountry),
+    LsgFormFieldTextarea: createThemeComponent(themeName, "form-field-textarea", BASE_COMPONENTS.LsgFormFieldTextarea),
+    LsgFormFieldConsent: createThemeComponent(themeName, "form-field-consent", BASE_COMPONENTS.LsgFormFieldConsent),
+    LsgFormStep: createThemeComponent(themeName, "form-step", BASE_COMPONENTS.LsgFormStep)
   };
 }
 
@@ -1389,6 +2135,16 @@ var Theme1LsgButton = theme1Components.LsgButton,
   Theme1LsgQuickLinks = theme1Components.LsgQuickLinks,
   Theme1LsgSocialMediaIcons = theme1Components.LsgSocialMediaIcons,
   Theme1LsgFooter = theme1Components.LsgFooter;
+  // Form components
+  theme1Components.LsgFormContainer;
+  theme1Components.LsgFormFieldText;
+  theme1Components.LsgFormFieldEmail;
+  theme1Components.LsgFormFieldTel;
+  theme1Components.LsgFormFieldTextarea;
+  theme1Components.LsgFormFieldSelect;
+  theme1Components.LsgFormFieldCountry;
+  theme1Components.LsgFormFieldConsent;
+  theme1Components.LsgFormStep;
 
 var theme2Components = createThemeComponents("theme-2");
 var Theme2LsgButton = theme2Components.LsgButton,
@@ -1404,6 +2160,16 @@ var Theme2LsgButton = theme2Components.LsgButton,
   Theme2LsgQuickLinks = theme2Components.LsgQuickLinks,
   Theme2LsgSocialMediaIcons = theme2Components.LsgSocialMediaIcons,
   Theme2LsgFooter = theme2Components.LsgFooter;
+  // Form components
+  theme2Components.LsgFormContainer;
+  theme2Components.LsgFormFieldText;
+  theme2Components.LsgFormFieldEmail;
+  theme2Components.LsgFormFieldTel;
+  theme2Components.LsgFormFieldTextarea;
+  theme2Components.LsgFormFieldSelect;
+  theme2Components.LsgFormFieldCountry;
+  theme2Components.LsgFormFieldConsent;
+  theme2Components.LsgFormStep;
 
 var theme3Components = createThemeComponents("theme-3");
 var Theme3LsgButton = theme3Components.LsgButton,
@@ -1419,6 +2185,16 @@ var Theme3LsgButton = theme3Components.LsgButton,
   Theme3LsgQuickLinks = theme3Components.LsgQuickLinks,
   Theme3LsgSocialMediaIcons = theme3Components.LsgSocialMediaIcons,
   Theme3LsgFooter = theme3Components.LsgFooter;
+  // Form components
+  theme3Components.LsgFormContainer;
+  theme3Components.LsgFormFieldText;
+  theme3Components.LsgFormFieldEmail;
+  theme3Components.LsgFormFieldTel;
+  theme3Components.LsgFormFieldTextarea;
+  theme3Components.LsgFormFieldSelect;
+  theme3Components.LsgFormFieldCountry;
+  theme3Components.LsgFormFieldConsent;
+  theme3Components.LsgFormStep;
 
-export { LsgBanner, LsgButton, LsgCard, LsgCards, LsgFooter, LsgHeader, LsgLanguageSwitcher, LsgLogo, LsgNavigation, LsgQuickLinks, LsgSearchOverlay, LsgSearchTrigger, LsgSocialMediaIcons, Theme1LsgBanner, Theme1LsgButton, Theme1LsgCard, Theme1LsgCards, Theme1LsgFooter, Theme1LsgHeader, Theme1LsgLanguageSwitcher, Theme1LsgLogo, Theme1LsgNavigation, Theme1LsgQuickLinks, Theme1LsgSearchOverlay, Theme1LsgSearchTrigger, Theme1LsgSocialMediaIcons, Theme2LsgBanner, Theme2LsgButton, Theme2LsgCard, Theme2LsgCards, Theme2LsgFooter, Theme2LsgHeader, Theme2LsgLanguageSwitcher, Theme2LsgLogo, Theme2LsgNavigation, Theme2LsgQuickLinks, Theme2LsgSearchOverlay, Theme2LsgSearchTrigger, Theme2LsgSocialMediaIcons, Theme3LsgBanner, Theme3LsgButton, Theme3LsgCard, Theme3LsgCards, Theme3LsgFooter, Theme3LsgHeader, Theme3LsgLanguageSwitcher, Theme3LsgLogo, Theme3LsgNavigation, Theme3LsgQuickLinks, Theme3LsgSearchOverlay, Theme3LsgSearchTrigger, Theme3LsgSocialMediaIcons, theme1Components, theme2Components, theme3Components };
+export { LsgBanner, LsgButton, LsgCard, LsgCards, LsgFooter, LsgHeader, LsgLanguageSwitcher, LsgLogo, LsgNavigation, LsgQuickLinks, LsgSearchOverlay, LsgSearchTrigger, LsgSocialMediaIcons, Theme1LsgBanner, Theme1LsgButton, Theme1LsgCard, Theme1LsgCards, Theme1LsgFooter, Theme1LsgHeader, Theme1LsgLanguageSwitcher, Theme1LsgLogo, Theme1LsgNavigation, Theme1LsgQuickLinks, Theme1LsgSearchOverlay, Theme1LsgSearchTrigger, Theme1LsgSocialMediaIcons, Theme2LsgBanner, Theme2LsgButton, Theme2LsgCard, Theme2LsgCards, Theme2LsgFooter, Theme2LsgHeader, Theme2LsgLanguageSwitcher, Theme2LsgLogo, Theme2LsgNavigation, Theme2LsgQuickLinks, Theme2LsgSearchOverlay, Theme2LsgSearchTrigger, Theme2LsgSocialMediaIcons, Theme3LsgBanner, Theme3LsgButton, Theme3LsgCard, Theme3LsgCards, Theme3LsgFooter, Theme3LsgHeader, Theme3LsgLanguageSwitcher, Theme3LsgLogo, Theme3LsgNavigation, Theme3LsgQuickLinks, Theme3LsgSearchOverlay, Theme3LsgSearchTrigger, Theme3LsgSocialMediaIcons, getTelValue, initTelPickers, theme1Components, theme2Components, theme3Components };
 //# sourceMappingURL=index.esm.js.map