@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -21,30 +21,33 @@ import '../Tooltip/Tooltip.js';
 import AspectRatio from '../AspectRatio/AspectRatio.js';
 import { createOverflowHandler } from '@carbon/utilities';
 import { Tabs as Tabs$1 } from '../Tabs/Tabs.js';
+import '../Grid/FlexGrid.js';
+import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
+import '../Grid/Row.js';
+import Column from '../Grid/Column.js';
+import '../Grid/ColumnHang.js';
+import '../Grid/GridContext.js';
 import { Text } from '../Text/Text.js';
 
-var _p, _p2;
-
 /**
  * ----------
  * PageHeader
  * ----------
  */
 
-const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_ref, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header`]: true
   }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), _p || (_p = /*#__PURE__*/React__default.createElement("p", null, "page header")), children);
+  }, other), children);
 });
 PageHeader.displayName = 'PageHeader';
 
@@ -54,20 +57,44 @@ PageHeader.displayName = 'PageHeader';
  * -----------------------
  */
 
-const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref2;
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeaderBreadcrumbBar({
+  border = true,
+  className,
+  children,
+  renderIcon: IconElement,
+  contentActions,
+  contentActionsFlush,
+  pageActions,
+  pageActionsFlush,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
-    [`${prefix}--page-header__breadcrumb-bar`]: true
+    [`${prefix}--page-header__breadcrumb-bar`]: true,
+    [`${prefix}--page-header__breadcrumb-bar-border`]: border,
+    [`${prefix}--page-header__breadcrumb__actions-flush`]: pageActionsFlush
   }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  const contentActionsClasses = cx({
+    [`${prefix}--page-header__breadcrumb__content-actions`]: !contentActionsFlush
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), _p2 || (_p2 = /*#__PURE__*/React__default.createElement("p", null, "page header breadcrumb bar")), children);
+  }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb-container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb-wrapper`
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb__icon`
+  }, /*#__PURE__*/React.createElement(IconElement, null)), children), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb__actions`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentActionsClasses
+  }, contentActions), pageActions)))));
 });
 PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 
@@ -77,16 +104,15 @@ PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
  * -----------------
  */
 
-const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHeaderContent(_ref3, ref) {
-  let {
-    className,
-    children,
-    title,
-    renderIcon: IconElement,
-    contextualActions,
-    pageActions,
-    ...other
-  } = _ref3;
+const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderContent({
+  className,
+  children,
+  title,
+  renderIcon: IconElement,
+  contextualActions,
+  pageActions,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content`]: true
@@ -100,30 +126,34 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
   useLayoutEffect(() => {
     titleRef.current && isEllipsisActive(titleRef.current);
   }, [title]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), /*#__PURE__*/React__default.createElement("div", {
+  }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__title-wrapper`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__start`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__title-container`
-  }, IconElement && /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__icon`
-  }, /*#__PURE__*/React__default.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+  }, /*#__PURE__*/React.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React.createElement(DefinitionTooltip, {
     definition: title
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     ref: titleRef,
     as: "h4",
     className: `${prefix}--page-header__content__title`
-  }, title)) : /*#__PURE__*/React__default.createElement(Text, {
+  }, title)) : /*#__PURE__*/React.createElement(Text, {
     ref: titleRef,
     as: "h4",
     className: `${prefix}--page-header__content__title`
-  }, title)), contextualActions && /*#__PURE__*/React__default.createElement("div", {
+  }, title)), contextualActions && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__contextual-actions`
-  }, contextualActions)), pageActions), children);
+  }, contextualActions)), pageActions), children)));
 });
 PageHeaderContent.displayName = 'PageHeaderContent';
 PageHeaderContent.propTypes = {
@@ -163,14 +193,13 @@ PageHeaderContent.propTypes = {
  * ----------------
  */
 
-const PageHeaderContentPageActions = _ref4 => {
-  let {
-    className,
-    children,
-    menuButtonLabel = 'Actions',
-    pageActions,
-    ...other
-  } = _ref4;
+const PageHeaderContentPageActions = ({
+  className,
+  children,
+  menuButtonLabel = 'Actions',
+  actions,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content__page-actions`]: true
@@ -189,38 +218,39 @@ const PageHeaderContentPageActions = _ref4 => {
     }
   }, [menuButtonVisibility]);
   useEffect(() => {
-    if (!containerRef.current || !Array.isArray(pageActions)) return;
+    if (!containerRef.current || !Array.isArray(actions)) return;
     createOverflowHandler({
       container: containerRef.current,
       // exclude the hidden menu button from children
       maxVisibleItems: containerRef.current.children.length - 1,
       onChange: (visible, hidden) => {
-        setHiddenItems(pageActions?.slice(visible.length));
+        setHiddenItems(actions?.slice(visible.length));
         if (hidden.length > 0) {
           setMenuButtonVisibility(true);
         }
       }
     });
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: containerRef
-  }, other), pageActions && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Array.isArray(pageActions) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pageActions.map(action => /*#__PURE__*/React__default.createElement("div", {
-    key: action.id,
-    className: "action"
-  }, action.body)), /*#__PURE__*/React__default.createElement("span", {
+  }, other), actions && /*#__PURE__*/React.createElement(React.Fragment, null, Array.isArray(actions) && /*#__PURE__*/React.createElement(React.Fragment, null, actions.map(action => /*#__PURE__*/React.createElement("div", {
+    key: action.id
+  }, /*#__PURE__*/React.cloneElement(action.body, {
+    ...action.body.props,
+    onClick: action.onClick
+  }))), /*#__PURE__*/React.createElement("span", {
     "data-offset": true,
     "data-hidden": true,
     ref: offsetRef
-  }, /*#__PURE__*/React__default.createElement(MenuButton, {
+  }, /*#__PURE__*/React.createElement(MenuButton, {
     menuAlignment: "bottom-end",
     label: menuButtonLabel,
     size: "md"
-  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default.createElement(MenuItem, {
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React.createElement(MenuItem, _extends({
     key: item.id,
-    label: item.label,
     onClick: item.onClick
-  })))))));
+  }, item.menuItem))))))));
 };
 PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
 PageHeaderContentPageActions.propTypes = {
@@ -239,7 +269,7 @@ PageHeaderContentPageActions.propTypes = {
   /**
    * The PageHeaderContent's page actions
    */
-  pageActions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
 };
 
 /**
@@ -248,20 +278,19 @@ PageHeaderContentPageActions.propTypes = {
  * ----------------
  */
 
-const PageHeaderContentText = _ref5 => {
-  let {
-    className,
-    children,
-    subtitle,
-    ...other
-  } = _ref5;
+const PageHeaderContentText = ({
+  className,
+  children,
+  subtitle,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content__body`]: true
   }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames
-  }, other), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+  }, other), subtitle && /*#__PURE__*/React.createElement(Text, {
     as: "h3",
     className: `${prefix}--page-header__content__subtitle`
   }, subtitle), children);
