@getpara/core-components 0.1.0

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

@@ -0,0 +1,144 @@
+import { Fragment, Host, h } from "@stencil/core";
+import { Images } from "../../assets/images/index.js";
+export class CpslHero {
+    constructor() {
+        this.height = undefined;
+        this.hideFadeOut = undefined;
+        this.variant = 'connection';
+        this.title = undefined;
+        this.subtitle = undefined;
+        this.withDefaultTheme = undefined;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '21f06bee97c15394204e51345265840c0bb57ded', class: {
+                // VARIANTS
+                connection: this.variant === 'connection',
+                pending: this.variant === 'pending' || this.variant === 'customContent',
+                approved: this.variant === 'approved',
+                add: this.variant === 'add',
+                failed: this.variant === 'failed',
+                externalWalletConnection: this.variant === 'externalWalletConnection',
+            } }, h("div", { key: 'cbd8e3439b0917cf5b45d79056211cb8fe43a587', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '419c8fdf5558e6f196a46dc6022daf3ad6050251', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '419820dbeb1d174aa8debc37771611179475eb40', class: "ring ring3" }), h("div", { key: 'c910e05f614e93c52bd7443cc292dfcd9efb53e6', class: "ring ring2" }), h("div", { key: 'ebc6fe78bfdf8cbbcef6a72c5d1b0da2e90b7bc3', class: "ring ring1" }), h("div", { key: '19f2098025fe8ca8dc9ae5e9a1b8b2df3c2b2937', class: "ring ring0" }), h("div", { key: 'd4c086b614baa607cf12bd33a3243590fd518ae3', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: 'e01ed456653b8b81789f7d02d821c5180dc2f297' }, h("img", { key: '68f9d50c4776ab841478532d1a1510e4ac4db66c', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '406a7afddbebb879e2082e8d7314dc3f68b6b1f1', class: "connectDiagramContainer" }, h("slot", { key: 'c29cc57f7872e5458db148ec9ce3e0b1bdc5727e', name: "connectionLeft" }), h("slot", { key: '643a3601a1dc0c394fb2717a3c23ec2315c53b43', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '013cac7f7c99588a16622f3027562593d708109f', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '370cc25aeb469aac547fa7c11c426e052e669fb1' }, !this.withDefaultTheme && h("img", { key: '1431b42645379d3f331d146f496968cadd1f9761', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'c0dd8c73fb4dcdc1a6c9f42802c71cd5bd0e211c', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: '2197f3804a5af7d954ed40ea38afcc120606ad6d' }, h("cpsl-icon", { key: '3b36c38cb5bd8ce1817ca89de29cbe1b9645ac54', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '905354cdb7459375048dec7c9713bb14481e8888', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '450bddc3c57c2b0648abb289d821338f470f2337' }, h("cpsl-icon", { key: '485d9f1ea3b38f73a55e1c19d2d5d196ca57bafb', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: 'a753a251cf9eb8f70597677be409aa2ebaaa592b', class: "connectDiagramContainer" }, h("slot", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', name: "connectionLeft" }), h("slot", { key: '0fe2e6febecce576da0c6a45ece6f3fb4c1fd815', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '66a332f8b5c4f0aec4ab05b7bf6c5acbc25cb983', class: "customImageContainer" }, h("slot", { key: '08e67afa1a33d425eee83e7c2a4e21c94164a0ed', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '547cf7a394cf4b4cc94d475336fdd97926aeaed9' }, h("div", { key: '70762d3a1133ea003117eaee8f4e38d5ce084860', class: "fadeOut" }), h("div", { key: '8b80e6988fc77cec6a0b55d26678a22ba20f566b', class: "cover" }))))), h("cpsl-text", { key: '6ebe7f8fa96fa60a3a8f3ed2fabaada0f7b96aeb', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: 'f80a52a7171f8390e3f98be1f4c37ec917110667', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
+    }
+    static get is() { return "cpsl-hero"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-hero.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-hero.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The height of the container.\nDefault is: 180."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "hideFadeOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the fade out components\nDefault is: `false`."
+                },
+                "attribute": "hide-fade-out",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed'",
+                    "resolved": "\"add\" | \"approved\" | \"connection\" | \"customContent\" | \"externalWalletConnection\" | \"failed\" | \"pending\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the button.\nOptions are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\nDefault is: `\"connection\"`."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'connection'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "title",
+                "reflect": true
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subtitle",
+                "reflect": true
+            },
+            "withDefaultTheme": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use the Para custom theming or use the provided theme\nDefault is: `false`."
+                },
+                "attribute": "with-default-theme",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAOtD,MAAM,OAAO,QAAQ;;;;uBAkB0H,YAAY;;;;;IAYzJ,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe;gBACvE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,GAAG,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;gBAC3B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,0BAA0B;aACtE;YAED,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,GAAG,IAAI,EAAE;gBAC3E,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;oBACnE,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;wBAClE,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,EAAC,QAAQ;4BACP,4DAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;4BACxD,4DAAK,KAAK,EAAC,yBAAyB;gCAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;gCAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;wBACnF,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,EAAC,QAAQ;4BACN,CAAC,IAAI,CAAC,gBAAgB,IAAI,4DAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;4BACjF,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB,GAAI,CAC/F,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,EAAC,QAAQ;4BACP,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,GAAI,CACjG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,iBAAiB,GAAG;wBACpF,IAAI,CAAC,OAAO,KAAK,0BAA0B,IAAI,CAC9C,EAAC,QAAQ;4BACP,kEAAW,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,wBAAwB,GAAG;4BAC1E,4DAAK,KAAK,EAAC,yBAAyB;gCAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;gCAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,eAAe,IAAI,CACnC,4DAAK,KAAK,EAAC,sBAAsB;4BAC/B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP,CACG;oBACL,CAAC,IAAI,CAAC,WAAW,IAAI,CACpB,EAAC,QAAQ;wBACP,4DAAK,KAAK,EAAC,SAAS,GAAG;wBACvB,4DAAK,KAAK,EAAC,OAAO,GAAG,CACZ,CACZ,CACG,CACF;YACN,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,IAC7D,IAAI,CAAC,KAAK,CACD;YACX,IAAI,CAAC,QAAQ,IAAI,CAChB,kEAAW,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,IACzD,IAAI,CAAC,QAAQ,CACJ,CACb,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Fragment, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images/index.js';\n\n@Component({\n  tag: 'cpsl-hero',\n  styleUrl: 'cpsl-hero.scss',\n  shadow: true,\n})\nexport class CpslHero {\n  /**\n   * The height of the container.\n   * Default is: 180.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Hides the fade out components\n   * Default is: `false`.\n   */\n  @Prop() hideFadeOut?: boolean;\n\n  /**\n   * The variant of the button.\n   * Options are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\n   * Default is: `\"connection\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed' = 'connection';\n\n  @Prop({ reflect: true }) title: string;\n\n  @Prop({ reflect: true }) subtitle?: string;\n\n  /**\n   * Whether to use the Para custom theming or use the provided theme\n   * Default is: `false`.\n   */\n  @Prop() withDefaultTheme?: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          connection: this.variant === 'connection',\n          pending: this.variant === 'pending' || this.variant === 'customContent',\n          approved: this.variant === 'approved',\n          add: this.variant === 'add',\n          failed: this.variant === 'failed',\n          externalWalletConnection: this.variant === 'externalWalletConnection',\n        }}\n      >\n        <div class=\"backgroundContainer\" style={{ height: `${this.height ?? 180}px` }}>\n          <div class={{ background: true, defaultTheme: this.withDefaultTheme }}>\n            <div class=\"ring ring3\" />\n            <div class=\"ring ring2\" />\n            <div class=\"ring ring1\" />\n            <div class=\"ring ring0\" />\n            <div class={{ ringCenter: true, defaultTheme: this.withDefaultTheme }}>\n              {this.variant === 'connection' && (\n                <Fragment>\n                  <img class=\"connectionImage\" src={Images.heroDefault} />\n                  <div class=\"connectDiagramContainer\">\n                    <slot name=\"connectionLeft\" />\n                    <slot name=\"connectionRight\" />\n                  </div>\n                </Fragment>\n              )}\n              {this.variant === 'pending' && <img class=\"pendingImage\" src={Images.heroPending} />}\n              {this.variant === 'approved' && (\n                <Fragment>\n                  {!this.withDefaultTheme && <img class=\"approvedImage\" src={Images.heroSuccess} />}\n                  <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule'} />\n                </Fragment>\n              )}\n              {this.variant === 'add' && (\n                <Fragment>\n                  <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule'} />\n                </Fragment>\n              )}\n              {this.variant === 'failed' && <cpsl-icon class=\"centerIcon\" icon=\"heroAlertCircle\" />}\n              {this.variant === 'externalWalletConnection' && (\n                <Fragment>\n                  <cpsl-icon class=\"externalConnectionIcon\" icon=\"heroExternalConnection\" />\n                  <div class=\"connectDiagramContainer\">\n                    <slot name=\"connectionLeft\" />\n                    <slot name=\"connectionRight\" />\n                  </div>\n                </Fragment>\n              )}\n              {this.variant === 'customContent' && (\n                <div class=\"customImageContainer\">\n                  <slot name=\"image\" />\n                </div>\n              )}\n            </div>\n            {!this.hideFadeOut && (\n              <Fragment>\n                <div class=\"fadeOut\" />\n                <div class=\"cover\" />\n              </Fragment>\n            )}\n          </div>\n        </div>\n        <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"semiBold\">\n          {this.title}\n        </cpsl-text>\n        {this.subtitle && (\n          <cpsl-text variant=\"bodyS\" weight=\"medium\" color=\"secondary\">\n            {this.subtitle}\n          </cpsl-text>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-hero/cpsl-hero.stories.js

@@ -0,0 +1,17 @@
+const meta = {
+    title: 'Components/CpslHero',
+};
+export default meta;
+const ConnectionTemplate = () => `
+<cpsl-hero variant="connection" title="Approve Transaction" subtitle="Please review the following transaction details">
+  <cpsl-identicon size={62} hash="5yhg423546" slot="connectionLeft"></cpsl-identicon>
+  <cpsl-identicon size={62} hash="884884fj4" slot="connectionRight"></cpsl-identicon>
+</cpsl-hero>`;
+const PendingTemplate = () => `<cpsl-hero variant="pending"></cpsl-hero>`;
+const ApprovedTemplate = () => `<cpsl-hero variant="approved"></cpsl-hero>`;
+const FailedTemplate = () => `<cpsl-hero variant="failed"></cpsl-hero>`;
+export const Connection = ConnectionTemplate.bind({});
+export const Pending = PendingTemplate.bind({});
+export const Approved = ApprovedTemplate.bind({});
+export const Failed = FailedTemplate.bind({});
+//# sourceMappingURL=cpsl-hero.stories.js.map

package/dist/collection/components/cpsl-hero/cpsl-hero.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-hero.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA0C;IAClD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,kBAAkB,GAAU,GAAG,EAAE,CAAC;;;;aAI3B,CAAC;AACd,MAAM,eAAe,GAAU,GAAG,EAAE,CAAC,2CAA2C,CAAC;AACjF,MAAM,gBAAgB,GAAU,GAAG,EAAE,CAAC,4CAA4C,CAAC;AACnF,MAAM,cAAc,GAAU,GAAG,EAAE,CAAC,0CAA0C,CAAC;AAE/E,MAAM,CAAC,MAAM,UAAU,GAAU,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7D,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,QAAQ,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,MAAM,GAAU,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslHero } from './cpsl-hero.js';\n\nconst meta: Meta<CpslHero & { content?: string }> = {\n  title: 'Components/CpslHero',\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslHero & { content?: string }>;\n\nconst ConnectionTemplate: Story = () => `\n<cpsl-hero variant=\"connection\" title=\"Approve Transaction\" subtitle=\"Please review the following transaction details\">\n  <cpsl-identicon size={62} hash=\"5yhg423546\" slot=\"connectionLeft\"></cpsl-identicon>\n  <cpsl-identicon size={62} hash=\"884884fj4\" slot=\"connectionRight\"></cpsl-identicon>\n</cpsl-hero>`;\nconst PendingTemplate: Story = () => `<cpsl-hero variant=\"pending\"></cpsl-hero>`;\nconst ApprovedTemplate: Story = () => `<cpsl-hero variant=\"approved\"></cpsl-hero>`;\nconst FailedTemplate: Story = () => `<cpsl-hero variant=\"failed\"></cpsl-hero>`;\n\nexport const Connection: Story = ConnectionTemplate.bind({});\nexport const Pending: Story = PendingTemplate.bind({});\nexport const Approved: Story = ApprovedTemplate.bind({});\nexport const Failed: Story = FailedTemplate.bind({});\n"]}

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

@@ -0,0 +1,103 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  display: block;
+  --height: 24px;
+  --width: 24px;
+  --icon-color: currentColor;
+  --icon-fill-color: currentColor;
+  --icon-stroke-color: currentColor;
+  width: var(--width);
+  height: var(--height);
+}
+:host .foreground-0 {
+  fill: var(--cpsl-color-foreground-0);
+  stop-color: var(--cpsl-color-foreground-0);
+}
+:host .accent-0 {
+  fill: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+  stop-color: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+}
+
+:host div {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--icon-color);
+}
+
+:host svg {
+  width: 100%;
+  height: 100%;
+}
+:host svg .background-16 {
+  fill: var(--cpsl-color-background-16);
+}
+:host svg .foreground-0 {
+  fill: var(--cpsl-color-foreground-0);
+}
+:host svg .fill {
+  fill: var(--icon-fill-color);
+}
+:host svg .stroke {
+  stroke: var(--icon-stroke-color);
+}
+
+:host img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

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

@@ -0,0 +1,86 @@
+import { Host, h } from "@stencil/core";
+import { Icons } from "../../assets/icons/index.js";
+export class CpslIcon {
+    constructor() {
+        this.src = undefined;
+        this.size = undefined;
+        this.icon = undefined;
+    }
+    render() {
+        return (h(Host, { key: '3eeac68688cf0a4acf173be909a7f36b4285f97d', part: "icon", role: "img", style: this.size ? { width: this.size, height: this.size } : {} }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+    }
+    static get is() { return "cpsl-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The external source of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS size of the icon."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"laptop\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"optimismBrand\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"spacingHeight\" | \"star04Filled\" | \"stars01Filled\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"userCircle\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"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\"",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../interface.js",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "icon",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ;;;;;;IAgBnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IACzF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The CSS size of the icon.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host part=\"icon\" role=\"img\" style={this.size ? { width: this.size, height: this.size } : {}}>\n        {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.css

@@ -0,0 +1,97 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --container-padding-top: 4px;
+  --container-padding-end: 4px;
+  --container-padding-bottom: 4px;
+  --container-padding-start: 4px;
+  --container-border-width: 2px;
+  --container-border-color: var(--cpsl-color-iconGroup-border);
+  --container-background: var(--cpsl-color-iconGroup-surface);
+  --icon-height: 15px;
+  --icon-width: 15px;
+  --icon-item-color: var(--cpsl-color-iconGroup-icon-default);
+  display: flex;
+  width: auto;
+  padding-right: calc(var(--container-border-width) * 3);
+}
+
+.icon-container {
+  -webkit-padding-start: var(--container-padding-start);
+  padding-inline-start: var(--container-padding-start);
+  -webkit-padding-end: var(--container-padding-end);
+  padding-inline-end: var(--container-padding-end);
+  padding-top: var(--container-padding-top);
+  padding-bottom: var(--container-padding-bottom);
+  margin-right: calc(var(--container-border-width) * -3);
+  border-style: solid;
+  border-width: var(--container-border-width);
+  border-color: var(--container-border-color);
+  border-radius: 1000px;
+  background: var(--container-background);
+  transition: margin 250ms;
+}
+.icon-container cpsl-icon {
+  --height: var(--icon-height);
+  --width: var(--icon-width);
+  --icon-color: var(--icon-item-color);
+}
+.icon-container.expanded {
+  margin-right: calc(var(--container-border-width) * -1);
+}
+.icon-container.disabled cpsl-icon {
+  --icon-color: var(--cpsl-color-iconGroup-icon-disabled);
+}

package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js

@@ -0,0 +1,121 @@
+import { Host, h } from "@stencil/core";
+import { Icons } from "../../assets/icons/index.js";
+function isOfTypeIconType(key) {
+    return Object.keys(Icons).includes(key);
+}
+export class CpslIconGroup {
+    constructor() {
+        this.isHovered = undefined;
+        this.expandFrom = 'right';
+        this.disabled = false;
+        this.icons = undefined;
+    }
+    componentDidLoad() {
+        this.el.addEventListener('mouseover', () => {
+            this.isHovered = true;
+        });
+        this.el.addEventListener('mouseout', () => {
+            this.isHovered = false;
+        });
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('mouseover', () => {
+            this.isHovered = true;
+        });
+        this.el.removeEventListener('mouseout', () => {
+            this.isHovered = false;
+        });
+    }
+    render() {
+        // If disabled remove all brand icons to ensure the disabled color is shown correctly
+        const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;
+        return (h(Host, { key: 'f471279b940c2b3b3872c1d37477fd85073127c8' }, icons.map((icon, index) => {
+            const isIcon = isOfTypeIconType(icon);
+            return (h("span", { part: "icon-container", class: {
+                    'icon-container': true,
+                    'expanded': !this.disabled && this.isHovered && (this.expandFrom === 'right' ? index !== this.icons.length - 1 : index === 0),
+                    'disabled': this.disabled,
+                }, style: { zIndex: `${this.icons.length - index}` } }, h("cpsl-icon", { key: icon, icon: isIcon ? icon : undefined, src: !isIcon ? icon : undefined })));
+        })));
+    }
+    static get is() { return "cpsl-icon-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-icon-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-icon-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expandFrom": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The direction the icons should expand from"
+                },
+                "attribute": "expand-from",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the input."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(IconType | string)[]",
+                    "resolved": "string[]",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../interface.js",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icons to display."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-icon-group.js.map

package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-icon-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon-group/cpsl-icon-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,SAAS,gBAAgB,CAAC,GAAW;IACnC,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAOD,MAAM,OAAO,aAAa;;;0BAQe,OAAO;wBAK3B,KAAK;;;IAOxB,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,GAAG,EAAE;YAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,qFAAqF;QACrF,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAE7F,OAAO,CACL,EAAC,IAAI,uDACF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAEtC,OAAO,CACL,YACE,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,UAAU,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;oBAC7H,UAAU,EAAE,IAAI,CAAC,QAAQ;iBAC1B,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,EAAE,EAAE;gBAEjD,iBAAW,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GAAI,CACrF,CACR,CAAC;QACJ,CAAC,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\nfunction isOfTypeIconType(key: string): key is IconType {\n  return Object.keys(Icons).includes(key);\n}\n\n@Component({\n  tag: 'cpsl-icon-group',\n  styleUrl: 'cpsl-icon-group.scss',\n  shadow: true,\n})\nexport class CpslIconGroup {\n  @Element() el!: HTMLCpslIconGroupElement;\n\n  @State() isHovered: boolean;\n\n  /**\n   * The direction the icons should expand from\n   */\n  @Prop() expandFrom: 'left' | 'right' = 'right';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the icons to display.\n   */\n  @Prop() icons: (IconType | string)[];\n\n  componentDidLoad() {\n    this.el.addEventListener('mouseover', () => {\n      this.isHovered = true;\n    });\n    this.el.addEventListener('mouseout', () => {\n      this.isHovered = false;\n    });\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('mouseover', () => {\n      this.isHovered = true;\n    });\n    this.el.removeEventListener('mouseout', () => {\n      this.isHovered = false;\n    });\n  }\n\n  render() {\n    // If disabled remove all brand icons to ensure the disabled color is shown correctly\n    const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;\n\n    return (\n      <Host>\n        {icons.map((icon, index) => {\n          const isIcon = isOfTypeIconType(icon);\n\n          return (\n            <span\n              part=\"icon-container\"\n              class={{\n                'icon-container': true,\n                'expanded': !this.disabled && this.isHovered && (this.expandFrom === 'right' ? index !== this.icons.length - 1 : index === 0),\n                'disabled': this.disabled,\n              }}\n              style={{ zIndex: `${this.icons.length - index}` }}\n            >\n              <cpsl-icon key={icon} icon={isIcon ? icon : undefined} src={!isIcon ? icon : undefined} />\n            </span>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"]}