globuswebcomponents 0.2.6 → 0.2.8

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

@@ -0,0 +1,67 @@
+import { h } from "@stencil/core";
+export class GbButtonClose {
+    constructor() {
+        this.size = undefined;
+        this.color = undefined;
+    }
+    render() {
+        return (h("div", { key: '34ac7291e4a459704c81ed9dc9608c2c6a13c4c8', class: `${this.size} ${this.color}` }, h("svg", { key: '43577a211fd7f7934e40b842404657c6dd5e1bb5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: '3d8577145e84bfdba3d092d5cbf250f3975cac27', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+    }
+    static get is() { return "gb-button-close"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-button-close.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-button-close.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
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'information' | 'success' | 'gray' | 'warning' | 'error'",
+                    "resolved": "\"error\" | \"gray\" | \"information\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-button-close.js.map

package/dist/collection/components/gb-button-close/gb-button-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-button-close.js","sourceRoot":"","sources":["../../../src/components/gb-button-close/gb-button-close.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,aAAa;;;;;IAItB,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YACpC,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;gBAChH,6DAAM,CAAC,EAAC,kEAAkE,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC1I,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n@Component({\r\n    tag: 'gb-button-close',\r\n    styleUrl: 'gb-button-close.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbButtonClose {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() color: 'primary' | 'information' | 'success' | 'gray' | 'warning' | 'error';\r\n\r\n    render() {\r\n        return (\r\n            <div class={`${this.size} ${this.color}`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`${this.size}`}>\r\n                    <path d=\"M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </div>\r\n        )\r\n    }\r\n}"]}

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

@@ -0,0 +1,567 @@
+: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;
+}
+@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
+
+:root {
+    --font-family: 'Sora';
+    --font-family-sans: sans-serif;
+    --font-style: normal;
+
+    /* ------------------base font sizes---------------- */
+    /* Display 2xl */
+    --display-2xl-bold-font-size: 4.5rem;
+    --display-2xl-bold-font-weight: 700;
+    --display-2xl-bold-line-height: 5rem;
+    --display-2xl-bold-letter-spacing: -0.09rem;
+
+    --display-2xl-semiBold-font-size: 4.5rem;
+    --display-2xl-semiBold-font-weight: 600;
+    --display-2xl-semiBold-line-height: 5rem;
+    --dispay-2xl-semiBold-letter-spacing: -0.09rem;
+
+    /* Display xl */
+    --display-xl-bold-font-size: 3.75rem;
+    --display-xl-bold-font-weight: 700;
+    --display-xl-bold-line-height: 4.25rem;
+    --display-xl-bold-letter-spacing: -0.075rem;
+
+    --display-xl-semiBold-font-size: 3.75rem;
+    --display-xl-semiBold-font-weight: 600;
+    --display-xl-semiBold-line-height: 4.25rem;
+    --display-xl-semiBold-letter-spacing: -0.075rem;
+
+    /* Display lg */
+    --display-lg-bold-font-size: 3rem;
+    --display-lg-bold-font-weight: 700;
+    --display-lg-bold-line-height: 4.25rem;
+    --display-lg-bold-letter-spacing: -0.075rem;
+
+    --display-lg-semiBold-font-size: 3rem;
+    --display-lg-semiBold-font-weight: 600;
+    --display-lg-semiBold-line-height: 4.25rem;
+    --display-lg-semiBold-letter-spacing: -0.075rem;
+
+    /* Display sm */
+    --display-sm-bold-font-size: 1.875rem;
+    --display-sm-bold-font-weight: 700;
+    --display-sm-bold-line-height: 2.375rem;
+    --display-sm-bold-letter-spacing: 0rem;
+
+    --display-sm-semiBold-font-size: 1.875rem;
+    --display-sm-semiBold-font-weight: 600;
+    --display-sm-semiBold-line-height: 2.375rem;
+    --display-sm-semiBold-letter-spacing: 0rem;
+
+    /* Display xs */
+    --display-xs-bold-font-size: 1.5rem;
+    --display-xs-bold-font-weight: 700;
+    --display-xs-bold-line-height: 2rem;
+    --display-xs-bold-letter-spacing: 0rem;
+
+    --display-xs-semiBold-font-size: 1.5rem;
+    --display-xs-semiBold-font-weight: 600;
+    --display-xs-semiBold-line-height: 2rem;
+    --display-xs-semiBold-letter-spacing: 0rem;
+
+    /* Text xl */
+    --text-xl-bold-font-size: 1.25rem;
+    --text-xl-bold-font-weight: 700;
+    --text-xl-bold-line-height: 1.875rem;
+
+    --text-xl-semiBold-font-size: 1.25rem;
+    --text-xl-semiBold-font-weight: 600;
+    --text-xl-semiBold-line-height: 1.875rem;
+
+    --text-xl-medium-font-size: 1.25rem;
+    --text-xl-medium-font-weight: 500;
+    --text-xl-medium-line-height: 1.875rem;
+
+    --text-xl-regular-font-size: 1.25rem;
+    --text-xl-regular-font-weight: 400;
+    --text-xl-regular-line-height: 1.875rem;
+
+    /* Text lg */
+    --text-lg-bold-font-size: 1.125rem;
+    --text-lg-bold-font-weight: 700;
+    --text-lg-bold-line-height: 1.75rem;
+
+    --text-lg-semiBold-font-size: 1.125rem;
+    --text-lg-semiBold-font-weight: 600;
+    --text-lg-semiBold-line-height: 1.75rem;
+
+    --text-lg-medium-font-size: 1.125rem;
+    --text-lg-medium-font-weight: 500;
+    --text-lg-medium-line-height: 1.75rem;
+
+    --text-lg-regular-font-size: 1.125rem;
+    --text-lg-regular-font-weight: 400;
+    --text-lg-regular-line-height: 1.75rem;
+
+    /* Text md */
+    --text-md-bold-font-size: 1rem;
+    --text-md-bold-font-weight: 700;
+    --text-md-bold-line-height: 1.5rem;
+
+    --text-md-semiBold-font-size: 1rem;
+    --text-md-semiBold-font-weight: 600;
+    --text-md-semiBold-line-height: 1.5rem;
+
+    --text-md-medium-font-size: 1rem;
+    --text-md-medium-font-weight: 500;
+    --text-md-medium-line-height: 1.5rem;
+
+    --text-md-regular-font-size: 1rem;
+    --text-md-regular-font-weight: 400;
+    --text-md-regular-line-height: 1.5rem;
+
+    /* Text sm */
+    --text-sm-bold-font-size: 0.875rem;
+    --text-sm-bold-font-weight: 700;
+    --text-sm-bold-line-height: 1.25rem;
+
+    --text-sm-semiBold-font-size: 0.875rem;
+    --text-sm-semiBold-font-weight: 600;
+    --text-sm-semiBold-line-height: 1.25rem;
+
+    --text-sm-medium-font-size: 0.875rem;
+    --text-sm-medium-font-weight: 500;
+    --text-sm-medium-line-height: 1.25rem;
+
+    --text-sm-regular-font-size: 0.875rem;
+    --text-sm-regular-font-weight: 400;
+    --text-sm-regular-line-height: 1.25rem;
+
+    /* Text xs */
+    --text-xs-bold-font-size: 0.75rem;
+    --text-xs-bold-font-weight: 700;
+    --text-xs-bold-line-height: 1.125rem;
+
+    --text-xs-semiBold-font-size: 0.75rem;
+    --text-xs-semiBold-font-weight: 600;
+    --text-xs-semiBold-line-height: 1.125rem;
+
+    --text-xs-medium-font-size: 0.75rem;
+    --text-xs-medium-font-weight: 500;
+    --text-xs-medium-line-height: 1.125rem;
+
+    --text-xs-regular-font-size: 0.75rem;
+    --text-xs-regular-font-weight: 400;
+    --text-xs-regular-line-height: 1.125rem;
+}
+
+/* ------------------Responsive adjustments---------------- */
+/* Medium screens */
+@media (max-width: 1199px){
+    :root{
+        /* Display 2xl */
+        --display-2xl-bold-font-size: 3.75rem;
+        --display-2xl-bold-font-weight: 700;
+        --display-2xl-bold-line-height: 4.25rem;
+        --display-2xl-bold-letter-spacing: -0.075rem;
+
+        --display-2xl-semiBold-font-size: 3.75rem;
+        --display-2xl-semiBold-font-weight: 600;
+        --display-2xl-semiBold-line-height: 4.25rem;
+        --display-2xl-semiBold-letter-spacing: -0.075rem;
+
+        /* Display xl */   
+        --display-xl-bold-font-size: 3.5rem;
+        --display-xl-bold-font-weight: 700;
+        --display-xl-bold-line-height: 3.75rem;
+        --display-xl-bold-letter-spacing: -0.065rem; 
+
+        --display-xl-semiBold-font-size: 3.5rem;
+        --display-xl-semiBold-font-weight: 600;
+        --display-xl-semiBold-line-height: 3.75rem;
+        --display-xl-semiBold-letter-spacing: -0.065rem; 
+
+        /* Display lg */   
+        --display-lg-bold-font-size: 2.75rem;
+        --display-lg-bold-font-weight: 700;
+        --display-lg-bold-line-height: 2.4375rem;
+        --display-lg-bold-letter-spacing: -0.045rem; 
+
+        --display-lg-semiBold-font-size: 2.75rem;
+        --display-lg-semiBold-font-weight: 600;
+        --display-lg-semiBold-line-height: 2.4375rem;
+        --display-lg-semiBold-letter-spacing: -0.045rem; 
+
+        /* Display md */   
+        --display-md-bold-font-size: 2.25rem;
+        --display-md-bold-font-weight: 700;
+        --display-md-bold-line-height: 2.75rem;
+        --display-md-bold-letter-spacing: -0.045rem; 
+
+        --display-md-semiBold-font-size: 2.25rem;
+        --display-md-semiBold-font-weight: 600;
+        --display-md-semiBold-line-height: 2.75rem;
+        --display-md-semiBold-letter-spacing: -0.045rem; 
+
+        /* Display sm */   
+        --display-sm-bold-font-size: 1.875rem;
+        --display-sm-bold-font-weight: 700;
+        --display-sm-bold-line-height: 2.375rem;
+        --display-sm-bold-letter-spacing: 0rem; 
+
+        --display-sm-semiBold-font-size: 1.875rem;
+        --display-sm-semiBold-font-weight: 600;
+        --display-sm-semiBold-line-height: 2.375rem;
+        --display-sm-semiBold-letter-spacing: 0rem; 
+
+        /* Display xs */   
+        --display-xs-bold-font-size: 1.5rem;
+        --display-xs-bold-font-weight: 700;
+        --display-xs-bold-line-height: 2rem;
+        --display-xs-bold-letter-spacing: 0rem; 
+
+        --display-xs-semiBold-font-size: 1.5rem;
+        --display-xs-semiBold-font-weight: 600;
+        --display-xs-semiBold-line-height: 2rem;
+        --display-xs-semiBold-letter-spacing: 0rem;
+    }
+}
+
+/* Small screens */
+@media (max-width: 743px){
+    :root{
+         /* Display 2xl */
+        --display-2xl-bold-font-size: 3rem;
+        --display-2xl-bold-font-weight: 700;
+        --display-2xl-bold-line-height: 3.375rem;
+        --display-2xl-bold-letter-spacing: -0.06rem;
+
+        --display-2xl-semiBold-font-size: 3.75rem;
+        --display-2xl-semiBold-font-weight: 600;
+        --display-2xl-semiBold-line-height: 3.375rem;
+        --display-2xl-semiBold-letter-spacing: -0.06rem;
+
+         /* Display xl */
+        --display-xl-bold-font-size: 2.5rem;
+        --display-xl-bold-font-weight: 700;
+        --display-xl-bold-line-height: 2.875rem;
+        --display-xl-bold-letter-spacing: -0.05rem;
+
+        --display-xl-semiBold-font-size: 2.5rem;
+        --display-xl-semiBold-font-weight: 600;
+        --display-xl-semiBold-line-height: 2.875rem;
+        --display-xl-semiBold-letter-spacing: -0.05rem;
+
+         /* Display lg */
+        --display-lg-bold-font-size: 2rem;
+        --display-lg-bold-font-weight: 700;
+        --display-lg-bold-line-height: 2.5rem;
+        --display-lg-bold-letter-spacing: -0.045rem;
+
+        --display-lg-semiBold-font-size: 2rem;
+        --display-lg-semiBold-font-weight: 600;
+        --display-lg-semiBold-line-height: 2.5rem;
+        --display-lg-semiBold-letter-spacing: -0.045rem;
+
+         /* Display md */
+        --display-md-bold-font-size: 1.75rem;
+        --display-md-bold-font-weight: 700;
+        --display-md-bold-line-height: 2.1375rem;
+        --display-md-bold-letter-spacing: 0rem;
+
+        --display-md-semiBold-font-size: 1.75rem;
+        --display-md-semiBold-font-weight: 600;
+        --display-md-semiBold-line-height: 2.1375rem;
+        --display-md-semiBold-letter-spacing: 0rem;
+
+         /* Display sm */
+        --display-sm-bold-font-size: 1.5rem;
+        --display-sm-bold-font-weight: 700;
+        --display-sm-bold-line-height: 2rem;
+        --display-sm-bold-letter-spacing: 0rem;
+
+        --display-sm-semiBold-font-size: 1.5rem;
+        --display-sm-semiBold-font-weight: 600;
+        --display-sm-semiBold-line-height: 2rem;
+        --display-sm-semiBold-letter-spacing: 0rem;
+
+         /* Display xs */
+        --display-xs-bold-font-size: 1.25rem;
+        --display-xs-bold-font-weight: 700;
+        --display-xs-bold-line-height: 1.75rem;
+        --display-xs-bold-letter-spacing: 0rem;
+
+        --display-xs-semiBold-font-size: 1.25rem;
+        --display-xs-semiBold-font-weight: 600;
+        --display-xs-semiBold-line-height: 1.75rem;
+        --display-xs-semiBold-letter-spacing: 0rem;
+    }
+}
+
+
+.display-2xl-bold{
+    font-size: var(--display-2xl-bold-font-size);
+    font-weight: var(--display-2xl-bold-font-weight);
+    line-height: var(--display-2xl-bold-line-height);
+    letter-spacing: var(--display-2xl-bold-letter-spacing);
+}
+
+.display-2xl-semiBold{
+    font-size: var(--display-2xl-semiBold-font-size);
+    font-weight: var(--display-2xl-semiBold-font-weight);
+    line-height: var(--display-2xl-semiBold-line-height);
+    letter-spacing: var(--display-2xl-semiBold-letter-spacing);
+}
+
+.display-xl-bold{
+    font-size: var(--display-xl-bold-font-size);
+    font-weight: var(--display-xl-bold-font-weight);
+    line-height: var(--display-xl-bold-line-height);
+    letter-spacing: var(--display-xl-bold-letter-spacing);
+}
+
+.display-xl-semiBold{
+    font-size: var(--display-xl-semiBold-font-size);
+    font-weight: var(--display-xl-semiBold-font-weight);
+    line-height: var(--display-xl-semiBold-line-height);
+    letter-spacing: var(--display-xl-semiBold-letter-spacing);
+}
+
+.display-lg-bold{
+    font-size: var(--display-lg-bold-font-size);
+    font-weight: var(--display-lg-bold-font-weight);
+    line-height: var(--display-lg-bold-line-height);
+    letter-spacing: var(--display-lg-bold-letter-spacing);
+}
+
+.display-lg-semiBold{
+    font-size: var(--display-lg-semiBold-font-size);
+    font-weight: var(--display-lg-semiBold-font-weight);
+    line-height: var(--display-lg-semiBold-line-height);
+    letter-spacing: var(--display-lg-semiBold-letter-spacing);
+}
+
+.display-md-bold{
+    font-size: var(--display-md-bold-font-size);
+    font-weight: var(--display-md-bold-font-weight);
+    line-height: var(--display-md-bold-line-height);
+    letter-spacing: var(--display-md-bold-letter-spacing);
+}
+
+.display-md-semiBold{
+    font-size: var(--display-md-semiBold-font-size);
+    font-weight: var(--display-md-semiBold-font-weight);
+    line-height: var(--display-md-semiBold-line-height);
+    letter-spacing: var(--display-md-semiBold-letter-spacing);
+}
+
+.display-sm-bold{
+    font-size: var(--display-sm-bold-font-size);
+    font-weight: var(--display-sm-bold-font-weight);
+    line-height: var(--display-sm-bold-line-height);
+    letter-spacing: var(--display-sm-bold-letter-spacing);
+}
+
+.display-sm-semiBold{
+    font-size: var(--display-sm-semiBold-font-size);
+    font-weight: var(--display-sm-semiBold-font-weight);
+    line-height: var(--display-sm-semiBold-line-height);
+    letter-spacing: var(--display-sm-semiBold-letter-spacing);
+}
+
+.display-xs-bold{
+    font-size: var(--display-xs-bold-font-size);
+    font-weight: var(--display-xs-bold-font-weight);
+    line-height: var(--display-xs-bold-line-height);
+    letter-spacing: var(--display-xs-bold-letter-spacing);
+}
+
+.display-xs-semiBold{
+    font-size: var(--display-xs-semiBold-font-size);
+    font-weight: var(--display-xs-semiBold-font-weight);
+    line-height: var(--display-xs-semiBold-line-height);
+    letter-spacing: var(--display-xs-semiBold-letter-spacing);
+}
+
+.text-xl-bold{
+    font-size: var(--text-xl-bold-font-size);
+    font-weight: var(--text-xl-bold-font-weight);
+    line-height: var(--text-xl-bold-line-height);
+}
+
+.text-xl-semiBold{
+    font-size: var(--text-xl-semiBold-font-size);
+    font-weight: var(--text-xl-semiBold-font-weight);
+    line-height: var(--text-xl-semiBold-line-height);
+}
+
+.text-xl-medium{
+    font-size: var(--text-xl-medium-font-size);
+    font-weight: var(--text-xl-medium-font-weight);
+    line-height: var(--text-xl-medium-line-height);
+}
+
+.text-xl-regular{
+    font-size: var(--text-xl-regular-font-size);
+    font-weight: var(--text-xl-regular-font-weight);
+    line-height: var(--text-xl-regular-line-height);
+}
+
+.text-lg-bold{
+    font-size: var(--text-lg-bold-font-size);
+    font-weight: var(--text-lg-bold-font-weight);
+    line-height: var(--text-lg-bold-line-height);
+}
+
+.text-lg-semiBold{
+    font-size: var(--text-lg-semiBold-font-size);
+    font-weight: var(--text-lg-semiBold-font-weight);
+    line-height: var(--text-lg-semiBold-line-height);
+}
+
+.text-lg-medium{
+    font-size: var(--text-lg-medium-font-size);
+    font-weight: var(--text-lg-medium-font-weight);
+    line-height: var(--text-lg-medium-line-height);
+}
+
+.text-lg-regular{
+    font-size: var(--text-lg-regular-font-size);
+    font-weight: var(--text-lg-regular-font-weight);
+    line-height: var(--text-lg-regular-line-height);
+}
+
+.text-md-bold{
+    font-size: var(--text-md-bold-font-size);
+    font-weight: var(--text-md-bold-font-weight);
+    line-height: var(--text-md-bold-line-height);
+}
+
+.text-md-semiBold{
+    font-size: var(--text-md-semiBold-font-size);
+    font-weight: var(--text-md-semiBold-font-weight);
+    line-height: var(--text-md-semiBold-line-height);
+}
+
+.text-md-medium{
+    font-size: var(--text-md-medium-font-size);
+    font-weight: var(--text-md-medium-font-weight);
+    line-height: var(--text-md-medium-line-height);
+}
+
+.text-md-regular{
+    font-size: var(--text-md-regular-font-size);
+    font-weight: var(--text-md-regular-font-weight);
+    line-height: var(--text-md-regular-line-height);
+}
+
+.text-sm-bold{
+    font-size: var(--text-sm-bold-font-size);
+    font-weight: var(--text-sm-bold-font-weight);
+    line-height: var(--text-sm-bold-line-height);
+}
+
+.text-sm-semiBold{
+    font-size: var(--text-sm-semiBold-font-size);
+    font-weight: var(--text-sm-semiBold-font-weight);
+    line-height: var(--text-sm-semiBold-line-height);
+}
+
+.text-sm-medium{
+    font-size: var(--text-sm-medium-font-size);
+    font-weight: var(--text-sm-medium-font-weight);
+    line-height: var(--text-sm-medium-line-height);
+}
+
+.text-sm-regular{
+    font-size: var(--text-sm-regular-font-size);
+    font-weight: var(--text-sm-regular-font-weight);
+    line-height: var(--text-sm-regular-line-height);
+}
+
+.text-xs-bold{
+    font-size: var(--text-xs-bold-font-size);
+    font-weight: var(--text-xs-bold-font-weight);
+    line-height: var(--text-xs-bold-line-height);
+}
+
+.text-xs-semiBold{
+    font-size: var(--text-xs-semiBold-font-size);
+    font-weight: var(--text-xs-semiBold-font-weight);
+    line-height: var(--text-xs-semiBold-line-height);
+}
+
+.text-xs-medium{
+    font-size: var(--text-xs-medium-font-size);
+    font-weight: var(--text-xs-medium-font-weight);
+    line-height: var(--text-xs-medium-line-height);
+}
+
+.text-xs-regular{
+    font-size: var(--text-xs-regular-font-size);
+    font-weight: var(--text-xs-regular-font-weight);
+    line-height: var(--text-xs-regular-line-height);
+}
+
+.checkbox_div{
+    display: flex;
+    justify-content: space-between;
+    width: fit-content;
+}
+
+.checkbox_div.sm{
+    gap: var(--spacing-2);
+}
+
+.checkbox_div.md{
+    gap: var(--spacing-3);
+}
+
+.text{
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+}
+
+.div_centered{
+    justify-content: center;
+}
+
+::slotted(p){
+    color: #4B5565;
+}