@usecapsule/core-components 3.0.0 → 3.0.1-dev.2

package/dist/collection/components/cpsl-table/cpsl-table.css

@@ -54,7 +54,6 @@
    * }
    */
 :host {
-  --container-background-radius: var(--cpsl-border-radius-table-container);
   --container-border-radius: var(--cpsl-border-radius-table-container);
   --container-border-color: var(--cpsl-color-background-16);
   --container-background-color: var(--cpsl-color-background-0);
@@ -63,14 +62,14 @@
   --container-header-padding-bottom: 24px;
   --container-header-padding-start: 24px;
   --container-header-padding-end: 24px;
-  --container-no-content-padding-top: 24px;
-  --container-no-content-padding-bottom: 24px;
-  --container-no-content-padding-start: 24px;
-  --container-no-content-padding-end: 24px;
+  --container-header-border-width: 1px;
+  --container-header-border-color: var(--cpsl-color-background-16);
   --container-footer-padding-top: 16px;
   --container-footer-padding-bottom: 16px;
   --container-footer-padding-start: 24px;
   --container-footer-padding-end: 24px;
+  --container-footer-border-width: 1px;
+  --container-footer-border-color: var(--cpsl-color-background-8);
   --table-header-padding-top: 16px;
   --table-header-padding-bottom: 16px;
   --table-header-padding-start: 24px;
@@ -84,51 +83,34 @@
   --table-content-padding-end: 24px;
   --table-content-border-color: var(--cpsl-color-background-8);
   --table-content-border-width: 1px;
-  display: flex;
+  display: block;
 }
 
