@bloomreach/react-banana-ui 1.26.0 → 1.27.1

package/dist/components/buttons/button/button.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './button.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/buttons/button/button.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '..';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Button>;
 export default meta;
 export type Story = StoryObj<typeof Button>;

package/dist/components/buttons/button/button.types.d.ts

@@ -14,7 +14,7 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * @default 'default'
      *
      */
-    color?: 'default' | 'alternative' | 'danger';
+    color?: 'alternative' | 'danger' | 'default';
     /**
      * If `true`, the button will be disabled.
      * @default false
@@ -55,5 +55,5 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * The button type.
      * @default 'secondary'
      */
-    type?: 'primary' | 'secondary' | 'tertiary' | 'inline';
+    type?: 'inline' | 'primary' | 'secondary' | 'tertiary';
 }

package/dist/components/buttons/button-group/button-group.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './button-group.stories';
+import { Meta } from '@storybook/react';
 import { default as ButtonGroup } from './button-group';
 declare const meta: Meta<typeof ButtonGroup>;
 export default meta;

package/dist/components/buttons/button-group/button-group.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { ButtonGroup } from '..';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof ButtonGroup>;
 export default meta;
 export type Story = StoryObj<typeof ButtonGroup>;

package/dist/components/buttons/toggle-button/toggle-button.d.ts

@@ -1,11 +1,11 @@
-import { ReactElement, ForwardedRef } from 'react';
+import { ForwardedRef, ReactElement } from 'react';
 import { ToggleButtonProps } from './toggle-button.types';
 /**
  * The current component is used as an argument for the `forwardRef` function to forward ref.
  * However, to keep the generic interface of the `ToggleButton` component we have to cast type
  * after wrapping this component with the `forwardRef` function.
  */
-declare function ToggleButtonInner<T extends string | number = string>(props: ToggleButtonProps<T>, forwardedRef: ForwardedRef<HTMLButtonElement>): ReactElement;
+declare function ToggleButtonInner<T extends number | string = string>(props: ToggleButtonProps<T>, forwardedRef: ForwardedRef<HTMLButtonElement>): ReactElement;
 /**
  * The `ToggleButton` component can be used to group related options.
  *
@@ -41,7 +41,7 @@ declare function ToggleButtonInner<T extends string | number = string>(props: To
  * ```
  * by default `value` has a `string` type.
  */
-declare const _default: <T extends string | number = string>(props: ToggleButtonProps<T> & {
+declare const _default: <T extends number | string = string>(props: ToggleButtonProps<T> & {
     ref?: ForwardedRef<HTMLButtonElement>;
 }) => ReturnType<typeof ToggleButtonInner>;
 export default _default;

package/dist/components/buttons/toggle-button/toggle-button.stories.d.ts

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { ToggleButton } from '..';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof ToggleButton>;
 export default meta;
-type Story<T extends string | number = string> = StoryObj<typeof ToggleButton<T>>;
+type Story<T extends number | string = string> = StoryObj<typeof ToggleButton<T>>;
 export declare const Basic: Story;
 export declare const Selectable: Story<number>;

package/dist/components/buttons/toggle-button/toggle-button.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
 import { ButtonProps } from '../button/button.types';
-export interface ToggleButtonProps<T extends string | number = string> extends Omit<ButtonProps, 'onClick'> {
+export interface ToggleButtonProps<T extends number | string = string> extends Omit<ButtonProps, 'onClick'> {
     /**
      * The content of the component.
      */

package/dist/components/buttons/toggle-button-group/toggle-button-group.d.ts

@@ -5,8 +5,7 @@ import { ToggleButtonGroupMultipleProps, ToggleButtonGroupSingleProps } from './
  * However, to keep the generic interface of the `ToggleButtonGroup` component we have to cast type
  * after wrapping this component with the `forwardRef` function.
  */
-declare function ToggleButtonGroupInner<T extends string | number = string>(props: ToggleButtonGroupSingleProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>): ReactElement;
-declare function ToggleButtonGroupInner<T extends string | number = string>(props: ToggleButtonGroupMultipleProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>): ReactElement;
+declare function ToggleButtonGroupInner<T extends number | string = string>(props: ToggleButtonGroupMultipleProps<T> | ToggleButtonGroupSingleProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>): ReactElement;
 /**
  * The `ToggleButtonGroup` controls the selected state of its child buttons when given its own `value` prop.
  * To emphasize groups of related toggle buttons, a group should share a common container.
@@ -56,7 +55,7 @@ declare function ToggleButtonGroupInner<T extends string | number = string>(prop
  * ```
  * by default `value` has a `string` type and `string[]` for `multiple` mode.
  */
-declare const _default: <T extends string | number = string>(props: ToggleButtonGroupSingleProps<T> | (ToggleButtonGroupMultipleProps<T> & {
+declare const _default: <T extends number | string = string>(props: (ToggleButtonGroupMultipleProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
-})) => ReturnType<typeof ToggleButtonGroupInner<T>>;
+}) | ToggleButtonGroupSingleProps<T>) => ReturnType<typeof ToggleButtonGroupInner<T>>;
 export default _default;

package/dist/components/buttons/toggle-button-group/toggle-button-group.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { ToggleButtonGroup, ToggleButtonGroupMultipleProps, ToggleButtonGroupSingleProps } from '..';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof ToggleButtonGroup>;
 export default meta;
 type Story = StoryObj<ToggleButtonGroupSingleProps>;

package/dist/components/buttons/toggle-button-group/toggle-button-group.types.d.ts

@@ -1,12 +1,19 @@
 import { SyntheticEvent } from 'react';
 import { ButtonGroupProps } from '../button-group/button-group.types';
-interface ToggleButtonGroupBaseProps extends Omit<ButtonGroupProps, 'onChange'> {
+export interface ToggleButtonGroupMultipleProps<T extends number | string = string> extends ToggleButtonGroupBaseProps {
+    multiple: true;
     /**
-     * If `true`, allow multiple items to be selected (checkbox behavior).
+     * Callback fired when the component is clicked. Value is an array of selected values.
+     * If no value is selected the value is an empty array.
      */
-    multiple?: boolean;
+    onChange?: (event: SyntheticEvent<HTMLButtonElement>, value: T[]) => void;
+    /**
+     * The currently selected an array of values.
+     * The value must have reference equality with the option in order to be selected.
+     */
+    value?: T[];
 }
-export interface ToggleButtonGroupSingleProps<T extends string | number = string> extends ToggleButtonGroupBaseProps {
+export interface ToggleButtonGroupSingleProps<T extends number | string = string> extends ToggleButtonGroupBaseProps {
     multiple?: false;
     /**
      * Callback fired when the component is clicked. Value is a single value of the toggle button.
@@ -19,17 +26,10 @@ export interface ToggleButtonGroupSingleProps<T extends string | number = string
      */
     value?: T;
 }
-export interface ToggleButtonGroupMultipleProps<T extends string | number = string> extends ToggleButtonGroupBaseProps {
-    multiple: true;
-    /**
-     * Callback fired when the component is clicked. Value is an array of selected values.
-     * If no value is selected the value is an empty array.
-     */
-    onChange?: (event: SyntheticEvent<HTMLButtonElement>, value: T[]) => void;
+interface ToggleButtonGroupBaseProps extends Omit<ButtonGroupProps, 'onChange'> {
     /**
-     * The currently selected an array of values.
-     * The value must have reference equality with the option in order to be selected.
+     * If `true`, allow multiple items to be selected (checkbox behavior).
      */
-    value?: T[];
+    multiple?: boolean;
 }
 export {};

package/dist/components/data-display/actions-container/actions-container.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './actions-container.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/actions-container/actions-container.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as ActionsContainer } from './actions-container';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof ActionsContainer>;
 export default meta;
 export type Story = StoryObj<typeof ActionsContainer>;

package/dist/components/data-display/actions-container/actions-container.types.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 export interface ActionsContainerProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

package/dist/components/data-display/asset-tag/asset-tag.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './asset-tag.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/asset-tag/asset-tag.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as AssetTag } from './asset-tag';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof AssetTag>;
 export default meta;
 export type Story = StoryObj<typeof AssetTag>;

package/dist/components/data-display/asset-tag/asset-tag.types.d.ts

@@ -8,24 +8,24 @@ export interface AssetTagProps {
      * Custom class name for the container of the component.
      */
     className?: string;
-    /**
-     * Variant of tag.
-     * @default 'default'
-     */
-    variant?: AssetTagVariant;
     /**
      * If `true`, the tag can be dismissed by clicking on close icon.
      * Removing of the tag needs to be handled by the user using `onDismiss`.
      * @default false
      */
     dismissible?: boolean;
+    /**
+     * Display an icon at the beginning of the tag.
+     */
+    icon?: ReactElement;
     /**
      * Callback fired when tag is closed or dismissed.
      */
-    onDismiss?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    onDismiss?: (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>) => void;
     /**
-     * Display an icon at the beginning of the tag.
+     * Variant of tag.
+     * @default 'default'
      */
-    icon?: ReactElement;
+    variant?: AssetTagVariant;
 }
-export type AssetTagVariant = 'default' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8' | 'accent-9';
+export type AssetTagVariant = 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8' | 'accent-9' | 'default';

package/dist/components/data-display/badge/badge.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './badge.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const AllVariantsWithStandardPadding: Story;

package/dist/components/data-display/badge/badge.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Badge } from './badge';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Badge>;
 export default meta;
 export type Story = StoryObj<typeof Badge>;

package/dist/components/data-display/badge/badge.types.d.ts

@@ -21,5 +21,5 @@ export interface BadgeProps {
      * Variant of the badge.
      * @default 'default'
      */
-    variant?: 'default' | 'secondary' | 'tertiary' | 'success' | 'neutral';
+    variant?: 'default' | 'neutral' | 'secondary' | 'success' | 'tertiary';
 }

package/dist/components/data-display/description/description.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './description.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/description/description.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Description } from './description';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Description>;
 export default meta;
 export type Story = StoryObj<typeof Description>;

package/dist/components/data-display/description/description.types.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 export interface DescriptionProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

package/dist/components/data-display/filter-tag/filter-tag.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './filter-tag.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/filter-tag/filter-tag.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as FilterTag } from './filter-tag';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof FilterTag>;
 export default meta;
 export type Story = StoryObj<typeof FilterTag>;

package/dist/components/data-display/filter-tag/filter-tag.types.d.ts

@@ -8,22 +8,22 @@ export interface FilterTagProps {
      * Custom class name for the container of the component.
      */
     className?: string;
-    /**
-     * Allows to control whether the tag is selected.
-     * This is a controlled counterpart of `defaultSelected`
-     */
-    selected?: boolean;
     /**
      * If `true`, the tag is initially selected.
      * @default false
      */
     defaultSelected?: boolean;
+    /**
+     * Display an icon at the beginning of the tag.
+     */
+    icon?: ReactElement;
     /**
      * Callback fired when tag's selection changes
      */
-    onChange?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, selected: boolean) => void;
+    onChange?: (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>, selected: boolean) => void;
     /**
-     * Display an icon at the beginning of the tag.
+     * Allows to control whether the tag is selected.
+     * This is a controlled counterpart of `defaultSelected`
      */
-    icon?: ReactElement;
+    selected?: boolean;
 }

package/dist/components/data-display/header/header.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './header.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/header/header.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Header } from './header';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Header>;
 export default meta;
 export type Story = StoryObj<typeof Header>;

package/dist/components/data-display/header/header.types.d.ts

@@ -1,13 +1,13 @@
 import { MouseEventHandler, ReactNode } from 'react';
 export interface HeaderProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The title of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * If defined, the component will display a back button and the callback will
      * be called when the button is clicked.

package/dist/components/data-display/index.d.ts

@@ -5,13 +5,13 @@ export * from './description';
 export * from './filter-tag';
 export * from './header';
 export * from './input-tag';
+export * from './table';
 export * from './table-body';
-export * from './table-cell-action';
 export * from './table-cell';
+export * from './table-cell-action';
 export * from './table-foot';
 export * from './table-head';
 export * from './table-row';
 export * from './table-sort-label';
-export * from './table';
 export * from './tag-group';
 export * from './typography';

package/dist/components/data-display/input-tag/input-tag.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './input-tag.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/input-tag/input-tag.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as InputTag } from './input-tag';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof InputTag>;
 export default meta;
 export type Story = StoryObj<typeof InputTag>;

package/dist/components/data-display/input-tag/input-tag.types.d.ts

@@ -8,20 +8,16 @@ export interface InputTagProps {
      * Custom class name for the container of the component.
      */
     className?: string;
-    /**
-     * Allows to control whether the tag is selected.
-     * This is a controlled counterpart of `defaultSelected`
-     */
-    selected?: boolean;
     /**
      * If `true`, the tag is initially selected.
      * @default false
      */
     defaultSelected?: boolean;
     /**
-     * Callback fired when tag's selection changes.
+     * If `true`, the tag is disabled.
+     * @default false
      */
-    onChange?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, selected: boolean) => void;
+    disabled?: boolean;
     /**
      * If `true`, the tag can be dismissed by clicking on close icon.
      * Removing of the tag needs to be handled by the user using `onDismiss`.
@@ -29,10 +25,17 @@ export interface InputTagProps {
      */
     dismissible?: boolean;
     /**
-     * If `true`, the tag is disabled.
-     * @default false
+     * Display an icon at the beginning of the tag.
      */
-    disabled?: boolean;
+    icon?: ReactElement;
+    /**
+     * Callback fired when tag's selection changes.
+     */
+    onChange?: (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>, selected: boolean) => void;
+    /**
+     * Callback fired when tag is closed or dismissed.
+     */
+    onDismiss?: (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>) => void;
     /**
      * If `true`, the tag is not interactable but can be dismissible.
      * The state should not change on click.
@@ -40,11 +43,8 @@ export interface InputTagProps {
      */
     readOnly?: boolean;
     /**
-     * Callback fired when tag is closed or dismissed.
-     */
-    onDismiss?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Display an icon at the beginning of the tag.
+     * Allows to control whether the tag is selected.
+     * This is a controlled counterpart of `defaultSelected`
      */
-    icon?: ReactElement;
+    selected?: boolean;
 }

package/dist/components/data-display/table/table-context.d.ts

@@ -1,4 +1,4 @@
 import { TableContextProps } from './table.types';
 declare const TableContext: import('react').Context<TableContextProps | null>;
-export declare function useTableContext(): TableContextProps | null;
+export declare function useTableContext(): null | TableContextProps;
 export default TableContext;

package/dist/components/data-display/table/table-section-context.d.ts

@@ -1,4 +1,4 @@
 import { TableSectionContextProps } from './table.types';
 declare const TableSectionContext: import('react').Context<TableSectionContextProps | null>;
-export declare function useTableSectionContext(): TableSectionContextProps | null;
+export declare function useTableSectionContext(): null | TableSectionContextProps;
 export default TableSectionContext;

package/dist/components/data-display/table/table.qa.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './table.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: Story;

package/dist/components/data-display/table/table.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Table } from './table';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Table>;
 export default meta;
 export type Story = StoryObj<typeof Table>;

package/dist/components/data-display/table/table.types.d.ts

@@ -1,21 +1,21 @@
-import { ReactNode, HTMLAttributes } from 'react';
-type TableRowDensity = 'small' | 'medium' | 'large';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface TableContextProps {
     rowDensity: TableRowDensity;
 }
-export interface TableSectionContextProps {
-    variant: 'head' | 'body' | 'foot';
-    hasPagination?: boolean;
-}
 export interface TableProps extends HTMLAttributes<HTMLTableElement> {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     rowDensity?: TableRowDensity;
 }
+export interface TableSectionContextProps {
+    hasPagination?: boolean;
+    variant: 'body' | 'foot' | 'head';
+}
+type TableRowDensity = 'large' | 'medium' | 'small';
 export {};

package/dist/components/data-display/table-body/table-body.types.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component, normally `TableRow`.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

package/dist/components/data-display/table-cell/table-cell.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
-type TableCellBaseProps = ThHTMLAttributes<HTMLTableCellElement> & TdHTMLAttributes<HTMLTableCellElement>;
 export interface TableCellProps extends TableCellBaseProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }
+type TableCellBaseProps = TdHTMLAttributes<HTMLTableCellElement> & ThHTMLAttributes<HTMLTableCellElement>;
 export {};

package/dist/components/data-display/table-cell-action/table-cell-action.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 export interface TableCellActionProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component, usually a <Button>, <MenuButton> or <ButtonGroup>.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * If `true`, the component will be floating on top of the cell content.
      * @default false

package/dist/components/data-display/table-foot/table-foot.d.ts

@@ -9,11 +9,11 @@ import { TableFootProps } from './table-foot.types';
  *
  * export default function MyCustomTableFooter() {
  *   return (
-*      <TableFoot className="custom-footer">
-*        <TableRow>
-*          <TableCell>This cell will be rendered as `<td>`</TableCell>
-*        </TableRow>
-*     </TableFoot>
+ *      <TableFoot className="custom-footer">
+ *        <TableRow>
+ *          <TableCell>This cell will be rendered as `<td>`</TableCell>
+ *        </TableRow>
+ *     </TableFoot>
  *   );
  * }
  * ```