npm - globuswebcomponents - Versions diffs - 0.5.1 → 0.5.3 - Mend

globuswebcomponents 0.5.1 → 0.5.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.

Files changed (516) hide show

package/dist/globuscomponents/{p-08a4f9a7.entry.js.map → p-2322ea7a.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["gbButtonCloseCss","GbButtonCloseStyle0","GbButtonClose","render","h","key","class","this","size","color","xmlns","width","height","viewBox","fill","d","gbProgressBarCss","GbProgressBarStyle0","GbProgressBar","progressValue","Math","min","max","progress","labelPosition","style","Fragment","showLabel","arrow","marginLeft","toString","slot"],"sources":["src/components/gb-button-close/gb-button-close.css?tag=gb-button-close&encapsulation=shadow","src/components/gb-button-close/gb-button-close.tsx","src/components/gb-progress-bar/gb-progress-bar.css?tag=gb-progress-bar&encapsulation=shadow","src/components/gb-progress-bar/gb-progress-bar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\ndiv {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-sm);\r\n height: fit-content;\r\n width: fit-content;\r\n cursor: pointer;\r\n}\r\n\r\n/* Sizes /\r\ndiv.lg {\r\n padding: 0.625rem;\r\n}\r\n\r\ndiv.lg svg {\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\ndiv.md svg {\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n}\r\n\r\ndiv.sm {\r\n padding: var(--spacing-2);\r\n}\r\n\r\n/ Colors /\r\ndiv.primary,\r\ndiv.information,\r\ndiv.success,\r\ndiv.gray,\r\ndiv.warning,\r\ndiv.error {\r\n background-color: transparent;\r\n}\r\n\r\ndiv.primary path {\r\n stroke: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\ndiv.success path {\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\ndiv.information path {\r\n stroke: var(--color-icon-information, #064E94);\r\n}\r\n\r\ndiv.gray path {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\ndiv.warning path {\r\n stroke: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\ndiv.error path {\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/ States /\r\ndiv.primary:hover {\r\n background-color: var(--color-background-discovery-subtler, #E0F2FE);\r\n}\r\n\r\ndiv.primary:hover path {\r\n stroke: var(--color-icon-brandRed, #E21B2E);\r\n}\r\n\r\ndiv.primary:active {\r\n background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\ndiv.information:hover {\r\n background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\ndiv.information:hover path {\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\ndiv.information:active {\r\n background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\ndiv.success:hover {\r\n background-color: var(--color-background-success-subtler, #DCFAE6);\r\n}\r\n\r\ndiv.success:hover path {\r\n stroke: var(--color-icon-success-bold, #085D3A);\r\n}\r\n\r\ndiv.success:active {\r\n background-color: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\ndiv.gray:hover {\r\n background-color: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\ndiv.gray:hover path {\r\n stroke: var(--color-icon-brandRed, #e21b2e);\r\n}\r\n\r\ndiv.gray:active {\r\n background-color: var(--color-background-gray-subtlest, #f6f8fa);\r\n}\r\n\r\ndiv.warning:hover {\r\n background-color: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\ndiv.warning:hover path {\r\n stroke: var(--color-icon-warning-bold, #93370D);\r\n}\r\n\r\ndiv.warning:active {\r\n background-color: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\ndiv.error:hover {\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\ndiv.error:hover path {\r\n stroke: var(--color-icon-danger-bold, #8C121D);\r\n}\r\n\r\ndiv.error:active {\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n@Component({\r\n tag: 'gb-button-close',\r\n styleUrl: 'gb-button-close.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbButtonClose {\r\n @Prop() size: GeneralSizes;\r\n @Prop() color: GeneralColors;\r\n\r\n render() {\r\n return (\r\n <div class={`${this.size} ${this.color}`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`${this.size}`}>\r\n <path d=\"M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )\r\n }\r\n}","@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n:host{\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.progress_bar_container {\r\n background-color: transparent;\r\n display: flex;\r\n align-items: center;\r\n align-items: stretch;\r\n gap: var(--spacing-3);\r\n width: 100%;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.progress_bar {\r\n position: relative;\r\n height: 0.4rem;\r\n width: 100%;\r\n background: var(--color-border-subtler, #e3e8ef);\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.progress_fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 0%;\r\n background: var(--color-border-selected, #075db2);\r\n border-radius: 15px;\r\n transition: width 0.5s ease-in-out;\r\n}\r\n\r\n.label {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Label Position Styles */\r\n.progress_bar_container.right {\r\n flex-direction: row;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.progress_bar_container.bottom,\r\n.progress_bar_container.bottom_floating {\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.progress_bar_container.top_floating {\r\n flex-direction: column-reverse;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label.bottom {\r\n align-self: flex-end;\r\n}\r\n\r\n.label.top_floating {\r\n align-self: flex-start;\r\n}\r\n\r\n.top_tooltip {\r\n position: absolute;\r\n top: -2.2rem;\r\n}\r\n\r\n.bottom_tooltip {\r\n position: absolute;\r\n top: 1rem;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n","import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-progress-bar',\r\n styleUrl: 'gb-progress-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n @Prop() progress: number;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() labelPosition: 'right' \| 'bottom' \| 'top_floating' \| 'bottom_floating';\r\n @Prop() el: HTMLElement;\r\n\r\n render() {\r\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n return (\r\n <div class={`progress_bar_container ${this.labelPosition}`}>\r\n <div class=\"progress_bar\">\r\n <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n </div>\r\n <>\r\n {this.showLabel && (\r\n <div class={`label ${this.labelPosition}`}>\r\n {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'top_floating' && (\r\n <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n {this.labelPosition === 'bottom_floating' && (\r\n <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n );\r\n }\r\n}"],"mappings":"6CAAA,MAAMA,EAAmB,++7CACzB,MAAAC,EAAeD,E,MCOFE,EAAa,M,kEAItB,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,GAAGC,KAAKC,QAAQD,KAAKE,SAC7BL,EAAA,OAAAC,IAAA,2CAAKK,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOR,MAAO,GAAGC,KAAKC,QAC1GJ,EAAA,QAAAC,IAAA,2CAAMU,EAAE,mEAAkE,eAAc,IAAG,iBAAgB,QAAO,kBAAiB,W,aChBvJ,MAAMC,EAAmB,ok7CACzB,MAAAC,EAAeD,E,MCMFE,EAAa,M,gEAEK,M,+CAI7B,MAAAf,GACE,MAAMgB,EAAgBC,KAAKC,IAAID,KAAKE,IAAIf,KAAKgB,SAAU,GAAI,KAE3D,OACEnB,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0BC,KAAKiB,iBACzCpB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBAAgBmB,MAAO,CAAEd,MAAO,GAAGQ,SAEhDf,EAAAsB,EAAA,KACGnB,KAAKoB,WACJvB,EAAA,OAAAC,IAAA,2CAAKC,MAAO,SAASC,KAAKiB,iBACvBjB,KAAKiB,gBAAkB,SAAWpB,EAAA,QAAAC,IAAA,2CAAMC,MAAO,kBAAmBa,EAAa,KAC/EZ,KAAKiB,gBAAkB,UAAYpB,EAAA,QAAAC,IAAA,2CAAMC,MAAO,kBAAmBa,EAAa,KAChFZ,KAAKiB,gBAAkB,gBACtBpB,EAAA,cAAAC,IAAA,2CAAYC,MAAO,cAAesB,MAAM,OAAOH,MAAO,CAAEI,WAAY,IAAIV,EAAgB,KAAKW,gBAC3F1B,EAAA,KAAAC,IAAA,2CAAG0B,KAAK,YAAYzB,MAAM,qBACvBa,EAAa,MAInBZ,KAAKiB,gBAAkB,mBACtBpB,EAAA,cAAAC,IAAA,2CAAYC,MAAO,iBAAkBsB,MAAM,OAAOH,MAAO,CAAEI,WAAY,IAAIV,EAAgB,MAAMW,gBAC/F1B,EAAA,KAAAC,IAAA,2CAAG0B,KAAK,YAAYzB,MAAM,qBACvBa,EAAa,Q","ignoreList":[]}
1	+ {"version":3,"names":["gbButtonCloseCss","GbButtonCloseStyle0","GbButtonClose","render","h","key","class","this","size","color","xmlns","width","height","viewBox","fill","d","gbProgressBarCss","GbProgressBarStyle0","GbProgressBar","progressValue","Math","min","max","progress","labelPosition","style","Fragment","showLabel","arrow","marginLeft","toString","slot"],"sources":["src/components/gb-button-close/gb-button-close.css?tag=gb-button-close&encapsulation=shadow","src/components/gb-button-close/gb-button-close.tsx","src/components/gb-progress-bar/gb-progress-bar.css?tag=gb-progress-bar&encapsulation=shadow","src/components/gb-progress-bar/gb-progress-bar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\ndiv {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-sm);\r\n height: fit-content;\r\n width: fit-content;\r\n cursor: pointer;\r\n}\r\n\r\n/* Sizes /\r\ndiv.lg {\r\n padding: 0.625rem;\r\n}\r\n\r\ndiv.lg svg {\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\ndiv.md svg {\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n}\r\n\r\ndiv.sm {\r\n padding: var(--spacing-2);\r\n}\r\n\r\n/ Colors /\r\ndiv.primary,\r\ndiv.information,\r\ndiv.success,\r\ndiv.gray,\r\ndiv.warning,\r\ndiv.error {\r\n background-color: transparent;\r\n}\r\n\r\ndiv.primary path {\r\n stroke: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\ndiv.success path {\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\ndiv.information path {\r\n stroke: var(--color-icon-information, #064E94);\r\n}\r\n\r\ndiv.gray path {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\ndiv.warning path {\r\n stroke: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\ndiv.error path {\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/ States /\r\ndiv.primary:hover {\r\n background-color: var(--color-background-discovery-subtler, #E0F2FE);\r\n}\r\n\r\ndiv.primary:hover path {\r\n stroke: var(--color-icon-brandRed, #E21B2E);\r\n}\r\n\r\ndiv.primary:active {\r\n background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\ndiv.information:hover {\r\n background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\ndiv.information:hover path {\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\ndiv.information:active {\r\n background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\ndiv.success:hover {\r\n background-color: var(--color-background-success-subtler, #DCFAE6);\r\n}\r\n\r\ndiv.success:hover path {\r\n stroke: var(--color-icon-success-bold, #085D3A);\r\n}\r\n\r\ndiv.success:active {\r\n background-color: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\ndiv.gray:hover {\r\n background-color: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\ndiv.gray:hover path {\r\n stroke: var(--color-icon-brandRed, #e21b2e);\r\n}\r\n\r\ndiv.gray:active {\r\n background-color: var(--color-background-gray-subtlest, #f6f8fa);\r\n}\r\n\r\ndiv.warning:hover {\r\n background-color: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\ndiv.warning:hover path {\r\n stroke: var(--color-icon-warning-bold, #93370D);\r\n}\r\n\r\ndiv.warning:active {\r\n background-color: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\ndiv.error:hover {\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\ndiv.error:hover path {\r\n stroke: var(--color-icon-danger-bold, #8C121D);\r\n}\r\n\r\ndiv.error:active {\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n@Component({\r\n tag: 'gb-button-close',\r\n styleUrl: 'gb-button-close.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbButtonClose {\r\n @Prop() size: GeneralSizes;\r\n @Prop() color: GeneralColors;\r\n\r\n render() {\r\n return (\r\n <div class={`${this.size} ${this.color}`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`${this.size}`}>\r\n <path d=\"M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )\r\n }\r\n}","@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n:host{\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.progress_bar_container {\r\n background-color: transparent;\r\n display: flex;\r\n align-items: center;\r\n align-items: stretch;\r\n gap: var(--spacing-3);\r\n width: 100%;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.progress_bar {\r\n position: relative;\r\n height: 0.4rem;\r\n width: 100%;\r\n background: var(--color-border-subtler, #e3e8ef);\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.progress_fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 0%;\r\n background: var(--color-border-selected, #075db2);\r\n border-radius: 15px;\r\n transition: width 0.5s ease-in-out;\r\n}\r\n\r\n.label {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Label Position Styles */\r\n.progress_bar_container.right {\r\n flex-direction: row;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.progress_bar_container.bottom,\r\n.progress_bar_container.bottom_floating {\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.progress_bar_container.top_floating {\r\n flex-direction: column-reverse;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label.bottom {\r\n align-self: flex-end;\r\n}\r\n\r\n.label.top_floating {\r\n align-self: flex-start;\r\n}\r\n\r\n.top_tooltip {\r\n position: absolute;\r\n top: -2.2rem;\r\n}\r\n\r\n.bottom_tooltip {\r\n position: absolute;\r\n top: 1rem;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n","import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-progress-bar',\r\n styleUrl: 'gb-progress-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n @Prop() progress: number;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() labelPosition: 'right' \| 'bottom' \| 'top_floating' \| 'bottom_floating';\r\n @Prop() el: HTMLElement;\r\n\r\n render() {\r\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n return (\r\n <div class={`progress_bar_container ${this.labelPosition}`}>\r\n <div class=\"progress_bar\">\r\n <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n </div>\r\n <>\r\n {this.showLabel && (\r\n <div class={`label ${this.labelPosition}`}>\r\n {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'top_floating' && (\r\n <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n {this.labelPosition === 'bottom_floating' && (\r\n <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n );\r\n }\r\n}"],"mappings":"6CAAA,MAAMA,EAAmB,sh8CACzB,MAAAC,EAAeD,E,MCOFE,EAAa,M,kEAItB,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,GAAGC,KAAKC,QAAQD,KAAKE,SAC7BL,EAAA,OAAAC,IAAA,2CAAKK,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOR,MAAO,GAAGC,KAAKC,QAC1GJ,EAAA,QAAAC,IAAA,2CAAMU,EAAE,mEAAkE,eAAc,IAAG,iBAAgB,QAAO,kBAAiB,W,aChBvJ,MAAMC,EAAmB,2m7CACzB,MAAAC,EAAeD,E,MCMFE,EAAa,M,gEAEK,M,+CAI7B,MAAAf,GACE,MAAMgB,EAAgBC,KAAKC,IAAID,KAAKE,IAAIf,KAAKgB,SAAU,GAAI,KAE3D,OACEnB,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0BC,KAAKiB,iBACzCpB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBAAgBmB,MAAO,CAAEd,MAAO,GAAGQ,SAEhDf,EAAAsB,EAAA,KACGnB,KAAKoB,WACJvB,EAAA,OAAAC,IAAA,2CAAKC,MAAO,SAASC,KAAKiB,iBACvBjB,KAAKiB,gBAAkB,SAAWpB,EAAA,QAAAC,IAAA,2CAAMC,MAAO,kBAAmBa,EAAa,KAC/EZ,KAAKiB,gBAAkB,UAAYpB,EAAA,QAAAC,IAAA,2CAAMC,MAAO,kBAAmBa,EAAa,KAChFZ,KAAKiB,gBAAkB,gBACtBpB,EAAA,cAAAC,IAAA,2CAAYC,MAAO,cAAesB,MAAM,OAAOH,MAAO,CAAEI,WAAY,IAAIV,EAAgB,KAAKW,gBAC3F1B,EAAA,KAAAC,IAAA,2CAAG0B,KAAK,YAAYzB,MAAM,qBACvBa,EAAa,MAInBZ,KAAKiB,gBAAkB,mBACtBpB,EAAA,cAAAC,IAAA,2CAAYC,MAAO,iBAAkBsB,MAAM,OAAOH,MAAO,CAAEI,WAAY,IAAIV,EAAgB,MAAMW,gBAC/F1B,EAAA,KAAAC,IAAA,2CAAG0B,KAAK,YAAYzB,MAAM,qBACvBa,EAAa,Q","ignoreList":[]}

