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

package/dist/cjs/cpsl-identicon.cjs.entry.js

@@ -37,7 +37,7 @@ const CpslIdenticon = class {
             [shapeA, shapeB, shapeC, shapeD],
             [rotationA, rotationB, rotationC, rotationD],
         ];
-        return (index.h(index.Host, { key: '96fca00db5c91275e22f22b36b2688eab2c2a3b6', class: {
+        return (index.h(index.Host, { key: 'beeaf99134ffc2d93ea5900ee38b26c32afc3a1c', class: {
                 red: color === 'red',
                 orange: color === 'orange',
                 yellow: color === 'yellow',

package/dist/cjs/cpsl-info-box.cjs.entry.js

@@ -12,7 +12,7 @@ const CpslInfoBox = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f896d7c1bb72fbb5c2a2515058901db62011db9b' }, index.h("div", { key: 'e911284ad5ae540a10662cc0a0adf72e83e400b3', class: "info-box-container" }, index.h("slot", { key: '195fd87bd8ac702417c9659f956b6efe7c78e5b8' }))));
+        return (index.h(index.Host, { key: '15b85f109d7e5371f6fa35f38dc35f86a061c46c' }, index.h("div", { key: '39eae7146dfa17771e1d68045255c9b0db5d0a0c', class: "info-box-container" }, index.h("slot", { key: '008e3552b563dd2f3b6d10bc7afe59b0f2a2ba3a' }))));
     }
 };
 CpslInfoBox.style = CpslInfoBoxStyle0;

package/dist/cjs/cpsl-modal-v2.cjs.entry.js

@@ -41,7 +41,7 @@ const CpslModalV2 = class {
         this.toggleHeight();
     }
     render() {
-        return (index.h(index.Host, { key: '98fc4419d1e9881662138ca176af3740526dc06f', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (index.h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), index.h("cpsl-card", { key: '3c0281ed2f7440c06cf943089abec4051e6686db', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, index.h("slot", { key: '34cfe1bc0d5d70aaedf4fe50f2ba3d3b8dde02c1' }))));
+        return (index.h(index.Host, { key: '8a43f4163d195bb2062c57a1edbab0740b69bdf5', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (index.h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), index.h("cpsl-card", { key: '488be1c056c32f634ec8b534e67a462dcde32736', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, index.h("slot", { key: 'dbf4835d6aab5454ff6b582471bbb34e3cfca1c3' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cpsl-row.cjs.entry.js

@@ -12,7 +12,7 @@ const CpslRow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '557a2f245ec7a47aa32d26c27cd2d944d63311a3' }, index.h("slot", { key: 'e39a195e96e045812dfda0f1509cc6e05c6efab6' })));
+        return (index.h(index.Host, { key: 'a7103593a92c7db3ff20e95c7f9a0b7a14897e34' }, index.h("slot", { key: 'e7980a87253ac57393a246aae808cfa47f7c20dc' })));
     }
 };
 CpslRow.style = CpslRowStyle0;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[2]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-select",{"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-hero",{"variant":[513]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[2]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-select",{"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-hero",{"variant":[513],"title":[513],"subtitle":[513]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -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

@@ -5,14 +5,16 @@ 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: '526227a9695e8c0846780a3c39034b4d558cf141', class: {
                 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: '45ce6b958e3c3b8544e280425da83fbb014ff500', class: "backgroundContainer" }, h("div", { key: 'a5337d2ceddcd7ac725aa9b68ba240e62fc32f37', class: "background" }, h("div", { key: '88703ca494220195a5da3a21aef49e4eee29b928', class: "ring ring3" }), h("div", { key: 'bc9e1eacc99a1993e7f1e76d87c521250d8287f9', class: "ring ring2" }), h("div", { key: 'afaa234eb2d2a312c2d197de435d4396e64b77f1', class: "ring ring1" }), h("div", { key: '0e46b2f228e479019d0cfb8cda850fd3f361da65', 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: 'ecf964e7816cfdd4db690a1a4b21e39f91504457', class: "fadeOut" })), h("div", { key: '0d494d9907b97ca438a5bd1a54d776555da0940e', 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("cpsl-text", { key: '44855a5dbd947bacd51f4dc48d4e2a28f94f1b71', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { variant: "bodyM", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +47,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

@@ -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"]}
+{"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;;;;IAMlG,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,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBACzB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,WAAK,KAAK,EAAE,uBAAuB;wBACjC,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,WAAK,KAAK,EAAE,oBAAoB;wBAC9B,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBAEA,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,WAAK,KAAK,EAAE,qBAAqB;wBAC/B,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACD,4DAAK,KAAK,EAAC,SAAS,GAAG,CACnB;gBACN,4DAAK,KAAK,EAAC,UAAU;oBAClB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,WAAK,KAAK,EAAC,yBAAyB;wBAClC,YAAM,IAAI,EAAC,gBAAgB,GAAG;wBAC9B,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,EAAE;oBAC1C,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,EAAE,CACvC,CACF;YACN,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,IAC3D,IAAI,CAAC,KAAK,CACD;YACX,IAAI,CAAC,QAAQ,IAAI,CAChB,iBAAW,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,IACzC,IAAI,CAAC,QAAQ,CACJ,CACb,CACI,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  @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

@@ -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

@@ -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"]}
+{"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\" 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

@@ -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: '91853a486a389f4850a7ae83a25cedba52c645a5', 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"; }

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

@@ -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: 'beeaf99134ffc2d93ea5900ee38b26c32afc3a1c', class: {
                 red: color === 'red',
                 orange: color === 'orange',
                 yellow: color === 'yellow',

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

@@ -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: '15b85f109d7e5371f6fa35f38dc35f86a061c46c' }, h("div", { key: '39eae7146dfa17771e1d68045255c9b0db5d0a0c', class: "info-box-container" }, h("slot", { key: '008e3552b563dd2f3b6d10bc7afe59b0f2a2ba3a' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,7 +131,7 @@ export class CpslInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6ff350b7a2fd8748920be740e4ef065a0d67c650', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '5edf66c351aaa30e145e66f6baf06454bd8e7860', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: '8c79ff9cc118de96c47c49f59fdf0bb109694228', name: "start" }), h("input", { key: '07a51283dfaf185f2fdc0222331305fa384760e0', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'af3fc651d066c346baa84e8e84a44373242c924e', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: 'c9257766f3dff436dd80db0755994480e803ee36', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'ae695bceee508db8a4c2ebd6919d6d761d9d3180', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'b68c7adeb0e8631f3fb85026df71e9a1f3cb4129', name: "start" }), h("input", { key: '40fc3199639e74f4b481859cb1061f41bdf73e32', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'f437ceaa4f50faf59121a97937fc9e91201a3720', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js

@@ -28,7 +28,7 @@ export class CpslModalV2 {
         this.toggleHeight();
     }
     render() {
-        return (h(Host, { key: '98fc4419d1e9881662138ca176af3740526dc06f', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: '3c0281ed2f7440c06cf943089abec4051e6686db', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: '34cfe1bc0d5d70aaedf4fe50f2ba3d3b8dde02c1' }))));
+        return (h(Host, { key: '8a43f4163d195bb2062c57a1edbab0740b69bdf5', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: '488be1c056c32f634ec8b534e67a462dcde32736', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: 'dbf4835d6aab5454ff6b582471bbb34e3cfca1c3' }))));
     }
     static get is() { return "cpsl-modal-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js

@@ -32,7 +32,7 @@ export class CpslNavButtonGroup {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: 'f0b360c7c103bdfc3f759d21766d08cb9e907b26' }, h("slot", { key: 'b3efc6370232d945acc4732474553c45e1af44bf' })));
+        return (h(Host, { key: 'c1d80cf6de655e2f8d67de7e9f60f1faa671a63c' }, h("slot", { key: '27db1e6328971b99c904e991fe791978ba31639e' })));
     }
     static get is() { return "cpsl-nav-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class CpslOverlay {
         }
     }
     render() {
-        return (h(Host, { key: 'c9ae5cdb23f734b484ed7d65d4c10af909219e19', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: 'f2554f75fe1bd3e0e3afc1947220d3c004184e84' })));
+        return (h(Host, { key: '919a85b739f0d93b6453780b447a7ab8abde3427', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '743486d02a50741550ae49b36b7e0c11b949b46a' })));
     }
     static get is() { return "cpsl-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class CpslPagination {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (h(Host, { key: '669fa3f3bba14df60e803077c9d2a404f097df8b' }, h("cpsl-button-group", { key: 'c0f9e83b0fe7b88be553c680084452496a680238', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '5fb1deeb7e5dfa34379f761b41579276a75b861b', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '3825ef7d8dc0f2a617cae0ef2dbd480aaa503938', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: 'a34f9952205c99e373020c01102b11e09d780afb', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: '2339a4987bd4f254edf4ceb5340e740a2115f394', class: "icon", icon: "arrowNarrow" })))));
+        return (h(Host, { key: '0256d628867d9f9e48fbe9959267d75c3bd31637' }, h("cpsl-button-group", { key: '33ca6823866c975e1e17bba0009bed1da9e42d25', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '3f2727aa63723afc21ca07c634de14ba3d613db9', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '732be305dd09deddab8cfdaab33de67f701b0ecf', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: 'e5f88f5dbf1070170f686fb4dd8e42a5573746a7', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'b85203ed5334aeece97829633d6385cbe52aa1e7', class: "icon", icon: "arrowNarrow" })))));
     }
     static get is() { return "cpsl-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class CpslPill {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: '786008e1b56afcfcc472ca0f8a5f7999b214c695' }, h("div", { key: '8b3994767904542166b64bc245604a1a111b25e5', class: "pill-container" }, h("span", { key: '612243d8c39064eebf2a33a2a7427a2990f86502' }, this.text))));
+        return (h(Host, { key: '81f5ffe5b0eab569386324c33d0b1eb2c4b21058' }, h("div", { key: '6d989b02dcd2651574503154c662e960e9b86881', class: "pill-container" }, h("span", { key: 'f686ad83dd9bca59a9b199fd6517d0c2fccb191c' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -201,7 +201,7 @@ export class CpslPopover {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2f2d7a04d6d4cd9d51348e8e10de1f67594b8a2f', class: {
+        return (h(Host, { key: 'bd7eae025737b5aa941191dbe9d8812134c360e3', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -209,7 +209,7 @@ export class CpslPopover {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '623048bf7c8b1192e180b6e91f72847db895b5b7', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '4aa2e2fcacb0c591ff22308aff504c1ee6ef7740' }))));
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '10a1464f27c340faf62a5dafad0860b1d25c4041', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '575660d8738d4cecc1ad8b4c5ffeb035cd1bba66' }))));
     }
     static get is() { return "cpsl-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js

@@ -32,7 +32,7 @@ export class CpslQrCode {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: 'bbd916357d9075c4113178d7ed920ebee86e8329' }, h("div", { key: 'fc8582bd83a34863c0789eba4faac4e49279245c', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '5655e021ffef542b385c133d6e624be3cef16c1d' }, h("div", { key: '96eb780f5b5f61815f63e6e3c85368b7bc5b42e6', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class CpslRadio {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '21d9bb0ce71f910802c0297ce50c4944c798568e' }, h("input", { key: '0825569e820fcc80467ff95140610f5444250583', type: "radio", checked: this.checked }), h("span", { key: '55f3579b2c94bc841d26ad13d744109a6627e03a', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+        return (h(Host, { key: '56ac31a17d3aebb35c2b0bfe54aefb2e9a99ecdb' }, h("input", { key: '294dd0e233b1921218a20726819c1b6f62a9545f', type: "radio", checked: this.checked }), h("span", { key: '23eb0b6319a39c1435df495b4491b9ec226be325', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
     }
     static get is() { return "cpsl-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslRow {
     render() {
-        return (h(Host, { key: '557a2f245ec7a47aa32d26c27cd2d944d63311a3' }, h("slot", { key: 'e39a195e96e045812dfda0f1509cc6e05c6efab6' })));
+        return (h(Host, { key: 'a7103593a92c7db3ff20e95c7f9a0b7a14897e34' }, h("slot", { key: 'e7980a87253ac57393a246aae808cfa47f7c20dc' })));
     }
     static get is() { return "cpsl-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class CpslSelect {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '0ec074c0216518e90d4588c5ba35ababbe1203d1', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'c5a6744549329d2dd5541ee179b739d90c53d0bb', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { name: "selected-item" }), h("div", { key: '2f0a489616ce1209e38ae697269a0aa21fc15ca5', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: '14d3b5e85bc88d25d5b1a07e43b6b5dcc42d9bbd', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '7bdbb9993a9e4d0c7faa789b52602f507ff60ce6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: '2c9472eed686a63106d74e66743a7790d670c08c', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '6c13e873fd8668cc4373b4abfd69a6e6cba3e05d', class: "dropdown" }, h("div", { key: 'd1f68bb998e2a2a2ccf73ae0dca79f9c27982aea', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '617b013074f1127810bae1b92061487a127afc5e', name: "items" }))))));
+        return (h(Host, { key: '3d3f052d6702fc9b74b03fc55b2766eec299c449', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '90ef0cd5ae49233665debddbfe9dd096e6434374', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { name: "selected-item" }), h("div", { key: '6bee82c04abdfc2ad735f63e2ab793304fb6996a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'f74f7d8b6201ba9032d5e1ccd75c487f0e4251bb', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '0f14ad55bc376590da75f5e4f8664f9fcb893c6d', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'df6d347b953633d1f8ecb71d4ee5767da4ddb223', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '524ffcfc61bcba174422770542516028ee37ad48', class: "dropdown" }, h("div", { key: 'fb72dace14c9dd43b48654e22bb268b2ffb06876', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'a67f1f8ebcb08b0827dbff2e2a5896cf707d6182', name: "items" }))))));
     }
     static get is() { return "cpsl-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-select-item/cpsl-select-item.js

@@ -8,7 +8,7 @@ export class CpslSelectItem {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '84066a03c3ebbccae49d04f05029b304272286ba' }, h("div", { key: '03bc5dffdfdd1bfc0894b99631651c987c2cfb42', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: 'ff2c77ab854c0e6f8b78664090629525c5c487ea', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: 'fe438b51b6c8781ef89898028348360188831e17' })))));
+        return (h(Host, { key: '5bc53f915d04dbdbad5a301cec8b7a6dcef21d82' }, h("div", { key: 'cd3beea4b16d1c01b21ca1b54d03da6e501f52bb', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: 'c63a0a44649b4837d0d67f983d274785f41204c6', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '99e548871325528b7d52295c9e6740324f5add51' })))));
     }
     static get is() { return "cpsl-select-item"; }
     static get encapsulation() { return "shadow"; }