globuswebcomponents 0.7.8 → 0.7.9

package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-input-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown/gb-input-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AACxH,OAAO,EAAoE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAM1H,MAAM,OAAO,eAAe;;;;;yBAIG,KAAK;qBACV,EAAE;2BACI,EAAE;;wBAEL,EAAE;;+BAEM,KAAK;wBACb,EAAE;oBACL,KAAK;2BACC,EAAE;;8BAEE,KAAK;;0BAET,KAAK;;8BAED,EAAE;4BACH,KAAK;6BACN,EAAE;+BACA,EAAE;;;IAOpC,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAGD,kBAAkB,CAAC,KAAiB;QAClC,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACjE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACzC,CAAC;IACH,CAAC;IAED,cAAc,CAAC,YAAY;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;QAC/E,OAAO,KAAK,KAAK,SAAS,CAAC;IAC7B,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,aAAa;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,SAAgB;QAChC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC7B,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAC9B,OAAO,CAAC,CAAC,CAAC,CAAC,yBAAyB;YACtC,CAAC;iBAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACrC,OAAO,CAAC,CAAC,CAAC,6BAA6B;YACzC,CAAC;YACD,OAAO,CAAC,CAAC,CAAC,gDAAgD;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,kCAAkC;QAElC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;YAEtE,IAAI,UAAU,EAAE,CAAC;gBACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1E,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBAEtB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzC,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACzD,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC,cAAc,KAAK,IAAI,CAAC,CAAC;gBAChG,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACzD,CAAC;gBACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC9C,CAAC;YAED,6DAA6D;YAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QACpE,CAAC;aAAM,CAAC;YACN,4CAA4C;YAC5C,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;YACzD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,0BAA0B;YACpD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,2BAA2B;YAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,qBAAqB;YAChD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,eAAe,CAAC,IAAI;QAClB,2CAA2C;QAC3C,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;YAEtE,IAAI,UAAU,EAAE,CAAC;gBACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1E,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBAEtB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzC,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACzD,CAAC;YACH,CAAC;YAED,6DAA6D;YAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QACpE,CAAC;QAED,sEAAsE;QACtE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,yDAAyD;QACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,oEAAoE;QACtE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAEvJ,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC9D,CAAC;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAEnE,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACrE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAC;QAErF,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAEpD,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;QACpB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO;YACL,4DAAK,KAAK,EAAE,4BAA4B,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;gBAC/G,4DAAK,KAAK,EAAE,kBAAkB;oBAC3B,IAAI,CAAC,SAAS,IAAI,CACjB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,KAAK,CACT,CACL;oBACD,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;wBAC7F,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAC/B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;4BAC5F,6DACE,CAAC,EAAC,0QAA0Q,EAC5Q,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB;4BACF,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB,CACE,CACP;wBACA,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAAI,CACjC;4BACG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gCAC5F,6DACE,CAAC,EAAC,0QAA0Q,EAC5Q,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB;gCACF,6DACE,CAAC,EAAC,wLAAwL,EAC1L,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB,CACE,CACP;4BACA,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAC1B,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,iBAAe,IAAI,CAAC,UAAU;gCACnF,2DAAI,IAAI,EAAC,UAAU,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAM,CAC5F,CACb,CACA,CACJ;wBACA,IAAI,CAAC,eAAe,IAAI,kBAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAK,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAAC,CAAC,CAAC,IAAI,CAAI;wBACjJ,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,CAC9B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,IAAI,EAAE;4BACtH,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,CACzC,CACP;wBACD,4DAAK,KAAK,EAAC,aAAa;4BACtB;gCACG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,kBACG,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,WAAW,CACf,CACL,CACA,CACJ;gCACA,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAC1B;oCACE,4DAAK,KAAK,EAAE,SAAS;wCACnB,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACjG,IAAI,CAAC,IAAI,KAAK,MAAM;4CACnB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,WAAK,KAAK,EAAC,WAAW;gDACpB,cAAQ,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oDACpG,SAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAK;oDACvD,UAAI,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,oBAAoB,IAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAC5D,CACE,CACL,CACP,CAAC;4CACJ,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CACtB;wCACL,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iCAAiC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACrE,IAAI,CAAC,IAAI,KAAK,MAAM;4CACnB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,0BAA0B;4CACrF,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC1B,CACP,CACG,CACL,CACJ,CACA,CACC;wBACL,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAE,WAAW;4BACrB,gGAAuC,IAAI;gCACzC,6DAAM,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,GAAQ;gCAC/C,6DAAM,IAAI,EAAC,yBAAyB,EAAC,IAAI,EAAC,iBAAiB,GAAQ,CACnD,CACd,CACP;wBACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CACzB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;4BAC9D,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;gCACnH,6DACE,CAAC,EAAC,2EAA2E,EAC7E,MAAM,EAAC,SAAS,kBACH,SAAS,oBACP,OAAO,qBACN,OAAO,GACvB,CACE,CACF,CACP,CACG,CACF;gBACL,IAAI,CAAC,YAAY,IAAI,CACpB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,QAAQ,CACZ,CACL,CACG;YACN,kBACG,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IACjF,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACtB;gBACG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC9B,mCACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACzF,KAAK,EAAE,SAAS,CAAC,OAAO,qBACP,IAAI,CAAC,cAAc,EACpC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBAE1C,SAAG,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAK;oBAC9B,SAAG,IAAI,EAAC,iBAAiB;;wBAAG,IAAI,CAAC,QAAQ,CAAK,CAClB,CAC/B,CAAC;gBACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,mCACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACzF,KAAK,EAAE,SAAS,CAAC,OAAO,qBACP,IAAI,CAAC,cAAc,EACpC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBAE1C,SAAG,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAK;oBAC9B,SAAG,IAAI,EAAC,iBAAiB;;wBAAG,IAAI,CAAC,QAAQ,CAAK,CAClB,CAC/B,CAAC,CACD,CACJ,CAAC,CAAC,CAAC,CACF,kBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,mCACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACzF,KAAK,EAAE,SAAS,CAAC,OAAO,qBACP,IAAI,CAAC,cAAc,EACpC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAEzC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC1B;gBACE,SAAG,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAK;gBAC9B,UAAI,IAAI,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAM;gBACzF,SAAG,IAAI,EAAC,iBAAiB;;oBAAG,IAAI,CAAC,QAAQ,CAAK,CAC7C,CACJ,CAAC,CAAC,CAAC,CACF,SAAG,IAAI,EAAC,MAAM,IAAE,IAAI,CAAK,CAC1B,CAC2B,CAC/B,CAAC,CACD,CACJ,CACG,CACP,CACA;SACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Element, State, getAssetPath, Event, EventEmitter, Listen } from \"@stencil/core\";\r\nimport { AvatarColorTypes, DropdownItemTypes, DropdownTypes, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n@Component({\r\n  tag: 'gb-input-dropdown',\r\n  styleUrl: 'gb-input-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdown {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop({ mutable: true }) state: 'default' | 'focused' | 'disabled' | 'filled';\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHintText: boolean;\r\n  @Prop() hintText: string = '';\r\n  @Prop() showHelpIcon: boolean;\r\n  @Prop() showLeadingIcon: boolean = false;\r\n  @Prop() iconSwap: string = '';\r\n  @Prop() text: boolean = false;\r\n  @Prop() leadingIcon: string = '';\r\n  @Prop({ mutable: true }) items: DropdownItemTypes[];\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() menuPosition: 'top' | ' bottom';\r\n  @State() leadingIconSvg: string = '';\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() selectedItems: any[] = [];\r\n  @State() unselectedItems: any[] = [];\r\n  @State() selectedItem: any;\r\n  @Element() el: HTMLElement;\r\n  @Event() dropdownValue: EventEmitter<any>;\r\n\r\n  dropdownRef!: HTMLElement;\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.dropdownOpen && !this.el.contains(event.target as Node)) {\r\n      this.dropdownOpen = false;\r\n    }\r\n  }\r\n\r\n  toggleDropdown() {\r\n    if (this.state !== 'disabled') {\r\n      this.dropdownOpen = !this.dropdownOpen;\r\n    }\r\n  }\r\n\r\n  isItemSelected(selectedItem) {\r\n    const found = this.selectedItems.find(item => item.name === selectedItem.name);\r\n    return found !== undefined;\r\n  }\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  getAvatarSize() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'xs';\r\n      case 'md':\r\n        return 'xs';\r\n    }\r\n  }\r\n\r\n  sortDropdownItems(menuItems: any[]): any[] {\r\n    return menuItems.sort((a, b) => {\r\n      if (a.selected && !b.selected) {\r\n        return -1; // Move selected items up\r\n      } else if (!a.selected && b.selected) {\r\n        return 1; // Keep unselected items down\r\n      }\r\n      return 0; // Keep order if both are selected or unselected\r\n    });\r\n  }\r\n\r\n  handleItemSelect(item) {\r\n    // item.selected = !item.selected;\r\n\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n        item.selected = false;\r\n\r\n        if (!this.unselectedItems.includes(item)) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n      } else {\r\n        this.selectedItem = item;\r\n        item.selected = true;\r\n        this.selectedItems.push(this.selectedItem);\r\n        if (item.selected) {\r\n          this.unselectedItems = this.unselectedItems.filter(unselectedItem => unselectedItem !== item);\r\n        } else {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n        this.dropdownValue.emit(this.selectedItems);\r\n      }\r\n\r\n      // Update the state based on whether there are selected items\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    } else {\r\n      // For other types, allow only one selection\r\n      this.selectedItems = [item]; // Replace with the new item\r\n      this.selectedItem = item; // Store the selected item\r\n      this.state = 'filled'; // Update state to 'filled'\r\n      this.dropdownOpen = false; // Close the dropdown\r\n      this.dropdownValue.emit(this.selectedItem);\r\n    }\r\n  }\r\n\r\n  handleTagRemove(item) {\r\n    // Remove the item from selectedItems array\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n        item.selected = false;\r\n\r\n        if (!this.unselectedItems.includes(item)) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n      }\r\n\r\n      // Update the state based on whether there are selected items\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    }\r\n\r\n    // For non-tags type, set selectedItem to null if that item is removed\r\n    if (this.type !== 'tags' && this.selectedItem === item) {\r\n      this.selectedItem = null;\r\n    }\r\n\r\n    // Update state based on whether there are selected items\r\n    this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.leadingIcon);\r\n\r\n    if (this.type === 'tags') {\r\n      // this.unselectedItems = this.items.filter(item => !item.selected);\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const items = [{ name: 'Emmanuel Kadiri', username: 'KD', selected: false }, { name: 'Gideon Ogunkola', username: 'gideon', selected: false }, 45, 64];\r\n\r\n    this.items = items;\r\n\r\n    if (this.type !== 'tags') {\r\n      document.addEventListener('click', this.handleClickOutside);\r\n    }\r\n\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    slottedInitials.classList.add('text-xxs-semi-bold');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div class={`input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`} onClick={() => this.toggleDropdown()}>\r\n        <div class={`input_with_label`}>\r\n          {this.showLabel && (\r\n            <p class=\"text-sm-regular\" style={{ color: '#4B5565' }}>\r\n              {this.label}\r\n            </p>\r\n          )}\r\n          <div class={`input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`}>\r\n            {this.type === 'icon_leading' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <>\r\n                {this.state === 'default' && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                    />\r\n                    <path\r\n                      d=\"M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.state === 'filled' && (\r\n                  <gb-avatar size=\"xs\" text={this.text} color={this.color} show-border={this.showBorder}>\r\n                    <h1 slot=\"initials\">{this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                  </gb-avatar>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.showLeadingIcon && <>{this.type === 'search' || this.type === 'tags' ? <div class={`icon`} innerHTML={this.leadingIconSvg}></div> : null}</>}\r\n            {this.type === 'dot_leading' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`dot ${this.size}`}>\r\n                <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#079455\" />\r\n              </svg>\r\n            )}\r\n            <div class=\"placeholder\">\r\n              <>\r\n                {this.state === 'default' && (\r\n                  <>\r\n                    {this.placeholder && (\r\n                      <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n                        {this.placeholder}\r\n                      </p>\r\n                    )}\r\n                  </>\r\n                )}\r\n                {this.state === 'filled' && (\r\n                  <>\r\n                    <div class={`content`}>\r\n                      <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n                        {this.type === 'tags'\r\n                          ? this.selectedItems.map((item, index) => (\r\n                              <div class=\"added_tag\">\r\n                                <gb-tag size=\"sm\" icon=\"avatar\" action=\"X_close\" key={index} onClick={() => this.handleTagRemove(item)}>\r\n                                  <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                  <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                    {item.name.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                                  </h1>\r\n                                </gb-tag>\r\n                              </div>\r\n                            ))\r\n                          : this.selectedItem.name}\r\n                      </div>\r\n                      {this.supportingText && (\r\n                        <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n                          {this.type === 'tags'\r\n                            ? this.selectedItems.map(item => item.username).join(', ') // For multiple selections\r\n                            : this.selectedItem.username}\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  </>\r\n                )}\r\n              </>\r\n            </div>\r\n            {this.showHelpIcon && (\r\n              <div class={`help_icon`}>\r\n                <gb-help-tooltip show-supporting-text={true}>\r\n                  <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                  <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                </gb-help-tooltip>\r\n              </div>\r\n            )}\r\n            {this.type !== 'search' && (\r\n              <div class={`dropdown_icon ${this.dropdownOpen ? 'opened' : ''}`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                  <path\r\n                    d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                    stroke=\"#697586\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n        {this.showHintText && (\r\n          <p class=\"text-sm-regular\" style={{ color: '#697586' }}>\r\n            {this.hintText}\r\n          </p>\r\n        )}\r\n      </div>,\r\n      <>\r\n        {this.dropdownOpen && (\r\n          <div class={`dropdown_menu ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n            {this.type === 'tags' ? (\r\n              <>\r\n                {this.selectedItems.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n                {this.unselectedItems.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <>\r\n                {this.items.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    color={this.color}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    {typeof item === 'object' ? (\r\n                      <>\r\n                        <p slot=\"name\">{item.name}</p>\r\n                        <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                        <p slot=\"supporting_text\">@{item.username}</p>\r\n                      </>\r\n                    ) : (\r\n                      <p slot=\"name\">{item}</p>\r\n                    )}\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n              </>\r\n            )}\r\n          </div>\r\n        )}\r\n      </>,\r\n    ];\r\n  }\r\n}    \r\n        "]}
+{"version":3,"file":"gb-input-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown/gb-input-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment, Element, State, getAssetPath, Event, EventEmitter, Listen } from \"@stencil/core\";\r\nimport { AvatarColorTypes, DropdownItemTypes, DropdownTypes, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n@Component({\r\n  tag: 'gb-input-dropdown',\r\n  styleUrl: 'gb-input-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdown {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop({ mutable: true }) state: 'default' | 'focused' | 'disabled' | 'filled';\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHintText: boolean;\r\n  @Prop() hintText: string = '';\r\n  @Prop() showHelpIcon: boolean;\r\n  @Prop() showLeadingIcon: boolean = false;\r\n  @Prop() iconSwap: string = '';\r\n  @Prop() text: boolean = false;\r\n  @Prop() leadingIcon: string = '';\r\n  @Prop() icon: 'country' | 'avatar' | 'dot';\r\n  @Prop({ mutable: true }) items: DropdownItemTypes[] = [\r\n    { name: 'Mock Item A', username: 'A', selected: false },\r\n    { name: 'Mock Item B', username: 'B', selected: false },\r\n    { name: 'Mock Item C', username: 'C', selected: false },\r\n\r\n    // 45, 50, 20, 25, 90\r\n\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n  ];\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() menuPosition: 'top' | ' bottom';\r\n  @State() leadingIconSvg: string = '';\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() selectedItems: any[] = [];\r\n  @State() unselectedItems: any[] = [];\r\n  @State() selectedItem: any;\r\n  @Element() el: HTMLElement;\r\n  @Event() dropdownValue: EventEmitter<any>;\r\n\r\n  dropdownRef!: HTMLElement;\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.dropdownOpen && !this.el.contains(event.target as Node)) {\r\n      this.dropdownOpen = false;\r\n    }\r\n  }\r\n\r\n  toggleDropdown() {\r\n    if (this.state !== 'disabled') {\r\n      this.dropdownOpen = !this.dropdownOpen;\r\n    }\r\n  }\r\n\r\n  isItemSelected(selectedItem) {\r\n    const found = this.selectedItems.find(item => item.name === selectedItem.name);\r\n    return found !== undefined;\r\n  }\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  getAvatarSize() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'xs';\r\n      case 'md':\r\n        return 'xs';\r\n    }\r\n  }\r\n\r\n  sortDropdownItems(menuItems: any[]): any[] {\r\n    return menuItems.sort((a, b) => {\r\n      if (a.selected && !b.selected) {\r\n        return -1; // Move selected items up\r\n      } else if (!a.selected && b.selected) {\r\n        return 1; // Keep unselected items down\r\n      }\r\n      return 0; // Keep order if both are selected or unselected\r\n    });\r\n  }\r\n\r\n  handleItemSelect(item) {\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        // Unselect item if it exists\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n        item.selected = false;\r\n        this.unselectedItems = [...this.unselectedItems, item];\r\n      } else {\r\n        // Select item\r\n        item.selected = true;\r\n        this.selectedItems = [...this.selectedItems, item];\r\n        this.unselectedItems = this.unselectedItems.filter(unselectedItem => unselectedItem.name !== item.name);\r\n      }\r\n\r\n      // Emit selected items for tags\r\n      this.dropdownValue.emit(this.selectedItems);\r\n    } else {\r\n      // For single selection types (non-tags)\r\n      this.selectedItem = item;\r\n      this.selectedItems = [item]; // Ensure only one item is selected\r\n      this.state = 'filled';\r\n\r\n      // Emit the single selected item\r\n      this.dropdownValue.emit(this.selectedItem);\r\n\r\n      // Close dropdown after selection\r\n      this.dropdownOpen = false;\r\n    }\r\n\r\n    // Update the dropdown state\r\n    this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n  }\r\n\r\n  handleTagRemove(item) {\r\n    // Remove the item from selectedItems array\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n        item.selected = false;\r\n\r\n        if (!this.unselectedItems.includes(item)) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n      }\r\n\r\n      // Update the state based on whether there are selected items\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    }\r\n\r\n    // For non-tags type, set selectedItem to null if that item is removed\r\n    if (this.type !== 'tags' && this.selectedItem === item) {\r\n      this.selectedItem = null;\r\n    }\r\n\r\n    // Update state based on whether there are selected items\r\n    this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.leadingIcon);\r\n\r\n    if (this.items && this.items.every(item => typeof item === 'object')) {\r\n      if (this.type === 'tags') {\r\n        this.selectedItems = this.items.filter(item => item.selected);\r\n        this.unselectedItems = this.items.filter(item => !item.selected);\r\n      }\r\n    } else if (this.items && this.items.every(item => typeof item === 'string' || 'number')) {\r\n      this.selectedItem = this.items.find(item => item) || null;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.type !== 'tags') {\r\n      document.addEventListener('click', this.handleClickOutside);\r\n    }\r\n\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    if(slottedInitials) {\r\n      slottedInitials.classList.add('text-xxs-semi-bold');\r\n    }\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div class={`input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`} onClick={() => this.toggleDropdown()}>\r\n        <div class={`input_with_label`}>\r\n          {this.showLabel && (\r\n            <p class=\"text-sm-regular\" style={{ color: '#4B5565' }}>\r\n              {this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}\r\n            </p>\r\n          )}\r\n          <div class={`input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`}>\r\n            {this.type === 'icon_leading' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <>\r\n                {this.state === 'default' && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                    />\r\n                    <path\r\n                      d=\"M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.state === 'filled' && (\r\n                  <gb-avatar size=\"xs\" text={this.text} color={this.color} show-border={this.showBorder}>\r\n                    <h1 slot=\"initials\">{this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                  </gb-avatar>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.showLeadingIcon && <>{this.type === 'search' || this.type === 'tags' ? <div class={`icon`} innerHTML={this.leadingIconSvg}></div> : null}</>}\r\n            {this.type === 'dot_leading' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`dot ${this.size}`}>\r\n                <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#079455\" />\r\n              </svg>\r\n            )}\r\n            <div class=\"placeholder\">\r\n              <>\r\n                {this.state === 'default' && (\r\n                  <>\r\n                    {this.placeholder && (\r\n                      <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n                        {this.placeholder}\r\n                      </p>\r\n                    )}\r\n                  </>\r\n                )}\r\n                {this.state === 'filled' && (\r\n                  <>\r\n                    <div class={`content`}>\r\n                      <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n                        {/* {this.type === 'tags'\r\n                          ? this.selectedItems.map((item, index) => (\r\n                              <>\r\n                                <div class=\"added_tag\">\r\n                                  <gb-tag size=\"sm\" icon={!this.icon ? 'avatar' : this.icon} action=\"X_close\" key={index} onClick={() => this.handleTagRemove(item)}>\r\n                                    <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                    <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                      {item.name.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                                    </h1>\r\n                                  </gb-tag>\r\n                                </div>\r\n                              </>\r\n                            ))\r\n                          : this.selectedItem} */}\r\n                        {this.type === 'tags' && (\r\n                          <>\r\n                            {this.selectedItems.map((item, index) => {\r\n                              {\r\n                                typeof item === 'object' ? (\r\n                                  <div class=\"added_tag\">\r\n                                    <gb-tag size=\"sm\" icon={!this.icon ? 'avatar' : this.icon} action=\"X_close\" key={index} onClick={() => this.handleTagRemove(item)}>\r\n                                      <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                      <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                        {item.name.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                                      </h1>\r\n                                    </gb-tag>\r\n                                  </div>\r\n                                ) : (\r\n                                  (console.log(item),\r\n                                  (\r\n                                    <div class=\"added_tag\">\r\n                                      <gb-tag size=\"sm\" icon=\"avatar\" action=\"X_close\" key={index} onClick={() => this.handleTagRemove(item)}>\r\n                                        <p class=\"text-xs-medium\">{item}</p>\r\n                                      </gb-tag>\r\n                                    </div>\r\n                                  ))\r\n                                );\r\n                              }\r\n                            })}\r\n                          </>\r\n                        )}\r\n                      </div>\r\n                      {this.supportingText && (\r\n                        <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n                          {this.type === 'tags'\r\n                            ? this.selectedItems.map(item => item.username).join(', ') // For multiple selections\r\n                            : this.selectedItem.username}\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  </>\r\n                )}\r\n              </>\r\n            </div>\r\n            {this.showHelpIcon && (\r\n              <div class={`help_icon`}>\r\n                <gb-help-tooltip show-supporting-text={true}>\r\n                  <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                  <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                </gb-help-tooltip>\r\n              </div>\r\n            )}\r\n            {this.type !== 'search' && (\r\n              <div class={`dropdown_icon ${this.dropdownOpen ? 'opened' : ''}`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                  <path\r\n                    d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                    stroke=\"#697586\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n        {this.showHintText && (\r\n          <p class=\"text-sm-regular\" style={{ color: '#697586' }}>\r\n            {this.hintText}\r\n          </p>\r\n        )}\r\n      </div>,\r\n      <>\r\n        {this.dropdownOpen && (\r\n          <div class={`dropdown_menu ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n            {this.type === 'tags' ? (\r\n              <>\r\n                {this.selectedItems.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n                {this.unselectedItems.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <>\r\n                {this.items.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    color={this.color}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    {typeof item === 'object' ? (\r\n                      <>\r\n                        <p slot=\"name\">{item.name}</p>\r\n                        <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                        <p slot=\"supporting_text\">@{item.username}</p>\r\n                      </>\r\n                    ) : (\r\n                      typeof item === 'string' && (console.log(item), (<p slot=\"name\">{item}</p>))\r\n                    )}\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n              </>\r\n            )}\r\n          </div>\r\n        )}\r\n      </>,\r\n    ];\r\n  }\r\n}    \r\n        "]}

