npm - globuswebcomponents - Versions diffs - 0.4.0 → 0.4.2 - Mend

globuswebcomponents 0.4.0 → 0.4.2

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 (294) hide show

package/dist/components/gb-input-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gb-input-field.js","mappings":"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","names":["GbInputField"],"sources":["src/components/gb-input-field/gb-input-field.css?tag=gb-input-field&encapsulation=shadow","src/components/gb-input-field/gb-input-field.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typo.css';\r\n\r\ndiv {\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);\r\n}\r\n\r\ndiv.sm {\r\n display: flex;\r\n width: 20rem;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n display: flex;\r\n width: 20rem;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input-with-label {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\r\n}\r\n\r\n.input-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: var(--spacing-Positive-spacing-2, 0.5rem);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-boarder-input, #CDD5DF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.sm .input-wrapper {\r\n height: var(--spacing-Positive-spacing-8, 2.5rem);\r\n padding: 0.25rem var(--spacing-3, 0.75rem);\r\n}\r\n\r\n.md .input-wrapper{\r\n height: 3rem;\r\n padding: 0.45rem var(--spacing-3, 0.75rem);\r\n}\r\n\r\n.leading_text .input-wrapper.sm,\r\n.leading_text .input-wrapper.md {\r\n flex-direction: row;\r\n}\r\n\r\n.count .input-wrapper.md,\r\n.count .input-wrapper.sm {\r\n padding: 0;\r\n flex-direction: row;\r\n}\r\n\r\n.input-wrapper:active {\r\n border-radius: 0.5rem;\r\n border: 1.3px solid var(--color-border-selected,#075DB2);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.disabled .input-wrapper {\r\n border-radius: 0.5rem;\r\n border: 1px solid var(--color-boarder-disabled, #E3E8EF);\r\n background: var(--color-background-disabled, #F6F8FA);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n gap: 0.5rem var(--spacing-Positive-spacing-2, 0.5rem);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.payment_input .content {\r\n flex-wrap: wrap;\r\n}\r\n\r\n.password .content{\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-None, 0rem) var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);\r\n flex-wrap: wrap;\r\n}\r\n\r\n.icon {\r\n position: relative;\r\n top: 3px;\r\n}\r\n\r\n.add-on {\r\n display: flex;\r\n align-items: center;\r\n align-self: stretch;\r\n}\r\n\r\n.dropdown {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-Positive-Spacing-1, 0.25rem);\r\n align-self: stretch;\r\n}\r\n\r\nselect {\r\n border: none; \r\n background-color: var(--color-background-card, #FFFFFF); \r\n color: #374151; /* Text color /\r\n box-shadow: none; / Remove default box shadow /\r\n outline: none;\r\n}\r\n\r\nselect:focus {\r\n border:none; / Maintain light border on focus /\r\n box-shadow: none; / Ensure no additional shadow appears on focus /\r\n}\r\n\r\n.text-input {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-Positive-spacing-2, 0.5rem);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.trailing_button .text-input {\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);\r\n}\r\n\r\n.count .text-input {\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) 0rem var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);\r\n border-radius: 0.5rem var(--Radius-rounded-none, 0rem) var(--Radius-rounded-none, 0rem) 0.5rem;\r\n border: 1px solid var(--color-boarder-input, #CDD5DF);\r\n margin-right: -2px;\r\n}\r\n\r\n.leading_dropdown .text-input {\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;\r\n}\r\n\r\n.leading_text .text-input {\r\n padding: 0.65rem 0.85rem;\r\n border-left: 1px solid var(--Gray-300, #D0D5DD);\r\n}\r\n\r\n.trailing_dropdown .dropdown {\r\n display: flex;\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;\r\n justify-content: space-between;\r\n}\r\n\r\n.count-action {\r\n display: flex;\r\n justify-content: space-between;\r\n padding-right: var(--spacing-1);\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n width: 100%;\r\n}\r\n\r\n.decrease-btn {\r\n display: flex;\r\n width: var(--spacing-Positive-spacing-8, 2.5rem);\r\n height: var(--spacing-Positive-spacing-8, 2.5rem);\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-none);\r\n border-right: 1px solid var(--color-boarder-input, #CDD5DF);\r\n}\r\n\r\n.payment-method {\r\n display: flex;\r\n width: 2.125rem;\r\n height: var(--spacing-Positive-spacing-6, 1.5rem);\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--Radius-rounded-xs, 0.25rem);\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.tags-box {\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n gap: 0.375rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.tags input {\r\n width: 160px;\r\n padding-right: 8px;\r\n}\r\n\r\ninput {\r\n border: none; \r\n background-color: var(--color-background-card, #FFFFFF); \r\n color: #374151; / Text color /\r\n box-shadow: none; / Remove default box shadow /\r\n outline: none; / Remove the blue outline on focus /\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);\r\n}\r\n\r\ninput:focus {\r\n border:none; / Maintain light border on focus /\r\n box-shadow: none; / Ensure no additional shadow appears on focus */\r\n}\r\n\r\n.trailing-btn {\r\n display: flex;\r\n width: var(--spacing-Positive-spacing-8, 2.5rem);\r\n height: var(--spacing-Positive-spacing-8, 2.5rem);\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.leading_dropdown .help-icon svg{\r\n left: -130%;\r\n}\r\n\r\n.trailing_dropdown .help-icon {\r\n margin-left: -5px;\r\n}\r\n\r\n.password_icon_leading .help-icon {\r\n margin-left: -15px;\r\n}\r\n\r\n.password_icon_leading .help-icon svg {\r\n padding-right: 5px;\r\n}\r\n\r\n.trailing_dropdown .help-icon svg {\r\n position: relative;\r\n left: 5%;\r\n top: 2px;\r\n}\r\n\r\n.leading_text .help-icon svg {\r\n left: 180%;\r\n}\r\n\r\n.tags .help-icon svg {\r\n left: -52%;\r\n}\r\n\r\n.help-svg {\r\n position: relative;\r\n left: -6%;\r\n margin-right: -8px;\r\n}\r\n\r\n.help-icon svg{\r\n position: relative;\r\n left: 13%;\r\n top: 3px;\r\n}","import { Component, Prop, getAssetPath, h } from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels'\r\n\r\n@Component({\r\n tag: 'gb-input-field',\r\n styleUrl: 'gb-input-field.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbInputField {\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: 'default' \| 'icon_leading' \| 'leading_dropdown' \| 'trailing_dropdown' \| 'leading_text'\|'payment_input'\| 'tags' \| 'trailing_button' \|'password' \| 'password_icon_leading' \| 'count';\r\n @Prop() destructive: boolean = false;\r\n @Prop() state: 'placeholder' \| 'filled' \| 'active' \| 'disabled' ;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() showHintText: boolean = false;\r\n @Prop() hintText: string = '';\r\n @Prop() showPlaceholder: boolean = false;\r\n @Prop() placeholderText: string = ''; \r\n @Prop() showHelpIcon: boolean = false;\r\n @Prop() showValidation: boolean = false;\r\n @Prop() iconSwap?: string;\r\n @Prop() showCloseButton?: boolean = false;\r\n\r\n render() {\r\n const iconSwap = this.iconSwap ? getAssetPath(`assets/${this.iconSwap}.svg`) : '';\r\n\r\n const classes = {\r\n [this.size]: true,\r\n [this.type]: true,\r\n destructive: this.destructive,\r\n disabled: this.state === 'disabled',\r\n }\r\n\r\n return (\r\n <div class={classes}>\r\n <div class=\"input-with-label\">\r\n {this.showLabel && this.label ? <label htmlFor=\"input\">{this.label}</label> : null}\r\n {this.type === 'default' && (\r\n <div class=\"input-wrapper\">\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'icon_leading' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"content\">\r\n <div class=\"icon\">\r\n {this.iconSwap ? (\r\n <img src={iconSwap} alt=\"Icon\" />\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M5.83342 7.08334L8.2851 8.53286C9.71443 9.37794 10.2857 9.37794 11.7151 8.53286L14.1668 7.08334M7.58243 2.94713C9.1995 2.9065 10.8007 2.9065 12.4177 2.94713C15.0415 3.01305 16.3534 3.04602 17.296 3.99221C18.2386 4.9384 18.2658 6.21571 18.3203 8.77032C18.3378 9.59172 18.3378 10.4083 18.3203 11.2297C18.2658 13.7843 18.2386 15.0616 17.296 16.0078C16.3533 16.954 15.0415 16.9869 12.4177 17.0529C10.8007 17.0935 9.19951 17.0935 7.58244 17.0529C4.95869 16.9869 3.64682 16.954 2.70421 16.0078C1.76161 15.0616 1.73437 13.7843 1.67989 11.2297C1.66237 10.4083 1.66237 9.59171 1.67989 8.77031C1.73436 6.21569 1.7616 4.93839 2.70421 3.9922C3.64682 3.046 4.95869 3.01304 7.58243 2.94713Z\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''} type=\"email\"></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n {this.showCloseButton && <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/cancel-button.svg\"></gb-button>}\r\n </div>\r\n )}\r\n {this.type === 'leading_dropdown' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"dropdown\">\r\n <div class=\"country-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M-0.000488281 12.0002C-0.000488281 17.1599 3.25601 21.5583 7.82562 23.2539V0.746674C3.25601 2.44214 -0.000488281 6.84071 -0.000488281 12.0002Z\"\r\n fill=\"#6DA544\"\r\n />\r\n <path d=\"M23.9999 12.0002C23.9999 6.8407 20.7434 2.44214 16.1738 0.746674V23.2539C20.7434 21.5583 23.9999 17.1599 23.9999 12.0002Z\" fill=\"#6DA544\" />\r\n </svg>\r\n </div>\r\n <select class=\"text-md-regular\">\r\n <option value=\"option 1\" selected>\r\n +234\r\n </option>\r\n <slot name=\"country-option\"></slot>\r\n </select>\r\n </div>\r\n <div class=\"text-input\">\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'trailing_dropdown' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"content\">\r\n <div class=\"text-input\">\r\n <p class=\"text-md-regular\">$</p>\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"dropdown\">\r\n <select class=\"text-md-regular\">\r\n <option value=\"option 1\" selected>\r\n USD\r\n </option>\r\n <slot name=\"option\"></slot>\r\n </select>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'leading_text' && (\r\n <div class={`input-wrapper ${this.size}`}>\r\n <div class=\"add-on\">\r\n <p>http://</p>\r\n </div>\r\n <div class=\"text-input\">\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'payment_input' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"content\">\r\n <div class=\"payment-method\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#ED0006\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#F9A000\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n fill=\"#FF5E00\"\r\n />\r\n </svg>\r\n </div>\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'tags' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"content\">\r\n <div class=\"tags-box\">\r\n <slot name=\"tag-option\"></slot>\r\n </div>\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'trailing_button' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"text-input\">\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"trailing-btn\">\r\n <gb-button size=\"md\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/copy.svg\"></gb-button>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'password' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"content\">\r\n <div class=\"text-input\">\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''} type=\"password\"></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"dropdown\">\r\n <gb-password-button></gb-password-button>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'password_icon_leading' && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"content\">\r\n {this.iconSwap ? (\r\n <img src={iconSwap} alt=\"Icon\" />\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5024 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5024 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5024 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5024 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58257L13.7347 6.83336L13.7003 7.58257ZM13.7003 18.2507L13.7347 19L13.7003 18.2507ZM16.4435 15.7039L15.7002 15.6039L16.4435 15.7039ZM6.29973 7.58257L6.33417 8.33178L6.29973 7.58257ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2507L6.33417 17.5015L6.29973 18.2507ZM3.55652 15.7039L4.29981 15.6039L3.55652 15.7039ZM5.50001 7.49999C5.50001 7.9142 5.8358 8.24999 6.25001 8.24999C6.66422 8.24999 7.00001 7.9142 7.00001 7.49999H5.50001ZM13 7.49999C13 7.9142 13.3358 8.24999 13.75 8.24999C14.1642 8.24999 14.5 7.9142 14.5 7.49999H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8141 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2294C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.24999C11.3095 8.24999 12.4972 8.27805 13.6659 8.33178L13.7347 6.83336C12.5424 6.77855 11.3317 6.74999 10 6.74999V8.24999ZM6.33417 8.33178C7.50287 8.27805 8.69057 8.24999 10 8.24999V6.74999C8.66829 6.74999 7.45761 6.77855 6.26528 6.83336L6.33417 8.33178ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2294L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8141 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29065 15.5122 6.91507 13.7347 6.83336L13.6659 8.33178C14.6943 8.37906 15.5595 9.18436 15.7002 10.2294L17.1868 10.0293ZM13.7347 19C15.5122 18.9182 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83336C4.48781 6.91507 3.04732 8.29065 2.81323 10.0293L4.29981 10.2294C4.44052 9.18436 5.30576 8.37906 6.33417 8.33178L6.26528 6.83336ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9182 6.26528 19L6.33417 17.5015ZM7.00001 7.49999V5.41666H5.50001V7.49999H7.00001ZM13 5.41666V7.49999H14.5V5.41666H13ZM10 2.41666C11.6569 2.41666 13 3.7598 13 5.41666H14.5C14.5 2.93138 12.4853 0.916656 10 0.916656V2.41666ZM7.00001 5.41666C7.00001 3.7598 8.34316 2.41666 10 2.41666V0.916656C7.51473 0.916656 5.50001 2.93138 5.50001 5.41666H7.00001Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n )}\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n <gb-password-button></gb-password-button>\r\n </div>\r\n )}\r\n {this.type === 'count' && (\r\n <div class={`input-wrapper ${this.size}`}>\r\n <div class=\"text-input\">\r\n <input class=\"text-md-regular\" placeholder={this.showPlaceholder ? this.placeholderText : ''}></input>\r\n {this.showHelpIcon && (\r\n <svg class=\"help-svg\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n <div class=\"count-action\">\r\n {this.showCloseButton && (\r\n <gb-button class=\"decrease-btn\" size=\"md\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/minus_sign.svg\"></gb-button>\r\n )}\r\n <gb-button class=\"increase-btn\" size=\"md\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/plus_sign.svg\"></gb-button>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n {this.showHintText && <div class=\"text-sm-regular hint-text\">{this.hintText}</div>}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"gb-input-field.js","mappings":"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","names":["GbInputField"],"sources":["src/components/gb-input-field/gb-input-field.css?tag=gb-input-field&encapsulation=shadow","src/components/gb-input-field/gb-input-field.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\ndiv {\r\n font-family: var(--font-family-body);\r\n font-style: normal;\r\n letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);\r\n}\r\n\r\ndiv.sm {\r\n display: flex;\r\n width: 20rem;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n display: flex;\r\n width: 20rem;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input-with-label {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\r\n}\r\n\r\n.input-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.sm .input-wrapper {\r\n height: var(--spacing-Positive-spacing-8, 2.5rem);\r\n padding: 0.25rem var(--spacing-3, 0.75rem);\r\n}\r\n\r\n.md .input-wrapper{\r\n height: 3rem;\r\n padding: 0.45rem var(--spacing-3, 0.75rem);\r\n}\r\n\r\n.leading_text .input-wrapper.sm,\r\n.leading_text .input-wrapper.md {\r\n flex-direction: row;\r\n}\r\n\r\n.count .input-wrapper.md,\r\n.count .input-wrapper.sm {\r\n padding: 0;\r\n flex-direction: row;\r\n}\r\n\r\n.input-wrapper:focus-within,\r\n.leading_text:focus-within .text-input {\r\n border: 1.3px solid var(--color-border-selected,#075DB2);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n gap: 0.5rem var(--spacing-2);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.password .content{\r\n padding: var(--spacing-2) var(--spacing-none) var(--spacing-2) var(--spacing-3);\r\n flex-wrap: wrap;\r\n}\r\n\r\n.icon {\r\n position: relative;\r\n top: 3px;\r\n}\r\n\r\n.leading_text{\r\n display: flex;\r\n}\r\n\r\n.leading_text_wrapper{\r\n display: flex;\r\n width: fit-content;\r\n border-radius: var(--rounded-sm);\r\n}\r\n\r\n.add-on {\r\n display: flex;\r\n align-items: center;\r\n align-self: stretch;\r\n padding: var(--spacing-2) var(--spacing-3);\r\n border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-right: none;\r\n}\r\n\r\n.dropdown {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n align-self: stretch;\r\n margin-top: 0.1rem;\r\n}\r\n\r\nselect {\r\n border: none; \r\n background-color: var(--color-background-card, #FFFFFF); \r\n color: #374151; /* Text color /\r\n box-shadow: none; / Remove default box shadow /\r\n outline: none;\r\n}\r\n\r\nselect:focus {\r\n border:none; / Maintain light border on focus /\r\n box-shadow: none; / Ensure no additional shadow appears on focus /\r\n}\r\n\r\n.text-input {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-Positive-spacing-2, 0.5rem);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n}\r\n\r\n.trailing_button .text-input {\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);\r\n}\r\n\r\n.count .text-input {\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) 0rem var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);\r\n border-radius: 0.5rem var(--Radius-rounded-none, 0rem) var(--Radius-rounded-none, 0rem) 0.5rem;\r\n border: 1px solid var(--color-boarder-input, #CDD5DF);\r\n}\r\n\r\n.leading_dropdown .text-input {\r\n padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;\r\n}\r\n\r\n.leading_text .text-input {\r\n width: 14.4rem;\r\n padding: 0.625rem 0.875rem;\r\n border: 1px solid var(--gray-300, #D0D5DD);\r\n border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;\r\n}\r\n\r\n.trailing_dropdown .dropdown {\r\n display: flex;\r\n padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0;\r\n justify-content: space-between;\r\n}\r\n\r\n.count-action {\r\n display: flex;\r\n justify-content: space-between;\r\n padding-right: var(--spacing-1);\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.decrease-btn {\r\n display: flex;\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-none);\r\n border-right: 1px solid var(--color-border-input, #CDD5DF);\r\n}\r\n\r\n.payment-method {\r\n display: flex;\r\n width: 2.125rem;\r\n height: var(--spacing-6);\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.tags-box {\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n gap: 0.375rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.tags input {\r\n width: 160px;\r\n padding-right: 8px;\r\n}\r\n\r\ninput {\r\n border: none; \r\n background-color: var(--color-background-card, #FFFFFF); \r\n color: var(--color-text, #4B5565);\r\n box-shadow: none; / Remove default box shadow /\r\n outline: none;\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);\r\n width: 100%;\r\n}\r\n\r\n.trailing-btn {\r\n display: flex;\r\n width: var(--spacing-Positive-spacing-8, 2.5rem);\r\n height: var(--spacing-Positive-spacing-8, 2.5rem);\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.trailing_dropdown .help-icon {\r\n margin-left: -5px;\r\n}\r\n\r\n.trailing_dropdown .help-icon svg {\r\n position: relative;\r\n left: 5%;\r\n top: 2px;\r\n}\r\n\r\n.tags .help-icon svg {\r\n left: -52%;\r\n}\r\n\r\n.help-icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.help-svg {\r\n margin-right: 0.4rem;\r\n}\r\n\r\nlabel{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.hint_text{\r\n color: var(--color-text-subtle, #697586); \r\n}\r\n\r\n/ Destructive State Styles /\r\n.help_icon.destructive{\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.hint_text.destructive{\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.input-wrapper.destructive{\r\n border: 1px solid var(--color-border-danger, #B51726);\r\n}\r\n\r\n.leading_text.destructive .text-input {\r\n border: 1.5px solid var(--color-border-danger, #B51726);\r\n}\r\n\r\n/ Disabled Styles /\r\n.input-wrapper.disabled,\r\n.leading_text.disabled .text-input,\r\n.input-wrapper.default.disabled {\r\n border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n background: var(--color-background-disabled, #F6F8FA);\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n}\r\n\r\n.input-wrapper.disabled input,\r\n.leading_text.disabled input{\r\n background: var(--color-background-disabled, #F6F8FA);\r\n}\r\n\r\n.hint_text.disabled{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.icon_leading_svg.disabled path{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.leading_dropdown.disabled select,\r\n.trailing_dropdown.disabled select{\r\n background: var(--color-background-disabled, #F6F8FA);\r\n color: var(--color-text-subtle, #697586);\r\n}","import { Component, Prop, getAssetPath, h, Fragment, State, Event, EventEmitter } from '@stencil/core'\r\nimport { GeneralSizes, InputFieldTypes, StateEnum } from '../../models/reusableModels'\r\n\r\n@Component({\r\n tag: 'gb-input-field',\r\n styleUrl: 'gb-input-field.css',\r\n shadow: true,\r\n})\r\nexport class GbInputField {\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: InputFieldTypes;\r\n @Prop() destructive: boolean = false;\r\n @Prop() state: 'placeholder' \| 'filled' \| 'active' \| 'disabled';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() showHintText: boolean = false;\r\n @Prop() hintText: string = '';\r\n @Prop() showPlaceholder: boolean = false;\r\n @Prop() placeholderText: string = '';\r\n @Prop() showHelpIcon: boolean = false;\r\n @Prop() showValidation: boolean = false;\r\n @Prop() iconSwap?: string;\r\n @Prop() showCloseButton?: boolean = false;\r\n @State() inputValue: string = '';\r\n @State() tags: string[] = [];\r\n @State() isPasswordVisible: boolean = false;\r\n @Event() tagAdded: EventEmitter<string>;\r\n @Event() valueChanged: EventEmitter<string>;\r\n\r\n / Function to handle and emit the inputted values /\r\n handleInput(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n this.inputValue = target.value;\r\n this.valueChanged.emit(this.inputValue);\r\n }\r\n\r\n / Function to handle and emit the inputted values */\r\n togglePasswordVisibility() {\r\n this.isPasswordVisible = !this.isPasswordVisible;\r\n }\r\n\r\n render() {\r\n const iconSwap = this.iconSwap ? getAssetPath(`assets/${this.iconSwap}.svg`) : '';\r\n\r\n const classes = {\r\n [this.size]: true,\r\n [this.type]: true,\r\n destructive: this.destructive,\r\n disabled: this.state === 'disabled',\r\n };\r\n\r\n return (\r\n <div class={classes}>\r\n <div class=\"input-with-label\">\r\n {this.showLabel && (\r\n <label htmlFor=\"input\" class=\"text-sm-medium\">\r\n {this.label}\r\n </label>\r\n )}\r\n {this.type === 'default' && (\r\n <div class={`input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <input\r\n class={`text-md-regular`}\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : this.destructive && this.state !== 'disabled' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n this.destructive &&\r\n this.state === 'disabled' && (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )\r\n )}\r\n </>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'icon_leading' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"content\">\r\n <div class=\"icon\">\r\n {this.iconSwap ? (\r\n <img src={iconSwap} alt=\"Icon\" />\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon_leading_svg ${this.state}`}>\r\n <path\r\n d=\"M5.83342 7.08334L8.2851 8.53286C9.71443 9.37794 10.2857 9.37794 11.7151 8.53286L14.1668 7.08334M7.58243 2.94713C9.1995 2.9065 10.8007 2.9065 12.4177 2.94713C15.0415 3.01305 16.3534 3.04602 17.296 3.99221C18.2386 4.9384 18.2658 6.21571 18.3203 8.77032C18.3378 9.59172 18.3378 10.4083 18.3203 11.2297C18.2658 13.7843 18.2386 15.0616 17.296 16.0078C16.3533 16.954 15.0415 16.9869 12.4177 17.0529C10.8007 17.0935 9.19951 17.0935 7.58244 17.0529C4.95869 16.9869 3.64682 16.954 2.70421 16.0078C1.76161 15.0616 1.73437 13.7843 1.67989 11.2297C1.66237 10.4083 1.66237 9.59171 1.67989 8.77031C1.73436 6.21569 1.7616 4.93839 2.70421 3.9922C3.64682 3.046 4.95869 3.01304 7.58243 2.94713Z\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n <input\r\n class={`text-md-regular`}\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n type=\"email\"\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n {this.showCloseButton && !this.destructive && (\r\n <gb-button\r\n size=\"sm\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/cancel-button.svg\"\r\n ></gb-button>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'leading_dropdown' && (\r\n <div class={`input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"dropdown\">\r\n <div class=\"country-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M-0.000488281 12.0002C-0.000488281 17.1599 3.25601 21.5583 7.82562 23.2539V0.746674C3.25601 2.44214 -0.000488281 6.84071 -0.000488281 12.0002Z\"\r\n fill=\"#6DA544\"\r\n />\r\n <path d=\"M23.9999 12.0002C23.9999 6.8407 20.7434 2.44214 16.1738 0.746674V23.2539C20.7434 21.5583 23.9999 17.1599 23.9999 12.0002Z\" fill=\"#6DA544\" />\r\n </svg>\r\n </div>\r\n <select class=\"text-md-regular\">\r\n <option value=\"option 1\" selected>\r\n +234\r\n </option>\r\n <slot name=\"country-option\"></slot>\r\n </select>\r\n </div>\r\n <div class=\"text-input\">\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'trailing_dropdown' && (\r\n <div class={`input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"content\">\r\n <div class=\"text-input\">\r\n <p class=\"text-md-regular\">$</p>\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n <div class=\"dropdown\">\r\n <select class=\"text-md-regular\">\r\n <option value=\"option 1\" selected>\r\n USD\r\n </option>\r\n <slot name=\"option\"></slot>\r\n </select>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'leading_text' && (\r\n <div class=\"leading_text_wrapper\">\r\n <div class=\"add-on\">\r\n <p class=\"text-md-regular\">http://</p>\r\n </div>\r\n <div class={`leading_text_input_wrapper ${this.state === 'disabled' ? 'disabled' : ''} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"text-input\">\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'payment_input' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"content\">\r\n <div class=\"payment-method\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#ED0006\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#F9A000\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n fill=\"#FF5E00\"\r\n />\r\n </svg>\r\n </div>\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'tags' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"content\">\r\n <div class=\"tags-box\">\r\n <slot name=\"tag-option\"></slot>\r\n </div>\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <div class=\"help-icon\">\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'trailing_button' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"text-input\">\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n <div class=\"trailing-btn\">\r\n <gb-button\r\n size=\"md\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/copy.svg\"\r\n ></gb-button>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'password' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"content\">\r\n <div class=\"text-input\">\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n type={this.isPasswordVisible ? 'text' : 'password'}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n <div class=\"dropdown\">\r\n <gb-password-button state={this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default} onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'password_icon_leading' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class=\"content\">\r\n {this.iconSwap ? (\r\n <img src={iconSwap} alt=\"Icon\" />\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5024 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5024 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5024 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5024 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58257L13.7347 6.83336L13.7003 7.58257ZM13.7003 18.2507L13.7347 19L13.7003 18.2507ZM16.4435 15.7039L15.7002 15.6039L16.4435 15.7039ZM6.29973 7.58257L6.33417 8.33178L6.29973 7.58257ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2507L6.33417 17.5015L6.29973 18.2507ZM3.55652 15.7039L4.29981 15.6039L3.55652 15.7039ZM5.50001 7.49999C5.50001 7.9142 5.8358 8.24999 6.25001 8.24999C6.66422 8.24999 7.00001 7.9142 7.00001 7.49999H5.50001ZM13 7.49999C13 7.9142 13.3358 8.24999 13.75 8.24999C14.1642 8.24999 14.5 7.9142 14.5 7.49999H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8141 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2294C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.24999C11.3095 8.24999 12.4972 8.27805 13.6659 8.33178L13.7347 6.83336C12.5424 6.77855 11.3317 6.74999 10 6.74999V8.24999ZM6.33417 8.33178C7.50287 8.27805 8.69057 8.24999 10 8.24999V6.74999C8.66829 6.74999 7.45761 6.77855 6.26528 6.83336L6.33417 8.33178ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2294L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8141 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29065 15.5122 6.91507 13.7347 6.83336L13.6659 8.33178C14.6943 8.37906 15.5595 9.18436 15.7002 10.2294L17.1868 10.0293ZM13.7347 19C15.5122 18.9182 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83336C4.48781 6.91507 3.04732 8.29065 2.81323 10.0293L4.29981 10.2294C4.44052 9.18436 5.30576 8.37906 6.33417 8.33178L6.26528 6.83336ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9182 6.26528 19L6.33417 17.5015ZM7.00001 7.49999V5.41666H5.50001V7.49999H7.00001ZM13 5.41666V7.49999H14.5V5.41666H13ZM10 2.41666C11.6569 2.41666 13 3.7598 13 5.41666H14.5C14.5 2.93138 12.4853 0.916656 10 0.916656V2.41666ZM7.00001 5.41666C7.00001 3.7598 8.34316 2.41666 10 2.41666V0.916656C7.51473 0.916656 5.50001 2.93138 5.50001 5.41666H7.00001Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n )}\r\n <input\r\n class=\"text-md-regular\"\r\n type={this.isPasswordVisible ? 'text' : 'password'}\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n </div>\r\n {this.showValidation && <span></span>}\r\n {this.showHelpIcon && (\r\n <>\r\n {!this.destructive ? (\r\n <div class=\"help-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n <gb-password-button state={this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default} onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n </div>\r\n )}\r\n {this.type === 'count' && (\r\n <div class={`input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''} ${this.size}`}>\r\n <div class=\"text-input\">\r\n <input\r\n class=\"text-md-regular\"\r\n placeholder={this.showPlaceholder ? this.placeholderText : ''}\r\n value={this.inputValue}\r\n onInput={event => this.handleInput(event)}\r\n ></input>\r\n {this.showHelpIcon && (\r\n <svg class=\"help-svg\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n <div class=\"count-action\">\r\n {this.showCloseButton && (\r\n <gb-button class=\"decrease-btn\" size=\"md\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/minus_sign.svg\"></gb-button>\r\n )}\r\n <gb-button class=\"increase-btn\" size=\"md\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/plus_sign.svg\"></gb-button>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n {this.showHintText && <p class={`text-sm-regular hint_text ${this.state} ${this.destructive ? 'destructive' : ''}`}>{this.hintText}</p>}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/gb-megainput-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbMegaInputField, d as defineCustomElement$1 } from './p-c9d9fcb1.js';
+import { G as GbMegaInputField, d as defineCustomElement$1 } from './p-03933e89.js';
 const GbMegainputField = GbMegaInputField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-notification-content.js CHANGED Viewed

@@ -15,7 +15,7 @@ const GbNotificationContent$1 = /*@__PURE__*/ proxyCustomElement(class GbNotific
     }
     render() {
         const iconSrc = getAssetPath(`assets/${this.icon}.svg`);
-        return (h("div", { key: '5348bb1a03fe940cdb90a7639ddf066ca74535b8', class: "notification-container" }, h("div", { key: 'b48ffd4c6ef381399b07ff704a72d9b203af0dca', class: "notification-title" }, this.icon && (h("div", { key: 'd127fa1e7b0bcc35e756e9a3ad137d9edd6986dc', class: "icon" }, h("img", { key: '343cb90221ca63db937f30b172fba5f2ba1edeb0', src: iconSrc, alt: "Icon" }))), h("label", { key: 'f4d1710a0d3eb9b87759e4e540ce72b7de60af0b' }, this.label), h("span", { key: 'deb6d2a5be66fe96fd9bbe8979eae0f212607359', class: "time" }, this.time)), h("div", { key: '9dfbe07da1f16903d81a76951e667067b0cbfcfe', class: "supporting-text" }, this.supportingText)));
+        return (h("div", { key: '6e3ee602b4220d1c05513fd097ec9cb8f7f29a49', class: "notification-container" }, h("div", { key: '61b9a275e944588f8f8c8d7b7da2659cc1580f06', class: "notification-title" }, this.icon && (h("div", { key: '749e970947406d9df1f1991a5a86c230b759864d', class: "icon" }, h("img", { key: 'e75537fe5b66b55670f02beb61fac0577ab31212', src: iconSrc, alt: "Icon" }))), h("label", { key: '8df7096217206e797201bc1f45961dc14f3fc915' }, this.label), h("span", { key: '76d07d0c119e2945cba4f364552686d846f02378', class: "time" }, this.time)), h("div", { key: '8499a7cf3c9c2514919d6d64b57639322b129acb', class: "supporting-text" }, this.supportingText)));
     }
     static get style() { return GbNotificationContentStyle0; }
 }, [1, "gb-notification-content", {

package/dist/components/gb-notification-panel.js CHANGED Viewed

@@ -33,7 +33,7 @@ const GbNotificationPanel$1 = /*@__PURE__*/ proxyCustomElement(class GbNotificat
         notification.remove();
     }
     render() {
-        return (h("div", { key: '7c7bba327b023712b0df7fb38dc9eb3fb3bc8ada', class: "notification-panel" }, this.state === 'empty' && this.notifications.length === 0 && (h("div", { key: '249b345940ecf19717245a399e19a9c313167b5f' }, h("div", { key: '266c094b411d703aed3fee38a2c87d608e834b7f', class: "empty-state" }, h("img", { key: '9f4e638b5872762efb12b1c7af0e2ea6a6de693d', src: "./build/assets/panel_bell.svg", alt: "No notification" }), h("h3", { key: 'f82bf47185a855923b09ff790e810a5be007b986' }, "No notification"), h("p", { key: 'a4a8cf3e4396dde8de237540730e94e818b7ad8c' }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.")), h("test-button", { key: '7d71ed7cce3aeafd22eb30619ed5d3e41c60887e', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read"))), this.state === 'notification_dropdown' && (h("div", { key: 'f6838d815419f57953cfe84fb7c5cec1cb44b85d', class: "notification-dropdown" }, h("slot", { key: '41ea22c267faa83b844ae06101676b36083d0cfd' }), h("test-button", { key: 'e9fc8b70118843d548d209962194621adbfb6e36', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read")))));
+        return (h("div", { key: '0e02ab89477bef8e33203591f0eef4933d8ee49b', class: "notification-panel" }, this.state === 'empty' && this.notifications.length === 0 && (h("div", { key: '2fc98b149a8aa50eaa86a4fa83d389d0a631b6fb' }, h("div", { key: '89330e56a8770aa541f8216e3ead8ea9b89ec9f1', class: "empty-state" }, h("img", { key: '1a93360466cfa19a7e1d8ef08d07894bbda6f7a8', src: "./build/assets/panel_bell.svg", alt: "No notification" }), h("h3", { key: '3c159ba17083834a91e422e619bdebd0341395ac' }, "No notification"), h("p", { key: '46c7f459eb6ca58032a7eb9918d4c1f8afa3ac1e' }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.")), h("test-button", { key: '17222ad62b3bf5c328bb949bce38321f7e8a0551', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read"))), this.state === 'notification_dropdown' && (h("div", { key: '642911a27ad0a8082e16c949f5210e93ff2dd598', class: "notification-dropdown" }, h("slot", { key: '826fbbf7f82865492104a76e24781b3a0ee5c53b' }), h("test-button", { key: 'dd0c48fe1141e1b84e188fd6628950176e2f52f8', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read")))));
     }
     static get style() { return GbNotificationPanelStyle0; }
 }, [1, "gb-notification-panel", {

package/dist/components/gb-pagination-button-group-base.js CHANGED Viewed

@@ -19,7 +19,7 @@ const GbPaginationButtonGroupBase$1 = /*@__PURE__*/ proxyCustomElement(class GbP
         }
     }
     render() {
-        return (h("div", { key: '9f07970d436f01afe10418c7e239394ff3adc637', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: '228170e6c18937e73f4292b495476e1f00b0fd62' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'afbd17657532b5b7c4139a15f0c8955d46bb5eed', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd85b848e7f6a30510d3da71b8de35fb6ed68825e', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: 'b42da4347745beff71b4ffbd9d16974c4d8af351' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: 'f42a427748ddf2e614e21cfed0784a41d8e78ecf' }), this.iconTrailing && (h("svg", { key: '69b0505a4dbe553298dd819410884e4b7b344328', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '1660ebbd347384e975f4d84ab144e970af63f27e', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h("div", { key: 'bd658d0c2c7d5fec8e5f53c297128fbf6db7e35c', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: '46ac516d11c2991f4cb8688f49af7a0993eb6f14' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: '299dff7353d41e50665227113f24ecb190f92341', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '4c81ad3a2c2dd7e4570aa535cec10bca921efb0d', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: 'f3c1736e92e01a3d160e13bfa3d03b13602d279a' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: '23e9794b3b43fd20cea33f42453eb00abae58711' }), this.iconTrailing && (h("svg", { key: 'aba44f3fd7cf7b6ca88052ce9350fecff4e241b6', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0d34fdc541153964b86708b6ec134d4f9d35e26f', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     get el() { return this; }
     static get style() { return GbPaginationButtonGroupBaseStyle0; }

package/dist/components/gb-pagination-dot-indicator.js CHANGED Viewed

@@ -12,7 +12,7 @@ const GbPaginationDotIndicator$1 = /*@__PURE__*/ proxyCustomElement(class GbPagi
         this.size = undefined;
     }
     render() {
-        return h("div", { key: '7c796daa95e0222e5a5bd702cf00e6f4049b582b', class: `dot_indicator_div
+        return h("div", { key: '149ef69015821f44c2df18265a202694896e97ef', class: `dot_indicator_div
       ${this.type} ${this.current ? 'current' : ''}
       ${this.size}` });
     }

package/dist/components/gb-pagination-number-base.js CHANGED Viewed

@@ -17,7 +17,7 @@ const GbPaginationNumberBase$1 = /*@__PURE__*/ proxyCustomElement(class GbPagina
         }
     }
     render() {
-        return (h("div", { key: 'c20eded58ebaec5ece4d041ea00a51de39947397', class: `page_number_base ${this.shape}` }, h("slot", { key: 'd2b2d9aea9fb9d8be66b387f3d127eefee7746a6', name: "page_number" })));
+        return (h("div", { key: '5a9e6b20e583927ddf029a75ff8ff35fa515023b', class: `page_number_base ${this.shape}` }, h("slot", { key: 'b97979e6e3a226afb66fd944e773761b1b2dfbff', name: "page_number" })));
     }
     get el() { return this; }
     static get style() { return GbPaginationNumberBaseStyle0; }

package/dist/components/gb-pagination.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-3d8f80e9.js';
-import { d as defineCustomElement$2 } from './p-fc8afe63.js';
+import { d as defineCustomElement$2 } from './p-e832e7d0.js';
 const gbPaginationCss = ":root{--spacing-none:0rem;--spacing-half:0.125rem;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:2rem;--spacing-8:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-32:8rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-negative-half:-0.125rem;--spacing-negative-1:-0.25rem;--spacing-negative-2:-0.5rem;--spacing-negative-3:-0.75rem;--spacing-negative-4:-1rem;--spacing-negative-5:-1.25rem;--spacing-negative-6:-1.5rem;--spacing-negative-7:-2rem;--rounded-none:0rem;--rounded-xs:0.25rem;--rounded-sm:0.5rem;--rounded-md:0.75rem;--rounded-lg:1rem;--rounded-xl:1.5rem;--rounded-2xl:2rem;--rounded-full:62.438rem}@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');:root{--font-size-d-2xl:4.5rem;--font-size-d-xl:3.75rem;--font-size-d-lg:3rem;--font-size-d-md:2.25rem;--font-size-d-sm:1.875rem;--font-size-d-xs:1.5rem;--font-size-t-xl:1.25rem;--font-size-t-lg:1.125rem;--font-size-t-md:1rem;--font-size-t-sm:0.875rem;--font-size-t-xs:0.75rem;--font-size-t-xxs:0.625rem;--font-weight-bold:700;--font-weight-semi-bold:600;--font-weight-medium:500;--font-weight-regular:400;--font-line-height-d-2xl:5rem;--font-line-height-d-xl:4.25rem;--font-line-height-d-lg:3.75rem;--font-line-height-d-md:2.75rem;--font-line-height-d-sm:2.375rem;--font-line-height-d-xs:2rem;--font-line-height-t-xl:1.875rem;--font-line-height-t-lg:1.688rem;--font-line-height-t-md:1.5rem;--font-line-height-t-sm:1.313rem;--font-line-height-t-xs:1.125rem;--font-line-height-t-xxs:0.938rem;--font-letter-spacing-d-2xl:-0.09rem;--font-letter-spacing-d-xl:-0.075rem;--font-letter-spacing-d-lg:-0.075rem;--font-letter-spacing-d-md:-0.045rem;--font-letter-spacing-d-sm:0;--font-letter-spacing-d-xs:0;--font-letter-spacing-d-xxs:0;--font-family-title:'Sora';--font-family-body:'Sora'}@media (max-width: 1199px){:root{--font-size-d-2xl:3.75rem;--font-size-d-xl:3.5rem;--font-size-d-lg:2.75rem;--font-size-d-md:2.25rem;--font-size-d-sm:1.875rem;--font-size-d-xs:1.5rem;--font-line-height-d-2xl:4.25rem;--font-line-height-d-xl:3.75rem;--font-line-height-d-lg:2.4375rem;--font-line-height-d-md:2.75rem;--font-line-height-d-sm:2.375rem;--font-line-height-d-xs:2rem;--font-letter-spacing-2xl:-0.075rem;--font-letter-spacing-xl:-0.065rem;--font-letter-spacing-lg:-0.045rem;--font-letter-spacing-md:-0.045rem;--font-letter-spacing-sm:0rem;--font-letter-spacing-xs:0rem}}@media (max-width: 743px){:root{--font-size-d-2xl:3rem;--font-size-d-xl:2.5rem;--font-size-d-lg:2rem;--font-size-d-md:1.75rem;--font-size-d-sm:1.5rem;--font-size-d-xs:1.25rem;--font-line-height-d-2xl:3.375rem;--font-line-height-d-xl:2.875rem;--font-line-height-d-lg:2.5rem;--font-line-height-d-md:2.1375rem;--font-line-height-d-sm:2rem;--font-line-height-d-xs:1.75rem;--font-letter-spacing-2xl:-0.06rem;--font-letter-spacing-xl:-0.05rem;--font-letter-spacing-lg:-0.045rem;--font-letter-spacing-md:0rem;--font-letter-spacing-sm:0rem;--font-letter-spacing-xs:0rem}}.display-2xl-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-2xl);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-d-2xl);letter-spacing:var(--font-letter-spacing-d-2xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-2xl-bold::before,.display-2xl-bold::after{content:\"\";display:table}.display-2xl-bold::before{margin-bottom:-0.135em}.display-2xl-bold::after{margin-top:-0.205em}.display-2xl-semi-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-2xl);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-d-2xl);letter-spacing:var(--font-letter-spacing-d-2xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-2xl-semi-bold::before,.display-2xl-semi-bold::after{content:\"\";display:table}.display-2xl-semi-bold::before{margin-bottom:-0.135em}.display-2xl-semi-bold::after{margin-top:-0.205em}.display-xl-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-xl);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-d-xl);letter-spacing:var(--font-letter-spacing-d-xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-xl-bold::before,.display-xl-bold::after{content:\"\";display:table}.display-xl-bold::before{margin-bottom:-0.145em}.display-xl-bold::after{margin-top:-0.215em}.display-xl-semi-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-xl);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-d-xl);letter-spacing:var(--font-letter-spacing-d-xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-xl-semi-bold::before,.display-xl-semi-bold::after{content:\"\";display:table}.display-xl-semi-bold::before{margin-bottom:-0.145em}.display-xl-semi-bold::after{margin-top:-0.215em}.display-lg-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-lg);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-d-lg);letter-spacing:var(--font-letter-spacing-d-lg);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-lg-bold::before,.display-lg-bold::after{content:\"\";display:table}.display-lg-bold::before{margin-bottom:-0.015em}.display-lg-bold::after{margin-top:-0.095em}.display-lg-semi-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-lg);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-d-lg);letter-spacing:var(--font-letter-spacing-d-lg);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-lg-semi-bold::before,.display-lg-semi-bold::after{content:\"\";display:table}.display-lg-semi-bold::before{margin-bottom:-0.015em}.display-lg-semi-bold::after{margin-top:-0.095em}.display-md-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-md);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-d-md);letter-spacing:var(--font-letter-spacing-d-md);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-md-bold::before,.display-md-bold::after{content:\"\";display:table}.display-md-bold::before{margin-bottom:-0.195em}.display-md-bold::after{margin-top:-0.255em}.display-md-semi-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-md);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-d-md);letter-spacing:var(--font-letter-spacing-d-md);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-md-semi-bold::before,.display-md-semi-bold::after{content:\"\";display:table}.display-md-semi-bold::before{margin-bottom:-0.195em}.display-md-semi-bold::after{margin-top:-0.255em}.display-sm-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-sm);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-d-sm);letter-spacing:var(--font-letter-spacing-d-sm);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-sm-bold::before,.display-sm-bold::after{content:\"\";display:table}.display-sm-bold::before{margin-bottom:-0.195em}.display-sm-bold::after{margin-top:-0.255em}.display-sm-semi-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-sm);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-d-sm);letter-spacing:var(--font-letter-spacing-d-sm);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-sm-semi-bold::before,.display-sm-semi-bold::after{content:\"\";display:table}.display-sm-semi-bold::before{margin-bottom:-0.195em}.display-sm-semi-bold::after{margin-top:-0.255em}.display-xs-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-xs);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-d-xs);letter-spacing:var(--font-letter-spacing-d-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-xs-bold::before,.display-xs-bold::after{content:\"\";display:table}.display-xs-bold::before{margin-bottom:-0.199em}.display-xs-bold::after{margin-top:-0.195em;}.display-xs-semi-bold{font-family:var(--font-family-title);font-size:var(--font-size-d-xs);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-d-xs);letter-spacing:var(--font-letter-spacing-d-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.display-xs-semi-bold::before,.display-xs-semi-bold::after{content:\"\";display:table}.display-xs-semi-bold::before{margin-bottom:-0.259em}.display-xs-semi-bold::after{margin-top:-0.295em}.text-xl-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-xl);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-t-xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xl-bold::before,.text-xl-bold::after{content:\"\";display:table}.text-xl-bold::before{margin-bottom:-0.329em}.text-xl-bold::after{margin-top:-0.359em}.text-xl-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-xl);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xl-semi-bold::before,.text-xl-semi-bold::after{content:\"\";display:table}.text-xl-semi-bold::before{margin-bottom:-0.329em}.text-xl-semi-bold::after{margin-top:-0.359em}.text-xl-medium{font-family:var(--font-family-body);font-size:var(--font-size-t-xl);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-t-xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xl-medium::before,.text-xl-medium::after{content:\"\";display:table}.text-xl-medium::before{margin-bottom:-0.339em}.text-xl-medium::after{margin-top:-0.399em}.text-xl-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-xl);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-xl);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xl-regular::before,.text-xl-regular::after{content:\"\";display:table}.text-xl-regular::before{margin-bottom:-0.339em}.text-xl-regular::after{margin-top:-0.399em}.text-lg-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-lg);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-t-lg);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-lg-bold::before,.text-lg-bold::after{content:\"\";display:table}.text-lg-bold::before{margin-bottom:-0.339em}.text-lg-bold::after{margin-top:-0.399em}.text-lg-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-lg);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-lg);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-lg-semi-bold::before,.text-lg-semi-bold::after{content:\"\";display:table}.text-lg-semi-bold::before{margin-bottom:-0.339em}.text-lg-semi-bold::after{margin-top:-0.399em}.text-lg-medium{font-family:var(--font-family-body);font-size:var(--font-size-t-lg);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-t-lg);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-lg-medium::before,.text-lg-medium::after{content:\"\";display:table}.text-lg-medium::before{margin-bottom:-0.349em}.text-lg-medium::after{margin-top:-0.389em}.text-lg-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-lg);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-lg);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-lg-regular::before,.text-lg-regular::after{content:\"\";display:table}.text-lg-regular::before{margin-bottom:-0.349em}.text-lg-regular::after{margin-top:-0.389em}.text-md-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-md);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-t-md);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-md-bold::before,.text-md-bold::after{content:\"\";display:table}.text-md-bold::before{margin-bottom:-0.349em}.text-md-bold::after{margin-top:-0.389em}.text-md-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-md);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-md);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-md-semi-bold::before,.text-md-semi-bold::after{content:\"\";display:table}.text-md-semi-bold::before{margin-bottom:-0.349em}.text-md-semi-bold::after{margin-top:-0.389em}.text-md-medium{font-family:var(--font-family-body);font-size:var(--font-size-t-md);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-t-md);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-md-medium::before,.text-md-medium::after{content:\"\";display:table}.text-md-medium::before{margin-bottom:-0.349em}.text-md-medium::after{margin-top:-0.389em}.text-md-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-md);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-md);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-md-regular::before,.text-md-regular::after{content:\"\";display:table}.text-md-regular::before{margin-bottom:-0.349em}.text-md-regular::after{margin-top:-0.389em}.text-sm-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-sm);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-t-sm);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-sm-bold::before,.text-sm-bold::after{content:\"\";display:table}.text-sm-bold::before{margin-bottom:-0.299em}.text-sm-bold::after{margin-top:-0.349em}.text-sm-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-sm);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-sm);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-sm-semi-bold::before,.text-sm-semi-bold::after{content:\"\";display:table}.text-sm-semi-bold::before{margin-bottom:-0.299em}.text-sm-semi-bold::after{margin-top:-0.349em}.text-sm-medium{font-family:var(--font-family-body);font-size:var(--font-size-t-sm);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-t-sm);margin:var(--spacing-none);padding:var(--spacing-none);position:relative;display:inline-block}.text-sm-medium::before,.text-sm-medium::after{content:\"\";display:table}.text-sm-medium::before{margin-bottom:-0.299em}.text-sm-medium::after{margin-top:-0.299em}.text-sm-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-sm);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-sm);margin:var(--spacing-none);padding:var(--spacing-none);position:relative;display:inline-block}.text-sm-regular::before,.text-sm-regular::after{content:\"\";display:table}.text-sm-regular::before{margin-bottom:-0.299em}.text-sm-regular::after{margin-top:-0.299em}.text-xs-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-xs);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-t-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xs-bold::before,.text-xs-bold::after{content:\"\";display:table}.text-xs-bold::before{margin-bottom:-0.291em}.text-xs-bold::after{margin-top:-0.416em}.text-xs-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-xs);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xs-semi-bold::before,.text-xs-semi-bold::after{content:\"\";display:table}.text-xs-semi-bold::before{margin-bottom:-0.321em}.text-xs-semi-bold::after{margin-top:-0.416em}.text-xs-medium{font-family:var(--font-family-body);font-size:var(--font-size-t-xs);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-t-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xs-medium::before,.text-xs-medium::after{content:\"\";display:table}.text-xs-medium::before{margin-bottom:-0.199em}.text-xs-medium::after{margin-top:-0.196em}.text-xs-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-xs);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xs-regular::before,.text-xs-regular::after{content:\"\";display:table}.text-xs-regular::before{margin-bottom:-0.291em}.text-xs-regular::after{margin-top:-0.396em}.text-xxs-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-xxs);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-t-xxs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xxs-bold::before,.text-xxs-bold::after{content:\"\";display:table}.text-xxs-bold::before{margin-bottom:-0.291em}.text-xxs-bold::after{margin-top:-0.416em}.text-xxs-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-xxs);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-xxs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xxs-semi-bold::before,.text-xxs-semi-bold::after{content:\"\";display:table}.text-xxs-semi-bold::before{margin-bottom:-0.291em}.text-xxs-semi-bold::after{margin-top:-0.416em}.text-xxs-medium{font-family:var(--font-family-body);font-size:var(--font-size-t-xxs);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-t-xxs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xxs-medium::before,.text-xxs-medium::after{content:\"\";display:table}.text-xxs-medium::before{margin-bottom:-0.291em}.text-xxs-medium::after{margin-top:-0.416em}.text-xxs-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-xxs);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-xxs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xxs-regular::before,.text-xxs-regular::after{content:\"\";display:table}.text-xxs-regular::before{margin-bottom:-0.291em}.text-xxs-regular::after{margin-top:-0.416em}.pagination_div{display:flex;justify-content:space-between;align-items:center}.entries{display:flex;gap:var(--spacing-2)}.buttons{display:flex;gap:var(--spacing-3)}.pagination_div.page_default.desktop,.pagination_div.page_minimal_center_aligned.desktop{padding-top:var(--spacing-5)}.pagination_div.card_default.desktop,.pagination_div.card_minimal_right_aligned.desktop,.pagination_div.card_minimal_left_aligned.desktop,.pagination_div.card_minimal_center_aligned.desktop{padding:var(--spacing-3) var(--spacing-6) var(--spacing-4) var(--spacing-6)}.pagination_div.page_default.mobile,.pagination_div.page_minimal_center_aligned.mobile{padding-top:var(--spacing-4)}.pagination_div.card_default.mobile,.pagination_div.card_minimal_left_aligned.mobile,.pagination_div.card_minimal_right_aligned.mobile,.pagination_div.card_minimal_center_aligned.mobile{padding:var(--spacing-3) var(--spacing-4)}";
 const GbPaginationStyle0 = gbPaginationCss;
@@ -16,7 +16,7 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         this.totalPages = 10;
     }
     render() {
-        return (h("div", { key: '60d4b32ba178d6099eea791285e6cfcc3988dbce', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '6bea169a829fff47d6d190ac4725d8bb809196f0', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '2f19b52803ad3e60ba5f5a29ab0b091c6ff00c43' }, "Previous")), h("gb-button", { key: '64225116654af3709a857e1a658323ef6dcdadf9', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '6144543401df9fd7a1bf84198c6f08b9c4470af0' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '254defc808938e91c53d6beed49483a29a1ff0a5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '73af6f801d327f59ddee71a88fcd37b2a585d33a' }, "Previous")), h("gb-button", { key: '1acafe0d93a452263f05a57841fcbf3d5235e9a0', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '86bc06852d441d274f095dc394994721e61e95b9' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'a153b5d310163eac213bdf712e812aff3c6d448c', class: "entries" }, "Entries"), h("div", { key: '14fc49a6a789bd39b84b297603be9c4935b7536c', class: "page_numbers" }), h("div", { key: '61640e4eeb134dd911b4a061bc4df7e453f99c68', class: "buttons" }, h("gb-button", { key: 'fdd3525d9b24fd485167d28a99084ddae70eb2e5', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("gb-button", { key: '3ba262aa0c006b3e4b89dc3fb6bdc4861112c3c7', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: 'f8af2187e7eb29b79ed8ffa0036310d37799f94a', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: 'a46bad71bce5c68e2e06a44facd98c4140e3abc9', class: "page_number_text" }, h("p", { key: 'ed75e07bf647f1984c504e937b3ab65ee4e99d42', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '7eb606a0f4447a8ba07efb0ebc638cef89b8b859', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
+        return (h("div", { key: 'ccf5d989941c21b5718efc9586a5da37e973bde9', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '2fdc86d497c04aead9836e96a61846bedb28d7ed', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'e85a0f141a665479d12a388e62825f800dd26471' }, "Previous")), h("gb-button", { key: '7fcac6b8e075bf79c844015a4f6c303fc70b9c54', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '240895a212ed14498eb6447850f4ffcb38d415bb' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'f34e3110134cdaca3ade2147a03bc72e857d9682', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'b962dc873a69c0a5c567506a646f0f39315b8e38' }, "Previous")), h("gb-button", { key: '3bc4c0e7e5d4b23a7845be184ae32b413e3dd211', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '1a93b1f943eedce44a2fed380c53d670c190a01d' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e69408075acac39836716b364a6b31a15fb5315d', class: "entries" }, "Entries"), h("div", { key: '0b0edc0067ec7376a2e1177c8a77238bd7bfffc5', class: "page_numbers" }), h("div", { key: '671cee855484b8e510088ff38889aa4e03a542b6', class: "buttons" }, h("gb-button", { key: '9426468ceb70a4a20a9b637c3297f36cdb3a3645', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("gb-button", { key: '9a2869e21abf91624316b96758d7af1c15a6f9ab', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '17268fb325f921d9797f31f0a002d8699f998839', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: '95ae664f9f650f5acb7f740cfa7955d5bd00c58e', class: "page_number_text" }, h("p", { key: '075b4e1a9312956044fbbc5d275b065a1f464195', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '058a6357c539f9bdb872bb6fb549639b7f72b610', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
     }
     static get style() { return GbPaginationStyle0; }
 }, [1, "gb-pagination", {

package/dist/components/gb-password-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbPasswordButton$1, d as defineCustomElement$1 } from './p-65e3a60b.js';
+import { G as GbPasswordButton$1, d as defineCustomElement$1 } from './p-2d692da6.js';
 const GbPasswordButton = GbPasswordButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-progress-bar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbProgressBar$1, d as defineCustomElement$1 } from './p-60a9a3e4.js';
+import { G as GbProgressBar$1, d as defineCustomElement$1 } from './p-57b94005.js';
 const GbProgressBar = GbProgressBar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-progress-circle.js CHANGED Viewed

@@ -14,7 +14,7 @@ const GbProgressCircle$1 = /*@__PURE__*/ proxyCustomElement(class GbProgressCirc
         this.progress = 0;
     }
     render() {
-        return (h("div", { key: 'cdafe984f6db8aa755bace33db64334d756945aa', class: "progress" }, h("svg", { key: 'f2722717868b9c369c1b652b91e8cc7d1053c2e2', class: "progress-circle", width: "200px", height: "200px", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '10b82ebad41619836944ce18226db0eac2046202', class: "progress-circle-back", cx: "80", cy: "80", r: "74" }), h("circle", { key: '1e8359e2669b53ab9635e9cee3c9bfc77c4e107e', class: "progress-circle-prog", cx: "80", cy: "80", r: "74" })), h("div", { key: '9b8caf4c0e4dbb2be1b3f1761346b89ff48ea8bd', class: "progress-text", "data-progress": "0" }, "50%")));
+        return (h("div", { key: 'f5a5bd34beb1179b24810af7fc7d086452d801f2', class: "progress" }, h("svg", { key: 'ae271a52ddfea697638591da3781b785f18b20e3', class: "progress-circle", width: "200px", height: "200px", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'ef12bde384a834500c8bc608a759f34768d3c8c5', class: "progress-circle-back", cx: "80", cy: "80", r: "74" }), h("circle", { key: '0d1a676f38841d23d5322fd5863fcdc5784d2360', class: "progress-circle-prog", cx: "80", cy: "80", r: "74" })), h("div", { key: '7d30572417a85acd8fa35a259e6f5b2c2889067f', class: "progress-text", "data-progress": "0" }, "50%")));
     }
     static get style() { return GbProgressCircleStyle0; }
 }, [1, "gb-progress-circle", {