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

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-2c447f86.js';
-export { s as setNonce } from './index-2c447f86.js';
+import { b as bootstrapLazy } from './index-b188f201.js';
+export { s as setNonce } from './index-b188f201.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["cpsl-modal-v2",[[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",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[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",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_33",[[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-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 bootstrapLazy([["cpsl-modal-v2",[[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",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[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",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[2]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_34",[[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);
 };
 
 export { defineCustomElements };

package/dist/scripts/buildAssets.js

@@ -0,0 +1,90 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const fs = require('fs');
+const fsPromises = require('fs').promises;
+function toCamelCase(text) {
+    return text.replace(/-\w/g, clearAndUpper);
+}
+function toPascalCase(text) {
+    return text.replace(/(^\w|-\w)/g, clearAndUpper);
+}
+function clearAndUpper(text) {
+    return text.replace(/-/, '').toUpperCase();
+}
+const buildIconLibrary = () => {
+    let files = fs.readdirSync('./src/assets/icons');
+    let flagFiles = fs.readdirSync('./src/assets/icons/flags');
+    let importString = '';
+    let objString = 'export const Icons = {';
+    for (const fileName of files) {
+        if (!fileName.includes('.svg')) {
+            continue;
+        }
+        const fileNameNoExt = fileName.split('.')[0];
+        const camelCaseFileName = toCamelCase(fileNameNoExt);
+        const pascalCaseFileName = toPascalCase(fileNameNoExt);
+        importString += `import ${pascalCaseFileName} from './${fileName}';`;
+        objString += `${camelCaseFileName}: ${pascalCaseFileName},`;
+    }
+    for (const fileName of flagFiles) {
+        if (!fileName.includes('.svg')) {
+            continue;
+        }
+        const fileNameNoExt = fileName.split('.')[0];
+        const camelCaseFileName = toCamelCase(fileNameNoExt);
+        const pascalCaseFileName = toPascalCase(fileNameNoExt);
+        importString += `import ${pascalCaseFileName} from './flags/${fileName}';`;
+        objString += `${camelCaseFileName}: ${pascalCaseFileName},`;
+    }
+    const codeStr = `${importString}\n${objString}}`;
+    fs.writeFile('./src/assets/icons/index.ts', codeStr, 'utf8', err => {
+        if (err) {
+            console.error(err);
+        }
+    });
+};
+const buildImages = () => __awaiter(this, void 0, void 0, function* () {
+    const files = fs.readdirSync('./src/assets/images');
+    let objString = 'export const Images = {';
+    for (let i = 0; i < files.length; i++) {
+        const fileName = files[i];
+        if (!fileName.includes('png') && !fileName.includes('jpg') && !fileName.includes('jpeg')) {
+            continue;
+        }
+        const content = yield fsPromises.readFile(`./src/assets/images/${fileName}`, { encoding: 'base64' });
+        const fileNameSplit = fileName.split('.');
+        const ext = fileNameSplit[1];
+        const fileNameNoExt = fileNameSplit[0];
+        const camelCaseFileName = toCamelCase(fileNameNoExt);
+        const dataUrl = `data:image/${ext};base64,${content}`;
+        objString += `${camelCaseFileName}: "${dataUrl}",`;
+    }
+    fs.writeFile('./src/assets/images/index.ts', `${objString}}`, 'utf8', err => {
+        if (err) {
+            console.error(err);
+        }
+    });
+});
+const main = () => {
+    buildIconLibrary();
+    buildImages();
+};
+main();
+//# sourceMappingURL=buildAssets.js.map

