@canonical/react-components 0.37.9 → 0.39.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,14 +1,14 @@
 import { HTMLProps } from "react";
 import type { AccordionHeadings, AccordionSectionProps } from "./AccordionSection";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Section = AccordionSectionProps & {
+export type Section = AccordionSectionProps & {
     /**
      * An optional key for the section component. It will also be
      * used to track which section is selected.
      */
     key?: string | number;
 };
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * Optional classes applied to the parent element.
      */

package/dist/components/Accordion/AccordionSection/AccordionSection.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { Headings } from "../../../types";
-export declare type AccordionHeadings = Exclude<Headings, "h1">;
-export declare type Props = {
+export type AccordionHeadings = Exclude<Headings, "h1">;
+export type Props = {
     /**
      * The content of the section.
      */

package/dist/components/ActionButton/ActionButton.d.ts

@@ -7,7 +7,7 @@ export declare enum Label {
     WAITING = "Waiting for action to complete",
     SUCCESS = "Action completed"
 }
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The appearance of the button.
      */

package/dist/components/ArticlePagination/ArticlePagination.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLProps } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * Optional classes to add to the wrapping element.
      */

package/dist/components/Badge/Badge.d.ts

@@ -7,7 +7,7 @@ export declare const BadgeType: {
 /**
  * The props for the Badge component.
  */
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * Numeric value to be displayed.
      */

package/dist/components/Button/Button.d.ts

@@ -12,7 +12,7 @@ export declare const ButtonAppearance: {
  * The type of the Button props.
  * @template P - The type of the props if providing a component to `element`
  */
-export declare type Props<P = null> = {
+export type Props<P = null> = {
     /**
      * The appearance of the button.
      */

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content of the card.
      */

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.d.ts

@@ -1,7 +1,7 @@
 import { HTMLProps } from "react";
 import type { ReactNode } from "react";
 import type { PropsWithSpread } from "../../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The type of the input element.
      */

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,4 +1,4 @@
 import type { CheckableInputProps } from "./CheckableInput";
-export declare type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType">;
 declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => JSX.Element;
 export default CheckboxInput;

package/dist/components/Chip/Chip.d.ts

@@ -9,7 +9,7 @@ export declare const ChipType: {
     readonly NEGATIVE: "negative";
     readonly POSITIVE: "positive";
 };
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The appearance of the chip.
      */

package/dist/components/Code/Code.d.ts

@@ -1,5 +1,5 @@
 import type { ClassName } from "../../types";
-export declare type Props = {
+export type Props = {
     children: string;
     className?: ClassName;
     inline?: boolean;

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -1,7 +1,7 @@
 import { HTMLProps } from "react";
 import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * Optional class(es) to pass to the wrapping div element.
      */

package/dist/components/CodeSnippet/CodeSnippetBlock.d.ts

@@ -7,7 +7,7 @@ export declare const CodeSnippetBlockAppearance: {
     readonly URL: "url";
     readonly WINDOWS_PROMPT: "windowsPrompt";
 };
-export declare type Props = {
+export type Props = {
     /**
      * The appearance of the code block.
      */

package/dist/components/CodeSnippet/CodeSnippetDropdown.d.ts

@@ -1,11 +1,11 @@
 import type { ChangeEventHandler, HTMLProps } from "react";
-export declare type DropdownOptionProps = {
+export type DropdownOptionProps = {
     /**
      * The label of the dropdown option.
      */
     label: string;
 } & HTMLProps<HTMLOptionElement>;
-export declare type Props = {
+export type Props = {
     /**
      * Function for handling the select value changing.
      */

package/dist/components/Col/Col.d.ts

@@ -1,8 +1,8 @@
 import type { ElementType, HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type ColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export declare const colSizes: ColSize[];
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content of the column.
      */

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -11,7 +11,7 @@ export declare enum Label {
  * The props for the ContextualMenu component.
  * @template L - The type of the link props.
  */
-export declare type Props<L> = PropsWithSpread<{
+export type Props<L> = PropsWithSpread<{
     /**
      * Whether the menu should adjust to fit in the screen.
      */

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -8,13 +8,13 @@ export declare enum Label {
  * The type of the menu links.
  * @template L - The type of the link props.
  */
-export declare type MenuLink<L = null> = string | ButtonProps<L> | ButtonProps<L>[];
-export declare type Position = "left" | "center" | "right";
+export type MenuLink<L = null> = string | ButtonProps<L> | ButtonProps<L>[];
+export type Position = "left" | "center" | "right";
 /**
  * The props for the ContextualMenuDropdown component.
  * @template L - The type of the link props.
  */
-export declare type Props<L = null> = {
+export type Props<L = null> = {
     adjustedPosition?: Position;
     autoAdjust?: boolean;
     closePortal?: (evt?: MouseEvent) => void;

package/dist/components/Field/Field.d.ts

@@ -3,7 +3,7 @@ import type { ClassName } from "../../types";
 /**
  * The props for the Field component.
  */
-export declare type Props = {
+export type Props = {
     /**
      * The content for caution validation.
      */
@@ -31,7 +31,7 @@ export declare type Props = {
     /**
      * Optional class(es) to pass to the help text element.
      */
-    helpClassName?: ReactNode;
+    helpClassName?: string;
     /**
      * An id to give to the help element.
      */

package/dist/components/Form/Form.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content of the form.
      */

package/dist/components/Icon/Icon.d.ts

@@ -33,7 +33,7 @@ export declare const ICONS: {
     readonly rss: "rss";
     readonly email: "email";
 };
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * Optional classes to add to the icon element.
      */

package/dist/components/Input/Input.d.ts

@@ -3,7 +3,7 @@ import type { ClassName, PropsWithSpread } from "../../types";
 /**
  * The props for the Input component.
  */
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content for caution validation.
      */

package/dist/components/Input/Input.js

@@ -82,7 +82,7 @@ var Input = function Input(_ref) {
         inputRef.current.focus();
       }
     }
-  }, [takeFocus]);
+  }, [takeFocus, takeFocusDelay]);
   var input;
 
   if (type === "checkbox") {
@@ -109,7 +109,7 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
-    helpClassName: helpClassName,
+    helpClassName: helpClassName + "",
     helpId: helpId,
     isTickElement: type === "checkbox" || type === "radio",
     label: fieldLabel,

package/dist/components/Label/Label.d.ts

@@ -3,7 +3,7 @@ import type { ClassName, PropsWithSpread } from "../../types";
 /**
  * The props for the Label component.
  */
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The label content.
      */

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content of the link.
      */

package/dist/components/List/List.d.ts

@@ -1,14 +1,14 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, Headings } from "../../types";
-export declare type ListItem = ReactNode | ({
+export type ListItem = ReactNode | ({
     content: ReactNode;
 } & HTMLProps<HTMLLIElement>);
-export declare type SteppedListItem = {
+export type SteppedListItem = {
     content: ReactNode;
     title: ReactNode;
     titleElement?: Headings;
-} & HTMLProps<HTMLLIElement>;
-export declare type Props = {
+} & Omit<HTMLProps<HTMLLIElement>, "title" | "content">;
+export type Props = {
     /**
      * Optional class(es) to pass to the wrapping element.
      */

package/dist/components/List/List.js

@@ -62,7 +62,7 @@ var generateItems = function generateItems(_ref) {
     if (stepped) {
       body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TitleComponent, {
         className: "p-stepped-list__title"
-      }, title), /*#__PURE__*/_react.default.createElement("p", {
+      }, title), /*#__PURE__*/_react.default.createElement("div", {
         className: "p-stepped-list__content"
       }, content));
     } else {

package/dist/components/MainTable/MainTable.d.ts

@@ -2,7 +2,7 @@ import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread, SortDirection } from "../../types";
 import type { TableProps } from "../Table";
 import type { TableCellProps } from "../TableCell";
-export declare type MainTableHeader = PropsWithSpread<{
+export type MainTableHeader = PropsWithSpread<{
     /**
      * The content of the table header.
      */
@@ -20,13 +20,13 @@ export declare type MainTableHeader = PropsWithSpread<{
      */
     heading?: string;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
-export declare type MainTableCell = PropsWithSpread<{
+export type MainTableCell = PropsWithSpread<{
     /**
      * The content of the table cell.
      */
     content?: ReactNode;
 }, Omit<TableCellProps, "children">>;
-export declare type MainTableRow = PropsWithSpread<{
+export type MainTableRow = PropsWithSpread<{
     /**
      * Optional class(es) to apply to the row.
      */
@@ -53,7 +53,7 @@ export declare type MainTableRow = PropsWithSpread<{
      */
     sortData?: Record<string, unknown>;
 }, HTMLProps<HTMLTableRowElement>>;
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The default key to sort the rows by.
      */

package/dist/components/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import type { HTMLProps, ReactNode } from "react";
 import { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * Buttons to display underneath the main modal content.
      */

package/dist/components/ModularTable/ModularTable.d.ts

@@ -2,7 +2,7 @@ import { ReactNode, HTMLProps } from "react";
 import { TableCellProps, TableHeaderProps, TableRowProps } from "react-table";
 import type { Column, UseTableOptions, Cell, Row, HeaderGroup } from "react-table";
 import { PropsWithSpread } from "../../types";
-export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
+export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
     /**
      * The columns of the table.
      */
@@ -19,6 +19,10 @@ export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
      * Optional extra row to display underneath the main table content.
      */
     footer?: ReactNode;
+    /**
+     * Optional argument to make the tables be sortable and use the `useSortBy` plugin.
+     */
+    sortable?: Boolean;
     /**
      * This function is used to resolve any props needed for a particular column's header cell.
      */
@@ -33,5 +37,5 @@ export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
     getCellProps?: (cell: Cell<D>) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
     getRowId?: UseTableOptions<D>["getRowId"];
 }, HTMLProps<HTMLTableElement>>;
-declare function ModularTable({ data, columns, emptyMsg, footer, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
+declare function ModularTable({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.js

@@ -19,7 +19,7 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _excluded = ["data", "columns", "emptyMsg", "footer", "getHeaderProps", "getRowProps", "getCellProps", "getRowId"];
+var _excluded = ["data", "columns", "emptyMsg", "footer", "sortable", "getHeaderProps", "getRowProps", "getCellProps", "getRowId"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,6 +40,7 @@ function ModularTable(_ref) {
       columns = _ref.columns,
       emptyMsg = _ref.emptyMsg,
       footer = _ref.footer,
+      sortable = _ref.sortable,
       getHeaderProps = _ref.getHeaderProps,
       getRowProps = _ref.getRowProps,
       getCellProps = _ref.getCellProps,
@@ -50,7 +51,7 @@ function ModularTable(_ref) {
     columns: columns,
     data: data,
     getRowId: getRowId || undefined
-  }),
+  }, sortable ? _reactTable.useSortBy : undefined),
       getTableProps = _useTable.getTableProps,
       getTableBodyProps = _useTable.getTableBodyProps,
       headerGroups = _useTable.headerGroups,
@@ -60,11 +61,14 @@ function ModularTable(_ref) {
   var showEmpty = !!emptyMsg && (!rows || rows.length === 0);
   return /*#__PURE__*/_react.default.createElement(_Table.default, _extends({}, getTableProps(), props), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_TableRow.default, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
-      return /*#__PURE__*/_react.default.createElement(_TableHeader.default, column.getHeaderProps([{
+      return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
+        sort: column.isSorted ? column.isSortedDesc ? "descending" : "ascending" : "none"
+      }, column.getHeaderProps([{
         className: column.className
       }, {
         className: column.getCellIcon ? "p-table__cell--icon-placeholder" : ""
-      }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column))]), column.render("Header"));
+      }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column)), // Only call this if we want it to be sortable too.
+      sortable ? column.getSortByToggleProps() : {}])), column.render("Header"));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
     // This function is responsible for lazily preparing a row for rendering.

package/dist/components/Navigation/Navigation.d.ts

@@ -3,7 +3,7 @@ import type { GenerateLink, NavItem, LogoProps } from "./types";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { SearchBoxProps } from "../SearchBox";
 import { Theme } from "../../enums";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * By default the header is constrained to the width of the grid. Use this
      * option to make the header take the full width of the page.

package/dist/components/Navigation/NavigationLink/NavigationLink.d.ts

@@ -1,5 +1,5 @@
 import type { GenerateLink, NavLink } from "../types";
-declare type Props = {
+type Props = {
     generateLink?: GenerateLink;
     link: NavLink;
 };

package/dist/components/Navigation/NavigationMenu/NavigationMenu.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLProps } from "react";
 import type { GenerateLink, NavMenu } from "../types";
 import { PropsWithSpread } from "../../../types";
-declare type Props = PropsWithSpread<NavMenu & {
+type Props = PropsWithSpread<NavMenu & {
     generateLink?: GenerateLink;
 }, HTMLProps<HTMLLIElement>>;
 /**

package/dist/components/Navigation/types.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, HTMLProps, ReactNode } from "react";
 import { PropsWithSpread } from "../../types";
-export declare type NavLinkBase = {
+export type NavLinkBase = {
     /**
      * Whether this nav item is currently selected.
      */
@@ -14,14 +14,14 @@ export declare type NavLinkBase = {
      */
     url?: string;
 };
-export declare type NavLinkAnchor = PropsWithSpread<NavLinkBase & {
+export type NavLinkAnchor = PropsWithSpread<NavLinkBase & {
     url: string;
 }, HTMLAttributes<HTMLAnchorElement>>;
-export declare type NavLinkButton = PropsWithSpread<NavLinkBase & {
+export type NavLinkButton = PropsWithSpread<NavLinkBase & {
     url?: never;
 }, HTMLAttributes<HTMLButtonElement>>;
-export declare type NavLink = NavLinkAnchor | NavLinkButton;
-export declare type NavMenu = {
+export type NavLink = NavLinkAnchor | NavLinkButton;
+export type NavMenu = {
     /**
      * Whether to align the dropdown to the right edge of the navigation item.
      */
@@ -38,13 +38,13 @@ export declare type NavMenu = {
 /**
  * Navigation items which can be either a link or a menu containing links.
  */
-export declare type NavItem = NavLink | NavMenu;
+export type NavItem = NavLink | NavMenu;
 /**
  * A function that can be used to generate link elements when you don't want to
  * use a standard HTML anchor.
  */
-export declare type GenerateLink = (item: NavLink) => ReactNode;
-export declare type LogoProps = PropsWithSpread<{
+export type GenerateLink = (item: NavLink) => ReactNode;
+export type LogoProps = PropsWithSpread<{
     /**
      * An icon to display in the tag.
      */

package/dist/components/Notification/Notification.d.ts

@@ -9,14 +9,14 @@ export declare const NotificationSeverity: {
     readonly NEGATIVE: "negative";
     readonly POSITIVE: "positive";
 };
-declare type NotificationAction = {
+type NotificationAction = {
     label: string;
     onClick: () => void;
 };
 /**
  * The props for the Notification component.
  */
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * A list of up to two actions that the notification can perform.
      */

package/dist/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLProps } from "react";
 import type { PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The current page being viewed.
      */
@@ -25,6 +25,10 @@ export declare type Props = PropsWithSpread<{
      * The number of pages at which to truncate the pagination items.
      */
     truncateThreshold?: number;
+    /**
+     * Whether or not the pagination is ceneterd on the page.
+     */
+    centered?: boolean;
 }, HTMLProps<HTMLElement>>;
-declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, ...navProps }: Props) => JSX.Element;
+declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, ...navProps }: Props) => JSX.Element;
 export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _PaginationButton = _interopRequireDefault(require("./PaginationButton"));
 
 var _PaginationItem = _interopRequireDefault(require("./PaginationItem"));
 
-var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold"];
+var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -121,6 +125,7 @@ var Pagination = function Pagination(_ref) {
       scrollToTop = _ref.scrollToTop,
       _ref$truncateThreshol = _ref.truncateThreshold,
       truncateThreshold = _ref$truncateThreshol === void 0 ? 10 : _ref$truncateThreshol,
+      centered = _ref.centered,
       navProps = _objectWithoutProperties(_ref, _excluded);
 
   // return early if no pagination is required
@@ -139,8 +144,13 @@ var Pagination = function Pagination(_ref) {
     scrollToTop && scrollTop();
   };
 
-  return /*#__PURE__*/_react.default.createElement("nav", navProps, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "p-pagination"
+  return /*#__PURE__*/_react.default.createElement("nav", _extends({
+    className: "p-pagination",
+    "aria-label": "Pagination"
+  }, navProps), /*#__PURE__*/_react.default.createElement("ol", {
+    className: (0, _classnames.default)("p-pagination__items", {
+      "u-align--center": centered
+    })
   }, /*#__PURE__*/_react.default.createElement(_PaginationButton.default, {
     key: "back",
     direction: "back",

package/dist/components/Pagination/PaginationButton/PaginationButton.d.ts

@@ -3,8 +3,8 @@ export declare enum Label {
     Next = "Next page",
     Previous = "Previous page"
 }
-export declare type PaginationDirection = "forward" | "back";
-export declare type Props = {
+export type PaginationDirection = "forward" | "back";
+export type Props = {
     /**
      * The direction of the pagination.
      */

package/dist/components/Pagination/PaginationItem/PaginationItem.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEventHandler } from "react";
-export declare type Props = {
+export type Props = {
     /**
      * Whether the pagination item is active, i.e. the current page is this page.
      */

package/dist/components/PasswordToggle/PasswordToggle.d.ts

@@ -8,7 +8,7 @@ export declare enum Label {
 /**
  * The props for the Password Toggle component.
  */
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content for caution validation.
      */

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,4 +1,4 @@
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
-export declare type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType">;
 declare const RadioInput: ({ label, ...radioProps }: Props) => JSX.Element;
 export default RadioInput;

package/dist/components/Row/Row.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+export type Props = PropsWithSpread<{
     /**
      * The content of the row.
      */

package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.d.ts

@@ -1,5 +1,5 @@
 import type { SearchAndFilterChip, SearchAndFilterData } from "../types";
-export declare type Props = {
+export type Props = {
     /**
      * The chip data to display in the panel.
      */