@usecapsule/core-components 1.0.8 → 1.0.10-dev.0

package/dist/cjs/capsule.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["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-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[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],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[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-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1025,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["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-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[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],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[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-spinner",{"size":[2],"speed":[2]}],[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-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -353,40 +353,26 @@ const HeroLock = `<svg width="103" height="87" viewBox="0 0 103 87" fill="none"
 </svg>
 `;
 
-const HeroPasskey = `<svg width="58" height="56" viewBox="0 0 58 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M50.4966 52.2249C29.7827 56.3094 10.1481 53.9904 2.50316 52.2387C2.71332 39.0897 13.3791 28.5 26.5 28.5C39.6163 28.5 50.2792 39.0822 50.4966 52.2249Z" fill="url(#paint0_linear_493_28151)" stroke="#DADADA"/>
-<circle cx="27" cy="13" r="12.5" fill="url(#paint1_linear_493_28151)" stroke="#DADADA"/>
-<g opacity="0.8" filter="url(#filter0_d_493_28151)">
-<path d="M35.65 34.35C35.2165 33.2865 34.9957 32.1484 35 31C35 29.22 35.5278 27.4799 36.5168 25.9999C37.5057 24.5198 38.9113 23.3663 40.5558 22.6851C42.2004 22.0039 44.01 21.8257 45.7558 22.1729C47.5016 22.5202 49.1053 23.3774 50.364 24.636C51.6226 25.8947 52.4798 27.4984 52.8271 29.2442C53.1743 30.99 52.9961 32.7996 52.3149 34.4442C51.6337 36.0887 50.4802 37.4943 49.0001 38.4832C47.5201 39.4722 45.78 40 44 40C42.8516 40.0043 41.7135 39.7835 40.65 39.35L39 41H36V44H33V47H28V42L35.65 34.35Z" fill="url(#paint2_linear_493_28151)"/>
-<path d="M35.65 34.35C35.2165 33.2865 34.9957 32.1484 35 31C35 29.22 35.5278 27.4799 36.5168 25.9999C37.5057 24.5198 38.9113 23.3663 40.5558 22.6851C42.2004 22.0039 44.01 21.8257 45.7558 22.1729C47.5016 22.5202 49.1053 23.3774 50.364 24.636C51.6226 25.8947 52.4798 27.4984 52.8271 29.2442C53.1743 30.99 52.9961 32.7996 52.3149 34.4442C51.6337 36.0887 50.4802 37.4943 49.0001 38.4832C47.5201 39.4722 45.78 40 44 40C42.8516 40.0043 41.7135 39.7835 40.65 39.35L39 41H36V44H33V47H28V42L35.65 34.35Z" stroke="#272727" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+const HeroPasskey = `<svg width="54" height="55" viewBox="0 0 54 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.4966 52.2249C29.7827 56.3094 10.1481 53.9904 2.50316 52.2387C2.71332 39.0897 13.3791 28.5 26.5 28.5C39.6163 28.5 50.2792 39.0822 50.4966 52.2249Z" fill="url(#paint0_linear_844_10645)" stroke="#DADADA"/>
+<circle cx="27" cy="13" r="12.5" fill="url(#paint1_linear_844_10645)" stroke="#DADADA"/>
+<path opacity="0.8" d="M35.65 34.35C35.2165 33.2865 34.9957 32.1484 35 31C35 29.22 35.5278 27.4799 36.5168 25.9999C37.5057 24.5198 38.9113 23.3663 40.5558 22.6851C42.2004 22.0039 44.01 21.8257 45.7558 22.1729C47.5016 22.5202 49.1053 23.3774 50.364 24.636C51.6226 25.8947 52.4798 27.4984 52.8271 29.2442C53.1743 30.99 52.9961 32.7996 52.3149 34.4442C51.6337 36.0887 50.4802 37.4943 49.0001 38.4832C47.5201 39.4722 45.78 40 44 40C42.8516 40.0043 41.7135 39.7835 40.65 39.35L39 41H36V44H33V47H28V42L35.65 34.35Z" fill="url(#paint2_linear_844_10645)" stroke="#272727" stroke-linecap="round" stroke-linejoin="round"/>
 <path opacity="0.8" d="M46 35C47.1046 35 48 34.1046 48 33C48 31.8954 47.1046 31 46 31C44.8954 31 44 31.8954 44 33C44 34.1046 44.8954 35 46 35Z" fill="#272727"/>
 <defs>
-<filter id="filter0_d_493_28151" x="23.5" y="21.5" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_493_28151"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_493_28151" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_493_28151" x1="26.5" y1="28" x2="26.5" y2="55" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_844_10645" x1="26.5" y1="28" x2="26.5" y2="55" gradientUnits="userSpaceOnUse">
 <stop stop-color="#F0F0F0"/>
 <stop offset="1" stop-color="#D6D6D6"/>
 </linearGradient>
-<linearGradient id="paint1_linear_493_28151" x1="27" y1="0" x2="27" y2="12.4348" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint1_linear_844_10645" x1="27" y1="0" x2="27" y2="12.4348" gradientUnits="userSpaceOnUse">
 <stop stop-color="#F6F6F6"/>
 <stop offset="1" stop-color="#E1E0E0"/>
 </linearGradient>
-<linearGradient id="paint2_linear_493_28151" x1="48" y1="26.5" x2="30" y2="45" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint2_linear_844_10645" x1="48" y1="26.5" x2="30" y2="45" gradientUnits="userSpaceOnUse">
 <stop stop-color="#666666"/>
 <stop offset="1" stop-color="#2C2C2C"/>
 </linearGradient>
 </defs>
-</svg>
-`;
+</svg>`;
 
 const HeroPhone = `<svg width="53" height="55" viewBox="0 0 53 55" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="5.5" y="0.5" width="29" height="54" rx="3.5" fill="url(#paint0_linear_493_27223)" stroke="#E9E9E9"/>
@@ -518,29 +504,33 @@ const Mail = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </svg>
 `;
 
-const MoreLoginOptionsDark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.1 20C6.98366 20 7.7 19.2837 7.7 18.4C7.7 17.5164 6.98366 16.8 6.1 16.8C5.21634 16.8 4.5 17.5164 4.5 18.4C4.5 19.2837 5.21634 20 6.1 20Z" fill="#808080"/>
-<path d="M6.1 13.5999C6.98366 13.5999 7.7 12.8836 7.7 11.9999C7.7 11.1162 6.98366 10.3999 6.1 10.3999C5.21634 10.3999 4.5 11.1162 4.5 11.9999C4.5 12.8836 5.21634 13.5999 6.1 13.5999Z" fill="#3F3F3F"/>
-<path d="M6.1 7.2C6.98366 7.2 7.7 6.48366 7.7 5.6C7.7 4.71634 6.98366 4 6.1 4C5.21634 4 4.5 4.71634 4.5 5.6C4.5 6.48366 5.21634 7.2 6.1 7.2Z" fill="#3F3F3F"/>
-<path d="M12.4999 20C13.3836 20 14.0999 19.2837 14.0999 18.4C14.0999 17.5164 13.3836 16.8 12.4999 16.8C11.6162 16.8 10.8999 17.5164 10.8999 18.4C10.8999 19.2837 11.6162 20 12.4999 20Z" fill="#3F3F3F"/>
-<path d="M12.4999 13.5999C13.3836 13.5999 14.0999 12.8836 14.0999 11.9999C14.0999 11.1162 13.3836 10.3999 12.4999 10.3999C11.6162 10.3999 10.8999 11.1162 10.8999 11.9999C10.8999 12.8836 11.6162 13.5999 12.4999 13.5999Z" fill="#808080"/>
-<path d="M12.4999 7.2C13.3836 7.2 14.0999 6.48366 14.0999 5.6C14.0999 4.71634 13.3836 4 12.4999 4C11.6162 4 10.8999 4.71634 10.8999 5.6C10.8999 6.48366 11.6162 7.2 12.4999 7.2Z" fill="#808080"/>
-<path d="M18.9 20C19.7837 20 20.5 19.2837 20.5 18.4C20.5 17.5164 19.7837 16.8 18.9 16.8C18.0164 16.8 17.3 17.5164 17.3 18.4C17.3 19.2837 18.0164 20 18.9 20Z" fill="#3F3F3F"/>
-<path d="M18.9 13.5999C19.7837 13.5999 20.5 12.8836 20.5 11.9999C20.5 11.1162 19.7837 10.3999 18.9 10.3999C18.0164 10.3999 17.3 11.1162 17.3 11.9999C17.3 12.8836 18.0164 13.5999 18.9 13.5999Z" fill="#3F3F3F"/>
-<path d="M18.9 7.2C19.7837 7.2 20.5 6.48366 20.5 5.6C20.5 4.71634 19.7837 4 18.9 4C18.0164 4 17.3 4.71634 17.3 5.6C17.3 6.48366 18.0164 7.2 18.9 7.2Z" fill="#808080"/>
+const MoreLoginOptionsDark = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 4">
+<path id="Vector" d="M2.1 16C2.98366 16 3.7 15.2836 3.7 14.4C3.7 13.5163 2.98366 12.8 2.1 12.8C1.21634 12.8 0.5 13.5163 0.5 14.4C0.5 15.2836 1.21634 16 2.1 16Z" fill="#808080"/>
+<path id="Vector_2" d="M2.1 9.60002C2.98366 9.60002 3.7 8.88368 3.7 8.00002C3.7 7.11637 2.98366 6.40002 2.1 6.40002C1.21634 6.40002 0.5 7.11637 0.5 8.00002C0.5 8.88368 1.21634 9.60002 2.1 9.60002Z" fill="#808080"/>
+<path id="Vector_3" d="M2.1 3.2C2.98366 3.2 3.7 2.48366 3.7 1.6C3.7 0.716344 2.98366 0 2.1 0C1.21634 0 0.5 0.716344 0.5 1.6C0.5 2.48366 1.21634 3.2 2.1 3.2Z" fill="#808080"/>
+<path id="Vector_4" d="M8.4999 16C9.38356 16 10.0999 15.2836 10.0999 14.4C10.0999 13.5163 9.38356 12.8 8.4999 12.8C7.61625 12.8 6.8999 13.5163 6.8999 14.4C6.8999 15.2836 7.61625 16 8.4999 16Z" fill="#808080"/>
+<path id="Vector_5" d="M8.4999 9.60002C9.38356 9.60002 10.0999 8.88368 10.0999 8.00002C10.0999 7.11637 9.38356 6.40002 8.4999 6.40002C7.61625 6.40002 6.8999 7.11637 6.8999 8.00002C6.8999 8.88368 7.61625 9.60002 8.4999 9.60002Z" fill="#808080"/>
+<path id="Vector_6" d="M8.4999 3.2C9.38356 3.2 10.0999 2.48366 10.0999 1.6C10.0999 0.716344 9.38356 0 8.4999 0C7.61625 0 6.8999 0.716344 6.8999 1.6C6.8999 2.48366 7.61625 3.2 8.4999 3.2Z" fill="#808080"/>
+<path id="Vector_7" d="M14.9 16C15.7837 16 16.5 15.2836 16.5 14.4C16.5 13.5163 15.7837 12.8 14.9 12.8C14.0164 12.8 13.3 13.5163 13.3 14.4C13.3 15.2836 14.0164 16 14.9 16Z" fill="#808080"/>
+<path id="Vector_8" d="M14.9 9.60002C15.7837 9.60002 16.5 8.88368 16.5 8.00002C16.5 7.11637 15.7837 6.40002 14.9 6.40002C14.0164 6.40002 13.3 7.11637 13.3 8.00002C13.3 8.88368 14.0164 9.60002 14.9 9.60002Z" fill="#808080"/>
+<path id="Vector_9" d="M14.9 3.2C15.7837 3.2 16.5 2.48366 16.5 1.6C16.5 0.716344 15.7837 0 14.9 0C14.0164 0 13.3 0.716344 13.3 1.6C13.3 2.48366 14.0164 3.2 14.9 3.2Z" fill="#808080"/>
+</g>
 </svg>
 `;
 
-const MoreLoginOptions = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.6 20C6.48366 20 7.2 19.2836 7.2 18.4C7.2 17.5163 6.48366 16.8 5.6 16.8C4.71634 16.8 4 17.5163 4 18.4C4 19.2836 4.71634 20 5.6 20Z" fill="#737373"/>
-<path d="M5.6 13.6C6.48366 13.6 7.2 12.8836 7.2 12C7.2 11.1163 6.48366 10.4 5.6 10.4C4.71634 10.4 4 11.1163 4 12C4 12.8836 4.71634 13.6 5.6 13.6Z" fill="#A3A3A3"/>
-<path d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z" fill="#A3A3A3"/>
-<path d="M12 20C12.8836 20 13.6 19.2836 13.6 18.4C13.6 17.5163 12.8836 16.8 12 16.8C11.1163 16.8 10.4 17.5163 10.4 18.4C10.4 19.2836 11.1163 20 12 20Z" fill="#A3A3A3"/>
-<path d="M12 13.6C12.8836 13.6 13.6 12.8837 13.6 12C13.6 11.1164 12.8836 10.4 12 10.4C11.1163 10.4 10.4 11.1164 10.4 12C10.4 12.8837 11.1163 13.6 12 13.6Z" fill="#737373"/>
-<path d="M12 7.2C12.8836 7.2 13.6 6.48366 13.6 5.6C13.6 4.71634 12.8836 4 12 4C11.1163 4 10.4 4.71634 10.4 5.6C10.4 6.48366 11.1163 7.2 12 7.2Z" fill="#737373"/>
-<path d="M18.4 20C19.2837 20 20 19.2836 20 18.4C20 17.5163 19.2837 16.8 18.4 16.8C17.5163 16.8 16.8 17.5163 16.8 18.4C16.8 19.2836 17.5163 20 18.4 20Z" fill="#A3A3A3"/>
-<path d="M18.4 13.6C19.2837 13.6 20 12.8837 20 12C20 11.1164 19.2837 10.4 18.4 10.4C17.5163 10.4 16.8 11.1164 16.8 12C16.8 12.8837 17.5163 13.6 18.4 13.6Z" fill="#A3A3A3"/>
-<path d="M18.4 7.2C19.2837 7.2 20 6.48366 20 5.6C20 4.71634 19.2837 4 18.4 4C17.5163 4 16.8 4.71634 16.8 5.6C16.8 6.48366 17.5163 7.2 18.4 7.2Z" fill="#737373"/>
+const MoreLoginOptions = `<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 4">
+<path id="Vector" d="M2.1 16C2.98366 16 3.7 15.2836 3.7 14.4C3.7 13.5163 2.98366 12.8 2.1 12.8C1.21634 12.8 0.5 13.5163 0.5 14.4C0.5 15.2836 1.21634 16 2.1 16Z" fill="#808080"/>
+<path id="Vector_2" d="M2.1 9.60002C2.98366 9.60002 3.7 8.88368 3.7 8.00002C3.7 7.11637 2.98366 6.40002 2.1 6.40002C1.21634 6.40002 0.5 7.11637 0.5 8.00002C0.5 8.88368 1.21634 9.60002 2.1 9.60002Z" fill="#808080"/>
+<path id="Vector_3" d="M2.1 3.2C2.98366 3.2 3.7 2.48366 3.7 1.6C3.7 0.716344 2.98366 0 2.1 0C1.21634 0 0.5 0.716344 0.5 1.6C0.5 2.48366 1.21634 3.2 2.1 3.2Z" fill="#808080"/>
+<path id="Vector_4" d="M8.4999 16C9.38356 16 10.0999 15.2836 10.0999 14.4C10.0999 13.5163 9.38356 12.8 8.4999 12.8C7.61625 12.8 6.8999 13.5163 6.8999 14.4C6.8999 15.2836 7.61625 16 8.4999 16Z" fill="#808080"/>
+<path id="Vector_5" d="M8.4999 9.60002C9.38356 9.60002 10.0999 8.88368 10.0999 8.00002C10.0999 7.11637 9.38356 6.40002 8.4999 6.40002C7.61625 6.40002 6.8999 7.11637 6.8999 8.00002C6.8999 8.88368 7.61625 9.60002 8.4999 9.60002Z" fill="#808080"/>
+<path id="Vector_6" d="M8.4999 3.2C9.38356 3.2 10.0999 2.48366 10.0999 1.6C10.0999 0.716344 9.38356 0 8.4999 0C7.61625 0 6.8999 0.716344 6.8999 1.6C6.8999 2.48366 7.61625 3.2 8.4999 3.2Z" fill="#808080"/>
+<path id="Vector_7" d="M14.9 16C15.7837 16 16.5 15.2836 16.5 14.4C16.5 13.5163 15.7837 12.8 14.9 12.8C14.0164 12.8 13.3 13.5163 13.3 14.4C13.3 15.2836 14.0164 16 14.9 16Z" fill="#808080"/>
+<path id="Vector_8" d="M14.9 9.60002C15.7837 9.60002 16.5 8.88368 16.5 8.00002C16.5 7.11637 15.7837 6.40002 14.9 6.40002C14.0164 6.40002 13.3 7.11637 13.3 8.00002C13.3 8.88368 14.0164 9.60002 14.9 9.60002Z" fill="#808080"/>
+<path id="Vector_9" d="M14.9 3.2C15.7837 3.2 16.5 2.48366 16.5 1.6C16.5 0.716344 15.7837 0 14.9 0C14.0164 0 13.3 0.716344 13.3 1.6C13.3 2.48366 14.0164 3.2 14.9 3.2Z" fill="#808080"/>
+</g>
 </svg>
 `;
 
@@ -7090,7 +7080,7 @@ const CpslModal = class {
 };
 CpslModal.style = CpslModalStyle0;
 
-const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;top:0;left:0;z-index:100000;opacity:0%;display:none;background-color:var(--cpsl-color-alpha-black-50)}";
+const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999999999999;opacity:0%;display:none;background-color:var(--cpsl-color-alpha-black-50)}";
 const CpslOverlayStyle0 = cpslOverlayCss;
 
 const CpslOverlay = class {
@@ -7401,14 +7391,21 @@ const CpslTabs = class {
             this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
         }, 50);
     }