package/dist/scripts/buildAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildAssets.js","sourceRoot":"","sources":["../../scripts/buildAssets.ts"],"names":[],"mappings":"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","sourcesContent":["const fs = require('fs');\nconst fsPromises = require('fs').promises;\n\nfunction toCamelCase(text) {\n  return text.replace(/-\\w/g, clearAndUpper);\n}\n\nfunction toPascalCase(text) {\n  return text.replace(/(^\\w|-\\w)/g, clearAndUpper);\n}\n\nfunction clearAndUpper(text) {\n  return text.replace(/-/, '').toUpperCase();\n}\nconst buildIconLibrary = () => {\n  let files: string[] = fs.readdirSync('./src/assets/icons');\n  let flagFiles = fs.readdirSync('./src/assets/icons/flags');\n\n  let importString = '';\n  let objString = 'export const Icons = {';\n\n  for (const fileName of files) {\n    if (!fileName.includes('.svg')) {\n      continue;\n    }\n\n    const fileNameNoExt = fileName.split('.')[0];\n\n    const camelCaseFileName = toCamelCase(fileNameNoExt);\n    const pascalCaseFileName = toPascalCase(fileNameNoExt);\n\n    importString += `import ${pascalCaseFileName} from './${fileName}';`;\n    objString += `${camelCaseFileName}: ${pascalCaseFileName},`;\n  }\n\n  for (const fileName of flagFiles) {\n    if (!fileName.includes('.svg')) {\n      continue;\n    }\n\n    const fileNameNoExt = fileName.split('.')[0];\n\n    const camelCaseFileName = toCamelCase(fileNameNoExt);\n    const pascalCaseFileName = toPascalCase(fileNameNoExt);\n\n    importString += `import ${pascalCaseFileName} from './flags/${fileName}';`;\n    objString += `${camelCaseFileName}: ${pascalCaseFileName},`;\n  }\n\n  const codeStr = `${importString}\\n${objString}}`;\n  fs.writeFile('./src/assets/icons/index.ts', codeStr, 'utf8', err => {\n    if (err) {\n      console.error(err);\n    }\n  });\n};\n\nconst buildImages = async () => {\n  const files: string[] = fs.readdirSync('./src/assets/images');\n\n  let objString = 'export const Images = {';\n\n  for (let i = 0; i < files.length; i++) {\n    const fileName = files[i];\n\n    if (!fileName.includes('png') && !fileName.includes('jpg') && !fileName.includes('jpeg')) {\n      continue;\n    }\n\n    const content = await fsPromises.readFile(`./src/assets/images/${fileName}`, { encoding: 'base64' });\n\n    const fileNameSplit = fileName.split('.');\n    const ext = fileNameSplit[1];\n    const fileNameNoExt = fileNameSplit[0];\n\n    const camelCaseFileName = toCamelCase(fileNameNoExt);\n\n    const dataUrl = `data:image/${ext};base64,${content}`;\n\n    objString += `${camelCaseFileName}: \"${dataUrl}\",`;\n  }\n\n  fs.writeFile('./src/assets/images/index.ts', `${objString}}`, 'utf8', err => {\n    if (err) {\n      console.error(err);\n    }\n  });\n};\n\nconst main = () => {\n  buildIconLibrary();\n  buildImages();\n};\nmain();\n"]}

package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts → briancorbin/Documents/Programming/Capsule/component-library/core/.stencil/scripts/buildAssets.d.ts}

@@ -1,5 +1,8 @@
 declare const fs: any;
+declare const fsPromises: any;
 declare function toCamelCase(text: any): any;
 declare function toPascalCase(text: any): any;
 declare function clearAndUpper(text: any): any;
+declare const buildIconLibrary: () => void;
+declare const buildImages: () => Promise<void>;
 declare const main: () => void;

package/dist/types/assets/icons/index.d.ts

