globuswebcomponents 0.2.6 → 0.2.9

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

@@ -0,0 +1,205 @@
+import { h } from "@stencil/core";
+import { BorderWeights, OnlineIndicatorStates } from "../../models/reusableModels";
+export class GbAvatar {
+    constructor() {
+        this.size = undefined;
+        this.placeholder = false;
+        this.text = false;
+        this.statusIcon = '';
+        this.state = OnlineIndicatorStates.Online;
+        this.icon = 'user';
+        this.weight = BorderWeights.Light;
+    }
+    getInitialsSize() {
+        switch (this.size) {
+            case 'xl2': return 'display-xs-semi-bold';
+            case 'xl': return 'text-xl-semi-bold';
+            case 'lg': return 'text-lg-semi-bold';
+            case 'md': return 'text-md-semi-bold';
+            case 'sm': return 'text-sm-semi-bold';
+            case 'xs': return 'text-xs-semi-bold';
+        }
+    }
+    setWeight() {
+        switch (this.size) {
+            case 'xl2': return BorderWeights.Regular;
+            case 'xl': return BorderWeights.Regular;
+            case 'lg': return BorderWeights.Regular;
+            case 'md': return BorderWeights.Regular;
+            case 'sm': return BorderWeights.Light;
+            case 'xs': return BorderWeights.Light;
+        }
+    }
+    componentDidLoad() {
+        const slottedInitials = this.el.querySelector('h1');
+        if (slottedInitials) {
+            slottedInitials.classList.add(this.getInitialsSize());
+        }
+    }
+    render() {
+        return [
+            h("div", { key: '2405b168e6bc38b5d564313efe9789a318a8afde', class: "avatar" }, h("gb-avatar-contrast-inner-border", { key: 'e1b3e6286f5596feeee642a5c16ac28045248d3a', "border-size": this.size, weight: this.weight }, h("div", { key: '5665b5b1b60f34661a82dfeef302304a03df98db', class: `inner_content ${this.size}` }, !this.text ? (h("slot", { name: "image" })) : (h("div", { class: "initials" }, h("slot", { name: "initials" }))), this.placeholder && (h("div", { key: '30bdaa4070c13e61db1700ec57aa3cab4405c247', class: `placeholder` }, this.icon === 'user' && (h("svg", { key: 'baf42456d037b93ac547cd94362ca6b6d2526ebf', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `user_avatar ${this.size}` }, h("path", { key: 'a0065e7c86516f4286717f025ebc23952cb49da9', d: "M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z", fill: "#697586" }), h("path", { key: '18cd8b9103d9f748eea5c5b59c424d64aa05e811', d: "M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z", fill: "#697586" }))))))), h("gb-status-indicator", { key: '44ba3e4a9de19031098c2e2b93bde0f98f4f1e16', class: `indicator ${this.size}`, "status-icon": this.statusIcon, size: this.size, state: this.state }))
+        ];
+    }
+    static get is() { return "gb-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "statusIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "status-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "OnlineIndicatorStates",
+                    "resolved": "OnlineIndicatorStates.Offline | OnlineIndicatorStates.Online",
+                    "references": {
+                        "OnlineIndicatorStates": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::OnlineIndicatorStates"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "OnlineIndicatorStates.Online"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'user'",
+                    "resolved": "\"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "'user'"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BorderWeights",
+                    "resolved": "BorderWeights.Heavy | BorderWeights.Light | BorderWeights.Regular",
+                    "references": {
+                        "BorderWeights": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::BorderWeights"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "BorderWeights.Light"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-avatar.js","sourceRoot":"","sources":["../../../src/components/gb-avatar/gb-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAgB,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAQjG,MAAM,OAAO,QAAQ;;;2BAEc,KAAK;oBACZ,KAAK;0BACA,EAAE;qBACQ,qBAAqB,CAAC,MAAM;oBAC5C,MAAM;sBAEG,aAAa,CAAC,KAAK;;IAEnD,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,KAAK,CAAC,CAAC,OAAO,sBAAsB,CAAC;YAC1C,KAAK,IAAI,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACtC,KAAK,IAAI,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACtC,KAAK,IAAI,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACtC,KAAK,IAAI,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACtC,KAAK,IAAI,CAAC,CAAC,OAAO,mBAAmB,CAAC;QAC1C,CAAC;IACL,CAAC;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,KAAM,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YAC1C,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YACzC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YACzC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YACzC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;QAC3C,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE,CAAC;YAClB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO;YACH,4DAAK,KAAK,EAAC,QAAQ;gBACf,uGAA8C,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;oBACxE,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE;wBAClC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,IAAI,EAAC,OAAO,GAAQ,CAC7B,CAAC,CAAC,CAAC,CACA,WAAK,KAAK,EAAC,UAAU;4BACjB,YAAM,IAAI,EAAC,UAAU,GAAQ,CAC3B,CACT;wBACC,IAAI,CAAC,WAAW,IAAI,CAClB,4DAAK,KAAK,EAAE,aAAa,IACnB,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACtB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE;4BAC5H,6DAAM,CAAC,EAAC,siBAAsiB,EAAC,IAAI,EAAC,SAAS,GAAE;4BAC/jB,6DAAM,CAAC,EAAC,sNAAsN,EAAC,IAAI,EAAC,SAAS,GAAE,CAC7O,CACT,CACC,CACT,CACC,CACwB;gBAClC,4EAAqB,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE,iBACvC,IAAI,CAAC,UAAU,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACM,CACrB;SACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar',\r\n    styleUrl: 'gb-avatar.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatar {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() statusIcon: string = '';\r\n    @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n    @Prop() icon: 'user' = 'user';\r\n    @Element() el: HTMLElement;\r\n    @Prop() weight: BorderWeights = BorderWeights.Light;\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'xl2': return 'display-xs-semi-bold';\r\n            case 'xl': return 'text-xl-semi-bold';\r\n            case 'lg': return 'text-lg-semi-bold';\r\n            case 'md': return 'text-md-semi-bold';\r\n            case 'sm': return 'text-sm-semi-bold';\r\n            case 'xs': return 'text-xs-semi-bold';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'xl2' : return BorderWeights.Regular;\r\n            case 'xl' : return BorderWeights.Regular;\r\n            case 'lg' : return BorderWeights.Regular;\r\n            case 'md' : return BorderWeights.Regular;\r\n            case 'sm' : return BorderWeights.Light;\r\n            case 'xs' : return BorderWeights.Light;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return [\r\n            <div class=\"avatar\">\r\n                <gb-avatar-contrast-inner-border border-size={this.size} weight={this.weight}>\r\n                    <div class={`inner_content ${this.size}`}>\r\n                        { !this.text ? (\r\n                            <slot name=\"image\"></slot>\r\n                        ) : (\r\n                            <div class=\"initials\">\r\n                                <slot name=\"initials\"></slot>\r\n                            </div>\r\n                        )}\r\n                        { this.placeholder && (\r\n                            <div class={`placeholder`}>\r\n                                { this.icon === 'user' && (\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size}`}>\r\n                                        <path d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\" fill=\"#697586\"/>\r\n                                        <path d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\" fill=\"#697586\"/>\r\n                                    </svg>\r\n                                )}\r\n                            </div>\r\n                        )}\r\n                    </div>\r\n                </gb-avatar-contrast-inner-border>\r\n                <gb-status-indicator class={`indicator ${this.size}`}\r\n                status-icon={this.statusIcon}\r\n                size={this.size} \r\n                state={this.state}\r\n                ></gb-status-indicator>\r\n            </div>\r\n        ]\r\n    }\r\n}"]}

package/dist/collection/components/gb-avatar-add-button/gb-avatar-add-button.css

@@ -0,0 +1,145 @@
+:root{
+    /* Positive spacing */
+    --spacing-none: 0rem;
+    --spacing-half: 0.125rem;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-7: 2rem;
+    --spacing-8: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
+
+    /* Negative spacing */
+
+    --spacing-negative-half: -0.125rem;
+    --spacing-negative-1: -0.25rem;
+    --spacing-negative-2: -0.5rem;
+    --spacing-negative-3: -0.75rem;
+    --spacing-negative-4: -1rem;
+    --spacing-negative-5: -1.25rem;
+    --spacing-negative-6: -1.5rem;
+    --spacing-negative-7: -2rem;
+
+    /* Radius  */
+    --rounded-none: 0rem;
+    --rounded-xs: 0.25rem;
+    --rounded-sm: 0.5rem;
+    --rounded-md: 0.75rem;
+    --rounded-lg: 1rem;
+    --rounded-xl: 1.5rem;
+    --rounded-2xl: 2rem;
+    --rounded-full: 62.438rem;
+}
+
+:host{
+    position: relative;
+}
+
+.tooltip{
+    position: absolute;
+}
+
+.tooltip.xs{
+    top: -150%;
+    left: -90%;
+}
+
+.tooltip.sm{
+    top: -120%;
+    left: -61%;
+}
+
+.tooltip.md{
+    top: -100%;
+    left: -41%;
+}
+
+.avatar_back.default{
+    border: 1px dashed #CDD5DF;
+    border-radius: var(--rounded-full);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+/* Sizes */
+.avatar_back.xs{
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+}
+
+.avatar_back.sm{
+    width: var(--spacing-7);
+    height: var(--spacing-7);
+}
+
+.avatar_back.md{
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+}
+
+.plus_sign.xs{
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+}
+
+.plus_sign.md{
+    width: var(--spacing-5);
+    height: var(--spacing-5);
+}
+
+/* States */
+.avatar_back.default:hover, .plus_sign.default:hover{
+    background-color: #EEF2F6;
+}
+
+.avatar_back.default:active, .plus_sign.default:active{
+    background-color: #E3E8EF;
+}
+
+.avatar_back.disabled{
+    border: 1px dashed #E3E8EF;
+    background-color: #F6F8FA;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.plus_sign.disabled path{
+    stroke: #CDD5DF;
+}
+
+.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;
+}
+
+.text-xs-semi-bold::before,
+.text-xs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-semi-bold::before{
+    margin-bottom: -0.321em;
+}
+
+.text-xs-semi-bold::after{
+    margin-top: -0.416em;
+}

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

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+export class GbAvatarAddButton {
+    constructor() {
+        this.size = undefined;
+        this.showToolTip = false;
+        this.state = undefined;
+        this.el = undefined;
+    }
+    render() {
+        return (h("div", { key: '55efc695d6a0ab29f44090eddeb8f4d3a4b6e61d' }, this.showToolTip && (h("gb-tooltip", { key: '80d63cd58d52c28a73765dbec483787767191a5f', class: `tooltip ${this.size}`, arrow: "bottom_center", "supporting-text": "false" }, h("p", { key: '9f21fc5db908d1c0b99bf8e219a26d26bce76acb', slot: "main_text", class: "text-xs-semi-bold" }, "Add User"))), h("div", { key: '8d36575f86946f018cc3a11b6432fdc0a192a167', class: `avatar_back ${this.size} ${this.state}`, onMouseEnter: () => { this.showToolTip = true; }, onMouseLeave: () => { this.showToolTip = false; } }, h("svg", { key: '330b5cfa713739a8bc2b2f35e8029b51454ef3a3', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `plus_sign ${this.size} ${this.state}` }, h("path", { key: '0d649be179ff7d2d181a7344b16a18cbb7376dd1', d: "M8.00008 2.6665V13.3332M13.3334 7.99984H2.66675", stroke: "#697586", "stroke-width": "1.33", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+    }
+    static get is() { return "gb-avatar-add-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-avatar-add-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-avatar-add-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "showToolTip": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-tool-tip",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "el": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-avatar-add-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-avatar-add-button.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-add-button/gb-avatar-add-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;;;2BAEsB,KAAK;;;;IAIrD,MAAM;QACF,OAAO,CACH;YACK,IAAI,CAAC,WAAW,IAAI,CACjB,mEAAY,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAC,eAAe,qBAAiB,OAAO;gBACpF,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,eAAa,CACjD,CAChB;YACD,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAAA,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA,CAAA,CAAC;gBAC/I,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;oBACxI,6DAAM,CAAC,EAAC,iDAAiD,EAAC,MAAM,EAAC,SAAS,kBAAc,MAAM,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC7I,CACJ,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-add-button',\r\n    styleUrl: 'gb-avatar-add-button.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarAddButton {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop({ mutable: true }) showToolTip: boolean = false;\r\n    @Prop() state: StateEnum;\r\n    @Prop() el: HTMLElement;\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                {this.showToolTip && (\r\n                    <gb-tooltip class={`tooltip ${this.size}`} arrow=\"bottom_center\" supporting-text=\"false\">\r\n                        <p slot=\"main_text\" class=\"text-xs-semi-bold\">Add User</p>\r\n                    </gb-tooltip>\r\n                )}\r\n                <div class={`avatar_back ${this.size} ${this.state}`} onMouseEnter={() => {this.showToolTip = true}} onMouseLeave={() => {this.showToolTip = false}}>\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`plus_sign ${this.size} ${this.state}`}>\r\n                        <path d=\"M8.00008 2.6665V13.3332M13.3334 7.99984H2.66675\" stroke=\"#697586\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"]}

package/dist/collection/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.css

@@ -0,0 +1,93 @@
+:root{
+    /* Positive spacing */
+    --spacing-none: 0rem;
+    --spacing-half: 0.125rem;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-7: 2rem;
+    --spacing-8: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
+
+    /* Negative spacing */
+
+    --spacing-negative-half: -0.125rem;
+    --spacing-negative-1: -0.25rem;
+    --spacing-negative-2: -0.5rem;
+    --spacing-negative-3: -0.75rem;
+    --spacing-negative-4: -1rem;
+    --spacing-negative-5: -1.25rem;
+    --spacing-negative-6: -1.5rem;
+    --spacing-negative-7: -2rem;
+
+    /* Radius  */
+    --rounded-none: 0rem;
+    --rounded-xs: 0.25rem;
+    --rounded-sm: 0.5rem;
+    --rounded-md: 0.75rem;
+    --rounded-lg: 1rem;
+    --rounded-xl: 1.5rem;
+    --rounded-2xl: 2rem;
+    --rounded-full: 62.438rem;
+}
+
+.inner_border{
+    border-radius: var(--rounded-full);
+    width: fit-content;
+    height: fit-content;
+}
+
+/* Weights */
+.inner_border.light{
+    border: 0.5px solid rgba(33, 44, 101, 0.2);
+}
+
+.inner_border.regular{
+    border: 0.75px solid rgba(33, 44, 101, 0.2);
+}
+
+.inner_border.heavy{
+    border: 1px solid rgba(33, 44, 101, 0.2);
+}
+
+/* Sizes */
+/* .inner_border.xs {
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+}
+
+.inner_border.sm {
+    width: var(--spacing-7);
+    height: var(--spacing-7);
+}
+
+.inner_border.md {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.inner_border.lg {
+    width: 3rem;
+    height: 3rem;
+}
+
+.inner_border.xl {
+    width: 3.5rem;
+    height: 3.5rem;
+}
+
+.inner_border.xl2 {
+    width: 4rem;
+    height: 4rem;
+} */

package/dist/collection/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.js

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+import { BorderWeights } from "../../models/reusableModels";
+export class GbAvatarContrastInnerBorder {
+    constructor() {
+        this.weight = undefined;
+        this.size = undefined;
+    }
+    setWeight() {
+        switch (this.size) {
+            case 'xl2': return BorderWeights.Regular;
+            case 'xl': return BorderWeights.Regular;
+            case 'lg': return BorderWeights.Regular;
+            case 'md': return BorderWeights.Regular;
+            case 'sm': return BorderWeights.Light;
+            case 'xs': return BorderWeights.Light;
+            case 'profile_lg': return BorderWeights.Heavy;
+            case 'profile_md': return BorderWeights.Heavy;
+            case 'profile_sm': return BorderWeights.Regular;
+        }
+    }
+    render() {
+        return (h("div", { key: '5b9b2bdea650b28f30e992c2a604ebb702d720e0', class: `inner_border ${this.size} ${this.weight}` }, h("slot", { key: '591286baf87ef844ca1dcd8b327a8e85eb78329e' })));
+    }
+    static get is() { return "gb-avatar-contrast-inner-border"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-avatar-contrast-inner-border.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-avatar-contrast-inner-border.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BorderWeights",
+                    "resolved": "BorderWeights.Heavy | BorderWeights.Light | BorderWeights.Regular",
+                    "references": {
+                        "BorderWeights": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::BorderWeights"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "weight",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-avatar-contrast-inner-border.js.map

package/dist/collection/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-avatar-contrast-inner-border.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,aAAa,EAAgB,MAAM,6BAA6B,CAAC;AAQ1E,MAAM,OAAO,2BAA2B;;;;;IAIpC,SAAS;QACL,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,KAAK,KAAM,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YAC1C,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YACzC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YACzC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;YACzC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,YAAa,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YAC/C,KAAK,YAAa,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YAC/C,KAAK,YAAa,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;QACrD,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;YAClD,8DAAa,CACX,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-contrast-inner-border',\r\n    styleUrl: 'gb-avatar-contrast-inner-border.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarContrastInnerBorder {\r\n    @Prop() weight: BorderWeights;\r\n    @Prop() size: GeneralSizes;\r\n\r\n    setWeight() {\r\n        switch(this.size) {\r\n            case 'xl2' : return BorderWeights.Regular;\r\n            case 'xl' : return BorderWeights.Regular;\r\n            case 'lg' : return BorderWeights.Regular;\r\n            case 'md' : return BorderWeights.Regular;\r\n            case 'sm' : return BorderWeights.Light;\r\n            case 'xs' : return BorderWeights.Light;\r\n            case 'profile_lg' : return BorderWeights.Heavy;\r\n            case 'profile_md' : return BorderWeights.Heavy;\r\n            case 'profile_sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`inner_border ${this.size} ${this.weight}`}>\r\n                <slot></slot>\r\n            </div>\r\n        )\r\n    }\r\n}"]}