@getpara/core-components 0.1.0

package/dist/types/components.d.ts

@@ -0,0 +1,2651 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { AutocompleteTypes, IconType, TextFieldTypes } from "./interface.js";
+import { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface.js";
+import { DropdownInputEventDetail } from "./components/cpsl-dropdown/dropdown-interface.js";
+import { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface.js";
+import { TabClickEventDetail, TabSizeChangeEventDetail } from "./components/cpsl-tab/tab-interface.js";
+import { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface.js";
+export { AutocompleteTypes, IconType, TextFieldTypes } from "./interface.js";
+export { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface.js";
+export { DropdownInputEventDetail } from "./components/cpsl-dropdown/dropdown-interface.js";
+export { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface.js";
+export { TabClickEventDetail, TabSizeChangeEventDetail } from "./components/cpsl-tab/tab-interface.js";
+export { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface.js";
+export namespace Components {
+    interface CpslAlert {
+        /**
+          * Whether to show the alert with a filled background based on the variant
+         */
+        "filled"?: boolean;
+        /**
+          * The name of the icon to show.
+         */
+        "icon"?: IconType;
+        /**
+          * Hides the icon.
+         */
+        "noIcon"?: boolean;
+        /**
+          * The variant of alert. Options are: `"error"` | `"warning"` | `"success"` | `"custom"` Default is: `"error"`.
+         */
+        "variant"?: 'error' | 'warning' | 'success' | 'custom';
+    }
+    interface CpslAppBar {
+        /**
+          * Height of the app bar.
+         */
+        "height": number;
+        /**
+          * The position of the drawer. Default is `fixed`.
+         */
+        "position"?: 'fixed' | 'static';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslAuthModal {
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open": boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslAvatar {
+        /**
+          * The alternate text for the avatar image.
+         */
+        "alt"?: string;
+        /**
+          * The CSS width and height of the icon.
+         */
+        "size"?: string;
+        /**
+          * The source of the avatar image.
+         */
+        "src": string;
+        /**
+          * The variant of the avatar. Options are: `"round"`, `"square". Default is: `"square"`.
+         */
+        "variant"?: 'round' | 'square';
+    }
+    interface CpslButton {
+        /**
+          * The tag for the button. Options are: `"button"`, `"a". Default is: `"button"`.
+         */
+        "as"?: 'button' | 'a';
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the button takes the full width of it's container. Default is: false.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * href to use when using a link.
+         */
+        "href"?: string;
+        /**
+          * The size of the button. Options are: `"small"`, `"medium". Default is: `"medium"`.
+         */
+        "size"?: 'xSmall' | 'small' | 'medium';
+        /**
+          * target to use when using a link.
+         */
+        "target"?: string;
+        /**
+          * The type of the button.
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * The variant of the button. Options are: `"primary"`, `"secondary", `"tertiary", `"ghost"`, `"destructive"`. Default is: `"primary"`.
+         */
+        "variant"?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive';
+    }
+    interface CpslButtonGroup {
+        /**
+          * The id of the selected button.
+         */
+        "selectedId"?: string;
+    }
+    interface CpslCard {
+    }
+    interface CpslCheckbox {
+        /**
+          * Whether or not the checkbox is checked.
+         */
+        "checked": boolean;
+    }
+    interface CpslCodeInput {
+        /**
+          * Value of the code.
+         */
+        "code": string;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * Length of the code.
+         */
+        "length": number;
+        /**
+          * Type of characters to accept in the code. Defaults to number.
+         */
+        "type"?: 'number' | 'string';
+    }
+    interface CpslCol {
+        /**
+          * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offset"?: string;
+        /**
+          * The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetLg"?: string;
+        /**
+          * The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetMd"?: string;
+        /**
+          * The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetSm"?: string;
+        /**
+          * The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetXl"?: string;
+        /**
+          * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetXs"?: string;
+        /**
+          * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pull"?: string;
+        /**
+          * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullLg"?: string;
+        /**
+          * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullMd"?: string;
+        /**
+          * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullSm"?: string;
+        /**
+          * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullXl"?: string;
+        /**
+          * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullXs"?: string;
+        /**
+          * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+         */
+        "push"?: string;
+        /**
+          * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushLg"?: string;
+        /**
+          * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushMd"?: string;
+        /**
+          * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushSm"?: string;
+        /**
+          * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushXl"?: string;
+        /**
+          * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushXs"?: string;
+        /**
+          * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "size"?: string;
+        /**
+          * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeLg"?: string;
+        /**
+          * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeMd"?: string;
+        /**
+          * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeSm"?: string;
+        /**
+          * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeXl"?: string;
+        /**
+          * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeXs"?: string;
+    }
+    interface CpslDivider {
+    }
+    interface CpslDrawer {
+        /**
+          * Side from which the drawer will enter from.
+         */
+        "anchor": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Starting anchor position.
+         */
+        "anchorPosition"?: number;
+        /**
+          * Hides the overlay for temporary drawers.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Whether the drawer is open or not.
+         */
+        "open": boolean;
+        /**
+          * Size (height or width) of the drawer.
+         */
+        "size": number | 'auto';
+        /**
+          * Duration in seconds of the open/close animation. Default is 0.15.
+         */
+        "transitionDuration"?: number;
+        /**
+          * Transition timing function to use. Default is ease-in-out.
+         */
+        "transitionFunction"?: string;
+        /**
+          * The variant of the drawer. `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation. Default is `temporary`.
+         */
+        "variant"?: 'temporary' | 'permanent';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslDropdown {
+        /**
+          * Whether or not to include search capability
+         */
+        "hasCpslSearch": boolean;
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items": Array<DropdownInputEventDetail>;
+        /**
+          * The selected item in the dropdown
+         */
+        "selectedItem"?: DropdownInputEventDetail | null;
+        /**
+          * Width of the dropdown
+         */
+        "width": string;
+    }
+    interface CpslFileUpload {
+        /**
+          * If the input is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Filename for the external source of the selected file.
+         */
+        "externalFilename"?: string;
+        /**
+          * External source for the selected file.
+         */
+        "externalSrc"?: string;
+        /**
+          * Valid file types.
+         */
+        "fileTypes"?: string[];
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel": boolean;
+        /**
+          * Function to trigger file upload to server. Returns: boolean indicating success or failure.
+         */
+        "uploadFile"?: (file: File) => Promise<boolean>;
+    }
+    interface CpslGrid {
+        /**
+          * If `true`, the grid will have a fixed width based on the screen size.
+         */
+        "fixed": boolean;
+    }
+    interface CpslHero {
+        /**
+          * The height of the container. Default is: 180.
+         */
+        "height"?: number;
+        /**
+          * Hides the fade out components Default is: `false`.
+         */
+        "hideFadeOut"?: boolean;
+        "subtitle"?: string;
+        "title": string;
+        /**
+          * The variant of the button. Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved",`"add", `"failed". Default is: `"connection"`.
+         */
+        "variant"?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed';
+        /**
+          * Whether to use the Para custom theming or use the provided theme Default is: `false`.
+         */
+        "withDefaultTheme"?: boolean;
+    }
+    interface CpslIcon {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The CSS size of the icon.
+         */
+        "size"?: string;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+    interface CpslIconGroup {
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * The direction the icons should expand from
+         */
+        "expandFrom": 'left' | 'right';
+        /**
+          * The name of the icons to display.
+         */
+        "icons": (IconType | string)[];
+    }
+    interface CpslIdenticon {
+        "hash"?: string | undefined;
+        /**
+          * The CSS width and height of the identicon. Default is: 40px.
+         */
+        "size": string;
+        "variant": 'default' | 'avatar';
+    }
+    interface CpslInfoBox {
+    }
+    interface CpslInput {
+        /**
+          * The tag for the input. Options are: `"input"`, `"textarea". Default is: `"input"`.
+         */
+        "as"?: 'input' | 'textarea';
+        /**
+          * 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"`.
+         */
+        "autocapitalize": string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": AutocompleteTypes;
+        /**
+          * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        "autocorrect": 'on' | 'off';
+        /**
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load.
+         */
+        "autofocus": boolean;
+        /**
+          * If `true`, the input's entire contents will be selected on focus.
+         */
+        "autoselect": boolean;
+        /**
+          * If `true`, the input primary color will use the contrast value, not the primary text value.
+         */
+        "contrastText": boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
+         */
+        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * Whether the input is for a phone number.
+         */
+        "isPhone"?: boolean;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Mask string to apply to the input.
+         */
+        "mask"?: string;
+        /**
+          * The maximum value, which must not be less than its minimum (min attribute) value.
+         */
+        "max"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value, which must not be greater than its maximum (max attribute) value.
+         */
+        "min"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Whether to disable auto disabling of the slotted components.
+         */
+        "noAutoDisable": boolean;
+        /**
+          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
+         */
+        "pattern"?: string;
+        /**
+          * Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Number of rows for the textarea
+         */
+        "rows": number;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel": boolean;
+        /**
+          * If `true`, the element will have its spelling and grammar checked.
+         */
+        "spellcheck": boolean;
+        /**
+          * The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIcon"?: IconType;
+        /**
+          * The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIconSrc"?: string;
+        /**
+          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
+         */
+        "step"?: string;
+        /**
+          * The type of control to display. The default type is `text`.
+         */
+        "type": TextFieldTypes;
+        /**
+          * The value of the controlled input.
+         */
+        "value"?: string;
+    }
+    interface CpslModalV2 {
+        /**
+          * Whether or not to show the modal with a box shadow.
+         */
+        "elevated": boolean;
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "noOverlay": boolean;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open": boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    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.
+         */
+        "subRoutes"?: { label: string; value: string }[];
+    }
+    interface CpslNavButtonGroup {
+    }
+    interface CpslOverlay {
+        /**
+          * Duration in seconds of the fade out animation. Default is .5.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the fade out animation. Default is .5.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "open": boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslPagination {
+        /**
+          * The initial page to select. Default is 0.
+         */
+        "initialPage"?: number;
+        /**
+          * The total number of pages.
+         */
+        "totalPages": number;
+        /**
+          * The number of pages visible to select. Default is 5. Min is 5.
+         */
+        "visiblePages"?: number;
+    }
+    interface CpslPill {
+        /**
+          * Text of the pill.
+         */
+        "text": string;
+    }
+    interface CpslPopover {
+        /**
+          * ID for the element that the popover anchors to.
+         */
+        "anchorEl"?: HTMLElement;
+        /**
+          * Vertical anchor origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "anchorOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical anchor origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "anchorOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * If `true` the container will use the width of the content, else it will be set to the width of the trigger. Default is `true`
+         */
+        "autoWidth"?: boolean;
+        /**
+          * Call to close the popover manually.
+         */
+        "closePopover": () => Promise<void>;
+        /**
+          * Whether or not to disable to popover.
+         */
+        "disabled": boolean;
+        /**
+          * Used internally to prevent select from blurring unintentionally.
+         */
+        "preventBlur": boolean;
+        /**
+          * Vertical transformation origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "transformOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical transformation origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "transformOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * ID for the element that triggers the popover to open.
+         */
+        "trigger": string;
+        /**
+          * Which trigger causes the popover to open. Options are: `"click"`, `"hover"`. Default is: `"click"`.
+         */
+        "triggerAction": 'click' | 'hover';
+        /**
+          * Padding from edge of window for the popover container.
+         */
+        "windowPadding"?: number;
+    }
+    interface CpslProgressIndicator {
+        /**
+          * Current zero based step.
+         */
+        "step": number;
+        /**
+          * Total number of steps.
+         */
+        "totalSteps": number;
+    }
+    interface CpslQrCode {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * Source for the center image of the QR code.
+         */
+        "imageSrc"?: string;
+        /**
+          * Size of the QR code in pixels. Default is 250.
+         */
+        "size"?: number;
+        /**
+          * URL for the QR code to link to.
+         */
+        "url": string;
+    }
+    interface CpslRadio {
+        /**
+          * Whether or not the radio is checked.
+         */
+        "checked": boolean;
+    }
+    interface CpslRow {
+    }
+    interface CpslSelect {
+        /**
+          * 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.
+         */
+        "disabled": boolean;
+        /**
+          * Set the max height of the dropdown.
+         */
+        "dropdownMaxHeight"?: number;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Format value for display when selected.
+         */
+        "formatValue"?: (value: string | string[]) => string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * The name of the icon to use for the end icon. Default: `chevronUp`
+         */
+        "icon"?: IconType;
+        /**
+          * ID of the element, must be unique for the popover trigger.
+         */
+        "id": string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * If `true`, the user can select more than one value.
+         */
+        "multiple"?: boolean;
+        /**
+          * Whether or not to show the rotation animation for the end icon.
+         */
+        "noIconAnimation"?: boolean;
+        /**
+          * Placeholder to display if `selectedValue` is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Placeholder for the search field.
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * The color of the selected item or placeholder text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "selectedItemColor"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+        /**
+          * The variant of the selected item or placeholder text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
+         */
+        "selectedItemVariant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of the selected item or placeholder text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "selectedItemWeight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
+        /**
+          * Value of the selected item.
+         */
+        "selectedValue"?: string | string[];
+        /**
+          * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.
+         */
+        "showFormattedSelectedItem"?: boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel": boolean;
+        /**
+          * If `true`, the dropdown will contain a search field.
+         */
+        "showSearch": boolean;
+    }
+    interface CpslSelectItem {
+        /**
+          * Whether the item is selected or not.
+         */
+        "selected"?: boolean;
+        /**
+          * Value of the item.
+         */
+        "value": string;
+    }
+    interface CpslSlideButton {
+        /**
+          * Whether or not the component is disabled. If true, the component will display the `startText`.
+         */
+        "disabled": boolean;
+        /**
+          * The name of the ending icon to show.
+         */
+        "endIcon": IconType;
+        /**
+          * The ending text.
+         */
+        "endText": string;
+        /**
+          * The name of the starting icon to show.
+         */
+        "startIcon": IconType;
+        /**
+          * The starting text.
+         */
+        "startText": string;
+    }
+    interface CpslSpinner {
+        /**
+          * Width of the spinner arc in pixels. Default is 6.5.
+         */
+        "barWidth"?: number;
+        /**
+          * Size of the spinner in pixels. Default is 50.
+         */
+        "size"?: number;
+        /**
+          * Rotation speed of the spinner in seconds. Default is 1.
+         */
+        "speed"?: number;
+        /**
+          * Variant of the spinner Default is 'default'.
+         */
+        "variant"?: 'default' | 'inactive' | 'error';
+    }
+    interface CpslSwitch {
+        /**
+          * Whether or not the switch is checked.
+         */
+        "checked": boolean;
+    }
+    interface CpslTab {
+        /**
+          * The selected tab component
+         */
+        "selected": boolean;
+        /**
+          * A tab id must be provided for each `cpsl-tab`. It's used internally to reference the selected tab or by the router to switch between them.
+         */
+        "tab": string;
+    }
+    interface CpslTable {
+    }
+    interface CpslTabs {
+        /**
+          * Whether or not the tabs take the full width of their container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The selected tab component
+         */
+        "selectedTab"?: string;
+    }
+    interface CpslText {
+        /**
+          * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "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". Default is: `"bodyM"`.
+         */
+        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
+    }
+    interface CpslTileButton {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+}
+export interface CpslAuthModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslAuthModalElement;
+}
+export interface CpslCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslCheckboxElement;
+}
+export interface CpslCodeInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslCodeInputElement;
+}
+export interface CpslDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslDropdownElement;
+}
+export interface CpslFileUploadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslFileUploadElement;
+}
+export interface CpslInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslInputElement;
+}
+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;
+}
+export interface CpslPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslPopoverElement;
+}
+export interface CpslRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslRadioElement;
+}
+export interface CpslSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSelectElement;
+}
+export interface CpslSelectItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSelectItemElement;
+}
+export interface CpslSlideButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSlideButtonElement;
+}
+export interface CpslSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSwitchElement;
+}
+export interface CpslTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslTabElement;
+}
+export interface CpslTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslTabsElement;
+}
+declare global {
+    interface HTMLCpslAlertElement extends Components.CpslAlert, HTMLStencilElement {
+    }
+    var HTMLCpslAlertElement: {
+        prototype: HTMLCpslAlertElement;
+        new (): HTMLCpslAlertElement;
+    };
+    interface HTMLCpslAppBarElement extends Components.CpslAppBar, HTMLStencilElement {
+    }
+    var HTMLCpslAppBarElement: {
+        prototype: HTMLCpslAppBarElement;
+        new (): HTMLCpslAppBarElement;
+    };
+    interface HTMLCpslAuthModalElementEventMap {
+        "cpslModalEntering": null;
+        "cpslModalEntered": null;
+        "cpslModalExiting": null;
+        "cpslModalExited": null;
+        "cpslModalRequestClose": null;
+    }
+    interface HTMLCpslAuthModalElement extends Components.CpslAuthModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslAuthModalElementEventMap>(type: K, listener: (this: HTMLCpslAuthModalElement, ev: CpslAuthModalCustomEvent<HTMLCpslAuthModalElementEventMap[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 HTMLCpslAuthModalElementEventMap>(type: K, listener: (this: HTMLCpslAuthModalElement, ev: CpslAuthModalCustomEvent<HTMLCpslAuthModalElementEventMap[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 HTMLCpslAuthModalElement: {
+        prototype: HTMLCpslAuthModalElement;
+        new (): HTMLCpslAuthModalElement;
+    };
+    interface HTMLCpslAvatarElement extends Components.CpslAvatar, HTMLStencilElement {
+    }
+    var HTMLCpslAvatarElement: {
+        prototype: HTMLCpslAvatarElement;
+        new (): HTMLCpslAvatarElement;
+    };
+    interface HTMLCpslButtonElement extends Components.CpslButton, HTMLStencilElement {
+    }
+    var HTMLCpslButtonElement: {
+        prototype: HTMLCpslButtonElement;
+        new (): HTMLCpslButtonElement;
+    };
+    interface HTMLCpslButtonGroupElement extends Components.CpslButtonGroup, HTMLStencilElement {
+    }
+    var HTMLCpslButtonGroupElement: {
+        prototype: HTMLCpslButtonGroupElement;
+        new (): HTMLCpslButtonGroupElement;
+    };
+    interface HTMLCpslCardElement extends Components.CpslCard, HTMLStencilElement {
+    }
+    var HTMLCpslCardElement: {
+        prototype: HTMLCpslCardElement;
+        new (): HTMLCpslCardElement;
+    };
+    interface HTMLCpslCheckboxElementEventMap {
+        "cpslCheckboxChanged": boolean;
+    }
+    interface HTMLCpslCheckboxElement extends Components.CpslCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslCheckboxElementEventMap>(type: K, listener: (this: HTMLCpslCheckboxElement, ev: CpslCheckboxCustomEvent<HTMLCpslCheckboxElementEventMap[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 HTMLCpslCheckboxElementEventMap>(type: K, listener: (this: HTMLCpslCheckboxElement, ev: CpslCheckboxCustomEvent<HTMLCpslCheckboxElementEventMap[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 HTMLCpslCheckboxElement: {
+        prototype: HTMLCpslCheckboxElement;
+        new (): HTMLCpslCheckboxElement;
+    };
+    interface HTMLCpslCodeInputElementEventMap {
+        "cpslInput": CodeChangeEventDetail;
+    }
+    interface HTMLCpslCodeInputElement extends Components.CpslCodeInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslCodeInputElementEventMap>(type: K, listener: (this: HTMLCpslCodeInputElement, ev: CpslCodeInputCustomEvent<HTMLCpslCodeInputElementEventMap[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 HTMLCpslCodeInputElementEventMap>(type: K, listener: (this: HTMLCpslCodeInputElement, ev: CpslCodeInputCustomEvent<HTMLCpslCodeInputElementEventMap[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 HTMLCpslCodeInputElement: {
+        prototype: HTMLCpslCodeInputElement;
+        new (): HTMLCpslCodeInputElement;
+    };
+    interface HTMLCpslColElement extends Components.CpslCol, HTMLStencilElement {
+    }
+    var HTMLCpslColElement: {
+        prototype: HTMLCpslColElement;
+        new (): HTMLCpslColElement;
+    };
+    interface HTMLCpslDividerElement extends Components.CpslDivider, HTMLStencilElement {
+    }
+    var HTMLCpslDividerElement: {
+        prototype: HTMLCpslDividerElement;
+        new (): HTMLCpslDividerElement;
+    };
+    interface HTMLCpslDrawerElement extends Components.CpslDrawer, HTMLStencilElement {
+    }
+    var HTMLCpslDrawerElement: {
+        prototype: HTMLCpslDrawerElement;
+        new (): HTMLCpslDrawerElement;
+    };
+    interface HTMLCpslDropdownElementEventMap {
+        "selectedItemChange": DropdownInputEventDetail;
+    }
+    interface HTMLCpslDropdownElement extends Components.CpslDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslDropdownElementEventMap>(type: K, listener: (this: HTMLCpslDropdownElement, ev: CpslDropdownCustomEvent<HTMLCpslDropdownElementEventMap[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 HTMLCpslDropdownElementEventMap>(type: K, listener: (this: HTMLCpslDropdownElement, ev: CpslDropdownCustomEvent<HTMLCpslDropdownElementEventMap[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 HTMLCpslDropdownElement: {
+        prototype: HTMLCpslDropdownElement;
+        new (): HTMLCpslDropdownElement;
+    };
+    interface HTMLCpslFileUploadElementEventMap {
+        "cpslOnDrop": DragEvent;
+        "cpslOnDragEnter": DragEvent;
+        "cpslOnDragLeave": DragEvent;
+        "cpslFileChange": File;
+        "cpslFileRemoved": void;
+    }
+    interface HTMLCpslFileUploadElement extends Components.CpslFileUpload, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslFileUploadElementEventMap>(type: K, listener: (this: HTMLCpslFileUploadElement, ev: CpslFileUploadCustomEvent<HTMLCpslFileUploadElementEventMap[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 HTMLCpslFileUploadElementEventMap>(type: K, listener: (this: HTMLCpslFileUploadElement, ev: CpslFileUploadCustomEvent<HTMLCpslFileUploadElementEventMap[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 HTMLCpslFileUploadElement: {
+        prototype: HTMLCpslFileUploadElement;
+        new (): HTMLCpslFileUploadElement;
+    };
+    interface HTMLCpslGridElement extends Components.CpslGrid, HTMLStencilElement {
+    }
+    var HTMLCpslGridElement: {
+        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 HTMLCpslIconGroupElement extends Components.CpslIconGroup, HTMLStencilElement {
+    }
+    var HTMLCpslIconGroupElement: {
+        prototype: HTMLCpslIconGroupElement;
+        new (): HTMLCpslIconGroupElement;
+    };
+    interface HTMLCpslIdenticonElement extends Components.CpslIdenticon, HTMLStencilElement {
+    }
+    var HTMLCpslIdenticonElement: {
+        prototype: HTMLCpslIdenticonElement;
+        new (): HTMLCpslIdenticonElement;
+    };
+    interface HTMLCpslInfoBoxElement extends Components.CpslInfoBox, HTMLStencilElement {
+    }
+    var HTMLCpslInfoBoxElement: {
+        prototype: HTMLCpslInfoBoxElement;
+        new (): HTMLCpslInfoBoxElement;
+    };
+    interface HTMLCpslInputElementEventMap {
+        "cpslInput": InputInputEventDetail;
+        "cpslChange": InputChangeEventDetail;
+        "cpslBlur": FocusEvent;
+        "cpslFocus": FocusEvent;
+        "cpslPaste": ClipboardEvent;
+    }
+    interface HTMLCpslInputElement extends Components.CpslInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslInputElementEventMap>(type: K, listener: (this: HTMLCpslInputElement, ev: CpslInputCustomEvent<HTMLCpslInputElementEventMap[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 HTMLCpslInputElementEventMap>(type: K, listener: (this: HTMLCpslInputElement, ev: CpslInputCustomEvent<HTMLCpslInputElementEventMap[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 HTMLCpslInputElement: {
+        prototype: HTMLCpslInputElement;
+        new (): HTMLCpslInputElement;
+    };
+    interface HTMLCpslModalV2ElementEventMap {
+        "cpslModalEntering": null;
+        "cpslModalEntered": null;
+        "cpslModalExiting": null;
+        "cpslModalExited": null;
+    }
+    interface HTMLCpslModalV2Element extends Components.CpslModalV2, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslModalV2ElementEventMap>(type: K, listener: (this: HTMLCpslModalV2Element, ev: CpslModalV2CustomEvent<HTMLCpslModalV2ElementEventMap[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 HTMLCpslModalV2ElementEventMap>(type: K, listener: (this: HTMLCpslModalV2Element, ev: CpslModalV2CustomEvent<HTMLCpslModalV2ElementEventMap[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 HTMLCpslModalV2Element: {
+        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: {
+        prototype: HTMLCpslNavButtonGroupElement;
+        new (): HTMLCpslNavButtonGroupElement;
+    };
+    interface HTMLCpslOverlayElement extends Components.CpslOverlay, HTMLStencilElement {
+    }
+    var HTMLCpslOverlayElement: {
+        prototype: HTMLCpslOverlayElement;
+        new (): HTMLCpslOverlayElement;
+    };
+    interface HTMLCpslPaginationElementEventMap {
+        "cpslPaginationChanged": number;
+    }
+    interface HTMLCpslPaginationElement extends Components.CpslPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslPaginationElementEventMap>(type: K, listener: (this: HTMLCpslPaginationElement, ev: CpslPaginationCustomEvent<HTMLCpslPaginationElementEventMap[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 HTMLCpslPaginationElementEventMap>(type: K, listener: (this: HTMLCpslPaginationElement, ev: CpslPaginationCustomEvent<HTMLCpslPaginationElementEventMap[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 HTMLCpslPaginationElement: {
+        prototype: HTMLCpslPaginationElement;
+        new (): HTMLCpslPaginationElement;
+    };
+    interface HTMLCpslPillElement extends Components.CpslPill, HTMLStencilElement {
+    }
+    var HTMLCpslPillElement: {
+        prototype: HTMLCpslPillElement;
+        new (): HTMLCpslPillElement;
+    };
+    interface HTMLCpslPopoverElementEventMap {
+        "cpslOpen": void;
+        "cpslClose": void;
+    }
+    interface HTMLCpslPopoverElement extends Components.CpslPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslPopoverElementEventMap>(type: K, listener: (this: HTMLCpslPopoverElement, ev: CpslPopoverCustomEvent<HTMLCpslPopoverElementEventMap[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 HTMLCpslPopoverElementEventMap>(type: K, listener: (this: HTMLCpslPopoverElement, ev: CpslPopoverCustomEvent<HTMLCpslPopoverElementEventMap[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 HTMLCpslPopoverElement: {
+        prototype: HTMLCpslPopoverElement;
+        new (): HTMLCpslPopoverElement;
+    };
+    interface HTMLCpslProgressIndicatorElement extends Components.CpslProgressIndicator, HTMLStencilElement {
+    }
+    var HTMLCpslProgressIndicatorElement: {
+        prototype: HTMLCpslProgressIndicatorElement;
+        new (): HTMLCpslProgressIndicatorElement;
+    };
+    interface HTMLCpslQrCodeElement extends Components.CpslQrCode, HTMLStencilElement {
+    }
+    var HTMLCpslQrCodeElement: {
+        prototype: HTMLCpslQrCodeElement;
+        new (): HTMLCpslQrCodeElement;
+    };
+    interface HTMLCpslRadioElementEventMap {
+        "cpslRadioChanged": boolean;
+    }
+    interface HTMLCpslRadioElement extends Components.CpslRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslRadioElementEventMap>(type: K, listener: (this: HTMLCpslRadioElement, ev: CpslRadioCustomEvent<HTMLCpslRadioElementEventMap[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 HTMLCpslRadioElementEventMap>(type: K, listener: (this: HTMLCpslRadioElement, ev: CpslRadioCustomEvent<HTMLCpslRadioElementEventMap[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 HTMLCpslRadioElement: {
+        prototype: HTMLCpslRadioElement;
+        new (): HTMLCpslRadioElement;
+    };
+    interface HTMLCpslRowElement extends Components.CpslRow, HTMLStencilElement {
+    }
+    var HTMLCpslRowElement: {
+        prototype: HTMLCpslRowElement;
+        new (): HTMLCpslRowElement;
+    };
+    interface HTMLCpslSelectElementEventMap {
+        "cpslBlur": FocusEvent;
+        "cpslFocus": FocusEvent;
+        "cpslSelectValueChange": string;
+        "cpslSearchChange": string;
+    }
+    interface HTMLCpslSelectElement extends Components.CpslSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSelectElementEventMap>(type: K, listener: (this: HTMLCpslSelectElement, ev: CpslSelectCustomEvent<HTMLCpslSelectElementEventMap[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 HTMLCpslSelectElementEventMap>(type: K, listener: (this: HTMLCpslSelectElement, ev: CpslSelectCustomEvent<HTMLCpslSelectElementEventMap[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 HTMLCpslSelectElement: {
+        prototype: HTMLCpslSelectElement;
+        new (): HTMLCpslSelectElement;
+    };
+    interface HTMLCpslSelectItemElementEventMap {
+        "cpslSelectItemClick": string;
+    }
+    interface HTMLCpslSelectItemElement extends Components.CpslSelectItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSelectItemElementEventMap>(type: K, listener: (this: HTMLCpslSelectItemElement, ev: CpslSelectItemCustomEvent<HTMLCpslSelectItemElementEventMap[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 HTMLCpslSelectItemElementEventMap>(type: K, listener: (this: HTMLCpslSelectItemElement, ev: CpslSelectItemCustomEvent<HTMLCpslSelectItemElementEventMap[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 HTMLCpslSelectItemElement: {
+        prototype: HTMLCpslSelectItemElement;
+        new (): HTMLCpslSelectItemElement;
+    };
+    interface HTMLCpslSlideButtonElementEventMap {
+        "cpslComplete": boolean;
+    }
+    interface HTMLCpslSlideButtonElement extends Components.CpslSlideButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSlideButtonElementEventMap>(type: K, listener: (this: HTMLCpslSlideButtonElement, ev: CpslSlideButtonCustomEvent<HTMLCpslSlideButtonElementEventMap[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 HTMLCpslSlideButtonElementEventMap>(type: K, listener: (this: HTMLCpslSlideButtonElement, ev: CpslSlideButtonCustomEvent<HTMLCpslSlideButtonElementEventMap[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 HTMLCpslSlideButtonElement: {
+        prototype: HTMLCpslSlideButtonElement;
+        new (): HTMLCpslSlideButtonElement;
+    };
+    interface HTMLCpslSpinnerElement extends Components.CpslSpinner, HTMLStencilElement {
+    }
+    var HTMLCpslSpinnerElement: {
+        prototype: HTMLCpslSpinnerElement;
+        new (): HTMLCpslSpinnerElement;
+    };
+    interface HTMLCpslSwitchElementEventMap {
+        "cpslSwitchChanged": boolean;
+    }
+    interface HTMLCpslSwitchElement extends Components.CpslSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSwitchElementEventMap>(type: K, listener: (this: HTMLCpslSwitchElement, ev: CpslSwitchCustomEvent<HTMLCpslSwitchElementEventMap[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 HTMLCpslSwitchElementEventMap>(type: K, listener: (this: HTMLCpslSwitchElement, ev: CpslSwitchCustomEvent<HTMLCpslSwitchElementEventMap[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 HTMLCpslSwitchElement: {
+        prototype: HTMLCpslSwitchElement;
+        new (): HTMLCpslSwitchElement;
+    };
+    interface HTMLCpslTabElementEventMap {
+        "cpslTabButtonClick": TabClickEventDetail;
+        "cpslTabButtonSizeChange": TabSizeChangeEventDetail;
+    }
+    interface HTMLCpslTabElement extends Components.CpslTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslTabElementEventMap>(type: K, listener: (this: HTMLCpslTabElement, ev: CpslTabCustomEvent<HTMLCpslTabElementEventMap[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 HTMLCpslTabElementEventMap>(type: K, listener: (this: HTMLCpslTabElement, ev: CpslTabCustomEvent<HTMLCpslTabElementEventMap[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 HTMLCpslTabElement: {
+        prototype: HTMLCpslTabElement;
+        new (): HTMLCpslTabElement;
+    };
+    interface HTMLCpslTableElement extends Components.CpslTable, HTMLStencilElement {
+    }
+    var HTMLCpslTableElement: {
+        prototype: HTMLCpslTableElement;
+        new (): HTMLCpslTableElement;
+    };
+    interface HTMLCpslTabsElementEventMap {
+        "cpslTabsChanged": TabsChangedEventDetail;
+        "cpslTabsInit": TabsChangedEventDetail;
+    }
+    interface HTMLCpslTabsElement extends Components.CpslTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslTabsElementEventMap>(type: K, listener: (this: HTMLCpslTabsElement, ev: CpslTabsCustomEvent<HTMLCpslTabsElementEventMap[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 HTMLCpslTabsElementEventMap>(type: K, listener: (this: HTMLCpslTabsElement, ev: CpslTabsCustomEvent<HTMLCpslTabsElementEventMap[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 HTMLCpslTabsElement: {
+        prototype: HTMLCpslTabsElement;
+        new (): HTMLCpslTabsElement;
+    };
+    interface HTMLCpslTextElement extends Components.CpslText, HTMLStencilElement {
+    }
+    var HTMLCpslTextElement: {
+        prototype: HTMLCpslTextElement;
+        new (): HTMLCpslTextElement;
+    };
+    interface HTMLCpslTileButtonElement extends Components.CpslTileButton, HTMLStencilElement {
+    }
+    var HTMLCpslTileButtonElement: {
+        prototype: HTMLCpslTileButtonElement;
+        new (): HTMLCpslTileButtonElement;
+    };
+    interface HTMLElementTagNameMap {
+        "cpsl-alert": HTMLCpslAlertElement;
+        "cpsl-app-bar": HTMLCpslAppBarElement;
+        "cpsl-auth-modal": HTMLCpslAuthModalElement;
+        "cpsl-avatar": HTMLCpslAvatarElement;
+        "cpsl-button": HTMLCpslButtonElement;
+        "cpsl-button-group": HTMLCpslButtonGroupElement;
+        "cpsl-card": HTMLCpslCardElement;
+        "cpsl-checkbox": HTMLCpslCheckboxElement;
+        "cpsl-code-input": HTMLCpslCodeInputElement;
+        "cpsl-col": HTMLCpslColElement;
+        "cpsl-divider": HTMLCpslDividerElement;
+        "cpsl-drawer": HTMLCpslDrawerElement;
+        "cpsl-dropdown": HTMLCpslDropdownElement;
+        "cpsl-file-upload": HTMLCpslFileUploadElement;
+        "cpsl-grid": HTMLCpslGridElement;
+        "cpsl-hero": HTMLCpslHeroElement;
+        "cpsl-icon": HTMLCpslIconElement;
+        "cpsl-icon-group": HTMLCpslIconGroupElement;
+        "cpsl-identicon": HTMLCpslIdenticonElement;
+        "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;
+        "cpsl-pill": HTMLCpslPillElement;
+        "cpsl-popover": HTMLCpslPopoverElement;
+        "cpsl-progress-indicator": HTMLCpslProgressIndicatorElement;
+        "cpsl-qr-code": HTMLCpslQrCodeElement;
+        "cpsl-radio": HTMLCpslRadioElement;
+        "cpsl-row": HTMLCpslRowElement;
+        "cpsl-select": HTMLCpslSelectElement;
+        "cpsl-select-item": HTMLCpslSelectItemElement;
+        "cpsl-slide-button": HTMLCpslSlideButtonElement;
+        "cpsl-spinner": HTMLCpslSpinnerElement;
+        "cpsl-switch": HTMLCpslSwitchElement;
+        "cpsl-tab": HTMLCpslTabElement;
+        "cpsl-table": HTMLCpslTableElement;
+        "cpsl-tabs": HTMLCpslTabsElement;
+        "cpsl-text": HTMLCpslTextElement;
+        "cpsl-tile-button": HTMLCpslTileButtonElement;
+    }
+}
+declare namespace LocalJSX {
+    interface CpslAlert {
+        /**
+          * Whether to show the alert with a filled background based on the variant
+         */
+        "filled"?: boolean;
+        /**
+          * The name of the icon to show.
+         */
+        "icon"?: IconType;
+        /**
+          * Hides the icon.
+         */
+        "noIcon"?: boolean;
+        /**
+          * The variant of alert. Options are: `"error"` | `"warning"` | `"success"` | `"custom"` Default is: `"error"`.
+         */
+        "variant"?: 'error' | 'warning' | 'success' | 'custom';
+    }
+    interface CpslAppBar {
+        /**
+          * Height of the app bar.
+         */
+        "height"?: number;
+        /**
+          * The position of the drawer. Default is `fixed`.
+         */
+        "position"?: 'fixed' | 'static';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslAuthModal {
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Emitted when enter animation finishes.
+         */
+        "onCpslModalEntered"?: (event: CpslAuthModalCustomEvent<null>) => void;
+        /**
+          * Emitted when enter animation starts.
+         */
+        "onCpslModalEntering"?: (event: CpslAuthModalCustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslModalExited"?: (event: CpslAuthModalCustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation starts.
+         */
+        "onCpslModalExiting"?: (event: CpslAuthModalCustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslModalRequestClose"?: (event: CpslAuthModalCustomEvent<null>) => void;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open"?: boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslAvatar {
+        /**
+          * The alternate text for the avatar image.
+         */
+        "alt"?: string;
+        /**
+          * The CSS width and height of the icon.
+         */
+        "size"?: string;
+        /**
+          * The source of the avatar image.
+         */
+        "src"?: string;
+        /**
+          * The variant of the avatar. Options are: `"round"`, `"square". Default is: `"square"`.
+         */
+        "variant"?: 'round' | 'square';
+    }
+    interface CpslButton {
+        /**
+          * The tag for the button. Options are: `"button"`, `"a". Default is: `"button"`.
+         */
+        "as"?: 'button' | 'a';
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the button takes the full width of it's container. Default is: false.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * href to use when using a link.
+         */
+        "href"?: string;
+        /**
+          * The size of the button. Options are: `"small"`, `"medium". Default is: `"medium"`.
+         */
+        "size"?: 'xSmall' | 'small' | 'medium';
+        /**
+          * target to use when using a link.
+         */
+        "target"?: string;
+        /**
+          * The type of the button.
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * The variant of the button. Options are: `"primary"`, `"secondary", `"tertiary", `"ghost"`, `"destructive"`. Default is: `"primary"`.
+         */
+        "variant"?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive';
+    }
+    interface CpslButtonGroup {
+        /**
+          * The id of the selected button.
+         */
+        "selectedId"?: string;
+    }
+    interface CpslCard {
+    }
+    interface CpslCheckbox {
+        /**
+          * Whether or not the checkbox is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Emitted when the checkbox state changes.
+         */
+        "onCpslCheckboxChanged"?: (event: CpslCheckboxCustomEvent<boolean>) => void;
+    }
+    interface CpslCodeInput {
+        /**
+          * Value of the code.
+         */
+        "code"?: string;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * Length of the code.
+         */
+        "length"?: number;
+        /**
+          * The `cpslInput` event is fired each time the user modifies the input's value.
+         */
+        "onCpslInput"?: (event: CpslCodeInputCustomEvent<CodeChangeEventDetail>) => void;
+        /**
+          * Type of characters to accept in the code. Defaults to number.
+         */
+        "type"?: 'number' | 'string';
+    }
+    interface CpslCol {
+        /**
+          * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offset"?: string;
+        /**
+          * The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetLg"?: string;
+        /**
+          * The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetMd"?: string;
+        /**
+          * The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetSm"?: string;
+        /**
+          * The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetXl"?: string;
+        /**
+          * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "offsetXs"?: string;
+        /**
+          * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pull"?: string;
+        /**
+          * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullLg"?: string;
+        /**
+          * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullMd"?: string;
+        /**
+          * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullSm"?: string;
+        /**
+          * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullXl"?: string;
+        /**
+          * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+         */
+        "pullXs"?: string;
+        /**
+          * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+         */
+        "push"?: string;
+        /**
+          * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushLg"?: string;
+        /**
+          * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushMd"?: string;
+        /**
+          * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushSm"?: string;
+        /**
+          * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushXl"?: string;
+        /**
+          * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+         */
+        "pushXs"?: string;
+        /**
+          * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "size"?: string;
+        /**
+          * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeLg"?: string;
+        /**
+          * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeMd"?: string;
+        /**
+          * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeSm"?: string;
+        /**
+          * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeXl"?: string;
+        /**
+          * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
+         */
+        "sizeXs"?: string;
+    }
+    interface CpslDivider {
+    }
+    interface CpslDrawer {
+        /**
+          * Side from which the drawer will enter from.
+         */
+        "anchor"?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Starting anchor position.
+         */
+        "anchorPosition"?: number;
+        /**
+          * Hides the overlay for temporary drawers.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Whether the drawer is open or not.
+         */
+        "open"?: boolean;
+        /**
+          * Size (height or width) of the drawer.
+         */
+        "size"?: number | 'auto';
+        /**
+          * Duration in seconds of the open/close animation. Default is 0.15.
+         */
+        "transitionDuration"?: number;
+        /**
+          * Transition timing function to use. Default is ease-in-out.
+         */
+        "transitionFunction"?: string;
+        /**
+          * The variant of the drawer. `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation. Default is `temporary`.
+         */
+        "variant"?: 'temporary' | 'permanent';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslDropdown {
+        /**
+          * Whether or not to include search capability
+         */
+        "hasCpslSearch"?: boolean;
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items"?: Array<DropdownInputEventDetail>;
+        /**
+          * Event emitted when the selected item changes
+         */
+        "onSelectedItemChange"?: (event: CpslDropdownCustomEvent<DropdownInputEventDetail>) => void;
+        /**
+          * The selected item in the dropdown
+         */
+        "selectedItem"?: DropdownInputEventDetail | null;
+        /**
+          * Width of the dropdown
+         */
+        "width"?: string;
+    }
+    interface CpslFileUpload {
+        /**
+          * If the input is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Filename for the external source of the selected file.
+         */
+        "externalFilename"?: string;
+        /**
+          * External source for the selected file.
+         */
+        "externalSrc"?: string;
+        /**
+          * Valid file types.
+         */
+        "fileTypes"?: string[];
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Emitted when the file changes.
+         */
+        "onCpslFileChange"?: (event: CpslFileUploadCustomEvent<File>) => void;
+        /**
+          * Emitted when the file is removed.
+         */
+        "onCpslFileRemoved"?: (event: CpslFileUploadCustomEvent<void>) => void;
+        /**
+          * Emitted when the file drag enters the input.
+         */
+        "onCpslOnDragEnter"?: (event: CpslFileUploadCustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the file drag leaves the input.
+         */
+        "onCpslOnDragLeave"?: (event: CpslFileUploadCustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the file is dropped in the input.
+         */
+        "onCpslOnDrop"?: (event: CpslFileUploadCustomEvent<DragEvent>) => void;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel"?: boolean;
+        /**
+          * Function to trigger file upload to server. Returns: boolean indicating success or failure.
+         */
+        "uploadFile"?: (file: File) => Promise<boolean>;
+    }
+    interface CpslGrid {
+        /**
+          * If `true`, the grid will have a fixed width based on the screen size.
+         */
+        "fixed"?: boolean;
+    }
+    interface CpslHero {
+        /**
+          * The height of the container. Default is: 180.
+         */
+        "height"?: number;
+        /**
+          * Hides the fade out components Default is: `false`.
+         */
+        "hideFadeOut"?: boolean;
+        "subtitle"?: string;
+        "title"?: string;
+        /**
+          * The variant of the button. Options are: `"customContent"`, `"connection"`, `"externalWalletConnection"`, `"pending", `"approved",`"add", `"failed". Default is: `"connection"`.
+         */
+        "variant"?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed';
+        /**
+          * Whether to use the Para custom theming or use the provided theme Default is: `false`.
+         */
+        "withDefaultTheme"?: boolean;
+    }
+    interface CpslIcon {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The CSS size of the icon.
+         */
+        "size"?: string;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+    interface CpslIconGroup {
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * The direction the icons should expand from
+         */
+        "expandFrom"?: 'left' | 'right';
+        /**
+          * The name of the icons to display.
+         */
+        "icons"?: (IconType | string)[];
+    }
+    interface CpslIdenticon {
+        "hash"?: string | undefined;
+        /**
+          * The CSS width and height of the identicon. Default is: 40px.
+         */
+        "size"?: string;
+        "variant"?: 'default' | 'avatar';
+    }
+    interface CpslInfoBox {
+    }
+    interface CpslInput {
+        /**
+          * The tag for the input. Options are: `"input"`, `"textarea". Default is: `"input"`.
+         */
+        "as"?: 'input' | 'textarea';
+        /**
+          * 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"`.
+         */
+        "autocapitalize"?: string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: AutocompleteTypes;
+        /**
+          * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        "autocorrect"?: 'on' | 'off';
+        /**
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load.
+         */
+        "autofocus"?: boolean;
+        /**
+          * If `true`, the input's entire contents will be selected on focus.
+         */
+        "autoselect"?: boolean;
+        /**
+          * If `true`, the input primary color will use the contrast value, not the primary text value.
+         */
+        "contrastText"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
+         */
+        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * Whether the input is for a phone number.
+         */
+        "isPhone"?: boolean;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Mask string to apply to the input.
+         */
+        "mask"?: string;
+        /**
+          * The maximum value, which must not be less than its minimum (min attribute) value.
+         */
+        "max"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value, which must not be greater than its maximum (max attribute) value.
+         */
+        "min"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Whether to disable auto disabling of the slotted components.
+         */
+        "noAutoDisable"?: boolean;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onCpslBlur"?: (event: CpslInputCustomEvent<FocusEvent>) => void;
+        /**
+          * The `cpslChange` event is fired when the user modifies the input's value. Unlike the `cpslInput` event, the `cpslChange` event is only fired when changes are committed, not as the user types.  Depending on the way the users interacts with the element, the `cpslChange` event fires at a different moment: - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
+         */
+        "onCpslChange"?: (event: CpslInputCustomEvent<InputChangeEventDetail>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onCpslFocus"?: (event: CpslInputCustomEvent<FocusEvent>) => void;
+        /**
+          * The `cpslInput` event is fired each time the user modifies the input's value. Unlike the `cpslChange` event, the `cpslInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+         */
+        "onCpslInput"?: (event: CpslInputCustomEvent<InputInputEventDetail>) => void;
+        /**
+          * Emitted when something has been paste into the input.
+         */
+        "onCpslPaste"?: (event: CpslInputCustomEvent<ClipboardEvent>) => void;
+        /**
+          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
+         */
+        "pattern"?: string;
+        /**
+          * Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Number of rows for the textarea
+         */
+        "rows"?: number;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel"?: boolean;
+        /**
+          * If `true`, the element will have its spelling and grammar checked.
+         */
+        "spellcheck"?: boolean;
+        /**
+          * The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIcon"?: IconType;
+        /**
+          * The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIconSrc"?: string;
+        /**
+          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
+         */
+        "step"?: string;
+        /**
+          * The type of control to display. The default type is `text`.
+         */
+        "type"?: TextFieldTypes;
+        /**
+          * The value of the controlled input.
+         */
+        "value"?: string;
+    }
+    interface CpslModalV2 {
+        /**
+          * Whether or not to show the modal with a box shadow.
+         */
+        "elevated"?: boolean;
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Emitted when enter animation finishes.
+         */
+        "onCpslModalEntered"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Emitted when enter animation starts.
+         */
+        "onCpslModalEntering"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslModalExited"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation starts.
+         */
+        "onCpslModalExiting"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open"?: boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    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.
+         */
+        "subRoutes"?: { label: string; value: string }[];
+    }
+    interface CpslNavButtonGroup {
+    }
+    interface CpslOverlay {
+        /**
+          * Duration in seconds of the fade out animation. Default is .5.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the fade out animation. Default is .5.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "open"?: boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslPagination {
+        /**
+          * The initial page to select. Default is 0.
+         */
+        "initialPage"?: number;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslPaginationChanged"?: (event: CpslPaginationCustomEvent<number>) => void;
+        /**
+          * The total number of pages.
+         */
+        "totalPages"?: number;
+        /**
+          * The number of pages visible to select. Default is 5. Min is 5.
+         */
+        "visiblePages"?: number;
+    }
+    interface CpslPill {
+        /**
+          * Text of the pill.
+         */
+        "text"?: string;
+    }
+    interface CpslPopover {
+        /**
+          * ID for the element that the popover anchors to.
+         */
+        "anchorEl"?: HTMLElement;
+        /**
+          * Vertical anchor origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "anchorOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical anchor origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "anchorOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * If `true` the container will use the width of the content, else it will be set to the width of the trigger. Default is `true`
+         */
+        "autoWidth"?: boolean;
+        /**
+          * Whether or not to disable to popover.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the popover closes.
+         */
+        "onCpslClose"?: (event: CpslPopoverCustomEvent<void>) => void;
+        /**
+          * Emitted when the popover opens.
+         */
+        "onCpslOpen"?: (event: CpslPopoverCustomEvent<void>) => void;
+        /**
+          * Used internally to prevent select from blurring unintentionally.
+         */
+        "preventBlur"?: boolean;
+        /**
+          * Vertical transformation origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "transformOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical transformation origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "transformOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * ID for the element that triggers the popover to open.
+         */
+        "trigger"?: string;
+        /**
+          * Which trigger causes the popover to open. Options are: `"click"`, `"hover"`. Default is: `"click"`.
+         */
+        "triggerAction"?: 'click' | 'hover';
+        /**
+          * Padding from edge of window for the popover container.
+         */
+        "windowPadding"?: number;
+    }
+    interface CpslProgressIndicator {
+        /**
+          * Current zero based step.
+         */
+        "step"?: number;
+        /**
+          * Total number of steps.
+         */
+        "totalSteps"?: number;
+    }
+    interface CpslQrCode {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * Source for the center image of the QR code.
+         */
+        "imageSrc"?: string;
+        /**
+          * Size of the QR code in pixels. Default is 250.
+         */
+        "size"?: number;
+        /**
+          * URL for the QR code to link to.
+         */
+        "url"?: string;
+    }
+    interface CpslRadio {
+        /**
+          * Whether or not the radio is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Emitted when the radio state changes.
+         */
+        "onCpslRadioChanged"?: (event: CpslRadioCustomEvent<boolean>) => void;
+    }
+    interface CpslRow {
+    }
+    interface CpslSelect {
+        /**
+          * 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.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set the max height of the dropdown.
+         */
+        "dropdownMaxHeight"?: number;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Format value for display when selected.
+         */
+        "formatValue"?: (value: string | string[]) => string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * The name of the icon to use for the end icon. Default: `chevronUp`
+         */
+        "icon"?: IconType;
+        /**
+          * ID of the element, must be unique for the popover trigger.
+         */
+        "id"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * If `true`, the user can select more than one value.
+         */
+        "multiple"?: boolean;
+        /**
+          * Whether or not to show the rotation animation for the end icon.
+         */
+        "noIconAnimation"?: boolean;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onCpslBlur"?: (event: CpslSelectCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onCpslFocus"?: (event: CpslSelectCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the search value changes.
+         */
+        "onCpslSearchChange"?: (event: CpslSelectCustomEvent<string>) => void;
+        /**
+          * Emitted when the value changes.
+         */
+        "onCpslSelectValueChange"?: (event: CpslSelectCustomEvent<string>) => void;
+        /**
+          * Placeholder to display if `selectedValue` is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Placeholder for the search field.
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * The color of the selected item or placeholder text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "selectedItemColor"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+        /**
+          * The variant of the selected item or placeholder text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
+         */
+        "selectedItemVariant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of the selected item or placeholder text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "selectedItemWeight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
+        /**
+          * Value of the selected item.
+         */
+        "selectedValue"?: string | string[];
+        /**
+          * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.
+         */
+        "showFormattedSelectedItem"?: boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel"?: boolean;
+        /**
+          * If `true`, the dropdown will contain a search field.
+         */
+        "showSearch"?: boolean;
+    }
+    interface CpslSelectItem {
+        /**
+          * Whether the item is selected or not.
+         */
+        "selected"?: boolean;
+        /**
+          * Value of the item.
+         */
+        "value"?: string;
+    }
+    interface CpslSlideButton {
+        /**
+          * Whether or not the component is disabled. If true, the component will display the `startText`.
+         */
+        "disabled"?: boolean;
+        /**
+          * The name of the ending icon to show.
+         */
+        "endIcon"?: IconType;
+        /**
+          * The ending text.
+         */
+        "endText"?: string;
+        /**
+          * The `cpslComplete` event is fired when the slider is at the end.
+         */
+        "onCpslComplete"?: (event: CpslSlideButtonCustomEvent<boolean>) => void;
+        /**
+          * The name of the starting icon to show.
+         */
+        "startIcon"?: IconType;
+        /**
+          * The starting text.
+         */
+        "startText"?: string;
+    }
+    interface CpslSpinner {
+        /**
+          * Width of the spinner arc in pixels. Default is 6.5.
+         */
+        "barWidth"?: number;
+        /**
+          * Size of the spinner in pixels. Default is 50.
+         */
+        "size"?: number;
+        /**
+          * Rotation speed of the spinner in seconds. Default is 1.
+         */
+        "speed"?: number;
+        /**
+          * Variant of the spinner Default is 'default'.
+         */
+        "variant"?: 'default' | 'inactive' | 'error';
+    }
+    interface CpslSwitch {
+        /**
+          * Whether or not the switch is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Emitted when the switch state changes.
+         */
+        "onCpslSwitchChanged"?: (event: CpslSwitchCustomEvent<boolean>) => void;
+    }
+    interface CpslTab {
+        /**
+          * The selected tab component
+         */
+        "selected"?: boolean;
+        /**
+          * A tab id must be provided for each `cpsl-tab`. It's used internally to reference the selected tab or by the router to switch between them.
+         */
+        "tab"?: string;
+    }
+    interface CpslTable {
+    }
+    interface CpslTabs {
+        /**
+          * Whether or not the tabs take the full width of their container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Emitted when a tab is changed
+         */
+        "onCpslTabsChanged"?: (event: CpslTabsCustomEvent<TabsChangedEventDetail>) => void;
+        /**
+          * The selected tab component
+         */
+        "selectedTab"?: string;
+    }
+    interface CpslText {
+        /**
+          * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "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". Default is: `"bodyM"`.
+         */
+        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
+    }
+    interface CpslTileButton {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+    interface IntrinsicElements {
+        "cpsl-alert": CpslAlert;
+        "cpsl-app-bar": CpslAppBar;
+        "cpsl-auth-modal": CpslAuthModal;
+        "cpsl-avatar": CpslAvatar;
+        "cpsl-button": CpslButton;
+        "cpsl-button-group": CpslButtonGroup;
+        "cpsl-card": CpslCard;
+        "cpsl-checkbox": CpslCheckbox;
+        "cpsl-code-input": CpslCodeInput;
+        "cpsl-col": CpslCol;
+        "cpsl-divider": CpslDivider;
+        "cpsl-drawer": CpslDrawer;
+        "cpsl-dropdown": CpslDropdown;
+        "cpsl-file-upload": CpslFileUpload;
+        "cpsl-grid": CpslGrid;
+        "cpsl-hero": CpslHero;
+        "cpsl-icon": CpslIcon;
+        "cpsl-icon-group": CpslIconGroup;
+        "cpsl-identicon": CpslIdenticon;
+        "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;
+        "cpsl-pill": CpslPill;
+        "cpsl-popover": CpslPopover;
+        "cpsl-progress-indicator": CpslProgressIndicator;
+        "cpsl-qr-code": CpslQrCode;
+        "cpsl-radio": CpslRadio;
+        "cpsl-row": CpslRow;
+        "cpsl-select": CpslSelect;
+        "cpsl-select-item": CpslSelectItem;
+        "cpsl-slide-button": CpslSlideButton;
+        "cpsl-spinner": CpslSpinner;
+        "cpsl-switch": CpslSwitch;
+        "cpsl-tab": CpslTab;
+        "cpsl-table": CpslTable;
+        "cpsl-tabs": CpslTabs;
+        "cpsl-text": CpslText;
+        "cpsl-tile-button": CpslTileButton;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "cpsl-alert": LocalJSX.CpslAlert & JSXBase.HTMLAttributes<HTMLCpslAlertElement>;
+            "cpsl-app-bar": LocalJSX.CpslAppBar & JSXBase.HTMLAttributes<HTMLCpslAppBarElement>;
+            "cpsl-auth-modal": LocalJSX.CpslAuthModal & JSXBase.HTMLAttributes<HTMLCpslAuthModalElement>;
+            "cpsl-avatar": LocalJSX.CpslAvatar & JSXBase.HTMLAttributes<HTMLCpslAvatarElement>;
+            "cpsl-button": LocalJSX.CpslButton & JSXBase.HTMLAttributes<HTMLCpslButtonElement>;
+            "cpsl-button-group": LocalJSX.CpslButtonGroup & JSXBase.HTMLAttributes<HTMLCpslButtonGroupElement>;
+            "cpsl-card": LocalJSX.CpslCard & JSXBase.HTMLAttributes<HTMLCpslCardElement>;
+            "cpsl-checkbox": LocalJSX.CpslCheckbox & JSXBase.HTMLAttributes<HTMLCpslCheckboxElement>;
+            "cpsl-code-input": LocalJSX.CpslCodeInput & JSXBase.HTMLAttributes<HTMLCpslCodeInputElement>;
+            "cpsl-col": LocalJSX.CpslCol & JSXBase.HTMLAttributes<HTMLCpslColElement>;
+            "cpsl-divider": LocalJSX.CpslDivider & JSXBase.HTMLAttributes<HTMLCpslDividerElement>;
+            "cpsl-drawer": LocalJSX.CpslDrawer & JSXBase.HTMLAttributes<HTMLCpslDrawerElement>;
+            "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-icon-group": LocalJSX.CpslIconGroup & JSXBase.HTMLAttributes<HTMLCpslIconGroupElement>;
+            "cpsl-identicon": LocalJSX.CpslIdenticon & JSXBase.HTMLAttributes<HTMLCpslIdenticonElement>;
+            "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>;
+            "cpsl-pill": LocalJSX.CpslPill & JSXBase.HTMLAttributes<HTMLCpslPillElement>;
+            "cpsl-popover": LocalJSX.CpslPopover & JSXBase.HTMLAttributes<HTMLCpslPopoverElement>;
+            "cpsl-progress-indicator": LocalJSX.CpslProgressIndicator & JSXBase.HTMLAttributes<HTMLCpslProgressIndicatorElement>;
+            "cpsl-qr-code": LocalJSX.CpslQrCode & JSXBase.HTMLAttributes<HTMLCpslQrCodeElement>;
+            "cpsl-radio": LocalJSX.CpslRadio & JSXBase.HTMLAttributes<HTMLCpslRadioElement>;
+            "cpsl-row": LocalJSX.CpslRow & JSXBase.HTMLAttributes<HTMLCpslRowElement>;
+            "cpsl-select": LocalJSX.CpslSelect & JSXBase.HTMLAttributes<HTMLCpslSelectElement>;
+            "cpsl-select-item": LocalJSX.CpslSelectItem & JSXBase.HTMLAttributes<HTMLCpslSelectItemElement>;
+            "cpsl-slide-button": LocalJSX.CpslSlideButton & JSXBase.HTMLAttributes<HTMLCpslSlideButtonElement>;
+            "cpsl-spinner": LocalJSX.CpslSpinner & JSXBase.HTMLAttributes<HTMLCpslSpinnerElement>;
+            "cpsl-switch": LocalJSX.CpslSwitch & JSXBase.HTMLAttributes<HTMLCpslSwitchElement>;
+            "cpsl-tab": LocalJSX.CpslTab & JSXBase.HTMLAttributes<HTMLCpslTabElement>;
+            "cpsl-table": LocalJSX.CpslTable & JSXBase.HTMLAttributes<HTMLCpslTableElement>;
+            "cpsl-tabs": LocalJSX.CpslTabs & JSXBase.HTMLAttributes<HTMLCpslTabsElement>;
+            "cpsl-text": LocalJSX.CpslText & JSXBase.HTMLAttributes<HTMLCpslTextElement>;
+            "cpsl-tile-button": LocalJSX.CpslTileButton & JSXBase.HTMLAttributes<HTMLCpslTileButtonElement>;
+        }
+    }
+}