@lifesg/react-design-system 1.1.0-canary.1 → 1.1.0

package/cjs/index.js

@@ -3244,6 +3244,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.pr
             `}}
 `,UnitNumberInput=({disabled:e,error:t,value:r,onChange:i,onBlur:a,onChangeRaw:n,onBlurRaw:o,readOnly:s,placeholder:l="00-8888",...p})=>{const[d,c]=React.useState(""),[u,h]=React.useState(""),[m,f]=React.useState("none"),y=React.useRef(null),g=React.useRef(null),_=React.useRef(null),x=React.useRef(d),b=React.useRef(u),v=React.useRef(m),$=e=>{x.current=e,c(e)},C=e=>{b.current=e,h(e)},S=e=>{v.current=e,f(e)};React.useEffect((()=>(document.addEventListener("mousedown",w),y.current&&y.current.addEventListener("keydown",T),()=>{document.removeEventListener("mousedown",w),y.current&&y.current.removeEventListener("keydown",T)})),[m]),React.useEffect((()=>{"floor"===m&&3===d.length&&_.current&&_.current.focus()}),[d]),React.useEffect((()=>{M(r)}),[r]);const w=t=>{e||s||y&&y.current.contains(t.target)||"none"!==v.current&&(S("none"),R())},T=e=>{"unit"===e.target.name&&"Tab"===e.code&&(S("none"),R())},k=e=>{S(e.target.name),e.target.select()},E=e=>{const t=e.target.name,r=e.target.value;"floor"===t?$(I(r)):C(I(r))},A=e=>{const t=e.target.name,r=e.target.value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/,"");"floor"===t?($(r),D(r,t)):(C(r),D(r,t))},P=e=>{"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===m&&0===u.length&&g.current.focus()},I=e=>/^[0-9]$/.test(e)?StringHelper.padValue(e,!0):e.toLocaleUpperCase(),M=e=>{if(e!==INVALID_VALUE)if(void 0===e||0===e.length)$(""),C("");else{const t=e.split("-");if(2===t.length){const e=t[0],r=t[1];$("floor"===m?e:I(e)),C("unit"===m?r:I(r))}}},D=(e,t)=>{if(!i&&!n)return;const r={floor:x.current,unit:b.current};if(r[t]=e,i){const e=F(r);i(e)}n&&n([r.floor,r.unit])},R=()=>{if(!a&&!o)return;const e={floor:I(x.current),unit:I(b.current)};if(a){const t=F(e);a(t)}o&&o([e.floor,e.unit])},F=e=>{const t=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?t.join("-"):t.every((e=>""===e))?"":INVALID_VALUE},j=e=>e.split("-");return require$$0.jsxs(InputWrapper,{ref:y,onClick:()=>{"none"===m&&g.current&&g.current.focus()},disabled:e,$error:t,$readOnly:s,"data-testid":p["data-testid"],children:[require$$0.jsx(HashContainer,{"data-testid":"addon",disabled:e,$readOnly:s,children:"#"}),s&&r?(()=>{const e=r.split("-");return require$$0.jsxs(ReadOnlyContainer,{children:[require$$0.jsx(ReadOnlyLabel,{children:e[0]}),require$$0.jsx(UnitNumberDivider,{children:"-"}),require$$0.jsx(ReadOnlyLabel,{children:e[1]})]})})():require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsx(FloorInput,{name:"floor",maxLength:3,value:d,ref:g,onFocus:k,onBlur:E,onChange:A,disabled:e,readOnly:s,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-label":"floor-input",placeholder:"floor"!==m||s?j(l)[0]:""}),require$$0.jsx(UnitNumberDivider,{$inactive:0===d.length,children:"-"}),require$$0.jsx(UnitInput,{name:"unit",maxLength:5,value:u,ref:_,onFocus:k,onBlur:E,onChange:A,onKeyDown:P,disabled:e,readOnly:s,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-label":"unit-input",placeholder:"unit"!==m||s?j(l)[1]:""})]})]})},INVALID_VALUE="Invalid unit number",FormUnitNumberInput=({label:e,errorMessage:t,id:r="form-unit-number-input","data-error-testid":i,"data-testid":a,...n})=>require$$0.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":i,disabled:n.disabled,children:require$$0.jsx(UnitNumberInput,{id:`${r}-base`,"data-testid":a||r,error:!!t,...n})});function arrayReduce$2(e,t,r,i){var a=-1,n=null==e?0:e.length;for(i&&n&&(r=e[++a]);++a<n;)r=t(r,e[a],a,e);return r}var _arrayReduce=arrayReduce$2;function createBaseFor$1(e){return function(t,r,i){for(var a=-1,n=Object(t),o=i(t),s=o.length;s--;){var l=o[e?s:++a];if(!1===r(n[l],l,n))break}return t}}var _createBaseFor=createBaseFor$1,createBaseFor=_createBaseFor,baseFor$1=createBaseFor(),_baseFor=baseFor$1,baseFor=_baseFor,keys=keys_1;function baseForOwn$1(e,t){return e&&baseFor(e,t,keys)}var _baseForOwn=baseForOwn$1,isArrayLike=isArrayLike_1;function createBaseEach$1(e,t){return function(r,i){if(null==r)return r;if(!isArrayLike(r))return e(r,i);for(var a=r.length,n=t?a:-1,o=Object(r);(t?n--:++n<a)&&!1!==i(o[n],n,o););return r}}var _createBaseEach=createBaseEach$1,baseForOwn=_baseForOwn,createBaseEach=_createBaseEach,baseEach$1=createBaseEach(baseForOwn),_baseEach=baseEach$1;function baseReduce$1(e,t,r,i,a){return a(e,(function(e,a,n){r=i?(i=!1,e):t(r,e,a,n)})),r}var _baseReduce=baseReduce$1,arrayReduce$1=_arrayReduce,baseEach=_baseEach,baseIteratee=_baseIteratee,baseReduce=_baseReduce,isArray=isArray_1;function reduce(e,t,r){var i=isArray(e)?arrayReduce$1:baseReduce,a=arguments.length<3;return i(e,baseIteratee(t),r,a,baseEach)}var reduce_1=reduce;const CountryData=[["Afghanistan",["asia"],"af","93"],["Albania",["europe"],"al","355"],["Algeria",["africa","north-africa"],"dz","213"],["Andorra",["europe"],"ad","376"],["Angola",["africa"],"ao","244"],["Antigua and Barbuda",["america","carribean"],"ag","1268"],["Argentina",["america","south-america"],"ar","54","(..) ........"],["Armenia",["asia","ex-ussr"],"am","374",".. ......"],["Aruba",["america","carribean"],"aw","297"],["Australia",["oceania"],"au","61","(..) .... ...."],["Austria",["europe","eu-union"],"at","43"],["Azerbaijan",["asia","ex-ussr"],"az","994","(..) ... .. .."],["Bahamas",["america","carribean"],"bs","1242"],["Bahrain",["middle-east"],"bh","973"],["Bangladesh",["asia"],"bd","880"],["Barbados",["america","carribean"],"bb","1246"],["Belarus",["europe","ex-ussr"],"by","375","(..) ... .. .."],["Belgium",["europe","eu-union"],"be","32","... .. .. .."],["Belize",["america","central-america"],"bz","501"],["Benin",["africa"],"bj","229"],["Bhutan",["asia"],"bt","975"],["Bolivia",["america","south-america"],"bo","591"],["Bosnia and Herzegovina",["europe","ex-yugos"],"ba","387"],["Botswana",["africa"],"bw","267"],["Brazil",["america","south-america"],"br","55","(..) ........."],["British Indian Ocean Territory",["asia"],"io","246"],["Brunei",["asia"],"bn","673"],["Bulgaria",["europe","eu-union"],"bg","359"],["Burkina Faso",["africa"],"bf","226"],["Burundi",["africa"],"bi","257"],["Cambodia",["asia"],"kh","855"],["Cameroon",["africa"],"cm","237"],["Canada",["america","north-america"],"ca","1","(...) ... ...."],["Cape Verde",["africa"],"cv","238"],["Caribbean Netherlands",["america","carribean"],"bq","599",""],["Central African Republic",["africa"],"cf","236"],["Chad",["africa"],"td","235"],["Chile",["america","south-america"],"cl","56"],["China",["asia"],"cn","86",".. ........."],["Colombia",["america","south-america"],"co","57","... ... ...."],["Comoros",["africa"],"km","269"],["Congo",["africa"],"cd","243"],["Congo",["africa"],"cg","242"],["Costa Rica",["america","central-america"],"cr","506",".... ...."],["Côte d’Ivoire",["africa"],"ci","225",".. .. .. .."],["Croatia",["europe","eu-union","ex-yugos"],"hr","385"],["Cuba",["america","carribean"],"cu","53"],["Curaçao",["america","carribean"],"cw","599",""],["Cyprus",["europe","eu-union"],"cy","357",".. ......"],["Czech Republic",["europe","eu-union"],"cz","420","... ... ..."],["Denmark",["europe","eu-union","baltic"],"dk","45",".. .. .. .."],["Djibouti",["africa"],"dj","253"],["Dominica",["america","carribean"],"dm","1767"],["Dominican Republic",["america","carribean"],"do","1",""],["Ecuador",["america","south-america"],"ec","593"],["Egypt",["africa","north-africa"],"eg","20"],["El Salvador",["america","central-america"],"sv","503",".... ...."],["Equatorial Guinea",["africa"],"gq","240"],["Eritrea",["africa"],"er","291"],["Estonia",["europe","eu-union","ex-ussr","baltic"],"ee","372",".... ......"],["Ethiopia",["africa"],"et","251"],["Fiji",["oceania"],"fj","679"],["Finland",["europe","eu-union","baltic"],"fi","358",".. ... .. .."],["France",["europe","eu-union"],"fr","33",". .. .. .. .."],["French Guiana",["america","south-america"],"gf","594"],["French Polynesia",["oceania"],"pf","689"],["Gabon",["africa"],"ga","241"],["Gambia",["africa"],"gm","220"],["Georgia",["asia","ex-ussr"],"ge","995"],["Germany",["europe","eu-union","baltic"],"de","49",".... ........"],["Ghana",["africa"],"gh","233"],["Greece",["europe","eu-union"],"gr","30"],["Grenada",["america","carribean"],"gd","1473"],["Guadeloupe",["america","carribean"],"gp","590","",0],["Guam",["oceania"],"gu","1671"],["Guatemala",["america","central-america"],"gt","502",".... ...."],["Guinea",["africa"],"gn","224"],["Guinea-Bissau",["africa"],"gw","245"],["Guyana",["america","south-america"],"gy","592"],["Haiti",["america","carribean"],"ht","509",".... ...."],["Honduras",["america","central-america"],"hn","504"],["Hong Kong",["asia"],"hk","852",".... ...."],["Hungary",["europe","eu-union"],"hu","36"],["Iceland",["europe"],"is","354","... ...."],["India",["asia"],"in","91","..... ....."],["Indonesia",["asia"],"id","62"],["Iran",["middle-east"],"ir","98","... ... ...."],["Iraq",["middle-east"],"iq","964"],["Ireland",["europe","eu-union"],"ie","353",".. ......."],["Israel",["middle-east"],"il","972","... ... ...."],["Italy",["europe","eu-union"],"it","39","... ......."],["Jamaica",["america","carribean"],"jm","1876"],["Japan",["asia"],"jp","81",".. .... ...."],["Jordan",["middle-east"],"jo","962"],["Kazakhstan",["asia","ex-ussr"],"kz","7","... ... .. .."],["Kenya",["africa"],"ke","254"],["Kiribati",["oceania"],"ki","686"],["Kosovo",["europe","ex-yugos"],"xk","383"],["Kuwait",["middle-east"],"kw","965"],["Kyrgyzstan",["asia","ex-ussr"],"kg","996","... ... ..."],["Laos",["asia"],"la","856"],["Latvia",["europe","eu-union","ex-ussr","baltic"],"lv","371",".. ... ..."],["Lebanon",["middle-east"],"lb","961"],["Lesotho",["africa"],"ls","266"],["Liberia",["africa"],"lr","231"],["Libya",["africa","north-africa"],"ly","218"],["Liechtenstein",["europe"],"li","423"],["Lithuania",["europe","eu-union","ex-ussr","baltic"],"lt","370"],["Luxembourg",["europe","eu-union"],"lu","352"],["Macau",["asia"],"mo","853"],["Macedonia",["europe","ex-yugos"],"mk","389"],["Madagascar",["africa"],"mg","261"],["Malawi",["africa"],"mw","265"],["Malaysia",["asia"],"my","60",".. .... ...."],["Maldives",["asia"],"mv","960"],["Mali",["africa"],"ml","223"],["Malta",["europe","eu-union"],"mt","356"],["Marshall Islands",["oceania"],"mh","692"],["Martinique",["america","carribean"],"mq","596"],["Mauritania",["africa"],"mr","222"],["Mauritius",["africa"],"mu","230"],["Mexico",["america","central-america"],"mx","52","... ... ...."],["Micronesia",["oceania"],"fm","691"],["Moldova",["europe"],"md","373","(..) .. .. .."],["Monaco",["europe"],"mc","377"],["Mongolia",["asia"],"mn","976"],["Montenegro",["europe","ex-yugos"],"me","382"],["Morocco",["africa","north-africa"],"ma","212"],["Mozambique",["africa"],"mz","258"],["Myanmar",["asia"],"mm","95"],["Namibia",["africa"],"na","264"],["Nauru",["africa"],"nr","674"],["Nepal",["asia"],"np","977"],["Netherlands",["europe","eu-union"],"nl","31",".. ........"],["New Caledonia",["oceania"],"nc","687"],["New Zealand",["oceania"],"nz","64","... ... ...."],["Nicaragua",["america","central-america"],"ni","505"],["Niger",["africa"],"ne","227"],["Nigeria",["africa"],"ng","234"],["North Korea",["asia"],"kp","850"],["Norway",["europe","baltic"],"no","47","... .. ..."],["Oman",["middle-east"],"om","968"],["Pakistan",["asia"],"pk","92","... ......."],["Palau",["oceania"],"pw","680"],["Palestine",["middle-east"],"ps","970"],["Panama",["america","central-america"],"pa","507"],["Papua New Guinea",["oceania"],"pg","675"],["Paraguay",["america","south-america"],"py","595"],["Peru",["america","south-america"],"pe","51"],["Philippines",["asia"],"ph","63",".... ......."],["Poland",["europe","eu-union","baltic"],"pl","48","... ... ..."],["Portugal",["europe","eu-union"],"pt","351"],["Puerto Rico",["america","carribean"],"pr","1",""],["Qatar",["middle-east"],"qa","974"],["Réunion",["africa"],"re","262"],["Romania",["europe","eu-union"],"ro","40"],["Russia",["europe","asia","ex-ussr","baltic"],"ru","7","(...) ... .. .."],["Rwanda",["africa"],"rw","250"],["Saint Kitts and Nevis",["america","carribean"],"kn","1869"],["Saint Lucia",["america","carribean"],"lc","1758"],["Saint Vincent and the Grenadines",["america","carribean"],"vc","1784"],["Samoa",["oceania"],"ws","685"],["San Marino",["europe"],"sm","378"],["São Tomé and Príncipe",["africa"],"st","239"],["Saudi Arabia",["middle-east"],"sa","966"],["Senegal",["africa"],"sn","221"],["Serbia",["europe","ex-yugos"],"rs","381"],["Seychelles",["africa"],"sc","248"],["Sierra Leone",["africa"],"sl","232"],["Singapore",["asia"],"sg","65",".... ...."],["Slovakia",["europe","eu-union"],"sk","421"],["Slovenia",["europe","eu-union","ex-yugos"],"si","386"],["Solomon Islands",["oceania"],"sb","677"],["Somalia",["africa"],"so","252"],["South Africa",["africa"],"za","27"],["South Korea",["asia"],"kr","82","... .... ...."],["South Sudan",["africa","north-africa"],"ss","211"],["Spain",["europe","eu-union"],"es","34","... ... ..."],["Sri Lanka",["asia"],"lk","94"],["Sudan",["africa"],"sd","249"],["Suriname",["america","south-america"],"sr","597"],["Swaziland",["africa"],"sz","268"],["Sweden",["europe","eu-union","baltic"],"se","46","(...) ... ..."],["Switzerland",["europe"],"ch","41",".. ... .. .."],["Syria",["middle-east"],"sy","963"],["Taiwan",["asia"],"tw","886"],["Tajikistan",["asia","ex-ussr"],"tj","992"],["Tanzania",["africa"],"tz","255"],["Thailand",["asia"],"th","66"],["Timor-Leste",["asia"],"tl","670"],["Togo",["africa"],"tg","228"],["Tonga",["oceania"],"to","676"],["Trinidad and Tobago",["america","carribean"],"tt","1868"],["Tunisia",["africa","north-africa"],"tn","216"],["Turkey",["europe"],"tr","90","... ... .. .."],["Turkmenistan",["asia","ex-ussr"],"tm","993"],["Tuvalu",["asia"],"tv","688"],["Uganda",["africa"],"ug","256"],["Ukraine",["europe","ex-ussr"],"ua","380","(..) ... .. .."],["United Arab Emirates",["middle-east"],"ae","971"],["United Kingdom",["europe","eu-union"],"gb","44",".... ......"],["United States",["america","north-america"],"us","1","(...) ... ...."],["Uruguay",["america","south-america"],"uy","598"],["Uzbekistan",["asia","ex-ussr"],"uz","998",".. ... .. .."],["Vanuatu",["oceania"],"vu","678"],["Vatican City",["europe"],"va","39",".. .... ...."],["Venezuela",["america","south-america"],"ve","58"],["Vietnam",["asia"],"vn","84"],["Yemen",["middle-east"],"ye","967"],["Zambia",["africa"],"zm","260"],["Zimbabwe",["africa"],"zw","263"]],defaultMask="... ... ... ... ..",prefix="+",getMask=(e,t,r,i)=>r?e+"".padEnd(t.length,".")+" "+r:e+"".padEnd(t.length,".")+" "+i;var PhoneNumberInputHelper;!function(e){e.getCountries=()=>[].concat(...CountryData.map((e=>({name:e[0],regions:e[1],iso2:e[2],countryCode:e[3],format:getMask(prefix,e[3],e[4],defaultMask)})))),e.formatNumber=(e="",t)=>{if(!t)return e;const r=e.replace(/[\s()]+/g,""),{format:i}=t,a=i.split(" ");a.shift();const n=a.join(" ");return reduce_1(n,((e,t)=>{if(0===e.remainingText.length)return e;if("."!==t)return{formattedText:e.formattedText+t,remainingText:e.remainingText};const[r,...i]=e.remainingText;return{formattedText:e.formattedText+r,remainingText:i}}),{formattedText:"",remainingText:r}).formattedText}}(PhoneNumberInputHelper||(PhoneNumberInputHelper={}));const PhoneNumberInput=({onChange:e,value:t,allowClear:r,onClear:i,onBlur:a,error:n,fixedCountry:o=!1,optionPlaceholder:s="Select",optionSearchPlaceholder:l,enableSearch:p,onHideOptions:d,onShowOptions:c,placeholder:u,...h})=>{const[m]=React.useState(PhoneNumberInputHelper.getCountries()),[f,y]=React.useState(void 0),[g,_]=React.useState(""),x=React.useRef();React.useEffect((()=>{const e=m.filter((e=>e.countryCode===normaliseCountryCode(t?.countryCode)))[0];y(e),_(PhoneNumberInputHelper.formatNumber(t?.number,e))}),[t]);const b=t=>{e?v(g,t):$(g,t)},v=(t,r)=>{const i=PhoneNumberInputHelper.formatNumber(t,r);e({number:i.replace(/[\s()]+/g,""),countryCode:r&&addPlusPrefix(r.countryCode)})},$=(e,t)=>{_(PhoneNumberInputHelper.formatNumber(e,t)),y(t)};return require$$0.jsx(InputGroup,{ref:x,value:g,onChange:t=>{const r=t.target.value.replace(/[^0-9]/g,"");e?v(r,f):$(r,f)},allowClear:r&&!!g,onClear:()=>{i?i():_("")},onBlur:a,error:n,placeholder:u,addon:o?{type:"label",attributes:{value:addPlusPrefix(f?.countryCode)}}:{type:"list",attributes:{placeholder:s,options:m,selectedOption:f,enableSearch:p,searchPlaceholder:l,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:addPlusPrefix(e.countryCode)}),onSelectOption:b,onHideOptions:d,onShowOptions:c}},inputMode:"numeric",...h})},normaliseCountryCode=e=>e?e.replace("+",""):"",addPlusPrefix=e=>e?e.includes("+")?e:`+${e}`:"",FormPhoneNumberInput=({label:e,errorMessage:t,id:r="form-phone-number-input","data-error-testid":i,"data-testid":a,...n})=>require$$0.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":i,disabled:n.disabled,children:require$$0.jsx(PhoneNumberInput,{id:`${r}-base`,"data-testid":a||r,error:!!t,...n})}),FormRangeSelect=({label:e,errorMessage:t,id:r="form-select","data-error-testid":i,"data-testid":a,enableSearch:n=!1,...o})=>require$$0.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":i,disabled:o.disabled,children:require$$0.jsx(InputRangeSelect,{id:`${r}-base`,"data-testid":a||r,error:!!t,enableSearch:n,...o})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,RangeSelect:FormRangeSelect,Textarea:FormTextarea,Timepicker:FormTimepicker,TimeRangePicker:FormTimeRangePicker,CustomField:FormCustomField,UnitNumberInput:FormUnitNumberInput,PhoneNumberInput:FormPhoneNumberInput},Main=styled__default.default.button`
     display: flex;
+    flex: 1;
     flex-direction: column;
     gap: 0.5rem;
     justify-content: center;
@@ -3253,12 +3254,14 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.pr
     border: 1px solid transparent;
     border-radius: 0.5rem;
     cursor: pointer;
-    width: 13rem;
+    max-width: 13rem;
     transition: all 200ms ease;
-    ${TextStyleHelper.getTextStyle("H4","semibold")}
+    ${TextStyleHelper.getTextStyle("Body","semibold")}
     color: ${({$selected:e})=>e&&Color.Primary};
+    overflow-wrap: anywhere;
 
     img {
+        min-width: 3.5rem;
         width: 3.5rem;
         height: 3.5rem;
         object-fit: contain;
@@ -3267,6 +3270,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.pr
     ${MediaQuery.MaxWidth.mobileL} {
         padding: 0.5rem 0.25rem;
         gap: 0.25rem;
+        ${TextStyleHelper.getTextStyle("BodySmall","semibold")}
     }
 
     ${e=>e.$error?styled.css`
@@ -3287,7 +3291,6 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.pr
                 &:hover {
                     border: 1px solid ${Color.Accent.Light[1]};
                     box-shadow: 0 0 4px 1px ${Color.Shadow.Accent};
-                    ${TextStyleHelper.getTextStyle("H4","bold")}
                 }
             `}
 
@@ -3299,7 +3302,6 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.pr
         img {
             filter: grayscale(100%);
         }
-        ${TextStyleHelper.getTextStyle("H4","semibold")}
         color: ${Color.Neutral[3]};
 
         outline: none;