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

package/dist/esm/prand-c8323494.js.map

@@ -0,0 +1 @@
+{"file":"prand-c8323494.js","mappings":"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","names":["Prando"],"sources":["src/lib/prando.ts","src/utils/prand.ts"],"sourcesContent":["/*\n * This file contains code from prando, which is licensed under the MIT License:\n *\n * Copyright (c) 2016 Zeh Fernando\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nexport default class Prando {\n  private static readonly MIN: number = -2147483648; // Int32 min\n  private static readonly MAX: number = 2147483647; // Int32 max\n\n  private _seed: number;\n  private _value = NaN;\n\n  // ================================================================================================================\n  // CONSTRUCTOR ----------------------------------------------------------------------------------------------------\n\n  /**\n   * Generate a new Prando pseudo-random number generator.\n   *\n   * @param seed - A number or string seed that determines which pseudo-random number sequence will be created. Defaults to a random seed based on `Math.random()`.\n   */\n  constructor(seed?: number | string) {\n    if (typeof seed === 'string') {\n      // String seed\n      this._seed = this.hashCode(seed);\n    } else if (typeof seed === 'number') {\n      // Numeric seed\n      this._seed = this.getSafeSeed(seed);\n    } else {\n      // Pseudo-random seed\n      this._seed = this.getSafeSeed(Prando.MIN + Math.floor((Prando.MAX - Prando.MIN) * Math.random()));\n    }\n    this.reset();\n  }\n\n  // ================================================================================================================\n  // PUBLIC INTERFACE -----------------------------------------------------------------------------------------------\n\n  /**\n   * Generates a pseudo-random number between a lower (inclusive) and a higher (exclusive) bounds.\n   *\n   * @param min - The minimum number that can be randomly generated.\n   * @param pseudoMax - The maximum number that can be randomly generated (exclusive).\n   * @return The generated pseudo-random number.\n   */\n  public next(min = 0, pseudoMax = 1): number {\n    this.recalculate();\n    return this.map(this._value, Prando.MIN, Prando.MAX, min, pseudoMax);\n  }\n\n  /**\n   * Generates a pseudo-random integer number in a range (inclusive).\n   *\n   * @param min - The minimum number that can be randomly generated.\n   * @param max - The maximum number that can be randomly generated.\n   * @return The generated pseudo-random number.\n   */\n  public nextInt(min = 10, max = 100): number {\n    this.recalculate();\n    return Math.floor(this.map(this._value, Prando.MIN, Prando.MAX, min, max + 1));\n  }\n\n  /**\n   * Generates a pseudo-random string sequence of a particular length from a specific character range.\n   *\n   * Note: keep in mind that creating a random string sequence does not guarantee uniqueness; there is always a\n   * 1 in (char_length^string_length) chance of collision. For real unique string ids, always check for\n   * pre-existing ids, or employ a robust GUID/UUID generator.\n   *\n   * @param length - Length of the string to be generated.\n   * @param chars - Characters that are used when creating the random string. Defaults to all alphanumeric chars (A-Z, a-z, 0-9).\n   * @return The generated string sequence.\n   */\n  public nextString(length = 16, chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'): string {\n    let str = '';\n    while (str.length < length) {\n      str += this.nextChar(chars);\n    }\n    return str;\n  }\n\n  /**\n   * Generates a pseudo-random string of 1 character specific character range.\n   *\n   * @param chars - Characters that are used when creating the random string. Defaults to all alphanumeric chars (A-Z, a-z, 0-9).\n   * @return The generated character.\n   */\n  public nextChar(chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'): string {\n    return chars.substr(this.nextInt(0, chars.length - 1), 1);\n  }\n\n  /**\n   * Picks a pseudo-random item from an array. The array is left unmodified.\n   *\n   * Note: keep in mind that while the returned item will be random enough, picking one item from the array at a time\n   * does not guarantee nor imply that a sequence of random non-repeating items will be picked. If you want to\n   * *pick items in a random order* from an array, instead of *pick one random item from an array*, it's best to\n   * apply a *shuffle* transformation to the array instead, then read it linearly.\n   *\n   * @param array - Array of any type containing one or more candidates for random picking.\n   * @return An item from the array.\n   */\n  public nextArrayItem<T>(array: T[]): T {\n    return array[this.nextInt(0, array.length - 1)];\n  }\n\n  /**\n   * Generates a pseudo-random boolean.\n   *\n   * @return A value of true or false.\n   */\n  public nextBoolean(): boolean {\n    this.recalculate();\n    return this._value > 0.5;\n  }\n\n  /**\n   * Skips ahead in the sequence of numbers that are being generated. This is equivalent to\n   * calling next() a specified number of times, but faster since it doesn't need to map the\n   * new random numbers to a range and return it.\n   *\n   * @param iterations - The number of items to skip ahead.\n   */\n  public skip(iterations = 1): void {\n    while (iterations-- > 0) {\n      this.recalculate();\n    }\n  }\n\n  /**\n   * Reset the pseudo-random number sequence back to its starting seed. Further calls to next()\n   * will then produce the same sequence of numbers it had produced before. This is equivalent to\n   * creating a new Prando instance with the same seed as another Prando instance.\n   *\n   * Example:\n   * let rng = new Prando(12345678);\n   * console.log(rng.next()); // 0.6177754114889017\n   * console.log(rng.next()); // 0.5784605181725837\n   * rng.reset();\n   * console.log(rng.next()); // 0.6177754114889017 again\n   * console.log(rng.next()); // 0.5784605181725837 again\n   */\n  public reset(): void {\n    this._value = this._seed;\n  }\n\n  // ================================================================================================================\n  // PRIVATE INTERFACE ----------------------------------------------------------------------------------------------\n\n  private recalculate(): void {\n    this._value = this.xorshift(this._value);\n  }\n\n  private xorshift(value: number): number {\n    // Xorshift*32\n    // Based on George Marsaglia's work: http://www.jstatsoft.org/v08/i14/paper\n    value ^= value << 13;\n    value ^= value >> 17;\n    value ^= value << 5;\n    return value;\n  }\n\n  private map(val: number, minFrom: number, maxFrom: number, minTo: number, maxTo: number): number {\n    return ((val - minFrom) / (maxFrom - minFrom)) * (maxTo - minTo) + minTo;\n  }\n\n  private hashCode(str: string): number {\n    let hash = 0;\n    if (str) {\n      const l = str.length;\n      for (let i = 0; i < l; i++) {\n        hash = (hash << 5) - hash + str.charCodeAt(i);\n        hash |= 0;\n        hash = this.xorshift(hash);\n      }\n    }\n    return this.getSafeSeed(hash);\n  }\n\n  private getSafeSeed(seed: number): number {\n    if (seed === 0) return 1;\n    return seed;\n  }\n}\n","import Prando from '../lib/prando';\n\nexport type Color = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple';\n\nexport const COLORS: Color[] = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];\n\nconst GRADIENTS = {\n  red: ['#FF4270', '#FF7C7C'],\n  orange: ['#F45532', '#FF9B63'],\n  yellow: ['#FFA756', '#FBFF47'],\n  green: ['#0CAE60', '#7BFFD0'],\n  blue: ['#476FFF', '#47C8FF'],\n  purple: ['#9747FF', '#DA47FF'],\n};\n\nexport function getPseudoRandomBackground(seed: string): string {\n  const rng = new Prando(seed);\n\n  const [start, stop] = GRADIENTS[COLORS[rng.nextInt(0, COLORS.length - 1)]];\n\n  return `linear-gradient(136deg, ${start} 6.86%, ${stop} 93.78%)`;\n}\n"],"version":3}

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

