npm - @usecapsule/core-components - Versions diffs - 3.2.0-dev.0 → 3.2.0 - Mend

@usecapsule/core-components 3.2.0-dev.0 → 3.2.0

Files changed (386) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,IAAI,~~EAAE~~,CAAC,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAE~~,OAAO,~~EAAsB~~,KAAK,~~EAAE~~,MAAM,~~EAAgB~~,KAAK,~~EAAE~~,MAAM,eAAe,CAAC;~~AACjI~~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~~UAAI~~,KAAK,EAAC,YAAY;oBACpB,~~aAAO~~,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC1G,CACN;gBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC9B,UAAI,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBACtC,YAAM,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;oBACzC,IAAI,CAAC,KAAK;;oBAAE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACN,CAAC,CACC,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /*\n Width of the dropdown\n /\n @Prop() width: string = '100%';\n\n /\n Whether or not to include search capability\n /\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /\n Items to be presented in the dropdown\n /\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /\n The selected item in the dropdown\n /\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail \| null = null;\n\n /\n Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail \| null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`;\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel \|\| this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n </li>\n )}\n {this.filteredItems.map(item => (\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n ComponentInterface,\n Watch,\n Listen,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /*\n Width of the dropdown\n /\n @Prop() width: string = '100%';\n\n /\n Whether or not to include search capability\n /\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /\n Items to be presented in the dropdown\n /\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /\n The selected item in the dropdown\n /\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail \| null = null;\n\n /\n Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail \| null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`;\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel \|\| this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n </li>\n )}\n {this.filteredItems.map(item => (\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/dropdown-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconType } from \"../../interface\";\n\nexport interface DropdownInputEventDetail {\n icon: IconType,\n label: string,\n value: string,\n selectedLabel?: string\n}"]}
1	+ {"version":3,"file":"dropdown-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/dropdown-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconType } from '../../interface';\n\nexport interface DropdownInputEventDetail {\n icon: IconType;\n label: string;\n value: string;\n selectedLabel?: string;\n}\n"]}

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

@@ -115,7 +115,12 @@ export class CpslFileUpload {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '71d945bcac5d443719737781fd9ec5166952760d' }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '63786e91e0a230d85344da507d0508ac1524cc88', name: "label" }), h("div", { key: '74e7296a0c8ef732094c0e7fab3e0a7db916694b', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '1a3030a828d8e7a742f3dfbff784e213f845859e', class: { 'label-container': true } }, h("slot", { key: '1f77e4c6566deffe7cd830fccb96d21c22daee4b', name: "left-content" })), h("div", { key: '3dc0a113348d15d52aae929792de6ee48da795ca', class: { 'file-container': true } }, this.FileContent), h("input", { key: 'a6fc37d212b5e4284f4eeec56dc4e7a32ff8374b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (h(Host, { key: 'fd110192fe9a14089d8671d9091132d7f3d3b2c2' }, this.label && (h("label", { key: '2915f8854e6f53ef3e5c0ebde58ac49ab4dda377', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '9dcc6ad98cf8ceea075a498fddd9a33eede5b50c', name: "label" }), h("div", { key: 'ba0e490eb3d18e9bf2aedbc60151d27b5cef75a9', class: {
+                'container': true,
+                'error': Boolean(this.errorText),
+                'drag': this.dragOver,
+                'drag-error': this.dragError,
+            } }, h("div", { key: '781df9aefcdd73a2ee39ec9d5afd323c9df607d5', class: { 'label-container': true } }, h("slot", { key: '4ead666c56a93bce34c89ee89cf971d10dab9d27', name: "left-content" })), h("div", { key: 'feb54192c2a64da5ffab558ec2739cf2e3243822', class: { 'file-container': true } }, this.FileContent), h("input", { key: '9a1cd7cd2e001a2a1334f772cf7322308e5558cf', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '427df561a22254aae3fffc71838f8b833a83b1c8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '65074449f66454fa4f49c2708a486442f4576e46' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     static get is() { return "cpsl-file-upload"; }
     static get encapsulation() { return "shadow"; }

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 (Boolean(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 (Boolean(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 = Boolean(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={Boolean(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={Boolean(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 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 (Boolean(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 (Boolean(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 = Boolean(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\n class=\"sample-img\"\n src={Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc}\n alt=\"Sample Image\"\n />\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\n class={{\n 'container': true,\n 'error': Boolean(this.errorText),\n 'drag': this.dragOver,\n 'drag-error': this.dragError,\n }}\n >\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={Boolean(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"]}

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: '1596fe7c785ab672325dde24686ec73f3acd1dc1', class: {
+        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'a45bcf373f26f5b41484daec4bd6f39f8af1bd6f' })));
+            } }, 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

@@ -54,6 +54,24 @@
    * }
    */
 :host {
+  position: relative;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  clip-path: content-box;
+}
+:host > cpsl-text {
+  z-index: 1;
+}
+:host > .backgroundContainer {
   position: relative;
   top: 0;
   right: 0;
@@ -65,7 +83,7 @@
   justify-content: center;
 }
