@lumx/core 4.3.2-alpha.10 → 4.3.2-alpha.12

package/js/components/Flag/index.d.ts

@@ -0,0 +1,34 @@
+import { ColorPalette } from '../../constants';
+import type { LumxClassName, HasTheme, JSXElement, HasClassName, CommonRef } from '../../types';
+import { TextProps } from '../Text';
+export interface FlagProps extends HasClassName, HasTheme {
+    /** Color of the component. */
+    color?: ColorPalette;
+    /** Icon to use before the label. */
+    icon?: string;
+    /** Text label of the flag. */
+    children: JSXElement;
+    /** Enable text truncate on overflow */
+    truncate?: boolean;
+    /** ref to the root element */
+    ref?: CommonRef;
+    /** Text component to use for rendering the label */
+    Text: (props: TextProps) => any;
+}
+export declare const COMPONENT_NAME = "Flag";
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const DEFAULT_PROPS: Partial<FlagProps>;
+export declare const block: {
+    (additionalClasses: string[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+}, element: {
+    (elem: string, additionalClasses: string[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+};
+/**
+ * Flag component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Flag: (props: FlagProps) => import("react").JSX.Element;

package/js/components/FlexBox/Stories.d.ts

@@ -0,0 +1,108 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup FlexBox stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, render, args, decorators: { withWrapper, withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'NoShrink' | 'MarginAuto';
+    decorators: 'withCombinations' | 'withWrapper';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: any;
+        argTypes: {
+            orientation: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("horizontal" | "vertical")[];
+                mapping: Record<string, "horizontal" | "vertical"> | undefined;
+            };
+            fillSpace: {
+                control: string;
+            };
+            wrap: {
+                control: string;
+            };
+            noShrink: {
+                control: string;
+            };
+            hAlign: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("bottom" | "center" | "space-around" | "space-between" | "space-evenly" | "top")[];
+                mapping: Record<string, "bottom" | "center" | "space-around" | "space-between" | "space-evenly" | "top"> | undefined;
+            };
+            vAlign: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("center" | "left" | "right" | "space-around" | "space-between" | "space-evenly")[];
+                mapping: Record<string, "center" | "left" | "right" | "space-around" | "space-between" | "space-evenly"> | undefined;
+            };
+            gap: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("tiny" | "regular" | "medium" | "big" | "huge")[];
+                mapping: Record<string, "tiny" | "regular" | "medium" | "big" | "huge"> | undefined;
+            };
+        };
+    };
+    /** Without config, FlexBox acts as a simple <div> */
+    NoConfig: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Horizontal orientation with all possible item alignments */
+    Horizontal: {
+        args: {
+            orientation: "horizontal";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Vertical orientation with all possible item alignments */
+    Vertical: {
+        args: {
+            orientation: "vertical";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All gap sizes */
+    GapSizes: {
+        args: {
+            orientation: "horizontal";
+        };
+        argTypes: {
+            gap: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Wrap items in new row or column */
+    Wrap: {
+        args: {
+            orientation: "horizontal";
+            wrap: boolean;
+        };
+        argTypes: {
+            wrap: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Prevent FlexBox from shrinking into a parent flex box */
+    NoShrink: {
+        args: any;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All combinations of margin auto values */
+    MarginAuto: {
+        args: any;
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/FlexBox/Tests.d.ts

@@ -0,0 +1,13 @@
+import { SetupOptions } from '../../../testing';
+import { FlexBoxProps } from '.';
+type SetupProps = Partial<FlexBoxProps>;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (props: SetupProps | undefined, { render, ...options }: SetupOptions<FlexBoxProps>) => {
+    props: Partial<FlexBoxProps>;
+    flexBox: HTMLElement;
+    container: any;
+};
+declare const _default: (renderOptions: SetupOptions<FlexBoxProps>) => void;
+export default _default;

package/js/components/FlexBox/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const GAP_SIZES: ("tiny" | "regular" | "medium" | "big" | "huge")[];
+export declare const SPACE_ALIGNMENTS: ("space-around" | "space-between" | "space-evenly")[];
+export declare const VERTICAL_ALIGNMENTS: ("bottom" | "center" | "space-around" | "space-between" | "space-evenly" | "top")[];
+export declare const HORIZONTAL_ALIGNMENTS: ("center" | "left" | "right" | "space-around" | "space-between" | "space-evenly")[];

package/js/components/FlexBox/index.d.ts

@@ -0,0 +1,50 @@
+import { Orientation } from '../../constants';
+import type { LumxClassName, JSXElement, HasClassName } from '../../types';
+import type { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from './types';
+export type * from './types';
+/**
+ * Defines the props of the component.
+ */
+export interface FlexBoxProps extends HasClassName {
+    /** Children elements. */
+    children?: JSXElement;
+    /** Whether the "content filling space" is enabled or not. */
+    fillSpace?: boolean;
+    /** Gap space between flexbox items. */
+    gap?: GapSize;
+    /** Flex horizontal alignment. */
+    hAlign?: FlexVerticalAlignment;
+    /** Whether the "auto margin" is enabled all around or not. */
+    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
+    /** Whether the "content shrink" is disabled or not. */
+    noShrink?: boolean;
+    /** Flex direction. */
+    orientation?: Orientation;
+    /** Flex vertical alignment. */
+    vAlign?: FlexHorizontalAlignment;
+    /** Whether the "flex wrap" is enabled or not. */
+    wrap?: boolean;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "FlexBox";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: string[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+};
+/**
+ * Get FlexBox component props (className computation).
+ *
+ * @param  props Component props.
+ * @return Computed props with className.
+ */
+export declare function getFlexBoxProps(props: FlexBoxProps): {
+    className: string;
+    /** Children elements. */
+    children?: JSXElement;
+};

package/js/components/FlexBox/types.d.ts

@@ -0,0 +1,7 @@
+import { Alignment, HorizontalAlignment, Size, VerticalAlignment } from '../../constants';
+export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
+export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
+export {};

package/js/components/Heading/Stories.d.ts

@@ -0,0 +1,89 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Heading stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, render, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'NestedHeadingLevelProvider';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            as: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: import("../../types").HeadingElement[];
+                mapping: Record<string, import("../../types").HeadingElement> | undefined;
+            };
+            children: {
+                control: string;
+            };
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
+                mapping: Record<string, "overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | undefined;
+            };
+            color: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+            };
+            whiteSpace: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+        };
+    };
+    /** Default heading with text */
+    Default: {
+        args: {
+            children: string;
+        };
+    };
+    /** All supported heading elements */
+    AllLevels: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            as: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All typography */
+    AllTypography: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            typography: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Nest HeadingLevelProvider to increment heading levels */
+    NestedHeadingLevelProvider: {
+        [x: string]: any;
+    };
+};

package/js/components/Heading/Tests.d.ts

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+import { HeadingProps } from '.';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: Partial<HeadingProps> | undefined, { render, ...options }: SetupOptions<HeadingProps>) => {
+    heading: HTMLElement;
+    props: HeadingProps;
+};
+declare const _default: ({ render, screen, ...options }: SetupOptions<HeadingProps>) => void;
+export default _default;

package/js/components/Heading/constants.d.ts

@@ -0,0 +1,21 @@
+import { HeadingElement } from '../../types';
+/** The maximum authorized heading level. */
+export declare const MAX_HEADING_LEVEL = 6;
+/**
+ * Typography to use by default depending on the heading level.
+ */
+export declare const DEFAULT_TYPOGRAPHY_BY_LEVEL: {
+    h1: "display1";
+    h2: "headline";
+    h3: "title";
+    h4: "subtitle2";
+    h5: "subtitle1";
+    h6: "body2";
+};
+export interface HeadingLevelContext {
+    /** The current level */
+    level: number;
+    /** The heading element matching the current level */
+    headingElement: HeadingElement;
+}
+export declare const defaultContext: HeadingLevelContext;

package/js/components/Heading/index.d.ts

@@ -0,0 +1,44 @@
+import { HeadingElement, LumxClassName } from '../../types';
+import { TextProps } from '../Text';
+/**
+ * Defines the props of the component.
+ */
+export interface HeadingProps extends Partial<TextProps> {
+    /**
+     * Display a specific heading level instead of the one provided by parent context provider.
+     */
+    as?: HeadingElement;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Heading";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: {};
+/**
+ * Get Heading component common props
+ *
+ * @param props                 Component props.
+ * @param contextHeadingElement Heading element from context.
+ * @return Common Props
+ */
+export declare const getHeadingProps: (props: HeadingProps, contextHeadingElement?: HeadingElement) => {
+    as: HeadingElement;
+    className: string;
+    typography: import("../../constants").Typography;
+    color?: import("../../constants").ColorWithVariants | undefined;
+    colorVariant?: import("../../constants").ColorVariant | undefined;
+    truncate?: boolean | {
+        lines: number;
+    } | undefined;
+    noWrap?: boolean | undefined;
+    whiteSpace?: import("../../constants").WhiteSpace | undefined;
+    children?: import("react").ReactNode;
+    style?: import("react").CSSProperties | undefined;
+};

package/js/components/Heading/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Computes the next heading level based on the optional prop level or the parent context level.
+ *
+ * @param levelProp - The explicit level provided via props (optional).
+ * @param parentLevel - The level from the parent context.
+ * @returns The calculated heading level, clamped to the maximum allowed level.
+ */
+export declare const computeHeadingLevel: (levelProp: number | undefined, parentLevel: number) => number;

package/js/components/Icon/Stories.d.ts

@@ -0,0 +1,150 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Icon stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'SizeAndShape' | 'AllColors' | 'InsideText';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            icon: {
+                control: {
+                    type: string;
+                };
+                options: {
+                    undefined: undefined;
+                    mdiAbTesting: string;
+                    mdiAbjadArabic: string;
+                    mdiAccount: string;
+                    mdiAccountBox: string;
+                    mdiAlert: string;
+                    mdiAlertCircle: string;
+                    mdiArrowDown: string;
+                    mdiArrowUp: string;
+                    mdiAtom: string;
+                    mdiBee: string;
+                    mdiBell: string;
+                    mdiBullhornOutline: string;
+                    mdiCheck: string;
+                    mdiCheckCircle: string;
+                    mdiChevronDown: string;
+                    mdiChevronLeft: string;
+                    mdiChevronRight: string;
+                    mdiChevronUp: string;
+                    mdiClose: string;
+                    mdiCloseCircle: string;
+                    mdiDelete: string;
+                    mdiDotsHorizontal: string;
+                    mdiDragVertical: string;
+                    mdiEarth: string;
+                    mdiEmail: string;
+                    mdiEye: string;
+                    mdiFileEdit: string;
+                    mdiFlag: string;
+                    mdiFolder: string;
+                    mdiFolderGoogleDrive: string;
+                    mdiFoodApple: string;
+                    mdiGoogleCirclesExtended: string;
+                    mdiHeart: string;
+                    mdiHome: string;
+                    mdiImageBroken: string;
+                    mdiInformation: string;
+                    mdiLink: string;
+                    mdiMagnifyMinusOutline: string;
+                    mdiMagnifyPlusOutline: string;
+                    mdiMenuDown: string;
+                    mdiMessageTextOutline: string;
+                    mdiMinus: string;
+                    mdiOpenInNew: string;
+                    mdiPauseCircleOutline: string;
+                    mdiPencil: string;
+                    mdiPlay: string;
+                    mdiPlayCircleOutline: string;
+                    mdiPlus: string;
+                    mdiRadioboxBlank: string;
+                    mdiRadioboxMarked: string;
+                    mdiReply: string;
+                    mdiSend: string;
+                    mdiStar: string;
+                    mdiTextBox: string;
+                    mdiTextBoxPlus: string;
+                    mdiTram: string;
+                    mdiTranslate: string;
+                    mdiViewList: string;
+                };
+            };
+            hasShape: {
+                control: string;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[];
+                mapping: Record<string, "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl"> | undefined;
+            };
+            color: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+            };
+        };
+    };
+    /** All combinations of size and shape */
+    SizeAndShape: {
+        args: {
+            icon: string;
+        };
+        argTypes: {
+            hasShape: {
+                control: boolean;
+            };
+            size: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All combinations of color and color variants */
+    AllColors: {
+        args: {
+            size: "m";
+            icon: string;
+        };
+        argTypes: {
+            hasShape: {
+                control: boolean;
+            };
+            color: {
+                control: boolean;
+            };
+            colorVariant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Icon inside a text component (renders as inline instead of block and can adapt to the verticalAlign) */
+    InsideText: {
+        args: any;
+        argTypes: {
+            verticalAlign: {
+                control: string;
+                options: (string | undefined)[];
+            };
+        };
+    };
+};

package/js/components/Icon/Tests.d.ts

@@ -0,0 +1,14 @@
+import { SetupOptions } from '../../../testing';
+import { IconProps } from '.';
+type SetupProps = Partial<IconProps>;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<IconProps>) => {
+    i: HTMLElement;
+    svg: HTMLElement;
+    path: HTMLElement;
+    props: IconProps;
+};
+declare const _default: (renderOptions: SetupOptions<IconProps>) => void;
+export default _default;

package/js/components/Icon/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICON_SIZES: ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[];

package/js/components/Icon/index.d.ts

@@ -0,0 +1,41 @@
+import { ColorWithVariants, ColorVariant } from '../../constants';
+import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
+import { ICON_SIZES } from './constants';
+export declare const COMPONENT_NAME = "Icon";
+export declare const IconClassName: LumxClassName<typeof COMPONENT_NAME>;
+export type IconSizes = (typeof ICON_SIZES)[number];
+/**
+ * Defines the props of the component.
+ */
+export interface IconProps extends HasClassName, HasTheme {
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+     */
+    icon: string;
+    /** Size variant. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+    /** Vertical alignment of the icon (only applies for icons nested in Text/Heading). */
+    verticalAlign?: null | 'middle';
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ */
+export declare const Icon: {
+    (props: IconProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-icon";
+    defaultProps: Partial<IconProps>;
+};

package/js/components/InputHelper/Stories.d.ts

@@ -0,0 +1,43 @@
+import { Kind } from '@lumx/core/js/constants';
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup InputHelper stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, render, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            kind: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("info" | "success" | "warning" | "error")[];
+                mapping: Record<string, "info" | "success" | "warning" | "error"> | undefined;
+            };
+        };
+        args: {
+            children: string;
+            kind?: Kind | undefined;
+            ref?: import("../../types").CommonRef;
+            id?: string | undefined;
+            className?: string | undefined;
+            theme?: import("@lumx/core/js/constants").Theme | undefined;
+        };
+    };
+    /** Default input helper */
+    Default: {};
+    /** All `kind` variants */
+    AllKinds: {
+        argTypes: {
+            kind: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/InputHelper/Tests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+import { InputHelperProps } from '.';
+type SetupProps = Partial<InputHelperProps>;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<InputHelperProps>) => {
+    helper: HTMLElement;
+    props: InputHelperProps;
+};
+declare const _default: (renderOptions: SetupOptions<InputHelperProps>) => void;
+export default _default;