@lifesg/react-design-system 1.0.0-alpha.21 → 1.0.0-alpha.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/index.js +5 -5
- package/accordion/index.js.map +1 -1
- package/alert/index.js +23 -23
- package/alert/index.js.map +1 -1
- package/animations/index.d.ts +1 -0
- package/animations/index.js +3 -4
- package/animations/index.js.map +1 -1
- package/animations/loading-dots/loading-dots.d.ts +2 -1
- package/animations/loading-dots-spinner/loading-dots-spinner.d.ts +2 -1
- package/animations/loading-dots-spinner/lottie-animation.d.ts +2 -1
- package/animations/loading-spinner/loading-spinner.d.ts +2 -1
- package/animations/types.d.ts +10 -0
- package/box-container/index.js +18 -18
- package/box-container/index.js.map +1 -1
- package/breadcrumb/index.js +3 -3
- package/breadcrumb/index.js.map +1 -1
- package/button/index.js +2 -2
- package/button/index.js.map +1 -1
- package/calendar/index.js +57 -57
- package/calendar/index.js.map +1 -1
- package/card/index.js +1 -1
- package/card/index.js.map +1 -1
- package/checkbox/index.js +3 -3
- package/checkbox/index.js.map +1 -1
- package/cjs/index.js +704 -238
- package/cjs/index.js.map +1 -1
- package/color/index.js +1 -1
- package/color/index.js.map +1 -1
- package/color/types.d.ts +1 -0
- package/date-input/index.js +5 -3
- package/date-input/index.js.map +1 -1
- package/design-token/index.js +6 -4
- package/design-token/index.js.map +1 -1
- package/design-token/types.d.ts +1 -0
- package/error-display/index.js +38 -38
- package/error-display/index.js.map +1 -1
- package/feedback-rating/index.js +118 -118
- package/feedback-rating/index.js.map +1 -1
- package/filter/addons/filter-item-checkbox.d.ts +3 -0
- package/filter/addons/filter-item-checkbox.styles.d.ts +12 -0
- package/filter/filter-context.d.ts +7 -0
- package/filter/filter-item-page.d.ts +3 -0
- package/filter/filter-item-page.styles.d.ts +1 -0
- package/filter/filter-item.d.ts +3 -0
- package/filter/filter-item.styles.d.ts +26 -0
- package/filter/filter.d.ts +7 -0
- package/filter/filter.styles.d.ts +17 -0
- package/filter/index.d.ts +2 -0
- package/filter/index.js +696 -0
- package/filter/index.js.map +1 -0
- package/filter/package.json +7 -0
- package/filter/types.d.ts +49 -0
- package/footer/index.js +5 -5
- package/footer/index.js.map +1 -1
- package/form/index.js +52 -50
- package/form/index.js.map +1 -1
- package/icon-button/index.js +1 -1
- package/icon-button/index.js.map +1 -1
- package/index.d.ts +3 -0
- package/index.js +701 -235
- package/index.js.map +1 -1
- package/input/index.js +7 -5
- package/input/index.js.map +1 -1
- package/input-group/index.js +5 -3
- package/input-group/index.js.map +1 -1
- package/input-select/index.js +8 -6
- package/input-select/index.js.map +1 -1
- package/input-textarea/index.js +4 -2
- package/input-textarea/index.js.map +1 -1
- package/link-list/index.js +1 -1
- package/link-list/index.js.map +1 -1
- package/modal/index.js +4 -4
- package/modal/index.js.map +1 -1
- package/navbar/brand.d.ts +5 -4
- package/navbar/brand.styles.d.ts +2 -0
- package/navbar/index.js +267 -129
- package/navbar/index.js.map +1 -1
- package/navbar/menu.d.ts +10 -0
- package/navbar/menu.styles.d.ts +5 -0
- package/navbar/navbar-items.styles.d.ts +7 -0
- package/navbar/navbar.styles.d.ts +4 -2
- package/navbar/types.d.ts +13 -5
- package/notification-banner/index.js +1 -1
- package/notification-banner/index.js.map +1 -1
- package/otp-input/index.js +8 -6
- package/otp-input/index.js.map +1 -1
- package/otp-input/otp-input.d.ts +1 -1
- package/otp-input/types.d.ts +5 -5
- package/overlay/index.js +1 -1
- package/overlay/index.js.map +1 -1
- package/package.json +1 -1
- package/phone-number-input/index.js +16 -14
- package/phone-number-input/index.js.map +1 -1
- package/popover/index.js +2 -2
- package/popover/index.js.map +1 -1
- package/progress-indicator/index.js +1 -1
- package/progress-indicator/index.js.map +1 -1
- package/radio-button/index.js +4 -4
- package/radio-button/index.js.map +1 -1
- package/shared/toggle-icon/toggle-icon.d.ts +9 -0
- package/shared/toggle-icon/toggle-icon.styles.d.ts +6 -0
- package/smart-app-banner/index.js +6 -6
- package/smart-app-banner/index.js.map +1 -1
- package/text/index.js +2 -2
- package/text/index.js.map +1 -1
- package/text-list/index.js +1 -1
- package/text-list/index.js.map +1 -1
- package/timeline/index.js +19 -19
- package/timeline/index.js.map +1 -1
- package/timepicker/index.js +23 -21
- package/timepicker/index.js.map +1 -1
- package/toggle/index.d.ts +2 -0
- package/toggle/index.js +230 -0
- package/toggle/index.js.map +1 -0
- package/toggle/package.json +7 -0
- package/toggle/toggle.d.ts +3 -0
- package/toggle/toggle.styles.d.ts +18 -0
- package/toggle/types.d.ts +30 -0
- package/toggle-button/index.js +22 -22
- package/toggle-button/index.js.map +1 -1
- package/toggle-button/toggle-button.d.ts +3 -0
- package/tooltip/index.js +1 -1
- package/tooltip/index.js.map +1 -1
- package/unit-number/index.js +10 -8
- package/unit-number/index.js.map +1 -1
package/otp-input/index.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useImperativeHandle as o,useState as a,useEffect as l}from"react";import c,{css as d,keyframes as s}from"styled-components";import"react-dom";var h="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},u=Array.isArray,p="object"==typeof h&&h&&h.Object===Object&&h,g="object"==typeof self&&self&&self.Object===Object&&self,f=p||g||Function("return this")(),m=f.Symbol,y=m,b=Object.prototype,$=b.hasOwnProperty,v=b.toString,S=y?y.toStringTag:void 0;var w=function(e){var t=$.call(e,S),n=e[S];try{e[S]=void 0;var r=!0}catch(e){}var i=v.call(e);return r&&(t?e[S]=n:delete e[S]),i},F=Object.prototype.toString;var x=w,B=function(e){return F.call(e)},H=m?m.toStringTag:void 0;var C=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":H&&H in Object(e)?x(e):B(e)};var D=C,k=function(e){return null!=e&&"object"==typeof e};var z=function(e){return"symbol"==typeof e||k(e)&&"[object Symbol]"==D(e)},_=u,
|
|
1
|
+
import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useImperativeHandle as o,useState as a,useEffect as l}from"react";import c,{css as d,keyframes as s}from"styled-components";import"react-dom";var h="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},u=Array.isArray,p="object"==typeof h&&h&&h.Object===Object&&h,g="object"==typeof self&&self&&self.Object===Object&&self,f=p||g||Function("return this")(),m=f.Symbol,y=m,b=Object.prototype,$=b.hasOwnProperty,v=b.toString,S=y?y.toStringTag:void 0;var w=function(e){var t=$.call(e,S),n=e[S];try{e[S]=void 0;var r=!0}catch(e){}var i=v.call(e);return r&&(t?e[S]=n:delete e[S]),i},F=Object.prototype.toString;var x=w,B=function(e){return F.call(e)},H=m?m.toStringTag:void 0;var C=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":H&&H in Object(e)?x(e):B(e)};var D=C,k=function(e){return null!=e&&"object"==typeof e};var z=function(e){return"symbol"==typeof e||k(e)&&"[object Symbol]"==D(e)},_=u,E=z,N=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,O=/^\w*$/;var W=function(e,t){if(_(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!E(e))||(O.test(e)||!N.test(e)||null!=t&&e in Object(t))};var A=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},T=C,j=A;var L,I=function(e){if(!j(e))return!1;var t=T(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},V=f["__core-js_shared__"],R=(L=/[^.]+$/.exec(V&&V.keys&&V.keys.IE_PROTO||""))?"Symbol(src)_1."+L:"";var P=function(e){return!!R&&R in e},M=Function.prototype.toString;var X=I,Z=P,G=A,U=function(e){if(null!=e){try{return M.call(e)}catch(e){}try{return e+""}catch(e){}}return""},K=/^\[object .+?Constructor\]$/,Y=Function.prototype,q=Object.prototype,J=Y.toString,Q=q.hasOwnProperty,ee=RegExp("^"+J.call(Q).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var te=function(e){return!(!G(e)||Z(e))&&(X(e)?ee:K).test(U(e))},ne=function(e,t){return null==e?void 0:e[t]};var re=function(e,t){var n=ne(e,t);return te(n)?n:void 0},ie=re(Object,"create"),oe=ie;var ae=function(){this.__data__=oe?oe(null):{},this.size=0};var le=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},ce=ie,de=Object.prototype.hasOwnProperty;var se=function(e){var t=this.__data__;if(ce){var n=t[e];return"__lodash_hash_undefined__"===n?void 0:n}return de.call(t,e)?t[e]:void 0},he=ie,ue=Object.prototype.hasOwnProperty;var pe=ie;var ge=ae,fe=le,me=se,ye=function(e){var t=this.__data__;return he?void 0!==t[e]:ue.call(t,e)},be=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=pe&&void 0===t?"__lodash_hash_undefined__":t,this};function $e(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}$e.prototype.clear=ge,$e.prototype.delete=fe,$e.prototype.get=me,$e.prototype.has=ye,$e.prototype.set=be;var ve=$e;var Se=function(){this.__data__=[],this.size=0};var we=function(e,t){return e===t||e!=e&&t!=t};var Fe=function(e,t){for(var n=e.length;n--;)if(we(e[n][0],t))return n;return-1},xe=Fe,Be=Array.prototype.splice;var He=Fe;var Ce=Fe;var De=Fe;var ke=Se,ze=function(e){var t=this.__data__,n=xe(t,e);return!(n<0)&&(n==t.length-1?t.pop():Be.call(t,n,1),--this.size,!0)},_e=function(e){var t=this.__data__,n=He(t,e);return n<0?void 0:t[n][1]},Ee=function(e){return Ce(this.__data__,e)>-1},Ne=function(e,t){var n=this.__data__,r=De(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this};function Oe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}Oe.prototype.clear=ke,Oe.prototype.delete=ze,Oe.prototype.get=_e,Oe.prototype.has=Ee,Oe.prototype.set=Ne;var We=Oe,Ae=re(f,"Map"),Te=ve,je=We,Le=Ae;var Ie=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e};var Ve=function(e,t){var n=e.__data__;return Ie(t)?n["string"==typeof t?"string":"hash"]:n.map},Re=Ve;var Pe=Ve;var Me=Ve;var Xe=Ve;var Ze=function(){this.size=0,this.__data__={hash:new Te,map:new(Le||je),string:new Te}},Ge=function(e){var t=Re(this,e).delete(e);return this.size-=t?1:0,t},Ue=function(e){return Pe(this,e).get(e)},Ke=function(e){return Me(this,e).has(e)},Ye=function(e,t){var n=Xe(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this};function qe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}qe.prototype.clear=Ze,qe.prototype.delete=Ge,qe.prototype.get=Ue,qe.prototype.has=Ke,qe.prototype.set=Ye;var Je=qe;function Qe(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,i=t?t.apply(this,r):r[0],o=n.cache;if(o.has(i))return o.get(i);var a=e.apply(this,r);return n.cache=o.set(i,a)||o,a};return n.cache=new(Qe.Cache||Je),n}Qe.Cache=Je;var et=Qe;var tt=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,nt=/\\(\\)?/g,rt=function(e){var t=et(e,(function(e){return 500===n.size&&n.clear(),e})),n=t.cache;return t}((function(e){var t=[];return 46===e.charCodeAt(0)&&t.push(""),e.replace(tt,(function(e,n,r,i){t.push(r?i.replace(nt,"$1"):n||e)})),t}));var it=function(e,t){for(var n=-1,r=null==e?0:e.length,i=Array(r);++n<r;)i[n]=t(e[n],n,e);return i},ot=u,at=z,lt=m?m.prototype:void 0,ct=lt?lt.toString:void 0;var dt=function e(t){if("string"==typeof t)return t;if(ot(t))return it(t,e)+"";if(at(t))return ct?ct.call(t):"";var n=t+"";return"0"==n&&1/t==-Infinity?"-0":n},st=dt;var ht=u,ut=W,pt=rt,gt=function(e){return null==e?"":st(e)};var ft=z;var mt=function(e,t){return ht(e)?e:ut(e,t)?[e]:pt(gt(e))},yt=function(e){if("string"==typeof e||ft(e))return e;var t=e+"";return"0"==t&&1/e==-Infinity?"-0":t};var bt=function(e,t){for(var n=0,r=(t=mt(t,e)).length;null!=e&&n<r;)e=e[yt(t[n++])];return n&&n==r?e:void 0};var $t=function(e,t,n){var r=null==e?void 0:bt(e,t);return void 0===r?n:r};const vt=(e,t,n)=>t?$t(n,t)||$t(e,t):n||e,St=(e,t)=>{const n=t||e.defaultValue;return $t(e.collections,n)};var wt;!function(e){e.colorScheme="colorScheme",e.layout="layout",e.textStyleScheme="textStyleScheme",e.designTokenScheme="designTokenScheme"}(wt||(wt={}));const Ft={collections:{base:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#1C76D5",PrimaryDark:"#1869BF",Secondary:"#0056b3",Accent:{Dark:{1:"#465A88",2:"#556D99",3:"#8D8DBF"},Light:{1:"#57A9FF",2:"#81BFFF",3:"#BED7FF",4:"#E2ECFD",5:"#F6F8FF",6:"#FBFCFE"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}},Shadow:{Accent:"rgba(87, 169, 255, 0.5)",Red:"rgba(221, 102, 102, 0.8)",Elevation:"rgba(75, 83, 159, 0.24)"}},bookingsg:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#6F4AB8",PrimaryDark:"#6443A6",Secondary:"#6443A6",Accent:{Dark:{1:"#355985",2:"#68819D",3:"#9AABBE"},Light:{1:"#9F82D9",2:"#B5A5D7",3:"#CEC3E4 ",4:"#E2DBEF",5:"#F2EFF8",6:"#F7F6FB"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}},Shadow:{Accent:"rgba(161, 87, 255, 0.5)",Red:"rgba(221, 102, 102, 0.8)",Elevation:"rgba(75, 83, 159, 0.24)"}}},defaultValue:"base"},xt=e=>t=>{const n=t.theme,r=St(Ft,n[wt.colorScheme]);return n.options&&n.options.color?vt(r,e,n.options.color):vt(r,e)},Bt={Brand:{1:xt("Brand.1"),2:xt("Brand.2"),3:xt("Brand.3"),4:xt("Brand.4"),5:xt("Brand.5"),6:xt("Brand.6")},Primary:xt("Primary"),PrimaryDark:xt("PrimaryDark"),Secondary:xt("Secondary"),Accent:{Light:{1:xt("Accent.Light.1"),2:xt("Accent.Light.2"),3:xt("Accent.Light.3"),4:xt("Accent.Light.4"),5:xt("Accent.Light.5"),6:xt("Accent.Light.6")},Dark:{1:xt("Accent.Dark.1"),2:xt("Accent.Dark.2"),3:xt("Accent.Dark.3")}},Neutral:{1:xt("Neutral.1"),2:xt("Neutral.2"),3:xt("Neutral.3"),4:xt("Neutral.4"),5:xt("Neutral.5"),6:xt("Neutral.6"),7:xt("Neutral.7"),8:xt("Neutral.8")},Validation:{Green:{Text:xt("Validation.Green.Text"),Icon:xt("Validation.Green.Icon"),Border:xt("Validation.Green.Border"),Background:xt("Validation.Green.Background")},Orange:{Text:xt("Validation.Orange.Text"),Icon:xt("Validation.Orange.Icon"),Border:xt("Validation.Orange.Border"),Background:xt("Validation.Orange.Background"),Badge:xt("Validation.Orange.Badge")},Red:{Text:xt("Validation.Red.Text"),Icon:xt("Validation.Red.Icon"),Border:xt("Validation.Red.Border"),Background:xt("Validation.Red.Background")}},Shadow:{Accent:xt("Shadow.Accent"),Red:xt("Shadow.Red"),Elevation:xt("Shadow.Elevation")}},Ht={collections:{base:{InputBoxShadow:d`
|
|
2
2
|
inset 0 0 6px 1px ${Bt.Shadow.Accent}
|
|
3
3
|
`,InputErrorBoxShadow:d`
|
|
4
4
|
inset 0 0 6px 1px ${Bt.Shadow.Red}
|
|
5
|
-
|
|
5
|
+
`,ElevationBoxShadow:d`
|
|
6
|
+
0px 2px 8px ${Bt.Shadow.Elevation}
|
|
7
|
+
`}},defaultValue:"base"},Ct=e=>t=>{const n=t.theme,r=St(Ht,n[wt.designTokenScheme]);return n.options?.designToken?vt(r,e,n.options.designToken):vt(r,e)},Dt=Ct("InputBoxShadow"),kt=Ct("InputErrorBoxShadow"),zt=(Ct("ElevationBoxShadow"),c.div`
|
|
6
8
|
display: flex;
|
|
7
9
|
align-items: center;
|
|
8
10
|
position: relative;
|
|
@@ -44,7 +46,7 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useIm
|
|
|
44
46
|
box-shadow: ${kt};
|
|
45
47
|
}
|
|
46
48
|
`:void 0}
|
|
47
|
-
|
|
49
|
+
`);var _t;!function(e){e.transformWithSpaces=(e,t)=>{const n="(.{"+t+"})";return e.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()},e.padValue=(e,t)=>{if("0"===e)return t?e:e.padStart(2,"0");if(""===e)return e;return parseInt(e).toString().padStart(2,"0")},e.shouldTruncateToTwoLines=(e,t)=>{const n=Math.floor(t/9);return e.length>=2*n||1===e.split(" ").length&&e.length>n},e.truncateOneLine=(e,t,n,r)=>{let i=0;t>n&&(i=Math.floor((t-n)/8));const o=r+i;if(o<e.length){const t=Math.floor(o/2);return e.substring(0,t)+" ... "+e.substring(e.length-t,e.length)}return e}}(_t||(_t={}));var Et,Nt={};Object.defineProperty(Nt,"__esModule",{value:!0});var Ot=e;const Wt=e=>Ot.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:Ot.jsx("path",{d:"M9.99991 11.229L5.97891 15.25C5.81224 15.4167 5.61091 15.4967 5.37491 15.49C5.13891 15.4827 4.93757 15.3957 4.77091 15.229C4.60424 15.0623 4.52091 14.8577 4.52091 14.615C4.52091 14.3717 4.60424 14.1667 4.77091 14L8.77091 10L4.74991 5.979C4.58324 5.81233 4.50324 5.60767 4.50991 5.365C4.51724 5.12167 4.60424 4.91667 4.77091 4.75C4.93757 4.58333 5.14224 4.5 5.38491 4.5C5.62824 4.5 5.83324 4.58333 5.99991 4.75L9.99991 8.771L14.0209 4.75C14.1876 4.58333 14.3922 4.5 14.6349 4.5C14.8782 4.5 15.0832 4.58333 15.2499 4.75C15.4166 4.91667 15.4999 5.12167 15.4999 5.365C15.4999 5.60767 15.4166 5.81233 15.2499 5.979L11.2289 10L15.2499 14.021C15.4166 14.1877 15.4999 14.389 15.4999 14.625C15.4999 14.861 15.4166 15.0623 15.2499 15.229C15.0832 15.3957 14.8782 15.479 14.6349 15.479C14.3922 15.479 14.1876 15.3957 14.0209 15.229L9.99991 11.229Z",fill:"currentColor"})});Wt.displayName="CrossIcon",Et=Nt.CrossIcon=Wt;const At={Regular:"Open Sans",Semibold:"Open Sans Semibold",Bold:"Open Sans Bold",Light:"Open Sans Light"},Tt={collections:{base:{D1:{fontFamily:At.Bold,fontSize:3,fontWeight:700,lineHeight:4,letterSpacing:-.056},D2:{fontFamily:At.Bold,fontSize:2.5,fontWeight:700,lineHeight:3.5,letterSpacing:-.032},D3:{fontFamily:At.Bold,fontSize:1.625,fontWeight:700,lineHeight:2.25},D4:{fontFamily:At.Bold,fontSize:1.375,fontWeight:700,lineHeight:1.75},DBody:{fontFamily:At.Regular,fontSize:1.375,lineHeight:1.75},H1:{fontFamily:At.Bold,fontSize:2,fontWeight:700,lineHeight:2.5},H2:{fontFamily:At.Bold,fontSize:1.625,fontWeight:700,lineHeight:2.25},H3:{fontFamily:At.Bold,fontSize:1.375,fontWeight:700,lineHeight:1.75},H4:{fontFamily:At.Bold,fontSize:1.125,fontWeight:700,lineHeight:1.625},H5:{fontFamily:At.Bold,fontSize:1,fontWeight:700,lineHeight:1.5,letterSpacing:.014},H6:{fontFamily:At.Bold,fontSize:.875,fontWeight:700,lineHeight:1.6,letterSpacing:.012},Body:{fontFamily:At.Regular,fontSize:1.125,lineHeight:1.625},BodySmall:{fontFamily:At.Regular,fontSize:1,lineHeight:1.5,letterSpacing:.014},XSmall:{fontFamily:At.Regular,fontSize:.75,lineHeight:1.2,letterSpacing:.012}}},defaultValue:"base"},jt=e=>t=>{const n=t.theme,r=St(Tt,n[wt.textStyleScheme]);return n.options&&n.options.textStyle?vt(r,e,n.options.textStyle):vt(r,e)},Lt={D1:{fontFamily:jt("D1.fontFamily"),fontSize:jt("D1.fontSize"),fontWeight:jt("D1.fontWeight"),lineHeight:jt("D1.lineHeight"),letterSpacing:jt("D1.letterSpacing")},D2:{fontFamily:jt("D2.fontFamily"),fontSize:jt("D2.fontSize"),fontWeight:jt("D2.fontWeight"),lineHeight:jt("D2.lineHeight"),letterSpacing:jt("D2.letterSpacing")},D3:{fontFamily:jt("D3.fontFamily"),fontSize:jt("D3.fontSize"),fontWeight:jt("D3.fontWeight"),lineHeight:jt("D3.lineHeight"),letterSpacing:jt("D3.letterSpacing")},D4:{fontFamily:jt("D4.fontFamily"),fontSize:jt("D4.fontSize"),fontWeight:jt("D4.fontWeight"),lineHeight:jt("D4.lineHeight"),letterSpacing:jt("D4.letterSpacing")},DBody:{fontFamily:jt("DBody.fontFamily"),fontSize:jt("DBody.fontSize"),fontWeight:jt("DBody.fontWeight"),lineHeight:jt("DBody.lineHeight"),letterSpacing:jt("DBody.letterSpacing")},H1:{fontFamily:jt("H1.fontFamily"),fontSize:jt("H1.fontSize"),fontWeight:jt("H1.fontWeight"),lineHeight:jt("H1.lineHeight"),letterSpacing:jt("H1.letterSpacing")},H2:{fontFamily:jt("H2.fontFamily"),fontSize:jt("H2.fontSize"),fontWeight:jt("H2.fontWeight"),lineHeight:jt("H2.lineHeight"),letterSpacing:jt("H2.letterSpacing")},H3:{fontFamily:jt("H3.fontFamily"),fontSize:jt("H3.fontSize"),fontWeight:jt("H3.fontWeight"),lineHeight:jt("H3.lineHeight"),letterSpacing:jt("H3.letterSpacing")},H4:{fontFamily:jt("H4.fontFamily"),fontSize:jt("H4.fontSize"),fontWeight:jt("H4.fontWeight"),lineHeight:jt("H4.lineHeight"),letterSpacing:jt("H4.letterSpacing")},H5:{fontFamily:jt("H5.fontFamily"),fontSize:jt("H5.fontSize"),fontWeight:jt("H5.fontWeight"),lineHeight:jt("H5.lineHeight"),letterSpacing:jt("H5.letterSpacing")},H6:{fontFamily:jt("H6.fontFamily"),fontSize:jt("H6.fontSize"),fontWeight:jt("H6.fontWeight"),lineHeight:jt("H6.lineHeight"),letterSpacing:jt("H6.letterSpacing")},Body:{fontFamily:jt("Body.fontFamily"),fontSize:jt("Body.fontSize"),fontWeight:jt("Body.fontWeight"),lineHeight:jt("Body.lineHeight"),letterSpacing:jt("Body.letterSpacing")},BodySmall:{fontFamily:jt("BodySmall.fontFamily"),fontSize:jt("BodySmall.fontSize"),fontWeight:jt("BodySmall.fontWeight"),lineHeight:jt("BodySmall.lineHeight"),letterSpacing:jt("BodySmall.letterSpacing")},XSmall:{fontFamily:jt("XSmall.fontFamily"),fontSize:jt("XSmall.fontSize"),fontWeight:jt("XSmall.fontWeight"),lineHeight:jt("XSmall.lineHeight"),letterSpacing:jt("XSmall.letterSpacing")}},It=e=>{switch(e){case 700:case"bold":return At.Bold;case 600:case"semibold":return At.Semibold;case 300:case"light":return At.Light;case 400:case"regular":return At.Regular;default:return""}},Vt=(e,t)=>n=>{const r=Lt[e].fontFamily(n),i=Lt[e].fontWeight(n);return Object.values(At).includes(r)?d`
|
|
48
50
|
font-family: ${It(t)||It(i)||r};
|
|
49
51
|
font-weight: normal !important;
|
|
50
52
|
`:d`
|
|
@@ -111,7 +113,7 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useIm
|
|
|
111
113
|
color: ${Bt.Neutral[3]};
|
|
112
114
|
background-color: transparent;
|
|
113
115
|
border: none;
|
|
114
|
-
`,Gt=c(
|
|
116
|
+
`,Gt=c(Et)`
|
|
115
117
|
height: 1.25rem;
|
|
116
118
|
width: 1.25rem;
|
|
117
119
|
`,Ut=r.forwardRef((({value:e,spacing:r,type:a,error:l,disabled:c,readOnly:d,onChange:s,onClear:h,allowClear:u=!1,className:p,...g},f)=>{const m=i();o(f,(()=>m.current),[]);const y=()=>"tel"===a&&r,b=e=>{const t=e.target,n=t.value,r=t.value.replace(/\s/g,"");t.value=r,s(e),t.value=n},$=e?(e=>e?y()?_t.transformWithSpaces(e,r):e:"")(e):e;return t(zt,{disabled:c,$error:l,$readOnly:d,className:p,children:[n(Xt,{"data-testid":"input",ref:m,disabled:c,value:$,onChange:e=>{s&&(y()?b(e):s(e))},type:a,readOnly:d,...g}),u&&!c&&!d&&!!e&&n(Zt,{onClick:()=>{h&&h(),m&&m.current&&m.current.focus()},children:n(Gt,{})})]})})),Kt={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},Yt=e=>Object.keys(Kt).reduce(((t,n)=>{const r=Kt[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),qt=Yt("max-width"),Jt=(Yt("min-width"),c.div`
|
|
@@ -488,7 +490,7 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useIm
|
|
|
488
490
|
:focus-visible {
|
|
489
491
|
outline: 4px solid ${Bt.Accent.Light[1]};
|
|
490
492
|
}
|
|
491
|
-
`,Dn=c(
|
|
493
|
+
`,Dn=c(Et)`
|
|
492
494
|
height: 1.5rem;
|
|
493
495
|
width: 1.5rem;
|
|
494
496
|
color: ${Bt.Neutral[4]};
|
|
@@ -596,5 +598,5 @@ import e,{jsxs as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useIm
|
|
|
596
598
|
outline: none;
|
|
597
599
|
`;c(dn.BodySmall)`
|
|
598
600
|
color: ${e=>e.disabled?Bt.Neutral[4](e):Bt.Neutral[3](e)};
|
|
599
|
-
`;const _n=e=>n(zn,{weight:"semibold",...e}),
|
|
601
|
+
`;const _n=e=>n(zn,{weight:"semibold",...e}),En=({id:e,value:r=[],"data-testid":o,className:c,cooldownDuration:d,actionButtonProps:s,errorMessage:h,numOfInput:u,onChange:p,onCooldownStart:g,onCooldownEnd:f,...m})=>{const{disabled:y,onClick:b,styleType:$="secondary",...v}=s??{},S=i([]),w=i(p),[F,x]=a(new Array(u).fill("")),[B,H]=a(d),[C,D]=a(new Date);l((()=>(S?.current[0]?.focus(),document.addEventListener("paste",_),()=>document.removeEventListener("paste",_))),[]),l((()=>{if(0!==d){g&&g();const e=O();return()=>e()}}),[C]),l((()=>{w.current=p}),[p]),l((()=>{r.length===u&&x(r)}),[r]);const k=e=>t=>{const n=t.target.value.replace(/[^0-9]/g,"");if(E(n)){const t=[...F];t[e]=n.substring(n.length-1),S.current[e+1]?.focus(),x(t),p&&p(t)}},z=e=>t=>{const{key:n,code:r}=t;if("Backspace"===n||"Backspace"===r){const t=[...F];""!==t[e]?t[e]="":0!==e&&(t[e-1]="",S.current[e-1]?.focus()),x(t),p&&p(t)}},_=e=>{const t=e.clipboardData.getData("text"),n=t.split("");t&&E(t,u)?(x(n),w.current&&w.current(n)):e.preventDefault()},E=(e,t=1)=>!!e&&RegExp(`^[0-9]{${t}}$`).test(e),N=()=>{const e=Date.now(),t=1e3*d;return e<C.valueOf()+t},O=()=>{const e=setInterval((()=>{const t=Date.now(),n=1e3*d,r=Math.ceil((C.valueOf()+n-t)/1e3);H(r),r<=0&&(f&&f(),clearInterval(e))}),1e3);return()=>{clearInterval(e)}},W=(e,t,n)=>n?`${n}-${t}-${e+1}`:`${t}-${e+1}`;return t(yn,{id:e,"data-testid":o,className:c,children:[n(bn,{children:F.map(((t,r)=>n($n,{id:W(r,"otp-input",e),"data-testid":W(r,"otp-input",o),ref:e=>S.current[r]=e,type:"text",inputMode:"numeric",value:t,error:!!h,onChange:k(r),onKeyDown:z(r),...m},r)))}),h&&n(_n,{children:h}),n(vn,{styleType:$,...v,onClick:e=>{x(new Array(u).fill("")),N()||(D(new Date),H(d)),b&&b(e)},disabled:y||N(),children:v.children?v.children:"Resend OTP"+(B?` in ${B} second${B>1?"s":""}`:"")})]})};export{En as OtpInput};
|
|
600
602
|
//# sourceMappingURL=index.js.map
|