@@ -1,4 +1,95 @@
 export declare const Icons: {
+    alertCircle: string;
+    angelListBrand: string;
+    angelList: string;
+    appleBrand: string;
+    apple: string;
+    arrowNarrow: string;
+    arrow: string;
+    backupKit: string;
+    brush: string;
+    capsuleLogo: string;
+    capsuleRingsDark: string;
+    capsuleRings: string;
+    capsule: string;
+    checkCircle: string;
+    check: string;
+    chevronUp: string;
+    clock: string;
+    close: string;
+    clubhouseBrand: string;
+    clubhouse: string;
+    copy: string;
+    cube: string;
+    decentBrand: string;
+    decent: string;
+    discordBrand: string;
+    discord: string;
+    doubleArc: string;
+    downloadCloud: string;
+    dribbbleBrand: string;
+    dribbble: string;
+    earth: string;
+    eyeOff: string;
+    eye: string;
+    facebookBrand: string;
+    facebook: string;
+    farcasterBrand: string;
+    farcaster: string;
+    figmaBrand: string;
+    figma: string;
+    file: string;
+    githubBrand: string;
+    github: string;
+    googleBrand: string;
+    google: string;
+    helpCircle: string;
+    heroEmail: string;
+    heroLock: string;
+    heroPasskey: string;
+    heroPhone: string;
+    heroWallet: string;
+    home: string;
+    image: string;
+    infoCircle: string;
+    instagramBrand: string;
+    instagram: string;
+    key: string;
+    lightning01: string;
+    lightning: string;
+    linkedinBrand: string;
+    linkedin: string;
+    mail: string;
+    menu: string;
+    moreLoginOptions: string;
+    phone: string;
+    pintrestBrand: string;
+    pintrest: string;
+    plusCircle: string;
+    rampNetworkBrand: string;
+    rampNetwork: string;
+    redditBrand: string;
+    reddit: string;
+    refresh: string;
+    settings: string;
+    signalBrand: string;
+    signal: string;
+    singleArc: string;
+    snapchatBrand: string;
+    snapchat: string;
+    stars: string;
+    telegramBrand: string;
+    telegram: string;
+    tikTokBrand: string;
+    tikTok: string;
+    tumblrBrand: string;
+    tumblr: string;
+    twitterBrand: string;
+    twitter: string;
+    wallet: string;
+    x: string;
+    youtubeBrand: string;
+    youtube: string;
     AD: string;
     AE: string;
     AF: string;
@@ -232,93 +323,4 @@ export declare const Icons: {
     ZA: string;
     ZM: string;
     ZW: string;
-    alertCircle: string;
-    angelListBrand: string;
-    angelList: string;
-    appleBrand: string;
-    apple: string;
-    arrowNarrow: string;
-    arrow: string;
-    backupKit: string;
-    brush: string;
-    capsuleLogo: string;
-    capsuleRingsDark: string;
-    capsuleRings: string;
-    capsule: string;
-    checkCircle: string;
-    check: string;
-    chevronUp: string;
-    clock: string;
-    close: string;
-    clubhouseBrand: string;
-    clubhouse: string;
-    copy: string;
-    cube: string;
-    decentBrand: string;
-    decent: string;
-    discordBrand: string;
-    discord: string;
-    downloadCloud: string;
-    dribbbleBrand: string;
-    dribbble: string;
-    earth: string;
-    eyeOff: string;
-    eye: string;
-    facebookBrand: string;
-    facebook: string;
-    farcasterBrand: string;
-    farcaster: string;
-    figmaBrand: string;
-    figma: string;
-    file: string;
-    githubBrand: string;
-    github: string;
-    googleBrand: string;
-    google: string;
-    helpCircle: string;
-    heroEmail: string;
-    heroLock: string;
-    heroPasskey: string;
-    heroPhone: string;
-    heroWallet: string;
-    home: string;
-    image: string;
-    infoCircle: string;
-    instagramBrand: string;
-    instagram: string;
-    key: string;
-    lightning01: string;
-    lightning: string;
-    linkedinBrand: string;
-    linkedin: string;
-    mail: string;
-    menu: string;
-    moreLoginOptions: string;
-    phone: string;
-    pintrestBrand: string;
-    pintrest: string;
-    plusCircle: string;
-    rampNetworkBrand: string;
-    rampNetwork: string;
-    redditBrand: string;
-    reddit: string;
-    refresh: string;
-    settings: string;
-    signalBrand: string;
-    signal: string;
-    snapchatBrand: string;
-    snapchat: string;
-    stars: string;
-    telegramBrand: string;
-    telegram: string;
-    tikTokBrand: string;
-    tikTok: string;
-    tumblrBrand: string;
-    tumblr: string;
-    twitterBrand: string;
-    twitter: string;
-    wallet: string;
-    x: string;
-    youtubeBrand: string;
-    youtube: string;
 };

package/dist/types/assets/images/index.d.ts

@@ -0,0 +1,5 @@
+export declare const Images: {
+    heroDefault: string;
+    heroPending: string;
+    heroSuccess: string;
+};

package/dist/types/components/cpsl-button/cpsl-button.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryFn } from '@storybook/html';
+import { type CpslButton } from './cpsl-button';
+declare const meta: Meta<CpslButton & {
+    content?: string;
+}>;
+export default meta;
+type Story = StoryFn<CpslButton & {
+    content?: string;
+}>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
+export declare const Destructive: Story;
+export declare const Icon: Story;
+export declare const PrimaryWithIcon: Story;