package/dist/collection/components/gb-input-field/gb-input-field.css

@@ -2679,8 +2679,10 @@
 
 .content{
   width: 100%;
-  /* height: 100%; */
+  height: 100%;
   border: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .content::placeholder{
@@ -2737,18 +2739,27 @@
   height: 100%;
 }
 
-.trailing_button_text_input,
-.leading_dropdown_text_input{
+.trailing_button_text_input, .leading_dropdown_text_input{
   display: flex;
   flex-grow: 1;
   gap: var(--spacing-2);
 }
 
-.leading_dropdown_dropdown,
-.trailing_dropdown_dropdown{
+.trailing_button_text_input.sm,
+.trailing_button_text_input.md{
+  padding: var(--spacing-none) 0 0 var(--spacing-3);
+}
+
+.input.trailing_button.sm.default,
+.input.trailing_button.md.default{
+  padding: 0;
+}
+
+.leading_dropdown_dropdown, .trailing_dropdown_dropdown{
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
+  cursor: pointer;
 }
 
 .dropdown_arrow{
@@ -2756,6 +2767,11 @@
   align-items: center;
 }
 
+.tick{
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .help_circle{
   display: flex;
   align-items: center;
@@ -2768,14 +2784,41 @@
 /* Size Styles */
 .input.sm{
   min-height: 2.5rem;
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
 }
 
 .input.md{
   min-height: 3rem;
+}
+
+.input.sm.default,
+.input.sm.password_icon_leading{
+  padding: var(--spacing-none) var(--spacing-3);
+}
+
+.input.sm.icon_leading{
+  padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);
+}
+
+.input.sm.payment_input{
   padding: var(--spacing-none) var(--spacing-3);
 }
 
+.input.md.default{
+  padding: var(--spacing-none) 0.875rem var(--spacing-none) var(--spacing-3);
+}
+
+.input.md.icon_leading{
+  padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);
+}
+
+.input.md.password_icon_leading{
+  padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);
+}
+
+.input.md.payment_input{
+  padding: 0 0.875rem 0 var(--spacing-3);
+}
+
 /* State Styles */
 .input:focus-within,
 .password_input:focus-within,
@@ -2889,6 +2932,11 @@ hr{
   gap: var(--spacing-2);
 }
 
+.country_icon{
+  display: flex;
+  align-items: center;
+}
+
 .dropdown_menu{
     display: flex;
     width: fit-content;
@@ -2905,12 +2953,22 @@ hr{
     gap: var(--spacing-none);
 }
 
-.dropdown_menu.leading_dropdown{
-  top: 4.5rem;
-  left: 1.5rem;
+.dropdown_menu.leading_dropdown.sm{
+  top: 3.8rem;
+  left: 0;
+}
+
+.dropdown_menu.leading_dropdown.md{
+  top: 4.3rem;
+  left: 0;
+}
+
+.dropdown_menu.trailing_dropdown.sm{
+  top: 3.8rem;
+  right: 0;
 }
 
-.dropdown_menu.trailing_dropdown{
-  top: 4.5rem;
+.dropdown_menu.trailing_dropdown.md{
+  top: 4.3rem;
   right: 0;
 }

package/dist/collection/components/gb-input-field/gb-input-field.js

@@ -2,6 +2,21 @@ import { h, Fragment, getAssetPath } from "@stencil/core";
 import { StateEnum } from "../../models/reusableModels";
 export class GbInputField {
     constructor() {
+        this.copyToClipboard = () => {
+            if (this.inputRef) {
+                this.inputRef.select();
+                document.execCommand('copy'); // Deprecated but works in most browsers
+                // For modern browsers:
+                navigator.clipboard
+                    .writeText(this.inputRef.value)
+                    .then(() => {
+                    console.log('Copied to clipboard');
+                })
+                    .catch(err => {
+                    console.error('Failed to copy: ', err);
+                });
+            }
+        };
         this.size = undefined;
         this.type = undefined;
         this.destructive = false;
@@ -17,7 +32,7 @@ export class GbInputField {
         this.showValidation = false;
         this.iconSwap = undefined;
         this.showCloseButton = false;
-        this.options = [];
+        this.options = ['USD', 'NGN', 'CAD'];
         this.inputValue = '';
         this.tags = [];
         this.leadingIconSvg = '';
@@ -31,12 +46,22 @@ export class GbInputField {
         const svg = await response.text();
         this.leadingIconSvg = svg;
     }
+    handleClickOutside(event) {
+        if (this.showDropdown && !this.el.contains(event.target)) {
+            this.showDropdown = false;
+        }
+    }
     /* Function to handle and emit the inputted values */
     handleInput(event) {
         const target = event.target;
         this.inputValue = target.value;
         this.inputValueChanged.emit(this.inputValue);
     }
+    clearInput() {
+        if (this.inputRef) {
+            this.inputRef.value = '';
+        }
+    }
     /* Function to handle and emit the inputted values */
     togglePasswordVisibility() {
         this.isPasswordVisible = !this.isPasswordVisible;
@@ -53,15 +78,12 @@ export class GbInputField {
     handleItemSelect(option) {
         // For other types, allow only one selection
         this.selectedItem = option;
-        console.log(this.selectedItem);
         this.showDropdown = false; // Close the dropdown
     }
     componentWillLoad() {
-        const options = ['NGN', 'USD', 'CAD'];
         if (this.options && this.options.length > 0) {
             this.selectedItem = this.options[0]; // Set the first item as default
         }
-        this.options = options;
         this.loadIcon(this.iconSwap);
     }
     componentDidLoad() {
@@ -74,23 +96,27 @@ export class GbInputField {
         if (supportingTextSlot) {
             supportingTextSlot.classList.add('text-xs-regular');
         }
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
     }
     render() {
-        return (h("div", { key: 'c89f20939df58d05152b94faa472f656f4cb59f6', class: `input_container` }, h("div", { key: '054f817c42a39a6936cf3d4c8cc6565c12550dbe', class: `input_with_label` }, this.showLabel && h("p", { key: 'c991624c50c1a622a4fe7b93f3b064f2cb405e86', class: "label text-sm-medium" }, this.label), this.type === 'default' && [
-            h("div", { key: '2906d120d51970b724a940d16568cda429c42136', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: '7bd29b524631df7816b2671a5d527e8555e00414', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), h(Fragment, null, this.showValidation && (h("svg", { key: '5d473164d14f46bdc02b3a8d1c35bedfcbbc5f10', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'df043e1ef67f6f2570bf25bde45b530afa38dea5', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'b573f2e2189870e00ec84aa041fd5f345b512562', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
+        return (h("div", { key: '589179d7f676c2dc6708d80849e82d49eae06fe7', class: `input_container` }, h("div", { key: '928e39082068c5e28f818915cbde4ecddf8e7f33', class: `input_with_label` }, this.showLabel && h("p", { key: 'e4e58e4770ed5574c8bdd6e31f8abd1b51281158', class: "label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()), this.type === 'default' && [
+            h("div", { key: '8c89946d7aa50e59c00b4ecc78ed1cca6a676da4', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: '71f1406e648e7a1339b6ff2ded9a27c36a427ff4', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), h(Fragment, null, this.showValidation && (h("svg", { key: 'ad21ef93384801313f1f3efc24e9c8b8bef72fc4', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "tick" }, h("path", { key: '0bae70238418144e38bf4d96ee8eb72dcd58203b', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '623ef7f3980d093691eaf486ab6d542ace589097', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
         ], this.type === 'icon_leading' && [
-            h("div", { key: 'c96435a1e6e646038776b136ac5e741f974b428e', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'bd69680cec0906981e9540859d6087215f9508f5', class: `icon ${this.size} ${this.state}`, innerHTML: this.leadingIconSvg }), h("input", { key: '93d657fab94039fc2b4e6d728bd6934d1d84fc63', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), h(Fragment, null, this.showValidation && !this.destructive && (h("svg", { key: '80e733deb4bd389d4ce65d7f310f31637a228695', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'a9ac27f34678641be5f953b8eec191e03eeaec85', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '26e9826d5dbefaefa4dace872bc26ddd66823e44', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.showCloseButton && !this.destructive && (h("gb-button", { key: '7a3fdce2069709db95daaf177ae310a61348ecb5', size: "sm", hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg" })))),
+            h("div", { key: 'f3953feaeca307fb388ea110492c1f92680406fa', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '6935413cc08468ab7f2796a8b9a3587aabce06cf', class: `icon ${this.size} ${this.state}`, innerHTML: this.leadingIconSvg }), h("input", { key: '56a183d4b46ea79cd0f086d5aab159c182217f8a', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), ref: el => (this.inputRef = el) }), h(Fragment, null, this.showValidation && !this.destructive && (h("svg", { key: 'b635349aa84d58c106c9994b435755737d705fb7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "tick" }, h("path", { key: 'e36779668666e2c2ee0429d7cc042e7d522eb679', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '675c1a097e5185bc7f326c2d65c906ed4826560f', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.showCloseButton && !this.destructive && (h("gb-button", { key: '738c0cdd53d5a9198a5eb06a8390b31db6740fc1', size: "sm", hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))),
         ], this.type === 'leading_dropdown' && [
-            h("div", { key: 'eeda58f6123cc1096516dc81eb73b4fe32606dd8', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'e25d77a1fb3193e71c285184408ac4b6f3784286', class: `leading_dropdown_dropdown`, onClick: () => (this.showDropdown = !this.showDropdown) }, h("div", { key: 'cb9b34fb6d066654a4ac0eee694b5a20c5808b16', class: `country_icon` }, h("img", { key: '75a68e2b9bcc35ca1bcda368a47e1f6298e5dbbe', src: "build/assets/NG.svg", alt: "" })), h("div", { key: 'd2dd0f2faddd5a15b6ee6c225cd9312d9071a50a', class: `dropdown_text` }, h("p", { key: '7e6ca1034367cc2059d99356279c8d51f1a34da0', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, this.selectedItem)), h("div", { key: 'e667fd76a23a3f0f8c088e28a34157d792a9c99c', class: `dropdown_arrow` }, h("svg", { key: '97f452cefcd0b9718d3199c6b994ebcae808057c', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'e0cd92511c987d32c89ae9b444e395f38313ae2a', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#4B5565", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '66cb50680286ddd09c89d3969575e4ce67cc65e7', class: `leading_dropdown_text_input` }, h("input", { key: 'aa183ddf4153c7aea522c44511fd693996711c7d', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: 'd3f768974abdf00a1a53edf5acbf838333edb5fd', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '80c01be985866175eeae3bd51b59cd6498198d2c', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '9ee627972100b6e334a5b99f6dbed9bd1abc3893', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
-            h(Fragment, null, this.showDropdown && (h("div", { key: 'fe510e33a35d6d3bd0a810640816828b82ab55ab', class: `dropdown_menu ${this.type}` }, this.options.map(option => (h("gb-input-dropdown-menu-item", { type: "default", state: StateEnum.Default, selected: this.isItemSelected(option), onClick: () => this.handleItemSelect(option) }, h("p", { slot: "name" }, option))))))),
+            h("div", { key: 'b15f356f3e7e87273687f9c5f065a49ba9db1fc0', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'c0c6b0a273daa5419e071d4a6ab954f95964f0d9', class: `leading_dropdown_dropdown`, onClick: () => (this.showDropdown = !this.showDropdown) }, h("div", { key: 'c55e73adbb4de53cc6ea53d65123fd810a4b63c9', class: `country_icon` }, h("img", { key: '161a848bb41d3864b5c48980ee7790ef00621375', src: "build/assets/NG.svg", alt: "" })), h("div", { key: '7a05b7619c3e9d65ea850ec89a964cdc5d28d8a4', class: `dropdown_text` }, h("p", { key: 'd1c4427423c5003a1acb9ec97a115924c73e1952', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, this.selectedItem)), h("div", { key: 'ce5590652fd2d7bf122ff81cb2a6e11e39b16b73', class: `dropdown_arrow` }, h("svg", { key: '959d1694cc9649aea55a3bd05c07653319e2d588', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f58cda80f7487152532cc722ba623a3d9de5f18b', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#4B5565", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '774c825c58659e21455feac964c5b1e7786ee225', class: `leading_dropdown_text_input` }, h("input", { key: '7d1b483b379d960d41e2cbea2d33585c22b2f551', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: '520642bd026ea8eadd908a91e93d07e5f45bab83', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'b7257c57318cc27945d6382fe910fa207bebd113', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '867f490ab4cdda00c4ecea3c6b1164a6acd9d4e8', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
+            h(Fragment, null, this.showDropdown && (h("div", { key: 'fab68e9eb41c1d484d7688829fba8f88269f8881', class: `dropdown_menu ${this.type} ${this.size}`, ref: el => (this.dropdownRef = el) }, this.options.map(option => (h("gb-input-dropdown-menu-item", { type: "default", state: StateEnum.Default, selected: this.isItemSelected(option), onClick: () => this.handleItemSelect(option) }, h("p", { slot: "name" }, option))))))),
         ], this.type === 'trailing_dropdown' && [
-            h("div", { key: '558f83ee927569c98138a8a7e198d9a22d988652', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'a078c0f1bd379d1f986af423066e91f46f694e35', class: `trailing_dropdown_content` }, h("p", { key: 'd53b7e0eba11684f9caa4e8cf969a8266e275fbf', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, "$"), h("input", { key: '5b2e9774ac19f1e9f1b5ea67b965ed4fe2a15828', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showHelpIcon && (h("div", { key: '42a86e653a86cc758c1a22be184d84b5d0b1926a', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'a132811f206e19984f50b8e101404ae89aa7acc3', class: `trailing_dropdown_dropdown`, onClick: () => (this.showDropdown = !this.showDropdown) }, h("div", { key: '0171c92babed691e214ed48d32656fb0601de171', class: `dropdown_text` }, h("p", { key: '9aafc42776e72c9bb9db9a8a4539c7491b9ea1f3', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, this.selectedItem)), h("div", { key: 'eb475b69a51d1097462f06d3559da4651426d242', class: `dropdown_arrow` }, h("svg", { key: '676a00fdd949d7711575f230be157619b047a801', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'bbdf389ac9d4a59edcf8466f0a02e6e97fa91455', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#4B5565", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))),
-            h(Fragment, null, this.showDropdown && (h("div", { key: '4e3df8eb11ced41537afcda4c826dcb60df7f02c', class: `dropdown_menu ${this.type}` }, this.options.map(option => (h("gb-input-dropdown-menu-item", { type: "default", state: StateEnum.Default, selected: this.isItemSelected(option), onClick: () => this.handleItemSelect(option) }, h("p", { slot: "name" }, option))))))),
+            h("div", { key: '65103fcba27ff04b6ceb755d6ccba48b94ffa92f', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '580c1cea2a77ad3739d9bcdbf8e4e589574d0b57', class: `trailing_dropdown_content` }, h("p", { key: 'e08b5239c25cd55e2fd3894eb3db6d549e903418', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, "$"), h("input", { key: 'de2c10dc04cfe5eeb02d9bcfc73f3d64d92b593a', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showHelpIcon && (h("div", { key: 'c0a1e40469b567c2eac1de19aeb4bb7b50195f34', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '27a16a76ae506fb1206acac9cf694aa638d14065', class: `trailing_dropdown_dropdown`, onClick: () => (this.showDropdown = !this.showDropdown) }, h("div", { key: 'f15426870e4c0b6625ccdf00808de41195c2a7ea', class: `dropdown_text` }, h("p", { key: 'ed5c85c14a443e2bfc633370f7da1b5cab2b52c0', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, this.selectedItem)), h("div", { key: 'a02e22e155ca55aa2229d6b704a0d4815ae7fed1', class: `dropdown_arrow` }, h("svg", { key: '9efdb969557df0efbcb60e05d79263a0a80733a3', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0d63e5bad326266fa6cc718293644f13a7eb2039', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#4B5565", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))),
+            h(Fragment, null, this.showDropdown && (h("div", { key: 'ea02544608f72f09ec3d92795ecdb1e351712be9', class: `dropdown_menu ${this.type} ${this.size}`, ref: el => (this.dropdownRef = el) }, this.options.map(option => (h("gb-input-dropdown-menu-item", { type: "default", state: StateEnum.Default, selected: this.isItemSelected(option), onClick: () => this.handleItemSelect(option) }, h("p", { slot: "name" }, option))))))),
         ], this.type === 'leading_text' && [
-            h("div", { key: 'fd3cb48f61ac27baa814a4fcf5ec7ee9fd8ec8ac', class: "leading_text_input" }, h("div", { key: '9f52e0394ad688168d37dc4d07a3505ed142960f', class: `add_on` }, h("p", { key: '77990db1bed3bf7d1721faae9bee70a4438dd266', class: `text-md-regular`, style: { color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' } }, "http://")), h("div", { key: '738cf0173e1db0a9b9b008a3e106aeaac367546a', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: 'ffc16492a71dff698840796c3e09db945b749b69', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: '6fd5cd646774073b30458b1eb975dd56f5bfccc6', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '41e14518504d4c06ccd36e3882d0f34e98f1ef62', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'de251025130fb1f7f0f2a002e3b7252f17979564', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
-        ], this.type === 'payment_input' && (h("div", { key: 'c87a692b8f2c3ec39150883d2461b008d5e46872', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("svg", { key: 'bc4476f4e8c2099ee9b2dd188abca38557712bcf', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, h("path", { key: '30862bef586507647baeda1b5ba2df64ccc5bf96', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#ED0006" }), h("path", { key: '7ba05185b2e77dc9aa50474726ebf5fad248f237', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#F9A000" }), h("path", { key: '14fad6fe6eb60f4efd7fc9a5ebb9f42f4519fa2f', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z", fill: "#FF5E00" })), h("input", { key: '9a778abbcd4d38a21834427fd822159d1c80503e', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), h(Fragment, null, this.showValidation && !this.destructive && (h("svg", { key: 'ab14ec04738d9badc70cc21d6c8d1c1d8b150240', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '3835cffecabf1a4563823928436158e2971156d1', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '1584e86df9e448d30c33bd08f7101f2fdf39b542', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (h("div", { key: 'a2f3e2b515d03876edf879d2e016d755dfa50d6f', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '33404037eebc19cb904b2bef87c50c15496d3d04', class: `trailing_button_text_input` }, h("input", { key: '2d1725b551d5514099f4410261cf9492b3c438a6', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: '555ea1f4b6a5151e1138a1d66eafb735c37772af', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'c01a036253224c6c7be21d838bfe16e299da5a25', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'bd19f3fdb4c7b58adc5555e3f9be399781ebe93f', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("gb-button", { key: '57d5e77e16a24c9e26bae1ac89cfc571575439de', size: "lg", hierarchy: "tertiary_gray", icon: "only", state: this.state === 'disabled' ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/copy-01.svg" }))), this.type === 'password' && (h("div", { key: '8d48414c382ae01e3cbae1e73635f5e7b3fd5040', class: `password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '66fc3dac4c366c44b1de998c6921a9663facbad5', class: `password_content` }, h("input", { key: 'eb4e25bb10ff35de23343378df41a7fa8575a127', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: 'fdb4214f005449965458eb495077a99a8b2a6802', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'a69a9173d11c5baa07ffdecdd8e32a21ce290b2c', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '175b98323beea14d673dc5c088021bb811d51ba2', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '4b113c24457aa76d28d8697abd443f485e09f75e', class: `dropdown` }, h("gb-password-button", { key: 'c1d2114a71558b4bd38fef5477df91af71cd1758', onClick: () => this.togglePasswordVisibility() })))), this.type === 'password_icon_leading' && (h("div", { key: 'ec0709b794a121935a7c22b0a2494d97c754dbda', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '1aa191924bc859594478a466d7f74f4cec0cf735', class: `password_icon_leading_content` }, h("svg", { key: '6d02a0bca4610c65c653c52d0f6df4fb7b36c284', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '5d38545b4d452a9e53249a12e49af262ea0fda0f', d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z", fill: "#4B5565" })), h("input", { key: 'ef6724da7d2487aa62156b3cdb5c181834819b19', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) })), this.showValidation && !this.destructive && (h("svg", { key: 'aac4d31340020b7f8a35db7232be65c694357440', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'a13858ef8a8fc72ec4f80a873337164134deb2f4', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'a718c80994c69bff8fa33d7204240f24415cab07', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("gb-password-button", { key: 'f061802211cf9c7c458efd9fa105d6ab88023458', onClick: () => this.togglePasswordVisibility() }))), this.type === 'count' && [
-            h("div", { key: '325e4020e0aeb9ca2d8b6fe498e882686610ac2c', class: `count_input` }, h("div", { key: '1e0ba3049f902bceda2feefbcd6cd4d42af972e5', class: `count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}` }, h("input", { key: 'f8890e5daeb891965ef38821472f6790ce1cf748', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showHelpIcon && (h("div", { key: '29e903728e392f03b3e3d89f97b5d6cb6e68c16e', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '0b8c2a61c40599c690ce80c329cd03333ea038af', class: `action ${this.state}` }, h("gb-button", { key: '40fd4352710f31ee68e3adcab5fda3a45f71081c', size: "xl", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/minus_sign.svg" }), h("hr", { key: 'bc6023a601804fab940b79ced4a00f3c5bdc95a3' }), h("gb-button", { key: '5654dfe72233ca2d19277a2742b48d69f0d8abc3', size: "xl", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/plus_sign.svg" }))),
-        ], this.type === 'tags' && (h("div", { key: '9bca6a4e516e1d3781246544ea18c9d52bdd0016', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'bc76294ca69cca4921eb0e6d2664e5d9cd8d321f', class: `tags_display` }), h("input", { key: '88bf02755c977b20bee8a6de1f4b8408f68f10fe', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) })))), this.showHintText && h("p", { key: '27b7653a414be8bb7412521dbfd13850d1ad1bfd', class: "hint_text text-sm-regular" }, this.hintText)));
+            h("div", { key: '55e9e9bf46e730d1035e18b8d61895590dd91c6f', class: "leading_text_input" }, h("div", { key: 'ee9d149cee752a3d04c134d047da7d8dd86fe6ac', class: `add_on` }, h("p", { key: '6b4cb7d937fb3117fe97af0cd12f19fe6c156144', class: `text-md-regular`, style: { color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' } }, "http://")), h("div", { key: '2c3554e72ffa664e2f7d1320a3bb217e965cd4f4', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: '54deef466eddf5af9e31c2a84758c1befb837b63', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: 'a676c5dbd329520e01c81f798248aba5f7d1f0d2', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'ff9469369c15182841b1c3bb2b5ffc08248ecf02', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'fb0dfc46049be5952e6a459c2ddd3feef5152fe9', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
+        ], this.type === 'payment_input' && (h("div", { key: '2f0b661a4773feba3c091f7aa213bdc9620837fd', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("svg", { key: '58e8e570efbd836c93ee6dc6416c642131cccc69', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, h("path", { key: 'e1460961412a96bcd6bcd4e3ed0bc4b571a04f09', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#ED0006" }), h("path", { key: '6b8b3399b39cac49da24ec502318b0af0b643f51', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#F9A000" }), h("path", { key: 'b5a355549db49f3aa1edf9208db77ac8f9c2ef23', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z", fill: "#FF5E00" })), h("input", { key: '79d90631bdfdb617848fd06b5a992310d60cbe71', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), h(Fragment, null, this.showValidation && !this.destructive && (h("svg", { key: 'e984f7be384bf68c6d9138e0889d2e7a8974d08a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '32c54a7fb8c8df66490ae426eedb191956778121', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '68ab65c1756f3a0e214e46b4d863ad8faa885896', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (h("div", { key: 'ae2b653e37ee157dc0e450eb71a37b47804aaa6a', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'fb3273fec17e3d9a2353db26d115d5c231ddcaaf', class: `trailing_button_text_input ${this.size}` }, h("input", { key: '1f3e14066cf4cf496e71d51ade5b51c7e971b264', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), ref: el => (this.inputRef = el) }), this.showValidation && !this.destructive && (h("svg", { key: 'b45f9479bab1faa36b2632f971b5976f132ec745', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '911c521e5c71e6a6c62fa6bcd07067bf617265b6', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: '08f4f5e7f2d6845851f993fc1a3d3e88a7b8c4c3', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("gb-button", { key: '720e6864de64ab70cf41e0024f7b702e4d67cbbc', size: "lg", hierarchy: "tertiary_gray", icon: "only", state: this.state === 'disabled' ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/copy-01.svg", onClick: () => this.copyToClipboard() }))), this.type === 'password' && (h("div", { key: '0230c2cd12de29b98247e5635c098c9555bc93c7', class: `password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '0b19acd72dc5ec8266345c88f60fb6f82c3275d8', class: `password_content` }, h("input", { key: '0f7bc43490b22ca945de707eaf7d557d2d1680fb', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (h("svg", { key: 'b575c00a650958a75266b3d0d03e4097f7ff1116', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'ed0721beffb9550481982dec94d6af52ee7b1c0f', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'ec0fbb1cf3022375d52a4a48fb37bea1a3d315d0', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'cddd112503bc5d56fd4e3bef29651f6e9b813d07', class: `dropdown` }, h("gb-password-button", { key: '4d4fa4e15640d0b707af6cd264525830fc54e512', onClick: () => this.togglePasswordVisibility() })))), this.type === 'password_icon_leading' && (h("div", { key: 'fa2e2085d43ab259e3d51413abbf7983078ffe85', class: `password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '98763251f5340c3a48272ca79fc406ff03aaaddb', class: `password_icon_leading_content` }, h("svg", { key: 'f07d223980b9cf87f8117870298b9cc4e4ede739', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0b3a47243211ca0d449623ff99f7a99303c2782b', d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z", fill: "#4B5565" })), h("input", { key: 'f09694d90277a05f5d45470946d390f05ac6db23', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) })), this.showValidation && !this.destructive && (h("svg", { key: '5f082c799174412c3c179e91c75a7fbcc3c38db6', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'de470d828c4f7f3936b0755eb8f35e3e63e267fc', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'c853fc54646f0259b3274f1c4f4df01a152e0fa2', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("gb-password-button", { key: '48493479d2eb2eafdb66e40814b74c4da51b111d', onClick: () => this.togglePasswordVisibility() }))), this.type === 'count' && [
+            h("div", { key: '25754ab18d869a3d55c0eaf840e74d8784bf7b4c', class: `count_input` }, h("div", { key: 'e1b61c17a86f47416e49ee57c35185e23cd041cf', class: `count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}` }, h("input", { key: 'cf70897f59eac03bd90266d90623455f310948f0', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showHelpIcon && (h("div", { key: 'e7f956f17dc3195cc0a25e3074ca9e6bcf617729', class: `help_circle` }, !this.destructive ? (h("gb-help-tooltip", { "show-supporting-text": true }, h("slot", { name: "tooltip_label", slot: "label" }), h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd454f0da78f79ab3ebf5d3bb98edcf68a34ffb14', class: `action ${this.state}` }, h("gb-button", { key: '5edd08fd253cbec7ae151e5f44bebb16f7d628e8', size: "xl", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/minus_sign.svg" }), h("hr", { key: 'c27a313c63ec530400ba2cf7514232ab78230dbb' }), h("gb-button", { key: 'f7efe6886ceaed846760511607736efbea6fface', size: "xl", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/plus_sign.svg" }))),
+        ], this.type === 'tags' && (h("div", { key: 'e8b18752ff0b777b9d807f0256cb0170f79c55c8', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'ba9698ae1413ea62ac3f280d6950b9f05c7b71ca', class: `tags_display` }), h("input", { key: '472522d50e8c361b2c82b44c154d7deb485f47f0', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) })))), this.showHintText && h("p", { key: '920623153c8508120ec1b015987c1081ca99520c', class: "hint_text text-sm-regular" }, this.hintText)));
     }
     static get is() { return "gb-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -398,7 +424,7 @@ export class GbInputField {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "[]"
+                "defaultValue": "['USD', 'NGN', 'CAD']"
             }
         };
     }
@@ -452,5 +478,14 @@ export class GbInputField {
                 "methodName": "optionsChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=gb-input-field.js.map