+    updateTab(newValue, oldValue) {
+        if (Boolean(newValue) && !Boolean(oldValue)) {
+            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        }
+    }
     componentWillLoad() {
-        this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        var _a, _b;
+        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
         this.cpslTabsInit.emit({
             tab: this.selectedTab,
         });
     }
     componentDidLoad() {
-        this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        var _a, _b;
+        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
         setTimeout(() => {
             this.loaded = true;
         }, 50);
@@ -7420,18 +7417,16 @@ const CpslTabs = class {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (index.h(index.Host, { key: 'b64847167837c21748fce136be621c5cd3056383', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '97f898ee1c1a29c673a901d37e0c2aa20f73e06e', class: "tabs-container" }, index.h("slot", { key: '6a731c26802bc1b08c6b5fe92b2a6f1da438ee89' }), index.h("div", { key: 'c69d074579a90b804f038f5ace589a1c98ed45e1', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (index.h(index.Host, { key: '0ed728859b1d8e218bda3fdc4022cdd061552d8d', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: 'b2cc2886ff4523c227b713385577375df9c1b4e7', class: "tabs-container" }, index.h("slot", { key: '591895925b58373da582610cf775d1828179b395' }), index.h("div", { key: '57bd7718e0525fdd20eaa5b005fc8d33408f45f8', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "fullWidth": ["updateSlider"]
+        "fullWidth": ["updateSlider"],
+        "selectedTab": ["updateTab"]
     }; }
 };
 const getTab = (tabs, tab) => {
     const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
-    if (!tabEl) {
-        console.error(`tab with id: "${tabEl}" does not exist`);
-    }
     return tabEl;
 };
 CpslTabs.style = CpslTabsStyle0;