@carbon/react 1.83.0 → 1.84.0

package/README.md

@@ -31,7 +31,7 @@ links:
 For info on how to configure Sass for your project, here are some common
 framework's documentation worth reviewing:
 
-- [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
+- [Next.js with Sass](https://nextjs.org/docs/app/guides/sass)
 - [Remix with Sass](https://remix.run/docs/en/1.18.0/guides/styling#css-preprocessors)
 - [Gatsby with Sass](https://www.gatsbyjs.com/docs/how-to/styling/sass/)
 

package/es/components/AILabel/index.js

@@ -19,12 +19,11 @@ import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 
 var _Undo;
-const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent(_ref, ref) {
-  let {
-    className,
-    children,
-    ...rest
-  } = _ref;
+const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
+  className,
+  children,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const hasAILabelActions = React.Children.toArray(children).some(child => {
     const item = child;
@@ -49,12 +48,11 @@ AILabelContent.propTypes = {
    */
   className: PropTypes.string
 };
-const AILabelActions = /*#__PURE__*/React.forwardRef(function AILabelActions(_ref2, ref) {
-  let {
-    className,
-    children,
-    ...rest
-  } = _ref2;
+const AILabelActions = /*#__PURE__*/React.forwardRef(function AILabelActions({
+  className,
+  children,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const aiLabelActionsClasses = cx(className, {
     [`${prefix}--ai-label-actions`]: true
@@ -80,24 +78,23 @@ AILabelActions.propTypes = {
  * @deprecated Use NewPopoverAlignment instead.
  */
 
-const AILabel = /*#__PURE__*/React.forwardRef(function AILabel(_ref3, ref) {
-  let {
-    aiText = 'AI',
-    aiTextLabel,
-    textLabel,
-    align,
-    autoAlign = true,
-    children,
-    className,
-    kind = 'default',
-    onRevertClick,
-    revertActive,
-    revertLabel = 'Revert to AI input',
-    slugLabel = 'Show information',
-    ['aria-label']: ariaLabel = 'Show information',
-    size = 'xs',
-    ...rest
-  } = _ref3;
+const AILabel = /*#__PURE__*/React.forwardRef(function AILabel({
+  aiText = 'AI',
+  aiTextLabel,
+  textLabel,
+  align,
+  autoAlign = true,
+  children,
+  className,
+  kind = 'default',
+  onRevertClick,
+  revertActive,
+  revertLabel = 'Revert to AI input',
+  slugLabel = 'Show information',
+  ['aria-label']: ariaLabel = 'Show information',
+  size = 'xs',
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const id = useId('AILabel');
   const aiLabelClasses = cx(className, {

package/es/components/AISkeleton/AISkeletonIcon.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonIcon from '../SkeletonIcon/SkeletonIcon.js';
 
-const AISkeletonIcon = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const AISkeletonIcon = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const AISkeletonIconClasses = cx(className, {
     [`${prefix}--skeleton__icon--ai`]: true

package/es/components/AISkeleton/AISkeletonPlaceholder.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonPlaceholder from '../SkeletonPlaceholder/SkeletonPlaceholder.js';
 
-const AISkeletonPlaceholder = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const AISkeletonPlaceholder = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const AISkeletonPlaceholderClasses = cx({
     className,

package/es/components/AISkeleton/AISkeletonText.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonText from '../SkeletonText/SkeletonText.js';
 
-const AISkeletonText = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const AISkeletonText = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const aiSkeletonTextClasses = cx(className, {
     [`${prefix}--skeleton__text--ai`]: true

package/es/components/Accordion/Accordion.Skeleton.js

@@ -14,16 +14,15 @@ import SkeletonText from '../SkeletonText/SkeletonText.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3;
-function AccordionSkeleton(_ref) {
-  let {
-    align = 'end',
-    className,
-    count = 4,
-    isFlush,
-    open = true,
-    ordered = false,
-    ...rest
-  } = _ref;
+function AccordionSkeleton({
+  align = 'end',
+  className,
+  count = 4,
+  isFlush,
+  open = true,
+  ordered = false,
+  ...rest
+}) {
   const prefix = usePrefix();
   const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
     [`${prefix}--accordion--${align}`]: align,

package/es/components/Accordion/Accordion.js

@@ -12,17 +12,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { AccordionProvider } from './AccordionProvider.js';
 
-function Accordion(_ref) {
-  let {
-    align = 'end',
-    children,
-    className: customClassName,
-    disabled = false,
-    isFlush = false,
-    ordered = false,
-    size,
-    ...rest
-  } = _ref;
+function Accordion({
+  align = 'end',
+  children,
+  className: customClassName,
+  disabled = false,
+  isFlush = false,
+  ordered = false,
+  size,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,

package/es/components/Accordion/AccordionItem.js

@@ -22,20 +22,19 @@ import { Text } from '../Text/Text.js';
 const defaultRenderToggle = props => /*#__PURE__*/React.createElement("button", _extends({
   type: "button"
 }, props));
-function AccordionItem(_ref) {
-  let {
-    children,
-    className: customClassName = '',
-    open = false,
-    onHeadingClick,
-    renderExpando = defaultRenderToggle,
-    // remove renderExpando in next major release
-    renderToggle,
-    title = 'title',
-    disabled: controlledDisabled,
-    handleAnimationEnd,
-    ...rest
-  } = _ref;
+function AccordionItem({
+  children,
+  className: customClassName = '',
+  open = false,
+  onHeadingClick,
+  renderExpando = defaultRenderToggle,
+  // remove renderExpando in next major release
+  renderToggle,
+  title = 'title',
+  disabled: controlledDisabled,
+  handleAnimationEnd,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = useState(open);
   const [prevIsOpen, setPrevIsOpen] = useState(open);
   const accordionState = useContext(AccordionContext);

package/es/components/Accordion/AccordionProvider.js

@@ -10,11 +10,10 @@ import React, { createContext } from 'react';
 const AccordionContext = /*#__PURE__*/createContext({
   disabled: false
 });
-const AccordionProvider = _ref => {
-  let {
-    disabled,
-    children
-  } = _ref;
+const AccordionProvider = ({
+  disabled,
+  children
+}) => {
   return /*#__PURE__*/React.createElement(AccordionContext.Provider, {
     value: {
       disabled

package/es/components/AspectRatio/AspectRatio.js

@@ -17,14 +17,13 @@ import { usePrefix } from '../../internal/usePrefix.js';
  * This is often useful alongside our grid components, or for media assets like
  * images or videos.
  */
-const AspectRatio = _ref => {
-  let {
-    as: BaseComponent = 'div',
-    className: containerClassName,
-    children,
-    ratio = '1x1',
-    ...rest
-  } = _ref;
+const AspectRatio = ({
+  as: BaseComponent = 'div',
+  className: containerClassName,
+  children,
+  ratio = '1x1',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx(containerClassName, `${prefix}--aspect-ratio`, `${prefix}--aspect-ratio--${ratio}`);
   return /*#__PURE__*/React.createElement(BaseComponent, _extends({

package/es/components/BadgeIndicator/index.js

@@ -11,12 +11,11 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const BadgeIndicator = /*#__PURE__*/React.forwardRef(function BadgeIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    count,
-    ...rest
-  } = _ref;
+const BadgeIndicator = /*#__PURE__*/React.forwardRef(function BadgeIndicatorContent({
+  className: customClassName,
+  count,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--badge-indicator`, customClassName, {
     [`${prefix}--badge-indicator--count`]: count

package/es/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -20,11 +20,10 @@ function Item() {
     className: `${prefix}--link`
   }, "\xA0"));
 }
-function BreadcrumbSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function BreadcrumbSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix();
   const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/Button/Button.Skeleton.js

@@ -11,14 +11,13 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const ButtonSkeleton = _ref => {
-  let {
-    className,
-    small = false,
-    href,
-    size = 'lg',
-    ...rest
-  } = _ref;
+const ButtonSkeleton = ({
+  className,
+  small = false,
+  href,
+  size = 'lg',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const buttonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,

package/es/components/Button/ButtonBase.js

@@ -10,30 +10,29 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 
-const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(_ref, ref) {
-  let {
-    as,
-    children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
-    hasIconOnly = false,
-    href,
-    iconDescription,
-    isExpressive = false,
-    isSelected,
-    kind = 'primary',
-    onBlur,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    renderIcon: ButtonImageElement,
-    size,
-    tabIndex,
-    type = 'button',
-    ...rest
-  } = _ref;
+const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase({
+  as,
+  children,
+  className,
+  dangerDescription = 'danger',
+  disabled = false,
+  hasIconOnly = false,
+  href,
+  iconDescription,
+  isExpressive = false,
+  isSelected,
+  kind = 'primary',
+  onBlur,
+  onClick,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  renderIcon: ButtonImageElement,
+  size,
+  tabIndex,
+  type = 'button',
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const buttonClasses = cx(className, {
     [`${prefix}--btn`]: true,

package/es/components/ChatButton/ChatButton.Skeleton.js

@@ -11,12 +11,11 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const ChatButtonSkeleton = _ref => {
-  let {
-    className,
-    size,
-    ...rest
-  } = _ref;
+const ChatButtonSkeleton = ({
+  className,
+  size,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const skeletonClasses = cx(className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, {
     [`${prefix}--layout--size-${size}`]: size

package/es/components/ChatButton/ChatButton.js

@@ -13,18 +13,17 @@ import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const ChatButton = /*#__PURE__*/React.forwardRef(function ChatButton(_ref, ref) {
-  let {
-    className,
-    children,
-    disabled,
-    isQuickAction,
-    isSelected,
-    kind,
-    renderIcon,
-    size,
-    ...other
-  } = _ref;
+const ChatButton = /*#__PURE__*/React.forwardRef(function ChatButton({
+  className,
+  children,
+  disabled,
+  isQuickAction,
+  isSelected,
+  kind,
+  renderIcon,
+  size,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--chat-btn`]: true,

package/es/components/Checkbox/Checkbox.Skeleton.js

@@ -11,11 +11,10 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const CheckboxSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const CheckboxSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, `${prefix}--checkbox-skeleton`, className)

package/es/components/Checkbox/Checkbox.js

@@ -17,26 +17,25 @@ import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { Text } from '../Text/Text.js';
 
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    className,
-    decorator,
-    helperText,
-    id,
-    labelText,
-    onChange = noopFn,
-    onClick,
-    indeterminate = false,
-    invalid,
-    invalidText,
-    hideLabel,
-    readOnly,
-    title = '',
-    warn,
-    warnText,
-    slug,
-    ...other
-  } = _ref;
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  className,
+  decorator,
+  helperText,
+  id,
+  labelText,
+  onChange = noopFn,
+  onClick,
+  indeterminate = false,
+  invalid,
+  invalidText,
+  hideLabel,
+  readOnly,
+  title = '',
+  warn,
+  warnText,
+  slug,
+  ...other
+}, ref) => {
   const prefix = usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -14,23 +14,22 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 
-const CheckboxGroup = _ref => {
-  let {
-    children,
-    className,
-    decorator,
-    helperText,
-    invalid,
-    invalidText,
-    legendId,
-    legendText,
-    readOnly,
-    warn,
-    warnText,
-    slug,
-    orientation = 'vertical',
-    ...rest
-  } = _ref;
+const CheckboxGroup = ({
+  children,
+  className,
+  decorator,
+  helperText,
+  invalid,
+  invalidText,
+  legendId,
+  legendText,
+  readOnly,
+  warn,
+  warnText,
+  slug,
+  orientation = 'vertical',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;

package/es/components/ClassPrefix/index.js

@@ -9,11 +9,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
-function ClassPrefix(_ref) {
-  let {
-    children,
-    prefix
-  } = _ref;
+function ClassPrefix({
+  children,
+  prefix
+}) {
   return /*#__PURE__*/React.createElement(PrefixContext.Provider, {
     value: prefix
   }, children);

package/es/components/CodeSnippet/CodeSnippet.Skeleton.js

@@ -12,12 +12,11 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2, _span3, _span4;
-function CodeSnippetSkeleton(_ref) {
-  let {
-    className: containerClassName,
-    type = 'single',
-    ...rest
-  } = _ref;
+function CodeSnippetSkeleton({
+  className: containerClassName,
+  type = 'single',
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(containerClassName, {
     [`${prefix}--snippet`]: true,

package/es/components/CodeSnippet/CodeSnippet.js

@@ -27,32 +27,31 @@ const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
-function CodeSnippet(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    className,
-    type = 'single',
-    children,
-    disabled,
-    feedback,
-    feedbackTimeout,
-    onClick,
-    ['aria-label']: ariaLabel = 'Copy to clipboard',
-    ariaLabel: deprecatedAriaLabel,
-    copyText,
-    copyButtonDescription,
-    light,
-    showMoreText = 'Show more',
-    showLessText = 'Show less',
-    hideCopyButton,
-    wrapText = false,
-    maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
-    maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
-    minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
-    minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
-    ...rest
-  } = _ref;
+function CodeSnippet({
+  align = 'bottom',
+  autoAlign = false,
+  className,
+  type = 'single',
+  children,
+  disabled,
+  feedback,
+  feedbackTimeout,
+  onClick,
+  ['aria-label']: ariaLabel = 'Copy to clipboard',
+  ariaLabel: deprecatedAriaLabel,
+  copyText,
+  copyButtonDescription,
+  light,
+  showMoreText = 'Show more',
+  showLessText = 'Show less',
+  hideCopyButton,
+  wrapText = false,
+  maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
+  maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
+  minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
+  minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
+  ...rest
+}) {
   const [expandedCode, setExpandedCode] = useState(false);
   const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = useState(false);
   const {