npm - @usecapsule/core-components - Versions diffs - 3.4.1 → 3.5.1-dev.1 - Mend

@usecapsule/core-components 3.4.1 → 3.5.1-dev.1

Files changed (168) hide show

package/dist/collection/components/cpsl-drawer/cpsl-drawer.js CHANGED Viewed

@@ -33,12 +33,12 @@ export class CpslDrawer {
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
         const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
         const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
-        return (h(Host, { key: 'ef38766c4e22cdb6496bf62611215ce7fbc8abc1', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+        return (h(Host, { key: '81d454f0a4532e333880f4e37a79545ee5710536', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '7aa68b6104536d6fb29164c396179aa4f287ce97', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '5049fe95873339bb4877728c49e0eda4d3158397', id: "container", class: "container", part: "container" }, h("slot", { key: 'c6d76fa8b8e47828c472ed9b876faf49c68a8a29' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '21fdc68cd01c652b7a9f8e1d624027f4051fdb47', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '085ba3bf2b57ceeb5615c42816e7a0f8758eeeb0', id: "container", class: "container", part: "container" }, h("slot", { key: 'bd8517779864cf35bc30b33597b27a43c749ba1f' }))));
     }
     static get is() { return "cpsl-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js CHANGED Viewed

@@ -94,7 +94,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '351276cd3f2f3170a074810279edefb3880b1e3e' }, h("button", { key: 'c73281596b3cb5ea374721b474357cba751eb112', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'af68dc8729ed048ee14b49ba756b115e414feb3e', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'dc2f7f50a072af503d81ca77e543571871647b5d', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '7e2e9270927bcdac083849389e9423d502fec40b', class: "search-bar" }, h("input", { key: '003e9aae15f7c9e5b11fa2aa3f9aeb93c1492a04', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js CHANGED Viewed

@@ -91,6 +91,7 @@ export class CpslFileUpload {
         this.dragError = undefined;
         this.isUploading = undefined;
         this.uploadError = undefined;
+        this.disabled = false;
         this.errorText = undefined;
         this.externalFilename = undefined;
         this.externalSrc = undefined;
@@ -115,7 +116,7 @@ export class CpslFileUpload {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '18e0096b27a8b805ee94f525ace13457349f16f3' }, this.label && (h("label", { key: '22a099ae4179b2cead6c9835123bcf4e365833e9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: 'fc02c2a0aa82d896d50045cfc10f45cf3d86e321', name: "label" }), h("div", { key: '31e50d9d7249f4700d33a9164b39050d8909efba', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '9546b0675d270df3a24fa3cd6ee88fd4871b55de', class: { 'label-container': true } }, h("slot", { key: 'd9c1581dbad76b3ef0b1b90b8b455d0c0691ed89', name: "left-content" })), h("div", { key: 'f97421c4e415b1b5e634d494eebf964d12ee206c', class: { 'file-container': true } }, this.FileContent), h("input", { key: '5e84df74b088c43b5734118eae1de926f5c3cc70', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '146a25dc2a19ed98649e7af450b700c4009975c9', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '83df60cdc393902f62e9766dc06ea0065aca11fe' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (h(Host, { key: '521ca35901a009b303650d7446e1f148930d7fe3' }, this.label && (h("label", { key: '94c58691decea8455a254698ec8fd27baba260ca', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: 'cf7e80e4c4a1e48b4f4efddfe4e8eb0f4a31ed4b', name: "label" }), h("div", { key: '35f1707b3c8d1f1c939d9312b541f32edfc424d1', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '327f71aaaa7d4920a62118ea956c4c128907fae6', class: { 'label-container': true } }, h("slot", { key: '0c4891ffb0c9d49e2b5b09c3bdbc8d5b2ed3ff2d', name: "left-content" })), h("div", { key: '47dc7cc569d860dc07478c2782c62a0d25b3df07', class: { 'file-container': true } }, this.FileContent), h("input", { key: '809568bfed82463cda7851d3717187112cff708b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange, disabled: this.disabled })), (this.errorText || this.helperText) && (h("div", { key: '6f06cba54f65d903b3d22e015e694a154b189df7', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2103ca2366b9a7827c42302cea3fa8d8c71bc50b' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     static get is() { return "cpsl-file-upload"; }
     static get encapsulation() { return "shadow"; }
@@ -131,6 +132,24 @@ export class CpslFileUpload {
     }
     static get properties() {
         return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If the input is disabled.\nDefault is: false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "errorText": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\n\n /*\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Filename for the external source of the selected file.\n /\n @Prop() externalFilename?: string;\n\n /\n External source for the selected file.\n /\n @Prop() externalSrc?: string;\n\n /\n Valid file types.\n /\n @Prop() fileTypes?: string[];\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n /\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /\n Emitted when the file is dropped in the input.\n /\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag enters the input.\n /\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag leaves the input.\n /\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file changes.\n /\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /\n Emitted when the file is removed.\n /\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (input.files.length) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (this.fileTypes?.length ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = this.uploadFile ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) \|\| Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name \|\| this.externalFilename \|\| ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={this.file ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={this.file ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\n\n /*\n If the input is disabled.\n * Default is: false.\n /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Filename for the external source of the selected file.\n /\n @Prop() externalFilename?: string;\n\n /\n External source for the selected file.\n /\n @Prop() externalSrc?: string;\n\n /\n Valid file types.\n /\n @Prop() fileTypes?: string[];\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n /\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /\n Emitted when the file is dropped in the input.\n /\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag enters the input.\n /\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag leaves the input.\n /\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file changes.\n /\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /\n Emitted when the file is removed.\n /\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (input.files.length) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (this.fileTypes?.length ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = this.uploadFile ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) \|\| Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name \|\| this.externalFilename \|\| ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={this.file ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={this.file ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n disabled={this.disabled}\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

package/dist/collection/components/cpsl-grid/cpsl-grid.js CHANGED Viewed

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: '2a309bb97e8f23435d58104be2ecb598fbd6d057', class: {
+        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'd47730a267a8daba7e8e17396789950bf3200ebb' })));
+            } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-hero/cpsl-hero.css CHANGED Viewed

@@ -113,15 +113,15 @@
 :host(.connection) .ring1,
 :host(.externalWalletConnection) > .backgroundContainer > .background .ring1 {
-  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 93%));
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
 }
 :host(.connection) .ring2,
 :host(.externalWalletConnection) > .backgroundContainer > .background .ring2 {
-  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 95%));
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
 }
 :host(.connection) .ring3,
 :host(.externalWalletConnection) > .backgroundContainer > .background .ring3 {
-  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
 }
 :host(.pending) > .backgroundContainer > .background .ring0 {
@@ -296,7 +296,7 @@
 :host > .backgroundContainer > .background > .cover {
   position: absolute;
-  height: 50%;
+  height: 100%;
   top: 34%;
   right: 0;
   left: 0;

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

@@ -11,7 +11,7 @@ export class CpslHero {
     }
     render() {
         var _a;
-        return (h(Host, { key: '536748bef37748f5ded6103e7b1157d433a9db9e', class: {
+        return (h(Host, { key: 'e57d19559f8d8c92c23dcf95ca88246529a4b46f', class: {
                 // VARIANTS
                 connection: this.variant === 'connection',
                 pending: this.variant === 'pending' || this.variant === 'customContent',
@@ -19,7 +19,7 @@ export class CpslHero {
                 add: this.variant === 'add',
                 failed: this.variant === 'failed',
                 externalWalletConnection: this.variant === 'externalWalletConnection',
-            } }, h("div", { key: '5f3f7d129c3b1578c5ccbfddef6c1cdc4462d1a9', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '7916fa310aea389a5f728b03a1214c7d749cd078', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '90d112bee9c23a1fc2c9eeceeb7748389c43b330', class: "ring ring3" }), h("div", { key: '615774a2e59d583b8a117692ac59bc52eb46ba1d', class: "ring ring2" }), h("div", { key: '83e683c08a388ee72f2944ee9dd5db31e3acf077', class: "ring ring1" }), h("div", { key: 'ef301e6e5335f73c47aeb37595878d7fcdcf26ec', class: "ring ring0" }), h("div", { key: '52cd5b1515ccf62c0547a6de5adbb4a60ff69cc0', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '09fcb87ee34ca15d0fbe71a61aacbdeca4c430ab' }, h("img", { key: 'ca54c63fe0bb01769cff7092e0f54e584d4126fc', class: "connectionImage", src: Images.heroDefault }), h("div", { key: 'f483ade09afa8d444a4858f6b24e547dabc02066', class: "connectDiagramContainer" }, h("slot", { key: '678fb89e0ea73e4683d8b24774ec9ad1574506b5', name: "connectionLeft" }), h("slot", { key: '8161ca39b931cdcad9f26a2b9cd240d21d2bd58e', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '493b458b1d61d74a34eb5257e5e24c2926ac43e2', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '98765b1ff59627f41df553cd67d35bdd3fcfb365' }, !this.withDefaultTheme && h("img", { key: 'aa9707c9a33fd79e60265e77e637be70f0dad207', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'c5e80d7b587010e7e954b82c99a7b27161f8ab67', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: 'a2df2e659262e63ae0c93ba067620f9aabf258b2' }, h("cpsl-icon", { key: 'b2465a8b324d1193b3c13dfb4b13db9766362c18', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '4610993869b7f3e12acc28f059a52a0385d89857', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '04154eb679a0ed9ba9926400649118524a2e8930' }, h("cpsl-icon", { key: '0057163ff813b61dba7e4b025ae887d401ab229b', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '58cf28880b08d9e057601017ad34bc9ef845fda5', class: "connectDiagramContainer" }, h("slot", { key: 'f6bef13f87758ad8464f40e13b15e90a4a8957b7', name: "connectionLeft" }), h("slot", { key: '7632e44ec387c056e1d632e6bfa0a8f55b15f0d5', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '290ebe2de0cabee6f349bad7effe9078199a17a5', class: "customImageContainer" }, h("slot", { key: '8daf7cf22a8f9cdc66b3e825d576bbd64d94ef30', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: 'ae6da06f903d815e082b6b5d4dd98e20f0fc36b7' }, h("div", { key: '09b3d4c4125b2d33b5a957dc18af18031b5a2312', class: "fadeOut" }), h("div", { key: '82e3164dccb5baf4eb00fb14e1f0f35ea24c79f3', class: "cover" }))))), h("cpsl-text", { key: 'e82eca3761754f67cc54b844d30a88af33936a10', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { key: '00eaa47c5107f3b6960c476d90fb9472f18ef1b4', variant: "bodyM", color: "secondary" }, this.subtitle))));
+            } }, h("div", { key: '3341d0ad455074858c3b0a9b9fe7af291ad198eb', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '4835ffd38a99277e7178023188aae95dc6ba4ee5', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '565638be3e6c5d230a50329031ec47c87a0e8077', class: "ring ring3" }), h("div", { key: '483a3691798e33c8547543ef6a397bb8992f86e3', class: "ring ring2" }), h("div", { key: 'c0ca1841f37918e0e1a805b34f53e2f0b204bbda', class: "ring ring1" }), h("div", { key: 'ea3b347c265679d6acd1bdd8ed26a9761d649caa', class: "ring ring0" }), h("div", { key: '1be1e9e5ef42961d8daeb4997daefc118e50b349', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '137e8b9bfb53df3208104b77767cfab0f06a500a' }, h("img", { key: '519fa3982fdbc8cee57ba3c3d2a470039d6165e3', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '128cc3362b905a35ca781b4b0eab45912542e185', class: "connectDiagramContainer" }, h("slot", { key: 'bbac944d46752eb2a997c3751b7395d13c0f6ce5', name: "connectionLeft" }), h("slot", { key: '30fd8334daf3944c51ceb4ea9f42cd489125d85c', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: 'e332372db7e6651d1419d8ef83c60ed255ff1cd5', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '7674761e57156f14350082a5e9a95a423e5a916d' }, !this.withDefaultTheme && h("img", { key: 'fc1a5e6bcff525490e85e0ac84542ecc70c78d65', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'fd3341ee64f6f598a299deda12ad2fab633aaa1a', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: '155fc4680ce6bedc930cc6b27eb676eb4b067acb' }, h("cpsl-icon", { key: 'ca4dac8a0b2e0dd4fb198195528209d648d71289', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: 'd6d1886df2a68eb365924788b4bb080281e31aac', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '783ec93baf3c3c79813a39c60c35b7a04b34d56c' }, h("cpsl-icon", { key: '56e792294a698f86591a7b5f1e25b08a0428c5b7', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '790af19407de8398e5ed3efe676edd856d7b222f', class: "connectDiagramContainer" }, h("slot", { key: 'fe702ae2f8f515dd3697684defd4cc6c06495283', name: "connectionLeft" }), h("slot", { key: 'db0670c2f4095a2e3cfd287e03ad6a429fe8caef', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '0e7a0ab404fdb0fbcc249dc3ec3537e2554a945a', class: "customImageContainer" }, h("slot", { key: 'fb0afeb690e5676007d0ccc1545f9ce9791af045', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '2fa75125453408d7fe3d7d3a6c1e9091c5042afe' }, h("div", { key: 'e9b06d0d820e8cc30d10147bcfcb55279d3977a0', class: "fadeOut" }), h("div", { key: '0018aa5158cd89c81184c50f3581e1bbecb961ee', class: "cover" }))))), h("cpsl-text", { key: 'b52135d714d10638dd03342bc4c1f374509d2bfd', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: '2c4dbbc33c7d3faaed5ef9e0d32d49f064667502', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"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~~QAAQ~~,~~IAC3D~~,IAAI,CAAC,KAAK,CACD;YACX,IAAI,CAAC,QAAQ,IAAI,CAChB,kEAAW,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,~~IACzC~~,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';\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 Capsule 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=\"~~medium~~\">\n {this.title}\n </cpsl-text>\n {this.subtitle && (\n <cpsl-text variant=\"~~bodyM~~\" color=\"secondary\">\n {this.subtitle}\n </cpsl-text>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\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 Capsule 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-icon/cpsl-icon.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: 'f7a86185e4b1deadba2a41381b88d6860d0d60d5', part: "icon", role: "img" }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '83970488e84a7359667faa9948079b3fac1b8e09', part: "icon", role: "img" }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"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\"",
+                    "resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"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",

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

@@ -29,7 +29,7 @@ export class CpslIconGroup {
     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: '4c81ff12c46582623d226e8a7f3078ff279bc8ae' }, icons.map((icon, index) => {
+        return (h(Host, { key: '687a32dfbceec5b1544c695bc4e8ffbcf094a384' }, icons.map((icon, index) => {
             const isIcon = isOfTypeIconType(icon);
             return (h("span", { part: "icon-container", class: {
                     'icon-container': true,

package/dist/collection/components/cpsl-identicon/cpsl-identicon.css CHANGED Viewed

@@ -1,22 +1,21 @@
 :host {
-  --identicon-background-red: linear-gradient(136deg, #FF4270 6.86%, #FF7C7C 93.78%);
-  --identicon-background-orange: linear-gradient(136deg, #F45532 6.86%, #FF9B63 93.78%);
-  --identicon-background-yellow: linear-gradient(136deg, #FFA756 6.86%, #FBFF47 93.78%);
-  --identicon-background-green: linear-gradient(136deg, #0CAE60 6.86%, #7BFFD0 93.78%);
-  --identicon-background-blue: linear-gradient(136deg, #476FFF 6.86%, #47C8FF 93.78%);
-  --identicon-background-purple: linear-gradient(136deg, #9747FF 6.86%, #DA47FF 93.78%);
+  --identicon-background-red: linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);
+  --identicon-background-orange: linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);
+  --identicon-background-yellow: linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);
+  --identicon-background-green: linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);
+  --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);
+  --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);
+  --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);
   display: block;
-  width: 62px;
-  height: 62px;
   aspect-ratio: 1;
-  border-radius: 6px;
+  border-radius: 25%;
   position: relative;
   border: 1px solid var(--cpsl-color-background-8);
 }
 :host > svg {
   fill: rgba(255, 255, 255, 0.6);
   position: absolute;
-  width: 35%;
+  width: 30%;
 }
 :host > svg.rotate90 {
   transform: rotate(0.25turn);
@@ -66,4 +65,12 @@
 :host(.purple) {
   background: var(--identicon-background-purple);
+}
+:host(.empty) {
+  background: var(--identicon-background-empty);
+}
+:host(.avatar) {
+  border-radius: 1000px;
 }

package/dist/collection/components/cpsl-identicon/cpsl-identicon.js CHANGED Viewed

@@ -1,4 +1,6 @@
 import { Host, h } from "@stencil/core";
+import Prando from "../../lib/prando";
+import { COLORS } from "../../utils/prand";
 const SingleArc = (rotation) => (h("svg", { class: {
         rotate90: rotation === 1,
         rotate180: rotation === 2,
@@ -9,35 +11,72 @@ const DoubleArc = (rotation) => (h("svg", { class: {
         rotate180: rotation === 2,
         rotate270: rotation === 3,
     }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_255)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" })), h("defs", null, h("clipPath", { id: "clip0_674_255" }, h("rect", { width: "12", height: "12" })))));
+const BASE_PATTERNS = [
+    [
+        [0, 0, 0, 0],
+        [0, 1, 3, 2],
+    ],
+    [
+        [1, 1, 0, 0],
+        [0, 1, 3, 2],
+    ],
+    [
+        [0, 1, 0, 1],
+        [0, 1, 3, 2],
+    ],
+    [
+        [0, 0, 1, 1],
+        [0, 1, 3, 2],
+    ],
+    [
+        [1, 0, 1, 0],
+        [0, 1, 3, 2],
+    ],
+    [
+        [1, 1, 1, 1],
+        [0, 1, 3, 2],
+    ],
+    [
+        [0, 0, 0, 0],
+        [2, 3, 1, 0],
+    ],
+    [
+        [1, 1, 1, 1],
+        [2, 3, 1, 0],
+    ],
+    [
+        [1, 1, 1, 1],
+        [0, 1, 2, 3],
+    ],
+];
 export class CpslIdenticon {
     constructor() {
         this.hash = undefined;
-        this.size = 40;
+        this.size = '40px';
+        this.variant = 'default';
     }
     render() {
-        const [code, color] = stringToBinaryAndColor(this.hash);
-        const shapeA = ((code >> 2) & 1) !== 0;
-        const shapeB = ((code >> 3) & 1) !== 0;
-        const shapeC = ((code >> 4) & 1) !== 0;
-        const shapeD = ((code >> 5) & 1) !== 0;
-        const rotationA = (code >> 6) & 3;
-        const rotationB = (code >> 7) & 3;
-        const rotationC = (code >> 8) & 3;
-        const rotationD = (code >> 9) & 3;
-        const [shapes, rotations] = [
-            [shapeA, shapeB, shapeC, shapeD],
-            [rotationA, rotationB, rotationC, rotationD],
-        ];
-        return (h(Host, { key: '39bcae00e3fd58ff94639fbb43c77fd942899e51', class: {
-                red: color === 'red',
-                orange: color === 'orange',
-                yellow: color === 'yellow',
-                green: color === 'green',
-                blue: color === 'blue',
-                purple: color === 'purple',
-            } }, shapes.map((isDouble, index) => {
-            return isDouble ? DoubleArc(rotations[index]) : SingleArc(rotations[index]);
-        })));
+        let props;
+        const isEmpty = !this.hash;
+        if (!isEmpty)
+            props = getIdenticonProps(this.hash);
+        return (h(Host, { key: 'df11955bfd534443af672f89d5133010e2ae775d', class: {
+                red: (props === null || props === void 0 ? void 0 : props.color) === 'red',
+                orange: (props === null || props === void 0 ? void 0 : props.color) === 'orange',
+                yellow: (props === null || props === void 0 ? void 0 : props.color) === 'yellow',
+                green: (props === null || props === void 0 ? void 0 : props.color) === 'green',
+                blue: (props === null || props === void 0 ? void 0 : props.color) === 'blue',
+                purple: (props === null || props === void 0 ? void 0 : props.color) === 'purple',
+                empty: !(props === null || props === void 0 ? void 0 : props.color) && !this.hash,
+                avatar: this.variant === 'avatar',
+            }, style: {
+                width: this.size,
+                height: this.size,
+            } }, (props === null || props === void 0 ? void 0 : props.shapes) &&
+            (props === null || props === void 0 ? void 0 : props.rotations) &&
+            props.shapes.map((isDouble, index) => {
+                return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);
+            })));
     }
     static get is() { return "cpsl-identicon"; }
     static get encapsulation() { return "shadow"; }
@@ -57,12 +96,12 @@ export class CpslIdenticon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -71,30 +110,56 @@ export class CpslIdenticon {
                 "reflect": false
             },
             "size": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the identicon.\nDefault is: 40."
+                    "text": "The CSS width and height of the identicon.\nDefault is: 40px."
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "40"
+                "defaultValue": "'40px'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'avatar'",
+                    "resolved": "\"avatar\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }
 }
-const COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
-function stringToBinaryAndColor(hash) {
-    const code = (hash.charCodeAt(0) << 24) | (hash.charCodeAt(1) << 16) | (hash.charCodeAt(2) << 8) | hash.charCodeAt(3);
-    const color = COLORS[Math.abs(code % 6)];
-    return [code, color];
+const PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];
+function getIdenticonProps(seed) {
+    const rng = new Prando(seed);
+    const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));
+    const deviationIndex = Math.floor(iDeviation / 4);
+    const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];
+    return {
+        color: COLORS[iColor],
+        shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {
+            return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;
+        }),
+        rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),
+    };
 }
 //# sourceMappingURL=cpsl-identicon.js.map