@@ -288,19 +317,18 @@ PageHeaderContentText.propTypes = {
  * ----------------
  */
 
-const PageHeaderHeroImage = _ref6 => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref6;
+const PageHeaderHeroImage = ({
+  className,
+  children,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__hero-image`]: true
   }, className);
   const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
   const isLg = useMatchMedia(lgMediaQuery);
-  return /*#__PURE__*/React__default.createElement(AspectRatio, _extends({
+  return /*#__PURE__*/React.createElement(AspectRatio, _extends({
     className: classNames
   }, other, {
     ratio: isLg ? '2x1' : '3x2'
@@ -324,29 +352,47 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref7, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref7;
+const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
   }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabs(_ref8, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref8;
-  return /*#__PURE__*/React__default.createElement(Tabs$1, other, children);
+const PageHeaderTabs = /*#__PURE__*/React.forwardRef(function PageHeaderTabs({
+  className,
+  children,
+  ...other
+}, ref) {
+  const prefix = usePrefix();
+  const childrenArray = React.Children.toArray(children);
+  let tabListElement = null;
+  const otherChildren = [];
+
+  // extract the TabList component so we can wrap a needed div around for
+  // layout purposes
+  childrenArray.forEach(child => {
+    if (child?.type?.displayName === 'TabList' || child?.type?.name === 'TabList') {
+      tabListElement = child;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+  return /*#__PURE__*/React.createElement(Tabs$1, other, tabListElement && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tablist-wrapper`
+  }, /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, tabListElement))), otherChildren);
 });
 PageHeaderTabs.displayName = 'PageHeaderTabs';
 

package/es/components/Pagination/Pagination.Skeleton.js

