globuswebcomponents 2.19.2 → 2.19.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gb-accordion-card_91.cjs.entry.js +132 -136
- package/dist/cjs/gb-token-field-compact.cjs.entry.js +1 -1
- package/dist/cjs/gb-token-field-compressed.cjs.entry.js +2 -2
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/test-input-tag.cjs.entry.js +2 -2
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.css +5 -22
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js +95 -100
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map +1 -1
- package/dist/collection/components/gb-input-field/gb-input-field.css +19 -1
- package/dist/collection/components/gb-input-field/gb-input-field.js +41 -14
- package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
- package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.css +3 -15
- package/dist/collection/components/gb-table-header/gb-table-header.css +8 -3
- package/dist/collection/components/gb-table-header/gb-table-header.js +2 -2
- package/dist/collection/components/gb-table-header/gb-table-header.js.map +1 -1
- package/dist/collection/components/gb-tag/gb-tag.js +1 -1
- package/dist/collection/components/gb-tag-checkbox/gb-tag-checkbox.js +1 -1
- package/dist/collection/components/gb-tag-close/gb-tag-close.js +1 -1
- package/dist/collection/components/gb-tag-count/gb-tag-count.js +1 -1
- package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js +3 -3
- package/dist/collection/components/gb-theme-tab/gb-theme-tab.js +1 -1
- package/dist/collection/components/gb-toast/gb-toast.js +1 -1
- package/dist/collection/components/gb-toast-button/gb-toast-button.js +1 -1
- package/dist/collection/components/gb-toggle/gb-toggle.js +1 -1
- package/dist/collection/components/gb-toggle-base/gb-toggle-base.js +2 -2
- package/dist/collection/components/gb-token-field-compact/gb-token-field-compact.js +1 -1
- package/dist/collection/components/gb-token-field-compressed/gb-token-field-compressed.js +2 -2
- package/dist/collection/components/gb-tooltip/gb-tooltip.js +1 -1
- package/dist/collection/components/gb-vertical-tabs/gb-vertical-tabs.js +1 -1
- package/dist/collection/components/gb-wysiwyg-editor-icon/gb-wysiwyg-editor-icon.js +1 -1
- package/dist/collection/components/gb-wysiwyg-toolbar/gb-wysiwyg-toolbar.js +1 -1
- package/dist/collection/components/test-input-tag/test-input-tag.js +2 -2
- package/dist/components/gb-accordion-card.js +2 -2
- package/dist/components/gb-action-panel.js +2 -2
- package/dist/components/gb-approval-modal.js +8 -8
- package/dist/components/gb-avatar-add-button.js +1 -1
- package/dist/components/gb-avatar-dropdown.js +1 -1
- package/dist/components/gb-avatar-group.js +2 -2
- package/dist/components/gb-btn.js +1 -1
- package/dist/components/gb-button.js +1 -1
- package/dist/components/gb-checkbox-group-item.js +1 -1
- package/dist/components/gb-checkbox-group.js +3 -3
- package/dist/components/gb-collapse-button.js +1 -1
- package/dist/components/gb-comment.js +2 -2
- package/dist/components/gb-complex-primary-side-bar-item.js +1 -1
- package/dist/components/gb-complex-secondary-side-bar-item.js +1 -1
- package/dist/components/gb-date-picker.js +1 -1
- package/dist/components/gb-detail-cell.js +6 -6
- package/dist/components/gb-empty-state.js +1 -1
- package/dist/components/gb-file-upload-item-base.js +1 -1
- package/dist/components/gb-file-upload.js +4 -4
- package/dist/components/gb-filter-button.js +1 -1
- package/dist/components/gb-filter-modal.js +1 -1
- package/dist/components/gb-header.js +13 -13
- package/dist/components/gb-help-tooltip.js +1 -1
- package/dist/components/gb-horizontal-tabs.js +96 -101
- package/dist/components/gb-horizontal-tabs.js.map +1 -1
- package/dist/components/gb-icon-button-base.js +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-input-field.js +1 -1
- package/dist/components/gb-modal-action.js +1 -1
- package/dist/components/gb-modal.js +3 -3
- package/dist/components/gb-nav-bar-item.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js +2 -2
- package/dist/components/gb-nav-bar.js +2 -2
- package/dist/components/gb-notification-pane.js +1 -1
- package/dist/components/gb-pagination.js +1 -1
- package/dist/components/gb-password-button.js +1 -1
- package/dist/components/gb-progress-bar.js +1 -1
- package/dist/components/gb-prompt-modal.js +2 -2
- package/dist/components/gb-rich-text.js +12 -12
- package/dist/components/gb-sidebar.js +5 -5
- package/dist/components/gb-simple-side-bar-item.js +1 -1
- package/dist/components/gb-slider-control-handle.js +1 -1
- package/dist/components/gb-slider.js +2 -2
- package/dist/components/gb-tab-button-base.js +1 -1
- package/dist/components/gb-table-header.js +1 -1
- package/dist/components/gb-table.js +21 -21
- package/dist/components/gb-tag-checkbox.js +1 -1
- package/dist/components/gb-tag-close.js +1 -1
- package/dist/components/gb-tag-count.js +1 -1
- package/dist/components/gb-tag.js +1 -1
- package/dist/components/gb-textarea-input-field.js +1 -1
- package/dist/components/gb-theme-tab.js +1 -1
- package/dist/components/gb-toast-button.js +1 -1
- package/dist/components/gb-toast.js +1 -1
- package/dist/components/gb-toggle-base.js +1 -1
- package/dist/components/gb-toggle.js +1 -1
- package/dist/components/gb-token-field-compact.js +1 -1
- package/dist/components/gb-token-field-compressed.js +2 -2
- package/dist/components/gb-tooltip.js +1 -1
- package/dist/components/gb-vertical-tabs.js +1 -1
- package/dist/components/gb-wysiwyg-editor-icon.js +1 -1
- package/dist/components/gb-wysiwyg-toolbar.js +1 -1
- package/dist/components/gb-wysiwyg-tooltip.js +1 -1
- package/dist/components/{p-b3s82Q9X.js → p-7uHLCNUc.js} +4 -4
- package/dist/components/{p-b3s82Q9X.js.map → p-7uHLCNUc.js.map} +1 -1
- package/dist/components/{p-C1oWcge_.js → p-B7wE65ae.js} +3 -3
- package/dist/components/{p-C1oWcge_.js.map → p-B7wE65ae.js.map} +1 -1
- package/dist/components/{p-Bh2tneE8.js → p-B7y6l8y2.js} +11 -11
- package/dist/components/{p-Bh2tneE8.js.map → p-B7y6l8y2.js.map} +1 -1
- package/dist/components/{p-CPNfYdRm.js → p-BBpW2sSo.js} +3 -3
- package/dist/components/{p-CPNfYdRm.js.map → p-BBpW2sSo.js.map} +1 -1
- package/dist/components/{p-7t9DGALC.js → p-BDUlTplG.js} +3 -3
- package/dist/components/{p-7t9DGALC.js.map → p-BDUlTplG.js.map} +1 -1
- package/dist/components/{p-Cr5UZQB2.js → p-BFNIm-jb.js} +6 -6
- package/dist/components/{p-Cr5UZQB2.js.map → p-BFNIm-jb.js.map} +1 -1
- package/dist/components/{p-BYTuxIjn.js → p-BIy6Iz9H.js} +3 -3
- package/dist/components/{p-BYTuxIjn.js.map → p-BIy6Iz9H.js.map} +1 -1
- package/dist/components/{p-DvDrSp52.js → p-BgdF36ob.js} +5 -5
- package/dist/components/{p-DvDrSp52.js.map → p-BgdF36ob.js.map} +1 -1
- package/dist/components/{p-UAnEmTC4.js → p-BheO5g9S.js} +3 -3
- package/dist/components/{p-UAnEmTC4.js.map → p-BheO5g9S.js.map} +1 -1
- package/dist/components/{p-MoXBMqLZ.js → p-BmfqoFFR.js} +4 -4
- package/dist/components/{p-MoXBMqLZ.js.map → p-BmfqoFFR.js.map} +1 -1
- package/dist/components/{p-QRrH0XNA.js → p-BuacPAxJ.js} +3 -3
- package/dist/components/{p-QRrH0XNA.js.map → p-BuacPAxJ.js.map} +1 -1
- package/dist/components/{p-iKzJ45kb.js → p-CGjzNNLL.js} +6 -6
- package/dist/components/{p-iKzJ45kb.js.map → p-CGjzNNLL.js.map} +1 -1
- package/dist/components/{p-z-nLxZVO.js → p-CKNE69Jt.js} +5 -5
- package/dist/components/{p-z-nLxZVO.js.map → p-CKNE69Jt.js.map} +1 -1
- package/dist/components/{p-gyCVbN_J.js → p-CLf82yjS.js} +3 -3
- package/dist/components/{p-gyCVbN_J.js.map → p-CLf82yjS.js.map} +1 -1
- package/dist/components/{p-Cm4t0r0j.js → p-CVlUyGt-.js} +3 -3
- package/dist/components/{p-Cm4t0r0j.js.map → p-CVlUyGt-.js.map} +1 -1
- package/dist/components/{p-CkA31HT1.js → p-CjaqODqN.js} +3 -3
- package/dist/components/p-CjaqODqN.js.map +1 -0
- package/dist/components/{p-BDzojrvH.js → p-CnL3JYpm.js} +5 -5
- package/dist/components/{p-BDzojrvH.js.map → p-CnL3JYpm.js.map} +1 -1
- package/dist/components/{p-CWwjmq0v.js → p-CuhDXF1j.js} +3 -3
- package/dist/components/{p-CWwjmq0v.js.map → p-CuhDXF1j.js.map} +1 -1
- package/dist/components/{p-DnGszNGW.js → p-CxxAThom.js} +16 -16
- package/dist/components/p-CxxAThom.js.map +1 -0
- package/dist/components/{p-1YWPiXuf.js → p-D1YW4Sum.js} +12 -12
- package/dist/components/{p-1YWPiXuf.js.map → p-D1YW4Sum.js.map} +1 -1
- package/dist/components/{p-CnQIvd5K.js → p-D3YDcBx7.js} +6 -6
- package/dist/components/{p-CnQIvd5K.js.map → p-D3YDcBx7.js.map} +1 -1
- package/dist/components/{p-DkLrLbUI.js → p-DBvhf2SI.js} +4 -4
- package/dist/components/{p-DkLrLbUI.js.map → p-DBvhf2SI.js.map} +1 -1
- package/dist/components/{p-kPEcZlMR.js → p-DC76dG62.js} +4 -4
- package/dist/components/{p-kPEcZlMR.js.map → p-DC76dG62.js.map} +1 -1
- package/dist/components/{p-DNUdD2lw.js → p-DHi7vvkR.js} +4 -4
- package/dist/components/{p-DNUdD2lw.js.map → p-DHi7vvkR.js.map} +1 -1
- package/dist/components/{p-C7_Pzx6F.js → p-DJIp9uts.js} +4 -4
- package/dist/components/{p-C7_Pzx6F.js.map → p-DJIp9uts.js.map} +1 -1
- package/dist/components/{p-jZV3N-O0.js → p-DaTP4MvQ.js} +3 -3
- package/dist/components/{p-jZV3N-O0.js.map → p-DaTP4MvQ.js.map} +1 -1
- package/dist/components/{p-CL_mV11E.js → p-DcDhbSZD.js} +4 -4
- package/dist/components/{p-CL_mV11E.js.map → p-DcDhbSZD.js.map} +1 -1
- package/dist/components/{p-CjCyCgWb.js → p-DjeEn6df.js} +3 -3
- package/dist/components/{p-CjCyCgWb.js.map → p-DjeEn6df.js.map} +1 -1
- package/dist/components/{p-Ba2nqAFI.js → p-DmFvEYmm.js} +9 -9
- package/dist/components/{p-Ba2nqAFI.js.map → p-DmFvEYmm.js.map} +1 -1
- package/dist/components/{p-B4KRCeBI.js → p-DySJVGoY.js} +3 -3
- package/dist/components/{p-B4KRCeBI.js.map → p-DySJVGoY.js.map} +1 -1
- package/dist/components/{p-B14RIt38.js → p-FUxshpQM.js} +4 -4
- package/dist/components/{p-B14RIt38.js.map → p-FUxshpQM.js.map} +1 -1
- package/dist/components/{p-D1ipn9Uc.js → p-FuTvKxWX.js} +3 -3
- package/dist/components/{p-D1ipn9Uc.js.map → p-FuTvKxWX.js.map} +1 -1
- package/dist/components/{p-DcePJpcZ.js → p-Ifiyli5k.js} +4 -4
- package/dist/components/{p-DcePJpcZ.js.map → p-Ifiyli5k.js.map} +1 -1
- package/dist/components/{p-0pSOogFh.js → p-RDQHy6a5.js} +14 -14
- package/dist/components/{p-0pSOogFh.js.map → p-RDQHy6a5.js.map} +1 -1
- package/dist/components/{p-B5qvfLPS.js → p-RDyNJ9Gh.js} +3 -3
- package/dist/components/{p-B5qvfLPS.js.map → p-RDyNJ9Gh.js.map} +1 -1
- package/dist/components/{p-C08aLARD.js → p-YxRex_HF.js} +3 -3
- package/dist/components/{p-C08aLARD.js.map → p-YxRex_HF.js.map} +1 -1
- package/dist/components/{p-CQC-jIto.js → p-gOlpqMTl.js} +3 -3
- package/dist/components/{p-CQC-jIto.js.map → p-gOlpqMTl.js.map} +1 -1
- package/dist/components/{p-BOWm5cIi.js → p-h1lvtKAJ.js} +3 -3
- package/dist/components/{p-BOWm5cIi.js.map → p-h1lvtKAJ.js.map} +1 -1
- package/dist/components/{p-BzJKCyKM.js → p-iRe5442y.js} +4 -4
- package/dist/components/{p-BzJKCyKM.js.map → p-iRe5442y.js.map} +1 -1
- package/dist/components/{p-m1u_rpqG.js → p-oIOTX0eL.js} +27 -25
- package/dist/components/p-oIOTX0eL.js.map +1 -0
- package/dist/components/test-input-tag.js +6 -6
- package/dist/docs.json +83 -7
- package/dist/esm/gb-accordion-card_91.entry.js +132 -136
- package/dist/esm/gb-token-field-compact.entry.js +1 -1
- package/dist/esm/gb-token-field-compressed.entry.js +2 -2
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/test-input-tag.entry.js +2 -2
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/icons-BxJPybuU.js.map +1 -0
- package/dist/globuscomponents/index-DtpEbOKW.js.map +1 -0
- package/dist/globuscomponents/{p-1b95ac84.entry.js → p-53053694.entry.js} +2 -2
- package/dist/globuscomponents/{p-79887fe8.entry.js → p-59e13f0e.entry.js} +2 -2
- package/dist/globuscomponents/{p-37da4422.entry.js → p-9f1105d8.entry.js} +2 -2
- package/dist/globuscomponents/{p-ffce6c75.entry.js → p-d1b31bbc.entry.js} +2 -2
- package/dist/globuscomponents/p-d1b31bbc.entry.js.map +1 -0
- package/dist/globuscomponents/reusableModels-cHn6O-Kf.js.map +1 -0
- package/dist/types/components/gb-input-field/gb-input-field.d.ts +2 -1
- package/dist/types/components.d.ts +10 -2
- package/package.json +4 -2
- package/dist/components/p-CkA31HT1.js.map +0 -1
- package/dist/components/p-DnGszNGW.js.map +0 -1
- package/dist/components/p-m1u_rpqG.js.map +0 -1
- package/dist/globuscomponents/p-ffce6c75.entry.js.map +0 -1
- /package/dist/globuscomponents/{p-1b95ac84.entry.js.map → p-53053694.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-79887fe8.entry.js.map → p-59e13f0e.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-37da4422.entry.js.map → p-9f1105d8.entry.js.map} +0 -0
|
@@ -35,7 +35,7 @@ const GbTooltip = /*@__PURE__*/ proxyCustomElement(class GbTooltip extends H {
|
|
|
35
35
|
return this.showArrow ? `arrow ${this.arrow}` : '';
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h("div", { key: '
|
|
38
|
+
return (h("div", { key: '26867b95379cc59d5b706fb593e168f3b707d4e2', class: "tooltip_container" }, h("div", { key: '2572966867e1a11a6b6d57f35f7e94fdf1159f92', class: "tooltip", style: { width: this.width } }, this.showArrow && h("div", { key: '1087c56e877ca59b8887faeb49b6703832bb22f7', class: this.getArrowClass() }), h("div", { key: 'c4169802888eaeaab3a1159a8aa39ab429315cc3', class: "tooltip_content" }, h("slot", { key: 'b70b46d6eb1f496e51a36fb8c7fdea1134d364f6', name: "label" }), this.showSupportingText && h("slot", { key: '58ff5b7e57c5aeba47a9a89e35913274b3d94781', name: "supporting_text" })))));
|
|
39
39
|
}
|
|
40
40
|
get el() { return this; }
|
|
41
41
|
static get style() { return gbTooltipCss; }
|
|
@@ -62,6 +62,6 @@ function defineCustomElement() {
|
|
|
62
62
|
defineCustomElement();
|
|
63
63
|
|
|
64
64
|
export { GbTooltip as G, defineCustomElement as d };
|
|
65
|
-
//# sourceMappingURL=p-
|
|
65
|
+
//# sourceMappingURL=p-FuTvKxWX.js.map
|
|
66
66
|
|
|
67
|
-
//# sourceMappingURL=p-
|
|
67
|
+
//# sourceMappingURL=p-FuTvKxWX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-FuTvKxWX.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6ntEAA6ntE;;MCQrotE,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAK,CAAA,KAAA,GAAmB,cAAc;AACtC,QAAA,IAAkB,CAAA,kBAAA,GAAY,KAAK;AACnC,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAyC3B;IAtCC,gBAAgB,GAAA;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;QAC5D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC;QAE5E,IAAI,YAAY,EAAE;AAChB,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;;AAGjD,QAAA,IAAI,YAAY,IAAI,IAAI,CAAC,MAAM,EAAE;AAC/B,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;;AAGtC,QAAA,IAAI,YAAY,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAC5D,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;;QAG1C,IAAI,kBAAkB,EAAE;AACtB,YAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;;;IAIvD,aAAa,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,SAAS,GAAG,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,EAAE;;IAGpD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAA,EAC9C,IAAI,CAAC,SAAS,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAQ,CAAA,EAC3D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACpB,IAAI,CAAC,kBAAkB,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAG,CACvD,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-tooltip/gb-tooltip.css?tag=gb-tooltip&encapsulation=shadow","src/components/gb-tooltip/gb-tooltip.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n:host{\n display: block;\n}\n\n.tooltip_container {\n position: relative;\n}\n \n.tooltip {\n position: absolute;\n background-color: var(--color-surface-bold, #FCFCFC);\n border: 0.5px solid var(--color-border-subtler, #E3E8EF);\n border-radius: var(--rounded-sm);\n box-shadow: var(--shadow-sm);\n padding: var(--spacing-3);\n z-index: 100;\n}\n\n.tooltip_content{\n display: flex;\n flex-direction: column;\n gap: var(--spacing-3);\n \n}\n \n.arrow {\n width: 0;\n height: 0;\n border-style: solid;\n position: absolute;\n}\n\n.arrow::before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n}\n \n.arrow.bottom_center {\n top: 100%;\n left: 50%;\n border-width: 7.5px 7.5px 0 7.5px;\n border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\n transform: translateX(-50%);\n}\n\n.arrow.bottom_center::before {\n left: -0.39rem;\n bottom: 0.1rem;\n border-width: 0 9.6px 9.6px 9.6px;\n transform: translateY(-50%) rotate(135deg);\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\n}\n \n.arrow.left {\n top: 50%;\n right: 100%;\n border-width: 6px 0 6px 6px;\n border-color: transparent transparent transparent var(--color-border-subtler, #E3E8EF);\n transform: translateY(-50%) rotate(180deg);\n}\n\n.arrow.left::before {\n left: -8px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 7.5px 0 7.5px 7.5px;\n border-color: transparent transparent transparent var(--color-surface-bold, #FCFCFC);\n}\n\n.arrow.bottom_left {\n top: 100%;\n left: 5%;\n border-width: 7.5px 7.5px 0 7.5px;\n border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\n transform: translateX(-50%);\n}\n\n.arrow.bottom_left::before {\n left: -0.39rem;\n bottom: 0.1rem;\n border-width: 0 9.6px 9.6px 9.6px;\n transform: translateY(-50%) rotate(135deg);\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\n}\n \n.arrow.right {\n top: 50%;\n left: 100%;\n border-width: 7px 7px 7px 0;\n border-color: transparent var(--color-border-subtler, #E3E8EF) transparent transparent;\n transform: translateY(-50%) rotate(-180deg);\n}\n\n.arrow.right::before {\n left: 0.5px;\n top: 50%;\n border-width: 6.5px 6.5px 6.5px 0;\n transform: translateY(-50%) rotate(0deg);\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\n}\n\n.arrow.bottom_right {\n top: 100%;\n right: 5%;\n border-width: 7.5px 7.5px 0 7.5px;\n border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\n transform: translateX(-50%);\n}\n\n.arrow.bottom_right::before {\n left: -0.39rem;\n bottom: 0.1rem;\n border-width: 0 9.6px 9.6px 9.6px;\n transform: translateY(-50%) rotate(135deg);\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\n}\n \n.arrow.top_center {\n bottom: 100%;\n right: 45%;\n border-width: 0 7.5px 7.5px 7.5px;\n border-color: transparent transparent var(--color-border-subtler, #E3E8EF) transparent;\n}\n\n.arrow.top_center::before {\n left: -12.8px;\n bottom: -20.25px;\n border-width: 0 9.5px 9.5px 9.5px;\n transform: translateY(-50%) rotate(-45deg);\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\n}\n\n::slotted([slot=\"label\"]){\n color: var(--color-text, #4B5565) !important;\n}\n\n::slotted([slot=\"label\"].nowrap){\n white-space: nowrap;\n}\n\n::slotted([slot=\"label\"].wrap_label){\n white-space: wrap;\n max-width: 10rem;\n}\n\n::slotted([slot=\"supporting_text\"]){\n white-space: wrap;\n color: var(--color-text-subtle, #697586) !important;\n margin-top: 5rem;\n min-width: fit-content;\n max-width: 18.5rem;\n}","import { Component, Element, Prop, h } from '@stencil/core';\nimport { ArrowPositions } from '../../models/reusableModels';\n\n@Component({\n tag: 'gb-tooltip',\n styleUrl: 'gb-tooltip.css',\n shadow: true,\n})\nexport class GbTooltip {\n @Prop() showArrow: boolean = false;\n @Prop() arrow: ArrowPositions = 'bottom_right';\n @Prop() showSupportingText: boolean = false;\n @Prop() noWrap: boolean = true;\n @Prop() width: string = '';\n @Element() el: HTMLElement;\n\n componentDidLoad() {\n const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\n\n if (mainTextSlot) {\n mainTextSlot.classList.add('text-xs-semi-bold');\n }\n\n if (mainTextSlot && this.noWrap) {\n mainTextSlot.classList.add('nowrap');\n }\n\n if (mainTextSlot && !this.showSupportingText && !this.noWrap) {\n mainTextSlot.classList.add('wrap_label');\n }\n\n if (supportingTextSlot) {\n supportingTextSlot.classList.add('text-xs-regular');\n }\n }\n\n getArrowClass() {\n return this.showArrow ? `arrow ${this.arrow}` : '';\n }\n\n render() {\n return (\n <div class=\"tooltip_container\">\n <div class=\"tooltip\" style={{ width: this.width }}>\n {this.showArrow && <div class={this.getArrowClass()}></div>}\n <div class=\"tooltip_content\">\n <slot name=\"label\" />\n {this.showSupportingText && <slot name=\"supporting_text\" />}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { d as defineCustomElement$5 } from './p-DhmmSqYS.js';
|
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-DyRr7Mo4.js';
|
|
5
5
|
import { d as defineCustomElement$3 } from './p-mGWgn0GR.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './p-Bd_W1zWv.js';
|
|
7
|
-
import { d as defineCustomElement$1 } from './p-
|
|
7
|
+
import { d as defineCustomElement$1 } from './p-CjaqODqN.js';
|
|
8
8
|
|
|
9
9
|
const gbVerticalTabsCss = ".vertical_tab_div{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%}";
|
|
10
10
|
|
|
@@ -41,7 +41,7 @@ const GbVerticalTabs = /*@__PURE__*/ proxyCustomElement(class GbVerticalTabs ext
|
|
|
41
41
|
this.tabItemClicked.emit({ index, label });
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
|
-
return (h("div", { key: '
|
|
44
|
+
return (h("div", { key: '3f8f331858ce60e6299507819d4c695429ba3da1', class: `vertical_tab_div` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": tab.name, current: this.activeIndex === index, onClick: () => this.handleTabClick(index, tab.name), alignment: "vertical", truncate: this.truncate })))));
|
|
45
45
|
}
|
|
46
46
|
static get watchers() { return {
|
|
47
47
|
"tabs": ["onTabsChanged"]
|
|
@@ -103,6 +103,6 @@ function defineCustomElement() {
|
|
|
103
103
|
defineCustomElement();
|
|
104
104
|
|
|
105
105
|
export { GbVerticalTabs as G, defineCustomElement as d };
|
|
106
|
-
//# sourceMappingURL=p-
|
|
106
|
+
//# sourceMappingURL=p-Ifiyli5k.js.map
|
|
107
107
|
|
|
108
|
-
//# sourceMappingURL=p-
|
|
108
|
+
//# sourceMappingURL=p-Ifiyli5k.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-Ifiyli5k.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,uFAAuF;;MCQpG,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQ2B,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;QACxC,IAAA,CAAA,IAAI,GAAsC;;;;;;;;;SASjD;AACO,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;QACxB,IAAA,CAAA,YAAY,GAAsC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;AAkC1E;AA9BC,IAAA,aAAa,CAAC,OAA0C,EAAA;AACtD,QAAA,IAAI,CAAC,YAAY,GAAG,OAAO;;IAG7B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;AAG/B,IAAA,MAAM,cAAc,CAAC,KAAa,EAAE,KAAa,EAAA;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;;IAG5C,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAkB,gBAAA,CAAA,EAAA,EAC3B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MAChC,CACE,CAAA,oBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAAC,IAAI,EAAA,UAAA,EAC3D,GAAG,CAAC,IAAI,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,EACnD,SAAS,EAAC,UAAU,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACH,CACvB,CAAC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-vertical-tabs/gb-vertical-tabs.css?tag=gb-vertical-tabs&encapsulation=shadow","src/components/gb-vertical-tabs/gb-vertical-tabs.tsx"],"sourcesContent":[".vertical_tab_div{\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1);\n width: 100%;\n}","import { Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\n\n@Component({\n tag: 'gb-vertical-tabs',\n styleUrl: 'gb-vertical-tabs.css',\n shadow: true,\n})\nexport class GbVerticalTabs {\n @Prop() size: GeneralSizes;\n @Prop() type: TabTypes;\n @Prop({ mutable: true }) activeIndex: number = 0;\n @Prop() tabs: { name: string; index: number }[] = [\n // { \n // name: 'Hiiii',\n // index: 0,\n // },\n // {\n // name: 'There',\n // index: 1,\n // },\n ];\n @Prop() truncate: boolean = false;\n @State() internalTabs: { name: string; index: number }[] = [...this.tabs];\n @Event() tabItemClicked: EventEmitter<{ index: number; label: string }>;\n\n @Watch('tabs')\n onTabsChanged(newTabs: { name: string; index: number }[]) {\n this.internalTabs = newTabs;\n }\n\n componentWillLoad() {\n this.internalTabs = this.tabs;\n }\n\n async handleTabClick(index: number, label: string) {\n this.activeIndex = index;\n this.tabItemClicked.emit({ index, label });\n }\n\n render() {\n return (\n <div class={`vertical_tab_div`}>\n {this.internalTabs.map((tab, index) => (\n <gb-tab-button-base\n size={this.size}\n type={this.type === 'button_gray_border' ? 'button_white' : this.type}\n tab-name={tab.name}\n current={this.activeIndex === index}\n onClick={() => this.handleTabClick(index, tab.name)}\n alignment=\"vertical\"\n truncate={this.truncate}\n ></gb-tab-button-base>\n ))}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-CD7FeUx5.js';
|
|
2
2
|
import { d as defineCustomElement$j } from './p-CgLuRbaL.js';
|
|
3
3
|
import { d as defineCustomElement$i } from './p-DhmmSqYS.js';
|
|
4
|
-
import { d as defineCustomElement$h } from './p-
|
|
4
|
+
import { d as defineCustomElement$h } from './p-YxRex_HF.js';
|
|
5
5
|
import { d as defineCustomElement$g } from './p-OVoS3dKe.js';
|
|
6
6
|
import { d as defineCustomElement$f } from './p-BE9pk1IO.js';
|
|
7
|
-
import { d as defineCustomElement$e } from './p-
|
|
7
|
+
import { d as defineCustomElement$e } from './p-CLf82yjS.js';
|
|
8
8
|
import { d as defineCustomElement$d } from './p-01JGSaJc.js';
|
|
9
|
-
import { d as defineCustomElement$c } from './p-
|
|
9
|
+
import { d as defineCustomElement$c } from './p-B7y6l8y2.js';
|
|
10
10
|
import { d as defineCustomElement$b } from './p-yhPI0UDy.js';
|
|
11
|
-
import { d as defineCustomElement$a } from './p-
|
|
12
|
-
import { d as defineCustomElement$9 } from './p-
|
|
11
|
+
import { d as defineCustomElement$a } from './p-oIOTX0eL.js';
|
|
12
|
+
import { d as defineCustomElement$9 } from './p-FUxshpQM.js';
|
|
13
13
|
import { d as defineCustomElement$8 } from './p-B94266BQ.js';
|
|
14
14
|
import { d as defineCustomElement$7 } from './p-Bd_W1zWv.js';
|
|
15
|
-
import { d as defineCustomElement$6 } from './p-
|
|
16
|
-
import { d as defineCustomElement$5 } from './p-
|
|
17
|
-
import { d as defineCustomElement$4 } from './p-
|
|
18
|
-
import { d as defineCustomElement$3 } from './p-
|
|
19
|
-
import { d as defineCustomElement$2 } from './p-
|
|
20
|
-
import { d as defineCustomElement$1 } from './p-
|
|
15
|
+
import { d as defineCustomElement$6 } from './p-D3YDcBx7.js';
|
|
16
|
+
import { d as defineCustomElement$5 } from './p-BIy6Iz9H.js';
|
|
17
|
+
import { d as defineCustomElement$4 } from './p-BDUlTplG.js';
|
|
18
|
+
import { d as defineCustomElement$3 } from './p-BBpW2sSo.js';
|
|
19
|
+
import { d as defineCustomElement$2 } from './p-FuTvKxWX.js';
|
|
20
|
+
import { d as defineCustomElement$1 } from './p-B7wE65ae.js';
|
|
21
21
|
|
|
22
22
|
const gbWysiwygToolbarCss = ".toolbar_wrapper{display:inline-flex;align-items:center;gap:0.75rem}.font_selector{width:20rem}.editor_icons{display:flex;align-items:flex-start;gap:var(--spacing-2)}";
|
|
23
23
|
|
|
@@ -118,7 +118,7 @@ const GbWysiwygToolbar = /*@__PURE__*/ proxyCustomElement(class GbWysiwygToolbar
|
|
|
118
118
|
this.toolbarAction.emit(action);
|
|
119
119
|
}
|
|
120
120
|
render() {
|
|
121
|
-
return (h("div", { key: '
|
|
121
|
+
return (h("div", { key: 'a90a4317be7a30fe43a057c34c3bdb5f272b4521', class: "toolbar_wrapper" }, this.fontSelector && (h("div", { key: '0bcdf5474703298487f3b174ec7032e3f3bf5c2f', class: "font_selector" }, h("gb-input-dropdown", { key: '1a4e8bde9562d41ebc34a05909c6359ecf215572', "show-placeholder": "true", placeholder: "Select an option", size: "sm", state: "default", "show-hint-text": "false", "hint-text": "This is a hint text to help user.", type: "default", text: true, "show-leading-icon": "true", "leading-icon": "assets/search-01.svg", "menu-position": "bottom", icon: "false", value: ['Sora'] }))), h("div", { key: 'bd9692eb8b05c4211130768e5fd80fe7246d0f41', class: "editor_icons" }, h("gb-wysiwyg-editor-icon", { key: '0459fe92979f4f78f46be796c1664a3940eb382b', state: this.stateFor('bold'), active: this._isBold, type: "bold", onMouseDown: (ev) => this.emit('bold', ev) }), h("gb-wysiwyg-editor-icon", { key: 'cd846caf1b839cebfb5cf935f12fd8b61c34fcd1', state: this.stateFor('italic'), active: this._isItalic, type: "italic", onMouseDown: (ev) => this.emit('italic', ev) }), h("gb-wysiwyg-editor-icon", { key: '7eafc92f69e9576839ac0e90ca33762d1afbbc12', state: this.stateFor('underline'), active: this._isUnderline, type: "underline", onMouseDown: (ev) => this.emit('underline', ev) }), h("gb-wysiwyg-editor-icon", { key: '7d2c9bce97e2265994991ccd669344535ed08ee4', state: this.stateFor('h1'), active: this._isH1, type: "h1", onMouseDown: (ev) => this.emit('h1', ev) }), h("gb-wysiwyg-editor-icon", { key: '1481d53beaf611669acd1a95b0c7143997fbe854', state: this.stateFor('h2'), active: this._isH2, type: "h2", onMouseDown: (ev) => this.emit('h2', ev) }), h("gb-wysiwyg-editor-icon", { key: 'd7b1bcb51f6be31eff9dfc901b75472d23ce4c0e', state: this.stateFor('quote'), active: this._isQuote, type: "quote", onMouseDown: (ev) => this.emit('quote', ev) }), h("gb-wysiwyg-editor-icon", { key: 'f8ab9099e8e5f37d0331499b10704cd112588200', state: this.stateFor('link'), active: this._isLink, type: "link", onMouseDown: (ev) => this.emit('link', ev) }), h("gb-wysiwyg-editor-icon", { key: '86794220b82d63f98587b9bcadc5eee65d10373b', state: this.stateFor('attachment'), active: this.isAttachment, type: "attachment", onMouseDown: (ev) => this.emit('attachment', ev) }), h("gb-wysiwyg-editor-icon", { key: '4af3845bacf9329033ac4fe77dfa0dd6ace4c3f7', state: this.stateFor('photo'), active: this.isPhoto, type: "photo", onMouseDown: (ev) => this.emit('photo', ev) }), h("gb-wysiwyg-editor-icon", { key: 'ed28e3a1b391700ac31acef36c82d72cfa8e3d7d', state: this.stateFor('bulletList'), active: this.isBulletList, type: "list_bullet", onMouseDown: (ev) => this.emit('bulletList', ev) }), h("gb-wysiwyg-editor-icon", { key: '1b3646eec3cc6e2f2cb3df79f3cfb1d28f6e8d42', state: this.stateFor('orderedList'), active: this.isOrderedList, type: "list_numbers", onMouseDown: (ev) => this.emit('orderedList', ev) }))));
|
|
122
122
|
}
|
|
123
123
|
static get watchers() { return {
|
|
124
124
|
"isBold": ["onBoldChange"],
|
|
@@ -287,6 +287,6 @@ function defineCustomElement() {
|
|
|
287
287
|
defineCustomElement();
|
|
288
288
|
|
|
289
289
|
export { GbWysiwygToolbar as G, defineCustomElement as d };
|
|
290
|
-
//# sourceMappingURL=p-
|
|
290
|
+
//# sourceMappingURL=p-RDQHy6a5.js.map
|
|
291
291
|
|
|
292
|
-
//# sourceMappingURL=p-
|
|
292
|
+
//# sourceMappingURL=p-RDQHy6a5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-0pSOogFh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-wysiwyg-toolbar/gb-wysiwyg-toolbar.css?tag=gb-wysiwyg-toolbar&encapsulation=shadow","src/components/gb-wysiwyg-toolbar/gb-wysiwyg-toolbar.tsx"],"sourcesContent":[".toolbar_wrapper {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.font_selector{\n width: 20rem;\n}\n\n.editor_icons {\n display: flex;\n align-items: flex-start;\n gap: var(--spacing-2);\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'gb-wysiwyg-toolbar',\n styleUrl: 'gb-wysiwyg-toolbar.css',\n shadow: true,\n})\nexport class GbWysiwygToolbar {\n @Prop() fontSelector: boolean = false;\n\n // Icons to disable, as an array or comma-separated string of action keys\n // (e.g. ['photo', 'attachment'] or \"photo,attachment\").\n @Prop() disabledIcons: string | string[] = [];\n\n // Active states (passed in from gb-rich-text)\n @Prop() isBold: boolean = false;\n @Prop() isItalic: boolean = false;\n @Prop() isUnderline: boolean = false;\n @Prop() isH1: boolean = false;\n @Prop() isH2: boolean = false;\n @Prop() isQuote: boolean = false;\n @Prop() isLink: boolean = false;\n @Prop() isBulletList: boolean = false;\n @Prop() isOrderedList: boolean = false;\n @Prop() isAttachment: boolean = false;\n @Prop() isPhoto: boolean = false;\n\n // Mirror props into state so shadow DOM re-renders on change\n @State() _isBold: boolean = false;\n @State() _isItalic: boolean = false;\n @State() _isUnderline: boolean = false;\n @State() _isH1: boolean = false;\n @State() _isH2: boolean = false;\n @State() _isQuote: boolean = false;\n @State() _isLink: boolean = false;\n @State() _isBulletList: boolean = false;\n @State() _isOrderedList: boolean = false;\n @Event() toolbarAction: EventEmitter<string>;\n \n @Watch('isBold') onBoldChange(v: boolean) {\n this._isBold = v;\n }\n @Watch('isItalic') onItalicChange(v: boolean) {\n this._isItalic = v;\n }\n @Watch('isUnderline') onUnderlineChange(v: boolean) {\n this._isUnderline = v;\n }\n @Watch('isH1') onH1Change(v: boolean) {\n this._isH1 = v;\n }\n @Watch('isH2') onH2Change(v: boolean) {\n this._isH2 = v;\n }\n @Watch('isQuote') onQuoteChange(v: boolean) {\n this._isQuote = v;\n }\n @Watch('isLink') onLinkChange(v: boolean) {\n this._isLink = v;\n }\n @Watch('isBulletList') onBulletListChange(v: boolean) {\n this._isBulletList = v;\n }\n @Watch('isOrderedList') onOrderedListChange(v: boolean) {\n this._isOrderedList = v;\n }\n\n // Sync initial prop values into state on first load\n componentWillLoad() {\n this._isBold = this.isBold;\n this._isItalic = this.isItalic;\n this._isUnderline = this.isUnderline;\n this._isH1 = this.isH1;\n this._isH2 = this.isH2;\n this._isQuote = this.isQuote;\n this._isLink = this.isLink;\n this._isBulletList = this.isBulletList;\n this._isOrderedList = this.isOrderedList;\n }\n\n // Aliases so consumers can use either the action name or the icon `type`.\n private static ICON_ALIASES: Record<string, string> = {\n listbullet: 'bulletlist',\n bullets: 'bulletlist',\n listnumbers: 'orderedlist',\n numbered: 'orderedlist',\n ordered: 'orderedlist',\n image: 'photo',\n attach: 'attachment',\n };\n\n private static normalizeKey(key: string): string {\n const normalized = key.trim().toLowerCase().replace(/[\\s_-]/g, '');\n return GbWysiwygToolbar.ICON_ALIASES[normalized] ?? normalized;\n }\n\n private get disabledIconSet(): Set<string> {\n const raw = Array.isArray(this.disabledIcons) ? this.disabledIcons : String(this.disabledIcons ?? '').split(',');\n return new Set(raw.map(GbWysiwygToolbar.normalizeKey).filter(Boolean));\n }\n\n private isDisabled(action: string): boolean {\n return this.disabledIconSet.has(GbWysiwygToolbar.normalizeKey(action));\n }\n\n private stateFor(action: string): 'default' | 'disabled' {\n return this.isDisabled(action) ? 'disabled' : 'default';\n }\n\n private emit(action: string, ev: MouseEvent) {\n ev.preventDefault();\n if (this.isDisabled(action)) return;\n this.toolbarAction.emit(action);\n }\n\n render() {\n return (\n <div class=\"toolbar_wrapper\">\n {this.fontSelector && (\n <div class=\"font_selector\">\n <gb-input-dropdown\n show-placeholder=\"true\"\n placeholder=\"Select an option\"\n size=\"sm\"\n state=\"default\"\n show-hint-text=\"false\"\n hint-text=\"This is a hint text to help user.\"\n type=\"default\"\n text={true}\n show-leading-icon=\"true\"\n leading-icon=\"assets/search-01.svg\"\n menu-position=\"bottom\"\n icon=\"false\"\n value={['Sora']}\n ></gb-input-dropdown>\n </div>\n )}\n <div class=\"editor_icons\">\n <gb-wysiwyg-editor-icon state={this.stateFor('bold')} active={this._isBold} type=\"bold\" onMouseDown={(ev: MouseEvent) => this.emit('bold', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('italic')} active={this._isItalic} type=\"italic\" onMouseDown={(ev: MouseEvent) => this.emit('italic', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('underline')} active={this._isUnderline} type=\"underline\" onMouseDown={(ev: MouseEvent) => this.emit('underline', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('h1')} active={this._isH1} type=\"h1\" onMouseDown={(ev: MouseEvent) => this.emit('h1', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('h2')} active={this._isH2} type=\"h2\" onMouseDown={(ev: MouseEvent) => this.emit('h2', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('quote')} active={this._isQuote} type=\"quote\" onMouseDown={(ev: MouseEvent) => this.emit('quote', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('link')} active={this._isLink} type=\"link\" onMouseDown={(ev: MouseEvent) => this.emit('link', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon\n state={this.stateFor('attachment')}\n active={this.isAttachment}\n type=\"attachment\"\n onMouseDown={(ev: MouseEvent) => this.emit('attachment', ev)}\n ></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('photo')} active={this.isPhoto} type=\"photo\" onMouseDown={(ev: MouseEvent) => this.emit('photo', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('bulletList')} active={this.isBulletList} type=\"list_bullet\" onMouseDown={(ev: MouseEvent) => this.emit('bulletList', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('orderedList')} active={this.isOrderedList} type=\"list_numbers\" onMouseDown={(ev: MouseEvent) => this.emit('orderedList', ev)}></gb-wysiwyg-editor-icon>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-RDQHy6a5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-wysiwyg-toolbar/gb-wysiwyg-toolbar.css?tag=gb-wysiwyg-toolbar&encapsulation=shadow","src/components/gb-wysiwyg-toolbar/gb-wysiwyg-toolbar.tsx"],"sourcesContent":[".toolbar_wrapper {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.font_selector{\n width: 20rem;\n}\n\n.editor_icons {\n display: flex;\n align-items: flex-start;\n gap: var(--spacing-2);\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'gb-wysiwyg-toolbar',\n styleUrl: 'gb-wysiwyg-toolbar.css',\n shadow: true,\n})\nexport class GbWysiwygToolbar {\n @Prop() fontSelector: boolean = false;\n\n // Icons to disable, as an array or comma-separated string of action keys\n // (e.g. ['photo', 'attachment'] or \"photo,attachment\").\n @Prop() disabledIcons: string | string[] = [];\n\n // Active states (passed in from gb-rich-text)\n @Prop() isBold: boolean = false;\n @Prop() isItalic: boolean = false;\n @Prop() isUnderline: boolean = false;\n @Prop() isH1: boolean = false;\n @Prop() isH2: boolean = false;\n @Prop() isQuote: boolean = false;\n @Prop() isLink: boolean = false;\n @Prop() isBulletList: boolean = false;\n @Prop() isOrderedList: boolean = false;\n @Prop() isAttachment: boolean = false;\n @Prop() isPhoto: boolean = false;\n\n // Mirror props into state so shadow DOM re-renders on change\n @State() _isBold: boolean = false;\n @State() _isItalic: boolean = false;\n @State() _isUnderline: boolean = false;\n @State() _isH1: boolean = false;\n @State() _isH2: boolean = false;\n @State() _isQuote: boolean = false;\n @State() _isLink: boolean = false;\n @State() _isBulletList: boolean = false;\n @State() _isOrderedList: boolean = false;\n @Event() toolbarAction: EventEmitter<string>;\n \n @Watch('isBold') onBoldChange(v: boolean) {\n this._isBold = v;\n }\n @Watch('isItalic') onItalicChange(v: boolean) {\n this._isItalic = v;\n }\n @Watch('isUnderline') onUnderlineChange(v: boolean) {\n this._isUnderline = v;\n }\n @Watch('isH1') onH1Change(v: boolean) {\n this._isH1 = v;\n }\n @Watch('isH2') onH2Change(v: boolean) {\n this._isH2 = v;\n }\n @Watch('isQuote') onQuoteChange(v: boolean) {\n this._isQuote = v;\n }\n @Watch('isLink') onLinkChange(v: boolean) {\n this._isLink = v;\n }\n @Watch('isBulletList') onBulletListChange(v: boolean) {\n this._isBulletList = v;\n }\n @Watch('isOrderedList') onOrderedListChange(v: boolean) {\n this._isOrderedList = v;\n }\n\n // Sync initial prop values into state on first load\n componentWillLoad() {\n this._isBold = this.isBold;\n this._isItalic = this.isItalic;\n this._isUnderline = this.isUnderline;\n this._isH1 = this.isH1;\n this._isH2 = this.isH2;\n this._isQuote = this.isQuote;\n this._isLink = this.isLink;\n this._isBulletList = this.isBulletList;\n this._isOrderedList = this.isOrderedList;\n }\n\n // Aliases so consumers can use either the action name or the icon `type`.\n private static ICON_ALIASES: Record<string, string> = {\n listbullet: 'bulletlist',\n bullets: 'bulletlist',\n listnumbers: 'orderedlist',\n numbered: 'orderedlist',\n ordered: 'orderedlist',\n image: 'photo',\n attach: 'attachment',\n };\n\n private static normalizeKey(key: string): string {\n const normalized = key.trim().toLowerCase().replace(/[\\s_-]/g, '');\n return GbWysiwygToolbar.ICON_ALIASES[normalized] ?? normalized;\n }\n\n private get disabledIconSet(): Set<string> {\n const raw = Array.isArray(this.disabledIcons) ? this.disabledIcons : String(this.disabledIcons ?? '').split(',');\n return new Set(raw.map(GbWysiwygToolbar.normalizeKey).filter(Boolean));\n }\n\n private isDisabled(action: string): boolean {\n return this.disabledIconSet.has(GbWysiwygToolbar.normalizeKey(action));\n }\n\n private stateFor(action: string): 'default' | 'disabled' {\n return this.isDisabled(action) ? 'disabled' : 'default';\n }\n\n private emit(action: string, ev: MouseEvent) {\n ev.preventDefault();\n if (this.isDisabled(action)) return;\n this.toolbarAction.emit(action);\n }\n\n render() {\n return (\n <div class=\"toolbar_wrapper\">\n {this.fontSelector && (\n <div class=\"font_selector\">\n <gb-input-dropdown\n show-placeholder=\"true\"\n placeholder=\"Select an option\"\n size=\"sm\"\n state=\"default\"\n show-hint-text=\"false\"\n hint-text=\"This is a hint text to help user.\"\n type=\"default\"\n text={true}\n show-leading-icon=\"true\"\n leading-icon=\"assets/search-01.svg\"\n menu-position=\"bottom\"\n icon=\"false\"\n value={['Sora']}\n ></gb-input-dropdown>\n </div>\n )}\n <div class=\"editor_icons\">\n <gb-wysiwyg-editor-icon state={this.stateFor('bold')} active={this._isBold} type=\"bold\" onMouseDown={(ev: MouseEvent) => this.emit('bold', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('italic')} active={this._isItalic} type=\"italic\" onMouseDown={(ev: MouseEvent) => this.emit('italic', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('underline')} active={this._isUnderline} type=\"underline\" onMouseDown={(ev: MouseEvent) => this.emit('underline', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('h1')} active={this._isH1} type=\"h1\" onMouseDown={(ev: MouseEvent) => this.emit('h1', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('h2')} active={this._isH2} type=\"h2\" onMouseDown={(ev: MouseEvent) => this.emit('h2', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('quote')} active={this._isQuote} type=\"quote\" onMouseDown={(ev: MouseEvent) => this.emit('quote', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('link')} active={this._isLink} type=\"link\" onMouseDown={(ev: MouseEvent) => this.emit('link', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon\n state={this.stateFor('attachment')}\n active={this.isAttachment}\n type=\"attachment\"\n onMouseDown={(ev: MouseEvent) => this.emit('attachment', ev)}\n ></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('photo')} active={this.isPhoto} type=\"photo\" onMouseDown={(ev: MouseEvent) => this.emit('photo', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('bulletList')} active={this.isBulletList} type=\"list_bullet\" onMouseDown={(ev: MouseEvent) => this.emit('bulletList', ev)}></gb-wysiwyg-editor-icon>\n <gb-wysiwyg-editor-icon state={this.stateFor('orderedList')} active={this.isOrderedList} type=\"list_numbers\" onMouseDown={(ev: MouseEvent) => this.emit('orderedList', ev)}></gb-wysiwyg-editor-icon>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, g as getAssetPath, h, F as Fragment } from './p-CD7FeUx5.js';
|
|
2
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$1 } from './p-FuTvKxWX.js';
|
|
3
3
|
|
|
4
4
|
const gbCollapseButtonCss = "@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\n/**\n * Global styles for portal-based dropdowns\n * Applied outside shadow DOM context\n */\n.portal_dropdown_wrapper {\n width: -moz-fit-content;\n width: fit-content;\n border-radius: var(--rounded-sm);\n border: 1px solid var(--color-border-subtler, #e3e8ef);\n background: var(--color-surface, #ffffff);\n box-shadow: var(--shadow-md);\n position: absolute;\n z-index: 9999; /* High z-index to appear above sticky columns */\n overflow: hidden;\n}\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\n display: block;\n width: 100%;\n}\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\n background: var(--color-background-gray-subtler, #eef2f6);\n} */\n/**\n * gb-input-dropdown menu, portaled out of the component's shadow root.\n * Mirrors .dropdown_menu in gb-input-dropdown.css (which is shadow-scoped and\n * therefore no longer applies once this element is moved into #gb-portal-host).\n */\n.input_dropdown_portal_menu {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n max-height: 300px;\n padding: var(--spacing-none);\n border-radius: var(--rounded-sm);\n border: 1px solid var(--color-border-subtler, #e3e8ef);\n background: var(--color-surface, #ffffff);\n box-shadow: var(--shadow-sm);\n position: absolute;\n z-index: 9999;\n gap: var(--spacing-none);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n /* Exact width (not just a minimum) is set inline by gb-input-dropdown-test.tsx\n * (componentDidUpdate), matching the trigger's width. Content must not grow\n * the menu wider than the trigger. */\n}\n.input_dropdown_portal_menu::-webkit-scrollbar {\n right: 0rem;\n bottom: -1.53125rem;\n width: 0.8rem;\n margin-top: 1rem;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-track {\n width: 0.5rem;\n padding: var(--spacing-1);\n border: none;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-thumb {\n width: 0.5rem;\n height: 11.75rem;\n border: 0.25rem solid var(--color-background-card, #ffffff);\n border-radius: var(--rounded-full);\n background: var(--color-border-subtle, #cdd5df);\n}\n/* Content rendered inside the portaled input-dropdown menu (search field, empty\n * state, loader) - also shadow-scoped in gb-input-dropdown.css and therefore\n * also unreachable once portaled. Kept in sync with that file by hand. */\n.input_dropdown_portal_menu .dropdown_search_field {\n background: var(--color-surface, #ffffff);\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\n position: sticky;\n top: 0;\n z-index: 999;\n}\n.input_dropdown_portal_menu .empty_state {\n margin: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.input_dropdown_portal_menu .background {\n position: relative;\n width: 80%;\n}\n.input_dropdown_portal_menu .message_background {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-1);\n}\n.input_dropdown_portal_menu .illustration {\n width: 100px;\n height: 100px;\n}\n.input_dropdown_portal_menu .message {\n color: var(--color-text-bold, #202939);\n}\n.input_dropdown_portal_menu .loader_div {\n width: 100%;\n height: 10rem;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.input_dropdown_portal_menu .loader {\n border: 4px solid var(--color-background-gray, #cdd5df);\n border-top: 4px solid var(--color-background-selected, #075db2);\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: input-dropdown-portal-spin 2s linear infinite;\n}\n@keyframes input-dropdown-portal-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n/* @import 'tailwind.css'; */\n:root {\n /* --------------------------------------Primary Colors--------------------------------------------- */\n /* base color palette */\n --base-white: #fff;\n --base-black: #000;\n\n /* gray color palette */\n --gray-25: #f9fafb;\n --gray-50: #f6f8fa;\n --gray-100: #eef2f6;\n --gray-200: #e3e8ef;\n --gray-300: #cdd5df;\n --gray-400: #808c9e;\n --gray-500: #697586;\n --gray-600: #4b5565;\n --gray-700: #364152;\n --gray-800: #202939;\n --gray-900: #121926;\n --gray-950: #0d121c;\n\n /* brand dark blue color palette */\n --brandDarkBlue-25: #f9f9fb;\n --brandDarkBlue-50: #edeef3;\n --brandDarkBlue-100: #d3d5e0;\n --brandDarkBlue-200: #b5b9cc;\n --brandDarkBlue-300: #9095b2;\n --brandDarkBlue-400: #464f7f;\n --brandDarkBlue-500: #212c65;\n --brandDarkBlue-600: #1e285c;\n --brandDarkBlue-700: #1c2554;\n --brandDarkBlue-800: #161d43;\n --brandDarkBlue-900: #0b0f22;\n --brandDarkBlue-950: #070914;\n\n /* brand red color palette */\n --brandRed-25: #fffbfa;\n --brandRed-50: #fef1f2;\n --brandRed-100: #fde3e5;\n --brandRed-200: #f9b4ba;\n --brandRed-300: #f68e98;\n --brandRed-400: #f36976;\n --brandRed-500: #e21b2e;\n --brandRed-600: #cc1a2a;\n --brandRed-700: #b51726;\n --brandRed-800: #8c121d;\n --brandRed-900: #680d16;\n --brandRed-950: #3f080d;\n\n /* warning color palette */\n --yellow-25: #fffcf5;\n --yellow-50: #fffaeb;\n --yellow-100: #fef0c7;\n --yellow-200: #fedf89;\n --yellow-300: #fec84b;\n --yellow-400: #fdb022;\n --yellow-500: #f79009;\n --yellow-600: #dc6803;\n --yellow-700: #b54708;\n --yellow-800: #93370d;\n --yellow-900: #7a2e0e;\n --yellow-950: #4e1d09;\n\n /* success color palette */\n --green-25: #f6fef9;\n --green-50: #ecfdf3;\n --green-100: #dcfaeb;\n --green-200: #a9efc5;\n --green-300: #75e0a7;\n --green-400: #47cd89;\n --green-500: #17b26a;\n --green-600: #067f48;\n --green-700: #067647;\n --green-800: #085d3a;\n --green-900: #074d31;\n --green-950: #053321;\n\n /* ------------------------------------------opacity color palette-------------------------------------- */\n /* 0% opacity */\n /* White */\n --white-opacity0: rgba(255, 255, 255, 0);\n\n /* Gray */\n --gray25-opacity0: rgba(249, 250, 251, 0);\n --gray900-opacity0: rgba(18, 25, 38, 0);\n --gray950-opacity0: rgba(13, 18, 28, 0);\n\n /* 20% opacity */\n /* White */\n --white-opacity20: rgba(255, 255, 255, 0.2);\n\n /* Dark Blue */\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\n\n /* Gray */\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\n\n /* 30% opacity */\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\n\n /* 40% opacity */\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\n\n /* 50% opacity */\n /* White */\n --white-opacity50: rgba(255, 255, 255, 0.5);\n\n /* Gray */\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\n\n /* ------------------------------------------Secondary Color------------------------------------------- */\n /* blueLight color palete */\n --lightBlue-25: #f5fbff;\n --lightBlue-50: #f0f9ff;\n --lightBlue-100: #e0f2fe;\n --lightBlue-200: #b9e6fe;\n --lightBlue-300: #7cd4fd;\n --lightBlue-400: #7cd4fd;\n --lightBlue-500: #0ba5ec;\n --lightBlue-600: #0086c9;\n --lightBlue-700: #026aa2;\n --lightBlue-800: #065986;\n --lightBlue-900: #0b4a6f;\n --lightBlue-950: #062c41;\n\n /* blue color palette */\n --blue-25: #ecf5fe;\n --blue-50: #e4f0fc;\n --blue-100: #c8e0f9;\n --blue-200: #9ac7f4;\n --blue-300: #6aa9e7;\n --blue-400: #378fe6;\n --blue-500: #075db2;\n --blue-600: #064e94;\n --blue-700: #053e77;\n --blue-800: #042f59;\n --blue-900: #022445;\n --blue-950: #021d37;\n\n /* Purple color palete */\n --purple-25: #fafaff;\n --purple-50: #f4f3ff;\n --purple-100: #ebe9fe;\n --purple-200: #d9d6fe;\n --purple-300: #bdb4fe;\n --purple-400: #9b8afb;\n --purple-500: #7a5af8;\n --purple-600: #6938ef;\n --purple-700: #5925dc;\n --purple-800: #4a1fb8;\n --purple-900: #3e1c96;\n --purple-950: #27115f;\n\n /* pink color palette */\n --pink-25: #fef6fb;\n --pink-50: #fdf2fa;\n --pink-100: #fce7f6;\n --pink-200: #fcceee;\n --pink-300: #faa7e0;\n --pink-400: #f670c7;\n --pink-500: #ee46bc;\n --pink-600: #dd2590;\n --pink-700: #c11574;\n --pink-800: #9e165f;\n --pink-900: #851651;\n --pink-950: #4e0d30;\n\n /* -------------------------------------------------Token---------------------------------------------- */\n /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\n --color-text-bold: var(--gray-800);\n --color-text: var(--gray-600);\n --color-text-subtle: var(--gray-500);\n --color-text-disabled: var(--gray-400);\n --color-text-inverse: var(--base-white);\n\n --color-icon-bold: var(--gray-800);\n --color-icon: var(--gray-600);\n --color-icon-subtle: var(--gray-500);\n --color-icon-disabled: var(--gray-400);\n --color-icon-inverse: var(--base-white);\n\n --color-border-bold: var(--gray-500);\n --color-border: var(--gray-400);\n --color-border-subtle: var(--gray-300);\n --color-border-subtler: var(--gray-200);\n --color-border-disabled: var(--gray-200);\n --color-border-input: var(--gray-300);\n --color-border-focus: var(--gray-400);\n\n --color-background: var(--base-white);\n --color-background-card-bold: var(--gray-100);\n --color-background-card: var(--base-white);\n --color-background-input: var(--gray-400);\n --color-background-disabled: var(--gray-50);\n --color-background-btn-disabled: var(--gray-100);\n --color-background-selected: var(--blue-500);\n\n --color-link: var(--blue-500);\n --color-link-pressed: var(--blue-600);\n --color-link-visited: var(--lightBlue-600);\n\n /* -----------Text Color----------- */\n\n [data-theme='light'] {\n --color-text-bold: var(--gray-800);\n }\n\n [data-theme='dark'] {\n --color-text-bold: var(--gray-100);\n }\n\n [data-theme='light'] {\n --color-text: var(--gray-600);\n }\n\n [data-theme='dark'] {\n --color-text: var(--gray-300);\n }\n\n [data-theme='light'] {\n --color-text-subtle: var(--gray-500);\n }\n\n [data-theme='dark'] {\n --color-text-subtle: var(--gray-400);\n }\n\n [data-theme='light'] {\n --color-text-disabled: var(--gray-400);\n }\n\n [data-theme='dark'] {\n --color-text-disabled: var(--gray-500);\n }\n\n [data-theme='light'] {\n --color-text-inverse: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-text-inverse: var(--base-black);\n }\n\n [data-theme='light'] {\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\n }\n\n [data-theme='dark'] {\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\n }\n\n [data-theme='light'] {\n --color-text-brandRed: var(--brandRed-500);\n }\n\n [data-theme='dark'] {\n --color-text-brandRed: var(--brandRed-300);\n }\n\n [data-theme='light'] {\n --color-text-selected: var(--blue-500);\n }\n\n [data-theme='dark'] {\n --color-text-selected: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-text-danger-bold: var(--brandRed-800);\n }\n\n [data-theme='dark'] {\n --color-text-danger-bold: var(--brandRed-100);\n }\n\n [data-theme='light'] {\n --color-text-danger: var(--brandRed-700);\n }\n\n [data-theme='dark'] {\n --color-text-danger: var(--brandRed-200);\n }\n\n [data-theme='light'] {\n --color-text-danger-subtle: var(--brandRed-600);\n }\n\n [data-theme='dark'] {\n --color-text-danger-subtle: var(--brandRed-300);\n }\n\n [data-theme='light'] {\n --color-text-danger-inverse: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-text-danger-inverse: var(--brandRed-950);\n }\n\n [data-theme='light'] {\n --color-text-warning-bold: var(--yellow-800);\n }\n\n [data-theme='dark'] {\n --color-text-warning-bold: var(--yellow-100);\n }\n\n [data-theme='light'] {\n --color-text-warning: var(--yellow-600);\n }\n\n [data-theme='dark'] {\n --color-text-warning: var(--yellow-300);\n }\n\n [data-theme='light'] {\n --color-text-warning-subtle: var(--yellow-500);\n }\n\n [data-theme='dark'] {\n --color-text-warning-subtle: var(--yellow-400);\n }\n\n [data-theme='light'] {\n --color-text-success-bold: var(--green-800);\n }\n\n [data-theme='dark'] {\n --color-text-success-bold: var(--green-100);\n }\n\n [data-theme='light'] {\n --color-text-success: var(--green-600);\n }\n\n [data-theme='dark'] {\n --color-text-success: var(--green-300);\n }\n\n [data-theme='light'] {\n --color-text-success-subtle: var(--green-600);\n }\n\n [data-theme='dark'] {\n --color-text-success-subtle: var(--green-300);\n }\n\n [data-theme='light'] {\n --color-text-discovery-bold: var(--lightBlue-800);\n }\n\n [data-theme='dark'] {\n --color-text-discovery-bold: var(--lightBlue-100);\n }\n\n [data-theme='light'] {\n --color-text-discovery: var(--lightBlue-800);\n }\n\n [data-theme='dark'] {\n --color-text-discovery: var(--lightBlue-100);\n }\n\n [data-theme='light'] {\n --color-text-discovery-subtle: var(--lightBlue-400);\n }\n\n [data-theme='dark'] {\n --color-text-discovery-subtle: var(--lightBlue-100);\n }\n\n [data-theme='light'] {\n --color-text-information-bold: var(--blue-800);\n }\n\n [data-theme='dark'] {\n --color-text-information-bold: var(--blue-100);\n }\n\n [data-theme='light'] {\n --color-text-information: var(--blue-600);\n }\n\n [data-theme='dark'] {\n --color-text-information: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-text-information-subtle: var(--blue-500);\n }\n\n [data-theme='dark'] {\n --color-text-information-subtle: var(--blue-400);\n }\n\n [data-theme='light'] {\n --color-text-purple-bold: var(--purple-800);\n }\n\n [data-theme='dark'] {\n --color-text-purple-bold: var(--purple-100);\n }\n\n [data-theme='light'] {\n --color-text-purple: var(--purple-600);\n }\n\n [data-theme='dark'] {\n --color-text-purple: var(--purple-300);\n }\n\n [data-theme='light'] {\n --color-text-purple-subtle: var(--purple-500);\n }\n\n [data-theme='dark'] {\n --color-text-purple-subtle: var(--purple-400);\n }\n\n [data-theme='light'] {\n --color-text-pink-bold: var(--pink-800);\n }\n\n [data-theme='dark'] {\n --color-text-pink-bold: var(--pink-100);\n }\n\n [data-theme='light'] {\n --color-text-pink: var(--pink-600);\n }\n\n [data-theme='dark'] {\n --color-text-pink: var(--pink-300);\n }\n\n [data-theme='light'] {\n --color-text-pink-subtle: var(--pink-500);\n }\n\n [data-theme='dark'] {\n --color-text-pink-subtle: var(--pink-400);\n }\n\n /* --------------Link color--------------- */\n\n [data-theme='light'] {\n --color-link: var(--blue-500);\n }\n\n [data-theme='dark'] {\n --color-link: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-link-pressed: var(--blue-600);\n }\n\n [data-theme='dark'] {\n --color-link-pressed: var(--blue-600);\n }\n\n [data-theme='light'] {\n --color-link-visited: var(--lightBlue-600);\n }\n\n [data-theme='dark'] {\n --color-link-visited: var(--lightBlue-300);\n }\n\n /* --------------Icon color--------------- */\n\n [data-theme='light'] {\n --color-icon-bold: var(--gray-800);\n }\n\n [data-theme='dark'] {\n --color-icon-bold: var(--gray-100);\n }\n\n [data-theme='light'] {\n --color-icon: var(--gray-600);\n }\n\n [data-theme='dark'] {\n --color-icon: var(--gray-300);\n }\n\n [data-theme='light'] {\n --color-icon-subtle: var(--gray-500);\n }\n\n [data-theme='dark'] {\n --color-icon-subtle: var(--gray-400);\n }\n\n [data-theme='light'] {\n --color-icon-disabled: var(--gray-400);\n }\n\n [data-theme='dark'] {\n --color-icon-disabled: var(--gray-500);\n }\n\n [data-theme='light'] {\n --color-icon-inverse: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-icon-inverse: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\n }\n\n [data-theme='dark'] {\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\n }\n\n [data-theme='light'] {\n --color-icon-brandRed: var(--brandRed-500);\n }\n\n [data-theme='dark'] {\n --color-icon-brandRed: var(--brandRed-300);\n }\n\n [data-theme='light'] {\n --color-icon-selected: var(--blue-500);\n }\n\n [data-theme='dark'] {\n --color-icon-selected: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-icon-danger-bold: var(--brandRed-800);\n }\n\n [data-theme='dark'] {\n --color-icon-danger-bold: var(--brandRed-100);\n }\n\n [data-theme='light'] {\n --color-icon-danger: var(--brandRed-700);\n }\n\n [data-theme='dark'] {\n --color-icon-danger: var(--brandRed-200);\n }\n\n [data-theme='light'] {\n --color-icon-danger-inverse: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-icon-danger-inverse: var(--brandRed-950);\n }\n\n [data-theme='light'] {\n --color-icon-warning-bold: var(--yellow-800);\n }\n\n [data-theme='dark'] {\n --color-icon-warning-bold: var(--yellow-100);\n }\n\n [data-theme='light'] {\n --color-icon-warning: var(--yellow-600);\n }\n\n [data-theme='dark'] {\n --color-icon-warning: var(--yellow-300);\n }\n\n [data-theme='light'] {\n --color-icon-success-bold: var(--green-800);\n }\n\n [data-theme='dark'] {\n --color-icon-success-bold: var(--green-100);\n }\n\n [data-theme='light'] {\n --color-icon-success: var(--green-600);\n }\n\n [data-theme='dark'] {\n --color-icon-success: var(--green-300);\n }\n\n [data-theme='light'] {\n --color-icon-discovery-bold: var(--lightBlue-800);\n }\n\n [data-theme='dark'] {\n --color-icon-discovery-bold: var(--lightBlue-100);\n }\n\n [data-theme='light'] {\n --color-icon-discovery: var(--lightBlue-600);\n }\n\n [data-theme='dark'] {\n --color-icon-discovery: var(--lightBlue-300);\n }\n\n [data-theme='light'] {\n --color-icon-information-bold: var(--blue-800);\n }\n\n [data-theme='dark'] {\n --color-icon-information-bold: var(--blue-100);\n }\n\n [data-theme='light'] {\n --color-icon-information: var(--blue-600);\n }\n\n [data-theme='dark'] {\n --color-icon-information: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-icon-purple-bold: var(--purple-800);\n }\n\n [data-theme='dark'] {\n --color-icon-purple-bold: var(--purple-100);\n }\n\n [data-theme='light'] {\n --color-icon-purple: var(--purple-600);\n }\n\n [data-theme='dark'] {\n --color-icon-purple: var(--purple-300);\n }\n\n [data-theme='light'] {\n --color-icon-pink-bold: var(--pink-800);\n }\n\n [data-theme='dark'] {\n --color-icon-pink-bold: var(--pink-100);\n }\n\n [data-theme='light'] {\n --color-icon-pink: var(--pink-600);\n }\n\n [data-theme='dark'] {\n --color-icon-pink: var(--pink-300);\n }\n\n /* ----------------Border Color --------------- */\n\n [data-theme='light'] {\n --color-border-bold: var(--gray-500);\n }\n\n [data-theme='dark'] {\n --color-border-bold: var(--gray-400);\n }\n\n [data-theme='light'] {\n --color-border: var(--gray-400);\n }\n\n [data-theme='dark'] {\n --color-border: var(--gray-500);\n }\n\n [data-theme='light'] {\n --color-border-subtle: var(--gray-300);\n }\n\n [data-theme='dark'] {\n --color-border-subtle: var(--gray-700);\n }\n\n [data-theme='light'] {\n --color-border-subtler: var(--gray-200);\n }\n\n [data-theme='dark'] {\n --color-border-subtler: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-border-disabled: var(--gray-200);\n }\n\n [data-theme='dark'] {\n --color-border-disabled: var(--gray-700);\n }\n\n [data-theme='light'] {\n --color-border-inverse: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-border-inverse: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-border-input: var(--gray-300);\n }\n\n [data-theme='dark'] {\n --color-border-input: var(--gray-600);\n }\n\n [data-theme='light'] {\n --color-border-focus: var(--gray-400);\n }\n\n [data-theme='dark'] {\n --color-border-focus: var(--blue-200);\n }\n\n [data-theme='light'] {\n --color-border-selected: var(--blue-500);\n }\n\n [data-theme='dark'] {\n --color-border-selected: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\n }\n\n [data-theme='dark'] {\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\n }\n\n [data-theme='light'] {\n --color-border-brandRed: var(--brandRed-500);\n }\n\n [data-theme='dark'] {\n --color-border-brandRed: var(--brandRed-300);\n }\n\n [data-theme='light'] {\n --color-border-danger-bold: var(--brandRed-800);\n }\n\n [data-theme='dark'] {\n --color-border-danger-bold: var(--brandRed-100);\n }\n\n [data-theme='light'] {\n --color-border-danger: var(--brandRed-700);\n }\n\n [data-theme='dark'] {\n --color-border-danger: var(--brandRed-200);\n }\n\n [data-theme='light'] {\n --color-border-danger-subtle: var(--brandRed-200);\n }\n\n [data-theme='dark'] {\n --color-border-danger-subtle: var(--brandRed-800);\n }\n\n [data-theme='light'] {\n --color-border-danger-subtler: var(--brandRed-100);\n }\n\n [data-theme='dark'] {\n --color-border-danger-subtler: var(--brandRed-900);\n }\n\n [data-theme='light'] {\n --color-border-warning-bold: var(--yellow-800);\n }\n\n [data-theme='dark'] {\n --color-border-warning-bold: var(--yellow-100);\n }\n\n [data-theme='light'] {\n --color-border-warning: var(--yellow-600);\n }\n\n [data-theme='dark'] {\n --color-border-warning: var(--yellow-300);\n }\n\n [data-theme='light'] {\n --color-border-warning-subtle: var(--yellow-200);\n }\n\n [data-theme='dark'] {\n --color-border-warning-subtle: var(--yellow-800);\n }\n\n [data-theme='light'] {\n --color-border-warning-subtler: var(--yellow-100);\n }\n\n [data-theme='dark'] {\n --color-border-warning-subtler: var(--yellow-900);\n }\n\n [data-theme='light'] {\n --color-border-success-bold: var(--green-800);\n }\n\n [data-theme='dark'] {\n --color-border-success-bold: var(--green-100);\n }\n\n [data-theme='light'] {\n --color-border-success: var(--green-600);\n }\n\n [data-theme='dark'] {\n --color-border-success: var(--green-300);\n }\n\n [data-theme='light'] {\n --color-border-success-subtle: var(--green-200);\n }\n\n [data-theme='dark'] {\n --color-border-success-subtle: var(--green-800);\n }\n\n [data-theme='light'] {\n --color-border-success-subtler: var(--green-100);\n }\n\n [data-theme='dark'] {\n --color-border-success-subtler: var(--green-900);\n }\n\n [data-theme='light'] {\n --color-border-discovery-bold: var(--lightBlue-800);\n }\n\n [data-theme='dark'] {\n --color-border-discovery-bold: var(--lightBlue-100);\n }\n\n [data-theme='light'] {\n --color-border-discovery: var(--lightBlue-600);\n }\n\n [data-theme='dark'] {\n --color-border-discovery: var(--lightBlue-300);\n }\n\n [data-theme='light'] {\n --color-border-discovery-subtle: var(--lightBlue-200);\n }\n\n [data-theme='dark'] {\n --color-border-discovery-subtle: var(--lightBlue-800);\n }\n\n [data-theme='light'] {\n --color-border-discovery-subtler: var(--lightBlue-100);\n }\n\n [data-theme='dark'] {\n --color-border-discovery-subtler: var(--lightBlue-900);\n }\n\n [data-theme='light'] {\n --color-border-information-bold: var(--blue-800);\n }\n\n [data-theme='dark'] {\n --color-border-information-bold: var(--blue-100);\n }\n\n [data-theme='light'] {\n --color-border-information: var(--blue-600);\n }\n\n [data-theme='dark'] {\n --color-border-information: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-border-information-subtle: var(--blue-200);\n }\n\n [data-theme='dark'] {\n --color-border-information-subtle: var(--blue-800);\n }\n\n [data-theme='light'] {\n --color-border-information-subtler: var(--blue-100);\n }\n\n [data-theme='dark'] {\n --color-border-information-subtler: var(--blue-900);\n }\n\n [data-theme='light'] {\n --color-border-purple-bold: var(--purple-800);\n }\n\n [data-theme='dark'] {\n --color-border-purple-bold: var(--purple-100);\n }\n\n [data-theme='light'] {\n --color-border-purple: var(--purple-600);\n }\n\n [data-theme='dark'] {\n --color-border-purple: var(--purple-300);\n }\n\n [data-theme='light'] {\n --color-border-purple-subtle: var(--purple-200);\n }\n\n [data-theme='dark'] {\n --color-border-purple-subtle: var(--purple-800);\n }\n\n [data-theme='light'] {\n --color-border-purple-subtler: var(--purple-100);\n }\n\n [data-theme='dark'] {\n --color-border-purple-subtler: var(--purple-900);\n }\n\n [data-theme='light'] {\n --color-border-pink-bold: var(--pink-800);\n }\n\n [data-theme='dark'] {\n --color-border-pink-bold: var(--pink-100);\n }\n\n [data-theme='light'] {\n --color-border-pink: var(--pink-600);\n }\n\n [data-theme='dark'] {\n --color-border-pink: var(--pink-300);\n }\n\n [data-theme='light'] {\n --color-border-pink-subtle: var(--pink-200);\n }\n\n [data-theme='dark'] {\n --color-border-pink-subtle: var(--pink-800);\n }\n\n [data-theme='light'] {\n --color-border-pink-subtler: var(--pink-100);\n }\n\n [data-theme='dark'] {\n --color-border-pink-subtler: var(--pink-900);\n }\n\n /* Emmanuel Kadiri starts from background color */\n\n /* ----------------Background Color --------------- */\n\n [data-theme='light'] {\n --color-background-card-bolder: var(--gray-100);\n }\n\n [data-theme='dark'] {\n --color-background-card-bolder: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-background-card: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-background-card: var(--gray-900);\n }\n\n [data-theme='light'] {\n --color-background-input: var(--gray-400);\n }\n\n [data-theme='dark'] {\n --color-background-input: var(--gray-950);\n }\n\n [data-theme='light'] {\n --color-background-disabled: var(--gray-50);\n }\n\n [data-theme='dark'] {\n --color-background-disabled: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-background-btn-disabled: var(--gray-100);\n }\n\n [data-theme='dark'] {\n --color-background-btn-disabled: var(--gray-700);\n }\n\n [data-theme='light'] {\n --color-background-selected: var(--blue-500);\n }\n\n [data-theme='dark'] {\n --color-background-selected: var(--blue-300);\n }\n\n [data-theme='light'] {\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\n }\n\n [data-theme='dark'] {\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\n }\n\n [data-theme='light'] {\n --color-background-brandRed: var(--brandRed-500);\n }\n\n [data-theme='dark'] {\n --color-background-brandRed: var(--brandRed-300);\n }\n\n [data-theme='light'] {\n --color-background-brandRed-hover: var(--brandRed-600);\n }\n\n [data-theme='dark'] {\n --color-background-brandRed-hover: var(--brandRed-200);\n }\n\n [data-theme='light'] {\n --color-background-brandRed-pressed: var(--brandRed-700);\n }\n\n [data-theme='dark'] {\n --color-background-brandRed-pressed: var(--brandRed-100);\n }\n\n [data-theme='light'] {\n --color-background-gray-bold: var(--gray-400);\n }\n\n [data-theme='dark'] {\n --color-background-gray-bold: var(--gray-500);\n }\n\n [data-theme='light'] {\n --color-background-gray: var(--gray-300);\n }\n\n [data-theme='dark'] {\n --color-background-gray: var(--gray-600);\n }\n\n [data-theme='light'] {\n --color-background-gray-subtle: var(--gray-200);\n }\n\n [data-theme='dark'] {\n --color-background-gray-subtle: var(--gray-700);\n }\n\n [data-theme='light'] {\n --color-background-gray-subtler: var(--gray-100);\n }\n\n [data-theme='dark'] {\n --color-background-gray-subtler: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-background-gray-subtlest: var(--gray-50);\n }\n\n [data-theme='dark'] {\n --color-background-gray-subtlest: var(--gray-950);\n }\n\n [data-theme='light'] {\n --color-background-danger-bold: var(--brandRed-800);\n }\n\n [data-theme='dark'] {\n --color-background-danger-bold: var(--brandRed-100);\n }\n\n [data-theme='light'] {\n --color-background-danger: var(--brandRed-700);\n }\n\n [data-theme='dark'] {\n --color-background-danger: var(--brandRed-200);\n }\n\n [data-theme='light'] {\n --color-background-danger-subtle: var(--brandRed-200);\n }\n\n [data-theme='dark'] {\n --color-background-danger-subtle: var(--brandRed-800);\n }\n\n [data-theme='light'] {\n --color-background-danger-subtler: var(--brandRed-100);\n }\n\n [data-theme='dark'] {\n --color-background-danger-subtler: var(--brandRed-900);\n }\n\n [data-theme='light'] {\n --color-background-danger-subtlest: var(--brandRed-50);\n }\n\n [data-theme='dark'] {\n --color-background-danger-subtlest: var(--brandRed-950);\n }\n\n [data-theme='light'] {\n --color-background-warning-bold: var(--yellow-800);\n }\n\n [data-theme='dark'] {\n --color-background-warning-bold: var(--yellow-100);\n }\n\n [data-theme='light'] {\n --color-background-warning: var(--yellow-600);\n }\n\n [data-theme='dark'] {\n --color-background-warning: var(--yellow-200);\n }\n\n [data-theme='light'] {\n --color-background-warning-subtle: var(--yellow-200);\n }\n\n [data-theme='dark'] {\n --color-background-warning-subtle: var(--yellow-800);\n }\n\n [data-theme='light'] {\n --color-background-warning-subtler: var(--yellow-100);\n }\n\n [data-theme='dark'] {\n --color-background-warning-subtler: var(--yellow-900);\n }\n\n [data-theme='light'] {\n --color-background-warning-subtlest: var(--yellow-50);\n }\n\n [data-theme='dark'] {\n --color-background-warning-subtlest: var(--yellow-950);\n }\n\n [data-theme='light'] {\n --color-background-success-bold: var(--green-800);\n }\n\n [data-theme='dark'] {\n --color-background-success-bold: var(--green-100);\n }\n\n [data-theme='light'] {\n --color-background-success: var(--green-600);\n }\n\n [data-theme='dark'] {\n --color-background-success: var(--green-200);\n }\n\n [data-theme='light'] {\n --color-background-success-subtle: var(--green-200);\n }\n\n [data-theme='dark'] {\n --color-background-success-subtle: var(--green-800);\n }\n\n [data-theme='light'] {\n --color-background-success-subtler: var(--green-100);\n }\n\n [data-theme='dark'] {\n --color-background-success-subtler: var(--green-900);\n }\n\n [data-theme='light'] {\n --color-background-success-subtlest: var(--green-50);\n }\n\n [data-theme='dark'] {\n --color-background-success-subtlest: var(--green-950);\n }\n\n [data-theme='light'] {\n --color-background-discovery-bold: var(--lightBlue-800);\n }\n\n [data-theme='dark'] {\n --color-background-discovery-bold: var(--lightBlue-100);\n }\n\n [data-theme='light'] {\n --color-background-discovery: var(--lightBlue-600);\n }\n\n [data-theme='dark'] {\n --color-background-discovery: var(--lightBlue-200);\n }\n\n [data-theme='light'] {\n --color-background-discovery-subtle: var(--lightBlue-200);\n }\n\n [data-theme='dark'] {\n --color-background-discovery-subtle: var(--lightBlue-800);\n }\n\n [data-theme='light'] {\n --color-background-discovery-subtler: var(--lightBlue-100);\n }\n\n [data-theme='dark'] {\n --color-background-discovery-subtler: var(--lightBlue-900);\n }\n\n [data-theme='light'] {\n --color-background-discovery-subtlest: var(--lightBlue-50);\n }\n\n [data-theme='dark'] {\n --color-background-discovery-subtlest: var(--lightBlue-950);\n }\n\n [data-theme='light'] {\n --color-background-information-bold: var(--blue-800);\n }\n\n [data-theme='dark'] {\n --color-background-information-bold: var(--blue-100);\n }\n\n [data-theme='light'] {\n --color-background-information: var(--blue-600);\n }\n\n [data-theme='dark'] {\n --color-background-information: var(--blue-200);\n }\n\n [data-theme='light'] {\n --color-background-information-subtle: var(--blue-200);\n }\n\n [data-theme='dark'] {\n --color-background-information-subtle: var(--blue-800);\n }\n\n [data-theme='light'] {\n --color-background-information-subtler: var(--blue-100);\n }\n\n [data-theme='dark'] {\n --color-background-information-subtler: var(--blue-900);\n }\n\n [data-theme='light'] {\n --color-background-information-subtlest: var(--blue-50);\n }\n\n [data-theme='dark'] {\n --color-background-information-subtlest: var(--blue-950);\n }\n\n [data-theme='light'] {\n --color-background-purple-bold: var(--purple-800);\n }\n\n [data-theme='dark'] {\n --color-background-purple-bold: var(--blue-100);\n }\n\n [data-theme='light'] {\n --color-background-purple: var(--purple-600);\n }\n\n [data-theme='dark'] {\n --color-background-purple: var(--blue-200);\n }\n\n [data-theme='light'] {\n --color-background-purple-subtle: var(--purple-200);\n }\n\n [data-theme='dark'] {\n --color-background-purple-subtle: var(--purple-800);\n }\n\n [data-theme='light'] {\n --color-background-purple-subtler: var(--purple-100);\n }\n\n [data-theme='dark'] {\n --color-background-purple-subtler: var(--purple-900);\n }\n\n [data-theme='light'] {\n --color-background-purple-subtlest: var(--purple-50);\n }\n\n [data-theme='dark'] {\n --color-background-purple-subtlest: var(--purple-950);\n }\n\n [data-theme='light'] {\n --color-background-pink-bold: var(--pink-800);\n }\n\n [data-theme='dark'] {\n --color-background-pink-bold: var(--pink-100);\n }\n\n [data-theme='light'] {\n --color-background-pink: var(--pink-600);\n }\n\n [data-theme='dark'] {\n --color-background-pink: var(--pink-200);\n }\n\n [data-theme='light'] {\n --color-background-pink-subtle: var(--pink-200);\n }\n\n [data-theme='dark'] {\n --color-background-pink-subtle: var(--pink-800);\n }\n\n [data-theme='light'] {\n --color-background-pink-subtler: var(--pink-100);\n }\n\n [data-theme='dark'] {\n --color-background-pink-subtler: var(--pink-900);\n }\n\n [data-theme='light'] {\n --color-background-pink-subtlest: var(--purple-50);\n }\n\n [data-theme='dark'] {\n --color-background-pink-subtlest: var(--pink-950);\n }\n\n /* ----------------Blanket Color --------------- */\n [data-theme='light'] {\n --color-blanket: var(--darkBlue500-opacity20);\n }\n\n [data-theme='dark'] {\n --color-blanket: var(--darkBlue200-opacity20);\n }\n\n [data-theme='light'] {\n --color-blanket-subtle: var(--darkBlue500-opacity30);\n }\n\n [data-theme='dark'] {\n --color-blanket-subtle: var(--darkBlue200-opacity30);\n }\n\n [data-theme='light'] {\n --color-blanket-subtler: var(--darkBlue500-opacity40);\n }\n\n [data-theme='dark'] {\n --color-blanket-subtler: var(--darkBlue200-opacity40);\n }\n\n /* ----------------Skeleton Color --------------- */\n [data-theme='light'] {\n --color-skeleton: var(--gray-200);\n }\n\n [data-theme='dark'] {\n --color-skeleton: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-skeleton-bold: var(--gray-300);\n }\n\n [data-theme='dark'] {\n --color-skeleton-bold: var(--gray-700);\n }\n\n /* ----------------Surface Color --------------- */\n [data-theme='light'] {\n --color-surface-bold: var(--gray-50);\n }\n\n [data-theme='dark'] {\n --color-surface-bold: var(--gray-950);\n }\n\n [data-theme='light'] {\n --color-surface: var(--base-white);\n }\n\n [data-theme='dark'] {\n --color-surface: var(--gray-900);\n }\n\n [data-theme='light'] {\n --color-surface-hovered: var(--gray-100);\n }\n\n [data-theme='dark'] {\n --color-surface-hovered: var(--gray-800);\n }\n\n [data-theme='light'] {\n --color-surface-pressed: var(--gray-200);\n }\n\n [data-theme='dark'] {\n --color-surface-pressed: var(--gray-700);\n }\n\n /* ----------------Transparent Color --------------- */\n [data-theme='light'] {\n --color-surface-transparent50: var(--white-opacity50);\n }\n\n [data-theme='dark'] {\n --color-surface-transparent50: var(--gray900-opacity50);\n }\n\n [data-theme='light'] {\n --color-surface-transparent20: var(--white-opacity20);\n }\n\n [data-theme='dark'] {\n --color-surface-transparent20: var(--gray900-opacity20);\n }\n\n [data-theme='light'] {\n --color-surface-transparent-full: var(--white-opacity0);\n }\n\n [data-theme='dark'] {\n --color-surface-transparent-full: var(--gray900-opacity0);\n }\n\n [data-theme='light'] {\n --color-surface-bold-transparent50: var(--gray25-opacity50);\n }\n\n [data-theme='dark'] {\n --color-surface-bold-transparent50: var(--gray950-opacity50);\n }\n\n [data-theme='light'] {\n --color-surface-bold-transparent20: var(--gray25-opacity20);\n }\n\n [data-theme='dark'] {\n --color-surface-bold-transparent20: var(--gray950-opacity20);\n }\n\n [data-theme='light'] {\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\n }\n\n [data-theme='dark'] {\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\n }\n}\n/* -----------------Shadow and Blur----------------- */\n:root {\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\n\n --blur-sm: blur(4px);\n --blur-md: blur(8px);\n --blur-lg: blur(12px);\n --blur-xl: blur(20px);\n}\n.shadow-xs {\n box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n box-shadow: var(--shadow-2xl);\n}\n.shadow-3xl {\n box-shadow: var(--shadow-3xl);\n}\n.blur-sm {\n backdrop-filter: var(--blur-sm);\n}\n.blur-md {\n backdrop-filter: var(--blur-md);\n}\n.blur-lg {\n backdrop-filter: var(--blur-lg);\n}\n.blur-xl {\n backdrop-filter: var(--blur-xl);\n}\n/* -----------------Gradients----------------- */\n:root {\n /* Gray Gradients */\n /* --gray-gradient-600: linear-gradient(); */\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\n\n /* Brand Dark Blue Gradients */\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\n\n /* Brand Red Gradients */\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\n\n /* Blue Gradients */\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\n}\n.gradient-gray-600-to-500-90d {\n background: var(--gradient-gray-600-to-500-90d);\n}\n.gradient-gray-700-to-600-45d {\n background: var(--gradient-gray-700-to-600-45d);\n}\n.gradient-gray-800-to-600-45d {\n background: var(--gradient-gray-800-to-600-45d);\n}\n.gradient-gray-800-to-600-90d {\n background: var(--gradient-gray-800-to-600-90d);\n}\n.gradient-gray-800-to-700265-d {\n background: var(--gradient-gray-800-to-700265-d);\n}\n.gradient-gray-900-to-600-45d {\n background: var(--gradient-gray-900-to-600-45d);\n}\n.gradient-darkBlue-500-to-400-90d {\n background: var(--gradient-darkBlue-500-to-400-90d);\n}\n.gradient-darkBlue-700-to-500-45d {\n background: var(--gradient-darkBlue-700-to-500-45d);\n}\n.gradient-darkBlue-700-to-400-45d {\n background: var(--gradient-darkBlue-700-to-400-45d);\n}\n.gradient-darkBlue-800-to-500-90d {\n background: var(--gradient-darkBlue-800-to-500-90d);\n}\n.gradient-darkBlue-800-to-600265-d {\n background: var(--gradient-darkBlue-800-to-600265-d);\n}\n.gradient-darkBlue-900-to-600-45d {\n background: var(--gradient-darkBlue-900-to-600-45d);\n}\n.gradient-red-500-to-400-90d {\n background: var(--gradient-red-500-to-400-90d);\n}\n.gradient-red-700-to-500-45d {\n background: var(--gradient-red-700-to-500-45d);\n}\n.gradient-red-700-to-400-45d {\n background: var(--gradient-red-700-to-400-45d);\n}\n.gradient-red-800-to-500-90d {\n background: var(--gradient-red-800-to-500-90d);\n}\n.gradient-red-800-to-600265-d {\n background: var(--gradient-red-800-to-600265-d);\n}\n.gradient-red-900-to-600-45d {\n background: var(--gradient-red-900-to-600-45d);\n}\n.gradient-blue-500-to-400-90d {\n background: var(--gradient-blue-500-to-400-90d);\n}\n.gradient-blue-700-to-500-45d {\n background: var(--gradient-blue-700-to-500-45d);\n}\n.gradient-blue-700-to-400-45d {\n background: var(--gradient-blue-700-to-400-45d);\n}\n.gradient-blue-800-to-500-90d {\n background: var(--gradient-blue-800-to-500-90d);\n}\n.gradient-blue-800-to-600265-d {\n background: var(--gradient-blue-800-to-600265-d);\n}\n.gradient-blue-900-to-600-45d {\n background: var(--gradient-blue-900-to-600-45d);\n}\n/* Spacing Styles */\n:root {\n /* Positive spacing */\n --spacing-none: 0rem;\n --spacing-half: 0.125rem;\n --spacing-1: 0.25rem;\n --spacing-2: 0.5rem;\n --spacing-3: 0.75rem;\n --spacing-4: 1rem;\n --spacing-5: 1.25rem;\n --spacing-6: 1.5rem;\n --spacing-7: 2rem;\n --spacing-8: 2.5rem;\n --spacing-12: 3rem;\n --spacing-16: 4rem;\n --spacing-20: 5rem;\n --spacing-24: 6rem;\n --spacing-32: 8rem;\n --spacing-40: 10rem;\n --spacing-48: 12rem;\n --spacing-56: 14rem;\n --spacing-64: 16rem;\n\n /* Negative spacing */\n --spacing-negative-half: -0.125rem;\n --spacing-negative-1: -0.25rem;\n --spacing-negative-2: -0.5rem;\n --spacing-negative-3: -0.75rem;\n --spacing-negative-4: -1rem;\n --spacing-negative-5: -1.25rem;\n --spacing-negative-6: -1.5rem;\n --spacing-negative-7: -2rem;\n\n /* Radius */\n --rounded-none: 0rem;\n --rounded-xs: 0.25rem;\n --rounded-sm: 0.5rem;\n --rounded-md: 0.75rem;\n --rounded-lg: 1rem;\n --rounded-xl: 1.5rem;\n --rounded-2xl: 2rem;\n --rounded-full: 62.438rem;\n}\n/* Typography Styles */\n:root {\n /* Font Sizes */\n --font-size-d-2xl: 4.5rem;\n --font-size-d-xl: 3.75rem;\n --font-size-d-lg: 3rem;\n --font-size-d-md: 2.25rem;\n --font-size-d-sm: 1.875rem;\n --font-size-d-xs: 1.5rem;\n --font-size-t-xl: 1.25rem;\n --font-size-t-lg: 1.125rem;\n --font-size-t-md: 1rem;\n --font-size-t-sm: 0.875rem;\n --font-size-t-xs: 0.75rem;\n --font-size-t-xxs: 0.625rem;\n\n /* Font Weights */\n --font-weight-bold: 700;\n --font-weight-semi-bold: 600;\n --font-weight-medium: 500;\n --font-weight-regular: 400;\n\n /* Line Heights */\n --font-line-height-d-2xl: 5rem;\n --font-line-height-d-xl: 4.25rem;\n --font-line-height-d-lg: 3.75rem;\n --font-line-height-d-md: 2.75rem;\n --font-line-height-d-sm: 2.375rem;\n --font-line-height-d-xs: 2rem;\n --font-line-height-t-xl: 2rem;\n --font-line-height-t-lg: 1.875rem;\n --font-line-height-t-md: 1.688rem;\n --font-line-height-t-sm: 1.5rem;\n --font-line-height-t-xs: 1.25rem;\n --font-line-height-t-xxs: 1.125rem;\n\n /* Letter Spacings */\n --font-letter-spacing-d-2xl: -0.09rem;\n --font-letter-spacing-d-xl: -0.075rem;\n --font-letter-spacing-d-lg: -0.075rem;\n --font-letter-spacing-d-md: -0.045rem;\n --font-letter-spacing-d-sm: 0;\n --font-letter-spacing-d-xs: 0;\n --font-letter-spacing-d-xxs: 0;\n\n /* Font Families */\n --font-family-title: 'Sora';\n --font-family-body: 'Sora';\n}\n/* Media queries for medium screens (tablet) */\n@media (max-width: 1199px) {\n :root {\n /* Font Sizes */\n --font-size-d-2xl: 3.75rem;\n --font-size-d-xl: 3.5rem;\n --font-size-d-lg: 2.75rem;\n --font-size-d-md: 2.25rem;\n --font-size-d-sm: 1.875rem;\n --font-size-d-xs: 1.5rem;\n\n /* Line Heights */\n --font-line-height-d-2xl: 4.25rem;\n --font-line-height-d-xl: 3.75rem;\n --font-line-height-d-lg: 2.4375rem;\n --font-line-height-d-md: 2.75rem;\n --font-line-height-d-sm: 2.375rem;\n --font-line-height-d-xs: 2rem;\n\n /* Letter Spacings */\n --font-letter-spacing-2xl: -0.075rem;\n --font-letter-spacing-xl: -0.065rem;\n --font-letter-spacing-lg: -0.045rem;\n --font-letter-spacing-md: -0.045rem;\n --font-letter-spacing-sm: 0rem;\n --font-letter-spacing-xs: 0rem;\n }\n}\n/* Media queries for smaller screens (mobile) */\n@media (max-width: 743px) {\n :root {\n /* Font Sizes */\n --font-size-d-2xl: 3rem;\n --font-size-d-xl: 2.5rem;\n --font-size-d-lg: 2rem;\n --font-size-d-md: 1.75rem;\n --font-size-d-sm: 1.5rem;\n --font-size-d-xs: 1.25rem;\n\n /* Line Heights */\n --font-line-height-d-2xl: 3.375rem;\n --font-line-height-d-xl: 2.875rem;\n --font-line-height-d-lg: 2.5rem;\n --font-line-height-d-md: 2.1375rem;\n --font-line-height-d-sm: 2rem;\n --font-line-height-d-xs: 1.75rem;\n\n /* Letter Spacings */\n --font-letter-spacing-2xl: -0.06rem;\n --font-letter-spacing-xl: -0.05rem;\n --font-letter-spacing-lg: -0.045rem;\n --font-letter-spacing-md: 0rem;\n --font-letter-spacing-sm: 0rem;\n --font-letter-spacing-xs: 0rem;\n }\n}\n.display-2xl-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-2xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-d-2xl);\n letter-spacing: var(--font-letter-spacing-d-2xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-2xl-bold::before,\n.display-2xl-bold::after {\n content: '';\n display: table;\n}\n.display-2xl-bold::before {\n margin-bottom: -0.135em;\n}\n.display-2xl-bold::after {\n margin-top: -0.205em;\n}\n.display-2xl-semi-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-2xl);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-d-2xl);\n letter-spacing: var(--font-letter-spacing-d-2xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-2xl-semi-bold::before,\n.display-2xl-semi-bold::after {\n content: '';\n display: table;\n}\n.display-2xl-semi-bold::before {\n margin-bottom: -0.135em;\n}\n.display-2xl-semi-bold::after {\n margin-top: -0.205em;\n}\n.display-xl-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-d-xl);\n letter-spacing: var(--font-letter-spacing-d-xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-xl-bold::before,\n.display-xl-bold::after {\n content: '';\n display: table;\n}\n.display-xl-bold::before {\n margin-bottom: -0.145em;\n}\n.display-xl-bold::after {\n margin-top: -0.215em;\n}\n.display-xl-semi-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-xl);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-d-xl);\n letter-spacing: var(--font-letter-spacing-d-xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-xl-semi-bold::before,\n.display-xl-semi-bold::after {\n content: '';\n display: table;\n}\n.display-xl-semi-bold::before {\n margin-bottom: -0.145em;\n}\n.display-xl-semi-bold::after {\n margin-top: -0.215em;\n}\n.display-lg-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-lg);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-d-lg);\n letter-spacing: var(--font-letter-spacing-d-lg);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-lg-bold::before,\n.display-lg-bold::after {\n content: '';\n display: table;\n}\n.display-lg-bold::before {\n margin-bottom: -0.015em;\n}\n.display-lg-bold::after {\n margin-top: -0.095em;\n}\n.display-lg-semi-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-lg);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-d-lg);\n letter-spacing: var(--font-letter-spacing-d-lg);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-lg-semi-bold::before,\n.display-lg-semi-bold::after {\n content: '';\n display: table;\n}\n.display-lg-semi-bold::before {\n margin-bottom: -0.015em;\n}\n.display-lg-semi-bold::after {\n margin-top: -0.095em;\n}\n.display-md-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-md);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-d-md);\n letter-spacing: var(--font-letter-spacing-d-md);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-md-bold::before,\n.display-md-bold::after {\n content: '';\n display: table;\n}\n.display-md-bold::before {\n margin-bottom: -0.195em;\n}\n.display-md-bold::after {\n margin-top: -0.255em;\n}\n.display-md-semi-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-md);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-d-md);\n letter-spacing: var(--font-letter-spacing-d-md);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-md-semi-bold::before,\n.display-md-semi-bold::after {\n content: '';\n display: table;\n}\n.display-md-semi-bold::before {\n margin-bottom: -0.195em;\n}\n.display-md-semi-bold::after {\n margin-top: -0.255em;\n}\n.display-sm-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-sm);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-d-sm);\n letter-spacing: var(--font-letter-spacing-d-sm);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-sm-bold::before,\n.display-sm-bold::after {\n content: '';\n display: table;\n}\n.display-sm-bold::before {\n margin-bottom: -0.195em;\n}\n.display-sm-bold::after {\n margin-top: -0.255em;\n}\n.display-sm-semi-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-sm);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-d-sm);\n letter-spacing: var(--font-letter-spacing-d-sm);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-sm-semi-bold::before,\n.display-sm-semi-bold::after {\n content: '';\n display: table;\n}\n.display-sm-semi-bold::before {\n margin-bottom: -0.195em;\n}\n.display-sm-semi-bold::after {\n margin-top: -0.255em;\n}\n.display-xs-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-xs);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-d-xs);\n letter-spacing: var(--font-letter-spacing-d-xs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-xs-bold::before,\n.display-xs-bold::after {\n content: '';\n display: table;\n}\n.display-xs-bold::before {\n margin-bottom: -0.199em;\n}\n.display-xs-bold::after {\n margin-top: -0.195em; /* Continue from here */\n}\n.display-xs-semi-bold {\n font-family: var(--font-family-title);\n font-size: var(--font-size-d-xs);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-d-xs);\n letter-spacing: var(--font-letter-spacing-d-xs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.display-xs-semi-bold::before,\n.display-xs-semi-bold::after {\n content: '';\n display: table;\n}\n.display-xs-semi-bold::before {\n margin-bottom: -0.259em;\n}\n.display-xs-semi-bold::after {\n margin-top: -0.295em;\n}\n.text-xl-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-t-xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xl-bold::before,\n.text-xl-bold::after {\n content: '';\n display: table;\n}\n.text-xl-bold::before {\n margin-bottom: -0.329em;\n}\n.text-xl-bold::after {\n margin-top: -0.359em;\n}\n.text-xl-semi-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xl);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-t-xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xl-semi-bold::before,\n.text-xl-semi-bold::after {\n content: '';\n display: table;\n}\n.text-xl-semi-bold::before {\n margin-bottom: -0.329em;\n}\n.text-xl-semi-bold::after {\n margin-top: -0.359em;\n}\n.text-xl-medium {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xl);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-line-height-t-xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xl-medium::before,\n.text-xl-medium::after {\n content: '';\n display: table;\n}\n.text-xl-medium::before {\n margin-bottom: -0.339em;\n}\n.text-xl-medium::after {\n margin-top: -0.399em;\n}\n.text-xl-regular {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xl);\n font-weight: var(--font-weight-regular);\n line-height: var(--font-line-height-t-xl);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xl-regular::before,\n.text-xl-regular::after {\n content: '';\n display: table;\n}\n.text-xl-regular::before {\n margin-bottom: -0.339em;\n}\n.text-xl-regular::after {\n margin-top: -0.399em;\n}\n.text-lg-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-lg);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-t-lg);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-lg-bold::before,\n.text-lg-bold::after {\n content: '';\n display: table;\n}\n.text-lg-bold::before {\n margin-bottom: -0.339em;\n}\n.text-lg-bold::after {\n margin-top: -0.399em;\n}\n.text-lg-semi-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-lg);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-t-lg);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-lg-semi-bold::before,\n.text-lg-semi-bold::after {\n content: '';\n display: table;\n}\n.text-lg-semi-bold::before {\n margin-bottom: -0.339em;\n}\n.text-lg-semi-bold::after {\n margin-top: -0.399em;\n}\n.text-lg-medium {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-line-height-t-lg);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-lg-medium::before,\n.text-lg-medium::after {\n content: '';\n display: table;\n}\n.text-lg-medium::before {\n margin-bottom: -0.349em;\n}\n.text-lg-medium::after {\n margin-top: -0.389em;\n}\n.text-lg-regular {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-lg);\n font-weight: var(--font-weight-regular);\n line-height: var(--font-line-height-t-lg);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-lg-regular::before,\n.text-lg-regular::after {\n content: '';\n display: table;\n}\n.text-lg-regular::before {\n margin-bottom: -0.349em;\n}\n.text-lg-regular::after {\n margin-top: -0.389em;\n}\n.text-md-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-md);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-t-md);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-md-bold::before,\n.text-md-bold::after {\n content: '';\n display: table;\n}\n.text-md-bold::before {\n margin-bottom: -0.349em;\n}\n.text-md-bold::after {\n margin-top: -0.389em;\n}\n.text-md-semi-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-md);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-t-md);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-md-semi-bold::before,\n.text-md-semi-bold::after {\n content: '';\n display: table;\n}\n.text-md-semi-bold::before {\n margin-bottom: -0.349em;\n}\n.text-md-semi-bold::after {\n margin-top: -0.389em;\n}\n.text-md-medium {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-md);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-line-height-t-md);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-md-medium::before,\n.text-md-medium::after {\n content: '';\n display: table;\n}\n.text-md-medium::before {\n margin-bottom: -0.349em;\n}\n.text-md-medium::after {\n margin-top: -0.389em;\n}\n.text-md-regular {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-md);\n font-weight: var(--font-weight-regular);\n line-height: var(--font-line-height-t-md);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-md-regular::before,\n.text-md-regular::after {\n content: '';\n display: table;\n}\n.text-md-regular::before {\n margin-bottom: -0.349em;\n}\n.text-md-regular::after {\n margin-top: -0.389em;\n}\n.text-sm-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-sm);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-t-sm);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-sm-bold::before,\n.text-sm-bold::after {\n content: '';\n display: table;\n}\n.text-sm-bold::before {\n margin-bottom: -0.299em;\n}\n.text-sm-bold::after {\n margin-top: -0.349em;\n}\n.text-sm-semi-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-sm);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-t-sm);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-sm-semi-bold::before,\n.text-sm-semi-bold::after {\n content: '';\n display: table;\n}\n.text-sm-semi-bold::before {\n margin-bottom: -0.299em;\n}\n.text-sm-semi-bold::after {\n margin-top: -0.349em;\n}\n.text-sm-medium {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-sm);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-line-height-t-sm);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n position: relative;\n display: inline-block;\n}\n.text-sm-medium::before,\n.text-sm-medium::after {\n content: '';\n display: table;\n}\n.text-sm-medium::before {\n margin-bottom: -0.299em;\n}\n.text-sm-medium::after {\n margin-top: -0.299em;\n}\n.text-sm-regular {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-sm);\n font-weight: var(--font-weight-regular);\n line-height: var(--font-line-height-t-sm);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n position: relative;\n display: inline-block;\n}\n.text-sm-regular::before,\n.text-sm-regular::after {\n content: '';\n display: table;\n}\n.text-sm-regular::before {\n margin-bottom: -0.299em;\n}\n.text-sm-regular::after {\n margin-top: -0.299em;\n}\n.text-xs-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xs);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-t-xs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xs-bold::before,\n.text-xs-bold::after {\n content: '';\n display: table;\n}\n.text-xs-bold::before {\n margin-bottom: -0.291em;\n}\n.text-xs-bold::after {\n margin-top: -0.416em;\n}\n.text-xs-semi-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xs);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-t-xs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xs-semi-bold::before,\n.text-xs-semi-bold::after {\n content: '';\n display: table;\n}\n.text-xs-semi-bold::before {\n margin-bottom: -0.321em;\n}\n.text-xs-semi-bold::after {\n margin-top: -0.416em;\n}\n.text-xs-medium {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xs);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-line-height-t-xs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xs-medium::before,\n.text-xs-medium::after {\n content: '';\n display: table;\n}\n.text-xs-medium::before {\n margin-bottom: -0.285em;\n}\n.text-xs-medium::after {\n margin-top: -0.396em;\n}\n.text-xs-regular {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xs);\n font-weight: var(--font-weight-regular);\n line-height: var(--font-line-height-t-xs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xs-regular::before,\n.text-xs-regular::after {\n content: '';\n display: table;\n}\n.text-xs-regular::before {\n margin-bottom: -0.291em;\n}\n.text-xs-regular::after {\n margin-top: -0.396em;\n}\n.text-xxs-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xxs);\n font-weight: var(--font-weight-bold);\n line-height: var(--font-line-height-t-xxs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xxs-bold::before,\n.text-xxs-bold::after {\n content: '';\n display: table;\n}\n.text-xxs-bold::before {\n margin-bottom: -0.291em;\n}\n.text-xxs-bold::after {\n margin-top: -0.416em;\n}\n.text-xxs-semi-bold {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xxs);\n font-weight: var(--font-weight-semi-bold);\n line-height: var(--font-line-height-t-xxs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xxs-semi-bold::before,\n.text-xxs-semi-bold::after {\n content: '';\n display: table;\n}\n.text-xxs-semi-bold::before {\n margin-bottom: -0.291em;\n}\n.text-xxs-semi-bold::after {\n margin-top: -0.416em;\n}\n.text-xxs-medium {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xxs);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-line-height-t-xxs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xxs-medium::before,\n.text-xxs-medium::after {\n content: '';\n display: table;\n}\n.text-xxs-medium::before {\n margin-bottom: -0.291em;\n}\n.text-xxs-medium::after {\n margin-top: -0.416em;\n}\n.text-xxs-regular {\n font-family: var(--font-family-body);\n font-size: var(--font-size-t-xxs);\n font-weight: var(--font-weight-regular);\n line-height: var(--font-line-height-t-xxs);\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n display: inline-block;\n position: relative;\n}\n.text-xxs-regular::before,\n.text-xxs-regular::after {\n content: '';\n display: table;\n}\n.text-xxs-regular::before {\n margin-bottom: -0.291em;\n}\n.text-xxs-regular::after {\n margin-top: -0.416em;\n}\n/* Button slot styles */\n/* .slotted_button_text.primary {\n color: var(--color-text-inverse, #ffffff) !important;\n}\n\n.slotted_button_text.secondary_gray {\n color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.secondary_color {\n color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.tertiary_gray {\n color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.tertiary_color {\n color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.link_gray {\n color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.link_color {\n color: var(--color-link, #075db2) !important;\n}\n\n.slotted_button_text.primary.destructive {\n color: var(--color-text-inverse, #ffffff) !important;\n}\n\n#slotted_button_text.primary.disabled,\n#slotted_button_text.secondary_gray.disabled,\n#slotted_button_text.secondary_color.disabled,\n#slotted_button_text.tertiary_gray.disabled,\n#slotted_button_text.tertiary_color.disabled,\n#slotted_button_text.link_gray.disabled,\n#slotted_button_text.link_color.disabled {\n color: var(--color-text-disabled, #9aa4b2) !important;\n}\n\n#slotted_button_text.secondary_gray.default.destructive,\n#slotted_button_text.secondary_color.default.destructive,\n#slotted_button_text.tertiary_gray.default.destructive,\n#slotted_button_text.tertiary_color.default.destructive,\n#slotted_button_text.link_gray.default.destructive,\n#slotted_button_text.link_color.default.destructive {\n color: var(--color-text-danger, #b51726) !important;\n} */\n:host {\n position: relative;\n}\n.collapse_btn {\n background-color: transparent;\n border-radius: var(--rounded-full);\n display: flex;\n width: -moz-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: fit-content;\n padding: var(--spacing-2);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-2);\n cursor: pointer;\n}\n.collapse_btn.gray:hover {\n background-color: var(--color-background-gray-subtler, #eef2f6);\n cursor: pointer;\n}\n.collapse_btn.gray:active {\n background-color: var(--color-background-gray-subtle, #e3e8ef);\n}\n.collapse_btn.white:hover {\n background-color: var(--color-blanket-subtle, rgba(33, 44, 101, 0.3));\n cursor: pointer;\n}\n.collapse_btn.white:active {\n background-color: var(--color-blanket, rgba(33, 44, 101, 0.4));\n}\n.icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.icon.horizontal.is-expand svg {\n transform: rotate(180deg);\n}\n/* .icon.vertical.collapse svg{\n transform: rotate(90deg);\n} */\n.icon.vertical.is-expand svg {\n transform: rotate(180deg);\n}\n.icon.horizontal.gray path[stroke],\n.icon.vertical.gray path[stroke] {\n stroke: var(--color-icon, #4b5565);\n}\n/* .icon.horizontal.gray path[fill],\n.icon.vertical.gray path[fill] {\n fill: var(--color-icon, #4b5565);\n} */\n.icon.white path[stroke] {\n stroke: var(--base-white, #ffffff);\n}\n.tooltip.horizontal {\n position: absolute;\n left: 2.5rem;\n bottom: 2.3rem;\n}\n.tooltip.vertical {\n position: absolute;\n left: 0.1rem;\n bottom: 210%;\n}\n";
|
|
5
5
|
|
|
@@ -79,6 +79,6 @@ function defineCustomElement() {
|
|
|
79
79
|
defineCustomElement();
|
|
80
80
|
|
|
81
81
|
export { GbCollapseButton as G, defineCustomElement as d };
|
|
82
|
-
//# sourceMappingURL=p-
|
|
82
|
+
//# sourceMappingURL=p-RDyNJ9Gh.js.map
|
|
83
83
|
|
|
84
|
-
//# sourceMappingURL=p-
|
|
84
|
+
//# sourceMappingURL=p-RDyNJ9Gh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-RDyNJ9Gh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"sourcesContent":["@import './../../global/global.css';\n\n:host {\n position: relative;\n}\n\n.collapse_btn {\n background-color: transparent;\n border-radius: var(--rounded-full);\n display: flex;\n width: fit-content;\n height: fit-content;\n padding: var(--spacing-2);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-2);\n cursor: pointer;\n}\n\n.collapse_btn.gray:hover {\n background-color: var(--color-background-gray-subtler, #eef2f6);\n cursor: pointer;\n}\n\n.collapse_btn.gray:active {\n background-color: var(--color-background-gray-subtle, #e3e8ef);\n}\n\n.collapse_btn.white:hover {\n background-color: var(--color-blanket-subtle, rgba(33, 44, 101, 0.3));\n cursor: pointer;\n}\n\n.collapse_btn.white:active {\n background-color: var(--color-blanket, rgba(33, 44, 101, 0.4));\n}\n\n.icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.icon.horizontal.is-expand svg {\n transform: rotate(180deg);\n}\n\n/* .icon.vertical.collapse svg{\n transform: rotate(90deg);\n} */\n\n.icon.vertical.is-expand svg {\n transform: rotate(180deg);\n}\n\n.icon.horizontal.gray path[stroke],\n.icon.vertical.gray path[stroke] {\n stroke: var(--color-icon, #4b5565);\n}\n\n/* .icon.horizontal.gray path[fill],\n.icon.vertical.gray path[fill] {\n fill: var(--color-icon, #4b5565);\n} */\n\n.icon.white path[stroke] {\n stroke: var(--base-white, #ffffff);\n}\n\n.tooltip.horizontal {\n position: absolute;\n left: 2.5rem;\n bottom: 2.3rem;\n}\n\n.tooltip.vertical {\n position: absolute;\n left: 0.1rem;\n bottom: 210%;\n}\n","import { Component, Method, Prop, State, getAssetPath, h, Fragment } from '@stencil/core';\n\n@Component({\n tag: 'gb-collapse-button',\n styleUrl: 'gb-collapse-button.css',\n shadow: true,\n})\nexport class GbCollapseButton {\n @Prop() color: 'gray' | 'white';\n @Prop({ mutable: true }) isCollapsed: boolean = false;\n @Prop({ mutable: true }) action: string = 'collapse';\n @Prop({ mutable: true }) isHovered: boolean = false;\n @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n @Prop() icon: string = '';\n @State() leadingIconSvg: string = '';\n\n async loadIcon(iconName: string) {\n const iconPath = getAssetPath(`${iconName}`);\n const response = await fetch(iconPath);\n const svg = await response.text();\n this.leadingIconSvg = svg;\n }\n\n componentWillLoad() {\n this.loadIcon(this.icon);\n }\n\n toggleIcon() {\n if (this.action === 'collapse') {\n this.action = 'expand';\n this.isHovered = false;\n } else if (this.action === 'expand') {\n this.action = 'collapse';\n this.isHovered = false;\n }\n }\n\n @Method()\n async collapseSidebar() {\n this.isCollapsed = true;\n }\n\n @Method()\n async expandSidebar() {\n this.isCollapsed = false;\n }\n\n render() {\n const actionClass = this.action === 'expand' ? 'is-expand' : 'is-collapse';\n\n return (\n <>\n <div class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} onMouseOver={() => (this.isHovered = true)} onMouseOut={() => (this.isHovered = false)}>\n <div class={`icon ${this.color} ${this.direction} ${actionClass}`} innerHTML={this.leadingIconSvg}></div>\n </div>\n {this.isHovered && this.action === 'collapse' ? (\n <gb-tooltip class={`tooltip ${this.direction}`} show-arrow={true} arrow={this.direction === 'horizontal' ? 'left' : this.direction === 'vertical' ? 'bottom_left' : null}>\n <p slot=\"label\" class=\"text-xs-semi-bold\">\n Collapse\n </p>\n </gb-tooltip>\n ) : this.isHovered && this.action === 'expand' ? (\n <gb-tooltip class={`tooltip ${this.direction}`} show-arrow={true} arrow={this.direction === 'horizontal' ? 'left' : this.direction === 'vertical' ? 'bottom_left' : null}>\n <p slot=\"label\" class=\"text-xs-semi-bold\">\n Expand\n </p>\n </gb-tooltip>\n ) : null}\n </>\n );\n }\n}\n"],"version":3}
|