globuswebcomponents 0.3.8 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"gb-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-input-field/gb-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["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() inputType: 'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown'|'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count';\r\n  @Prop() destructive?: boolean;\r\n  @Prop() helpIcon?: boolean = false;\r\n  @Prop() icon?: string;\r\n  @Prop() placeholder: string = ''; \r\n  @Prop() label?: string = '';\r\n\r\n  /*getIconPath(iconName: string) {\r\n    if (!iconName) return null;\r\n    return getAssetPath(`./assets/${iconName}`);\r\n  }\r\n\r\n  renderIcon(iconName: string) {\r\n    const iconPath = this.getIconPath(iconName);\r\n    return iconPath ? <span><img class=\"icon\" src={iconPath} alt=\"icon\" /></span> : null;\r\n  }*/\r\n\r\n  \r\n\r\n  render() {\r\n\r\n    const icon = this.icon ? getAssetPath(`assets/${this.icon}.svg`) : '';\r\n\r\n    const classes = {\r\n      [this.size]: true,\r\n    }\r\n\r\n    return (\r\n      <div class={classes}>\r\n        <label>{this.label}</label>\r\n        {this.inputType === 'default' && (\r\n          <div class=\"input-wrapper\">\r\n            <input placeholder={this.placeholder}>\r\n            </input>\r\n            {this.helpIcon && (\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 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              </div> \r\n            )}\r\n          </div>\r\n        )}\r\n        {this.inputType === 'icon_leading' && (\r\n          <div class=\"input-wrapper\">\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            <input placeholder={this.placeholder} type='email'>\r\n            </input>\r\n            {this.helpIcon && (\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 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                  </svg>\r\n                </div> \r\n              )}\r\n          </div>\r\n        )}\r\n        {this.inputType === 'leading_dropdown' && (\r\n          <div class=\"input-wrapper\">\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            <select></select>\r\n            <input placeholder={this.placeholder}>\r\n              {this.helpIcon && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              )}\r\n            </input>\r\n          </div>\r\n        )}\r\n        {this.inputType === 'payment_input' && (\r\n          <div class=\"input-wrapper\">\r\n            <span class='payment-icon'>$</span>\r\n            <input placeholder={this.placeholder}>\r\n              {this.helpIcon && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              )}\r\n            </input>\r\n          </div>\r\n        )}\r\n        {this.inputType === 'tags' && (\r\n          <input placeholder={this.placeholder}>\r\n            <slot></slot>\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'password' && (\r\n          <input placeholder={this.placeholder}>\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'password_icon_leading' && (\r\n          <input placeholder={this.placeholder}>\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'count' && (\r\n          <input placeholder={this.placeholder}>\r\n          {this.icon && (\r\n            <div class=\"icon\">\r\n              <img src={icon} alt=\"Icon\"></img>\r\n            </div>\r\n          )}\r\n          {this.helpIcon && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path 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\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          )}\r\n          <span>\r\n            <button class=\"decrease-btn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path d=\"M16.6666 10L3.33329 10\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            </button>\r\n            <button class=\"increase-btn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path d=\"M10 3.33334L10 16.6667M16.6667 10L3.33337 10\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>        \r\n            </button>\r\n          </span>\r\n        </input>\r\n        )}\r\n        <p class=\"help-text\">This is a hint to help the user</p>\r\n      </div>\r\n    )\r\n  }\r\n}"]}
+{"version":3,"file":"gb-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-input-field/gb-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["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}"]}

package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.css

@@ -2119,7 +2119,7 @@
 }
 
 .text-sm-regular{
-    font-size: var(--text-sm-regular-font-size);
+    font-size: var(--text-sm-regular-font-size, 0.875rem);
     font-weight: var(--text-sm-regular-font-weight);
     line-height: var(--text-sm-regular-line-height);
 }
@@ -2148,56 +2148,100 @@
     line-height: var(--text-xs-regular-line-height);
 }
 
