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

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

@@ -4,9 +4,11 @@ export declare const Icons: {
     angelList: string;
     appleBrand: string;
     apple: string;
+    arrowCircleBrokenDownLeft: string;
     arrowNarrow: string;
     arrow: string;
     backupKit: string;
+    bank: string;
     brush: string;
     capsuleLogo: string;
     capsuleRingsDark: string;
@@ -20,12 +22,15 @@ export declare const Icons: {
     clubhouseBrand: string;
     clubhouse: string;
     copy: string;
+    creditCard: string;
     cube: string;
     decentBrand: string;
     decent: string;
     discordBrand: string;
     discord: string;
+    dot: string;
     downloadCloud: string;
+    download: string;
     dribbbleBrand: string;
     dribbble: string;
     earth: string;
@@ -40,10 +45,15 @@ export declare const Icons: {
     file: string;
     githubBrand: string;
     github: string;
+    globe: string;
     googleBrand: string;
     google: string;
     helpCircle: string;
+    heroAlertCircle: string;
+    heroCheckmarkCapsule: string;
+    heroCheckmark: string;
     heroEmail: string;
+    heroExternalConnection: string;
     heroLock: string;
     heroPasskey: string;
     heroPhone: string;
@@ -56,26 +66,36 @@ export declare const Icons: {
     key: string;
     lightning01: string;
     lightning: string;
+    linkExternal: string;
     linkedinBrand: string;
     linkedin: string;
+    logOut: string;
     mail: string;
     menu: string;
+    moonpayBrand: string;
     moreLoginOptions: string;
     phone: string;
     pintrestBrand: string;
     pintrest: string;
     plusCircle: string;
+    puzzlePiece: string;
+    qrCode02: string;
+    qrCode: string;
     rampNetworkBrand: string;
     rampNetwork: string;
     redditBrand: string;
     reddit: string;
     refresh: string;
+    search: string;
+    send: string;
     settings: string;
+    shield: string;
     signalBrand: string;
     signal: string;
     snapchatBrand: string;
     snapchat: string;
     stars: string;
+    stripeBrand: string;
     telegramBrand: string;
     telegram: string;
     tikTokBrand: string;

package/dist/types/components/{cpsl-modal/cpsl-modal.d.ts → cpsl-auth-modal/cpsl-auth-modal.d.ts}

@@ -1,10 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class CpslModal {
-    private draggable;
-    private expandFooterTl;
+export declare class CpslAuthModal {
     private hasAnimatedIn;
-    el: HTMLCpslModalElement;
+    el: HTMLCpslAuthModalElement;
     hasFooter: boolean;
+    isMobile: boolean;
     /**
      * Duration in seconds of the modal entering.
      * Default is .15.
@@ -15,15 +14,6 @@ export declare class CpslModal {
      * Default is .15.
      */
     exitTransitionDuration?: number;
-    /**
-     * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.
-     */
-    footerExpanded?: boolean;
-    /**
-     * Duration in seconds of the footer expansion animation.
-     * Default is 0.15.
-     */
-    footerTransitionDuration?: number;
     /**
      * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.
      */
@@ -56,23 +46,13 @@ export declare class CpslModal {
      * Override z-index.
      */
     zIndexOverride?: number;
-    toggleHeight(): void;
     toggleModal(): void;
     componentDidLoad(): void;
     private handleAnimation;
-    private addExpandAnim;
-    private getDraggableHeight;
-    private initDraggable;
     private get footerEl();
-    private get footerExpandedEl();
-    private get headerExpandedEl();
-    private get innerContainerEl();
-    private get contentEl();
     private get modalWrapperEl();
     private get modalContainerEl();
-    private get overlayEl();
     private get footerSlotEl();
-    private get headerEl();
     private get Modal();
     render(): any;
 }

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

@@ -31,9 +31,9 @@ export declare class CpslButton {
     target?: string;
     /**
      * The variant of the button.
-     * Options are: `"primary"`, `"secondary", `"icon", `"text"`.
+     * Options are: `"primary"`, `"secondary", `"tertiary", `"ghost"`, `"destructive"`.
      * Default is: `"primary"`.
      */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive';
     render(): any;
 }

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

@@ -1,11 +1,26 @@
 export declare class CpslHero {
+    /**
+     * The height of the container.
+     * Default is: 180.
+     */
+    height?: number;
+    /**
+     * Hides the fade out components
+     * Default is: `false`.
+     */
+    hideFadeOut?: boolean;
     /**
      * The variant of the button.
-     * Options are: `"default"`, `"loading", `"success".
-     * Default is: `"default"`.
+     * Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved", `"failed".
+     * Default is: `"connection"`.
      */
-    variant?: 'connection' | 'pending' | 'approved' | 'failed';
+    variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed';
     title: string;
     subtitle?: string;
+    /**
+     * Whether to use the Capsule custom theming or use the provided theme
+     * Default is: `false`.
+     */
+    withDefaultTheme?: boolean;
     render(): any;
 }

package/dist/types/components/cpsl-icon-group/cpsl-icon-group.d.ts

@@ -0,0 +1,20 @@
+import { IconType } from '../../interface';
+export declare class CpslIconGroup {
+    el: HTMLCpslIconGroupElement;
+    isHovered: boolean;
+    /**
+     * The direction the icons should expand from
+     */
+    expandFrom: 'left' | 'right';
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled: boolean;
+    /**
+     * The name of the icons to display.
+     */
+    icons: (IconType | string)[];
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { AutocompleteTypes, IconType, TextFieldTypes } from '../../interface';
 import { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
+import InputMask from 'imask/esm/controls/input';
+import 'imask/esm/masked/pattern';
 export declare class CpslInput {
     private nativeInput?;
     el: HTMLCpslInputElement;
@@ -10,6 +12,7 @@ export declare class CpslInput {
      */
     private focusedValue?;
     hasFocus: boolean;
+    maskedInput?: InputMask;
     /**
      * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
      * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -37,6 +40,10 @@ export declare class CpslInput {
      * If `true`, the user cannot interact with the input.
      */
     disabled: boolean;
+    /**
+     * If `true`, the input primary color will use the contrast value, not the primary text value.
+     */
+    contrastText: boolean;
     /**
      * A hint to the browser for which enter key to display.
      * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
@@ -47,6 +54,10 @@ export declare class CpslInput {
      * Error text to show below the input. If this is provided the input will enter an error state.
      */
     errorText?: string;
+    /**
+     * Mask string to apply to the input.
+     */
+    mask?: string;
     /**
      * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
      */
@@ -167,9 +178,8 @@ export declare class CpslInput {
      */
     cpslPaste: EventEmitter<ClipboardEvent>;
     handleDisable(): void;
-    /**
-     * Update the native input element when the value changes
-     */
+    handleSetupMask(): void;
+    handleValueChange(): void;
     componentDidLoad(): void;
     private disableSlots;
     private enableSlots;

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

@@ -65,11 +65,11 @@ export declare class CpslPopover {
     /**
      * Emitted when the popover opens.
      */
-    cpslOpen: EventEmitter;
+    cpslOpen: EventEmitter<void>;
     /**
      * Emitted when the popover closes.
      */
-    cpslClose: EventEmitter;
+    cpslClose: EventEmitter<void>;
     /**
      * Call to close the popover manually.
      */

package/dist/types/components/cpsl-qr-code/cpsl-qr-code.d.ts

@@ -14,5 +14,6 @@ export declare class CpslQrCode {
      */
     size?: number;
     componentDidLoad(): void;
+    private get imgEl();
     render(): any;
 }

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

@@ -3,10 +3,19 @@ export declare class CpslSelect {
     el: HTMLCpslSelectElement;
     private popoverEl;
     private inputId;
-    anchorEl: HTMLDivElement;
+    anchorEl: HTMLElement;
     hasFocus: boolean;
     popoverOpen: boolean;
     hasSelectedItem: boolean;
+    /**
+     * ID of element to anchor popover to.
+     */
+    anchorElId?: string;
+    /**
+     * If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.
+     * Default is `false`
+     */
+    autoWidth?: boolean;
     /**
      * If `true`, the user cannot interact with the input.
      */
@@ -55,6 +64,14 @@ export declare class CpslSelect {
      * If `true`, the label will display an "optional" tag.
      */
     showOptionalLabel: boolean;
+    /**
+     * If `true`, the dropdown will contain a search field.
+     */
+    showSearch: boolean;
+    /**
+     * Placeholder for the search field.
+     */
+    searchPlaceholder?: string;
     /**
      * Emitted when the input loses focus.
      */
@@ -67,6 +84,10 @@ export declare class CpslSelect {
      * Emitted when the value changes.
      */
     cpslSelectValueChange: EventEmitter<string>;
+    /**
+     * Emitted when the search value changes.
+     */
+    cpslSearchChange: EventEmitter<string>;
     onValueChange(): void;
     handleValueChange(): void;
     selectItemClickHandler(event: CustomEvent<string>): void;

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

@@ -4,7 +4,7 @@ export declare class CpslText {
      * Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error".
      * Default is: `"primary"`.
      */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error';
+    color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
     /**
      * The variant of text.
      * Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL".