@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.0

package/ssr/lib/components/banner.wrapper.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import type { BannerState, Theme, BannerWidth } from '../types';
+export declare type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Emitted when the close button is clicked.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Defines if the banner can be closed/removed by the user.
+     */
+    persistent?: boolean;
+    /**
+     * State of the banner.
+     */
+    state?: BannerState;
+    /**
+     * Adapts the banner color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     */
+    width?: BannerWidth;
+};
+export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Emitted when the close button is clicked.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Defines if the banner can be closed/removed by the user.
+     */
+    persistent?: boolean;
+    /**
+     * State of the banner.
+     */
+    state?: BannerState;
+    /**
+     * Adapts the banner color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     */
+    width?: BannerWidth;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/button-group.wrapper.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import type { ButtonGroupDirection } from '../types';
+export declare type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
+     */
+    direction?: ButtonGroupDirection;
+};
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
+     */
+    direction?: ButtonGroupDirection;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/button-pure.wrapper.d.ts

@@ -0,0 +1,122 @@
+import { HTMLAttributes } from 'react';
+import type { AlignLabel, SelectedAriaAttributes, ButtonAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+export declare type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Display button in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The icon shown.
+     */
+    icon?: LinkButtonPureIconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button.
+     */
+    size?: BreakpointCustomizable<TextSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: ThemeExtendedElectricDark;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonType;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: TextWeight;
+};
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Display button in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The icon shown.
+     */
+    icon?: LinkButtonPureIconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button.
+     */
+    size?: BreakpointCustomizable<TextSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: ThemeExtendedElectricDark;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonType;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: TextWeight;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/button.wrapper.d.ts

@@ -0,0 +1,90 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, ButtonAriaAttributes, BreakpointCustomizable, IconName, ThemeExtendedElectric, ButtonType, ButtonVariant } from '../types';
+export declare type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonType;
+    /**
+     * The style variant of the button.
+     */
+    variant?: ButtonVariant;
+};
+export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonType;
+    /**
+     * The style variant of the button.
+     */
+    variant?: ButtonVariant;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/carousel.wrapper.d.ts

@@ -0,0 +1,72 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme } from '../types';
+export declare type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string;
+    /**
+     * If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: CarouselInternationalization;
+    /**
+     * Emitted when carousel's content slides.
+     */
+    onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Sets the amount of slides visible at the same time.
+     */
+    slidesPerPage?: BreakpointCustomizable<number>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     */
+    wrapContent?: boolean;
+};
+export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string;
+    /**
+     * If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: CarouselInternationalization;
+    /**
+     * Emitted when carousel's content slides.
+     */
+    onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Sets the amount of slides visible at the same time.
+     */
+    slidesPerPage?: BreakpointCustomizable<number>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     */
+    wrapContent?: boolean;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, FormState } from '../types';
+export declare type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+};
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/content-wrapper.wrapper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
+export declare type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines the background color.
+     */
+    backgroundColor?: ContentWrapperBackgroundColor;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
+     */
+    width?: ContentWrapperWidth;
+};
+export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines the background color.
+     */
+    backgroundColor?: ContentWrapperBackgroundColor;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
+     */
+    width?: ContentWrapperWidth;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/divider.wrapper.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import type { DividerColor, DividerOrientation, Theme } from '../types';
+export declare type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines color depending on theme.
+     */
+    color?: DividerColor;
+    /**
+     * Defines orientation.
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines color depending on theme.
+     */
+    color?: DividerColor;
+    /**
+     * Defines orientation.
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import type { FieldsetWrapperLabelSize, FormState } from '../types';
+export declare type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The size of the label text.
+     */
+    labelSize?: FieldsetWrapperLabelSize;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Marks the Fieldset as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+};
+export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The size of the label text.
+     */
+    labelSize?: FieldsetWrapperLabelSize;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Marks the Fieldset as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/flex-item.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
+export declare type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
+     */
+    alignSelf?: FlexItemAlignSelf;
+    /**
+     * The shorthand property for the combined definition of "shrink", "grow" and "basis"
+     */
+    flex?: FlexItemFlex;
+    /**
+     * The ability to allow/disallow the flex child to grow.
+     */
+    grow?: FlexItemGrow;
+    /**
+     * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
+     */
+    offset?: FlexItemOffset;
+    /**
+     * The ability to allow/disallow the flex child to shrink.
+     */
+    shrink?: FlexItemShrink;
+    /**
+     * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
+     */
+    width?: FlexItemWidth;
+};
+export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
+     */
+    alignSelf?: FlexItemAlignSelf;
+    /**
+     * The shorthand property for the combined definition of "shrink", "grow" and "basis"
+     */
+    flex?: FlexItemFlex;
+    /**
+     * The ability to allow/disallow the flex child to grow.
+     */
+    grow?: FlexItemGrow;
+    /**
+     * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
+     */
+    offset?: FlexItemOffset;
+    /**
+     * The ability to allow/disallow the flex child to shrink.
+     */
+    shrink?: FlexItemShrink;
+    /**
+     * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
+     */
+    width?: FlexItemWidth;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/flex.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
+export declare type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
+     */
+    alignContent?: FlexAlignContent;
+    /**
+     * Defines how the flex items are aligned along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
+     */
+    direction?: FlexDirection;
+    /**
+     * Defines the flex containers content flow if 2 or more containers are siblings of each other.
+     */
+    inline?: FlexInline;
+    /**
+     * Defines how the flex items are aligned along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: FlexWrap;
+};
+export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
+     */
+    alignContent?: FlexAlignContent;
+    /**
+     * Defines how the flex items are aligned along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
+     */
+    direction?: FlexDirection;
+    /**
+     * Defines the flex containers content flow if 2 or more containers are siblings of each other.
+     */
+    inline?: FlexInline;
+    /**
+     * Defines how the flex items are aligned along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: FlexWrap;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/grid-item.wrapper.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import type { GridItemOffset, GridItemSize } from '../types';
+export declare type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
+     */
+    offset?: GridItemOffset;
+    /**
+     * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
+     */
+    size?: GridItemSize;
+};
+export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
+     */
+    offset?: GridItemOffset;
+    /**
+     * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
+     */
+    size?: GridItemSize;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/grid.wrapper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { GridDirection, GridGutter, GridWrap } from '../types';
+export declare type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
+     */
+    direction?: GridDirection;
+    /**
+     * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
+     */
+    gutter?: GridGutter;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: GridWrap;
+};
+export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
+     */
+    direction?: GridDirection;
+    /**
+     * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
+     */
+    gutter?: GridGutter;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: GridWrap;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;