package/dist/types/components/cpsl-hero/cpsl-hero.d.ts

@@ -0,0 +1,4 @@
+export declare class CpslHero {
+    variant?: 'connection' | 'pending' | 'approved' | 'failed';
+    render(): any;
+}

package/dist/types/components/cpsl-hero/cpsl-hero.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryFn } from '@storybook/html';
+import { type CpslHero } from './cpsl-hero';
+declare const meta: Meta<CpslHero & {
+    content?: string;
+}>;
+export default meta;
+type Story = StoryFn<CpslHero & {
+    content?: string;
+}>;
+export declare const Connection: Story;
+export declare const Pending: Story;
+export declare const Approved: Story;
+export declare const Failed: Story;

package/dist/types/components/cpsl-identicon/cpsl-identicon.d.ts

@@ -0,0 +1,5 @@
+export declare class CpslIdenticon {
+    hash: string;
+    size: number;
+    render(): any;
+}

package/dist/types/components/cpsl-identicon/cpsl-identicon.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryFn } from '@storybook/html';
+import { type CpslIdenticon } from './cpsl-identicon';
+declare const meta: Meta<CpslIdenticon & {
+    content?: string;
+}>;
+export default meta;
+type Story = StoryFn<CpslIdenticon & {
+    content?: string;
+}>;
+export declare const Primary: Story;

package/dist/types/components.d.ts

@@ -332,6 +332,12 @@ export namespace Components {
          */
         "fixed": boolean;
     }