-input{
-    display: flex;   
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-2);
-    border-radius: 8px;
-    border: 1px solid #CDD5DF;
-    color: #CDD5DF;
-    text-align: center;
-    /*font-family: Sora;*/
-    font-style: normal;
-    font-weight: 500;
+div {
+  display: flex;   
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-Positive-spacing-2, 0.5rem);
+  border-radius: 8px;
+  border: 1px solid var(--color-boarder-input, #CDD5DF);
+}
+
+div.sm {
+  width: 2.75rem;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  padding: var(--spacing-Positive-spacing-half, 0.125rem);
+}
+
+div.md {
+  width: 3rem;
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0.625rem var(--spacing-Positive-spacing-2, 0.5rem);
+}
+
+div.lg {
+  width: 3.5rem;
+  min-width: 3.5rem;
+  min-height: 3.5rem;
+  padding: var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem);
+}
+
+div:active {
+  border: 1.3px solid var(--color-border-selected, #075DB2);
+  color: var(--color-text, #4B5565);
+}
+
+div.disabled {
+  background: var(--color-background-gray-subtlest, #F6F8FA);
+  border: 1px solid var(--color-boarder-disabled, #E3E8EF);
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input {
+  width: inherit;
+  border: none;
+  background-color: var(--color-background-card, #FFFFFF); 
+  padding: 2px;
+  box-shadow: none;
+  outline: none;
+  text-align: center;
+  font-family: Sora;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--color-text-disabled, #CDD5DF); /* Placeholder color */
+}
+
+input:focus {
+  border:none;
+  box-shadow: none;
 }
 
 input.sm {
-    min-width: 44px;
-    min-height: 44px;
-    padding: var(--spacing-half) var(--spacing-2);
-    font-size: 24px;
-    line-height: 32px; /* 133.333% */
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
 input.md {
-    min-width: 48px;
-    min-height: 48px;
-    padding: 10px var(--spacing-2);
-    font-size: 30px;
-    line-height: 38px; /* 126.667% */
+  font-size: 1.875rem;
+  line-height: 2.375rem;
 }
 
 input.lg {
-    min-width: 56px;
-    min-height: 56px;
-    padding: var(--spacing-3) var(--spacing-2);
-    font-size: 30px;
-    line-height: 38px; /* 126.667% */
+  font-size: 1.875rem;
+  line-height: 2.375rem;
 }
 
-input:not(:placeholder-shown) {
-    color: #4B5565;
+input.disabled {
+  background: var(--color-background-gray-subtlest, #F6F8FA);
+  color: var(--color-text-disabled, #CDD5DF); 
 }
 
-input:focus:not(:placeholder-shown){
-    border: 1.3px solid #075DB2;
-    color: #4B5565;
+input::placeholder {
+  color: var(--color-text-disabled, #CDD5DF);
+}
+
+input:not(:placeholder-shown) {
+  color: var(--color-text, #4B5565);
 }
 
-input:disabled {
-    background: #F6F8FA;
-    border: 1px solid #E3E8EF;
-    color: #CDD5DF;
+input.disabled:not(:placeholder-shown) {
+  color: var(--color-text-disabled, #CDD5DF);
 }

package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js

@@ -2,9 +2,27 @@ import { h } from "@stencil/core";
 export class GbMegaInputField {
     constructor() {
         this.size = undefined;
+        this.state = undefined;
+        this.inputValue = '';
+    }
+    handleInput(event) {
+        const input = event.target.value;
+        // Allow only one digit in the input field
+        if (input.length <= 1) {
+            this.inputValue = input; // Set the input value
+        }
+        else {
+            this.inputValue = input[0]; // Keep only the first character if more is entered
+        }
     }
     render() {
-        return (h("input", { key: '3efb8cace12edfc87a9d1ff2d59e9ece5f8537f1', class: this.size, type: "number", placeholder: "0" }));
+        return (h("div", { key: '7b9254b53ab04d014f70afcd352baf4688c52512', class: {
+                [this.size]: true,
+                disabled: this.state === 'disabled'
+            } }, h("input", { key: 'af73f13794f35df0277f9dbc124a9c847b0a84f2', class: {
+                [this.size]: true,
+                disabled: this.state === 'disabled'
+            }, type: "number", min: "0", max: "9", placeholder: "0", value: this.inputValue, onInput: (event) => this.handleInput(event) })));
     }
     static get is() { return "gb-megainput-field"; }
     static get encapsulation() { return "shadow"; }
@@ -42,8 +60,31 @@ export class GbMegaInputField {
                 },
                 "attribute": "size",
                 "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'placeholder' | 'disabled'",
+                    "resolved": "\"disabled\" | \"placeholder\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "inputValue": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-megainput-field.js.map

package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-megainput-field.js","sourceRoot":"","sources":["../../../src/components/gb-megainput-field-base/gb-megainput-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,gBAAgB;;;;IAGzB,MAAM;QACF,OAAO,CACH,8DAAO,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,GAAG,GAAS,CAClE,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-megainput-field',\r\n    styleUrl: 'gb-megainput-field.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbMegaInputField {\r\n    @Prop() size: GeneralSizes;\r\n \r\n    render() {\r\n        return (\r\n            <input class={this.size} type=\"number\" placeholder=\"0\"></input>\r\n        )\r\n    }\r\n}"]}
+{"version":3,"file":"gb-megainput-field.js","sourceRoot":"","sources":["../../../src/components/gb-megainput-field-base/gb-megainput-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AASnE,MAAM,OAAO,gBAAgB;;;;0BAGK,EAAE;;IAGhC,WAAW,CAAC,KAAY;QACpB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QAEvD,0CAA0C;QAC1C,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,sBAAsB;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,mDAAmD;QACjF,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE;gBACR,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG,IAAI;gBAClB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;aACtC;YACG,8DACA,KAAK,EAAE;oBACH,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG,IAAI;oBAClB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;iBACtC,EACD,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EACf,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GACnC,CACN,CAET,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State, Element } from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-megainput-field',\r\n    styleUrl: 'gb-megainput-field.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbMegaInputField {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: 'placeholder' | 'disabled';\r\n    @State() inputValue: string = '';\r\n    @Element() el: HTMLElement;\r\n\r\n    handleInput(event: Event) {\r\n        const input = (event.target as HTMLInputElement).value;\r\n    \r\n        // Allow only one digit in the input field\r\n        if (input.length <= 1) {\r\n          this.inputValue = input; // Set the input value\r\n        } else {\r\n          this.inputValue = input[0]; // Keep only the first character if more is entered\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={{\r\n                [this.size] : true,\r\n                disabled: this.state === 'disabled'\r\n            }}>\r\n                <input  \r\n                class={{\r\n                    [this.size] : true,\r\n                    disabled: this.state === 'disabled'\r\n                }}\r\n                type=\"number\" \r\n                min=\"0\" max=\"9\" \r\n                placeholder=\"0\"\r\n                value={this.inputValue}\r\n                onInput={(event) => this.handleInput(event)}>\r\n                </input>\r\n            </div>\r\n            \r\n        )\r\n    }\r\n}"]}

package/dist/collection/components/gb-notification-content/gb-notification-content.css

@@ -2119,7 +2119,7 @@
 }
 
 .text-sm-regular{
-    font-size: var(--text-sm-regular-font-size);
+    font-size: var(--text-sm-regular-font-size, 0.875rem);
     font-weight: var(--text-sm-regular-font-weight);
     line-height: var(--text-sm-regular-line-height);
 }

package/dist/collection/components/gb-notification-content/gb-notification-content.js

@@ -8,7 +8,7 @@ export class GbNotificationContent {
     }
     render() {
         const iconSrc = getAssetPath(`assets/${this.icon}.svg`);
-        return (h("div", { key: 'af8e325ee56f90f0b3c674e7fc3f01a967c6601d', class: "notification-container" }, h("div", { key: 'fcaa6a61933643b8fc90e2c38563e85d9e962dcc', class: "notification-title" }, this.icon && (h("div", { key: '021da38cfa4f82a1cb52ce83058821ff35767a45', class: "icon" }, h("img", { key: 'e44c9d68aef974145aedb7a0fdee6de30f3a6c60', src: iconSrc, alt: "Icon" }))), h("label", { key: '5874fce3852a4f14441ab2df4779f00a72903a7f' }, this.label), h("span", { key: '733be44accf713824d605cde0894720247e8c50d', class: "time" }, this.time)), h("div", { key: 'fb5f84427579f041cb6e219165d8212427e169b8', class: "supporting-text" }, this.supportingText)));
+        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)));
     }
     static get is() { return "gb-notification-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-notification-panel/gb-notification-panel.css

@@ -2119,7 +2119,7 @@
 }
 
 .text-sm-regular{
-    font-size: var(--text-sm-regular-font-size);
+    font-size: var(--text-sm-regular-font-size, 0.875rem);
     font-weight: var(--text-sm-regular-font-weight);
     line-height: var(--text-sm-regular-line-height);
 }

package/dist/collection/components/gb-notification-panel/gb-notification-panel.js

@@ -26,7 +26,7 @@ export class GbNotificationPanel {
         notification.remove();
     }
     render() {
-        return (h("div", { key: '9d40355ebaed2f0ed9508306f7110813eb9bcefb', class: "notification-panel" }, this.state === 'empty' && this.notifications.length === 0 && (h("div", { key: '76e80e60baa23e7f961ee409448a88ce85b5a56c' }, h("div", { key: '46bf69ef7e24a5c8955261fbab930691fcf2e391', class: "empty-state" }, h("img", { key: '11429b54dfbcdb9bebb58dc20a149afbc1ad81b2', src: "./build/assets/panel_bell.svg", alt: "No notification" }), h("h3", { key: '6c4f1139977bb6e65f5a66c6f3b29d337e44e17e' }, "No notification"), h("p", { key: 'd15f4c976b4abf27aeac83f7083fc5a5dd20cd20' }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.")), h("test-button", { key: 'bf843de64d64bc0b33c1b2dab36a2b473a442dc2', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read"))), this.state === 'notification_dropdown' && (h("div", { key: 'bbf8010d47fb39fc5a9bd1442186a0d4cc514f91', class: "notification-dropdown" }, h("slot", { key: 'f9742ee4217bdf5297d222dcc57c92903ddc437a' }), h("test-button", { key: '7138cc87a184004d0a14780f10791a82cf209b3a', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read")))));
+        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")))));
     }
     static get is() { return "gb-notification-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-pagination/gb-pagination.js

@@ -8,7 +8,7 @@ export class GbPagination {
         this.totalPages = 10;
     }
     render() {
-        return (h("div", { key: '3a7caa76e13b124caea0ff207f10b4a5b303f240', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '4816a54b9ac2ddc140e109bae7f8d28b82b7f3d4', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'bc0c61e964f7ff66b2d0dde82ca3a44d3ed2daa9' }, "Previous")), h("gb-button", { key: '1d5135b58c6075bbaa42bb65dc4f15ba3d65807f', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '7d534aac100126345e043ea5fb6aff94f6319d22' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '4f171062c212b245831c15c36ae20393b1adfa2f', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'd5f098dac2f01a245d2caad8f77d78401e376060' }, "Previous")), h("gb-button", { key: '675df596c5f372405072c3408afbb4ff4d916126', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: 'd8d6b1e565bfa8e56a5b1c7bd8929dc0b9c52333' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '6fab12b1df80ffcd4ab88f938e9e8eee5d022a9e', class: "entries" }, "Entries"), h("div", { key: '8412ff5dd251a9a5a58aabd501ebe5bfc7cb4b81', class: "page_numbers" }), h("div", { key: 'a1ba11985fd82baf58c1adbe454cb236e71c55b7', class: "buttons" }, h("gb-button", { key: 'e9de614a16b8ca3f6f1ab4988e401be0b9179f37', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("gb-button", { key: 'beeedba633ef6bb88ef575fc21875253fd68bd29', 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: '117d7c1eb866bd4f19ba3f04b79326d8ff75f987', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: '7e3cf823e2704933b08bc8fc040270d8d33d48c2', class: "page_number_text" }, h("p", { key: '8776a4485be045e02fae8fa4299a85196350b9a9', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '36bf6a18d25b1915919dc39c3d220ceeb6dd1223', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
+        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" })))));
     }
     static get is() { return "gb-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class GbPaginationButtonGroupBase {
         }
     }
     render() {
-        return (h("div", { key: 'cd9238c3abc78a965d250207f7330cc2bcc82d04', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: '6424e6cba116b7f8507185ede0b151d6b2403b7c' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'ac360879e379562e61a3446b767d25478e400df9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '4151197b797966dfbe7a91e540891b4c558902f4', 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: '3358799bf4bab83e74af22a1eac32f62718fddb8' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: 'b4a59c46ce9528e699eeb04777e975fbbd8c4dee' }), this.iconTrailing && (h("svg", { key: '5ed1eab0fce27ad45e303b71e520eadda2a7f768', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'e162ce71920414dfe10c8a421fa4e9b5a45a55ba', 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: '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" })))))));
     }
     static get is() { return "gb-pagination-button-group-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-pagination-dot-indicator/gb-pagination-dot-indicator.js

@@ -6,7 +6,7 @@ export class GbPaginationDotIndicator {
         this.size = undefined;
     }
     render() {
-        return h("div", { key: 'f003dd4cbd92437f19b0954ae84db88823b19894', class: `dot_indicator_div 
+        return h("div", { key: '7c796daa95e0222e5a5bd702cf00e6f4049b582b', class: `dot_indicator_div 
       ${this.type} ${this.current ? 'current' : ''} 
       ${this.size}` });
     }

package/dist/collection/components/gb-pagination-number-base/gb-pagination-number-base.js

@@ -10,7 +10,7 @@ export class GbPaginationNumberBase {
         }
     }
     render() {
-        return (h("div", { key: '7585d2221ce4e3f1ac385e3a555ae632b95a4180', class: `page_number_base ${this.shape}` }, h("slot", { key: 'c95d8d15871deca35148338ae4cb0aa4789e7a85', name: "page_number" })));
+        return (h("div", { key: 'c20eded58ebaec5ece4d041ea00a51de39947397', class: `page_number_base ${this.shape}` }, h("slot", { key: 'd2b2d9aea9fb9d8be66b387f3d127eefee7746a6', name: "page_number" })));
     }
     static get is() { return "gb-pagination-number-base"; }
     static get encapsulation() { return "shadow"; }