@@ -7,31 +7,30 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import SkeletonText from '../SkeletonText/SkeletonText.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
-function PaginationSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function PaginationSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--pagination`, `${prefix}--skeleton`, className)
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--pagination__left`
-  }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, {
+  }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(SkeletonText, {
     width: "70px"
-  })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React__default.createElement(SkeletonText, {
+  })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React.createElement(SkeletonText, {
     width: "35px"
-  })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React__default.createElement(SkeletonText, {
+  })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React.createElement(SkeletonText, {
     width: "105px"
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--pagination__right ${prefix}--pagination--inline`
-  }, _SkeletonText4 || (_SkeletonText4 = /*#__PURE__*/React__default.createElement(SkeletonText, {
+  }, _SkeletonText4 || (_SkeletonText4 = /*#__PURE__*/React.createElement(SkeletonText, {
     width: "70px"
   }))));
 }

package/es/components/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Select from '../Select/Select.js';
 import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
@@ -29,7 +29,7 @@ function renderSelectItems(total) {
   let counter = 1;
   const itemArr = [];
   while (counter <= total) {
-    itemArr.push(/*#__PURE__*/React__default.createElement(SelectItem, {
+    itemArr.push(/*#__PURE__*/React.createElement(SelectItem, {
       key: counter,
       value: counter,
       text: String(counter)
@@ -49,31 +49,30 @@ function getPageSize(pageSizes, pageSize) {
   }
   return pageSizes[0].value;
 }
-const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref, ref) {
-  let {
-    backwardText = 'Previous page',
-    className: customClassName = '',
-    disabled = false,
-    forwardText = 'Next page',
-    id,
-    isLastPage = false,
-    itemText = (min, max) => `${min}–${max} items`,
-    itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
-    itemsPerPageText = 'Items per page:',
-    onChange,
-    pageNumberText: _pageNumberText = 'Page Number',
-    pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
-    page: controlledPage = 1,
-    pageInputDisabled,
-    pageSize: controlledPageSize,
-    pageSizeInputDisabled,
-    pageSizes: controlledPageSizes,
-    pageText = page => `page ${page}`,
-    pagesUnknown = false,
-    size = 'md',
-    totalItems,
-    ...rest
-  } = _ref;
+const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
+  backwardText = 'Previous page',
+  className: customClassName = '',
+  disabled = false,
+  forwardText = 'Next page',
+  id,
+  isLastPage = false,
+  itemText = (min, max) => `${min}–${max} items`,
+  itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
+  itemsPerPageText = 'Items per page:',
+  onChange,
+  pageNumberText: _pageNumberText = 'Page Number',
+  pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
+  page: controlledPage = 1,
+  pageInputDisabled,
+  pageSize: controlledPageSize,
+  pageSizeInputDisabled,
+  pageSizes: controlledPageSizes,
+  pageText = page => `page ${page}`,
+  pagesUnknown = false,
+  size = 'md',
+  totalItems,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const inputId = useFallbackId(id?.toString());
   const backBtnRef = useRef(null);
@@ -193,16 +192,16 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
       });
     }
   }
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: className,
     ref: ref
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--pagination__left`
-  }, /*#__PURE__*/React__default.createElement("label", {
+  }, /*#__PURE__*/React.createElement("label", {
     id: `${prefix}-pagination-select-${inputId}-count-label`,
     className: `${prefix}--pagination__text`,
     htmlFor: `${prefix}-pagination-select-${inputId}`
-  }, itemsPerPageText), /*#__PURE__*/React__default.createElement(Select, {
+  }, itemsPerPageText), /*#__PURE__*/React.createElement(Select, {
     id: `${prefix}-pagination-select-${inputId}`,
     className: `${prefix}--select__item-count`,
     labelText: "",
@@ -212,17 +211,17 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     onChange: handleSizeChange,
     disabled: pageSizeInputDisabled || disabled,
     value: pageSize
-  }, pageSizes.map(sizeObj => /*#__PURE__*/React__default.createElement(SelectItem, {
+  }, pageSizes.map(sizeObj => /*#__PURE__*/React.createElement(SelectItem, {
     key: sizeObj.value,
     value: sizeObj.value,
     text: String(sizeObj.text)
-  }))), /*#__PURE__*/React__default.createElement("span", {
+  }))), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
+  }, pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--pagination__right`
-  }, pagesUnknown ? /*#__PURE__*/React__default.createElement("span", {
+  }, pagesUnknown ? /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`
-  }, pageText(page)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Select, {
+  }, pageText(page)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
     labelText: `Page of ${totalPages} pages`,
@@ -231,11 +230,11 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
-  }, selectItems), /*#__PURE__*/React__default.createElement("span", {
+  }, selectItems), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination__text`
-  }, pageRangeText(page, totalPages))), /*#__PURE__*/React__default.createElement("div", {
+  }, pageRangeText(page, totalPages))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--pagination__control-buttons`
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     align: "top",
     disabled: backButtonDisabled,
     kind: "ghost",
@@ -244,7 +243,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     "aria-label": backwardText,
     onClick: decrementPage,
     ref: backBtnRef
-  }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
+  }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(CaretLeft, null))), /*#__PURE__*/React.createElement(IconButton, {
     align: "top-end",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
@@ -253,7 +252,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     "aria-label": forwardText,
     onClick: incrementPage,
     ref: forwardBtnRef
-  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))))));
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React.createElement(CaretRight, null))))));
 });
 Pagination.propTypes = {
   /**

package/es/components/Pagination/experimental/PageSelector.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useId } from '../../../internal/useId.js';
@@ -15,22 +15,21 @@ import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-function PageSelector(_ref) {
-  let {
-    className = null,
-    currentPage,
-    id = 1,
-    labelText = 'Current page number',
-    totalPages,
-    ...other
-  } = _ref;
+function PageSelector({
+  className = null,
+  currentPage,
+  id = 1,
+  labelText = 'Current page number',
+  totalPages,
+  ...other
+}) {
   const prefix = usePrefix();
   const namespace = `${prefix}--unstable-pagination__page-selector`;
   const instanceId = `${namespace}__select-${useId()}`;
   const renderPages = total => {
     const pages = [];
     for (let counter = 1; counter <= total; counter += 1) {
-      pages.push(/*#__PURE__*/React__default.createElement(SelectItem, {
+      pages.push(/*#__PURE__*/React.createElement(SelectItem, {
         key: counter,
         value: counter,
         text: String(counter)
@@ -38,7 +37,7 @@ function PageSelector(_ref) {
     }
     return pages;
   };
-  return /*#__PURE__*/React__default.createElement(Select, _extends({
+  return /*#__PURE__*/React.createElement(Select, _extends({
     className: cx(namespace, className),
     hideLabel: true,
     id: instanceId || id,