package/dist/globuscomponents/p-2b72d966.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as n,F as e}from"./p-e8f2fe42.js";import{S as a}from"./p-47052b60.js";const t='/* @import \'tailwind.css\'; /\r\n\r\n:root {\r\n / --------------------------------------Primary Colors--------------------------------------------- /\r\n / base color palette /\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n\r\n / gray color palette /\r\n --gray-25: #fcfcfd;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #9aa4b2;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0D121C;\r\n\r\n / brand dark blue color palette /\r\n --brandDarkBlue-25: #F9F9FB;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n / brand red color palette /\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n / warning color palette /\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7A2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n / success color palette /\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n / ------------------------------------------opacity color palette-------------------------------------- /\r\n / 20% opacity /\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n / 30% opacity /\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n / 40% opacity /\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n / ------------------------------------------Secondary Color------------------------------------------- /\r\n / blueLight color palete /\r\n --lightBlue-25: #F5FBFF;\r\n --lightBlue-50: #F0F9FF;\r\n --lightBlue-100: #E0F2FE;\r\n --lightBlue-200: #B9E6FE;\r\n --lightBlue-300: #7CD4FD;\r\n --lightBlue-400: #7CD4FD;\r\n --lightBlue-500: #0BA5EC;\r\n --lightBlue-600: #0086C9;\r\n --lightBlue-700: #026AA2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0B4A6F;\r\n --lightBlue-950: #062C41;\r\n \r\n\r\n / blue color palette /\r\n --blue-25: #ECF5FE;\r\n --blue-50: #E4F0FC;\r\n --blue-100: #C8E0F9;\r\n --blue-200: #9AC7F4;\r\n --blue-300: #6AA9E7;\r\n --blue-400: #378FE6;\r\n --blue-500: #075DB2;\r\n --blue-600: #064E94;\r\n --blue-700: #053E77;\r\n --blue-800: #042F59;\r\n --blue-900: #022445;\r\n --blue-950: #021D37;\r\n\r\n / Purple color palete /\r\n --purple-25: #FAFAFF;\r\n --purple-50: #F4F3FF;\r\n --purple-100: #EBE9FE;\r\n --purple-200: #D9D6FE;\r\n --purple-300: #BDB4FE;\r\n --purple-400: #9B8AFB;\r\n --purple-500: #7A5AF8;\r\n --purple-600: #6938EF;\r\n --purple-700: #5925DC;\r\n --purple-800: #4A1FB8;\r\n --purple-900: #3E1C96;\r\n --purple-950: #27115F;\r\n\r\n\r\n / pink color palette /\r\n --pink-25: #FEF6FB;\r\n --pink-50: #FDF2FA;\r\n --pink-100: #FCE7F6;\r\n --pink-200: #FCCEEE;\r\n --pink-300: #FAA7E0;\r\n --pink-400: #F670C7;\r\n --pink-500: #EE46BC;\r\n --pink-600: #DD2590;\r\n --pink-700: #C11574;\r\n --pink-800: #9E165F;\r\n --pink-900: #851651;\r\n --pink-950: #4E0D30;\r\n\r\n\r\n\r\n / -------------------------------------------------Token---------------------------------------------- /\r\n\r\n / -----------Text Color----------- /\r\n\r\n [data-theme="light"] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text: var(--gray-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n\r\n [data-theme="dark"] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n\r\n [data-theme="light"] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-discovery: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-discovery: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-discovery-subtle: var(--blueLight-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-discovery-subtle: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n\r\n / --------------Link color--------------- /\r\n\r\n\r\n [data-theme="light"] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-link-visited: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-link-visited: var(--blueLight-300);\r\n }\r\n\r\n\r\n / --------------Icon color--------------- /\r\n\r\n [data-theme="light"] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n \r\n [data-theme="light"] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon: var(--gray-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n / ----------------Border Color --------------- /\r\n\r\n [data-theme="light"] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery-subtle: var(--blueLight-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery-subtle: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery-subtler: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery-subtler: var(--blueLight-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n\r\n\r\n / Emmanuel Kadiri starts from background color /\r\n\r\n / ----------------Background Color --------------- /\r\n\r\n [data-theme="light"] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-subtlest: var(--gray-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-subtler: var(--success-100); \r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery-bold: var(--blueLight-800)\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery: var(--blueLight-200);\r\n }\r\n\r\n [data-theme="light"]{\r\n --color-background-discovery-subtle: var(--blueLight-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-subtle: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery-subtler: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-subtler: var(--blueLight-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery-subtlest: var(--blueLight-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-subtlest: var(--blueLight-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-bold: var(--blue-100)\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-them="light"] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n\r\n\r\n / ----------------Blanket Color --------------- /\r\n [data-theme="light"] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n\r\n\r\n / ----------------Skeleton Color --------------- /\r\n [data-theme="light"] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n\r\n\r\n / ----------------Surface Color --------------- /\r\n [data-theme="light"] {\r\n --color-surface-bold: var(--gray-25);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-surface-hovered: var(--gray-100); \r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n}\r\n\r\n/ -----------------Shadow and Blur----------------- /\r\n:root{\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); \r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/ -----------------Gradients----------------- /\r\n:root{\r\n / Gray Gradients /\r\n / --gray-gradient-600: linear-gradient(); /\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n / Brand Dark Blue Gradients /\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n / Brand Red Gradients /\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n / Blue Gradients /\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n:root{\r\n / h1, p {\r\n font-size: 1.75rem;\r\n line-height: 1.25rem;\r\n }\r\n \r\n h1::before, p::before{\r\n content: "";\r\n margin-bottom: -0.005em;\r\n display: table;\r\n }\r\n \r\n h1::after, p::after {\r\n content: "";\r\n margin-top: -0.025em;\r\n display: table;\r\n } /\r\n}\r\n:root{\r\n / Positive spacing /\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n / Negative spacing /\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n / Radius /\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/ .file_upload_item_base_div{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n} /\r\n\r\n.file_upload_item_base_container {\r\n display: flex;\r\n width: 32rem;\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-6);\r\n background-color: var(--color-background-card, #ffffff);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n position: absolute;\r\n top: var(--spacing-4);\r\n right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/ Default Styles /\r\n.file_upload_icon{\r\n background-color: #EEF2F6;\r\n border-radius: var(--rounded-full);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n display: flex;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n}\r\n\r\n.default.lg{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.default_content{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/ In Progress Styles /\r\n.in_progress_div.md{\r\n width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n position: absolute;\r\n top: 45%;\r\n right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Complete Styles /\r\n.complete{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n flex-direction: row;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n.complete_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n align-items: center;\r\n}\r\n\r\n.delete_button{\r\n position: absolute;\r\n top: 25%;\r\n right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n position: absolute;\r\n top: 35%;\r\n right: 1.5rem;\r\n}\r\n\r\n/ Error Styles /\r\n.error{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n text-align: center;\r\n}\r\n\r\n.error_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n display: flex;\r\n justify-content: center;\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Text Styles*/\r\n.text-sm-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n margin-top: -0.396em;\r\n}\r\n\r\np.lg{\r\n display: flex;\r\n gap: var(--spacing-1);\r\n}';const d=t;const o=class{constructor(n){r(this,n);this.icon=undefined;this.state=undefined;this.heightSize="md";this.fileType=undefined;this.buttonState=a.Default}returnIcons(){switch(this.icon){case"outline":switch(this.fileType){case"pdf":return n("svg",{width:"40",height:"41",viewBox:"0 0 40 41",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z",fill:"white",stroke:"#CDD5DF","stroke-width":"1.5"}),n("path",{d:"M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5",stroke:"#CDD5DF","stroke-width":"1.5"}),n("rect",{x:"0.5",y:"18",width:"27",height:"17",rx:"2",fill:"#E21B2E"}),n("path",{d:"M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z",fill:"white"}))}}}render(){return n("div",{key:"585ad06cf8879809c48263ddf7b7d0f07f82612c",class:`file_upload_item_base_container ${this.state} ${this.heightSize}`},this.state==="in_progress"&&n("div",{key:"da0097b59cd6c40fe8f622e522355da3916417b0",class:`in_progress_div ${this.heightSize}`},n("div",{key:"33242f4eef01d3c954ce48ef74af7596e5914be1",class:"file_icon"}),n("div",{key:"355764e15cfdca6316ab0eb955cf7675471edad9",class:"in_progress_content"},this.heightSize==="md"&&n(e,null,n("p",{key:"c25fe8a2d309c90a2ab089330aa01d814bed7cf6",class:`file_type_text ${this.state} text-sm-medium`},"Tech design requirements.pdf"),n("p",{key:"a5557ce90740184aa6d69b4d12bbe2dba2f15836",class:`file_size_text ${this.state} text-sm-regular`},"200 KB"),n("gb-progress-bar",{key:"ec0aa176aa0ea50ed2c6615bfb6e0dec3c516303",progress:20,"show-label":true,"label-position":"right",class:"progress_bar"}),n("gb-button-close",{key:"e729b9e5c3d4e8687339d40ec331804669f7dfca",size:"sm",color:"gray",class:"close_button"})),this.heightSize==="lg"&&n(e,null,n("p",{key:"6dd0f5cd3455d0b019a62835e3f484cb86780357",class:`file_type_text ${this.state} text-sm-medium`},"Tech design requirements.pdf"),n("p",{key:"d35ad8f361cf5be32130a187200430ab7ca8248e",class:`file_size_text ${this.state} text-sm-regular`},"200 KB"),n("gb-progress-bar",{key:"0e5a4c377c541d17d1311f0e826a830ba2249b8c",progress:20,"show-label":true,"label-position":"right",class:"progress_bar"}),n("gb-button-close",{key:"587383be1e116c9d1bf9529ff2ee7dd4e5b8a903",size:"sm",color:"gray",class:"close_button"})))),this.state==="complete"&&n("div",{key:"364aa36e1b192a8d4886e4f797fb8247f7ee28ad",class:`complete ${this.heightSize}`},n("div",{key:"8fdf41774841657334fc34f75f8aa292a36e26d5",class:"file_icon"}),n("div",{key:"aeb743674e3e1f03aa55cd52ed6219da11a46e73",class:`complete_content ${this.heightSize}`},this.heightSize==="md"&&n(e,null,n("p",{key:"8e2a698a70662d2a224f853e46c0e760af0044f0",class:`file_type_text ${this.state} text-sm-medium`},"Tech design requirements.pdf"),n("p",{key:"08605b433bdc5d3d03cd1ef728c1c79ea2c6446b",class:`file_size_text ${this.state} text-sm-regular`},"200 KB – 100% uploaded"),n("test-button",{key:"47c6efc7d6e3e2e92c20aac6cd61b78ee65e4d34",size:"sm",hierarchy:"tertiary_gray",icon:"only","icon-leading":true,"icon-leading-swap":"delete-02",class:"delete_button"})),this.heightSize==="lg"&&n(e,null,n("p",{key:"16a8f5f7c46e0c03606b9a4d3e24a2cbe8fcb87f",class:`file_type_text ${this.state} text-sm-medium`},"Tech design requirements.pdf"),n("p",{key:"f955e84be5f8ad0257481661188299d0f15c122b",class:`file_size_text ${this.state} text-sm-regular`},"200 KB – 100% uploaded"),n("test-button",{key:"9fe3667f81dce8f2c7f535b8e6d1e1b17553ebde",size:"sm",hierarchy:"tertiary_gray",icon:"default","icon-leading":true,"icon-leading-swap":"delete-02"},n("p",{key:"4e81c1aeeb4afe93e949ac5c4436d7fda5095c09"},"Clear"))))),this.state==="error"&&n("div",{key:"28bcc7bf40f47b3c54ff2077dcdaed53669a403d",class:`error ${this.heightSize}`},n("div",{key:"e230f4064e69dbb948abb07406b0aa81f0931a87",class:"file_icon"}),n("div",{key:"8c313d2d96571a6c1a6fcff84f299a0f9d64e5b7",class:"error_content"},this.heightSize==="md"&&n(e,null,n("p",{key:"6e9c411c41216e8e303d7d1abeb62ddc230b6414",class:`file_type_text ${this.state} text-sm-medium`},"Tech design requirements.pdf"),n("p",{key:"87544adf363ab7e4c7cc1220f65fc7db725d1922",class:`file_size_text ${this.state} text-sm-regular`},"200 KB – 100% uploaded"),n("gb-button",{key:"d8f9b38e806346187af4dd2299ac4b52587bce4a",size:"sm",hierarchy:"link_color",icon:a.Default,destructive:true},n("p",{key:"ff6be31ad7e55666918caf1e299fbad8f552e5e2"},"Try again")),n("gb-button",{key:"a356771a29cba4616db44fb0f87efb61027e5620",size:"sm",hierarchy:"tertiary_gray",icon:"only",destructive:true,"icon-leading":true,"icon-leading-swap":"delete-02",class:"delete_button"})),this.heightSize==="lg"&&n(e,null,n("p",{key:"80f7d0ae1e772c6637bbeb95a859a7168e250539",class:`file_type_text ${this.state} text-sm-medium`},"Tech design requirements.pdf"),n("p",{key:"4129e9b4d4bd7a008d8babb0c0c0da63e4cafbff",class:`file_size_text ${this.state} text-sm-regular`},"200 KB – 100% uploaded"),n("div",{key:"fafe35b5d725f9dfa2b6be1fd6e054b5ea318153",class:"btns"},n("test-button",{key:"f23226b420b6bc9fe22af5e29546d792325fd357",size:"sm",hierarchy:"tertiary_gray",icon:"default",destructive:true,"icon-leading":true,"icon-leading-swap":"delete-02"},n("p",{key:"b6c223e60b076b0cd2e83188da6317425a1f199f"},"Clear")),n("div",{key:"d59089652a60035bccc93d91ed9d03737bf1e49d",class:"btn"},n("test-button",{key:"f1b70374592b00dff7537e14e2f0961b4f3fd3aa",size:"sm",hierarchy:"link_color",icon:a.Default,destructive:true,class:"btn"},n("p",{key:"ea910261794d329347316e59c250ce5c51380e0c"},"Try again"))))))))}};o.style=d;export{o as gb_file_upload_item_base};
2	+ //# sourceMappingURL=p-2b72d966.entry.js.map

package/dist/globuscomponents/{p-add9ec72.entry.js.map → p-2b72d966.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["gbFileUploadItemBaseCss","GbFileUploadItemBaseStyle0","GbFileUploadItemBase","StateEnum","Default","returnIcons","this","icon","fileType","h","width","height","viewBox","fill","xmlns","d","stroke","x","y","rx","render","key","class","state","heightSize","Fragment","progress","size","color","hierarchy","destructive"],"sources":["src/components/gb-file-upload-item-base/gb-file-upload-item-base.css?tag=gb-file-upload-item-base&encapsulation=shadow","src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\n/* .file_upload_item_base_div{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n} /\r\n\r\n.file_upload_item_base_container {\r\n display: flex;\r\n width: 32rem;\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-6);\r\n background-color: var(--color-background-card, #ffffff);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n position: absolute;\r\n top: var(--spacing-4);\r\n right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/ Default Styles /\r\n.file_upload_icon{\r\n background-color: #EEF2F6;\r\n border-radius: var(--rounded-full);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n display: flex;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n}\r\n\r\n.default.lg{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.default_content{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/ In Progress Styles /\r\n.in_progress_div.md{\r\n width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n position: absolute;\r\n top: 45%;\r\n right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Complete Styles /\r\n.complete{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n flex-direction: row;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n.complete_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n align-items: center;\r\n}\r\n\r\n.delete_button{\r\n position: absolute;\r\n top: 25%;\r\n right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n position: absolute;\r\n top: 35%;\r\n right: 1.5rem;\r\n}\r\n\r\n/ Error Styles /\r\n.error{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n text-align: center;\r\n}\r\n\r\n.error_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n display: flex;\r\n justify-content: center;\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Text Styles*/\r\n.text-sm-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n margin-top: -0.396em;\r\n}\r\n\r\np.lg{\r\n display: flex;\r\n gap: var(--spacing-1);\r\n}","import { Component, h, Prop, Fragment } from '@stencil/core';\r\nimport { FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-file-upload-item-base',\r\n styleUrl: 'gb-file-upload-item-base.css',\r\n shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n @Prop() icon: FileUploadIconType;\r\n @Prop() state: FileUploadStates;\r\n @Prop() heightSize: GeneralSizes = 'md';\r\n @Prop() fileType: 'pdf' \| 'png' \| 'jpg' \| 'doc' \| 'mp4';\r\n @Prop() buttonState: StateEnum = StateEnum.Default;\r\n\r\n returnIcons() {\r\n switch (this.icon) {\r\n case 'outline':\r\n switch (this.fileType) {\r\n case 'pdf':\r\n return (\r\n <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z\"\r\n fill=\"white\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.5\"\r\n />\r\n <path d=\"M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" />\r\n <rect x=\"0.5\" y=\"18\" width=\"27\" height=\"17\" rx=\"2\" fill=\"#E21B2E\" />\r\n <path\r\n d=\"M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z\"\r\n fill=\"white\"\r\n />\r\n </svg>\r\n );\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n {this.state === 'in_progress' && (\r\n <div class={`in_progress_div ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"in_progress_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'complete' && (\r\n <div class={`complete ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class={`complete_content ${this.heightSize}`}>\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\" \r\n class=\"delete_button\"\r\n ></test-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'error' && (\r\n <div class={`error ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"error_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true}>\r\n <p>Try again</p>\r\n </gb-button>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\"\r\n class=\"delete_button\"\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <div class=\"btns\">\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n <div class=\"btn\">\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true} \r\n class=\"btn\">\r\n <p>Try again</p>\r\n </test-button>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"iFAAA,MAAMA,EAA0B,iiiDAChC,MAAAC,EAAeD,E,MCOFE,EAAoB,M,kFAGI,K,yCAEFC,EAAUC,O,CAE3C,WAAAC,GACE,OAAQC,KAAKC,MACX,IAAK,UACH,OAAQD,KAAKE,UACX,IAAK,MACH,OACEC,EAAA,OAAKC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChEL,EAAA,QACEM,EAAE,8OACFF,KAAK,QACLG,OAAO,UAAS,eACH,QAEfP,EAAA,QAAMM,EAAE,iDAAiDC,OAAO,UAAS,eAAc,QACvFP,EAAA,QAAMQ,EAAE,MAAMC,EAAE,KAAKR,MAAM,KAAKC,OAAO,KAAKQ,GAAG,IAAIN,KAAK,YACxDJ,EAAA,QACEM,EAAE,6hDACFF,KAAK,Y,CAQrB,MAAAO,GACE,OACEX,EAAA,OAAAY,IAAA,2CAAKC,MAAO,mCAAmChB,KAAKiB,SAASjB,KAAKkB,cAC/DlB,KAAKiB,QAAU,eACdd,EAAA,OAAAY,IAAA,2CAAKC,MAAO,mBAAmBhB,KAAKkB,cAClCf,EAAA,OAAAY,IAAA,2CAAKC,MAAM,cACXb,EAAA,OAAAY,IAAA,2CAAKC,MAAM,uBACRhB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,UACxDd,EAAA,mBAAAY,IAAA,2CAAiBK,SAAU,GAAE,aAAc,KAAI,iBAAiB,QAAQJ,MAAM,iBAC9Eb,EAAA,mBAAAY,IAAA,2CAAiBM,KAAK,KAAKC,MAAM,OAAON,MAAM,kBAGjDhB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,UACxDd,EAAA,mBAAAY,IAAA,2CAAiBK,SAAU,GAAE,aAAc,KAAI,iBAAiB,QAAQJ,MAAM,iBAC9Eb,EAAA,mBAAAY,IAAA,2CAAiBM,KAAK,KAAKC,MAAM,OAAON,MAAM,oBAMvDhB,KAAKiB,QAAU,YACdd,EAAA,OAAAY,IAAA,2CAAKC,MAAO,YAAYhB,KAAKkB,cAC3Bf,EAAA,OAAAY,IAAA,2CAAKC,MAAM,cACXb,EAAA,OAAAY,IAAA,2CAAKC,MAAO,oBAAoBhB,KAAKkB,cAClClB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,eAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,gBACVtB,KAAK,OAAM,eACG,KAAI,oBACA,YAClBe,MAAM,mBAIThB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,eAAAY,IAAA,2CAAaM,KAAK,KAClBE,UAAU,gBACVtB,KAAK,UAAS,eACA,KAAI,oBACA,aAChBE,EAAA,KAAAY,IAAA,yDAOXf,KAAKiB,QAAU,SACdd,EAAA,OAAAY,IAAA,2CAAKC,MAAO,SAAShB,KAAKkB,cACxBf,EAAA,OAAAY,IAAA,2CAAKC,MAAM,cACXb,EAAA,OAAAY,IAAA,2CAAKC,MAAM,iBACRhB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,aAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,aACVtB,KAAMJ,EAAUC,QAChB0B,YAAa,MACXrB,EAAA,KAAAY,IAAA,0DAEFZ,EAAA,aAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,gBACVtB,KAAK,OAAOuB,YAAa,KAAI,eACf,KAAI,oBACA,YAClBR,MAAM,mBAIThB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,OAAAY,IAAA,2CAAKC,MAAM,QACTb,EAAA,eAAAY,IAAA,2CAAaM,KAAK,KAClBE,UAAU,gBACVtB,KAAK,UACLuB,YAAa,KAAI,eACH,KAAI,oBACA,aAChBrB,EAAA,KAAAY,IAAA,sDAEFZ,EAAA,OAAAY,IAAA,2CAAKC,MAAM,OACTb,EAAA,eAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,aACVtB,KAAMJ,EAAUC,QAChB0B,YAAa,KACbR,MAAM,OACJb,EAAA,KAAAY,IAAA,+D","ignoreList":[]}
1	+ {"version":3,"names":["gbFileUploadItemBaseCss","GbFileUploadItemBaseStyle0","GbFileUploadItemBase","StateEnum","Default","returnIcons","this","icon","fileType","h","width","height","viewBox","fill","xmlns","d","stroke","x","y","rx","render","key","class","state","heightSize","Fragment","progress","size","color","hierarchy","destructive"],"sources":["src/components/gb-file-upload-item-base/gb-file-upload-item-base.css?tag=gb-file-upload-item-base&encapsulation=shadow","src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\n/* .file_upload_item_base_div{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n} /\r\n\r\n.file_upload_item_base_container {\r\n display: flex;\r\n width: 32rem;\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-6);\r\n background-color: var(--color-background-card, #ffffff);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n position: absolute;\r\n top: var(--spacing-4);\r\n right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/ Default Styles /\r\n.file_upload_icon{\r\n background-color: #EEF2F6;\r\n border-radius: var(--rounded-full);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n display: flex;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n}\r\n\r\n.default.lg{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.default_content{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/ In Progress Styles /\r\n.in_progress_div.md{\r\n width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n position: absolute;\r\n top: 45%;\r\n right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Complete Styles /\r\n.complete{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n flex-direction: row;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n.complete_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n align-items: center;\r\n}\r\n\r\n.delete_button{\r\n position: absolute;\r\n top: 25%;\r\n right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n position: absolute;\r\n top: 35%;\r\n right: 1.5rem;\r\n}\r\n\r\n/ Error Styles /\r\n.error{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n text-align: center;\r\n}\r\n\r\n.error_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n display: flex;\r\n justify-content: center;\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Text Styles*/\r\n.text-sm-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n margin-top: -0.396em;\r\n}\r\n\r\np.lg{\r\n display: flex;\r\n gap: var(--spacing-1);\r\n}","import { Component, h, Prop, Fragment } from '@stencil/core';\r\nimport { FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-file-upload-item-base',\r\n styleUrl: 'gb-file-upload-item-base.css',\r\n shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n @Prop() icon: FileUploadIconType;\r\n @Prop() state: FileUploadStates;\r\n @Prop() heightSize: GeneralSizes = 'md';\r\n @Prop() fileType: 'pdf' \| 'png' \| 'jpg' \| 'doc' \| 'mp4';\r\n @Prop() buttonState: StateEnum = StateEnum.Default;\r\n\r\n returnIcons() {\r\n switch (this.icon) {\r\n case 'outline':\r\n switch (this.fileType) {\r\n case 'pdf':\r\n return (\r\n <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z\"\r\n fill=\"white\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.5\"\r\n />\r\n <path d=\"M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" />\r\n <rect x=\"0.5\" y=\"18\" width=\"27\" height=\"17\" rx=\"2\" fill=\"#E21B2E\" />\r\n <path\r\n d=\"M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z\"\r\n fill=\"white\"\r\n />\r\n </svg>\r\n );\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n {this.state === 'in_progress' && (\r\n <div class={`in_progress_div ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"in_progress_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'complete' && (\r\n <div class={`complete ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class={`complete_content ${this.heightSize}`}>\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\" \r\n class=\"delete_button\"\r\n ></test-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'error' && (\r\n <div class={`error ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"error_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true}>\r\n <p>Try again</p>\r\n </gb-button>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\"\r\n class=\"delete_button\"\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <div class=\"btns\">\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n <div class=\"btn\">\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true} \r\n class=\"btn\">\r\n <p>Try again</p>\r\n </test-button>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"iFAAA,MAAMA,EAA0B,wkiDAChC,MAAAC,EAAeD,E,MCOFE,EAAoB,M,kFAGI,K,yCAEFC,EAAUC,O,CAE3C,WAAAC,GACE,OAAQC,KAAKC,MACX,IAAK,UACH,OAAQD,KAAKE,UACX,IAAK,MACH,OACEC,EAAA,OAAKC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChEL,EAAA,QACEM,EAAE,8OACFF,KAAK,QACLG,OAAO,UAAS,eACH,QAEfP,EAAA,QAAMM,EAAE,iDAAiDC,OAAO,UAAS,eAAc,QACvFP,EAAA,QAAMQ,EAAE,MAAMC,EAAE,KAAKR,MAAM,KAAKC,OAAO,KAAKQ,GAAG,IAAIN,KAAK,YACxDJ,EAAA,QACEM,EAAE,6hDACFF,KAAK,Y,CAQrB,MAAAO,GACE,OACEX,EAAA,OAAAY,IAAA,2CAAKC,MAAO,mCAAmChB,KAAKiB,SAASjB,KAAKkB,cAC/DlB,KAAKiB,QAAU,eACdd,EAAA,OAAAY,IAAA,2CAAKC,MAAO,mBAAmBhB,KAAKkB,cAClCf,EAAA,OAAAY,IAAA,2CAAKC,MAAM,cACXb,EAAA,OAAAY,IAAA,2CAAKC,MAAM,uBACRhB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,UACxDd,EAAA,mBAAAY,IAAA,2CAAiBK,SAAU,GAAE,aAAc,KAAI,iBAAiB,QAAQJ,MAAM,iBAC9Eb,EAAA,mBAAAY,IAAA,2CAAiBM,KAAK,KAAKC,MAAM,OAAON,MAAM,kBAGjDhB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,UACxDd,EAAA,mBAAAY,IAAA,2CAAiBK,SAAU,GAAE,aAAc,KAAI,iBAAiB,QAAQJ,MAAM,iBAC9Eb,EAAA,mBAAAY,IAAA,2CAAiBM,KAAK,KAAKC,MAAM,OAAON,MAAM,oBAMvDhB,KAAKiB,QAAU,YACdd,EAAA,OAAAY,IAAA,2CAAKC,MAAO,YAAYhB,KAAKkB,cAC3Bf,EAAA,OAAAY,IAAA,2CAAKC,MAAM,cACXb,EAAA,OAAAY,IAAA,2CAAKC,MAAO,oBAAoBhB,KAAKkB,cAClClB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,eAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,gBACVtB,KAAK,OAAM,eACG,KAAI,oBACA,YAClBe,MAAM,mBAIThB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,eAAAY,IAAA,2CAAaM,KAAK,KAClBE,UAAU,gBACVtB,KAAK,UAAS,eACA,KAAI,oBACA,aAChBE,EAAA,KAAAY,IAAA,yDAOXf,KAAKiB,QAAU,SACdd,EAAA,OAAAY,IAAA,2CAAKC,MAAO,SAAShB,KAAKkB,cACxBf,EAAA,OAAAY,IAAA,2CAAKC,MAAM,cACXb,EAAA,OAAAY,IAAA,2CAAKC,MAAM,iBACRhB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,aAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,aACVtB,KAAMJ,EAAUC,QAChB0B,YAAa,MACXrB,EAAA,KAAAY,IAAA,0DAEFZ,EAAA,aAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,gBACVtB,KAAK,OAAOuB,YAAa,KAAI,eACf,KAAI,oBACA,YAClBR,MAAM,mBAIThB,KAAKkB,aAAe,MACnBf,EAAAgB,EAAA,KACEhB,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,wBAAsB,gCACvDd,EAAA,KAAAY,IAAA,2CAAGC,MAAO,kBAAkBhB,KAAKiB,yBAAuB,0BACxDd,EAAA,OAAAY,IAAA,2CAAKC,MAAM,QACTb,EAAA,eAAAY,IAAA,2CAAaM,KAAK,KAClBE,UAAU,gBACVtB,KAAK,UACLuB,YAAa,KAAI,eACH,KAAI,oBACA,aAChBrB,EAAA,KAAAY,IAAA,sDAEFZ,EAAA,OAAAY,IAAA,2CAAKC,MAAM,OACTb,EAAA,eAAAY,IAAA,2CACAM,KAAK,KACLE,UAAU,aACVtB,KAAMJ,EAAUC,QAChB0B,YAAa,KACbR,MAAM,OACJb,EAAA,KAAAY,IAAA,+D","ignoreList":[]}

package/dist/globuscomponents/p-34a50ac8.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as n,g as e}from"./p-e8f2fe42.js";const a='/* @import \'tailwind.css\'; /\r\n\r\n:root {\r\n / --------------------------------------Primary Colors--------------------------------------------- /\r\n / base color palette /\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n\r\n / gray color palette /\r\n --gray-25: #fcfcfd;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #9aa4b2;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0D121C;\r\n\r\n / brand dark blue color palette /\r\n --brandDarkBlue-25: #F9F9FB;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n / brand red color palette /\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n / warning color palette /\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7A2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n / success color palette /\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n / ------------------------------------------opacity color palette-------------------------------------- /\r\n / 20% opacity /\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n / 30% opacity /\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n / 40% opacity /\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n / ------------------------------------------Secondary Color------------------------------------------- /\r\n / blueLight color palete /\r\n --lightBlue-25: #F5FBFF;\r\n --lightBlue-50: #F0F9FF;\r\n --lightBlue-100: #E0F2FE;\r\n --lightBlue-200: #B9E6FE;\r\n --lightBlue-300: #7CD4FD;\r\n --lightBlue-400: #7CD4FD;\r\n --lightBlue-500: #0BA5EC;\r\n --lightBlue-600: #0086C9;\r\n --lightBlue-700: #026AA2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0B4A6F;\r\n --lightBlue-950: #062C41;\r\n \r\n\r\n / blue color palette /\r\n --blue-25: #ECF5FE;\r\n --blue-50: #E4F0FC;\r\n --blue-100: #C8E0F9;\r\n --blue-200: #9AC7F4;\r\n --blue-300: #6AA9E7;\r\n --blue-400: #378FE6;\r\n --blue-500: #075DB2;\r\n --blue-600: #064E94;\r\n --blue-700: #053E77;\r\n --blue-800: #042F59;\r\n --blue-900: #022445;\r\n --blue-950: #021D37;\r\n\r\n / Purple color palete /\r\n --purple-25: #FAFAFF;\r\n --purple-50: #F4F3FF;\r\n --purple-100: #EBE9FE;\r\n --purple-200: #D9D6FE;\r\n --purple-300: #BDB4FE;\r\n --purple-400: #9B8AFB;\r\n --purple-500: #7A5AF8;\r\n --purple-600: #6938EF;\r\n --purple-700: #5925DC;\r\n --purple-800: #4A1FB8;\r\n --purple-900: #3E1C96;\r\n --purple-950: #27115F;\r\n\r\n\r\n / pink color palette /\r\n --pink-25: #FEF6FB;\r\n --pink-50: #FDF2FA;\r\n --pink-100: #FCE7F6;\r\n --pink-200: #FCCEEE;\r\n --pink-300: #FAA7E0;\r\n --pink-400: #F670C7;\r\n --pink-500: #EE46BC;\r\n --pink-600: #DD2590;\r\n --pink-700: #C11574;\r\n --pink-800: #9E165F;\r\n --pink-900: #851651;\r\n --pink-950: #4E0D30;\r\n\r\n\r\n\r\n / -------------------------------------------------Token---------------------------------------------- /\r\n\r\n / -----------Text Color----------- /\r\n\r\n [data-theme="light"] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text: var(--gray-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n\r\n [data-theme="dark"] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n\r\n [data-theme="light"] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-discovery: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-discovery: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-discovery-subtle: var(--blueLight-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-discovery-subtle: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n\r\n / --------------Link color--------------- /\r\n\r\n\r\n [data-theme="light"] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-link-visited: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-link-visited: var(--blueLight-300);\r\n }\r\n\r\n\r\n / --------------Icon color--------------- /\r\n\r\n [data-theme="light"] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n \r\n [data-theme="light"] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon: var(--gray-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n / ----------------Border Color --------------- /\r\n\r\n [data-theme="light"] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery-subtle: var(--blueLight-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery-subtle: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-discovery-subtler: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-discovery-subtler: var(--blueLight-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n\r\n\r\n / Emmanuel Kadiri starts from background color /\r\n\r\n / ----------------Background Color --------------- /\r\n\r\n [data-theme="light"] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-gray-subtlest: var(--gray-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-subtler: var(--success-100); \r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery-bold: var(--blueLight-800)\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery: var(--blueLight-200);\r\n }\r\n\r\n [data-theme="light"]{\r\n --color-background-discovery-subtle: var(--blueLight-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-subtle: var(--blueLight-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery-subtler: var(--blueLight-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-subtler: var(--blueLight-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-discovery-subtlest: var(--blueLight-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-discovery-subtlest: var(--blueLight-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-bold: var(--blue-100)\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-them="light"] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n\r\n\r\n / ----------------Blanket Color --------------- /\r\n [data-theme="light"] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n\r\n\r\n / ----------------Skeleton Color --------------- /\r\n [data-theme="light"] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n\r\n\r\n / ----------------Surface Color --------------- /\r\n [data-theme="light"] {\r\n --color-surface-bold: var(--gray-25);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-surface-hovered: var(--gray-100); \r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme="light"] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme="dark"] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n}\r\n\r\n/ -----------------Shadow and Blur----------------- /\r\n:root{\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); \r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/ -----------------Gradients----------------- /\r\n:root{\r\n / Gray Gradients /\r\n / --gray-gradient-600: linear-gradient(); /\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n / Brand Dark Blue Gradients /\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n / Brand Red Gradients /\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n / Blue Gradients /\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n:root{\r\n / h1, p {\r\n font-size: 1.75rem;\r\n line-height: 1.25rem;\r\n }\r\n \r\n h1::before, p::before{\r\n content: "";\r\n margin-bottom: -0.005em;\r\n display: table;\r\n }\r\n \r\n h1::after, p::after {\r\n content: "";\r\n margin-top: -0.025em;\r\n display: table;\r\n } /\r\n}\r\n:root{\r\n / Positive spacing /\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n / Negative spacing /\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n / Radius /\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n@import url(\'https://fonts.googleapis.com/css2?family=Sora&display=swap\');\r\n\r\n:root{\r\n / Font Sizes /\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n / Font Weights /\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400; \r\n\r\n / Line Heights /\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem; \r\n --font-line-height-d-xs: 2rem; \r\n --font-line-height-t-xl: 1.875rem;\r\n --font-line-height-t-lg: 1.688rem;\r\n --font-line-height-t-md: 1.5rem;\r\n --font-line-height-t-sm: 1.313rem;\r\n --font-line-height-t-xs: 1.125rem;\r\n --font-line-height-t-xxs: 0.938rem;\r\n\r\n / Letter Spacings /\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n / Font Families /\r\n --font-family-title: \'Sora\';\r\n --font-family-body: \'Sora\';\r\n}\r\n\r\n/ Media queries for medium screens (tablet) /\r\n@media (max-width: 1199px) {\r\n :root{\r\n / Font Sizes /\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n / Line Heights /\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n / Letter Spacings /\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/ Media queries for smaller screens (mobile) /\r\n@media (max-width: 743px) {\r\n :root{\r\n / Font Sizes /\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n / Line Heights /\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n / Letter Spacings /\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before{\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after{\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before{\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after{\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before{\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after{\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before{\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after{\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before{\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after{\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before{\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after{\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before{\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after{\r\n margin-top: -0.195em; / Continue from here /\r\n}\r\n\r\n.display-xs-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before{\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after{\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before{\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after{\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before{\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after{\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before{\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n margin-top: -0.196em;\r\n}\r\n\r\n.text-xs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n content: "";\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.simple-dropdown {\r\n display: inline-flex;\r\n padding: 0px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0px;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.profile {\r\n display: flex;\r\n width: 15rem;\r\n padding: var(--spacing-1) var(--spacing-3);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n border-bottom: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n}\r\n\r\n.complex-dropdown {\r\n display: inline-flex;\r\n padding: 0px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0px;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid #E3E8EF;\r\n background: #FFFFFF;\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.menu-items {\r\n display: flex;\r\n width: 96.5%;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.list {\r\n padding: var(--spacing-1) var(--spacing-none);\r\n align-self: stretch;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two,\r\n.list-group-three{\r\n width: 100%;\r\n padding: var(--spacing-1) var(--spacing-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two{\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.one,\r\n.two,\r\n.three{\r\n width: 96.5%;\r\n}\r\n\r\n.label_group {\r\n display: flex;\r\n padding: 0px;\r\n align-items: center;\r\n gap: 12px;\r\n align-self: stretch;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n\r\n::slotted([slot=\'name\']) {\r\n color: #4B5565;\r\n / Text sm/Semibold /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n line-height: var(--Font-Line-height-T-sm, 20px); / 142.857% /\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n::slotted([slot=\'supporting_text\']) {\r\n margin-top: -20px;\r\n color: #697586;\r\n / Text sm/Regular /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 20px); / 142.857% */\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}';const t=a;const o=class{constructor(n){r(this,n);this.type=undefined;this.text=false;this.showProfile=undefined;this.showDarkTheme=undefined;this.showLogOut=undefined;this.listGroupOne=undefined;this.listGroupTwo=undefined;this.listGroupThree=undefined}componentDidLoad(){const r=this.el.querySelector('[slot="initials"]');if(r){r.classList.add("text-md-semi-bold")}}async viewProfileClicked(){}async logoutClicked(){}render(){if(this.type==="simple"){return n("div",{class:"simple-dropdown"},n("div",{class:"profile"},n("gb-avatar-label-group",{size:"md",text:this.text},n("slot",{name:"name",slot:"name"}),!this.text?n("slot",{name:"image",slot:"image"}):n("slot",{name:"initials",slot:"initials"}),n("slot",{name:"supporting_text",slot:"supporting_text"}))),n("div",{class:"menu-items"},n("div",{class:"list"},this.showProfile&&n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"user_profile",label:"View Profile",shortcut:true,shortcutIcon:"K + P",onClick:()=>this.viewProfileClicked()}),this.showDarkTheme&&n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"dark_theme",label:"Dark Theme",shortcut:true,shortcutIcon:"T"}),this.showLogOut&&n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"logout_button",label:"Log out",shortcut:true,shortcutIcon:"L",onClick:()=>this.logoutClicked()}))))}if(this.type==="complex"){return n("div",{class:"complex-dropdown"},n("div",{class:"profile"},n("gb-avatar-label-group",{size:"md",class:"label_group",text:this.text},n("slot",{name:"name",slot:"name"}),!this.text?n("slot",{name:"image",slot:"image"}):n("slot",{name:"initials",slot:"initials"}),n("slot",{name:"supporting_text",slot:"supporting_text"}))),this.listGroupOne&&n("div",{class:"list-group-one"},n("div",{class:"one"},n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"user_profile",label:"View Profile",shortcut:true,shortcutIcon:"K+P",onClick:()=>this.viewProfileClicked()})),n("div",{class:"two"},n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"dark_theme",label:"Dark Theme",shortcut:true,shortcutIcon:"T"}))),this.listGroupTwo&&n("div",{class:"list-group-two"},n("div",{class:"one"},n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"configuration_02",label:"Configuration",shortcut:true,shortcutIcon:"S"})),n("div",{class:"two"},n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"user_group",label:"Team",shortcut:true,shortcutIcon:"K->T"})),n("div",{class:"three"},n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"user_add",label:"Invite Members",shortcut:true,shortcutIcon:"I"}))),this.listGroupThree&&n("div",{class:"list-group-three"},n("div",{class:"one"},n("gb-dropdown-items-with-shortcut",{icon:true,iconSrc:"logout_button",label:"Log out",shortcut:true,shortcutIcon:"L",onClick:()=>this.logoutClicked()}))))}}get el(){return e(this)}};o.style=t;export{o as gb_avatar_dropdown};
2	+ //# sourceMappingURL=p-34a50ac8.entry.js.map

