globuswebcomponents 1.4.6 → 1.4.8

package/dist/cjs/gb-btn_4.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gb-btn.gb-button.gb-comment.gb-comment-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,2o4EAA2o4E;;MCO/o4EA,UAAQ,GAAA,cAAA,CAAA;AAJrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQU,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE5B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAG5B,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAC3B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAgFtC;IA9EC,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE;YAC5C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;;QAEhD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;;QAGlD,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC;QAE7C,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACrD,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;;;AAItC,IAAA,MAAM,QAAQ,CAAC,QAAgB,EAAE,IAA4B,EAAA;QAC3D,MAAM,QAAQ,GAAGC,kBAAY,CAAC,GAAG,QAAQ,CAAA,CAAE,CAAC;AAC5C,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AACjC,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,GAAG;;aACpB;AACL,YAAA,IAAI,CAAC,eAAe,GAAG,GAAG;;;;IAK9B,gBAAgB,GAAA;QACd,OAAO;AACL,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,YAAA,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;YACtB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;AACnC,YAAA,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AAChC,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;SAE3B;;IAGH,oBAAoB,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;;;IAIhC,iBAAiB,GAAA;QACf,OAAOC,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;;IAG1F,kBAAkB,GAAA;AAChB,QAAA,OAAOA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAA,CAAQ;;IAG7E,MAAM,GAAA;AACJ,QAAA,QACEA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAA,EACnC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE,EACvE,IAAI,CAAC,IAAI,KAAK,SAAS,KACtBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,QAAA,CAAU,EAAA,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACP,EACA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAC9C,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAC1C;;;;;;AChGf,MAAM,WAAW,GAAG,8i4EAA8i4E;;MCSrj4E,QAAQ,GAAA,MAAA;AANrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUU,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE5B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAG5B,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAC3B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AA2EtC;IAzEC,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE;YAC5C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;;QAEhD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;;QAGlD,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC;QAE7C,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACrD,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;;;;;;AAQtC,IAAA,MAAM,QAAQ,CAAC,QAAgB,EAAE,IAA4B,EAAA;QAC3D,MAAM,QAAQ,GAAGD,kBAAY,CAAC,GAAG,QAAQ,CAAA,CAAE,CAAC;AAC5C,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AACjC,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,GAAG;;aACpB;AACL,YAAA,IAAI,CAAC,eAAe,GAAG,GAAG;;;;IAK9B,gBAAgB,GAAA;QACd,OAAO;AACL,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,YAAA,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;YACtB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;AACnC,YAAA,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AAChC,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;AAC1B,YAAA,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC;SACnC;;IAGH,oBAAoB,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACb,YAAA,KAAK,KAAM,EAAE,OAAO,mBAAmB;AACvC,YAAA,KAAK,IAAK,EAAE,OAAO,mBAAmB;AACtC,YAAA,KAAK,IAAK,EAAE,OAAO,mBAAmB;AACtC,YAAA,KAAK,IAAK,EAAE,OAAO,mBAAmB;AACtC,YAAA,KAAK,IAAK,EAAE,OAAO,mBAAmB;;;IAI5C,iBAAiB,GAAA;QACf,OAAOC,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;;IAG1F,kBAAkB,GAAA;AAChB,QAAA,OAAOA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAA,CAAQ;;IAG7E,MAAM,GAAA;AACJ,QAAA,QACEA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAA,EACnC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE,EACvE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAIA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACxC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAC9C,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAC1C;;;;;;;AC7Ff,MAAM,YAAY,GAAG,q4tEAAq4tE;;MCO74tE,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAW,mBAAmB;AACpB,QAAA,IAAK,CAAA,KAAA,GAA6B,UAAU;AAC7D,QAAA,IAAa,CAAA,aAAA,GAAW,gBAAgB;AACxC,QAAA,IAAgB,CAAA,gBAAA,GAAW,+EAA+E;QAC1G,IAAA,CAAA,QAAQ,GAAU;;;;;;;;;;;;;;;;;;;;;;;;;SAyBzB;AA+EF;IA7EC,cAAc,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,WAAW;;AACnB,aAAA,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE;AACrC,YAAA,IAAI,CAAC,KAAK,GAAG,UAAU;;;IAI3B,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;AAC7D,QAAA,MAAM,UAAU,GAAGD,kBAAY,CAAC,CAAA,6BAAA,CAA+B,CAAC;AAChE,QAAA,MAAM,eAAe,GAAGA,kBAAY,CAAC,CAAA,uBAAA,CAAyB,CAAC;AAE/D,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAsB,mBAAA,EAAA,CAAC,WAAW,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAAA,EACzEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,WAAW,EAAA,EAC9GA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,gzBAAgzB,EAClzB,IAAI,EAAC,SAAS,EACd,CAAA,EACFA,OACY,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,SAAS,EACT,WAAA,EAAA,SAAS,EACnB,CAAC,EAAC,4ZAA4Z,EAC9Z,IAAI,EAAC,SAAS,EACd,CAAA,EACFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EACY,SAAS,EAAA,WAAA,EACT,SAAS,EACnB,CAAC,EAAC,+LAA+L,EACjM,IAAI,EAAC,SAAS,EAAA,CACd,CACE,EACNA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACrD,EAENA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAC5F,EAAA,IAAI,CAAC,KAAK,KAAK,UAAU,GAAGA,mCAAoB,GAAGA,OAAA,CAAA,GAAA,EAAA,IAAA,EAAA,eAAA,CAAoB,CAC9D,CACR,EAEL,IAAI,CAAC,KAAK,KAAK,UAAU;aACvB,WAAW,IACVA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAEC,OAAK,MAChCD,OAAA,CAAA,iBAAA,EAAA,EACE,GAAG,EAAEC,OAAK,EACV,MAAM,EAAE,OAAO,CAAC,IAAI,EACpB,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,QAAQ,EACzB,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAIA,OAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,KAAK,EACtF,CAAA,CACH,CAAC,CACE,KAEND,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,qBAAqB,EAAG,CAAA,EAC3DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAG,CAAA,EAC/DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,aAAa,CAAK,EAC/DA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,0BAA0B,EAAE,EAAA,IAAI,CAAC,gBAAgB,CAAK,CAC3D,CACF,CACF,CACF,CACF,CACP,CAAC,CACA;;;;;ACjHZ,MAAM,gBAAgB,GAAG,kyuEAAkyuE;;MCO9yuE,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;AACnB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;AACpB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AACtB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAyBnC;IAvBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAO,CAAA,EACjC,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,MAAM,GAAG,CAClC,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EACzB,IAAI,CAAC,MAAM,QAAI,IAAI,CAAC,IAAI,MACvB,CACA,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzC,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,OAAG,IAAI,CAAC,SAAS,CAAK,CAC5C,CACF,CACF;;;;;;;;;;","names":["GbButton","getAssetPath","h","index"],"sources":["src/components/gb-btn/gb-btn.css?tag=gb-btn","src/components/gb-btn/gb-btn.tsx","src/components/gb-button/gb-button.css?tag=gb-button&encapsulation=shadow","src/components/gb-button/gb-button.tsx","src/components/gb-comment/gb-comment.css?tag=gb-comment&encapsulation=shadow","src/components/gb-comment/gb-comment.tsx","src/components/gb-comment-item/gb-comment-item.css?tag=gb-comment-item&encapsulation=shadow","src/components/gb-comment-item/gb-comment-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* *{box-sizing: border-box; margin: 0; padding: 0;} */\r\n:host {\r\n  --button-color: var(--primary-color);\r\n  --icon-color: var(--primary-color);\r\n}\r\n\r\nbutton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-sm);\r\n  width: 100%;\r\n}\r\n\r\nbutton.only{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n  fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n  padding: var(--spacing-none) var(--spacing-6);\r\n  height: 3.5rem;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n  padding: var(--spacing-none) var(--spacing-5);\r\n  height: 3rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n  padding: 0.625rem 1.125rem;\r\n  height: 2.75rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  height: 2.5rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  height: 2.25rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n  width: 3rem;\r\n  height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n  width: 2.75rem;\r\n  height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n  background-color: var(--color-background-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border, #9AA4B2);\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n  height: fit-content;\r\n}\r\n\r\nbutton.link_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-link, #075DB2);\r\n  color: var(--color-link, #075DB2);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n  background-color: var(--color-background-danger, #B51726);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n  background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n  text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n  background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n  color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n  color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.btn_text{\r\n  white-space: nowrap;\r\n}\r\n\r\n.btn_text::first-letter{\r\n  text-transform: uppercase;\r\n}","import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-btn',\r\n  styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      // leftandrighticon: this.iconLeading && this.iconTrailing\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && (\r\n          <div class={`btn_text`}>\r\n            <slot></slot>\r\n          </div>\r\n        )}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n:host {\r\n  --button-color: var(--primary-color);\r\n  --icon-color: var(--primary-color);\r\n}\r\n\r\nbutton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-sm);\r\n  width: 100%;\r\n}\r\n\r\nbutton.only{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n  fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n  padding: var(--spacing-none) var(--spacing-6);\r\n  height: 3.5rem;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n  padding: var(--spacing-none) var(--spacing-5);\r\n  height: 3rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n  padding: 0.625rem 1.125rem;\r\n  height: 2.75rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  height: 2.5rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  height: 2.25rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n  width: 3rem;\r\n  height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n  width: 2.75rem;\r\n  height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n  background-color: var(--color-background-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border, #9AA4B2);\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n}\r\n\r\nbutton.link_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-link, #075DB2);\r\n  color: var(--color-link, #075DB2);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n  background-color: var(--color-background-danger, #B51726);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n  background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n  text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n  background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n  color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n  color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.btn_text{\r\n  white-space: nowrap;\r\n}","import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size!: GeneralSizes;\r\n  @Prop() hierarchy!: GeneralHierarchies;\r\n  @Prop() icon!: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    // if (!this.iconLeading && !this.iconTrailing) {\r\n    //   buttonSlot.classList.add('center');\r\n    // }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      oneicon: this.iconLeading || this.iconTrailing\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n        case 'xl2' : return 'text-lg-semi-bold';\r\n        case 'xl' : return 'text-md-semi-bold';\r\n        case 'lg' : return 'text-md-semi-bold';\r\n        case 'md' : return 'text-sm-semi-bold';\r\n        case 'sm' : return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host {\r\n  display: block;\r\n\r\n}\r\n\r\n.alpha-mask {\r\n  mask-type: alpha;\r\n}\r\n\r\n.comments-container {\r\n  padding: 16px;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  border-radius: 12px;\r\n  border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n  background: var(--color-background-information-subtlest, #E4F0FC);\r\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  height: fit-content;\r\n  padding: 0.5rem;\r\n}\r\n\r\n.header.expanded{\r\n  margin-bottom: 1rem;\r\n}\r\n\r\n.header.collased{\r\n  margin-bottom: 0;\r\n}\r\n\r\n.title-section {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n}\r\n\r\n.info-icon {\r\n  width: 24px;\r\n  height: 24px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.heading{\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comments-wrapper{\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-none);\r\n  align-self: stretch;\r\n\r\n}\r\n\r\n.no-comments-state-images{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n \r\n}\r\n\r\n.comments-container.no-comments-state {\r\n  height: fit-content;\r\n}\r\n\r\n.no-comment-text-wrapper span{\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.empty_state_pattern{\r\n  position: absolute;\r\n  top: 0;\r\n  width: 400px;\r\n  height: 120px;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.empty_state{\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: var(--spacing-3);\r\n  flex-shrink: 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.text{\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: var(--spacing-5);\r\n  align-self: stretch;\r\n}\r\n\r\n.frame{\r\n  display: flex;\r\n  justify-content: center;\r\n  position: relative;\r\n}\r\n\r\n.container{\r\n  position: relative;\r\n}\r\n\r\n.main-text{\r\n  color: var(--color-text-bold, #202939);\r\n  \r\n}\r\n\r\n.sub-text{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n","import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-comment',\r\n  styleUrl: 'gb-comment.css',\r\n  shadow: true,\r\n})\r\nexport class GbComment {\r\n  @Prop() heading: string = 'Reviewers comment';\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed' = 'expanded';\r\n  @Prop() noCommentText: string = 'No comment yet';\r\n  @Prop() noCommentTextSub: string = 'No reviewer has left a comment yet, you will be notified when a comment drops';\r\n  @Prop() comments: any[] = [\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comments: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM'\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Gideon',\r\n    //   role: 'Designer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Nov-2024 6:00PM',\r\n    // },\r\n  ];\r\n\r\n  toggleComments() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    } else if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const hasComments = this.comments && this.comments.length > 0;\r\n    const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n    const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n    return (\r\n      <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n        <div class={`header ${this.state}`}>\r\n          <div class=\"title-section\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"info-icon\">\r\n              <path\r\n                opacity=\"0.4\"\r\n                d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\"\r\n                fill=\"#064E94\"\r\n              />\r\n              <path\r\n                fill-rule=\"evenodd\"\r\n                clip-rule=\"evenodd\"\r\n                d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\"\r\n                fill=\"#064E94\"\r\n              />\r\n              <path\r\n                fill-rule=\"evenodd\"\r\n                clip-rule=\"evenodd\"\r\n                d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\"\r\n                fill=\"#064E94\"\r\n              />\r\n            </svg>\r\n            <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n          </div>\r\n\r\n          <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.toggleComments()}>\r\n            {this.state === 'expanded' ? <p>Hide Comments</p> : <p>Show Comments</p>}\r\n          </gb-button>\r\n        </div>\r\n\r\n        {this.state === 'expanded' &&\r\n          (hasComments ? (\r\n            <div class=\"comments-wrapper\">\r\n              {this.comments.map((comment, index) => (\r\n                <gb-comment-item\r\n                  key={index}\r\n                  author={comment.name}\r\n                  role={comment.role}\r\n                  comment={comment.comments}\r\n                  timestamp={comment.timestamp}\r\n                  connector={this.comments.length > 1 && index < this.comments.length - 1 ? true : false}\r\n                />\r\n              ))}\r\n            </div>\r\n          ) : (\r\n            <div class=\"container\">\r\n              <div class=\"frame\">\r\n                <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n                <div class=\"empty_state\">\r\n                  <div class=\"content\">\r\n                    <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                    <div class=\"text\">\r\n                      <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n                      <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          ))}\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.comment-item {\r\n  display: flex;\r\n  gap: 12px;\r\n  align-items: flex-start;\r\n  color: red;\r\n  position: relative; \r\n  align-items: flex-start;\r\n  padding-left: var(--spacing-12);\r\n  margin-bottom: -1rem;\r\n}\r\n\r\n.comment-item:not(:last-child)::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 10px;\r\n  top: 16px;\r\n  width: 2px;\r\n  height: 100%;\r\n  background-color: #064E94;\r\n}\r\n\r\n.comment-bullet {\r\n  width: 12px;\r\n  height: 12px;\r\n  border-radius: var(--rounded-full);\r\n  background: var(--color-icon-information, #064E94);\r\n  margin: 5px;\r\n}\r\n\r\n.line{\r\n  background-color: #064E94;\r\n  width: 0.5px;\r\n  height: 4.5rem;\r\n  padding: 1px;\r\n  border: none;\r\n  margin-top: -5px;\r\n  left: 10px;\r\n  top: 16px;\r\n}\r\n\r\n.left{\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n\r\n}\r\n\r\n.comment-wrapper{\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-none);\r\n  align-self: stretch;\r\n}\r\n\r\n\r\n.comment-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-1);\r\n  padding-bottom: var(--spacing-6);\r\n}\r\n\r\n.comments-container {\r\n  padding: 16px;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  border-radius: 12px;\r\n  border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n  background: var(--color-background-information-subtlest, #E4F0FC);\r\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.comment-content {\r\n  flex: 1;\r\n}\r\n\r\n.reviewer-info {\r\n  color: var(--color-text-information, #064E94);\r\n  font-family: var(--Font-Family-Body, Sora);\r\n  font-size: var(--Font-Size-T-sm, 14px);\r\n  font-style: normal;\r\n  font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n  line-height: var(--Font-Line-height-T-sm, 21px);\r\n  letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.comment-text {\r\n  color: var(--color-text-information, #064E94);\r\n  font-family: var(--Font-Family-Body, Sora);\r\n  font-size: var(--Font-Size-T-sm, 14px);\r\n  font-style: normal;\r\n  font-weight: var(--Font-Weight-Regular, 400);\r\n  line-height: var(--Font-Line-height-T-sm, 21px);\r\n  letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.timestamp {\r\n  color: var(--color-text-information, #064E94);\r\n  font-family: var(--Font-Family-Body, Sora);\r\n  font-size: var(--Font-Size-T-xs, 12px);\r\n  font-style: normal;\r\n  font-weight: var(--Font-Weight-Regular, 400);\r\n  line-height: var(--Font-Line-height-T-xs, 18px); \r\n  letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n  margin-bottom: 10px;\r\n}\r\n\r\n","import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-comment-item',\r\n  styleUrl: 'gb-comment-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbCommentItem {\r\n  @Prop() author: string = '';\r\n  @Prop() role: string = '';\r\n  @Prop() comment: string = '';\r\n  @Prop() timestamp: string = '';\r\n  @Prop() connector: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"comment-item\">\r\n        <div class=\"left\">\r\n          <div class=\"comment-bullet\"></div>\r\n          {this.connector && <hr class=\"line\" />}\r\n        </div>\r\n        <div class=\"comment-content\">\r\n          <div class=\"reviewer-info\">\r\n            <p class=\"text-sm-semi-bold\">\r\n              {this.author} ({this.role})\r\n            </p>\r\n          </div>\r\n          <div class=\"comment-text\">\r\n            <p class=\"text-sm-regular\">{this.comment}</p>\r\n          </div>\r\n          <div class=\"timestamp\">\r\n            <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/gb-button-close.cjs.entry.js

@@ -9,7 +9,7 @@ const GbButtonClose = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'e5da351da4655d83c8c888bf08245b0def484fd5', class: `${this.size} ${this.color}` }, index.h("svg", { key: '7701ebc9e6702efd3a221bc9a140adee75e26463', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, index.h("path", { key: 'ed94ab1277663b68889db24fd2e09a83a67f4816', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (index.h("div", { key: '873f52990d07c0b7ce74e13b4cba016fe4379d58', class: `${this.size} ${this.color}` }, index.h("svg", { key: 'defc57708df0ee08279211db14a716fec5094d4d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, index.h("path", { key: 'fd76832bd2121979ef148dfcc699a9124e445339', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
 };
 GbButtonClose.style = gbButtonCloseCss;

package/dist/cjs/gb-carousel-arrow.cjs.entry.js

@@ -9,7 +9,7 @@ const GbCarouselArrow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '5d1ae65145367772bea4173526a6736c9d7e8b73', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (index.h("svg", { key: '025cfde6dfa2f67a807d1035b9fce0bd5957bf8f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'fc4bf834ad0b5597e80ca7c245db186406fbae67', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (index.h("svg", { key: 'd73b1e156d176650c80e776f38be9d314e5168f2', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'd25e6783f4094e6d2eb61d512e694828335f45c2', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (index.h("div", { key: '931c74e406b7b9682f6ef34f9d1b6c8cd586c5a3', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (index.h("svg", { key: '5cb32fb53127980d031abf00d7bebe2183d2da3d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'c330ceab86b48a0d95363fd0d7e16d46ac0dd0c6', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (index.h("svg", { key: 'c76de3176e338fe3921786e88a71dc8717fc0002', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'c930652d52238f0864cef33701f494992ea576d2', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
 };
 GbCarouselArrow.style = gbCarouselArrowCss;

package/dist/cjs/gb-checkbox-group-item.cjs.entry.js

@@ -88,7 +88,7 @@ const GbCheckboxGroupItem = class {
     }
     render() {
         return [
-            index.h("div", { key: '53e4dc2a4948df5c5e9e83792d474b30d94b3d66', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, index.h("div", { key: '3ee1cd10ecc9001d9d3ce3db6ea1af096f5088c3', class: "item-content" }, this.renderIcon(), index.h("div", { key: '12e34bee677663ef684f1da298ffcaeced64cccd', class: "text-container" }, index.h("div", { key: '5fe7d7b3a1035025801d5458c25ae0bb80e0af36', class: `label-cost ${this.type}` }, index.h("slot", { key: '7f04dbca6fb52dbab12a2f7c52640e4aa3500ee5', name: "label" }), this.showCost && index.h("slot", { key: '346ceae9b839cdeacdb6956273fea2dc197069b6', name: "cost" })), this.type === 'payment_icon' ? (index.h("div", { class: "buttons" }, index.h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, index.h("p", null, "Set as default")), index.h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, index.h("p", null, "Edit")))) : (index.h("slot", { name: "supporting_text" })))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (index.h("div", { class: `checkbox_container` }, index.h("gb-checkbox", { type: 'check_circle', size: this.size, state: this.state, checked: this.selected }))) : null),
+            index.h("div", { key: '79dd00d5987c033d0027335d18e20218f439367b', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, index.h("div", { key: '526755b1b6671edb44f72d3f0ef97a2ed5e58fd6', class: "item-content" }, this.renderIcon(), index.h("div", { key: '8659e1db901e2d2c3e1fe31f50b6b9b94522fa69', class: "text-container" }, index.h("div", { key: 'a9c8530b29b7f5be54bda7ef6a41b7fef8fffcc7', class: `label-cost ${this.type}` }, index.h("slot", { key: 'f77e0a8bb6beb6f6cb657d9f7f54e18f4cda5a5f', name: "label" }), this.showCost && index.h("slot", { key: 'abd3b136a6979a7e6440caa693edd86cf8d2209a', name: "cost" })), this.type === 'payment_icon' ? (index.h("div", { class: "buttons" }, index.h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, index.h("p", null, "Set as default")), index.h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, index.h("p", null, "Edit")))) : (index.h("slot", { name: "supporting_text" })))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (index.h("div", { class: `checkbox_container` }, index.h("gb-checkbox", { type: 'check_circle', size: this.size, state: this.state, checked: this.selected }))) : null),
         ];
     }
     get el() { return index.getElement(this); }

package/dist/cjs/gb-checkbox-group.cjs.entry.js

@@ -11,7 +11,7 @@ const GbCheckboxGroup = class {
         this.selected = false;
     }
     render() {
-        return (index.h("div", { key: '28608b200233ae763443c8c39741dfe7cf4f1916', class: `checkbox_group` }, index.h("gb-checkbox-group-item", { key: 'b6a4b6965796dfb7d03bdead8d7108c900dbf156', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: 'dc3794a95111df5e6161be3d639fa72654471aec', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: '7578003213c3ecd4dfdb99513d3e604600f980ab', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: '014cf58cf7454f9be15c221980b0ba34c028c852', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: 'e1814f3c6f5f8c8c75c2271443b6ac578ed1d2ca', size: this.size, type: this.type, breakpoint: this.breakpoint })));
+        return (index.h("div", { key: 'c6ed893d4384568c293280a6f54a21bb16b88393', class: `checkbox_group` }, index.h("gb-checkbox-group-item", { key: 'fa1a3dd56a2a1cd674cbe2535a8690b0c819d71e', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: 'f368370a5df642731198dfe7c0c292839b70fbd3', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: 'f61883874893c2d930617364be30338ab9c02a5b', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: '5f5e770e4dc4de80dddad677fb7431878a91ce13', size: this.size, type: this.type, breakpoint: this.breakpoint }), index.h("gb-checkbox-group-item", { key: 'e92991d187ff445005ce66d77e06278bf9d4b843', size: this.size, type: this.type, breakpoint: this.breakpoint })));
     }
 };
 GbCheckboxGroup.style = gbCheckboxGroupCss;

package/dist/cjs/gb-checkbox_2.cjs.entry.js

@@ -44,7 +44,7 @@ const GbCheckbox = class {
         this.checkboxClicked.emit(event.detail);
     }
     render() {
-        return (index.h("div", { key: '78e1d5277f0fe739fbdca8292c62a56fc5466a92', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, index.h("div", { key: '4dcb784a3bb86c4999d7234d3794de731b319c4d', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, index.h("gb-checkbox-base", { key: 'a77d268688f8151b557567a858cfc6602cbe59b6', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this) })), this.text && (index.h("div", { key: '15f8969d4d210c621dea6e15ecebaf278663f46d', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, index.h("slot", { key: '13984df24b220b159d30cf1b14740b6b0ce3dba9', name: "label" }), this.supportingText && index.h("slot", { key: 'b93da58aff2bf88b67d783292dbdaba12c4dae6e', name: "supporting_text" })))));
+        return (index.h("div", { key: 'aff1696dfd6d88e217cafa4437563d24d3abc106', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, index.h("div", { key: '3c783717f79946ca51f8a7f182a29263adc45e19', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, index.h("gb-checkbox-base", { key: 'd765c1a546a68e9832280b86476e48fe2f8679bf', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this) })), this.text && (index.h("div", { key: 'ebeb6595675d66397253e131224dd7ac357b67d1', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, index.h("slot", { key: 'd99cad479fdd100d06169232dd4ccc8d0b19c69f', name: "label" }), this.supportingText && index.h("slot", { key: '445bd5c905e72b18ed5d5c5a83d25f5ac5b20e78', name: "supporting_text" })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -154,7 +154,7 @@ const GbCheckboxBase = class {
         }
     }
     render() {
-        return (index.h("div", { key: '96f6bc614d8594011bf23ca06ee1dbc45546296d', class: `checkbox_container ${this.size}`, onClick: () => {
+        return (index.h("div", { key: '277c1506940ed420915d2233a0afa197fc5e7b33', class: `checkbox_container ${this.size}`, onClick: () => {
                 if (this.type === 'checkbox') {
                     return this.toggleCheckboxState();
                 }

package/dist/cjs/gb-collapse-button.gb-complex-primary-side-bar-item.gb-complex-secondary-side-bar-item.gb-simple-side-bar-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-collapse-button.gb-complex-primary-side-bar-item.gb-complex-secondary-side-bar-item.gb-simple-side-bar-item.entry.cjs.js","sources":["src/components/gb-collapse-button/gb-collapse-button.css?tag=gb-collapse-button&encapsulation=shadow","src/components/gb-collapse-button/gb-collapse-button.tsx","src/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.css?tag=gb-complex-primary-side-bar-item&encapsulation=shadow","src/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.tsx","src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.css?tag=gb-complex-secondary-side-bar-item&encapsulation=shadow","src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css?tag=gb-simple-side-bar-item&encapsulation=shadow","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n    position: relative;\r\n}\r\n\r\n.collapse_btn{\r\n    background-color: transparent;\r\n    border-radius: var(--rounded-full);\r\n    display: flex;\r\n    width: var(--spacing-7);\r\n    height: var(--spacing-7);\r\n    padding: var(--spacing-2);\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    cursor: pointer;\r\n}\r\n\r\n.collapse_btn.gray:hover{\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n    cursor: pointer;\r\n}\r\n\r\n.collapse_btn.gray:active{\r\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.collapse_btn.white:hover{\r\n    background-color: var(--color-blanket-subtle, rgba(33, 44, 101, 0.3));\r\n    cursor: pointer;\r\n}\r\n\r\n.collapse_btn.white:active{\r\n    background-color: var(--color-blanket, rgba(33, 44, 101, 0.4));\r\n}\r\n\r\n.icon.gray path{\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.white path{\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.tooltip{\r\n    position: absolute;\r\n    left: 3.5rem;\r\n    bottom: 2.7rem;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n    margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}","import { Component, Method, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-collapse-button',\r\n  styleUrl: 'gb-collapse-button.css',\r\n  shadow: true,\r\n})\r\nexport class GbCollapseButton {\r\n  @Prop() color: 'gray' | 'white';\r\n  @Prop({ mutable: true }) isCollapsed: boolean = false;\r\n  @Prop({ mutable: true }) action: string = 'collapse';\r\n  @Prop({ mutable: true }) isHovered: boolean = false;\r\n\r\n  toggleIcon() {\r\n    if (this.action === 'collapse') {\r\n      this.action = 'expand';\r\n      this.isHovered = false;\r\n    } else if (this.action === 'expand') {\r\n      this.action = 'collapse';\r\n      this.isHovered = false;\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async collapseSidebar() {\r\n    this.isCollapsed = true;\r\n  }\r\n\r\n  @Method()\r\n  async expandSidebar() {\r\n    this.isCollapsed = false;\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div>\r\n        <div class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} onMouseOver={() => (this.isHovered = true)} onMouseOut={() => (this.isHovered = false)}>\r\n          {this.action === 'collapse' && [\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>,\r\n          ]}\r\n          {this.action === 'expand' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </div>\r\n        {this.isHovered && this.action === 'collapse' ? (\r\n          <gb-tooltip class=\"tooltip\" show-arrow={true} arrow=\"left\">\r\n            <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n              Collapse\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : this.isHovered && this.action === 'expand' ? (\r\n          <gb-tooltip class=\"tooltip\" show-arrow={true} arrow=\"left\">\r\n            <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n              Expand\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : null}\r\n      </div>,\r\n    ];\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.container{\r\n    display: flex;\r\n    width: 6rem;\r\n    padding: var(--spacing-2) var(--spacing-none);\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: var(--spacing-1);\r\n    cursor: pointer;\r\n}\r\n\r\n.wrapper{\r\n    display: flex;\r\n    height: 3rem;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 0.25rem;\r\n}\r\n\r\n.bar{\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    height: 100%;\r\n}\r\n\r\n.icon{\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.icon svg{\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n}\r\n\r\n.container{\r\n    position: relative;\r\n}\r\n\r\n/* State Styles*/\r\n.container.default.colored_background:hover{\r\n    background: var(--color-blanket, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.container.colored_background.active{\r\n    background: var(--color-background-information-bold, #042F59);\r\n}\r\n\r\n.container.default.plain_background:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.container.plain_background.active{\r\n    background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n    fill: transparent;\r\n}\r\n\r\n/* Text Styles */\r\n.label_text.colored_background {\r\n    color: #FFFFFF; /**/\r\n}\r\n\r\n.label_text.plain_background {\r\n    color: var(--color-text, #4B5565); \r\n} \r\n\r\n.label_text.plain_background.active {\r\n    color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n/* Compact Item Styles */\r\n.compact_container{\r\n    display: flex;\r\n    width: 6rem;\r\n    padding: var(--spacing-2) 0rem;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-1);\r\n}\r\n\r\n.compact_wrapper{\r\n    display: flex;\r\n    width: 3rem;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    border-radius: var(--rounded-sm);\r\n    position: relative;\r\n    cursor: pointer;\r\n}\r\n\r\n.compact_bar{\r\n    position: absolute;\r\n    top: 0.72rem;\r\n    left: 0;\r\n}\r\n\r\n.compact_wrapper.colored_background:hover{\r\n    background: var(--color-blanket, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.compact_wrapper.colored_background.active{\r\n    background: #042F59;\r\n}\r\n\r\n.compact_wrapper.plain_background:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.compact_wrapper.plain_background.active{\r\n    background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.compact_icon_container{\r\n    display: flex;\r\n    height: 3rem;\r\n    padding: var(--spacing-none) var(--spacing-5);\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex: 1 0 0;\r\n    border-radius: 62.4375rem;\r\n}\r\n\r\n.tooltip{\r\n    position: absolute;\r\n    top: 0.4rem;\r\n    left: 3.3rem;\r\n}","import { Component, Element, Prop, State, getAssetPath, h, Fragment } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-complex-primary-side-bar-item',\r\n    styleUrl: 'gb-complex-primary-side-bar-item.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbComplexPrimarySideBarItem {\r\n    @Prop() category: GeneralBackgroundCategories;\r\n    @Prop() itemStyle: 'standard' | 'compact';\r\n    @Prop() state: 'default' | 'active';\r\n    @Prop() icon: string = '';\r\n    @Prop() label: string = 'Recruitment';\r\n    @Prop({ mutable: true }) showTooltip: boolean = false;\r\n    @State() leadingIconSvg: string = '';\r\n    @Element() el: HTMLElement;\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    componentWillLoad() {\r\n        this.loadIcon(this.icon);\r\n    }\r\n\r\n    // componentDidLoad() {\r\n        \r\n    // }\r\n\r\n    render() {\r\n        const redBarSrc = getAssetPath(`assets/complex_bar_red.svg`);\r\n        const whiteBarSrc = getAssetPath(`assets/complex_bar_white.svg`);\r\n        const redCompactBarSrc = getAssetPath(`assets/compact_bar_red.svg`);\r\n        const whiteCompactBarSrc = getAssetPath(`assets/compact_bar_white.svg`);\r\n\r\n        return (\r\n          <>\r\n            {this.itemStyle === 'standard' && (\r\n              <div class={`container ${this.state} ${this.category}`}>\r\n                <div class={`wrapper ${this.state} ${this.category}`}>\r\n                  {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n                  {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n                  <div class=\"icon_container\">\r\n                    <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n                  </div>\r\n                  <p class={`label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}`}>{this.label}</p>\r\n                </div>\r\n              </div>\r\n            )}\r\n            {this.itemStyle === 'compact' && (\r\n              <div class=\"compact_container\">\r\n                <div class={`compact_wrapper ${this.state} ${this.category}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n                  {this.state === 'active' && this.category === 'plain_background' && <img src={redCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n                  {this.state === 'active' && this.category === 'colored_background' && <img src={whiteCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n                  <div class=\"compact_icon_container\">\r\n                    <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n                  </div>\r\n                  {this.itemStyle === 'compact' && this.showTooltip && (\r\n                    <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n                         <p slot=\"label\">{this.label}</p>\r\n                    </gb-tooltip>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        );\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\n:host {\r\n  position: relative;\r\n}\r\n\r\n.container {\r\n  display: flex;\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.icon{\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.container.full_with_label {\r\n  width: 14.875rem;\r\n}\r\n\r\n.container.icon_only {\r\n  width: fit-content;\r\n}\r\n\r\n.secondary_side_bar_item_div {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-3);\r\n  border-radius: var(--rounded-sm);\r\n  padding: var(--spacing-2) var(--spacing-4);\r\n  cursor: pointer;\r\n}\r\n\r\n.secondary_side_bar_item_div.icon_only {\r\n  width: fit-content;\r\n}\r\n\r\n/* Category Styles */\r\n.secondary_side_bar_item_div.colored_background.default,\r\n.secondary_side_bar_item_div.plain_background.default {\r\n  background: transparent;\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.default:hover {\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.active {\r\n  background: var(--color-background-information-subtle, #9ac7f4);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.default:hover {\r\n  background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.active {\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n  fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active path#Icon[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n  fill: transparent;\r\n}\r\n\r\n/* Text Styles */\r\n.label_text.colored_background,\r\n.label_text.plain_background {\r\n  color: var(--color-text, #4b5565); /**/\r\n}\r\n\r\n.label_text.colored_background.active,\r\n.label_text.plain_background.active {\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n  position: absolute;\r\n  top: 0.3rem;\r\n  left: 4.8rem;\r\n}\r\n","import { Component, Element, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-complex-secondary-side-bar-item',\r\n    styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbComplexSecondarySideBarItem {\r\n    @Prop() state: 'default' | 'active';\r\n    @Prop() type: 'full_with_label' | 'icon_only';\r\n    @Prop() category: GeneralBackgroundCategories;\r\n    @Prop() label: string = 'Appraisal';\r\n    @Prop() icon: string = '';\r\n    @Prop({ mutable: true }) showTooltip: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @State() leadingIconSvg: string = '';\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    componentDidLoad() {\r\n      this.loadIcon(this.icon);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`container ${this.type}`}>\r\n            <div\r\n              class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n              onMouseEnter={() => (this.showTooltip = true)}\r\n              onMouseLeave={() => (this.showTooltip = false)}\r\n            >\r\n              <div class=\"icon\">\r\n                <div class=\"icon_container\">\r\n                  <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n                </div>\r\n              </div>\r\n              {this.type === 'full_with_label' && (\r\n                <div class=\"text\">\r\n                  <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n                </div>\r\n              )}\r\n              {this.type === 'icon_only' && this.showTooltip && (\r\n                <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n                  <p slot=\"label\">{this.label}</p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n          </div>\r\n        );\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n    position: relative;\r\n}\r\n\r\n.side_bar_item_container{\r\n    padding: 0 var(--spacing-4);\r\n}\r\n\r\n.nav_item_base.icon_only{\r\n    width: fit-content;\r\n}\r\n\r\n.nav_item_base{\r\n    display: flex;\r\n    padding: var(--spacing-2) var(--spacing-3);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-sm);\r\n    cursor: pointer;\r\n    position: relative;\r\n    flex-grow: 1;\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    flex-grow: 1;\r\n}\r\n\r\n.bar{\r\n    position: absolute;\r\n    left: 0rem;\r\n    width: 0.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\n.icon{\r\n    display: flex;\r\n    align-items: center;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n}\r\n\r\n/* State and Category Styles */\r\n.nav_item_base.plain_background.default,\r\n.nav_item_base.colored_background.default{\r\n    background: transparent;\r\n}\r\n\r\n.nav_item_base.plain_background.active{\r\n    background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.nav_item_base.default.plain_background:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.nav_item_base.colored_background.active{\r\n    background: var(--color-background-information-bold, #042F59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover{\r\n    background: var(--color-blanket, rgba(33, 44, 101, 0.4));\r\n}\r\n\r\n.label_text.plain_background.default{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.label_text.plain_background.active{\r\n    color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.label_text.colored_background{\r\n    color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n    fill: transparent;\r\n}\r\n\r\n/* Arrow Color Styles */\r\n.arrow.default.plain_background path{\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.arrow.active.plain_background path{\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.arrow.default.colored_background path{\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.arrow.active.colored_background path{\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.tooltip{\r\n    position: absolute;\r\n    top: 0.2rem;\r\n    left: 4.3rem;\r\n}","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-simple-side-bar-item',\r\n  styleUrl: 'gb-simple-side-bar-item.css',\r\n  shadow: true,\r\n})\r\n\r\nexport class GbSimpleSideBarItem {\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() type: 'full_with_label' | 'icon_only';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop({ mutable: true }) showTooltip: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  // @State() textState: any;\r\n  @Event() sideBarItemClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\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  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n    // this.textState = this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium';\r\n  }\r\n\r\n  onSideBarItemClicked() {\r\n    this.sideBarItemClicked.emit();\r\n  }\r\n\r\n  // getLabel() {\r\n  //   const slottedLabel = this.el.querySelector('slot');\r\n  //   return slottedLabel.textContent;\r\n  // }\r\n\r\n  render() {\r\n    const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n    const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n    return (\r\n      <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n        <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n          {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n          {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n          <div class=\"content\">\r\n            <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n            {this.type === 'full_with_label' && (\r\n              <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n            )}\r\n          </div>\r\n          {this.type === 'full_with_label' && (\r\n            <>\r\n              {this.showBadge && (\r\n                <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n                  <p>10</p>\r\n                </gb-badge>\r\n              )}\r\n              {this.showArrow && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n                  <path\r\n                    d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n                    stroke=\"#212C65\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n        {this.type === 'icon_only' && this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":["h","getAssetPath","Fragment"],"mappings":"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"}