globuswebcomponents 0.9.0 → 0.9.2

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

@@ -26,7 +26,7 @@ export class GbSlider {
             }
             // Update the track's appearance and emit the new values.
             this.updateTrack();
-            this.valueChange.emit({ left: this.leftValue, right: this.rightValue });
+            this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });
         };
         this.handleMouseUp = () => {
             this.isDragging = false;
@@ -34,9 +34,9 @@ export class GbSlider {
             document.removeEventListener('mousemove', this.handleMouseMove);
             document.removeEventListener('mouseup', this.handleMouseUp);
         };
-        this.min = 0;
-        this.max = 100;
-        this.thumbType = 'text';
+        this.min = undefined;
+        this.max = undefined;
+        this.thumbType = undefined;
         this.leftValue = 0;
         this.rightValue = 100;
     }
@@ -56,7 +56,7 @@ export class GbSlider {
         this.trackEl.style.width = `${rightPos - leftPos}%`;
     }
     render() {
-        return (h("div", { key: 'a0f0f3e1fad981d3fda6387ff32f9e562446875d', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: '6a8e98a0c79bb44454b3c5197123897799c46d65', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '100f40c3a217de1b44371ef7d9c76e0bcb9bfc23', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '828a281e5350cf87df2a01d85946ac2be326ccc3', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
+        return (h("div", { key: '71fad22162d7b35e909b4433d6429e9bf197eb85', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: '0d8ace8d159cd3775620a882727af19b1b4334f2', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: 'd6ccfe3c158efad3221578aef96425a8a47b878b', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '6eaa0a5dd657742f3cc3e11601f1a3c800e664e1', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
     }
     static get is() { return "gb-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -87,8 +87,7 @@ export class GbSlider {
                     "text": ""
                 },
                 "attribute": "min",
-                "reflect": false,
-                "defaultValue": "0"
+                "reflect": false
             },
             "max": {
                 "type": "number",
@@ -105,8 +104,7 @@ export class GbSlider {
                     "text": ""
                 },
                 "attribute": "max",
-                "reflect": false,
-                "defaultValue": "100"
+                "reflect": false
             },
             "thumbType": {
                 "type": "string",
@@ -123,8 +121,7 @@ export class GbSlider {
                     "text": ""
                 },
                 "attribute": "thumb-type",
-                "reflect": false,
-                "defaultValue": "'text'"
+                "reflect": false
             }
         };
     }
@@ -136,8 +133,8 @@ export class GbSlider {
     }
     static get events() {
         return [{
-                "method": "valueChange",
-                "name": "valueChange",
+                "method": "thumbValueChanged",
+                "name": "thumbValueChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/gb-slider/gb-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-slider.js","sourceRoot":"","sources":["../../../src/components/gb-slider/gb-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() min: number = 0;  \r\n  @Prop() max: number = 100; \r\n  @Prop() thumbType: 'text' | 'tooltip' = 'text'; \r\n\r\n  @State() leftValue: number = 0;   \r\n  @State() rightValue: number = 100; \r\n\r\n  @Event() valueChange: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement; \r\n  private containerEl: HTMLDivElement; \r\n  private isDragging: boolean = false; \r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  private snapPoints = [0, 25, 50, 75, 100];\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack(); \r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb; \r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return; \r\n\r\n    // Calculate the position of the mouse relative to the slider's width.\r\n    const position = e.offsetX / this.containerEl.offsetWidth;\r\n    \r\n    // Convert the position into a value within the slider's range and snap to the nearest point.\r\n    const value = this.findNearestSnapPoint(position * 100);\r\n\r\n    // Update the appropriate thumb's value.\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.min(value, this.rightValue - 25);\r\n    } else {\r\n      this.rightValue = Math.max(value, this.leftValue + 25);\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values.\r\n    this.updateTrack();\r\n    this.valueChange.emit({ left: this.leftValue, right: this.rightValue });\r\n  }\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false; \r\n    this.activeThumb = null; \r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  findNearestSnapPoint(value: number): number {\r\n    return this.snapPoints.reduce((prev, curr) => \r\n      Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev\r\n    );\r\n  }\r\n\r\n  updateTrack() {\r\n    const leftPos = this.leftValue; \r\n    const rightPos = this.rightValue; \r\n    \r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={(el) => this.containerEl = el as HTMLDivElement}>\r\n        <div class=\"track\" ref={(el) => this.trackEl = el as HTMLDivElement}></div>\r\n        \r\n        <gb-slider-control-handle \r\n          class=\"left\"\r\n          value={this.leftValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.leftValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n\r\n        <gb-slider-control-handle \r\n          class=\"right\"\r\n          value={this.rightValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.rightValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-slider.js","sourceRoot":"","sources":["../../../src/components/gb-slider/gb-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() min: number;  \r\n  @Prop() max: number; \r\n  @Prop() thumbType: 'text' | 'tooltip'; \r\n\r\n  @State() leftValue: number = 0;   \r\n  @State() rightValue: number = 100; \r\n\r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement; \r\n  private containerEl: HTMLDivElement; \r\n  private isDragging: boolean = false; \r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  private snapPoints = [0, 25, 50, 75, 100];\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack(); \r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb; \r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return; \r\n\r\n    // Calculate the position of the mouse relative to the slider's width.\r\n    const position = e.offsetX / this.containerEl.offsetWidth;\r\n    \r\n    // Convert the position into a value within the slider's range and snap to the nearest point.\r\n    const value = this.findNearestSnapPoint(position * 100);\r\n\r\n    // Update the appropriate thumb's value.\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.min(value, this.rightValue - 25);\r\n    } else {\r\n      this.rightValue = Math.max(value, this.leftValue + 25);\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values.\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  }\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false; \r\n    this.activeThumb = null; \r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  findNearestSnapPoint(value: number): number {\r\n    return this.snapPoints.reduce((prev, curr) => \r\n      Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev\r\n    );\r\n  }\r\n\r\n  updateTrack() {\r\n    const leftPos = this.leftValue; \r\n    const rightPos = this.rightValue; \r\n    \r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={(el) => this.containerEl = el as HTMLDivElement}>\r\n        <div class=\"track\" ref={(el) => this.trackEl = el as HTMLDivElement}></div>\r\n        \r\n        <gb-slider-control-handle \r\n          class=\"left\"\r\n          value={this.leftValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.leftValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n\r\n        <gb-slider-control-handle \r\n          class=\"right\"\r\n          value={this.rightValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.rightValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/{gb-control-handle/gb-control-handle.css → gb-slider-control-handle/gb-slider-control-handle.css}

@@ -2667,7 +2667,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--rounded-md); 
-    border: 1.5px solid #075DB2;
+    border: 1.5px solid var(--color-border-selected, #075DB2);
     background: var(--color-background-card, #FFFFFF);
     box-sizing: border-box; 
     z-index: 1; 
@@ -2684,15 +2684,14 @@
     color: var(--color-text-bold, #202939);
     text-align: center;
     position: absolute;
-    bottom: -20px; 
+    bottom: -2rem; 
     left: 55%;
     transform: translateX(-50%);
-    font-size: var(--font-size-sm); 
 }
 
 .tooltip-container {
     position: absolute;
-    bottom: 25px;
+    top: -2.5rem;
     left: -39%;
     width: 10px;
     transform: translateX(-50%);
@@ -2700,46 +2699,11 @@
     z-index: 1; 
 }
 
-gb-tooltip p {
-    height: 3px;
-    padding-top: 0;
-}
-
 .thumb-container.hover {
     border-color: var(--color-border-selected, #075DB2);
 }
 
-.thumb-label {
+.thumb_label {
     color: var(--color-text-bold, #202939);
     text-align: center;
-}
-  
-/*Text styles*/
-.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;
-    width: 100%;
-    height: 0;
-    margin: 0;
-    padding: 0;
-}
-
-.text-xs-semi-bold::before{
-    margin-bottom: -0.41em;
-}
-
-.text-xs-semi-bold::after{
-    margin-top: -0.46em;
-}
+}

package/dist/collection/components/{gb-control-handle/gb-control-handle.js → gb-slider-control-handle/gb-slider-control-handle.js}

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class SliderControlHandle {
+export class GbSliderControlHandle {
     constructor() {
         this.value = 0;
         this.type = undefined;
@@ -19,18 +19,18 @@ export class SliderControlHandle {
         this.isFocused = false;
     }
     render() {
-        return (h("div", { key: '0490c9e1c61c8adfe434fc58c6d34061ce33e39a', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: 'b8358b4a8ae3560463881d67e87ba45c84af52d0', class: "tooltip-container" }, h("gb-tooltip", { key: '6970074ee613fe7086fd036517773aab32fe0f77', arrow: 'none' }, h("p", { key: '6978e8315d933cf10a23852ae2ace6bd51ef5545', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: 'bfbae0196398c9771fe29d940695c1b78513042b', class: "thumb-label" }, this.value, "%"))));
+        return (h("div", { key: '708010ace07681833a951eccf3e26a0e341f6297', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: 'f8fe5e52b3837e05f37c98160d563b5d9476852d', class: "tooltip-container" }, h("gb-tooltip", { key: 'e7589863454d6d207615a1168f2468135e8ce8a3', arrow: "none", "show-supporting-text": false }, h("p", { key: 'dafc35a7cf565bfb803cd07eb2f6fcb8765323f5', class: "text-xs-semi-bold", slot: "label" }, this.value, "%")))), this.type === 'text' && (h("div", { key: 'c1ebee05c295604893bffe071e88efa762e1a39d', class: "thumb-label" }, h("p", { key: '9910493b7c945c002f04083bea4d77ae40a107b4', class: "thumb_label text-md-medium" }, this.value, "%")))));
     }
-    static get is() { return "gb-control-handle"; }
+    static get is() { return "gb-slider-control-handle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["gb-control-handle.css"]
+            "$": ["gb-slider-control-handle.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["gb-control-handle.css"]
+            "$": ["gb-slider-control-handle.css"]
         };
     }
     static get properties() {
@@ -79,4 +79,4 @@ export class SliderControlHandle {
         };
     }
 }
-//# sourceMappingURL=gb-control-handle.js.map
+//# sourceMappingURL=gb-slider-control-handle.js.map

package/dist/collection/components/gb-slider-control-handle/gb-slider-control-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-slider-control-handle.js","sourceRoot":"","sources":["../../../src/components/gb-slider-control-handle/gb-slider-control-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,qBAAqB;;qBACR,CAAC;;yBAGK,KAAK;yBACL,KAAK;;IAEnC,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EACzG,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,QAAQ,EAAC,GAAG;YAEX,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,mEAAY,KAAK,EAAC,MAAM,0BAAuB,KAAK;oBAClD,0DAAG,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,OAAO;wBAAE,IAAI,CAAC,KAAK;4BAAM,CAChD,CACT,CACP;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,aAAa;gBACtB,0DAAG,KAAK,EAAC,4BAA4B;oBAAE,IAAI,CAAC,KAAK;wBAAM,CACnD,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider-control-handle',\r\n  styleUrl: 'gb-slider-control-handle.css',\r\n  shadow: true,\r\n})\r\nexport class GbSliderControlHandle {\r\n  @Prop() value: number = 0;\r\n  @Prop() type?: 'text' | 'tooltip'; \r\n  \r\n  @State() isHovered: boolean = false; \r\n  @State() isFocused: boolean = false; \r\n\r\n  handleMouseEnter() {\r\n    this.isHovered = true;\r\n  }\r\n\r\n  handleMouseLeave() {\r\n    this.isHovered = false;\r\n  }\r\n\r\n  handleFocus() {\r\n    this.isFocused = true;\r\n  }\r\n\r\n  handleBlur() {\r\n    this.isFocused = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`}\r\n        onMouseEnter={() => this.handleMouseEnter()}\r\n        onMouseLeave={() => this.handleMouseLeave()}\r\n        onFocus={() => this.handleFocus()}\r\n        onBlur={() => this.handleBlur()}\r\n        tabindex=\"0\"\r\n      >\r\n        {this.type === 'tooltip' && (\r\n          <div class=\"tooltip-container\">\r\n            <gb-tooltip arrow=\"none\" show-supporting-text={false}>\r\n              <p class=\"text-xs-semi-bold\" slot=\"label\">{this.value}%</p>\r\n            </gb-tooltip>\r\n          </div>\r\n        )}\r\n        {this.type === 'text' && (\r\n          <div class=\"thumb-label\">\r\n            <p class=\"thumb_label text-md-medium\">{this.value}%</p>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-status-indicator/gb-status-indicator.js

@@ -9,7 +9,7 @@ export class GbStatusIndicator {
     }
     render() {
         return [
-            h("div", { key: '89e00f8ff59d66396d2ce1eb5aa7548d60a4fee1' }, this.statusIcon === 'online_indicator' && h("div", { key: '5e02a06f10f3f515da67a4b42bdb893b29178815', class: `online_icon ${this.size} ${this.indicatorStateClass}` }), this.statusIcon === 'verified' && (h("svg", { key: 'c8965cb76192cb58ac72c8166e1a56d170ee9a53', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", class: `verified ${this.size}` }, h("g", { key: '32b75a39c30c1401f82060d1f869a6cddc939e78', "clip-path": "url(#clip0_0_21453)" }, h("path", { key: '7af11735d9c20f5aeff2f2685a172e339c6a19e5', d: "M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z", fill: "#0086C9" }), h("path", { key: '2efb76c51e4c25bcf4d054108736fdab25319306', d: "M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10", stroke: "white", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: '7c36878dc56fd1feb25097e434079133d1c8fb67' }, h("clipPath", { key: '2366d1b62478c51dcdd908b68bce62ed0988cecf', id: "clip0_0_21453" }, h("rect", { key: '29a6eb47fb4d141e080f78b12c648bcd7f0e3b2b', width: "32", height: "32", fill: "white" }))))), this.statusIcon === 'company' && (h("svg", { key: 'a1bb73a03c78d1e19fcd09a8e8aead5e855b27b5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `company ${this.size}` }, h("path", { key: '7ae6009ebabd57ed53e0a6bae81eeb28c8ba3041', d: "M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z", fill: "#FF0033", stroke: "white", "stroke-width": "1.5" }), h("path", { key: '5ffc0311b525a30cf78f8a379e3a0b2f216cd2f6', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z", fill: "white" })))),
+            h("div", { key: '42a5b1dd77f41e15adffc089a273bcc5a72dc286' }, this.statusIcon === 'online_indicator' && h("div", { key: '39a28dda66704b6c9e28d7455b5d21bacbc8a07d', class: `online_icon ${this.size} ${this.indicatorStateClass}` }), this.statusIcon === 'verified' && (h("svg", { key: '2fffe835fd0c662461b9bdd69731abb547cd293b', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", class: `verified ${this.size}` }, h("g", { key: 'de1c368c05b8c02182e65aaa21460f918ed9b961', "clip-path": "url(#clip0_0_21453)" }, h("path", { key: '30e6c87dfe9be7f7fc56f33c29a3d4cc03535a17', d: "M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z", fill: "#0086C9" }), h("path", { key: 'f11fba07f0f79ecb7955329effd2a50ec6fd870d', d: "M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10", stroke: "white", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: '9dc4ba9115614005777a0b3aee83a13eead1253a' }, h("clipPath", { key: 'b230098efa672a78bcd826e756bb3427d07fe628', id: "clip0_0_21453" }, h("rect", { key: '0d839638d6e8e19599d927d84fb9e71119ced07d', width: "32", height: "32", fill: "white" }))))), this.statusIcon === 'company' && (h("svg", { key: 'dd04af564e9a9d76193bd532b0fff91b91c91e1d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `company ${this.size}` }, h("path", { key: '97d5e6811c3653b5dfd4814dacf6d24f199c68ee', d: "M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z", fill: "#FF0033", stroke: "white", "stroke-width": "1.5" }), h("path", { key: '28843428ee07db593d428224a9838b7deb5f2c77', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z", fill: "white" })))),
         ];
     }
     static get is() { return "gb-status-indicator"; }

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js

@@ -42,12 +42,12 @@ export class GbTabButtonBase {
         this.tabClicked.emit();
     }
     render() {
-        return (h("div", { key: 'fffa4fde43c38180011ca179e88ae0201241fa20', class: `tab_button_div ${this.type}
+        return (h("div", { key: '1778d861d0bd58e7ee7eed1e145166de518e8fa1', class: `tab_button_div ${this.type}
       ${this.current ? 'current' : ''} 
       ${this.fullWidth ? 'full_width' : ''} 
-      ${this.size}`, onClick: () => this.handleClick() }, h("p", { key: '5b12afa39fd0ad0e86d2c534dd775cbff709b474', class: `${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: 'b87d0c8a0a9afb0008f10bbc6fac2bd5db419ba6', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary' ? 'information' :
+      ${this.size}`, onClick: () => this.handleClick() }, h("p", { key: '5acb9e6de5f04d1fc22670bb5e8bd0dd65231346', class: `${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: '00cd9fdbf64ba485713b014d27b98dcac6b1061a', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary' ? 'information' :
                 this.current && this.type === 'underline' ? 'information' :
-                    this.current && this.type === 'line' ? 'information' : 'gray' }, h("slot", { key: '54fdcd9b6bbd08cd3251806934da82333c6ecf17', name: "count" })))));
+                    this.current && this.type === 'line' ? 'information' : 'gray' }, h("slot", { key: '46fead5bdadc5d9d1df04dc741ca3e05a8c6f086', name: "count" })))));
     }
     static get is() { return "gb-tab-button-base"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class GbTag {
     }
     render() {
         const flagSwap = getAssetPath(`${this.flagSwap}`);
-        return (h("div", { key: 'c74491af471363a7c0b6fab5363a8dbd828339bd', class: `container ${this.size}` }, h("div", { key: '8ae56cd5676393fe35f6b2c07164c383774a3f53', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: '40d5914b2d5464406b80f17e49f920e0dae345fc', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '6f8318d585b96d17c97f324b82a3617e4182d259', class: "icon left-icon" }, h("img", { key: '167c41b34bfc7ffb11b0d9e1218f2c0fe8f27cdd', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'dab51082375836183bf90afcecaf45589bd9da1d', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: 'b2ca2b8df7dc9e346b3d93f02845ae92300aef3f', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: '6462e5d547c8984b8df60e235e349764581b3b7c', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'f2f2c5f891c98670feb8f51581e9ea66391bda67', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("slot", { key: 'e3ce2d6febbce3886417a5ce815bed631fed090e' }), this.action === 'count' && (h("gb-tag-count", { key: '8334b145471d222d063d83320178b01d07123b2e', size: this.size }, h("slot", { key: '1274fc35a79433df406e9e3256659d6caffe6a95', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: '5e22aba047b9a4441f3fb04d89228d563df35047', size: this.size, onClick: () => this.onTagClose() })));
+        return (h("div", { key: 'd27a5dd9389afeb512ac8403b3b75215b5b3fa6f', class: `container ${this.size}` }, h("div", { key: '318b9ecb101f07807715a0f3a35a759b7f43f9d5', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: 'afecd28a817bd1c54fbb0789faf3227d517a8529', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '5a2832de77bc947c0c313b854f037b34b0c26cfd', class: "icon left-icon" }, h("img", { key: '1cf1ebca312d77f41df343158d3b375dd593d1b7', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'ba6df2bdb0c77dc974ee49710f3a6d1056349f86', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: 'f406e400490954a5eba31dc45d2c619e823a5f6a', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: 'b8c982504b8bcc7467e76619da3aa753623f2849', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'cff78e636f3ea81b1dc41b32a15fece0b7e8bbc1', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("slot", { key: '280f379bbf84a355da498cb29d7f837760256390' }), this.action === 'count' && (h("gb-tag-count", { key: '5e26bc8baf439bf29e385cd26060c2fb988d4040', size: this.size }, h("slot", { key: '6f8c62aa865c5a044e7669d794f7ed6b61ddb60c', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: 'd6a10a0b93519e861249e76c5551cb50d2d633f6', size: this.size, onClick: () => this.onTagClose() })));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-checkbox/gb-tag-checkbox.js

@@ -6,7 +6,7 @@ export class GbTagCheckbox {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: 'a96d0b469aba985bad7eeece4d5a3728f6469b64', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'a54cf4db80468a2a03f4a213918df8a212ca1d6b', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: 'bf16276d2e864a069b27181f1769583848c2df66', class: `custom-checkbox ${this.size}` }, h("svg", { key: 'a56b21a9e498f810d3b4620775c3b92bb0a5cf88', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '7d78764736b492c9e041c0344192f93adafc6bcc', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("label", { key: '9c702f2aeb34f194dd50214359bd8f972ad7711b', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '9924aab49b21c5bd74ccef2d91c463d40f150647', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: 'afe22e38b335537240418d530305fde1be5b9918', class: `custom-checkbox ${this.size}` }, h("svg", { key: '09437bb1f1cd4c01f9a15c07649c17b29c111e97', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'fb6fbdfba89b006e2a1300e0abc2462a26660ebd', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-tag-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-close/gb-tag-close.js

@@ -4,7 +4,7 @@ export class GbTagClose {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: 'cd334c6d7810a873606ee1138962dee5f0bc1a92', class: this.size }, h("svg", { key: '4cdf2fea404b80d0e480d85d961d81132d07b6eb', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '2b056a446193f4d9c311e719cba6ce63c4a7118c', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '473b412fd01c6795b76504956997701051669605', class: this.size }, h("svg", { key: '1190a2f4df67a1d215c23aa9d0a8bdea70058725', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '95da6217f9fb830090f3655a0f2f6dfd4932c902', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-tag-close"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-count/gb-tag-count.js

@@ -4,7 +4,7 @@ export class GbTagCount {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: 'd843f4c9670c9013ef4edd2b5aa88484b27e2125', class: this.size }, h("slot", { key: 'ffb5f2b96bb4b493fa6cdd25702752f0ab268c95', name: "count" })));
+        return (h("div", { key: '9a14e581caa59652bff61a0daae1647b11a79da0', class: this.size }, h("slot", { key: '138e42d0b12f8543250d6f677aeb36e86a1eb729', name: "count" })));
     }
     static get is() { return "gb-tag-count"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class GbToast {
         slottedSupportingText.classList.add(this.getSupportingColorClasses());
     }
     render() {
-        return (h("div", { key: '0efe2f00fd0e41bcc4f186044649454055994386', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'e8d63879a9ac479df21bf3fc57f2ccdc32be41e4', class: `icon_container` }, h("svg", { key: '61d390f7f85b1003b9d56084e525fdc9de13e9f8', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '4e2c62f4931ced57c670ee379be3a3700bd80a26', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '9b68683a639bd58e817509f578b484dd54893dc1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'e76fbe4d01c589c89b38b24b34b6c5cef49ab179', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '98843ba7edd437375712c5ff1432464f6cb3ec21', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: '2dfa12d558e4ed0f6e5014d1dd8ce7f19635e12a', class: `text ${this.size}` }, h("slot", { key: '6d61dda620311e440f4d751cb6ecfe5bf6fcc67c', name: "main_text" }), this.showSupportingText && h("slot", { key: '75c4ba5d0b9ae8b8b10b8b8e45f4e0c7b937da16', name: "supporting_text" })), this.actions && (h("div", { key: 'f478d18428ad60f920b26d858f69dba441eb1a60', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '1d3a89bb0515355d0de885d6c5431f23263b9a81', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: '7f18e82958b8c940fc5e22a04ef6b3c0c2766335', class: `container ${this.breakpoint}` }, h("div", { key: '2d3e7d11187798ba1142923a7ef58e5f8321f5cb', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'c8589a2f575ca19a00bb0453c474f56e22e349b0', class: `inner_content ${this.breakpoint}` }, h("div", { key: '19ed8e0cdf9f00511623658f86b0fbcf8eb072a8', class: `icon_container` }, h("svg", { key: 'e1871e5a0b5b8e0d7db17367503399fd07b31388', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'e6f8adde4c9c34d15b20708cdea4ac6655c08a4c', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'b28cf39a897dee772702c174a2ce05f5fea65266', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '7019ee4c06db96a774990b67283a3fc0b7b4ae7e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '5d8d7bb9853a43056fb54cc6ecf10c0545453fb1', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '200e72b0050ef2b05299c7b853a513905b20eafe', name: "main_text" }), this.showSupportingText && h("slot", { key: 'df3c6a18e179d258e9681ec9689e2595eb1e6377', name: "supporting_text" }))), this.actions && (h("div", { key: '815b0d66a244ce7897b075ce7db70330f00ca01f', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: 'cce5d891807d71cfe29c254407f32265ce039551', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}` }))))));
+        return (h("div", { key: '116e3fb9fc00beced5fcaeb5f4110f2f52a600d6', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'a76c64aaea5aa1f3e23e295431178c90e74e0f41', class: `icon_container` }, h("svg", { key: '5ab3eb748678b7bf1770b18b8e7773cd7142dff1', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '37f48eca091da88e0bf2ef265976d6f977a95a27', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'b6c368b9fe59e336faba67c663591112d370141a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'fb7577cdde26a7c147ee2d776398172f42096723', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '163fc70bdd3963b1a6cf82df777d32994354447d', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: '637fc6a268b7b4a5f204db9364055ed1362c0b45', class: `text ${this.size}` }, h("slot", { key: '6d8f75b5e9593625d428c20f814b1b9fb59e2b8c', name: "main_text" }), this.showSupportingText && h("slot", { key: 'f659d16208a5a98dbbe0f5904914c24735b43c9d', name: "supporting_text" })), this.actions && (h("div", { key: '2a8721e603392be4635527d748a43c063ed580f1', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '6ead76f71938c63845e594d11b96ae3a7ed897a5', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: 'ff91ac1e5462bb1f3e97cf6503ba2333d21dbe90', class: `container ${this.breakpoint}` }, h("div", { key: '400a7632477ae14af87cd63e2c4e4d26d48d18dc', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'cab5178d6ef61a2a45bf651bffa753c467965a36', class: `inner_content ${this.breakpoint}` }, h("div", { key: 'd38607b9f14e6e7da186100cc9efe3d4cea863c6', class: `icon_container` }, h("svg", { key: '14df52ed9f4cb43624e35e3ddc2e82de800078a5', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '50db8f531eb951a33bf18ecf9443503bc6deaff7', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'dde47fbe28df46ea5960157374df190054b004a0', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '7df67957683662a5ea3fabde355594acb87ea724', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: 'cab5a48bd4b7f6c87e9b1c312f708ca43a5d64ca', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: 'c2767c0bc9487d7a31014468ee8083b1d33c5fb0', name: "main_text" }), this.showSupportingText && h("slot", { key: 'a0cc1f12b2affb194c9f3a6e6fe04fa262ab085b', name: "supporting_text" }))), this.actions && (h("div", { key: '549ac0506efd6146aab340ab013aceba7cc3f25b', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: '37c8af69b6d6c78e90c2e896597962cee8cfc08c', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}` }))))));
     }
     static get is() { return "gb-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-toast-button/gb-toast-button.js

@@ -9,7 +9,7 @@ export class GbToastButton {
         slottedContent.classList.add('text-sm-semi-bold');
     }
     render() {
-        return (h("div", { key: '8b3f00566cee02e3e455dd91c32668b010df6687', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: 'a56c1719ef3e0995be63339ecd2e9641b243e8bc' })));
+        return (h("div", { key: '872834bdb155bc2878d005832b5e721e0ad77085', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '9c1163fb45d204a95441f5854483017dd027e2a9' })));
     }
     static get is() { return "gb-toast-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class GbToggle {
         }
     }
     render() {
-        return (h("div", { key: '8c0cd7881bd9a6fc457915ea7aac0ae971c9744b', class: `toggle_div ${this.size}` }, h("div", { key: '82f9a522add2d5fd8d0e36105e7c1c207260ffc6', class: "toggle_base" }, h("gb-toggle-base", { key: '76f8bf2833f9af886ca7757693c1b53508b73f4c', size: this.size, state: this.state, pressed: this.pressed })), h("div", { key: '2df514b782020c3c8a210edf15c763133f08d31f', class: "text" }, h("slot", { key: 'b7cd03595e51f6c88e2bb76cd9765b9ddd73e4d5', name: "main_text" }), this.supportingText && (h("slot", { key: '8fe4f2fecc298776a8bb98118edb71ab75169bb8', name: "supporting_text" })))));
+        return (h("div", { key: '2635a9a56d41a60817baf7176ac27fb002c17238', class: `toggle_div ${this.size}` }, h("div", { key: '40b4ff2e29faae0a974e05f06a10c6415f556f65', class: "toggle_base" }, h("gb-toggle-base", { key: 'd06d0b8a964e8eb26958822f6436c3d808d2049a', size: this.size, state: this.state, pressed: this.pressed })), h("div", { key: 'e8476161d3968abc6e319feab14da7d78245c363', class: "text" }, h("slot", { key: '65f3e936d2163bd77a0cd6732e94168bda6ed9ed', name: "main_text" }), this.supportingText && (h("slot", { key: '011b2adb2f2679d0b0fd9ff7bdc5aacad12792d7', name: "supporting_text" })))));
     }
     static get is() { return "gb-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-toggle-base/gb-toggle-base.js

@@ -13,8 +13,8 @@ export class GbToggleBase {
     }
     render() {
         return [
-            h("input", { key: '4b6cd7a9e8570f2d956f6961dc2b42e17628a0cd', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
-            h("label", { key: 'e09b090b0ad5fc380543be54cbfec7c7f39838bb', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
+            h("input", { key: '5801342437d31f313b766b81d8664b9b76e453be', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
+            h("label", { key: '5f6b984683e50899405961d9d874f9649a998103', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
         ];
     }
     static get is() { return "gb-toggle-base"; }

package/dist/collection/components/gb-token-field/gb-token-field.js

@@ -9,7 +9,7 @@ export class GbTokenField {
         this.supportingText = '';
     }
     render() {
-        return (h("div", { key: '6548a0e28f5a5fe36b769c3046c4771097cca415', class: this.size }, h("div", { key: 'cd1af41aaf047faa8eaf79f532a62e2e6abc4758', class: "input-with-label" }, this.showLabel && (h("label", { key: '3c145538899f97e72bfddf02c5ea2633f5003cc8' }, this.label)), this.digits === 4 && (h("div", { key: 'ea2281a2494839c78a578af458ae5647feedebe5', class: "input-wrapper" }, h("gb-megainput-field", { key: 'eb5f7cdd0e8ea96431c1d893796c9b3aaae5d5fe', size: this.size }), h("gb-megainput-field", { key: 'b727cc8bc251a126e82ec3b9641fb14139719d01', size: this.size }), h("gb-megainput-field", { key: 'b70a27fc84c27de2c2df6717b4852e2b001ee16c', size: this.size }), h("gb-megainput-field", { key: '05afc7b6fce01e90b86a2f0be44862b547d60e29', size: this.size }))), this.digits === 6 && (h("div", { key: 'bba7896521acd5142af12950d8f7e6c72fa69430', class: "input-wrapper" }, h("div", { key: '3d61ae4484a1ddd33b75554fc4131467309508a6', class: "first=section" }, h("gb-megainput-field", { key: 'e1196ca1a095a26260c7f2a834e8f1232590037b', size: this.size }), h("gb-megainput-field", { key: '2fa0031e07c9a1796c9cb1537906111593e3ee77', size: this.size }), h("gb-megainput-field", { key: 'acc732cdc50dfce9f21837064a68d8020c22c162', size: this.size })), h("div", { key: '370698b69fd643005d07ed6fbd34432cf54361fc', class: "second=section" }, h("gb-megainput-field", { key: 'c90ac207447dc90c81a595689d4a3d737f466b18', size: this.size }), h("gb-megainput-field", { key: 'ed5827c781cf9c1c12c1554202586e2e1ca9a520', size: this.size }), h("gb-megainput-field", { key: '603b170bfef4a698e71bc23817c9046c0cdbe5e0', size: this.size })))), this.digits === 8 && (h("div", { key: '707da6b83574375b7f9ad658e5d71f2a2f863bd7', class: "input-wrapper" }, h("div", { key: '2d5c1d714f6c65aa32d66c702cca5dd0398fec55', class: "first=section" }, h("gb-megainput-field", { key: '726afbea2848dc7ade2d0dcbabbe3ea6a38c5d9f', size: this.size }), h("gb-megainput-field", { key: 'b1825b5eb4b24b12173fcab9304587fb5699621a', size: this.size }), h("gb-megainput-field", { key: '2bc3a26e21950674b539b76bab0cd3b51466544f', size: this.size }), h("gb-megainput-field", { key: 'ee4af9320cb46eccabb789ffe4b0ffddf69148ed', size: this.size })), h("div", { key: 'ef48fedd06a3be1aac06fba24d471eb12f91a9b9', class: "second=section" }, h("gb-megainput-field", { key: 'aa0104431f855b4b6766660250e932a99da2cd4f', size: this.size }), h("gb-megainput-field", { key: '027afbc2eb8d51a7fdd43ac4758348f0293fe791', size: this.size }), h("gb-megainput-field", { key: '9f431ce748650758d98e7fc19cc4de615d87bf79', size: this.size }), h("gb-megainput-field", { key: '4cdc8968d460511d51004b3193a65fee32dc1768', size: this.size }))))), h("p", { key: '8455f9e6839a4ed6f6ec3368ac5cda0c58e2e245' }, this.supportingText)));
+        return (h("div", { key: '4de80309d7a55733df1055ac7e348addd8423976', class: this.size }, h("div", { key: '9ab198d32696b5c0154dab6c07bfc334a61a4e60', class: "input-with-label" }, this.showLabel && (h("label", { key: '33a1b96a9fb2918e93869cadfbadbfa98c70cc90' }, this.label)), this.digits === 4 && (h("div", { key: '3d7995a6cb3776024d62d86e8e063de30ac3f3c3', class: "input-wrapper" }, h("gb-megainput-field", { key: '29cf564d0aaecf266ebc152d4ae3e6a66510fff7', size: this.size }), h("gb-megainput-field", { key: '553eab9119efbd1cfbc238eb915f2cae9f160b9c', size: this.size }), h("gb-megainput-field", { key: '596b969ce9ad413282749000165244225bac9803', size: this.size }), h("gb-megainput-field", { key: 'afab5cf4e77956e58bee87eb1acf3505a47cf698', size: this.size }))), this.digits === 6 && (h("div", { key: '28968628d96221f67fb5933198407f70ad076909', class: "input-wrapper" }, h("div", { key: 'e4b5043a4e0b7bb006b3ab600ac83432b61b10d3', class: "first=section" }, h("gb-megainput-field", { key: '770c30040c141ffba3824e250f6735342d4028a6', size: this.size }), h("gb-megainput-field", { key: 'fe9f90c5b35f895bb5fe4e73e7907b7b7c775185', size: this.size }), h("gb-megainput-field", { key: 'd2fb247661ca02aac789208c2acf7c9b89ab35b2', size: this.size })), h("div", { key: '46d57fd298496d17696a0e1de9bc853c3ae48217', class: "second=section" }, h("gb-megainput-field", { key: '26a267db6115436819506f7d3a1154b8262d16c7', size: this.size }), h("gb-megainput-field", { key: 'f4b50f496859af8eb30a4c1ef0758b35f61edff5', size: this.size }), h("gb-megainput-field", { key: 'a2ed803acf6683455e080e57cf815030c5fc4881', size: this.size })))), this.digits === 8 && (h("div", { key: 'd9600daa66204f5c6b1d89a7e6a83a0b05941b10', class: "input-wrapper" }, h("div", { key: 'eeea68f613e48e7fa41a62be7d63606a9bff9c25', class: "first=section" }, h("gb-megainput-field", { key: '2c02bc245e052dd11a01c2565fbdf28ce32d2e73', size: this.size }), h("gb-megainput-field", { key: '763d7b886b3ba810051fb337bec158e8e64eea43', size: this.size }), h("gb-megainput-field", { key: 'af45f918881bae1b055d8325529871b5073efd68', size: this.size }), h("gb-megainput-field", { key: 'f2c9d87e08d51477dc4ec120369535cb3550499a', size: this.size })), h("div", { key: '9005f84e4ff0eef58a02263f4f9f37b60adc8431', class: "second=section" }, h("gb-megainput-field", { key: '7657af90fbe61a537e37f878a73cc02ab66236b1', size: this.size }), h("gb-megainput-field", { key: '1323dabd625f99386bc4579ef8b4366bf6a22f3b', size: this.size }), h("gb-megainput-field", { key: '78eaa4ad62b81dc575d2e2d023d28b3c651469e8', size: this.size }), h("gb-megainput-field", { key: '1dfa31092192b9aec8b63f3b720dcb90b5c5709a', size: this.size }))))), h("p", { key: '49ddb3d29747e38c192d5f6b7145038730397013' }, this.supportingText)));
     }
     static get is() { return "gb-token-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class GbTooltip {
         return this.showArrow ? `arrow ${this.arrow}` : '';
     }
     render() {
-        return (h("div", { key: 'c52dcc2366ce0e92e0c4335957018daa5ece90e2', class: "tooltip_container" }, h("div", { key: '5a80d42677c360dcdbe778fc4930e179d629fb78', class: "tooltip" }, h("div", { key: '49e8029d7285d5fcc511a06c21e4ee38f058e1f5', class: this.getArrowClass() }), h("div", { key: 'a6ef0aa73d11c9ef6dbbf56d6f984adc2f88c724', class: "tooltip_content" }, h("slot", { key: '3bee9cc701ed686d0a7ebd9ed21298af99acba64', name: "label" }), this.showSupportingText && h("slot", { key: '9c0c765a41ea2bc2cdaecbdba860385302a584d7', name: "supporting_text" })))));
+        return (h("div", { key: 'f512e86a40b8f96c6ccd321f41ac25ff2666974f', class: "tooltip_container" }, h("div", { key: 'b9e06f2cfa5b34429987134a58d20abe692d271c', class: "tooltip" }, h("div", { key: 'eaeb73b063e725b3be2ce7ee9817b8905df2a4c3', class: this.getArrowClass() }), h("div", { key: 'fc490075cd99856093b4dbebc6ab8ccbf52ccd90', class: "tooltip_content" }, h("slot", { key: '0b7c6efde9f18c3efa6b62868720e5521444012d', name: "label" }), this.showSupportingText && h("slot", { key: '529c68397881d2e99a772d6ecbcb39dd9057799b', name: "supporting_text" })))));
     }
     static get is() { return "gb-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-verification-code-field/gb-verification-code-field.js

@@ -9,11 +9,11 @@ export class GbVerificationCodeField {
         this.hintText = '';
     }
     render() {
-        return (h("div", { key: 'cd81e558fea128c94c49439ef667f0ca8de69376', class: {
+        return (h("div", { key: '4878fbd6be8492d11ae3b96477432f2a5f77f2e8', class: {
                 container: true,
                 [this.size]: true,
                 [this.digits]: true,
-            } }, h("div", { key: 'b0b8a0fb74f195a1343132d5c3dac883a15abe18', class: "input-with-label" }, this.showLabel && (h("label", { key: '653822c712ab9fc7698ca78f7fef71205dbd7a9c', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: 'd5c9e9d63da086b4c23740d025b44c8eb5699450', class: "input-wrapper" }, h("gb-megainput-field", { key: 'ff3fef9632a75d554702c845dc3c1ac02b58d8ea', size: this.size }), h("gb-megainput-field", { key: '306cc9311425607d9c765c95a83cdcaa0f05c5cf', size: this.size }), h("gb-megainput-field", { key: '9aae946032fb57e32df1beb241c02adca1760ce2', size: this.size }), h("gb-megainput-field", { key: '7ad4b0b13cd4301539580978ab8172ace37c3cee', size: this.size }))), this.digits === 6 && (h("div", { key: '76a1023c16032ba702d583e93c88f84d4901ef81', class: "input-wrapper" }, h("gb-megainput-field", { key: '312222ab55157ddc5bc0866c83d15c05237d7e52', size: this.size }), h("gb-megainput-field", { key: 'ed27e5a56cfe727dad591c3f00ac58e416ac5631', size: this.size }), h("gb-megainput-field", { key: 'b1a62c03784a94a1f560a7210a7c87387c15f018', size: this.size }), h("p", { key: '0e3b1f74ddce6d8819b474e862d5691477403c9f', class: "line display-sm-bold" }, "-"), h("gb-megainput-field", { key: 'cf8f62b80b0c787042234b058a924ed22a37968d', size: this.size }), h("gb-megainput-field", { key: '5afe0825185a64823f3b5f15b2f1b7536e57404f', size: this.size }), h("gb-megainput-field", { key: '4e706ee675df89d144f5199cf7a66f1138f3b3c7', size: this.size }))), this.digits === 8 && (h("div", { key: '7b628b6f7e812812947385f49ec73a5bf0479891', class: "input-wrapper" }, h("gb-megainput-field", { key: 'ba035fd6c681aab1fa2e1890aeb36273fe86113a', size: this.size }), h("gb-megainput-field", { key: '111cac9c1dbffa1a7810e93cd5fc6b4b2022ac44', size: this.size }), h("gb-megainput-field", { key: '3702ed985c7aa57be5ac0ae96dc7db5e93e49cf8', size: this.size }), h("gb-megainput-field", { key: 'aa43e0072f4f838aa1617ab8b3b7eb9a667d905a', size: this.size }), h("p", { key: '39230b478453e0ba0ae57e5d51503d5dceae65d2', class: "line display-sm-bold" }, "-"), h("gb-megainput-field", { key: '5ec45fae7e7c127666c2888af635950837a2284b', size: this.size }), h("gb-megainput-field", { key: '92c5e8f8f5eec895ebc62e672c661e1b876d00cb', size: this.size }), h("gb-megainput-field", { key: '6ca04b12f790b5c6260ac70351c845412a05815f', size: this.size }), h("gb-megainput-field", { key: 'a7fed023400d208d0e9c5633231621114b586efb', size: this.size })))), this.showHintText && (h("div", { key: '06d35db104d3cb3f0ec1f2e753b255888b15f87f', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
+            } }, h("div", { key: '9be0a94ec67eaf1a68a6f395d6065f6570e2b451', class: "input-with-label" }, this.showLabel && (h("label", { key: '840e8447cb9671cc5ee55cfd6ee2400ada533e58', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: '14f112f9eb7a9588158d000a2dbc78feb8342b94', class: "input-wrapper" }, h("gb-megainput-field", { key: '8bc43d67815067d85e619d2dcf9ad98bcc885297', size: this.size }), h("gb-megainput-field", { key: '1a11349c2bdba0d650b986c668e614736b2133f4', size: this.size }), h("gb-megainput-field", { key: '2102057e9bbe7ae69856fe46050cf301bf04f41d', size: this.size }), h("gb-megainput-field", { key: '6f02d4e139590aaf67e87f1a714f3484eb96b44e', size: this.size }))), this.digits === 6 && (h("div", { key: '6669dbe523abf7f4dc7607046e1f5dad6ccfbd8e', class: "input-wrapper" }, h("gb-megainput-field", { key: '5ed8237b700b5c7c274953cf51483fbb36c5c9b6', size: this.size }), h("gb-megainput-field", { key: '8d3904d1eda0c4dd5abad7aad527ebf0c67d3dfa', size: this.size }), h("gb-megainput-field", { key: '25cc5e590951574a3229a6037275e3d11a6ef002', size: this.size }), h("p", { key: 'd5187615bff0843bc0892a98d2bc6d29852d3405', class: "line display-sm-bold" }, "-"), h("gb-megainput-field", { key: '948d9e8d24a5d6bad72c2299e760e04f0a87fb90', size: this.size }), h("gb-megainput-field", { key: '33145dfa066ad78281019574bc888b3e418670dd', size: this.size }), h("gb-megainput-field", { key: '6bdbd80b7135622723c02d5ce62c838e0fe3b685', size: this.size }))), this.digits === 8 && (h("div", { key: '77624d32b6884c2074879ab66017243889d328fb', class: "input-wrapper" }, h("gb-megainput-field", { key: '8ed6f4240c71e1003c51cb4e0e5d98aed115a8c5', size: this.size }), h("gb-megainput-field", { key: '6d37a98357120910d712ba909355b71112890875', size: this.size }), h("gb-megainput-field", { key: 'f6c8f23d684fc41accd1d7b5e653b9af47f2cd1c', size: this.size }), h("gb-megainput-field", { key: '97ba6b3b62b5f7e5a1e4d7ded5aa8ea534634473', size: this.size }), h("p", { key: '618007bcdfe02c3fe093b030cd7265616a0d83c4', class: "line display-sm-bold" }, "-"), h("gb-megainput-field", { key: '0703d886c14b59106df2728c048a1b646dd23d5a', size: this.size }), h("gb-megainput-field", { key: 'f5eadfb67ce7a0d2f527f5d2742ad062ab6fd21a', size: this.size }), h("gb-megainput-field", { key: '719620fc703a013960908a939d989d664dd05e48', size: this.size }), h("gb-megainput-field", { key: 'aa8eb381a92e906d31a790cc200d2ff8c0b6a73a', size: this.size })))), this.showHintText && (h("div", { key: 'ed029e47d6ef985f5cf03336871c62909b7486b6', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
     }
     static get is() { return "gb-verification-code-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/test-input-tag/test-input-tag.js

@@ -74,7 +74,7 @@ export class TestInputTag {
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (h("div", { key: '8bad8372b5bea93609307bb7036858652f3f8c49', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: '9d8444b09692d0841e743ecd300ae2a42c5d931c', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '67e31e8b47e2b3ef66a25ebc10d79a9f4abc5730', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '54e1c188e26599173f1bebcdcc2fb3def5ff8c95', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '8ddb3cba3659f72ab4612da325cf956bef05e83f', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
+        return (h("div", { key: 'f38c4206960ee90f2ae7df587ba1bf0dbc5f9e67', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: '75ad43707e5d2f9100b238a4d55aac0d817b0cf7', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '62343bb7416cb866668a3e4ba218b17e3239639b', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '3a8435b75a60b6bd97d30d5d45c805dcb55b9362', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '3137dcb62dd6cfe03347e16ec6a489289eb72913', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -83,7 +83,7 @@ export class TestInputTag {
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'ea997cf4aa0e8e4aafe27b23f3d1f930cd884caf', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'd5098796a74b4ce41f740f8e7fb39dfe9f48fc32', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>

package/dist/collection/models/reusableModels.js.map

@@ -1 +1 @@
-{"version":3,"file":"reusableModels.js","sourceRoot":"","sources":["../../src/models/reusableModels.ts"],"names":[],"mappings":"AAIA,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,kCAAqB,CAAA;AACzB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAMD,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACrB,yCAAwB,CAAA;IACxB,gCAAe,CAAA;IACf,oCAAmB,CAAA;IACnB,gCAAe,CAAA;AACnB,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAAA,CAAC;AAEF,MAAM,CAAN,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC7B,0CAAiB,CAAA;IACjB,4CAAmB,CAAA;AACvB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,QAGhC","sourcesContent":["export type GeneralSizes = 'xl4' | 'xl3' | 'xl2' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\r\n\r\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\r\n\r\nexport enum StateEnum {\r\n    Default = 'default',\r\n    Disabled = 'disabled'\r\n}\r\n\r\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none';\r\n\r\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\r\n\r\nexport enum BorderWeights {\r\n    VeryLight = 'very_light',\r\n    Light = 'light',\r\n    Regular = 'regular',\r\n    Heavy = 'heavy'\r\n};\r\n\r\nexport enum OnlineIndicatorStates {\r\n    Online = 'online',\r\n    Offline = 'offline'\r\n}\r\n\r\nexport type BreakPoints = 'desktop' | 'mobile';\r\n\r\nexport type FileUploadIconType = 'icon' | 'outline';\r\n\r\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\r\n\r\nexport type FileType = '';\r\n\r\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple';\r\n\r\nexport type PaginationNumberShapes = 'square' | 'circle';\r\n\r\nexport type PaginationTypes =\r\n  | 'page_default'\r\n  | 'page_minimal_center_aligned'\r\n  | 'card_default'\r\n  | 'card_minimal_right_aligned'\r\n  | 'card_minimal_left_aligned'\r\n  | 'card_minimal_center_aligned'\r\n  | 'card_button_group_ right_aligned'\r\n  | 'card_button_group_left_aligned'\r\n  | 'card_button_group_center_aligned';\r\n\r\nexport type TabTypes = 'button_primary' | 'button_gray' | 'button_white' | 'rounded_button_white' | 'underline' | 'underline_filled' | 'line' | 'button_white_border' | 'rounded_button_white_border';\r\n\r\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\r\n\r\nexport type InputFieldTypes =\r\n  | 'default'\r\n  | 'icon_leading'\r\n  | 'leading_dropdown'\r\n  | 'trailing_dropdown'\r\n  | 'leading_text'\r\n  | 'payment_input'\r\n  | 'tags'\r\n  | 'trailing_button'\r\n  | 'password'\r\n  | 'password_icon_leading'\r\n  | 'count';\r\n\r\n  export type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags'; \r\n\r\n  export type AvatarColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow';\r\n\r\n  export type DropdownItemTypes = string | number | { name: string; username: string, selected?: boolean };"]}
+{"version":3,"file":"reusableModels.js","sourceRoot":"","sources":["../../src/models/reusableModels.ts"],"names":[],"mappings":"AAIA,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,kCAAqB,CAAA;AACzB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAMD,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACrB,yCAAwB,CAAA;IACxB,gCAAe,CAAA;IACf,oCAAmB,CAAA;IACnB,gCAAe,CAAA;AACnB,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAAA,CAAC;AAEF,MAAM,CAAN,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC7B,0CAAiB,CAAA;IACjB,4CAAmB,CAAA;AACvB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,QAGhC","sourcesContent":["export type GeneralSizes = 'xl4' | 'xl3' | 'xl2' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\r\n\r\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\r\n\r\nexport enum StateEnum {\r\n    Default = 'default',\r\n    Disabled = 'disabled'\r\n}\r\n\r\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none';\r\n\r\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\r\n\r\nexport enum BorderWeights {\r\n    VeryLight = 'very_light',\r\n    Light = 'light',\r\n    Regular = 'regular',\r\n    Heavy = 'heavy'\r\n};\r\n\r\nexport enum OnlineIndicatorStates {\r\n    Online = 'online',\r\n    Offline = 'offline'\r\n}\r\n\r\nexport type BreakPoints = 'desktop' | 'mobile';\r\n\r\nexport type FileUploadIconType = 'icon' | 'outline';\r\n\r\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\r\n\r\nexport type FileType = '';\r\n\r\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple';\r\n\r\nexport type PaginationNumberShapes = 'square' | 'circle';\r\n\r\nexport type PaginationTypes =\r\n  | 'page_default'\r\n  | 'page_minimal_center_aligned'\r\n  | 'card_default'\r\n  | 'card_minimal_right_aligned'\r\n  | 'card_minimal_left_aligned'\r\n  | 'card_minimal_center_aligned'\r\n  | 'card_button_group_right_aligned'\r\n  | 'card_button_group_left_aligned'\r\n  | 'card_button_group_center_aligned';\r\n\r\nexport type TabTypes = 'button_primary' | 'button_gray' | 'button_white' | 'rounded_button_white' | 'underline' | 'underline_filled' | 'line' | 'button_white_border' | 'rounded_button_white_border';\r\n\r\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\r\n\r\nexport type InputFieldTypes =\r\n  | 'default'\r\n  | 'icon_leading'\r\n  | 'leading_dropdown'\r\n  | 'trailing_dropdown'\r\n  | 'leading_text'\r\n  | 'payment_input'\r\n  | 'tags'\r\n  | 'trailing_button'\r\n  | 'password'\r\n  | 'password_icon_leading'\r\n  | 'count';\r\n\r\n  export type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags'; \r\n\r\n  export type AvatarColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow';\r\n\r\n  export type DropdownItemTypes = string | number | { name: string; username: string, selected?: boolean };"]}

package/dist/components/gb-avatar-add-button.js

@@ -1,4 +1,4 @@
-import { G as GbAvatarAddButton$1, d as defineCustomElement$1 } from './p-8710e0f4.js';
+import { G as GbAvatarAddButton$1, d as defineCustomElement$1 } from './p-26d70a53.js';
 
 const GbAvatarAddButton = GbAvatarAddButton$1;
 const defineCustomElement = defineCustomElement$1;