@usecapsule/core-components 3.0.1 → 3.1.1

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,53 @@
   --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;
+  position: relative;
 }
 
-.table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
 }
-.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);
+.overlay.horizontal-scroll:not(.vertical-scroll) {
+  box-shadow: -24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset;
 }
-.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);
+.overlay.vertical-scroll:not(.horizontal-scroll) {
+  box-shadow: 0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset;
 }
-.table tr {
-  border-bottom: var(--table-content-border-width) solid var(--table-content-border-color);
+.overlay.horizontal-scroll.vertical-scroll {
+  box-shadow: -24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset;
 }
-.table tr:last-child {
-  border-bottom: none;
+
+.table-wrapper {
+  overflow: auto;
+  height: 100%;
 }
 
 .container-header {
@@ -139,7 +140,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 +151,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,8 +1,30 @@
 import { Host, h } from "@stencil/core";
 export class CpslTable {
     constructor() {
-        this.columns = undefined;
-        this.rows = undefined;
+        this.resizeOb = new ResizeObserver(entries => {
+            const rect = entries[0].contentRect;
+            const containerWidth = Math.round(rect.width);
+            const containerHeight = Math.round(rect.height);
+            const contentWidth = this.containerSlotEl.clientWidth;
+            const contentHeight = this.containerSlotEl.clientHeight;
+            if (contentWidth > containerWidth) {
+                this.hasHorizontalScroll = true;
+            }
+            else {
+                this.hasHorizontalScroll = false;
+            }
+            if (contentHeight > containerHeight) {
+                this.hasVerticalScroll = true;
+            }
+            else {
+                this.hasVerticalScroll = false;
+            }
+        });
+        this.hasHorizontalScroll = false;
+        this.hasVerticalScroll = false;
+    }
+    componentDidLoad() {
+        this.resizeOb.observe(this.contentContainerEl);
     }
     get containerHeaderEl() {
         return this.el.querySelector('[slot="header"]');
@@ -10,20 +32,20 @@ export class CpslTable {
     get containerFooterEl() {
         return this.el.querySelector('[slot="footer"]');
     }
+    get contentContainerEl() {
+        return this.el.shadowRoot.getElementById('content-container');
+    }
+    get headerEl() {
+        return this.el.shadowRoot.getElementById('header-container');
+    }
+    get containerSlotEl() {
+        return this.el.querySelector('[slot="content"]');
+    }
+    get footerEl() {
+        return this.el.shadowRoot.getElementById('footer-container');
+    }
     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: 'c697e33ff0d764f2a99ea98fbbedbb8b3813fb2d' }, h("cpsl-card", { key: 'a1ac41d42ef793cd3d5acd2e7d0468586351b3b4', part: "table-container", style: { position: 'relative' } }, h("div", { key: '5dcce6e3711ce9bdee0e890ab697c2452abdf29e', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '6256e32a37806f8f6e1fb62a5bc61f937ee16c19', name: "header" })), h("div", { key: 'd151946e88ed755bac82490a237a9336be339abc', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, h("slot", { key: '2afa462b208482a645e88060b74ef8150e4fc0d0', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (h("div", { style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: '0c8aceeb251955750a45017d5d44eb9be9e2fafc', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '0e9f35d9f1d50654a1cca75e008a3cc162fb316c', name: "footer" })))));
     }
     static get is() { return "cpsl-table"; }
     static get encapsulation() { return "shadow"; }
@@ -37,50 +59,10 @@ export class CpslTable {
             "$": ["cpsl-table.css"]
         };
     }
-    static get properties() {
+    static get states() {
         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."
-                }
-            }
+            "hasHorizontalScroll": {},
+            "hasVerticalScroll": {}
         };
     }
     static get elementRef() { return "el"; }

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,SAAS;;;;;IAapB,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,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,iBAAiB;gBACjD,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,eAAe,EAAC,IAAI,EAAC,eAAe,IAC5C,OAAO,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAC5B,aAAO,KAAK,EAAC,OAAO;oBAClB;wBACE,cACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;;4BACtB,MAAM,KAAK,GAAG,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,CAAC;4BAElC,OAAO,CACL,UAAI,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,KAAK,QAAQ,EAAE,YAAY,EAAE,KAAK,KAAK,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,KAAK,EAAE,KAAK,EAAC,KAAK;gCAC1I,iBAAW,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,IACxC,GAAG,CAAC,UAAU,CACL,CACT,CACN,CAAC;wBACJ,CAAC,CAAC,CACC,CACC;oBACR,iBACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACnB,OAAO,CACL,UAAI,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,IACpE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;;4BACtB,MAAM,KAAK,GAAG,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,CAAC;4BAClC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;4BAE/F,OAAO,CACL,UAAI,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,KAAK,QAAQ,EAAE,YAAY,EAAE,KAAK,KAAK,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,MAAM,EAAE,IAC7G,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CACzB,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAC3B,CAAC,CAAC,CAAC,CACF,iBAAW,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,IACxC,KAAK,CACI,CACb,CACE,CACN,CAAC;wBACJ,CAAC,CAAC,CACC,CACN,CAAC;oBACJ,CAAC,CAAC,CACI,CACF,CACT,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,EAAE;oBAC1C,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP,CACG;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,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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":"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","sourcesContent":["import { Component, Host, Element, h, State } 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  @State() hasHorizontalScroll: boolean = false;\n  @State() hasVerticalScroll: boolean = false;\n\n  componentDidLoad() {\n    this.resizeOb.observe(this.contentContainerEl);\n  }\n\n  private resizeOb = new ResizeObserver(entries => {\n    // since we are observing only a single element, so we access the first element in entries array\n    const rect = entries[0].contentRect;\n\n    // current width & height\n    const containerWidth = Math.round(rect.width);\n    const containerHeight = Math.round(rect.height);\n    const contentWidth = this.containerSlotEl.clientWidth;\n    const contentHeight = this.containerSlotEl.clientHeight;\n\n    if (contentWidth > containerWidth) {\n      this.hasHorizontalScroll = true;\n    } else {\n      this.hasHorizontalScroll = false;\n    }\n    if (contentHeight > containerHeight) {\n      this.hasVerticalScroll = true;\n    } else {\n      this.hasVerticalScroll = false;\n    }\n  });\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  private get contentContainerEl() {\n    return this.el.shadowRoot.getElementById('content-container');\n  }\n\n  private get headerEl() {\n    return this.el.shadowRoot.getElementById('header-container');\n  }\n\n  private get containerSlotEl() {\n    return this.el.querySelector('[slot=\"content\"]');\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('footer-container');\n  }\n\n  render() {\n    return (\n      <Host>\n        <cpsl-card part=\"table-container\" style={{ position: 'relative' }}>\n          <div id=\"header-container\" class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n            <slot name=\"header\"></slot>\n          </div>\n          <div id=\"content-container\" class={{ 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }} part=\"content\">\n            <slot name=\"content\"></slot>\n          </div>\n          {this.headerEl && this.contentContainerEl && this.footerEl && (\n            <div\n              style={{ top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }}\n              class={{ 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }}\n            />\n          )}\n          <div id=\"footer-container\" 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: 'f12c604fc3dadd8088792f02b42bd36618afa298', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'be9cfe9c9e069c9593c40d32f474dd23bb8a63fd', class: "tabs-container" }, h("slot", { key: '50ec843d4ae261a0c4f0034d6f60366f5114f55c' }), h("div", { key: '814c5513a2945059ff240912b26a7936a0ee7478', 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: '97db3be68cbcd4a59851a74bfefac921b9f7efc0', 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: 'e12a3acf1adac28cb7ed464426bd50b48e5727d8' }, h("button", { key: '005df699f7b93807598568cd6542907f851d0234', class: "button-native" }, h("cpsl-icon", { key: 'af574fff1782925d1bc8d4146538fb179f63dead', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b6a1d9557e7dbf974411496c7a29b1c0e5d648f3' }))));
     }
     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\" | \"brush\" | \"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\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"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\" | \"farcasterBrand\" | \"farcaster\" | \"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/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  customBorderRadii?: CustomBorderRadii;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\nexport interface CustomBorderRadii {\n  input?: string;\n  select?: string;\n  fileSelect?: string;\n  alert?: string;\n  tabs?: string;\n  primaryButton?: string;\n  secondaryButton?: string;\n  destructiveButton?: string;\n  tileButton?: string;\n  modal?: string;\n  pill?: string;\n  qrCode?: string;\n  infoBox?: string;\n  tableContainer?: string;\n  switch?: string;\n  checkbox?: string;\n  radio?: string;\n  avatar?: string;\n  card?: string;\n  buttonGroup?: string;\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"]}