+    interface CpslHero {
+        /**
+          * The variant of the button. Options are: `"default"`, `"loading", `"success". Default is: `"default"`.
+         */
+        "variant"?: 'connection' | 'pending' | 'approved' | 'failed';
+    }
     interface CpslIcon {
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
@@ -342,6 +348,13 @@ export namespace Components {
          */
         "src"?: string;
     }
+    interface CpslIdenticon {
+        "hash": string;
+        /**
+          * The size of the identicon. Default is: 40.
+         */
+        "size": number;
+    }
     interface CpslInfoBox {
     }
     interface CpslInput {
@@ -988,12 +1001,24 @@ declare global {
         prototype: HTMLCpslGridElement;
         new (): HTMLCpslGridElement;
     };
+    interface HTMLCpslHeroElement extends Components.CpslHero, HTMLStencilElement {
+    }
+    var HTMLCpslHeroElement: {
+        prototype: HTMLCpslHeroElement;
+        new (): HTMLCpslHeroElement;
+    };
     interface HTMLCpslIconElement extends Components.CpslIcon, HTMLStencilElement {
     }
     var HTMLCpslIconElement: {
         prototype: HTMLCpslIconElement;
         new (): HTMLCpslIconElement;
     };
+    interface HTMLCpslIdenticonElement extends Components.CpslIdenticon, HTMLStencilElement {
+    }
+    var HTMLCpslIdenticonElement: {
+        prototype: HTMLCpslIdenticonElement;
+        new (): HTMLCpslIdenticonElement;
+    };
     interface HTMLCpslInfoBoxElement extends Components.CpslInfoBox, HTMLStencilElement {
     }
     var HTMLCpslInfoBoxElement: {
@@ -1295,7 +1320,9 @@ declare global {
         "cpsl-dropdown": HTMLCpslDropdownElement;
         "cpsl-file-upload": HTMLCpslFileUploadElement;
         "cpsl-grid": HTMLCpslGridElement;
+        "cpsl-hero": HTMLCpslHeroElement;
         "cpsl-icon": HTMLCpslIconElement;
+        "cpsl-identicon": HTMLCpslIdenticonElement;
         "cpsl-info-box": HTMLCpslInfoBoxElement;
         "cpsl-input": HTMLCpslInputElement;
         "cpsl-modal": HTMLCpslModalElement;
@@ -1664,6 +1691,12 @@ declare namespace LocalJSX {
          */
         "fixed"?: boolean;
     }
+    interface CpslHero {
+        /**
+          * The variant of the button. Options are: `"default"`, `"loading", `"success". Default is: `"default"`.
+         */
+        "variant"?: 'connection' | 'pending' | 'approved' | 'failed';
+    }
     interface CpslIcon {
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
@@ -1674,6 +1707,13 @@ declare namespace LocalJSX {
          */
         "src"?: string;
     }
+    interface CpslIdenticon {
+        "hash"?: string;
+        /**
+          * The size of the identicon. Default is: 40.
+         */
+        "size"?: number;
+    }
     interface CpslInfoBox {
     }
     interface CpslInput {
@@ -2224,7 +2264,9 @@ declare namespace LocalJSX {
         "cpsl-dropdown": CpslDropdown;
         "cpsl-file-upload": CpslFileUpload;
         "cpsl-grid": CpslGrid;
+        "cpsl-hero": CpslHero;
         "cpsl-icon": CpslIcon;
+        "cpsl-identicon": CpslIdenticon;
         "cpsl-info-box": CpslInfoBox;
         "cpsl-input": CpslInput;
         "cpsl-modal": CpslModal;
@@ -2269,7 +2311,9 @@ declare module "@stencil/core" {
             "cpsl-dropdown": LocalJSX.CpslDropdown & JSXBase.HTMLAttributes<HTMLCpslDropdownElement>;
             "cpsl-file-upload": LocalJSX.CpslFileUpload & JSXBase.HTMLAttributes<HTMLCpslFileUploadElement>;
             "cpsl-grid": LocalJSX.CpslGrid & JSXBase.HTMLAttributes<HTMLCpslGridElement>;
+            "cpsl-hero": LocalJSX.CpslHero & JSXBase.HTMLAttributes<HTMLCpslHeroElement>;
             "cpsl-icon": LocalJSX.CpslIcon & JSXBase.HTMLAttributes<HTMLCpslIconElement>;
+            "cpsl-identicon": LocalJSX.CpslIdenticon & JSXBase.HTMLAttributes<HTMLCpslIdenticonElement>;
             "cpsl-info-box": LocalJSX.CpslInfoBox & JSXBase.HTMLAttributes<HTMLCpslInfoBoxElement>;
             "cpsl-input": LocalJSX.CpslInput & JSXBase.HTMLAttributes<HTMLCpslInputElement>;
             "cpsl-modal": LocalJSX.CpslModal & JSXBase.HTMLAttributes<HTMLCpslModalElement>;

package/dist/types/interface.d.ts

@@ -1,4 +1,5 @@
 import { Icons } from './assets/icons';
+import { Images } from './assets/images';
 export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
 export type AutocompleteTypes = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo';
 export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';
@@ -8,6 +9,7 @@ export type CssClassMap = {
     [className: string]: boolean;
 };
 export type IconType = keyof typeof Icons;
+export type ImageType = keyof typeof Images;
 export type Theme = {
     foregroundColor?: string;
     backgroundColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "3.1.2",
+  "version": "3.2.0-dev.0",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -16,14 +16,16 @@
     "css/"
   ],
   "scripts": {
-    "build": "yarn build:icons && yarn build:css && stencil build",
-    "start": "yarn build:icons && yarn build:css && stencil build --dev --watch --serve",
+    "build": "yarn build:assets && yarn build:css && stencil build",
+    "start": "yarn build:assets && yarn build:css && stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "lint": "eslint src/**/*{.ts,.tsx}",
     "build:css": "sass --embed-sources src/css:./css",
-    "build:icons": "ts-node -T ./scripts/buildIconLibrary.ts"
+    "build:assets": "ts-node -T ./scripts/buildAssets.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@stencil/core": "^4.7.0",
@@ -34,22 +36,35 @@
     "qr-code-styling": "^1.6.0-rc.1"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.24.7",
     "@stencil-community/eslint-plugin": "^0.7.2",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.10",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-notes": "^5.3.21",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/html": "^8.1.11",
+    "@storybook/html-webpack5": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "puppeteer": "^21.9.0",
     "rollup-plugin-dotenv": "^0.5.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
+    "storybook": "^8.1.11",
     "ts-node": "^10.9.2"
   },
-  "gitHead": "2f151dbfca37fa9061f16dff921c5c5e798d0fa8"
+  "gitHead": "ca0d8cab915d9cef706c8dd619176032cdcd165f"
 }