-.table-container {
+:host cpsl-card {
+  height: 100%;
+  --card-padding-top: 0px;
+  --card-padding-bottom: 0px;
+  --card-padding-start: 0px;
+  --card-padding-end: 0px;
+  --card-border-width: var(--container-border-width);
+  --card-border-color: var(--container-border-color);
+  --card-border-radius: var(--container-border-radius);
+  --card-background-color: var(--container-background-color);
+}
+:host cpsl-card::part(card-container) {
+  height: 100%;
   display: flex;
   flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  border-radius: var(--container-border-radius);
-  border: var(--container-border-width) solid var(--container-border-color);
-  background-color: var(--container-background-color);
 }
 
-.table-wrapper {
+.content {
+  flex: 1;
   overflow: auto;
 }
 
-.table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.table th {
-  -webkit-padding-start: var(--table-header-padding-start);
-  padding-inline-start: var(--table-header-padding-start);
-  -webkit-padding-end: var(--table-header-padding-end);
-  padding-inline-end: var(--table-header-padding-end);
-  padding-top: var(--table-header-padding-top);
-  padding-bottom: var(--table-header-padding-bottom);
-  background-color: var(--table-header-background-color);
-  border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);
-}
-.table td {
-  -webkit-padding-start: var(--table-content-padding-start);
-  padding-inline-start: var(--table-content-padding-start);
-  -webkit-padding-end: var(--table-content-padding-end);
-  padding-inline-end: var(--table-content-padding-end);
-  padding-top: var(--table-content-padding-top);
-  padding-bottom: var(--table-content-padding-bottom);
-}
-.table tr {
-  border-bottom: var(--table-content-border-width) solid var(--table-content-border-color);
-}
-.table tr:last-child {
-  border-bottom: none;
+.table-wrapper {
+  overflow: auto;
+  height: 100%;
 }
 
 .container-header {
@@ -139,7 +121,7 @@
   padding-inline-end: var(--container-header-padding-end);
   padding-top: var(--container-header-padding-top);
   padding-bottom: var(--container-header-padding-bottom);
-  border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);
+  border-bottom: var(--container-header-border-width) solid var(--container-header-border-color);
 }
 
 .container-footer {
@@ -150,30 +132,9 @@
   padding-inline-end: var(--container-footer-padding-end);
   padding-top: var(--container-footer-padding-top);
   padding-bottom: var(--container-footer-padding-bottom);
-  border-top: var(--table-content-border-width) solid var(--table-content-border-color);
-}
-
-.container-no-content {
-  -webkit-padding-start: var(--container-no-content-padding-start);
-  padding-inline-start: var(--container-no-content-padding-start);
-  -webkit-padding-end: var(--container-no-content-padding-end);
-  padding-inline-end: var(--container-no-content-padding-end);
-  padding-top: var(--container-no-content-padding-top);
-  padding-bottom: var(--container-no-content-padding-bottom);
+  border-top: var(--container-footer-border-width) solid var(--container-footer-border-color);
 }
 
 .shown {
   display: block;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
 }

package/dist/collection/components/cpsl-table/cpsl-table.js

@@ -1,9 +1,5 @@
 import { Host, h } from "@stencil/core";
 export class CpslTable {
-    constructor() {
-        this.columns = undefined;
-        this.rows = undefined;
-    }
     get containerHeaderEl() {
         return this.el.querySelector('[slot="header"]');
     }
@@ -11,19 +7,7 @@ export class CpslTable {
         return this.el.querySelector('[slot="footer"]');
     }
     render() {
-        var _a;
-        return (h(Host, { key: '8ff024bee3c372cff775b8ecc68be3ee884eae3f' }, h("div", { key: 'cea1971fa6faf622f72a6ec103bcd6c6df81a457', class: "table-container", part: "table-container" }, h("div", { key: '191fbeab85091a081e6bacc76ea3a8f52e342c0d', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: 'caf8cb186cb311b7db83f65e8bad15ee9ecf8cb8', name: "header" })), h("div", { key: 'b0d534df26ab4784fa89e8b1e6b74b6ea973b203', class: "table-wrapper", part: "table-wrapper" }, Boolean((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length) ? (h("table", { class: "table" }, h("thead", null, h("tr", null, this.columns.map(col => {
-            var _a;
-            const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
-            return (h("th", { class: { 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' }, id: col.field, scope: "col" }, h("cpsl-text", { variant: "bodyXS", weight: "medium" }, col.headerName)));
-        }))), h("tbody", null, this.rows.map(row => {
-            return (h("tr", { style: { height: Boolean(row.height) ? `${row.height}px` : `80px` } }, this.columns.map(col => {
-                var _a;
-                const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
-                const value = Boolean(col.valueGetter) ? col.valueGetter(row[col.field], row) : row[col.field];
-                return (h("td", { class: { 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' } }, Boolean(col.renderCell) ? (col.renderCell(value, row)) : (h("cpsl-text", { variant: "bodyXS", weight: "medium" }, value))));
-            })));
-        })))) : (h("div", { class: { 'container-no-content': true } }, h("slot", { name: "no-content" })))), h("div", { key: '5ac2bfcfdebca316cd61b39826772819ccfe5444', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'f2506b2260272276a49ebd98c636064b148bccaa', name: "footer" })))));
+        return (h(Host, { key: '69d28584233c9f7545be8068c6f6fe5c6698d36f' }, h("cpsl-card", { key: 'fe1cdd5e9b0332d6056a38d32239057a252909e1', part: "table-container" }, h("div", { key: 'fd8eba0d9ebb48efb45617da3884d4a330a42704', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '8aaf689f820bc2c6732058b9d60a16d34974f0f0', name: "header" })), h("div", { key: '54610dd3abedc4f1214308a8b1f57d5f41b4d530', class: "content", part: "content" }, h("slot", { key: '49b369b546a08d25c85573e9807a4dd730a3e5e6', name: "content" })), h("div", { key: 'dcfb4bcbe1ad526bf07f4717ac4089711a8e4e70', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '4c60a98ad1098c77b8c14f8943fabe6141428fe0', name: "footer" })))));
     }
     static get is() { return "cpsl-table"; }
     static get encapsulation() { return "shadow"; }
@@ -37,52 +21,6 @@ export class CpslTable {
             "$": ["cpsl-table.css"]
         };
     }
-    static get properties() {
-        return {
-            "columns": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "ColDef[]",
-                    "resolved": "ColDef[]",
-                    "references": {
-                        "ColDef": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/cpsl-table/table-interface.ts::ColDef"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Columns for the table."
-                }
-            },
-            "rows": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "RowDef[]",
-                    "resolved": "RowDef[]",
-                    "references": {
-                        "RowDef": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/cpsl-table/table-interface.ts::RowDef"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Data rows for the table."
-                }
-            }
-        };
-    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=cpsl-table.js.map

package/dist/collection/components/cpsl-table/cpsl-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Element, h } from '@stencil/core';\nimport { ColDef, RowDef } from './table-interface';\n\n@Component({\n  tag: 'cpsl-table',\n  styleUrl: 'cpsl-table.scss',\n  shadow: true,\n})\nexport class CpslTable {\n  @Element() el!: HTMLCpslTableElement;\n\n  /**\n   * Columns for the table.\n   */\n  @Prop() columns: ColDef[];\n\n  /**\n   * Data rows for the table.\n   */\n  @Prop() rows: RowDef[];\n\n  private get containerHeaderEl() {\n    return this.el.querySelector('[slot=\"header\"]');\n  }\n\n  private get containerFooterEl() {\n    return this.el.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"table-container\" part=\"table-container\">\n          <div class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"table-wrapper\" part=\"table-wrapper\">\n            {Boolean(this.rows?.length) ? (\n              <table class=\"table\">\n                <thead>\n                  <tr>\n                    {this.columns.map(col => {\n                      const align = col.align ?? 'left';\n\n                      return (\n                        <th class={{ 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' }} id={col.field} scope=\"col\">\n                          <cpsl-text variant=\"bodyXS\" weight=\"medium\">\n                            {col.headerName}\n                          </cpsl-text>\n                        </th>\n                      );\n                    })}\n                  </tr>\n                </thead>\n                <tbody>\n                  {this.rows.map(row => {\n                    return (\n                      <tr style={{ height: Boolean(row.height) ? `${row.height}px` : `80px` }}>\n                        {this.columns.map(col => {\n                          const align = col.align ?? 'left';\n                          const value = Boolean(col.valueGetter) ? col.valueGetter(row[col.field], row) : row[col.field];\n\n                          return (\n                            <td class={{ 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' }}>\n                              {Boolean(col.renderCell) ? (\n                                col.renderCell(value, row)\n                              ) : (\n                                <cpsl-text variant=\"bodyXS\" weight=\"medium\">\n                                  {value}\n                                </cpsl-text>\n                              )}\n                            </td>\n                          );\n                        })}\n                      </tr>\n                    );\n                  })}\n                </tbody>\n              </table>\n            ) : (\n              <div class={{ 'container-no-content': true }}>\n                <slot name=\"no-content\"></slot>\n              </div>\n            )}\n          </div>\n          <div class={{ 'container-footer': true, 'shown': Boolean(this.containerFooterEl) }}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,SAAS;IAGpB,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,kEAAW,IAAI,EAAC,iBAAiB;gBAC/B,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;gBACN,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-table',\n  styleUrl: 'cpsl-table.scss',\n  shadow: true,\n})\nexport class CpslTable {\n  @Element() el!: HTMLCpslTableElement;\n\n  private get containerHeaderEl() {\n    return this.el.querySelector('[slot=\"header\"]');\n  }\n\n  private get containerFooterEl() {\n    return this.el.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host>\n        <cpsl-card part=\"table-container\">\n          <div class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"content\" part=\"content\">\n            <slot name=\"content\"></slot>\n          </div>\n          <div class={{ 'container-footer': true, 'shown': Boolean(this.containerFooterEl) }}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </cpsl-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-tabs/cpsl-tabs.css

@@ -83,7 +83,7 @@
   border-style: solid;
   border-color: var(--tabs-border-color);
   border-radius: var(--tabs-border-radius);
-  background-color: var(--tabs-background-color);
+  background: var(--tabs-background-color);
   font-size: var(--tabs-font-size);
   line-height: var(--tabs-line-height);
   -ms-overflow-style: none;
@@ -102,7 +102,7 @@
   border-style: solid;
   border-color: var(--tabs-border-color);
   border-radius: var(--tabs-border-radius);
-  background-color: var(--slider-background-color);
+  background: var(--slider-background-color);
   box-shadow: -1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10);
 }
 

package/dist/collection/components/cpsl-tabs/cpsl-tabs.js

@@ -46,7 +46,7 @@ export class CpslTabs {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (h(Host, { key: '372d02e7014c72414dc3282660ffab8a37df3a5e', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '762452e904014f3ea0d6e2bfb20d4277916bd296', class: "tabs-container" }, h("slot", { key: '52c4edd26157825c5bcd4cb5ffa30a6b5944d6ce' }), h("div", { key: '4b83b7a5c78bcf913622ddc7b8dc870ed001e93d', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (h(Host, { key: '8620de3b1cff8b60d0273f892ca7669cd53e479c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1441d0f383ae41c5293e2ced9a0c77b04e3cfd5f', class: "tabs-container" }, h("slot", { key: '78f40c6d6f4826bc83254349e35ef98faf3968ce' }), h("div", { key: '900ab917e38b71195cd498cc2ed05a90d48515ac', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     static get is() { return "cpsl-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-text/cpsl-text.css

@@ -83,6 +83,10 @@ h6 {
   color: var(--cpsl-color-text-secondary);
 }
 
+:host(.tertiary) {
+  color: var(--cpsl-color-text-tertiary);
+}
+
 :host(.subtle) {
   color: var(--cpsl-color-text-subtle);
 }

package/dist/collection/components/cpsl-text/cpsl-text.js

@@ -31,9 +31,10 @@ export class CpslText {
         }
     }
     render() {
-        return (h(Host, { key: 'dfb056131c8efe94b9a5ec99a8dadd4669dde15f', class: {
+        return (h(Host, { key: '0f21250f8e8b38eeb854ba3b465c4ac0917b058b', class: {
                 'primary': this.color === 'primary',
                 'secondary': this.color === 'secondary',
+                'tertiary': this.color === 'tertiary',
                 'subtle': this.color === 'subtle',
                 'inverted': this.color === 'inverted',
                 'error': this.color === 'error',
@@ -72,15 +73,15 @@ export class CpslText {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'subtle' | 'inverted' | 'error'",
-                    "resolved": "\"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\"",
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error'",
+                    "resolved": "\"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color of text.\nOptions are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
+                    "text": "The color of text.\nOptions are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
                 },
                 "attribute": "color",
                 "reflect": false,

package/dist/collection/components/cpsl-text/cpsl-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAMyD,SAAS;uBAO+E,OAAO;sBAO7G,SAAS;;IAEvE,IAAY,OAAO;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CACL;oBACE,eAAa,CACX,CACL,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAE/B,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAE9B,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-text',\n  styleUrl: 'cpsl-text.scss',\n  shadow: true,\n})\nexport class CpslText {\n  /**\n   * The color of text.\n   * Options are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error' = 'primary';\n\n  /**\n   * The variant of text.\n   * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n   * Default is: `\"bodyM\"`.\n   */\n  @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n  /**\n   * The weight of text.\n   * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n   * Default is: `\"regular\"`.\n   */\n  @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n  private get Content() {\n    switch (this.variant) {\n      case 'headingXS': {\n        return (\n          <h6>\n            <slot></slot>\n          </h6>\n        );\n      }\n      case 'headingS': {\n        return (\n          <h5>\n            <slot></slot>\n          </h5>\n        );\n      }\n      case 'headingM': {\n        return (\n          <h4>\n            <slot></slot>\n          </h4>\n        );\n      }\n      case 'headingL': {\n        return (\n          <h3>\n            <slot></slot>\n          </h3>\n        );\n      }\n      case 'headingXL': {\n        return (\n          <h2>\n            <slot></slot>\n          </h2>\n        );\n      }\n      case 'heading2XL': {\n        return (\n          <h1>\n            <slot></slot>\n          </h1>\n        );\n      }\n      default: {\n        return (\n          <p>\n            <slot></slot>\n          </p>\n        );\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          // COLORS\n          'primary': this.color === 'primary',\n          'secondary': this.color === 'secondary',\n          'subtle': this.color === 'subtle',\n          'inverted': this.color === 'inverted',\n          'error': this.color === 'error',\n          // WEIGHTS\n          'medium': this.weight === 'medium',\n          'semi-bold': this.weight === 'semiBold',\n          'bold': this.weight === 'bold',\n          // SIZES\n          'body-2xs': this.variant === 'body2XS',\n          'body-xs': this.variant === 'bodyXS',\n          'body-s': this.variant === 'bodyS',\n          'body-m': this.variant === 'bodyM',\n          'body-l': this.variant === 'bodyL',\n          'body-xl': this.variant === 'bodyXL',\n          'heading-xs': this.variant === 'headingXS',\n          'heading-s': this.variant === 'headingS',\n          'heading-m': this.variant === 'headingM',\n          'heading-l': this.variant === 'headingL',\n          'heading-xl': this.variant === 'headingXL',\n          'heading-2xl': this.variant === 'heading2XL',\n        }}\n      >\n        {this.Content}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAMsE,SAAS;uBAOkE,OAAO;sBAO7G,SAAS;;IAEvE,IAAY,OAAO;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CACL;oBACE,eAAa,CACX,CACL,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAE/B,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAE9B,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-text',\n  styleUrl: 'cpsl-text.scss',\n  shadow: true,\n})\nexport class CpslText {\n  /**\n   * The color of text.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' = 'primary';\n\n  /**\n   * The variant of text.\n   * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n   * Default is: `\"bodyM\"`.\n   */\n  @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n  /**\n   * The weight of text.\n   * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n   * Default is: `\"regular\"`.\n   */\n  @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n  private get Content() {\n    switch (this.variant) {\n      case 'headingXS': {\n        return (\n          <h6>\n            <slot></slot>\n          </h6>\n        );\n      }\n      case 'headingS': {\n        return (\n          <h5>\n            <slot></slot>\n          </h5>\n        );\n      }\n      case 'headingM': {\n        return (\n          <h4>\n            <slot></slot>\n          </h4>\n        );\n      }\n      case 'headingL': {\n        return (\n          <h3>\n            <slot></slot>\n          </h3>\n        );\n      }\n      case 'headingXL': {\n        return (\n          <h2>\n            <slot></slot>\n          </h2>\n        );\n      }\n      case 'heading2XL': {\n        return (\n          <h1>\n            <slot></slot>\n          </h1>\n        );\n      }\n      default: {\n        return (\n          <p>\n            <slot></slot>\n          </p>\n        );\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          // COLORS\n          'primary': this.color === 'primary',\n          'secondary': this.color === 'secondary',\n          'tertiary': this.color === 'tertiary',\n          'subtle': this.color === 'subtle',\n          'inverted': this.color === 'inverted',\n          'error': this.color === 'error',\n          // WEIGHTS\n          'medium': this.weight === 'medium',\n          'semi-bold': this.weight === 'semiBold',\n          'bold': this.weight === 'bold',\n          // SIZES\n          'body-2xs': this.variant === 'body2XS',\n          'body-xs': this.variant === 'bodyXS',\n          'body-s': this.variant === 'bodyS',\n          'body-m': this.variant === 'bodyM',\n          'body-l': this.variant === 'bodyL',\n          'body-xl': this.variant === 'bodyXL',\n          'heading-xs': this.variant === 'headingXS',\n          'heading-s': this.variant === 'headingS',\n          'heading-m': this.variant === 'headingM',\n          'heading-l': this.variant === 'headingL',\n          'heading-xl': this.variant === 'headingXL',\n          'heading-2xl': this.variant === 'heading2XL',\n        }}\n      >\n        {this.Content}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css

@@ -81,7 +81,7 @@
   padding-bottom: var(--button-padding-bottom);
   border: 1px solid transparent;
   cursor: pointer;
-  background-color: var(--button-background-color);
+  background: var(--button-background-color);
   border-color: var(--button-border-color);
   display: flex;
   flex-direction: column;

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js

@@ -5,7 +5,7 @@ export class CpslTileButton {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: 'c4aee36001539cabc1965e193962701a2f5f7ade' }, h("button", { key: '76e0f5b921f2b6c2086610a8c4b1e48dc85c751e', class: "button-native" }, h("cpsl-icon", { key: '379e1ba5fe8ee4bf089ce84d8ce3eaa0eb32b214', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'e09443c7527e061ea752b6ebe7abc6152ae61783' }))));
+        return (h(Host, { key: 'f7d808cefadce272235872ba05cd60f9c0bffc3c' }, h("button", { key: '47e808a5ed0bdb6e0705d746844f74ce7ad07620', class: "button-native" }, h("cpsl-icon", { key: 'ba374a65bee6433b96d2f3c8abbe1da51f9172af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b5f55bdcec9566625f7c7a9567a933ff86815d6c' }))));
     }
     static get is() { return "cpsl-tile-button"; }
     static get encapsulation() { return "shadow"; }
@@ -43,7 +43,7 @@ export class CpslTileButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/constants.js

@@ -13,8 +13,8 @@ export const DEFAULT_Z_INDICES = {
     modalNoOverlay: 0,
     appBar: 10000,
     overlay: 10001,
-    modal: 10002,
     drawer: 10004,
-    modalWrapper: 10005,
+    modal: 10005,
+    popover: 10006,
 };
 //# sourceMappingURL=constants.js.map

package/dist/collection/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,cAAc,GAAmD;IAC5E,GAAG,EAAE,sBAAsB;IAC3B,MAAM,EAAE,sBAAsB;IAC9B,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,cAAc,EAAE,CAAC;IACjB,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n  foregroundColor: '#121212',\n  backgroundColor: '#FAFAFA',\n};\n\nexport const COLOR_MIXES = [0, 0.04, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];\n\nexport const UTILITY_COLORS: { red: string; yellow: string; green: string } = {\n  red: 'rgba(240, 68, 56, 1)',\n  yellow: 'rgba(251, 188, 4, 1)',\n  green: 'rgba(52, 168, 83, 1)',\n};\n\nexport const DEFAULT_Z_INDICES = {\n  modalNoOverlay: 0,\n  appBar: 10000,\n  overlay: 10001,\n  modal: 10002,\n  drawer: 10004,\n  modalWrapper: 10005,\n};\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,cAAc,GAAmD;IAC5E,GAAG,EAAE,sBAAsB;IAC3B,MAAM,EAAE,sBAAsB;IAC9B,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,cAAc,EAAE,CAAC;IACjB,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,KAAK;CACf,CAAC","sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n  foregroundColor: '#121212',\n  backgroundColor: '#FAFAFA',\n};\n\nexport const COLOR_MIXES = [0, 0.04, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];\n\nexport const UTILITY_COLORS: { red: string; yellow: string; green: string } = {\n  red: 'rgba(240, 68, 56, 1)',\n  yellow: 'rgba(251, 188, 4, 1)',\n  green: 'rgba(52, 168, 83, 1)',\n};\n\nexport const DEFAULT_Z_INDICES = {\n  modalNoOverlay: 0,\n  appBar: 10000,\n  overlay: 10001,\n  drawer: 10004,\n  modal: 10005,\n  popover: 10006,\n};\n"]}

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius } from './interface';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius, IconType } from './interface';\n"]}

package/dist/collection/interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n  | 'on'\n  | 'off'\n  | 'name'\n  | 'honorific-prefix'\n  | 'given-name'\n  | 'additional-name'\n  | 'family-name'\n  | 'honorific-suffix'\n  | 'nickname'\n  | 'email'\n  | 'username'\n  | 'new-password'\n  | 'current-password'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'street-address'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'address-level4'\n  | 'address-level3'\n  | 'address-level2'\n  | 'address-level1'\n  | 'country'\n  | 'country-name'\n  | 'postal-code'\n  | 'cc-name'\n  | 'cc-given-name'\n  | 'cc-additional-name'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-number'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-csc'\n  | 'cc-type'\n  | 'transaction-currency'\n  | 'transaction-amount'\n  | 'language'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'sex'\n  | 'tel'\n  | 'tel-country-code'\n  | 'tel-national'\n  | 'tel-area-code'\n  | 'tel-local'\n  | 'tel-extension'\n  | 'impp'\n  | 'url'\n  | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderRadius?: BorderRadius;\n  font?: string;\n  customPalette?: CustomPalette;\n  customFontSizes?: CustomFontSizes;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomFontSizes {\n  body2XS?: string;\n  bodyXS?: string;\n  bodyS?: string;\n  bodyM?: string;\n  bodyL?: string;\n  bodyXL?: string;\n  headingXS?: string;\n  headingS?: string;\n  headingM?: string;\n  headingL?: string;\n  headingXL?: string;\n  heading2XL?: string;\n}\n\nexport interface CustomPalette {\n  text?: {\n    primary?: string;\n    secondary?: string;\n    subtle?: string;\n    inverted?: string;\n    error?: string;\n  };\n  modal?: {\n    surface?: {\n      main?: string;\n      footer?: string;\n    };\n    border?: string;\n  };\n  input?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n  };\n  tileButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n    };\n    border?: string;\n  };\n  primaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  secondaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  divider?: string;\n  spinner?: {\n    path?: string;\n    circle?: string;\n  };\n  pill?: {\n    text?: string;\n    container?: {\n      background?: string;\n      border?: string;\n    };\n  };\n  progressIndicator?: {\n    active?: string;\n    next?: string;\n    previous?: string;\n  };\n  qr?: {\n    fill?: string;\n    background?: string;\n    border?: string;\n  };\n  slideButton?: {\n    slider?: {\n      background?: string;\n      border?: string;\n      text?: string;\n      container?: {\n        start?: {\n          background?: string;\n          border?: string;\n        };\n        end?: {\n          background?: string;\n          border?: string;\n        };\n      };\n    };\n    start?: {\n      text?: string;\n    };\n    end?: {\n      text?: string;\n    };\n  };\n  alert?: {\n    surface?: {\n      error?: string;\n    };\n    border?: {\n      error?: string;\n    };\n  };\n  switch?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    thumb?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  checkbox?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n    icon?: string;\n  };\n  radio?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  card?: {\n    surface?: string;\n    border?: string;\n  };\n}\n"]}
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n  | 'on'\n  | 'off'\n  | 'name'\n  | 'honorific-prefix'\n  | 'given-name'\n  | 'additional-name'\n  | 'family-name'\n  | 'honorific-suffix'\n  | 'nickname'\n  | 'email'\n  | 'username'\n  | 'new-password'\n  | 'current-password'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'street-address'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'address-level4'\n  | 'address-level3'\n  | 'address-level2'\n  | 'address-level1'\n  | 'country'\n  | 'country-name'\n  | 'postal-code'\n  | 'cc-name'\n  | 'cc-given-name'\n  | 'cc-additional-name'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-number'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-csc'\n  | 'cc-type'\n  | 'transaction-currency'\n  | 'transaction-amount'\n  | 'language'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'sex'\n  | 'tel'\n  | 'tel-country-code'\n  | 'tel-national'\n  | 'tel-area-code'\n  | 'tel-local'\n  | 'tel-extension'\n  | 'impp'\n  | 'url'\n  | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderRadius?: BorderRadius;\n  font?: string;\n  customPalette?: CustomPalette;\n  customFontSizes?: CustomFontSizes;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomFontSizes {\n  body2XS?: string;\n  bodyXS?: string;\n  bodyS?: string;\n  bodyM?: string;\n  bodyL?: string;\n  bodyXL?: string;\n  headingXS?: string;\n  headingS?: string;\n  headingM?: string;\n  headingL?: string;\n  headingXL?: string;\n  heading2XL?: string;\n}\n\nexport interface CustomPalette {\n  text?: {\n    primary?: string;\n    secondary?: string;\n    subtle?: string;\n    inverted?: string;\n    error?: string;\n  };\n  modal?: {\n    surface?: {\n      main?: string;\n      footer?: string;\n    };\n    border?: string;\n  };\n  input?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      hover?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n  };\n  select?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      hover?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n    dropdown?: {\n      border?: string;\n    };\n  };\n  file?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      drag?: string;\n    };\n    border?: {\n      placeholder?: string;\n      error?: string;\n    };\n  };\n  tileButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n    };\n    border?: string;\n  };\n  primaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  secondaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  destructiveButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  divider?: string;\n  spinner?: {\n    path?: string;\n    circle?: string;\n  };\n  pill?: {\n    text?: string;\n    container?: {\n      background?: string;\n      border?: string;\n    };\n  };\n  progressIndicator?: {\n    active?: string;\n    next?: string;\n    previous?: string;\n  };\n  qr?: {\n    fill?: string;\n    background?: string;\n    border?: string;\n  };\n  slideButton?: {\n    slider?: {\n      background?: string;\n      border?: string;\n      text?: string;\n      container?: {\n        start?: {\n          background?: string;\n          border?: string;\n        };\n        end?: {\n          background?: string;\n          border?: string;\n        };\n      };\n    };\n    start?: {\n      text?: string;\n    };\n    end?: {\n      text?: string;\n    };\n  };\n  alert?: {\n    surface?: {\n      error?: string;\n    };\n    border?: {\n      error?: string;\n    };\n  };\n  switch?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    thumb?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  checkbox?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n    icon?: string;\n  };\n  radio?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  card?: {\n    surface?: string;\n    border?: string;\n  };\n}\n\nexport interface InteractionCallback {\n  eventName: string;\n  callback: (ev: any) => void;\n}\n"]}

package/dist/collection/utils/theme/generateBorderRadii.js

@@ -54,10 +54,13 @@ export const generateBorderRadii = ({ borderRadius }) => {
         }
     }
     document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
@@ -69,5 +72,6 @@ export const generateBorderRadii = ({ borderRadius }) => {
     document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${smallRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-card', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${xSmallRadius}px`);
 };
 //# sourceMappingURL=generateBorderRadii.js.map

package/dist/collection/utils/theme/generateBorderRadii.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateBorderRadii = ({ borderRadius }: Pick<Theme, 'borderRadius'>) => {\n  if (!Boolean(borderRadius)) {\n    return;\n  }\n\n  let xSmallRadius: number, smallRadius: number, mediumRadius: number, largeRadius: number;\n  const fullRadius = 1000;\n  let isFull = false;\n  let isNone = false;\n\n  switch (borderRadius) {\n    case 'none': {\n      isNone = true;\n      xSmallRadius = 0;\n      smallRadius = 0;\n      mediumRadius = 0;\n      largeRadius = 0;\n      break;\n    }\n    case 'xs': {\n      xSmallRadius = 2;\n      smallRadius = 4;\n      mediumRadius = 12;\n      largeRadius = 20;\n      break;\n    }\n    case 'sm': {\n      xSmallRadius = 2;\n      smallRadius = 8;\n      mediumRadius = 16;\n      largeRadius = 24;\n      break;\n    }\n    case 'lg': {\n      xSmallRadius = 8;\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      break;\n    }\n    case 'full': {\n      xSmallRadius = 8;\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      isFull = true;\n      break;\n    }\n    default:\n    case 'md': {\n      xSmallRadius = 4;\n      smallRadius = 12;\n      mediumRadius = 20;\n      largeRadius = 28;\n      break;\n    }\n  }\n\n  document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${xSmallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-card', `${mediumRadius}px`);\n};\n"]}
+{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateBorderRadii = ({ borderRadius }: Pick<Theme, 'borderRadius'>) => {\n  if (!Boolean(borderRadius)) {\n    return;\n  }\n\n  let xSmallRadius: number, smallRadius: number, mediumRadius: number, largeRadius: number;\n  const fullRadius = 1000;\n  let isFull = false;\n  let isNone = false;\n\n  switch (borderRadius) {\n    case 'none': {\n      isNone = true;\n      xSmallRadius = 0;\n      smallRadius = 0;\n      mediumRadius = 0;\n      largeRadius = 0;\n      break;\n    }\n    case 'xs': {\n      xSmallRadius = 2;\n      smallRadius = 4;\n      mediumRadius = 12;\n      largeRadius = 20;\n      break;\n    }\n    case 'sm': {\n      xSmallRadius = 2;\n      smallRadius = 8;\n      mediumRadius = 16;\n      largeRadius = 24;\n      break;\n    }\n    case 'lg': {\n      xSmallRadius = 8;\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      break;\n    }\n    case 'full': {\n      xSmallRadius = 8;\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      isFull = true;\n      break;\n    }\n    default:\n    case 'md': {\n      xSmallRadius = 4;\n      smallRadius = 12;\n      mediumRadius = 20;\n      largeRadius = 28;\n      break;\n    }\n  }\n\n  document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${xSmallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-card', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${xSmallRadius}px`);\n};\n"]}

package/dist/collection/utils/theme/generatePalette.js

@@ -38,9 +38,17 @@ export const generatePalette = ({ foregroundColor, backgroundColor, customPalett
     document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[6]);
     document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[7]);
     document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[8]);
-    document.documentElement.style.setProperty('--cpsl-color-utility-red', overlayMix(foregroundColor, UTILITY_COLORS.red));
-    document.documentElement.style.setProperty('--cpsl-color-utility-yellow', overlayMix(foregroundColor, UTILITY_COLORS.yellow));
-    document.documentElement.style.setProperty('--cpsl-color-utility-green', overlayMix(foregroundColor, UTILITY_COLORS.green));
+    const utilityLightMixColor = '#FFFFFF';
+    const utilityLightMixValue = 0.72;
+    const red = overlayMix(foregroundColor, UTILITY_COLORS.red);
+    const yellow = overlayMix(foregroundColor, UTILITY_COLORS.yellow);
+    const green = overlayMix(foregroundColor, UTILITY_COLORS.green);
+    document.documentElement.style.setProperty('--cpsl-color-utility-red', red);
+    document.documentElement.style.setProperty('--cpsl-color-utility-yellow', yellow);
+    document.documentElement.style.setProperty('--cpsl-color-utility-green', green);
+    document.documentElement.style.setProperty('--cpsl-color-utility-red-light', mix(red, utilityLightMixColor, utilityLightMixValue));
+    document.documentElement.style.setProperty('--cpsl-color-utility-yellow-light', mix(yellow, utilityLightMixColor, utilityLightMixValue));
+    document.documentElement.style.setProperty('--cpsl-color-utility-green-light', mix(green, utilityLightMixColor, utilityLightMixValue));
     if (Boolean(customPalette)) {
         const cssColorVars = getCssColors(customPalette);
         Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));

package/dist/collection/utils/theme/generatePalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"generatePalette.js","sourceRoot":"","sources":["../../../../src/utils/theme/generatePalette.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColorIsBlack } from 'color2k';\nimport { Theme } from '../../interface';\nimport { getCssColors, isColor, overlayMix } from './utils';\nimport { COLOR_MIXES, DEFAULT_THEME, UTILITY_COLORS } from '../../constants';\n\nexport type Palette = {\n  foregroundColors: string[];\n  backgroundColors: string[];\n  isDarkBackground: boolean;\n};\n\nexport const generatePalette = ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>): Palette => {\n  if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {\n    foregroundColor = DEFAULT_THEME.foregroundColor;\n  }\n  if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {\n    backgroundColor = DEFAULT_THEME.backgroundColor;\n  }\n\n  const isDarkBackground = !readableColorIsBlack(backgroundColor);\n\n  const palette: Palette = {\n    foregroundColors: [],\n    backgroundColors: [],\n    isDarkBackground,\n  };\n\n  const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';\n  const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';\n\n  COLOR_MIXES.forEach(value => {\n    palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));\n    palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));\n  });\n\n  // BACKGROUND\n  document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);\n  document.documentElement.style.setProperty('--cpsl-color-background-4', palette.backgroundColors[1]);\n  document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[2]);\n  document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[3]);\n  document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[4]);\n  document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[5]);\n  document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[6]);\n  document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[7]);\n  document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[8]);\n\n  // FOREGROUND\n  document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-4', palette.foregroundColors[1]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[2]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[3]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[4]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[5]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[6]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[7]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[8]);\n\n  // UTILITY\n  document.documentElement.style.setProperty('--cpsl-color-utility-red', overlayMix(foregroundColor, UTILITY_COLORS.red));\n  document.documentElement.style.setProperty('--cpsl-color-utility-yellow', overlayMix(foregroundColor, UTILITY_COLORS.yellow));\n  document.documentElement.style.setProperty('--cpsl-color-utility-green', overlayMix(foregroundColor, UTILITY_COLORS.green));\n\n  if (Boolean(customPalette)) {\n    const cssColorVars = getCssColors(customPalette);\n    Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n  }\n\n  return palette;\n};\n"]}
+{"version":3,"file":"generatePalette.js","sourceRoot":"","sources":["../../../../src/utils/theme/generatePalette.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColorIsBlack } from 'color2k';\nimport { Theme } from '../../interface';\nimport { getCssColors, isColor, overlayMix } from './utils';\nimport { COLOR_MIXES, DEFAULT_THEME, UTILITY_COLORS } from '../../constants';\n\nexport type Palette = {\n  foregroundColors: string[];\n  backgroundColors: string[];\n  isDarkBackground: boolean;\n};\n\nexport const generatePalette = ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>): Palette => {\n  if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {\n    foregroundColor = DEFAULT_THEME.foregroundColor;\n  }\n  if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {\n    backgroundColor = DEFAULT_THEME.backgroundColor;\n  }\n\n  const isDarkBackground = !readableColorIsBlack(backgroundColor);\n\n  const palette: Palette = {\n    foregroundColors: [],\n    backgroundColors: [],\n    isDarkBackground,\n  };\n\n  const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';\n  const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';\n\n  COLOR_MIXES.forEach(value => {\n    palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));\n    palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));\n  });\n\n  // BACKGROUND\n  document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);\n  document.documentElement.style.setProperty('--cpsl-color-background-4', palette.backgroundColors[1]);\n  document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[2]);\n  document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[3]);\n  document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[4]);\n  document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[5]);\n  document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[6]);\n  document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[7]);\n  document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[8]);\n\n  // FOREGROUND\n  document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-4', palette.foregroundColors[1]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[2]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[3]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[4]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[5]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[6]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[7]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[8]);\n\n  const utilityLightMixColor = '#FFFFFF';\n  const utilityLightMixValue = 0.72;\n  // UTILITY\n  const red = overlayMix(foregroundColor, UTILITY_COLORS.red);\n  const yellow = overlayMix(foregroundColor, UTILITY_COLORS.yellow);\n  const green = overlayMix(foregroundColor, UTILITY_COLORS.green);\n  document.documentElement.style.setProperty('--cpsl-color-utility-red', red);\n  document.documentElement.style.setProperty('--cpsl-color-utility-yellow', yellow);\n  document.documentElement.style.setProperty('--cpsl-color-utility-green', green);\n  document.documentElement.style.setProperty('--cpsl-color-utility-red-light', mix(red, utilityLightMixColor, utilityLightMixValue));\n  document.documentElement.style.setProperty('--cpsl-color-utility-yellow-light', mix(yellow, utilityLightMixColor, utilityLightMixValue));\n  document.documentElement.style.setProperty('--cpsl-color-utility-green-light', mix(green, utilityLightMixColor, utilityLightMixValue));\n\n  if (Boolean(customPalette)) {\n    const cssColorVars = getCssColors(customPalette);\n    Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n  }\n\n  return palette;\n};\n"]}