package/dist/globuscomponents/{p-48ddf6c1.entry.js.map → p-34a50ac8.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["gbAvatarDropdownCss","GbAvatarDropdownStyle0","GbAvatarDropdown","componentDidLoad","slottedInitials","this","el","querySelector","classList","add","viewProfileClicked","logoutClicked","render","type","h","class","size","text","name","slot","showProfile","icon","iconSrc","label","shortcut","shortcutIcon","onClick","showDarkTheme","showLogOut","listGroupOne","listGroupTwo","listGroupThree"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n@import '../../global/spacing.css';\r\n@import '../../global/typography.css';\r\n\r\n.simple-dropdown {\r\n display: inline-flex;\r\n padding: 0px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0px;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.profile {\r\n display: flex;\r\n width: 15rem;\r\n padding: var(--spacing-1) var(--spacing-3);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n border-bottom: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n}\r\n\r\n.complex-dropdown {\r\n display: inline-flex;\r\n padding: 0px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0px;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid #E3E8EF;\r\n background: #FFFFFF;\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.menu-items {\r\n display: flex;\r\n width: 96.5%;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.list {\r\n padding: var(--spacing-1) var(--spacing-none);\r\n align-self: stretch;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two,\r\n.list-group-three{\r\n width: 100%;\r\n padding: var(--spacing-1) var(--spacing-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two{\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.one,\r\n.two,\r\n.three{\r\n width: 96.5%;\r\n}\r\n\r\n.label_group {\r\n display: flex;\r\n padding: 0px;\r\n align-items: center;\r\n gap: 12px;\r\n align-self: stretch;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n\r\n::slotted([slot='name']) {\r\n color: #4B5565;\r\n /* Text sm/Semibold /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n line-height: var(--Font-Line-height-T-sm, 20px); / 142.857% /\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n::slotted([slot='supporting_text']) {\r\n margin-top: -20px;\r\n color: #697586;\r\n / Text sm/Regular /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 20px); / 142.857% */\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}","import {Component, Element, Method, Prop, h} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-avatar-dropdown',\r\n styleUrl: 'gb-avatar-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n @Prop() type: 'simple' \| 'complex';\r\n @Prop() text: boolean = false;\r\n @Prop() showProfile: boolean;\r\n @Prop() showDarkTheme: boolean;\r\n @Prop() showLogOut: boolean;\r\n @Prop() listGroupOne: boolean;\r\n @Prop() listGroupTwo: boolean;\r\n @Prop() listGroupThree: boolean;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (slottedInitials) {\r\n slottedInitials.classList.add('text-md-semi-bold');\r\n }\r\n }\r\n\r\n @Method()\r\n async viewProfileClicked() {}\r\n\r\n @Method()\r\n async logoutClicked() {}\r\n\r\n render() {\r\n if (this.type === 'simple') {\r\n return (\r\n <div class=\"simple-dropdown\">\r\n <div class=\"profile\">\r\n <gb-avatar-label-group size=\"md\" text={this.text}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n <div class=\"menu-items\">\r\n <div class=\"list\">\r\n {this.showProfile && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"user_profile\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K + P\"\r\n onClick={() => this.viewProfileClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n {this.showDarkTheme && <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\"></gb-dropdown-items-with-shortcut>}\r\n {this.showLogOut && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"logout_button\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.logoutClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n if (this.type === 'complex') {\r\n return (\r\n <div class=\"complex-dropdown\">\r\n <div class=\"profile\">\r\n <gb-avatar-label-group size=\"md\" class=\"label_group\" text={this.text}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n {this.listGroupOne && (\r\n <div class=\"list-group-one\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"user_profile\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K+P\"\r\n onClick={() => this.viewProfileClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"two\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n {this.listGroupTwo && (\r\n <div class=\"list-group-two\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"configuration_02\" label=\"Configuration\" shortcut shortcutIcon=\"S\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"two\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"user_group\" label=\"Team\" shortcut shortcutIcon=\"K->T\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"three\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"user_add\" label=\"Invite Members\" shortcut shortcutIcon=\"I\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n {this.listGroupThree && (\r\n <div class=\"list-group-three\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"logout_button\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.logoutClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}"],"mappings":"6CAAA,MAAMA,EAAsB,8vtEAC5B,MAAAC,EAAeD,E,MCMFE,EAAgB,M,uDAEH,M,wKASxB,gBAAAC,GACE,MAAMC,EAAkBC,KAAKC,GAAGC,cAAc,qBAE9C,GAAIH,EAAiB,CACnBA,EAAgBI,UAAUC,IAAI,oB,EAKlC,wBAAMC,GAAkB,CAGxB,mBAAMC,GAAa,CAEnB,MAAAC,GACE,GAAIP,KAAKQ,OAAS,SAAU,CAC1B,OACEC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,WACTD,EAAA,yBAAuBE,KAAK,KAAKC,KAAMZ,KAAKY,MAC1CH,EAAA,QAAMI,KAAK,OAAOC,KAAK,UACrBd,KAAKY,KAAOH,EAAA,QAAMI,KAAK,QAAQC,KAAK,UAAkBL,EAAA,QAAMI,KAAK,WAAWC,KAAK,aACnFL,EAAA,QAAMI,KAAK,kBAAkBC,KAAK,sBAGtCL,EAAA,OAAKC,MAAM,cACTD,EAAA,OAAKC,MAAM,QACRV,KAAKe,aACJN,EAAA,mCACEO,KAAI,KACJC,QAAQ,eACRC,MAAM,eACNC,SAAQ,KACRC,aAAa,QACbC,QAAS,IAAMrB,KAAKK,uBAGvBL,KAAKsB,eAAiBb,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,aAAaC,MAAM,aAAaC,SAAQ,KAACC,aAAa,MAC1HpB,KAAKuB,YACJd,EAAA,mCACEO,KAAI,KACJC,QAAQ,gBACRC,MAAM,UACNC,SAAQ,KACRC,aAAa,IACbC,QAAS,IAAMrB,KAAKM,oB,CASlC,GAAIN,KAAKQ,OAAS,UAAW,CAC3B,OACEC,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKC,MAAM,WACTD,EAAA,yBAAuBE,KAAK,KAAKD,MAAM,cAAcE,KAAMZ,KAAKY,MAC9DH,EAAA,QAAMI,KAAK,OAAOC,KAAK,UACrBd,KAAKY,KAAOH,EAAA,QAAMI,KAAK,QAAQC,KAAK,UAAkBL,EAAA,QAAMI,KAAK,WAAWC,KAAK,aACnFL,EAAA,QAAMI,KAAK,kBAAkBC,KAAK,sBAGrCd,KAAKwB,cACJf,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,mCACEO,KAAI,KACJC,QAAQ,eACRC,MAAM,eACNC,SAAQ,KACRC,aAAa,MACbC,QAAS,IAAMrB,KAAKK,wBAGxBI,EAAA,OAAKC,MAAM,OACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,aAAaC,MAAM,aAAaC,SAAQ,KAACC,aAAa,QAIzGpB,KAAKyB,cACJhB,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,mBAAmBC,MAAM,gBAAgBC,SAAQ,KAACC,aAAa,OAE/GX,EAAA,OAAKC,MAAM,OACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,aAAaC,MAAM,OAAOC,SAAQ,KAACC,aAAa,UAEhGX,EAAA,OAAKC,MAAM,SACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,WAAWC,MAAM,iBAAiBC,SAAQ,KAACC,aAAa,QAI3GpB,KAAK0B,gBACJjB,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,mCACEO,KAAI,KACJC,QAAQ,gBACRC,MAAM,UACNC,SAAQ,KACRC,aAAa,IACbC,QAAS,IAAMrB,KAAKM,oB","ignoreList":[]}
1	+ {"version":3,"names":["gbAvatarDropdownCss","GbAvatarDropdownStyle0","GbAvatarDropdown","componentDidLoad","slottedInitials","this","el","querySelector","classList","add","viewProfileClicked","logoutClicked","render","type","h","class","size","text","name","slot","showProfile","icon","iconSrc","label","shortcut","shortcutIcon","onClick","showDarkTheme","showLogOut","listGroupOne","listGroupTwo","listGroupThree"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n@import '../../global/spacing.css';\r\n@import '../../global/typography.css';\r\n\r\n.simple-dropdown {\r\n display: inline-flex;\r\n padding: 0px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0px;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.profile {\r\n display: flex;\r\n width: 15rem;\r\n padding: var(--spacing-1) var(--spacing-3);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n border-bottom: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n}\r\n\r\n.complex-dropdown {\r\n display: inline-flex;\r\n padding: 0px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0px;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid #E3E8EF;\r\n background: #FFFFFF;\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.menu-items {\r\n display: flex;\r\n width: 96.5%;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.list {\r\n padding: var(--spacing-1) var(--spacing-none);\r\n align-self: stretch;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two,\r\n.list-group-three{\r\n width: 100%;\r\n padding: var(--spacing-1) var(--spacing-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two{\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.one,\r\n.two,\r\n.three{\r\n width: 96.5%;\r\n}\r\n\r\n.label_group {\r\n display: flex;\r\n padding: 0px;\r\n align-items: center;\r\n gap: 12px;\r\n align-self: stretch;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n\r\n::slotted([slot='name']) {\r\n color: #4B5565;\r\n /* Text sm/Semibold /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n line-height: var(--Font-Line-height-T-sm, 20px); / 142.857% /\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n::slotted([slot='supporting_text']) {\r\n margin-top: -20px;\r\n color: #697586;\r\n / Text sm/Regular /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 20px); / 142.857% */\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}","import {Component, Element, Method, Prop, h} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-avatar-dropdown',\r\n styleUrl: 'gb-avatar-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n @Prop() type: 'simple' \| 'complex';\r\n @Prop() text: boolean = false;\r\n @Prop() showProfile: boolean;\r\n @Prop() showDarkTheme: boolean;\r\n @Prop() showLogOut: boolean;\r\n @Prop() listGroupOne: boolean;\r\n @Prop() listGroupTwo: boolean;\r\n @Prop() listGroupThree: boolean;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (slottedInitials) {\r\n slottedInitials.classList.add('text-md-semi-bold');\r\n }\r\n }\r\n\r\n @Method()\r\n async viewProfileClicked() {}\r\n\r\n @Method()\r\n async logoutClicked() {}\r\n\r\n render() {\r\n if (this.type === 'simple') {\r\n return (\r\n <div class=\"simple-dropdown\">\r\n <div class=\"profile\">\r\n <gb-avatar-label-group size=\"md\" text={this.text}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n <div class=\"menu-items\">\r\n <div class=\"list\">\r\n {this.showProfile && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"user_profile\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K + P\"\r\n onClick={() => this.viewProfileClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n {this.showDarkTheme && <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\"></gb-dropdown-items-with-shortcut>}\r\n {this.showLogOut && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"logout_button\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.logoutClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n if (this.type === 'complex') {\r\n return (\r\n <div class=\"complex-dropdown\">\r\n <div class=\"profile\">\r\n <gb-avatar-label-group size=\"md\" class=\"label_group\" text={this.text}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n {this.listGroupOne && (\r\n <div class=\"list-group-one\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"user_profile\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K+P\"\r\n onClick={() => this.viewProfileClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"two\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n {this.listGroupTwo && (\r\n <div class=\"list-group-two\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"configuration_02\" label=\"Configuration\" shortcut shortcutIcon=\"S\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"two\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"user_group\" label=\"Team\" shortcut shortcutIcon=\"K->T\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"three\">\r\n <gb-dropdown-items-with-shortcut icon iconSrc=\"user_add\" label=\"Invite Members\" shortcut shortcutIcon=\"I\"></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n {this.listGroupThree && (\r\n <div class=\"list-group-three\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"logout_button\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.logoutClicked()}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}"],"mappings":"6CAAA,MAAMA,EAAsB,qytEAC5B,MAAAC,EAAeD,E,MCMFE,EAAgB,M,uDAEH,M,wKASxB,gBAAAC,GACE,MAAMC,EAAkBC,KAAKC,GAAGC,cAAc,qBAE9C,GAAIH,EAAiB,CACnBA,EAAgBI,UAAUC,IAAI,oB,EAKlC,wBAAMC,GAAkB,CAGxB,mBAAMC,GAAa,CAEnB,MAAAC,GACE,GAAIP,KAAKQ,OAAS,SAAU,CAC1B,OACEC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,WACTD,EAAA,yBAAuBE,KAAK,KAAKC,KAAMZ,KAAKY,MAC1CH,EAAA,QAAMI,KAAK,OAAOC,KAAK,UACrBd,KAAKY,KAAOH,EAAA,QAAMI,KAAK,QAAQC,KAAK,UAAkBL,EAAA,QAAMI,KAAK,WAAWC,KAAK,aACnFL,EAAA,QAAMI,KAAK,kBAAkBC,KAAK,sBAGtCL,EAAA,OAAKC,MAAM,cACTD,EAAA,OAAKC,MAAM,QACRV,KAAKe,aACJN,EAAA,mCACEO,KAAI,KACJC,QAAQ,eACRC,MAAM,eACNC,SAAQ,KACRC,aAAa,QACbC,QAAS,IAAMrB,KAAKK,uBAGvBL,KAAKsB,eAAiBb,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,aAAaC,MAAM,aAAaC,SAAQ,KAACC,aAAa,MAC1HpB,KAAKuB,YACJd,EAAA,mCACEO,KAAI,KACJC,QAAQ,gBACRC,MAAM,UACNC,SAAQ,KACRC,aAAa,IACbC,QAAS,IAAMrB,KAAKM,oB,CASlC,GAAIN,KAAKQ,OAAS,UAAW,CAC3B,OACEC,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKC,MAAM,WACTD,EAAA,yBAAuBE,KAAK,KAAKD,MAAM,cAAcE,KAAMZ,KAAKY,MAC9DH,EAAA,QAAMI,KAAK,OAAOC,KAAK,UACrBd,KAAKY,KAAOH,EAAA,QAAMI,KAAK,QAAQC,KAAK,UAAkBL,EAAA,QAAMI,KAAK,WAAWC,KAAK,aACnFL,EAAA,QAAMI,KAAK,kBAAkBC,KAAK,sBAGrCd,KAAKwB,cACJf,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,mCACEO,KAAI,KACJC,QAAQ,eACRC,MAAM,eACNC,SAAQ,KACRC,aAAa,MACbC,QAAS,IAAMrB,KAAKK,wBAGxBI,EAAA,OAAKC,MAAM,OACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,aAAaC,MAAM,aAAaC,SAAQ,KAACC,aAAa,QAIzGpB,KAAKyB,cACJhB,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,mBAAmBC,MAAM,gBAAgBC,SAAQ,KAACC,aAAa,OAE/GX,EAAA,OAAKC,MAAM,OACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,aAAaC,MAAM,OAAOC,SAAQ,KAACC,aAAa,UAEhGX,EAAA,OAAKC,MAAM,SACTD,EAAA,mCAAiCO,KAAI,KAACC,QAAQ,WAAWC,MAAM,iBAAiBC,SAAQ,KAACC,aAAa,QAI3GpB,KAAK0B,gBACJjB,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,mCACEO,KAAI,KACJC,QAAQ,gBACRC,MAAM,UACNC,SAAQ,KACRC,aAAa,IACbC,QAAS,IAAMrB,KAAKM,oB","ignoreList":[]}