@wavelengthusaf/web-components 1.0.0 → 1.0.2

package/dist/esm/index.d.ts

@@ -1,882 +1,202 @@
-import * as React$1 from 'react';
-import React__default, { ReactNode, ChangeEvent, ReactElement } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TextFieldVariants, SxProps, Theme } from '@mui/material';
-import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
-
-/**
- * Helper Functions
- * @param a
- * @param b
- * @returns
- */
-declare function add(a: number, b: number): number;
-
-/**
- * Helper Functions
- * @param a
- * @param b
- * @returns
- */
-declare function concat(a: string, b: string): string;
-
-interface WavelengthButtonProps extends React__default.HTMLAttributes<HTMLElement> {
-    variant?: "contained" | "outlined" | "text";
-    size?: "small" | "medium" | "large";
-    height?: string;
-    width?: string;
-    margin?: string;
-    padding?: string;
-    colorOne?: string;
-    colorTwo?: string;
-    fontSize?: string;
-    disabled?: boolean;
-    borderRadius?: string;
-    onClick?: React__default.MouseEventHandler<HTMLElement>;
-    children?: React__default.ReactNode;
-    href?: string;
-    target?: "_self" | "_blank" | "_parent" | "_top";
-    boxShadow?: string;
-    className?: string;
-    style?: React__default.CSSProperties;
-}
-declare const WavelengthButton: React__default.FC<WavelengthButtonProps>;
-
-interface ButtonProps {
-    onClick?: any;
-    children?: ReactNode;
-}
-interface IconProps {
-    text: string;
-    numIcon?: string;
-    children: ReactNode;
-    active?: boolean;
-    width: string;
-    height: number;
-    fontsize: number;
-}
-declare function ButtonIcon({ text, numIcon, children, active, width, height, fontsize }: IconProps): react_jsx_runtime.JSX.Element;
-interface ButtonMenuProps {
-    children: ReactNode;
-}
-declare function ButtonMenu({ children }: ButtonMenuProps): react_jsx_runtime.JSX.Element;
-declare function WavelengthDropdownButton({ children, onClick }: ButtonProps): React__default.JSX.Element;
-declare namespace WavelengthDropdownButton {
-    var displayName: string;
-}
-
-interface WavelengthAutocompleteProps {
-    id?: string;
-    label: string;
-    items?: any;
-    variant?: TextFieldVariants;
-    width?: number;
-    borderColor?: string;
-    hoverColor?: string;
-    textColor?: string;
-    onChange?: (selectedValue: string) => void;
-}
-/**
- * Returns the Best Matching String from a List; Defaults to the first item if no good match is found
- * @param searchString - the string we want to look for
- * @param choices - the list of strings we get to choose from (must be greater than 0)
- * @returns - a string with the "best" match, or "" if no match is found
- */
-declare function findBestStringMatch(searchString: string, choices: string[]): string;
-declare function WavelengthAutocomplete({ label, width, variant, items, onChange, borderColor, textColor, hoverColor, id }: WavelengthAutocompleteProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthAutocomplete {
-    var displayName: string;
-}
-
-interface DownloadProps {
-    fileLoc: "local" | "api";
-    fileURL: string;
-    fileName: string;
-    button?: ReactNode | React__default.JSX.Element;
-    id?: string;
-}
-declare function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button, id }: DownloadProps): react_jsx_runtime.JSX.Element | undefined;
-declare namespace WavelengthFileDownloader {
-    var displayName: string;
-}
-
-interface StyledButtonPropsTwo {
-    type: "channel_one_transparent" | "channel_one_launch" | "channel_one_request" | "channel_one_pending" | "channel_one_disabled" | "ewdms_tertiary" | "ewdms_primary" | "ewdms_secondary" | "brewery" | "default";
-    styles?: React__default.CSSProperties;
-    hoverstyles?: React__default.CSSProperties;
-    activestyles?: React__default.CSSProperties;
-    disabledstyles?: React__default.CSSProperties;
-    icon?: React__default.ReactNode;
-    disabled?: boolean;
-    children: React__default.ReactNode;
-    onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
-}
-declare function WavelengthStyledButton({ type, styles, children, disabled, hoverstyles, icon, onClick, disabledstyles, activestyles }: StyledButtonPropsTwo): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthStyledButton {
-    var displayName: string;
-}
-
-interface WavelengthBoxProps {
-    width?: number;
-    height?: number;
-    children: ReactNode;
-    borderTopRadius?: string;
-    borderBottomRadius?: string;
-    id?: string;
-}
-declare function WavelengthBox({ width, height, children, borderBottomRadius, borderTopRadius, id }: WavelengthBoxProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthBox {
-    var displayName: string;
-}
-
-interface WavelengthContentPlaceholderProps {
-    type?: "circle" | "rectangle";
-    width?: string | number;
-    height?: string | number;
-    txtcolor?: string;
-    bgcolor?: string;
-    children: ReactNode;
-    id?: string;
-}
-declare function WavelengthContentPlaceholder({ type, width, height, txtcolor, bgcolor, children, id }: WavelengthContentPlaceholderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthContentPlaceholder {
-    var displayName: string;
-}
-
-interface WavelengthExampleComponentProps {
-    width?: number;
-    height?: number;
-}
-declare function WavelengthExampleComponent({ width, height }: WavelengthExampleComponentProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthExampleComponent {
-    var displayName: string;
-}
-
-interface SearchResult {
-    id: number | string;
-    title: string;
-    subtitle?: string;
-}
-interface SearchProps {
-    id?: string;
-    mode: "automatic" | "manual";
-    type?: "text-box" | "search-bar";
-    iconPos?: "start" | "end";
-    clearIconMarginRight?: string;
-    borderRadius?: number | string;
-    label?: string;
-    width?: string;
-    height?: string | number;
-    children?: ReactNode;
-    borderColor?: string;
-    hoverColor?: string;
-    textColor?: string;
-    backgroundColor?: string;
-    placeholder?: string;
-    onEnter?: (arg0?: any) => any;
-    size?: "small" | "medium";
-    fontSize?: string;
-    options: SearchResult[];
-    onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onSearchItemSelected?: (selectedItem: SearchResult | string) => void;
-}
-declare function WavelengthSearch({ id, mode, type, width, height, label, size, borderRadius, children, placeholder, onEnter, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, iconPos, clearIconMarginRight, }: SearchProps): react_jsx_runtime.JSX.Element | undefined;
-declare namespace WavelengthSearch {
-    var displayName: string;
-}
-
-declare function WavelengthSearchTextField(): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSearchTextField {
-    var displayName: string;
-}
-
-interface WavelengthNotAvailablePageProps {
-    WavelengthAppLogoName?: string;
-    errorMessage: string;
-    backgroundColor?: string;
-    buttonText: string;
-    redirectLink?: string;
-    buttonColorOne?: string;
-    buttonColorTwo?: string;
-    id?: string;
-}
-declare function WavelengthNotAvailablePage({ WavelengthAppLogoName, errorMessage, backgroundColor, buttonText, redirectLink, buttonColorOne, buttonColorTwo, id }: WavelengthNotAvailablePageProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthNotAvailablePage {
-    var displayName: string;
-}
-
-interface SubSectionItem {
-    title?: string;
-    path?: string;
-    onClick?: () => void;
-    items?: SubSectionItem[];
-}
-interface SubSection {
-    title?: string;
-    items?: SubSectionItem[];
-}
-interface Section {
-    title: string;
-    subsections?: SubSection[];
-}
-interface SidebarProps {
-    id?: string;
-    sections: Section[];
-    bgColor?: string;
-    txtColor?: string;
-    labelColor?: string;
-    arrowColor?: string;
-    marginTop?: string;
-    marginLeft?: string;
-    width?: string | number;
-    height?: string | number;
-}
-declare function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width, height, id }: SidebarProps): React__default.JSX.Element;
-declare namespace WavelengthSideBar {
-    var displayName: string;
-}
-
-interface ISpinningSvgProps {
-    size: number;
-    id: "outer-circle" | "middle-circle" | "inner-circle" | "spinning";
-    clip: string;
-    color: string;
-    gradient: boolean;
-    radius: number;
-}
-declare function WavelengthSpinningOuterCircle({ size, id, clip, color, gradient, radius }: ISpinningSvgProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSpinningOuterCircle {
-    var displayName: string;
-}
-
-interface spinningLogoProps {
-    svg?: React__default.ReactNode;
-    size?: number;
-    id?: string;
-}
-declare function WavelengthSpinningLogo({ svg, size, id }: spinningLogoProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSpinningLogo {
-    var displayName: string;
-}
-
-interface DragAndDropProps {
-    width?: string;
-    height?: string;
-    border?: string;
-    onFilesSelected: (files: File[]) => void;
-    textColor?: string;
-    fontSize?: string;
-    allowedFileMIME?: string[];
-    allowedFileExtensions?: string;
-    backgroundColor?: string;
-    dataTestId?: string;
-}
-declare function WavelengthDragAndDrop({ width, height, onFilesSelected, border, textColor, fontSize, allowedFileMIME, allowedFileExtensions, backgroundColor, dataTestId, }: DragAndDropProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthDragAndDrop {
-    var displayName: string;
-}
-
-interface WavelengthProgressBarProps extends React__default.HTMLAttributes<HTMLElement> {
-    name?: string;
-    value?: number;
-    width?: string;
-    height?: string;
-    fontSize?: string;
-    fontColor?: string;
-    progressBorder?: string;
-    progressColor?: string;
-}
-declare const WavelengthProgressBar: React__default.FC<WavelengthProgressBarProps>;
-
-interface CommentProps {
-    width?: string;
-    height?: string;
-    author: string;
-    date: string;
-    comments: string;
-    onClick?: React__default.MouseEventHandler<HTMLButtonElement> | undefined;
-    textColor?: string;
-    backgroundColor?: string;
-    border?: string;
-    iconSelectedColor?: string;
-    dataTestId?: string;
-}
-declare function WavelengthCommentDisplay(props: CommentProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthCommentDisplay {
-    var displayName: string;
-}
-
-interface PermissionAlertProps {
-    height?: string;
-    width?: string;
-    permission?: "Permission Requested" | "Permission Denied";
-    applicationName?: string;
-    requestorName?: string;
-    dateOfRequest?: string;
-    backgroundColor?: string;
-    unit?: string;
-    onDismiss?: React__default.MouseEventHandler<HTMLAnchorElement> | undefined;
-    dataTestId?: string;
-}
-declare function WavelengthPermissionAlert({ dataTestId, height, width, backgroundColor, permission, applicationName, requestorName, dateOfRequest, onDismiss, unit, }: PermissionAlertProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthPermissionAlert {
-    var displayName: string;
-}
-
-interface AccessAlertProps {
-    height?: string;
-    width?: string;
-    access?: "Access Request" | "Access Granted" | "Access Denied";
-    appAdmin?: string;
-    time?: string;
-    requestorName?: string;
-    appNickname?: string;
-    message?: string;
-    appLogo?: string;
-    dataTestId?: string;
-    backgroundColor?: string;
-    onClear?: React__default.MouseEventHandler<HTMLAnchorElement> | undefined;
-}
-declare function WavelengthAccessAlert({ height, dataTestId, width, time, access, appNickname, appLogo, appAdmin, requestorName, }: AccessAlertProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthAccessAlert {
-    var displayName: string;
-}
-
-interface WavelengthAlertProps {
-    id?: string;
-    height?: string;
-    width?: string;
-    variant?: "caveman" | "basic" | "civilized";
-    backgroundColor?: string;
-    alertType?: string | React__default.ReactNode;
-    alertDescription?: string | React__default.ReactNode;
-    datatestid?: string;
-    viewed?: boolean;
-    timeStamp?: string | React__default.ReactNode;
-    appName?: string | React__default.ReactNode;
-    url?: string;
-    onClose?: () => void;
-}
-declare function WavelengthAlert({ viewed, width, height, backgroundColor, appName, alertType, alertDescription, datatestid, variant, timeStamp, url, id, onClose, }: WavelengthAlertProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthAlert {
-    var displayName: string;
-}
-
-interface WavelengthFooterProps {
-    text?: string;
-    textColor?: string;
-}
-declare function WavelengthFooter({ text, textColor }: WavelengthFooterProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthFooter {
-    var displayName: string;
-}
-
-/** Attributes passed through to the underlying `wavelength-button` */
-interface WavelengthButtonAttributes extends React__default.HTMLAttributes<HTMLElement> {
-    [key: string]: any;
-}
-interface ButtonConfig {
+import { ZodObject, ZodRawShape } from 'zod';
+
+declare class SampleComponent extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+}
+
+declare class WavelengthBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    private container;
+    private textElement;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private updateAttributes;
+}
+
+declare class WavelengthButton extends HTMLElement {
+    static get observedAttributes(): string[];
+    private button;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateButton(): void;
+    private applyPresetSize;
+    private handleHoverIn;
+    private handleHoverOut;
+    private hexToRgba;
+    private shadeColor;
+    private handleRipple;
+}
+
+type FormValue = Record<string, unknown>;
+
+type Shape = ZodRawShape;
+type ButtonConfig = {
     label?: string;
-    buttonProps?: WavelengthButtonAttributes;
+    buttonProps?: Record<string, any>;
     eventName?: string;
-}
-/** Attributes passed through to each generated `wavelength-input` */
-interface WavelengthInputAttributes extends React__default.HTMLAttributes<HTMLElement> {
-    [key: string]: any;
-}
-type FormDetail<T> = {
-    value: T;
-    issues: z.ZodIssue[];
 };
-type FormInvalidDetail<T> = FormDetail<Partial<T>>;
-type FormValidDetail<T> = FormDetail<T>;
-type FormChangeDetail<T> = FormDetail<Partial<T>>;
-interface WavelengthFormProps<T extends object = Record<string, unknown>> {
-    /** A Zod object schema */
-    schema: z.ZodType<T>;
-    /** Initial or controlled value (partial OK) */
-    value?: Partial<T>;
-    /** Configuration for an optional left-aligned button */
-    leftButton?: ButtonConfig;
-    /** Configuration for an optional center-aligned button */
-    centerButton?: ButtonConfig;
-    /** Configuration for an optional right-aligned button */
-    rightButton?: ButtonConfig;
-    /** Props applied to each generated WavelengthInput */
-    inputProps?: WavelengthInputAttributes;
-    /** Prefix applied to generated input IDs and names */
-    idPrefix?: string;
-    /** Optional heading text displayed above the form */
-    title?: string;
-    /** Alignment for the heading text (default: left) */
-    titleAlign?: React__default.CSSProperties["textAlign"];
-    /** Color for the heading text */
-    titleColor?: React__default.CSSProperties["color"];
-    /** Per-field placeholder overrides */
-    placeholders?: Partial<Record<keyof T & string, string>>;
-    /** CSS width applied to the underlying form element */
-    formWidth?: string;
-    /** Array defining how many fields appear in each row */
-    layout?: number[];
-    /** Standard React props */
-    className?: string;
-    style?: React__default.CSSProperties;
-    /** Event callbacks (straight from web component custom events) */
-    onChange?: (value: Partial<T>, issues: z.ZodIssue[]) => void;
-    onValid?: (value: T, issues: z.ZodIssue[]) => void;
-    onInvalid?: (value: Partial<T>, issues: z.ZodIssue[]) => void;
-    /** Fired when the default left event is triggered */
-    onLeft?: () => void;
-    /** Fired when the default center event is triggered */
-    onCenter?: () => void;
-    /** Fired when the default right event is triggered */
-    onRight?: () => void;
-    /** Fired when the underlying form emits a native submit event */
-    onSubmit?: (event: SubmitEvent) => void;
-}
-interface WavelengthFormRef<T extends object = Record<string, unknown>> {
-    /** Runs the component’s internal validation and returns boolean */
-    validate: () => boolean;
-    /** Read current value (as the element holds it) */
-    getValue: () => Partial<T> | undefined;
-    /** Imperatively set the value */
-    setValue: (v: Partial<T>) => void;
-}
-declare const WavelengthForm: <T extends object = Record<string, unknown>>(props: WavelengthFormProps<T> & React__default.RefAttributes<WavelengthFormRef<T>>) => React__default.ReactElement | null;
-
-interface WavelengthTitleBarProps {
-    titleText?: string;
-    subtitleText?: string;
-    textColor?: string;
-    shadowColor?: string;
-}
-declare function WavelengthTitleBar({ titleText, subtitleText, textColor, shadowColor }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthTitleBar {
-    var displayName: string;
-}
-
-interface WavelengthBannerProps {
-    bannerText?: string;
-    bannerColor?: string;
-    textColor?: string;
-    opacity?: string | number;
-    zIndex?: string | number;
-    id?: string;
-    classification?: string;
-    control?: string[];
-}
-declare function WavelengthBanner({ bannerText, bannerColor, textColor, opacity, zIndex, id, classification, control }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthBanner {
-    var displayName: string;
-}
-
-interface WavelengthAppLogoProps {
-    width?: number;
-    height?: number;
-    name?: string;
-    grayscale?: boolean;
-    id?: string;
-}
-declare function WavelengthAppLogo({ width, height, name, grayscale, id }: WavelengthAppLogoProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthAppLogo {
-    var displayName: string;
-}
-
-interface DefaultProps {
-    width?: string;
-    height?: number;
-}
-declare function WavelengthDefaultIcon({ width, height }: DefaultProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthDefaultIcon {
-    var displayName: string;
-}
-
-interface HeaderProps {
-    numberOfPlanes?: number;
-    trailDir?: "right" | "left";
-    color?: string;
-    opacity?: number;
-    gradient?: boolean;
-}
-declare function WavelengthManyPlanes({ numberOfPlanes, trailDir, color, opacity, gradient }: HeaderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthManyPlanes {
-    var displayName: string;
-}
-
-interface WavelengthPlaneTrailProps {
-    trailDir?: "right" | "left";
-    color?: string;
-    id?: string;
-}
-declare function WavelengthPlaneTrail({ trailDir, id, color }: WavelengthPlaneTrailProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthPlaneTrail {
-    var displayName: string;
-}
-
-type ThemeProperties = {
-    name?: string;
-};
-declare const WavelengthAppTheme: React$1.Context<ThemeProperties>;
-declare const useThemeContext: () => ThemeProperties;
-
-interface WavelengthConfirmationModalProps {
-    show: boolean;
-    setShow: (show: boolean) => void;
-    textObj: Record<string, string>;
-    id?: string;
-    width?: string;
-    height?: string;
-    fontFamily?: string;
-    textColor?: string;
-    cancelButton?: React.ReactNode;
-    submitButton?: React.ReactNode;
-    backgroundColor?: string;
-}
-declare function WavelengthConfirmationModal(props: WavelengthConfirmationModalProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthConfirmationModal {
-    var displayName: string;
-}
-
-interface WavelengthContentModalProps {
-    show: boolean;
-    setShow: (show: boolean) => void;
-    textObj: Record<string, string>;
-    handleContentModalOnConfirmProp: () => void;
-}
-declare function WavelengthContentModal(props: WavelengthContentModalProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthContentModal {
-    var displayName: string;
-}
-
-interface menuItemProps {
-    itemType: "header" | "link" | "footer" | string;
-    label: string | number;
-    link?: string;
-    end?: boolean;
-    email?: string;
-    hoverColor?: string;
-}
-interface PopUPMenuProps {
-    menuItems: menuItemProps[];
-    customIcon?: React__default.ReactNode;
-    width?: string;
-    menuDirection?: "top" | "bottom";
-    color?: string;
-    border?: string;
-    id?: string;
-}
-declare function WavelengthPopUpMenu({ menuItems, customIcon, width, menuDirection, color, id, border }: PopUPMenuProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthPopUpMenu {
-    var displayName: string;
-}
-
-interface DropdownProps {
-    id?: string;
-    palette: "brewery" | "custom";
-    width: string;
-    options: menuOptions[];
-    buttonSx?: SxProps<Theme> | undefined;
-    menuSx?: MenuSxProps;
-    buttonText: string | ReactNode;
-}
-interface menuOptions {
-    option: React__default.ReactNode;
-    onClick?: React__default.MouseEventHandler<HTMLLIElement> | undefined;
-}
-interface MenuSxProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    hoverColor?: string;
-    width?: string;
-    boxShadow?: string;
-}
-declare function WavelengthDropdown({ id, options, buttonSx, width, buttonText, menuSx, palette, }: DropdownProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthDropdown {
-    var displayName: string;
-}
-
-interface ConfirmationSnackbarProps {
-    show: boolean;
-    setShow: (show: boolean) => void;
-    closeIcon?: ReactNode | React__default.JSX.Element;
-    message?: ReactNode | React__default.JSX.Element;
-    snackBarColor?: string;
-    textColor?: string;
-    horryAlign?: "left" | "right" | "center";
-    vertyAlign?: "top" | "bottom";
-    durationSb?: number;
-    id?: string;
-    width?: string | number;
-    icon?: ReactNode;
-}
-declare function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width, icon, id }: ConfirmationSnackbarProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSnackbar {
-    var displayName: string;
-}
-
-interface StandardSnackbarProps {
-    type: "success" | "error" | "disabled";
-    show: boolean;
-    closeIcon: ReactNode | React__default.JSX.Element;
-    icon?: ReactNode;
-    toggleShow: (on: boolean) => void;
-    horryAlign?: "left" | "right" | "center";
-    vertyAlign?: "top" | "bottom";
-    durationSb?: number;
-    width?: string | number;
-    message?: string | ReactNode;
-    customVertyAlign?: string;
-    id?: string;
-}
-declare function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width, message, customVertyAlign, toggleShow, closeIcon, id }: StandardSnackbarProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthStandardSnackbar {
-    var displayName: string;
-}
-
-interface Testprops {
-    isPopUpOpen: boolean;
-    type: "success" | "error" | "disabled";
-    icon?: ReactNode;
-    width?: string | number;
-    message?: string | ReactNode;
-    img: React__default.JSX.Element | ReactNode;
-    toggleOpen: (value: React__default.SetStateAction<boolean>) => void;
-    customVertyAlign?: string;
-}
-declare const useOutsideClick: (callback: () => void) => React__default.RefObject<HTMLDivElement>;
-declare function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign, width, img }: Testprops): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthTestSnackbar {
-    var displayName: string;
-}
-
-interface sliderProps {
-    width?: string;
-    labelColor?: string;
-    color?: string;
-    value: number;
-    valueDisplayed?: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
-    handleChange: (event: Event, newValue: number | number[]) => void;
-    labelFunc?(val: number): string;
-    marks?: Mark[];
-}
-declare function WavelengthSlider({ width, color, valueDisplayed, marks, labelColor, value, maxVal, minVal, step, labelFunc, handleChange }: sliderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSlider {
-    var displayName: string;
-}
-
-interface carouselItem$1 {
-    title?: string;
-    description?: string;
-    image: string;
-    path: string;
-}
-interface carouselConfigArray$1 {
-    items: carouselItem$1[];
-}
-interface adjustableDimensions {
-    buttonSize?: number;
-    imageHeight?: number;
-    imageWidth?: number;
-    cardWidth?: number;
-    cardHeight?: number;
-}
-declare const DefaultCarousel: React__default.FC<carouselConfigArray$1 & adjustableDimensions>;
-
-interface carouselItem {
-    title?: string;
-    description?: string;
-    image: string;
-    path: string;
-}
-interface carouselConfigArray {
-    items: carouselItem[];
-}
-interface adjustDimenforCarousel {
-    contHeight?: number;
-    contWidth?: number;
-    cardWidth?: number;
-    cardHeight?: number;
-}
-declare const SliderCardCarousel: React__default.FC<carouselConfigArray & adjustDimenforCarousel>;
-
-interface PaginationProps {
-    totalPages: number;
-    boundaryCount?: number;
-    siblingCount?: number;
-    currentPageNumber: number;
-    style?: "text" | "contained" | "outlined" | "circular";
-    onPageChange: (page: number) => void;
-}
-declare const range: (start: number, end: number) => number[];
-declare function ascendingRange(start: number, end: number): number[];
-declare function DefaultPagination({ totalPages, currentPageNumber, siblingCount, boundaryCount, style, onPageChange }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare namespace DefaultPagination {
-    var displayName: string;
-}
-
-interface WavelengthInputProps extends React__default.HTMLAttributes<HTMLElement> {
-    id?: string;
-    name?: string;
-    value?: string;
-    clearable?: boolean;
-    placeholder?: string;
-    inputType?: string;
-    regex?: string;
-    helperMessage?: string;
-    errorMessage?: string;
-    minLengthMessage?: string;
-    maxLengthMessage?: string;
-    validationType?: "none" | "always" | "onBlur" | "manual";
-    minLength?: number;
-    maxLength?: number;
-    required?: boolean;
-    forceError?: boolean;
-    disabled?: boolean;
-    width?: string;
-    height?: string;
-    padding?: string;
-    borderRadius?: string;
-    backgroundColor?: string;
-    labelColor?: string;
-    placeholderColor?: string;
-    textColor?: string;
-    borderColor?: string;
-    focusColor?: string;
-    helperColor?: string;
-    label?: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-declare const WavelengthInput: React__default.ForwardRefExoticComponent<WavelengthInputProps & React__default.RefAttributes<HTMLElement & {
-    validate?: () => boolean;
-}>>;
-
-interface DataType$2 {
-    id: number;
-    [key: string]: any;
-}
-interface ColumnProps$2<T> {
-    key: string;
-    title: string | ReactElement;
-    width?: string;
-    editable?: boolean;
-    render?: (column: ColumnProps$2<T>, item: T) => ReactElement;
-}
-type Props$2<T> = {
-    columns: Array<ColumnProps$2<T>>;
-    data?: T[] | undefined;
-    itemsPerPage: number;
-    totalPages: number;
-};
-declare const WavelengthDataTable: {
-    <T extends DataType$2>({ data, columns, itemsPerPage, totalPages }: Props$2<T>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface fileObject {
-    id: number;
-    [key: string]: any;
-}
-interface Details$1 {
-    relationId: number;
-    fileObjects: fileObject[];
-}
-interface DataType$1 {
-    id: number;
-    [key: string]: any;
-    Details?: Details$1;
-}
-interface ColumnProps$1 {
-    key: string;
-    title: string | ReactElement;
-    subDataTableColumn: boolean;
-    PrimaryBoldText?: boolean;
-}
-type Props$1<T> = {
-    columns: Array<ColumnProps$1>;
-    data?: T[] | undefined;
-    downloadArrowOnClick?: () => void | Promise<void>;
-    downloadMissionOnClick?: () => void | Promise<void>;
-    addFilesOnClick?: () => void | Promise<void>;
-};
-declare const ChildDataTable: {
-    <T extends DataType$1>({ data, columns, downloadArrowOnClick, downloadMissionOnClick, addFilesOnClick }: Props$1<T>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface Details {
-    relationId: number;
-    [key: string]: any;
-}
-interface DataType {
-    id: number;
-    [key: string]: any;
-    Details?: Details;
-}
-interface ColumnProps<T> {
-    key: string;
-    title: string | ReactElement;
-    subDataTableColumn: boolean;
-    width?: string;
-    editable?: boolean;
-    render?: (column: ColumnProps<T>, item: T) => ReactElement;
-}
-type Props<T> = {
-    columns: Array<ColumnProps<T>>;
-    data?: T[] | undefined;
-};
-declare const NestedDataTable: {
-    <T extends DataType>({ data, columns }: Props<T>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface AutocompleteProps {
-    data: string[];
-    floatLabel: string;
-    onDataChange?: (data: string) => void;
-    height?: string;
-    width?: string;
-    inputBorderStyle?: string;
-    inputFocusBorderColor?: string;
-    autoBackGroundColor?: string;
-    labelColor?: string;
-    focusedLabelColor?: string;
-    id?: string;
-    name?: string;
-}
-declare const WavelengthAutoComplete: {
-    ({ floatLabel, data, height, width, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor, focusedLabelColor, id, name, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type timeVariant = "date" | "datetime-local" | "";
-interface DateInputProps {
-    floatLabel: string;
-    OnDataChange?: (data: Date) => void;
-    height?: string;
-    width?: string;
-    min?: string;
-    max?: string;
-    inputTimeType: timeVariant;
-    labelColor?: string;
-    inputBorderStyle?: string;
-    inputFocusBorderColor?: string;
-    backgroundColor?: string;
-    FocusLabelColor?: string;
-    id?: string;
-    name?: string;
-}
-declare const WavelengthDatePicker: {
-    ({ id, name, inputBorderStyle, floatLabel, labelColor, inputFocusBorderColor, FocusLabelColor, backgroundColor, height, width, min, max, inputTimeType, OnDataChange, }: DateInputProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
-    testProp?: string;
-}
-declare const SampleComponent: React__default.FC<SampleComponentProps>;
-
-export { type ButtonConfig, ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, type FormChangeDetail, type FormDetail, type FormInvalidDetail, type FormValidDetail, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonAttributes, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthForm, type WavelengthFormProps, type WavelengthFormRef, WavelengthInput, type WavelengthInputAttributes, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+declare class WavelengthForm<T extends object> extends HTMLElement {
+    private _schema?;
+    private _validator?;
+    private _shadow;
+    private _fields;
+    private _value;
+    private _errors;
+    private _leftButton?;
+    private _centerButton?;
+    private _rightButton?;
+    private _inputProps;
+    private _idPrefix;
+    private _title;
+    private _titleAlign;
+    private _titleColor;
+    private _formWidth;
+    private _layout?;
+    static get observedAttributes(): string[];
+    constructor();
+    /**
+     * Assign a Zod object schema to render. (required)
+     */
+    set schema(s: ZodObject<Shape> | undefined);
+    get schema(): ZodObject<Shape> | undefined;
+    /**
+     * Optional initial values. You can also set individual values
+     * by dispatching inputChange from your inputs after mount.
+     */
+    set value(v: FormValue | undefined);
+    get value(): FormValue;
+    set leftButton(v: ButtonConfig | undefined);
+    get leftButton(): ButtonConfig | undefined;
+    set centerButton(v: ButtonConfig | undefined);
+    get centerButton(): ButtonConfig | undefined;
+    set rightButton(v: ButtonConfig | undefined);
+    get rightButton(): ButtonConfig | undefined;
+    set inputProps(v: Record<string, any> | undefined);
+    get inputProps(): Record<string, any> | undefined;
+    set idPrefix(v: string | undefined);
+    get idPrefix(): string | undefined;
+    /** Heading text displayed above the form */
+    set title(v: string);
+    get title(): string;
+    /** CSS text-align value applied to the heading */
+    set titleAlign(v: string | undefined);
+    get titleAlign(): string;
+    /** Color applied to the heading text */
+    set titleColor(v: string | undefined);
+    get titleColor(): string | undefined;
+    /** Width applied to the form element */
+    set formWidth(v: string | undefined);
+    get formWidth(): string;
+    /** Array describing how many fields appear in each row */
+    set layout(v: number[] | undefined);
+    get layout(): number[] | undefined;
+    /**
+     * Imperative validation without submitting.
+     * Returns true if the current form values are valid.
+     */
+    validate(): boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private collectValues;
+    private queryFieldEl;
+    private setFieldError;
+    private validateField;
+    private validateAll;
+    private onInputChange;
+    private onBlur;
+    private onSubmit;
+    private render;
+}
+
+declare class WavelengthProgressBar extends HTMLElement {
+    static get observedAttributes(): string[];
+    private container;
+    private nameSpan;
+    private statusSpan;
+    private progressBar;
+    private progressFill;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private updateRendering;
+}
+
+declare class WavelengthInput extends HTMLElement {
+    private inputEl;
+    private labelEl;
+    private helperEl;
+    private clearButtonEl;
+    private placeholderStyleEl;
+    private isFocused;
+    private hasBlurred;
+    private validationType;
+    private forceError;
+    private _bgObserver;
+    private _debounceValidate;
+    private _debounceTimeout;
+    private _lastErrorMessage;
+    private internals;
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _startBackgroundObserver;
+    private _stopBackgroundObserver;
+    private _setupDebouncedValidation;
+    private _onInput;
+    private _onFocus;
+    private _onBlur;
+    private _validate;
+    private _showError;
+    private _clearError;
+    private _applyAttributes;
+    private _updateRequiredMarker;
+    private _onClearClick;
+    private _toggleClearButton;
+    private _applyContent;
+    private _applyLayout;
+    private _applyColors;
+    private _applyValidationHint;
+    private _applyAccessibility;
+    private _upgradeProperty;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get id(): string;
+    set id(val: string);
+    get name(): string;
+    set name(val: string);
+    get value(): string;
+    set value(val: string);
+    get placeholder(): string;
+    set placeholder(val: string);
+    get required(): boolean;
+    set required(val: boolean);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get clearable(): boolean;
+    set clearable(val: boolean);
+}
+
+declare class WavelengthTitleBar extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+
+declare class WavelengthDatePicker extends HTMLElement {
+    private inputDatePicker;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateInput(): void;
+}
+
+export { SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthProgressBar, WavelengthTitleBar };