@@ -22,6 +22,7 @@ export declare const Icons: {
     clubhouseBrand: string;
     clubhouse: string;
     copy: string;
+    cosmos: string;
     creditCard: string;
     cube: string;
     decentBrand: string;
@@ -34,6 +35,7 @@ export declare const Icons: {
     dribbbleBrand: string;
     dribbble: string;
     earth: string;
+    ethereum: string;
     eyeOff: string;
     eye: string;
     facebookBrand: string;
@@ -43,6 +45,7 @@ export declare const Icons: {
     figmaBrand: string;
     figma: string;
     file: string;
+    folder: string;
     githubBrand: string;
     github: string;
     globe: string;
@@ -57,6 +60,8 @@ export declare const Icons: {
     heroLock: string;
     heroPasskey: string;
     heroPhone: string;
+    heroPlusCircleCapsule: string;
+    heroPlusCircle: string;
     heroWallet: string;
     home: string;
     image: string;
@@ -94,6 +99,7 @@ export declare const Icons: {
     signal: string;
     snapchatBrand: string;
     snapchat: string;
+    solana: string;
     stars: string;
     stripeBrand: string;
     telegramBrand: string;

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

@@ -1,15 +0,0 @@
-export declare class CpslAnimation {
-    private animation;
-    el: HTMLCpslAnimationElement;
-    /**
-     * Source of the Lottie animation file.
-     */
-    src: string;
-    /**
-     * Will replay the animation
-     */
-    replayAnimation(): Promise<void>;
-    componentDidLoad(): void;
-    private get animationContainerEl();
-    render(): any;
-}

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

@@ -11,10 +11,10 @@ export declare class CpslHero {
     hideFadeOut?: boolean;
     /**
      * The variant of the button.
-     * Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved", `"failed".
+     * Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved",`"add", `"failed".
      * Default is: `"connection"`.
      */
-    variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed';
+    variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed';
     title: string;
     subtitle?: string;
     /**

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

@@ -1,9 +1,10 @@
 export declare class CpslIdenticon {
-    hash: string;
+    hash?: string | undefined;
     /**
-     *  The size of the identicon.
-     *  Default is: 40.
+     *  The CSS width and height of the identicon.
+     *  Default is: 40px.
      */
-    size: number;
+    size: string;
+    variant: 'default' | 'avatar';
     render(): any;
 }

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CpslNavButton {
+    el: HTMLCpslNavButtonElement;
+    /**
+     * If the button is disabled.
+     * Default is: false.
+     */
+    disabled?: boolean;
+    /**
+     * Whether or not to use exact matching for the selected main route.
+     */
+    exactMainRouteMatch?: boolean;
+    /**
+     * Whether or not to use exact matching for the selected sub route.
+     */
+    exactSubRouteMatch?: boolean;
+    /**
+     * The route for the button.
+     */
+    route: string;
+    /**
+     * The id of the selected button.
+     */
+    subRoutes?: {
+        label: string;
+        value: string;
+    }[];
+    /**
+     * Path used to determine what button is selected
+     */
+    path?: string;
+    /**
+     * Called when the nav button is clicked.
+     */
+    cpslNavButtonClick: EventEmitter<string>;
+    private handleNavButtonClick;
+    /**
+     * Called when a nav button sub route is clicked.
+     */
+    cpslNavButtonSubRouteClick: EventEmitter<string>;
+    private handleSubRouteClick;
+    render(): any;
+}

package/dist/types/components/cpsl-nav-button-group/cpsl-nav-button-group.d.ts

@@ -1,12 +1,6 @@
 export declare class CpslNavButtonGroup {
     el: HTMLCpslNavButtonGroupElement;
-    /**
-     * The id of the selected button.
-     */
-    selectedId?: string;
-    selectItem(): void;
     componentWillRender(): void;
-    private get buttonSlots();
     private get otherSlots();
     render(): any;
 }

package/dist/types/components.d.ts

@@ -28,16 +28,6 @@ export namespace Components {
          */
         "variant"?: 'error' | 'warning' | 'success' | 'custom';
     }
-    interface CpslAnimation {
-        /**
-          * Will replay the animation
-         */
-        "replayAnimation": () => Promise<void>;
-        /**
-          * Source of the Lottie animation file.
-         */
-        "src": string;
-    }
     interface CpslAppBar {
         /**
           * Height of the app bar.
@@ -366,9 +356,9 @@ export namespace Components {
         "subtitle"?: string;
         "title": string;
         /**
-          * The variant of the button. Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved", `"failed". Default is: `"connection"`.
+          * The variant of the button. Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved",`"add", `"failed". Default is: `"connection"`.
          */
-        "variant"?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed';
+        "variant"?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed';
         /**
           * Whether to use the Capsule custom theming or use the provided theme Default is: `false`.
          */
@@ -399,11 +389,12 @@ export namespace Components {
         "icons": (IconType | string)[];
     }
     interface CpslIdenticon {
-        "hash": string;
+        "hash"?: string | undefined;
         /**
-          * The size of the identicon. Default is: 40.
+          * The CSS width and height of the identicon. Default is: 40px.
          */
-        "size": number;
+        "size": string;
+        "variant": 'default' | 'avatar';
     }
     interface CpslInfoBox {
     }
@@ -555,11 +546,33 @@ export namespace Components {
          */
         "zIndexOverride"?: number;
     }
-    interface CpslNavButtonGroup {
+    interface CpslNavButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether or not to use exact matching for the selected main route.
+         */
+        "exactMainRouteMatch"?: boolean;
+        /**
+          * Whether or not to use exact matching for the selected sub route.
+         */
+        "exactSubRouteMatch"?: boolean;
+        /**
+          * Path used to determine what button is selected
+         */
+        "path"?: string;
+        /**
+          * The route for the button.
+         */
+        "route": string;
         /**
           * The id of the selected button.
          */
-        "selectedId"?: string;
+        "subRoutes"?: { label: string; value: string }[];
+    }
+    interface CpslNavButtonGroup {
     }
     interface CpslOverlay {
         /**
@@ -870,6 +883,10 @@ export interface CpslModalV2CustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslModalV2Element;
 }
+export interface CpslNavButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslNavButtonElement;
+}
 export interface CpslPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslPaginationElement;
@@ -913,12 +930,6 @@ declare global {
         prototype: HTMLCpslAlertElement;
         new (): HTMLCpslAlertElement;
     };
-    interface HTMLCpslAnimationElement extends Components.CpslAnimation, HTMLStencilElement {
-    }
-    var HTMLCpslAnimationElement: {
-        prototype: HTMLCpslAnimationElement;
-        new (): HTMLCpslAnimationElement;
-    };
     interface HTMLCpslAppBarElement extends Components.CpslAppBar, HTMLStencilElement {
     }
     var HTMLCpslAppBarElement: {
@@ -1137,6 +1148,24 @@ declare global {
         prototype: HTMLCpslModalV2Element;
         new (): HTMLCpslModalV2Element;
     };
+    interface HTMLCpslNavButtonElementEventMap {
+        "cpslNavButtonClick": string;
+        "cpslNavButtonSubRouteClick": string;
+    }
+    interface HTMLCpslNavButtonElement extends Components.CpslNavButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslNavButtonElementEventMap>(type: K, listener: (this: HTMLCpslNavButtonElement, ev: CpslNavButtonCustomEvent<HTMLCpslNavButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslNavButtonElementEventMap>(type: K, listener: (this: HTMLCpslNavButtonElement, ev: CpslNavButtonCustomEvent<HTMLCpslNavButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCpslNavButtonElement: {
+        prototype: HTMLCpslNavButtonElement;
+        new (): HTMLCpslNavButtonElement;
+    };
     interface HTMLCpslNavButtonGroupElement extends Components.CpslNavButtonGroup, HTMLStencilElement {
     }
     var HTMLCpslNavButtonGroupElement: {
@@ -1357,7 +1386,6 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "cpsl-alert": HTMLCpslAlertElement;
-        "cpsl-animation": HTMLCpslAnimationElement;
         "cpsl-app-bar": HTMLCpslAppBarElement;
         "cpsl-auth-modal": HTMLCpslAuthModalElement;
         "cpsl-avatar": HTMLCpslAvatarElement;
@@ -1379,6 +1407,7 @@ declare global {
         "cpsl-info-box": HTMLCpslInfoBoxElement;
         "cpsl-input": HTMLCpslInputElement;
         "cpsl-modal-v2": HTMLCpslModalV2Element;
+        "cpsl-nav-button": HTMLCpslNavButtonElement;
         "cpsl-nav-button-group": HTMLCpslNavButtonGroupElement;
         "cpsl-overlay": HTMLCpslOverlayElement;
         "cpsl-pagination": HTMLCpslPaginationElement;
@@ -1411,12 +1440,6 @@ declare namespace LocalJSX {
          */
         "variant"?: 'error' | 'warning' | 'success' | 'custom';
     }
-    interface CpslAnimation {
-        /**
-          * Source of the Lottie animation file.
-         */
-        "src"?: string;
-    }
     interface CpslAppBar {
         /**
           * Height of the app bar.
@@ -1797,9 +1820,9 @@ declare namespace LocalJSX {
         "subtitle"?: string;
         "title"?: string;
         /**
-          * The variant of the button. Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved", `"failed". Default is: `"connection"`.
+          * The variant of the button. Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved",`"add", `"failed". Default is: `"connection"`.
          */
-        "variant"?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed';
+        "variant"?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed';
         /**
           * Whether to use the Capsule custom theming or use the provided theme Default is: `false`.
          */
@@ -1830,11 +1853,12 @@ declare namespace LocalJSX {
         "icons"?: (IconType | string)[];
     }
     interface CpslIdenticon {
-        "hash"?: string;
+        "hash"?: string | undefined;
         /**
-          * The size of the identicon. Default is: 40.
+          * The CSS width and height of the identicon. Default is: 40px.
          */
-        "size"?: number;
+        "size"?: string;
+        "variant"?: 'default' | 'avatar';
     }
     interface CpslInfoBox {
     }
@@ -2022,11 +2046,41 @@ declare namespace LocalJSX {
          */
         "zIndexOverride"?: number;
     }
-    interface CpslNavButtonGroup {
+    interface CpslNavButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether or not to use exact matching for the selected main route.
+         */
+        "exactMainRouteMatch"?: boolean;
+        /**
+          * Whether or not to use exact matching for the selected sub route.
+         */
+        "exactSubRouteMatch"?: boolean;
+        /**
+          * Called when the nav button is clicked.
+         */
+        "onCpslNavButtonClick"?: (event: CpslNavButtonCustomEvent<string>) => void;
+        /**
+          * Called when a nav button sub route is clicked.
+         */
+        "onCpslNavButtonSubRouteClick"?: (event: CpslNavButtonCustomEvent<string>) => void;
+        /**
+          * Path used to determine what button is selected
+         */
+        "path"?: string;
+        /**
+          * The route for the button.
+         */
+        "route"?: string;
         /**
           * The id of the selected button.
          */
-        "selectedId"?: string;
+        "subRoutes"?: { label: string; value: string }[];
+    }
+    interface CpslNavButtonGroup {
     }
     interface CpslOverlay {
         /**
@@ -2350,7 +2404,6 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "cpsl-alert": CpslAlert;
-        "cpsl-animation": CpslAnimation;
         "cpsl-app-bar": CpslAppBar;
         "cpsl-auth-modal": CpslAuthModal;
         "cpsl-avatar": CpslAvatar;
@@ -2372,6 +2425,7 @@ declare namespace LocalJSX {
         "cpsl-info-box": CpslInfoBox;
         "cpsl-input": CpslInput;
         "cpsl-modal-v2": CpslModalV2;
+        "cpsl-nav-button": CpslNavButton;
         "cpsl-nav-button-group": CpslNavButtonGroup;
         "cpsl-overlay": CpslOverlay;
         "cpsl-pagination": CpslPagination;
@@ -2398,7 +2452,6 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "cpsl-alert": LocalJSX.CpslAlert & JSXBase.HTMLAttributes<HTMLCpslAlertElement>;
-            "cpsl-animation": LocalJSX.CpslAnimation & JSXBase.HTMLAttributes<HTMLCpslAnimationElement>;
             "cpsl-app-bar": LocalJSX.CpslAppBar & JSXBase.HTMLAttributes<HTMLCpslAppBarElement>;
             "cpsl-auth-modal": LocalJSX.CpslAuthModal & JSXBase.HTMLAttributes<HTMLCpslAuthModalElement>;
             "cpsl-avatar": LocalJSX.CpslAvatar & JSXBase.HTMLAttributes<HTMLCpslAvatarElement>;
@@ -2420,6 +2473,7 @@ declare module "@stencil/core" {
             "cpsl-info-box": LocalJSX.CpslInfoBox & JSXBase.HTMLAttributes<HTMLCpslInfoBoxElement>;
             "cpsl-input": LocalJSX.CpslInput & JSXBase.HTMLAttributes<HTMLCpslInputElement>;
             "cpsl-modal-v2": LocalJSX.CpslModalV2 & JSXBase.HTMLAttributes<HTMLCpslModalV2Element>;
+            "cpsl-nav-button": LocalJSX.CpslNavButton & JSXBase.HTMLAttributes<HTMLCpslNavButtonElement>;
             "cpsl-nav-button-group": LocalJSX.CpslNavButtonGroup & JSXBase.HTMLAttributes<HTMLCpslNavButtonGroupElement>;
             "cpsl-overlay": LocalJSX.CpslOverlay & JSXBase.HTMLAttributes<HTMLCpslOverlayElement>;
             "cpsl-pagination": LocalJSX.CpslPagination & JSXBase.HTMLAttributes<HTMLCpslPaginationElement>;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export { generateTheme } from './utils/theme/generateTheme';
 export type { Theme, BorderRadius, IconType } from './interface';
+export { getPseudoRandomBackground } from './utils/prand';

package/dist/types/lib/prando.d.ts

@@ -0,0 +1,92 @@
+export default class Prando {
+    private static readonly MIN;
+    private static readonly MAX;
+    private _seed;
+    private _value;
+    /**
+     * Generate a new Prando pseudo-random number generator.
+     *
+     * @param seed - A number or string seed that determines which pseudo-random number sequence will be created. Defaults to a random seed based on `Math.random()`.
+     */
+    constructor(seed?: number | string);
+    /**
+     * Generates a pseudo-random number between a lower (inclusive) and a higher (exclusive) bounds.
+     *
+     * @param min - The minimum number that can be randomly generated.
+     * @param pseudoMax - The maximum number that can be randomly generated (exclusive).
+     * @return The generated pseudo-random number.
+     */
+    next(min?: number, pseudoMax?: number): number;
+    /**
+     * Generates a pseudo-random integer number in a range (inclusive).
+     *
+     * @param min - The minimum number that can be randomly generated.
+     * @param max - The maximum number that can be randomly generated.
+     * @return The generated pseudo-random number.
+     */
+    nextInt(min?: number, max?: number): number;
+    /**
+     * Generates a pseudo-random string sequence of a particular length from a specific character range.
+     *
+     * Note: keep in mind that creating a random string sequence does not guarantee uniqueness; there is always a
+     * 1 in (char_length^string_length) chance of collision. For real unique string ids, always check for
+     * pre-existing ids, or employ a robust GUID/UUID generator.
+     *
+     * @param length - Length of the string to be generated.
+     * @param chars - Characters that are used when creating the random string. Defaults to all alphanumeric chars (A-Z, a-z, 0-9).
+     * @return The generated string sequence.
+     */
+    nextString(length?: number, chars?: string): string;
+    /**
+     * Generates a pseudo-random string of 1 character specific character range.
+     *
+     * @param chars - Characters that are used when creating the random string. Defaults to all alphanumeric chars (A-Z, a-z, 0-9).
+     * @return The generated character.
+     */
+    nextChar(chars?: string): string;
+    /**
+     * Picks a pseudo-random item from an array. The array is left unmodified.
+     *
+     * Note: keep in mind that while the returned item will be random enough, picking one item from the array at a time
+     * does not guarantee nor imply that a sequence of random non-repeating items will be picked. If you want to
+     * *pick items in a random order* from an array, instead of *pick one random item from an array*, it's best to
+     * apply a *shuffle* transformation to the array instead, then read it linearly.
+     *
+     * @param array - Array of any type containing one or more candidates for random picking.
+     * @return An item from the array.
+     */
+    nextArrayItem<T>(array: T[]): T;
+    /**
+     * Generates a pseudo-random boolean.
+     *
+     * @return A value of true or false.
+     */
+    nextBoolean(): boolean;
+    /**
+     * Skips ahead in the sequence of numbers that are being generated. This is equivalent to
+     * calling next() a specified number of times, but faster since it doesn't need to map the
+     * new random numbers to a range and return it.
+     *
+     * @param iterations - The number of items to skip ahead.
+     */
+    skip(iterations?: number): void;
+    /**
+     * Reset the pseudo-random number sequence back to its starting seed. Further calls to next()
+     * will then produce the same sequence of numbers it had produced before. This is equivalent to
+     * creating a new Prando instance with the same seed as another Prando instance.
+     *
+     * Example:
+     * let rng = new Prando(12345678);
+     * console.log(rng.next()); // 0.6177754114889017
+     * console.log(rng.next()); // 0.5784605181725837
+     * rng.reset();
+     * console.log(rng.next()); // 0.6177754114889017 again
+     * console.log(rng.next()); // 0.5784605181725837 again
+     */
+    reset(): void;
+    private recalculate;
+    private xorshift;
+    private map;
+    private hashCode;
+    private getSafeSeed;
+}

package/dist/types/utils/prand.d.ts

@@ -0,0 +1,3 @@
+export type Color = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple';
+export declare const COLORS: Color[];
+export declare function getPseudoRandomBackground(seed: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "3.4.0",
+  "version": "3.4.1-dev.1",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -32,7 +32,6 @@
     "color2k": "^2.0.3",
     "gsap": "^3.12.5",
     "imask": "7.6.1",
-    "lottie-web": "^5.12.2",
     "qrcode-with-logos": "1.1.1"
   },
   "devDependencies": {
@@ -60,6 +59,5 @@
     "storybook": "^8.1.11",
     "storybook-addon-stencil": "^0.2.1",
     "ts-node": "^10.9.2"
-  },
-  "gitHead": "18a42040b855e15ddb01993fc1a0ee93dd608e52"
+  }
 }