-:host > .background {
+:host > .backgroundContainer > .background {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -76,7 +94,7 @@
   z-index: 0;
 }
-:host > .background > .ring {
+:host > .backgroundContainer > .background > .ring {
   position: absolute;
   top: 45px;
   left: 50%;
@@ -85,77 +103,77 @@
   transition: box-shadow 0.3s;
 }
-:host(.connection) > .background .ring1 {
+:host(.connection) > .backgroundContainer > .background .ring1 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
 }
-:host(.connection) > .background .ring2 {
+:host(.connection) > .backgroundContainer > .background .ring2 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
 }
-:host(.connection) > .background .ring3 {
+:host(.connection) > .backgroundContainer > .background .ring3 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
 }
-:host(.pending) > .background .ring0 {
+:host(.pending) > .backgroundContainer > .background .ring0 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 }
-:host(.pending) > .background .ring1 {
+:host(.pending) > .backgroundContainer > .background .ring1 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
 }
-:host(.pending) > .background .ring2 {
+:host(.pending) > .backgroundContainer > .background .ring2 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);
 }
-:host(.pending) > .background .ring3 {
+:host(.pending) > .backgroundContainer > .background .ring3 {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
 }
-:host(.failed) > .background > .ring0 {
+:host(.failed) > .backgroundContainer > .background > .ring0 {
   box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.1);
 }
-:host(.failed) > .background > .ring1 {
+:host(.failed) > .backgroundContainer > .background > .ring1 {
   box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.08);
 }
-:host(.failed) > .background > .ring2 {
+:host(.failed) > .backgroundContainer > .background > .ring2 {
   box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.06);
 }
-:host(.failed) > .background > .ring3 {
+:host(.failed) > .backgroundContainer > .background > .ring3 {
   box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.04);
 }
-:host(.approved) > .background .ring1 {
+:host(.approved) > .backgroundContainer > .background .ring1 {
   box-shadow: 0px 0px 20px rgba(219, 0, 179, 0.1);
 }
-:host(.approved) > .background .ring2 {
+:host(.approved) > .backgroundContainer > .background .ring2 {
   box-shadow: 0px 0px 20px rgba(219, 0, 51, 0.1);
 }
-:host(.approved) > .background .ring3 {
+:host(.approved) > .backgroundContainer > .background .ring3 {
   box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
 }
-:host > .background > .ring3 {
+:host > .backgroundContainer > .background > .ring3 {
   width: 480px;
   height: 480px;
   border-radius: 480px;
 }
-:host > .background > .ring2 {
+:host > .backgroundContainer > .background > .ring2 {
   width: 360px;
   height: 360px;
   border-radius: 360px;
 }
-:host > .background > .ring1 {
+:host > .backgroundContainer > .background > .ring1 {
   width: 240px;
   height: 240px;
   border-radius: 240px;
 }
-:host > .background > .ring0 {
+:host > .backgroundContainer > .background > .ring0 {
   width: 120px;
   height: 120px;
   border-radius: 120px;
 }
-:host > .background > .ringCenter.connection {
+:host > .backgroundContainer > .background > .ringCenter.connection {
   position: absolute;
   top: 45px;
   left: 50%;
@@ -172,13 +190,13 @@
     transform: rotate(360deg);
   }
 }
-:host > .background > .ringCenter.connection img {
+:host > .backgroundContainer > .background > .ringCenter.connection img {
   width: 100%;
   height: 100%;
   animation: spin 2s linear infinite;
 }
-:host > .background > .ringCenter.approved {
+:host > .backgroundContainer > .background > .ringCenter.approved {
   position: absolute;
   top: 45px;
   left: 50%;
@@ -195,13 +213,13 @@
     transform: rotate(360deg);
   }
 }
-:host > .background > .ringCenter.approved img {
+:host > .backgroundContainer > .background > .ringCenter.approved img {
   width: 100%;
   height: 100%;
   animation: spin 2s linear infinite;
 }
-:host > .background > .ringCenter.pending {
+:host > .backgroundContainer > .background > .ringCenter.pending {
   position: absolute;
   top: 45px;
   left: 50%;
@@ -218,13 +236,13 @@
     transform: rotate(360deg);
   }
 }
-:host > .background > .ringCenter.pending img {
+:host > .backgroundContainer > .background > .ringCenter.pending img {
   width: 100%;
   height: 100%;
   animation: spin 2s linear infinite;
 }
-:host > .background > .fadeOut {
+:host > .backgroundContainer > .background > .fadeOut {
   position: absolute;
   height: 200%;
   right: 0;
@@ -233,11 +251,11 @@
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
 }
-:host > .children {
+:host > .backgroundContainer > .children {
   z-index: 1;
 }
-:host(.connection) > .children > .connectDiagramContainer {
+:host(.connection) > .backgroundContainer > .children > .connectDiagramContainer {
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -5,14 +5,17 @@ const AlertCircle = () => (h("svg", { width: "58", height: "58", viewBox: "0 0 5
 export class CpslHero {
     constructor() {
         this.variant = 'connection';
+        this.title = undefined;
+        this.subtitle = undefined;
     }
     render() {
-        return (h(Host, { key: 'd43448970e8b605d97242e3f31080531fa1adb93', class: {
+        return (h(Host, { key: '846f2b1808af5f172d659c1531015763190d9eaa', class: {
+                // VARIANTS
                 connection: this.variant === 'connection',
                 pending: this.variant === 'pending',
                 approved: this.variant === 'approved',
                 failed: this.variant === 'failed',
-            } }, h("div", { key: '8090c039f3d8d31949847a8d75fc2f181dac79ef', class: "background" }, h("div", { key: '374b4cf9c0ff508f7066131daaacce601f1284cf', class: "ring ring3" }), h("div", { key: '9820c3d2b038c9b3e63c9a24decafb812d49fa61', class: "ring ring2" }), h("div", { key: '387f7ffe6b391bd87fe4bad70d4a6a453441e492', class: "ring ring1" }), h("div", { key: '2ea4c1f575b67d47d7b9e5589302be8c995d3cc3', class: "ring ring0" }), this.variant === 'connection' && (h("div", { class: `ringCenter connection` }, h("img", { src: Images.heroDefault }))), this.variant === 'pending' && (h("div", { class: `ringCenter pending` }, h("img", { src: Images.heroPending }))), this.variant === 'approved' && (h("div", { class: `ringCenter approved` }, h("img", { src: Images.heroSuccess }))), h("div", { key: '13540b02127b72826994b1148171b523dfc9093b', class: "fadeOut" })), h("div", { key: '914a99423bc39a9d811af550d9f52c6af27d9db2', class: "children" }, this.variant === 'connection' && (h("div", { class: "connectDiagramContainer" }, h("slot", { name: "connectionLeft" }), h("slot", { name: "connectionRight" }))), this.variant === 'failed' && AlertCircle(), this.variant === 'approved' && Checkmark())));
+            } }, h("div", { key: 'f11070c3f78fd6ad2fbb9842d2484b4263112cb3', class: "backgroundContainer" }, h("div", { key: '5a50e2df5669ff92d3bee0b00bd3ed92075dfa7a', class: "background" }, h("div", { key: '24062e48e9d07feb6e79d4ec1c527b2476950f3b', class: "ring ring3" }), h("div", { key: '37913e7689bbdc4165811fb25b747b8badaa287c', class: "ring ring2" }), h("div", { key: 'f265592120f9fa1052e346bd92951f6789d85502', class: "ring ring1" }), h("div", { key: '19e252b63847df7ea5acb450d8e3479a4b2ad561', class: "ring ring0" }), this.variant === 'connection' && (h("div", { key: '8b94818b22a288284509fe63578b68277ed71edc', class: `ringCenter connection` }, h("img", { key: 'c50d6f5be69303e9c9c1c7f885bbacadceb1c5c8', src: Images.heroDefault }))), this.variant === 'pending' && (h("div", { key: '9ab25648fd147203cba45136ab8956adb6bd99d1', class: `ringCenter pending` }, h("img", { key: '9b0d536b4213ab558b37355e3b605fe3b65824ca', src: Images.heroPending }))), this.variant === 'approved' && (h("div", { key: '2ed926910d870e3b9577b0203ce2e68e8389623c', class: `ringCenter approved` }, h("img", { key: 'aab912dbedf89db56946d2de72f7b0883c4fb261', src: Images.heroSuccess }))), h("div", { key: '55421fe06f9649f27d8728414fac8ce0a592efbb', class: "fadeOut" })), h("div", { key: '41a49e438379a139864d0b7b55ee2e89b5c9aaf0', class: "children" }, this.variant === 'connection' && (h("div", { key: 'a874f21784102c8001043cd93e8a281e63939875', class: "connectDiagramContainer" }, h("slot", { key: 'd99d0f2c0248f360da1829403ca9929ce3d9243c', name: "connectionLeft" }), h("slot", { key: '5557ab28d6108ecb660e5d8203b3decd991f4ea6', name: "connectionRight" }))), this.variant === 'failed' && AlertCircle(), this.variant === 'approved' && Checkmark())), h("cpsl-text", { key: '1aeb3912ca6386a8d1ca1f2d18735716db070cb5', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { key: 'e01dbe76df7f55f80fc20bce10e8e82c829851fc', variant: "bodyM", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +48,40 @@ export class CpslHero {
                 "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
             }
         };
     }

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,+TAA+T,EACjU,IAAI,EAAC,6BAA6B,GAClC;IACF;QACE,sBAAgB,EAAE,EAAC,uBAAuB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB;YAChH,0BAAiB,SAAS,GAAG;YAC7B,YAAM,MAAM,EAAC,OAAO,gBAAY,SAAS,GAAG;YAC5C,YAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,CACZ,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,YACE,CAAC,EAAC,2NAA2N,EAC7N,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;AAOF,MAAM,OAAO,QAAQ;;uBAMmE,YAAY~~;;IAElG~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;~~gBAEL~~,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;aAClC;YAED,4DAAK,KAAK,EAAC,YAAY;~~gBACrB~~,4DAAK,KAAK,EAAC,YAAY,GAAG;~~gBAC1B~~,4DAAK,KAAK,EAAC,YAAY,GAAG;~~gBAC1B~~,4DAAK,KAAK,EAAC,YAAY,GAAG;~~gBAC1B~~,4DAAK,KAAK,EAAC,YAAY,GAAG;~~gBACzB~~,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,~~WAAK~~,KAAK,EAAE,uBAAuB;~~oBACjC~~,~~WAAK~~,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;~~gBACA~~,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,~~WAAK~~,KAAK,EAAE,oBAAoB;~~oBAC9B~~,~~WAAK~~,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;~~gBAEA~~,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,~~WAAK~~,KAAK,EAAE,qBAAqB;~~oBAC~~/B,~~WAAK~~,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;~~gBACD~~,4DAAK,KAAK,EAAC,SAAS,GAAG,CACnB;~~YACN~~,4DAAK,KAAK,EAAC,UAAU;~~gBAClB~~,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,~~WAAK~~,KAAK,EAAC,yBAAyB;~~oBAClC~~,~~YAAM~~,IAAI,EAAC,gBAAgB,GAAG;~~oBAC9B~~,~~YAAM~~,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACP;~~gBACA~~,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,EAAE;~~gBAC1C~~,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,EAAE,CACvC,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\nconst Checkmark = () => (\n <svg width=\"48\" height=\"35\" viewBox=\"0 0 48 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M47.219 1.11439C48.2604 2.15579 48.2604 3.84423 47.219 4.88563L17.8856 34.219C16.8442 35.2604 15.1558 35.2604 14.1144 34.219L0.781049 20.8856C-0.26035 19.8442 -0.26035 18.1558 0.781049 17.1144C1.82245 16.073 3.51089 16.073 4.55229 17.1144L16 28.5621L43.4477 1.11439C44.4891 0.0729939 46.1776 0.0729939 47.219 1.11439Z\"\n fill=\"url(#paint0_linear_841_278)\"\n />\n <defs>\n <linearGradient id=\"paint0_linear_841_278\" x1=\"48\" y1=\"17.6667\" x2=\"0\" y2=\"17.6667\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#BC82F3\" />\n <stop offset=\"0.485\" stop-color=\"#FF6778\" />\n <stop offset=\"1\" stop-color=\"#FFBA71\" />\n </linearGradient>\n </defs>\n </svg>\n);\n\nconst AlertCircle = () => (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M29 18.3333V29M29 39.6666H29.0267M55.6667 29C55.6667 43.7276 43.7276 55.6666 29 55.6666C14.2724 55.6666 2.33333 43.7276 2.33333 29C2.33333 14.2724 14.2724 2.33331 29 2.33331C43.7276 2.33331 55.6667 14.2724 55.6667 29Z\"\n stroke=\"#F04438\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n);\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /*\n The variant of the button.\n * Options are: `\"default\"`, `\"loading\", `\"success\".\n * Default is: `\"default\"`.\n */\n @Prop({ reflect: true }) variant?: 'connection' \| 'pending' \| 'approved' \| 'failed' = 'connection';\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending',\n approved: this.variant === 'approved',\n failed: this.variant === 'failed',\n }}\n >\n <div class=\"~~background~~\">\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n {this.variant === 'connection' && (\n <div class={`ringCenter connection`}>\n <img src={Images.heroDefault} />\n </div>\n )}\n {this.variant === 'pending' && (\n <div class={`ringCenter pending`}>\n <img src={Images.heroPending} />\n </div>\n )}\n\n {this.variant === 'approved' && (\n <div class={`ringCenter approved`}>\n <img src={Images.heroSuccess} />\n </div>\n )}\n <div class=\"fadeOut\" />\n </div>\n <div class=\"children\">\n {this.variant === 'connection' && (\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n )}\n {this.variant === 'failed' && AlertCircle()}\n {this.variant === 'approved' && Checkmark()}\n </div>\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, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\nconst Checkmark = () => (\n <svg width=\"48\" height=\"35\" viewBox=\"0 0 48 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M47.219 1.11439C48.2604 2.15579 48.2604 3.84423 47.219 4.88563L17.8856 34.219C16.8442 35.2604 15.1558 35.2604 14.1144 34.219L0.781049 20.8856C-0.26035 19.8442 -0.26035 18.1558 0.781049 17.1144C1.82245 16.073 3.51089 16.073 4.55229 17.1144L16 28.5621L43.4477 1.11439C44.4891 0.0729939 46.1776 0.0729939 47.219 1.11439Z\"\n fill=\"url(#paint0_linear_841_278)\"\n />\n <defs>\n <linearGradient id=\"paint0_linear_841_278\" x1=\"48\" y1=\"17.6667\" x2=\"0\" y2=\"17.6667\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#BC82F3\" />\n <stop offset=\"0.485\" stop-color=\"#FF6778\" />\n <stop offset=\"1\" stop-color=\"#FFBA71\" />\n </linearGradient>\n </defs>\n </svg>\n);\n\nconst AlertCircle = () => (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M29 18.3333V29M29 39.6666H29.0267M55.6667 29C55.6667 43.7276 43.7276 55.6666 29 55.6666C14.2724 55.6666 2.33333 43.7276 2.33333 29C2.33333 14.2724 14.2724 2.33331 29 2.33331C43.7276 2.33331 55.6667 14.2724 55.6667 29Z\"\n stroke=\"#F04438\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n);\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /*\n The variant of the button.\n * Options are: `\"default\"`, `\"loading\", `\"success\".\n * Default is: `\"default\"`.\n */\n @Prop({ reflect: true }) variant?: 'connection' \| 'pending' \| 'approved' \| 'failed' = 'connection';\n\n @Prop({ reflect: true }) title: string;\n\n @Prop({ reflect: true }) subtitle?: string;\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending',\n approved: this.variant === 'approved',\n failed: this.variant === 'failed',\n }}\n >\n <div class=\"backgroundContainer\">\n <div class=\"background\">\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n {this.variant === 'connection' && (\n <div class={`ringCenter connection`}>\n <img src={Images.heroDefault} />\n </div>\n )}\n {this.variant === 'pending' && (\n <div class={`ringCenter pending`}>\n <img src={Images.heroPending} />\n </div>\n )}\n\n {this.variant === 'approved' && (\n <div class={`ringCenter approved`}>\n <img src={Images.heroSuccess} />\n </div>\n )}\n <div class=\"fadeOut\" />\n </div>\n <div class=\"children\">\n {this.variant === 'connection' && (\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n )}\n {this.variant === 'failed' && AlertCircle()}\n {this.variant === 'approved' && Checkmark()}\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"]}

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

@@ -3,7 +3,7 @@ const meta = {
 };
 export default meta;
 const ConnectionTemplate = () => `
-<cpsl-hero variant="connection">
+<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>`;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-hero.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.stories.ts"],"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';\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\">\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"]}
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';\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.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '3a513c8f07069fe226a579ba734cf475ab33c4cf', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '6960e6da25cb3cd108021f8a5aa20a92a24f92b3', part: "icon", role: "img" }, !Boolean(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": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"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": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"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-identicon/cpsl-identicon.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class CpslIdenticon {
             [shapeA, shapeB, shapeC, shapeD],
             [rotationA, rotationB, rotationC, rotationD],
         ];
-        return (h(Host, { key: '96fca00db5c91275e22f22b36b2688eab2c2a3b6', class: {
+        return (h(Host, { key: '9e7e42f8de3d9611e30bf8c193d4ff8864805dd9', class: {
                 red: color === 'red',
                 orange: color === 'orange',
                 yellow: color === 'yellow',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n title: 'Components/CpslIdenticon',\n args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: 40 },\n argTypes: {\n hash: { control: 'text' },\n size: { control: 'number' },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}
1	+ {"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n title: 'Components/CpslIdenticon',\n args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: 40 },\n argTypes: {\n hash: { control: 'text' },\n size: { control: 'number' },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: 'f896d7c1bb72fbb5c2a2515058901db62011db9b' }, h("div", { key: 'e911284ad5ae540a10662cc0a0adf72e83e400b3', class: "info-box-container" }, h("slot", { key: '195fd87bd8ac702417c9659f956b6efe7c78e5b8' }))));
+        return (h(Host, { key: '71bc7e0e6976741e4da0fcc6d0135037c416d663' }, h("div", { key: 'd7c1f41e2d60c1e7319ea93b740dc789061f6f2b', class: "info-box-container" }, h("slot", { key: '84681d40c32832a00874901eb9e75679313f2034' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }