globuswebcomponents 0.7.7 → 0.7.9

package/dist/collection/components/gb-avatar-label-group/gb-avatar-label-group.js

@@ -84,7 +84,7 @@ export class GbAvatarLabelGroup {
         }
     }
     render() {
-        return (h("div", { key: '5f2c54ae558d8814641dc255ec5ffc0c25760514', class: `label ${this.size}` }, h("div", { key: '3383b3072f0e63411aec7d6be9a713f2cb25f5f2', class: "label_pic" }, h("gb-avatar", { key: 'e8f295e79f31ca07ccd8a335206b5b8310f5e16b', size: this.size, "status-icon": this.statusIcon, state: this.state, text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder }, !this.text ? h("slot", { name: "image", slot: "image" }) : h("slot", { name: "initials", slot: "initials" }))), h("div", { key: 'bdb214547b65670913878c095c5676666b467134', class: "label_text" }, h("slot", { key: '1d95e060dac41a698b01afd9644901f3eefb4c00', name: "name" }), h("slot", { key: '6c4200a6f96884db8c756ac5f7e3b31c5f89691d', name: "supporting_text" }))));
+        return (h("div", { key: '5f2c54ae558d8814641dc255ec5ffc0c25760514', class: `label ${this.size}` }, h("div", { key: '3383b3072f0e63411aec7d6be9a713f2cb25f5f2', class: "label_pic" }, h("gb-avatar", { key: 'e2861b5cf028d0eeb98de58149bacdc0fae0f4a4', size: this.size, "status-icon": this.statusIcon, state: this.state, text: true, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder }, !this.text ? h("slot", { name: "image", slot: "image" }) : h("slot", { name: "initials", slot: "initials" }))), h("div", { key: 'c1b9a18624e6cc5e90c944fe4b06baca26bcb95f', class: "label_text" }, h("slot", { key: 'd72e4291097f11800ad7f5c3093dc2ac60abdebe', name: "name" }), h("slot", { key: '5068d1209aacbd4a5a122b662d49dc27d9e2e31c', name: "supporting_text" }))));
     }
     static get is() { return "gb-avatar-label-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-avatar-label-group/gb-avatar-label-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-avatar-label-group.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-label-group/gb-avatar-label-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAkC,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAOpG,MAAM,OAAO,kBAAkB;;;0BAEA,EAAE;qBACQ,qBAAqB,CAAC,MAAM;2BACpC,KAAK;oBACZ,KAAK;;0BAEC,KAAK;;IAGnC,eAAe;QACb,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,KAAK;gBACR,OAAO,sBAAsB,CAAC;YAChC,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,WAAW;QACT,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;QACpB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACxD,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAErE,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;YACtD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAC7D,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,EAAE;YAC9B,4DAAK,KAAK,EAAC,WAAW;gBACpB,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,UAAU,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,iBACJ,IAAI,CAAC,UAAU,IAE3B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAC3F,CACR;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-label-group',\r\n  styleUrl: 'gb-avatar-label-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarLabelGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() statusIcon: string = '';\r\n  @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  getInitialsSize() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'display-xs-semi-bold';\r\n      case 'xl':\r\n        return 'text-xl-semi-bold';\r\n      case 'lg':\r\n        return 'text-lg-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n    }\r\n  }\r\n\r\n  getNameSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-lg-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  getOtherTextSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const othersSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add(this.getInitialsSize());\r\n      slottedInitials.classList.add(this.applyColorToInitials());\r\n    }\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add(this.getNameSize());\r\n    }\r\n\r\n    if (othersSlot) {\r\n      othersSlot.classList.add(this.getOtherTextSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`label ${this.size}`}>\r\n        <div class=\"label_pic\">\r\n          <gb-avatar\r\n            size={this.size}\r\n            status-icon={this.statusIcon}\r\n            state={this.state}\r\n            text={this.text}\r\n            placeholder={this.placeholder}\r\n            color={this.color}\r\n            show-border={this.showBorder}\r\n          >\r\n            {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n          </gb-avatar>\r\n        </div>\r\n        <div class=\"label_text\">\r\n          <slot name=\"name\"></slot>\r\n          <slot name=\"supporting_text\"></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-avatar-label-group.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-label-group/gb-avatar-label-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-label-group',\r\n  styleUrl: 'gb-avatar-label-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarLabelGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() statusIcon: string = '';\r\n  @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  getInitialsSize() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'display-xs-semi-bold';\r\n      case 'xl':\r\n        return 'text-xl-semi-bold';\r\n      case 'lg':\r\n        return 'text-lg-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n    }\r\n  }\r\n\r\n  getNameSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-lg-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  getOtherTextSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const othersSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add(this.getInitialsSize());\r\n      slottedInitials.classList.add(this.applyColorToInitials());\r\n    }\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add(this.getNameSize());\r\n    }\r\n\r\n    if (othersSlot) {\r\n      othersSlot.classList.add(this.getOtherTextSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`label ${this.size}`}>\r\n        <div class=\"label_pic\">\r\n          <gb-avatar\r\n            size={this.size}\r\n            status-icon={this.statusIcon}\r\n            state={this.state}\r\n            text={true}\r\n            placeholder={this.placeholder}\r\n            color={this.color}\r\n            show-border={this.showBorder}\r\n          >\r\n            {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n          </gb-avatar>\r\n        </div>\r\n        <div class=\"label_text\">\r\n          <slot name=\"name\"></slot>\r\n          <slot name=\"supporting_text\"></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-avatar-profile-photo/gb-avatar-profile-photo.css

@@ -2663,7 +2663,7 @@
     position: relative;
     width: fit-content;
     height: fit-content;
-    background-color: #FFFFFF;
+    background-color: var(--color-border-inverse, #FFFFFF);
     border-radius: var(--rounded-full);
     box-shadow: var(--shadow-md);
     padding: 0.2rem;
@@ -2675,12 +2675,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #EEF2F6;
+    background-color: var(--color-background-gray-subtler, #EEF2F6);
     border-radius: var(--rounded-full);
 }
 
 ::slotted(h1){
-    color: #4B5565;
+    color: var(--color-text, #4B5565);
 }
 
 .user_avatar.sm{

package/dist/collection/components/gb-badge-close/gb-badge-close.css

@@ -2688,69 +2688,65 @@ div.gray, div.primary, div.error, div.warning, div.success, div.discovery, div.i
 }
 
 div.gray path{
-    stroke: #667085; 
+    stroke: var(--color-icon, #4B5565); 
 }
 
 div.primary path{
-    stroke: #212C65;
+    stroke: var(--color-icon-brandDarkBlue, #212C65);
 }
 
 div.error path{
-    stroke: #F04438;
+    stroke: var(--color-icon-danger, #B51726);
 }
 
 div.warning path{
-    stroke: #DC6803;
+    stroke: var(--color-icon-warning, #DC6803);
 }
 
 div.success path{
-    stroke: #079455; 
+    stroke: var(--color-icon-success, #079455); 
 }
 
 div.discovery path{
-    stroke: #0086C9;
+    stroke: var(--color-icon-discovery, #0086C9);
 }
 
 div.information path{
-    stroke: #064E94;
+    stroke: var(--color-icon-information, #064E94);
 }
 
 div.pink path{
-    stroke: #DD2590; 
+    stroke: var(--color-icon-pink, #DD2590); 
 }
 
 div.gray:hover {
-    background: #EEF2F6;
+    background: var(--color-background-gray-subtler, #EEF2F6);
 }
 
 div.primary:hover {
-    background: #C8E0F9;
-}
-
-div.error:hover path{
-    stroke: #D92D20;
+    background: var(--color-background-information-subtler, #C8E0F9);
 }
 
 div.error:hover {
-    background: var(--Error-100, #FEE4E2);
+    background: var(--color-background-danger-subtler, #FDE3E5);
 }
 
 div.warning:hover {
-    background: #FEF0C7;
+    background: var(--color-background-warning-subtler, #FEF0C7);
 }
 
 div.success:hover {
-    background: #DCFAE6;
+    background: var(--color-background-success-subtler, #DCFAE6);
 }
 
 div.discovery:hover {
-    background: #E0F2FE;
+    background: var(--color-background-discovery-subtler, #E0F2FE);
 }
 
 div.information:hover {
-    background: #C8E0F9;
+    background: var(--color-background-information-subtler, #C8E0F9);
 }
 
 div.pink:hover {
-    background: #FCE7F6;
+    background: var(--color-background-pink-subtler, #FCE7F6);
 }

package/dist/collection/components/gb-badges/gb-badges.css

@@ -2709,8 +2709,8 @@ div.pill_color {
 
 div.pill_color.gray,
 .badge_color.gray {
-    border: 1px solid var(--color-boarder-subtler, #E3E8EF);
-    background: var(--color-background-gray-subtler, #EEF2F6 );
+    border: 1px solid var(--color-border-subtler, #E3E8EF);
+    background: var(--color-background-gray-subtler, #EEF2F6);
     color: var(--color-text, #4B5565);
 }
 
@@ -2751,7 +2751,7 @@ div.pill_color.gray,
 
 .pill_color.information,
 .badge_color.information {
-    border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;
+    border: 1px solid var(--color-border-information-subtler, #C8E0F9);
     background: var(--color-background-information-subtlest, #E4F0FC);
     color: var(--color-text-information, #064E94);
 }
@@ -2807,7 +2807,7 @@ div.pill_color.gray,
 
 .discovery svg path {
     fill: #0BA5EC;
-    stroke: #0BA5EC/*Blue light/500*/;
+    stroke: #0BA5EC/*Blue light/500*/; /**/
 }
 
 .information svg path {

package/dist/collection/components/gb-carousel-arrow/gb-carousel-arrow.css

@@ -2666,7 +2666,7 @@
     backdrop-filter: var(--blur-sm);
     width: fit-content;
     height: fit-content;
-    background-color: blue;
+    background-color: var(--color-background-card, #FFFFFF);
 }
 
 .carousel_arrow.md{

package/dist/collection/components/gb-checkbox/gb-checkbox.css

@@ -2692,5 +2692,5 @@
 }
 
 ::slotted(p){
-    color: #4B5565;
+    color: var(--color-text, #4B5565);
 }

package/dist/collection/components/gb-checkbox-base/gb-checkbox-base.css

@@ -2681,31 +2681,31 @@ svg.md{
 }
 
 .checkbox_default_unchecked.hover:hover path{
-    stroke: #075DB2;
+    stroke: var(--color-border-selected, #075DB2);
 }
 
 .checkbox_default_checked:hover path, .checkbox_default_indeterminate:hover path{
-    fill: #064E94;
+    fill: var(--color-background-information, #064E94);
 }
 
 .checkbox_default_checked:hover .border, .checkbox_default_indeterminate:hover .border{
-    stroke: #064E94;
+    stroke: var(--color-border-information, #064E94);
 }
 
 /* Radio Styles */
 .radio_default_unchecked:hover rect{
-    stroke: #075DB2;
+    stroke: var(--color-border-selected, #075DB2);
 }
 
 /* Check Circle Styles */
 .circle_default_unchecked:hover rect{
-    stroke: #075DB2;
+    stroke: var(--color-border-selected, #075DB2);
 }
 
 .circle_default_checked:hover rect{
-    stroke: #064E94;
+    stroke: var(--color-border-information, #064E94);
 }
 
 .circle_default_checked:hover .background {
-    fill: #064E94;
+    fill: var(--color-background-information, #064E94);
 }

package/dist/collection/components/gb-checkbox-group-item/gb-checkbox-group-item.css

@@ -2664,7 +2664,7 @@
   justify-content: space-between;
   align-items: center;
   background-color: #f0f7ff;
-  border: 0.0625rem solid #cce0ff;
+  border: 1px solid var(--color-border-subtler, #E3E8EF);
   border-radius: 0.5rem;
   padding: 1rem;
   margin-bottom: 0.5rem;
@@ -2682,8 +2682,8 @@
 
 
 .checkbox_group_item.selected {
-  border: 2px solid var(--color-border-selected,#075DB2);/* Checked border color */
-  background: var(--color-background-information-subtlest,#E4F0FC);/* Checked background color */
+  border: 2px solid var(--color-border-selected, #075DB2);/* Checked border color */
+  background: var(--color-background-information-subtlest, #E4F0FC);/* Checked background color */
 }
 
 .icon_simple_svg{
@@ -2692,8 +2692,8 @@
 
 /* i'm using this to apply the hover effect but its turning white on hover??? */
 .checkbox_group_item:hover {
-  background: var(--color-background-information-subtler,#C8E0F9); 
-  border-color: var(--color-border-selected,#075DB2);
+  background: var(--color-background-information-subtler, #C8E0F9); 
+  border-color: var(--color-border-selected, #075DB2);
 }
 
 /* i'm using this to change icon color on hover */
@@ -2702,11 +2702,6 @@
   fill: var(--color-icon-information,#064E94); 
 }
 
-.checkbox_group_item.checked {
-  background-color: #e6f2ff;
-  border-color: #0066cc;
-}
-
 .item-content {
   display: flex;
   flex: 1 0 0;

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.js

@@ -11,8 +11,8 @@ export class GbDropdownShortcut {
         this.state = 'default';
     }
     render() {
-        const iconSrc = this.iconSrc ? getAssetPath(`assets/${this.iconSrc}.svg`) : '';
-        return (h("div", { key: '327bc3ad3042e914da9608de35dd0f5f4443f6c8', class: "shortcut-container" }, h("div", { key: 'b640709994574dd0cada2289cca40009788fdd3d', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''}` }, this.icon && (h("div", { key: 'a87a8d10a9d224b50400bb9816030aa8a3d0621d', class: "icon" }, h("img", { key: '35857ec7b04802630f7740599247316cfcfb0a6c', src: iconSrc, alt: "Icon" }))), this.checkbox && !this.icon && (h("gb-checkbox", { key: '02adcc64c2d51ce61058b8a2e9e7f41b8550553e', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("span", { key: 'a71ef9f7cb8e11802c3d4ae318d7acffc23f30a5', class: "label" }, h("p", { key: 'aab2e2c391b87300016aad0fac226430a4e14a0e', class: `text-sm-medium` }, this.label)), this.shortcut && (h("span", { key: '3e7f3575cca2f3686a4b00523e020bf15d7bbd98', class: "shortcut-icon" }, h("slot", { key: '2672de83624c4b92733f8f149dfadb8179ba5bc1' }, "\u2318", this.shortcutIcon))))));
+        const iconSrc = this.iconSrc ? getAssetPath(`${this.iconSrc}`) : '';
+        return (h("div", { key: 'ffc76244eb167fa040f3bf07c9dc0ad0d91dbc7c', class: "shortcut-container" }, h("div", { key: '6a4c0bf22f32d6b0d26520f2fc4cf71d2860a2af', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''}` }, this.icon && (h("div", { key: '1c9ceda3fa7b419013d0317d292da5bc4b35e8cf', class: "icon" }, h("img", { key: '5b2f0a5d1e9db9ca3d3d9086cd23c84c5e4e4181', src: iconSrc, alt: "Icon" }))), this.checkbox && !this.icon && (h("gb-checkbox", { key: 'd8916c0644829d6b6eed287fac04384be8388749', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("span", { key: '60d5f9cd9b91028ca2af7b55cec554f9a57d6cfb', class: "label" }, h("p", { key: '1ee98b5cea850312e35032d019c603e1dfde933d', class: `text-sm-medium` }, this.label)), this.shortcut && (h("span", { key: 'b76cde37a96caa8cdd0b9df55ea39ca527907aa3', class: "shortcut-icon" }, h("slot", { key: 'c43e8939bf477e7d70b7ad5a530dd0bd0ba68346' }, "\u2318", this.shortcutIcon))))));
     }
     static get is() { return "gb-dropdown-items-with-shortcut"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-dropdown-items-with-shortcut.js","sourceRoot":"","sources":["../../../src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQvD,MAAM,OAAO,kBAAkB;;oBACH,KAAK;;wBAED,KAAK;;4BAEF,GAAG;qBACV,EAAE;qBACc,SAAS;;IAGjD,MAAM;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,IAAI,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC3B,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAChE,IAAI,CAAC,IAAI,IAAI,CACV,4DAAK,KAAK,EAAC,MAAM;oBACb,4DAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,MAAM,GAAO,CAClC,CACT;gBACA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAC5B,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,CACnG;gBACD,6DAAM,KAAK,EAAC,OAAO;oBACf,0DAAG,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,KAAK,CAAK,CACzC;gBACN,IAAI,CAAC,QAAQ,IAAI,CACd,6DAAM,KAAK,EAAC,eAAe;oBACvB;;wBAAQ,IAAI,CAAC,YAAY,CAAQ,CAC9B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h, getAssetPath, Element} from '@stencil/core';\r\nimport {StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-dropdown-items-with-shortcut',\r\n    styleUrl: 'gb-dropdown-items-with-shortcut.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbDropdownShortcut {\r\n    @Prop() icon: boolean = false;\r\n    @Prop() iconSrc: string;\r\n    @Prop() checkbox: boolean = false;\r\n    @Prop() shortcut: boolean;\r\n    @Prop() shortcutIcon: string = 'C';\r\n    @Prop() label: string = '';\r\n    @Prop() state: 'default' | 'disabled' = 'default';\r\n    @Element() el: HTMLElement;\r\n\r\n    render() {\r\n        const iconSrc = this.iconSrc ? getAssetPath(`assets/${this.iconSrc}.svg`) : '';\r\n\r\n        return (\r\n            <div class=\"shortcut-container\">\r\n                <div class={`shortcut ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n                    {this.icon && (\r\n                        <div class=\"icon\">\r\n                            <img src={iconSrc} alt=\"Icon\"></img>\r\n                        </div>\r\n                    )}\r\n                    {this.checkbox && !this.icon && (\r\n                        <gb-checkbox class=\"checkbox\" size=\"sm\" type='checkbox' state={StateEnum.Default}></gb-checkbox>\r\n                    )}\r\n                    <span class=\"label\">\r\n                        <p class={`text-sm-medium`}>{this.label}</p>\r\n                    </span>\r\n                    {this.shortcut && (\r\n                        <span class=\"shortcut-icon\">\r\n                            <slot>⌘{this.shortcutIcon}</slot>\r\n                        </span>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"gb-dropdown-items-with-shortcut.js","sourceRoot":"","sources":["../../../src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQvD,MAAM,OAAO,kBAAkB;;oBACH,KAAK;;wBAED,KAAK;;4BAEF,GAAG;qBACV,EAAE;qBACc,SAAS;;IAGjD,MAAM;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpE,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC3B,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAChE,IAAI,CAAC,IAAI,IAAI,CACV,4DAAK,KAAK,EAAC,MAAM;oBACb,4DAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,MAAM,GAAO,CAClC,CACT;gBACA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAC5B,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,CACnG;gBACD,6DAAM,KAAK,EAAC,OAAO;oBACf,0DAAG,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,KAAK,CAAK,CACzC;gBACN,IAAI,CAAC,QAAQ,IAAI,CACd,6DAAM,KAAK,EAAC,eAAe;oBACvB;;wBAAQ,IAAI,CAAC,YAAY,CAAQ,CAC9B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h, getAssetPath, Element} from '@stencil/core';\r\nimport {StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-dropdown-items-with-shortcut',\r\n    styleUrl: 'gb-dropdown-items-with-shortcut.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbDropdownShortcut {\r\n    @Prop() icon: boolean = false;\r\n    @Prop() iconSrc: string;\r\n    @Prop() checkbox: boolean = false;\r\n    @Prop() shortcut: boolean;\r\n    @Prop() shortcutIcon: string = 'C';\r\n    @Prop() label: string = '';\r\n    @Prop() state: 'default' | 'disabled' = 'default';\r\n    @Element() el: HTMLElement;\r\n\r\n    render() {\r\n        const iconSrc = this.iconSrc ? getAssetPath(`${this.iconSrc}`) : '';\r\n\r\n        return (\r\n            <div class=\"shortcut-container\">\r\n                <div class={`shortcut ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n                    {this.icon && (\r\n                        <div class=\"icon\">\r\n                            <img src={iconSrc} alt=\"Icon\"></img>\r\n                        </div>\r\n                    )}\r\n                    {this.checkbox && !this.icon && (\r\n                        <gb-checkbox class=\"checkbox\" size=\"sm\" type='checkbox' state={StateEnum.Default}></gb-checkbox>\r\n                    )}\r\n                    <span class=\"label\">\r\n                        <p class={`text-sm-medium`}>{this.label}</p>\r\n                    </span>\r\n                    {this.shortcut && (\r\n                        <span class=\"shortcut-icon\">\r\n                            <slot>⌘{this.shortcutIcon}</slot>\r\n                        </span>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n"]}

package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.css

@@ -2779,11 +2779,18 @@ svg.disabled path{
     background: var(--color-surface, #FFFFFF);
     box-shadow: var(--shadow-sm);
     position: absolute;
-    top: 75%;
     z-index: 10;
     gap: var(--spacing-none);
 }
 
+.dropdown_menu.top{
+    bottom: 79%;
+}
+
+.dropdown_menu.bottom{
+    top: 79%;
+}
+
 /* .input_dropdown_div.sm.tag{
     min-height: 2.5rem;
 } */

package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js

@@ -15,10 +15,19 @@ export class GbInputDropdown {
         this.iconSwap = '';
         this.text = false;
         this.leadingIcon = '';
-        this.items = undefined;
+        this.icon = undefined;
+        this.items = [
+            { name: 'Mock Item A', username: 'A', selected: false },
+            { name: 'Mock Item B', username: 'B', selected: false },
+            { name: 'Mock Item C', username: 'C', selected: false },
+            // 45, 50, 20, 25, 90
+            // 'Activated',
+            // 'Deactivated',
+        ];
         this.supportingText = false;
         this.color = undefined;
         this.showBorder = false;
+        this.menuPosition = undefined;
         this.leadingIconSvg = '';
         this.dropdownOpen = false;
         this.selectedItems = [];
@@ -68,39 +77,35 @@ export class GbInputDropdown {
         });
     }
     handleItemSelect(item) {
-        // item.selected = !item.selected;
         if (this.type === 'tags') {
             const itemExists = this.selectedItems.some(i => i.name === item.name);
             if (itemExists) {
+                // Unselect item if it exists
                 this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);
                 item.selected = false;
-                if (!this.unselectedItems.includes(item)) {
-                    this.unselectedItems = [...this.unselectedItems, item];
-                }
+                this.unselectedItems = [...this.unselectedItems, item];
             }
             else {
-                this.selectedItem = item;
+                // Select item
                 item.selected = true;
-                this.selectedItems.push(this.selectedItem);
-                if (item.selected) {
-                    this.unselectedItems = this.unselectedItems.filter(unselectedItem => unselectedItem !== item);
-                }
-                else {
-                    this.unselectedItems = [...this.unselectedItems, item];
-                }
-                this.dropdownValue.emit(this.selectedItems);
+                this.selectedItems = [...this.selectedItems, item];
+                this.unselectedItems = this.unselectedItems.filter(unselectedItem => unselectedItem.name !== item.name);
             }
-            // Update the state based on whether there are selected items
-            this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
+            // Emit selected items for tags
+            this.dropdownValue.emit(this.selectedItems);
         }
         else {
-            // For other types, allow only one selection
-            this.selectedItems = [item]; // Replace with the new item
-            this.selectedItem = item; // Store the selected item
-            this.state = 'filled'; // Update state to 'filled'
-            this.dropdownOpen = false; // Close the dropdown
+            // For single selection types (non-tags)
+            this.selectedItem = item;
+            this.selectedItems = [item]; // Ensure only one item is selected
+            this.state = 'filled';
+            // Emit the single selected item
             this.dropdownValue.emit(this.selectedItem);
+            // Close dropdown after selection
+            this.dropdownOpen = false;
         }
+        // Update the dropdown state
+        this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
     }
     handleTagRemove(item) {
         // Remove the item from selectedItems array
@@ -125,22 +130,26 @@ export class GbInputDropdown {
     }
     componentWillLoad() {
         this.loadIcon(this.leadingIcon);
-        if (this.type === 'tags') {
-            // this.unselectedItems = this.items.filter(item => !item.selected);
+        if (this.items && this.items.every(item => typeof item === 'object')) {
+            if (this.type === 'tags') {
+                this.selectedItems = this.items.filter(item => item.selected);
+                this.unselectedItems = this.items.filter(item => !item.selected);
+            }
+        }
+        else if (this.items && this.items.every(item => typeof item === 'string' || 'number')) {
+            this.selectedItem = this.items.find(item => item) || null;
         }
     }
     componentDidLoad() {
-        const items = [
-            { name: 'Emmanuel Kadiri', username: 'KD', selected: false }
-        ];
-        this.items = items;
         if (this.type !== 'tags') {
             document.addEventListener('click', this.handleClickOutside);
         }
         const slottedInitials = this.el.querySelector('[slot="initials"]');
         const mainTextSlot = this.el.querySelector('[slot="tooltip_label"]');
         const supportingTextSlot = this.el.querySelector('[slot="tooltip_supporting_text"]');
-        slottedInitials.classList.add('text-xxs-semi-bold');
+        if (slottedInitials) {
+            slottedInitials.classList.add('text-xxs-semi-bold');
+        }
         if (mainTextSlot) {
             mainTextSlot.classList.add('text-xs-semi-bold');
         }
@@ -168,12 +177,15 @@ export class GbInputDropdown {
     }
     render() {
         return [
-            h("div", { key: 'b162d0d989912651b277c891f7a750bf49b78e38', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, h("div", { key: 'c7d27624aa0c92f5506ef762b683335365f9b8e4', class: `input_with_label` }, this.showLabel && (h("p", { key: '471c6055bc0bf002ed57da7fedb44088d1df066b', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), h("div", { key: '2fb6413b10b638dedeb3d5c6e4569f7285ba7c4a', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (h("svg", { key: '38fbbe8b0ddb3fe2f1ec095a8163544b011afdbf', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '93afc71d7139c8b038940c4fdb7a6d4df5bc4eb3', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), h("path", { key: '210a2a321ecfdccac5f6f75b8a1c5212f4b3accb', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: 'cc1d7fce7ef21c76e8d251648135e5425e01fbc0', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f2ef4ae0793c8313ffd2a7e7b99b07769153227d', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '1c4766778c4c0c53fd778ff14a7498a3e269bce5', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: '372a6e77a97a9a47802e2701a01aa4a879fb0232', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: 'a2ae6a81ee7a747e270ffaf81ea0e346a370ec6a', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: 'eec00c3eac93e5adbee1afb9988049055d4310de', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: '0a37bde1f1abbbd9f1515c34153214dc0361bac9', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: 'ec59e5b8ad84e8e1492c9ef984cdab490470c2e3', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '2c02f7054edd57d57cbd0a0337af37bf5103c4c2', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '1396282c48e9ad04e4771ee4acc5c41c35d3573a', class: `content` }, h("div", { key: 'd253b45fe8bda9f4066fda877a9e7fa21d7d55b5', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
-                ? this.selectedItems.map((item, index) => (h("div", { class: "added_tag" }, h("gb-tag", { size: "sm", icon: "avatar", action: "X_close", key: index, onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))))))
-                : this.selectedItem.name), this.supportingText && (h("div", { key: '1d9e051bc6a8e04e8d61a1c41d5bc75fb13fea91', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type === 'tags'
+            h("div", { key: '57edecd764c0d2c1340ae375d43fb76cc4cffad0', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, h("div", { key: '1a34a4a64bf899380c715ee3245ade6b48bb8a1a', class: `input_with_label` }, this.showLabel && (h("p", { key: '7bd87f6e29436a52621ce3194cc61bea8577f4cf', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: 'f66ea18c26007ca0f102f9afeb7e1b71af5c11a9', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (h("svg", { key: '16bbce3dc7391d49d1909f7a2b8ff1972e31b239', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'b04976e25ecaebc67b5ba4ae5eb8d367ad4dfe37', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), h("path", { key: '87c1a2e84deba31ef986ab0642564a6a4d30e54c', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: 'b2ff6f2ad501801111a7c9b4d9b285a7bbe864b2', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '12b42e2bd7b6f19f099f9915a75a36531d95adfb', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '6a4b241271e6a4c65c4cdc33265d954522be66a2', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: '22a4374d3945137ac7787a39b95f108300a1268e', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: 'a0b72143fa9c7f94cac96382851eb0f71ca8ea05', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: '2750782db73d641637b8ce1bcadb1ae78db21b7d', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: '26aa5529c2136c02c72a8256d623dfdbdcb9c836', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '42d8c5eb3881f855346f37f3109261080a4f9ac3', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '209195ea3b0bd35878eb284a3bcdc363f14a1267', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '9f4547009d644a7ea0b499b09b3626245a095878', class: `content` }, h("div", { key: 'c0f1f845e475e05bdb868b4bd3cb873936b51146', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' && (h(Fragment, null, this.selectedItems.map((item, index) => {
+                {
+                    typeof item === 'object' ? (h("div", { class: "added_tag" }, h("gb-tag", { size: "sm", icon: !this.icon ? 'avatar' : this.icon, action: "X_close", key: index, onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))))) : ((console.log(item),
+                        (h("div", { class: "added_tag" }, h("gb-tag", { size: "sm", icon: "avatar", action: "X_close", key: index, onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))));
+                }
+            })))), this.supportingText && (h("div", { key: '12a5a7a97be35fd54c658fa2be10d207080b5133', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type === 'tags'
                 ? this.selectedItems.map(item => item.username).join(', ') // For multiple selections
-                : this.selectedItem.username))))))), this.showHelpIcon && (h("div", { key: '87c1510ff18a936a60b0d625e167e7ecee772fdf', class: `help_icon` }, h("gb-help-tooltip", { key: 'fc416316825f97edf5e122909ed2142874af2f55', "show-supporting-text": true }, h("slot", { key: 'e7ab70259e004aab8c354bea2309de621ba0817d', name: "tooltip_label", slot: "label" }), h("slot", { key: '16f65a45f88f22465778b0b3c308ba440e5c641f', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '0e9f073a97c2dbaa30ab8ec8f78ec35f759de52b', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'f659efb7fc8b1f04eb5702af958fe85e30899279', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'cfcb4d8676b0613b81cba27da7eaf8d2b8f06c11', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.showHintText && (h("p", { key: 'd1df95d52cf5938eda86acd96c55bb2a5251b9b4', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
-            h(Fragment, null, this.dropdownOpen && (h("div", { key: '60ed459f6557557f4a127575c047dde4e636601e', class: "dropdown_menu", ref: el => (this.dropdownRef = el) }, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))))) : (h(Fragment, null, this.items.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item)))))))))),
+                : this.selectedItem.username))))))), this.showHelpIcon && (h("div", { key: 'f2e095111e3a029f90c8776c226655dd201da43c', class: `help_icon` }, h("gb-help-tooltip", { key: '17043b56f1dceed08c1e1396889243556aa228e2', "show-supporting-text": true }, h("slot", { key: '0969f825553e4a8f340b04801029590df8973165', name: "tooltip_label", slot: "label" }), h("slot", { key: '9bdf38f89b2c062b6f06e2d178f83ba21a9f0bb4', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '7d486401bf3640e3b40192777c2b57cc42336185', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '6a5d7abfdce85c1ac8e0fda066602e7a7df30933', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'a535964818bf614ea11e150f07a686ae5bb197af', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.showHintText && (h("p", { key: 'b7713e1e0ed6d75ab3d091c6e7a8420a03e04944', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
+            h(Fragment, null, this.dropdownOpen && (h("div", { key: 'bbf327874b48b04e1b91be36988e319dca76f12f', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el) }, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))))) : (h(Fragment, null, this.items.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", { slot: "supporting_text" }, "@", item.username))) : (typeof item === 'string' && (console.log(item), (h("p", { slot: "name" }, item)))))))))))),
         ];
     }
     static get is() { return "gb-input-dropdown"; }
@@ -431,16 +443,34 @@ export class GbInputDropdown {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'country' | 'avatar' | 'dot'",
+                    "resolved": "\"avatar\" | \"country\" | \"dot\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
             "items": {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "Array<{ name: string; username: string; selected: boolean } | number>",
-                    "resolved": "(number | { name: string; username: string; selected: boolean; })[]",
+                    "original": "DropdownItemTypes[]",
+                    "resolved": "DropdownItemTypes[]",
                     "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
+                        "DropdownItemTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownItemTypes"
                         }
                     }
                 },
@@ -449,7 +479,8 @@ export class GbInputDropdown {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "defaultValue": "[\r\n    { name: 'Mock Item A', username: 'A', selected: false },\r\n    { name: 'Mock Item B', username: 'B', selected: false },\r\n    { name: 'Mock Item C', username: 'C', selected: false },\r\n\r\n    // 45, 50, 20, 25, 90\r\n\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n  ]"
             },
             "supportingText": {
                 "type": "boolean",
@@ -509,6 +540,23 @@ export class GbInputDropdown {
                 "attribute": "show-border",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "menuPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | ' bottom'",
+                    "resolved": "\" bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-position",
+                "reflect": false
             }
         };
     }