rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/esm/MaskedInput/adjustCaretPosition.js

@@ -1,18 +1,17 @@
 'use client';
 const defaultArray = [];
 const emptyString = '';
-export default function adjustCaretPosition(_ref) {
-  let {
-    previousConformedValue = emptyString,
-    previousPlaceholder = emptyString,
-    currentCaretPosition = 0,
-    conformedValue,
-    rawValue,
-    placeholderChar,
-    placeholder,
-    indexesOfPipedChars = defaultArray,
-    caretTrapIndexes = defaultArray
-  } = _ref;
+export default function adjustCaretPosition({
+  previousConformedValue = emptyString,
+  previousPlaceholder = emptyString,
+  currentCaretPosition = 0,
+  conformedValue,
+  rawValue,
+  placeholderChar,
+  placeholder,
+  indexesOfPipedChars = defaultArray,
+  caretTrapIndexes = defaultArray
+}) {
   if (currentCaretPosition === 0 || !rawValue.length) {
     return 0;
   }

package/esm/MaskedInput/conformToMask.js

@@ -3,16 +3,7 @@ import { convertMaskToPlaceholder, processCaretTraps, defaultPlaceholderChar } f
 export function isArray(value) {
   return Array.isArray && Array.isArray(value) || value instanceof Array;
 }
-export default function conformToMask(rawValue, mask, config) {
-  if (rawValue === void 0) {
-    rawValue = '';
-  }
-  if (mask === void 0) {
-    mask = [];
-  }
-  if (config === void 0) {
-    config = {};
-  }
+export default function conformToMask(rawValue = '', mask = [], config = {}) {
   if (!isArray(mask)) {
     // If someone passes a function as the mask property, we should call the
     // function to get the mask array - Normally this is handled by the

package/esm/MaskedInput/createTextMaskInputElement.js

@@ -18,17 +18,16 @@ export default function createTextMaskInputElement(config) {
     // `update` is called by framework components whenever they want to update the `value` of the input element.
     // The caller can send a `rawValue` to be conformed and set on the input element. However, the default use-case
     // is for this to be read from the `inputElement` directly.
-    update(rawValue, _temp) {
+    update(rawValue, {
+      inputElement,
+      mask: providedMask,
+      guide,
+      pipe,
+      placeholderChar = defaultPlaceholderChar,
+      keepCharPositions = false,
+      showMask = false
+    } = config) {
       var _pipeResults, _pipeResults2;
-      let {
-        inputElement,
-        mask: providedMask,
-        guide,
-        pipe,
-        placeholderChar = defaultPlaceholderChar,
-        keepCharPositions = false,
-        showMask = false
-      } = _temp === void 0 ? config : _temp;
       // if `rawValue` is `undefined`, read from the `inputElement`
       if (typeof rawValue === 'undefined') {
         rawValue = inputElement.value;

package/esm/MaskedInput/utilities.js

@@ -2,13 +2,7 @@
 const emptyArray = [];
 const strCaretTrap = '[]';
 export const defaultPlaceholderChar = '_';
-export function convertMaskToPlaceholder(mask, placeholderChar) {
-  if (mask === void 0) {
-    mask = emptyArray;
-  }
-  if (placeholderChar === void 0) {
-    placeholderChar = defaultPlaceholderChar;
-  }
+export function convertMaskToPlaceholder(mask = emptyArray, placeholderChar = defaultPlaceholderChar) {
   if (!Array.isArray(mask)) {
     throw new Error('Text-mask:convertMaskToPlaceholder; The mask property must be an array.');
   }

package/esm/Menu/MenuItem.js

@@ -40,12 +40,11 @@ const MenuItem = forwardRef((props, ref) => {
     selected: selected,
     disabled: disabled,
     onActivate: handleSelectItem
-  }, (_ref, menuitemRef) => {
-    let {
-      selected,
-      active,
-      ...menuitem
-    } = _ref;
+  }, ({
+    selected,
+    active,
+    ...menuitem
+  }, menuitemRef) => {
     const classes = merge(className, withPrefix({
       active: selected,
       disabled,

package/esm/MultiCascadeTree/hooks/useCascadeValue.js

@@ -112,10 +112,7 @@ function useCascadeValue(props, flattenData) {
       removedValue: uniqRemovedValue
     };
   }, [valueKey, childrenKey, uncheckableItemValues, getChildrenValue]);
-  const transformValue = useCallback(function (value) {
-    if (value === void 0) {
-      value = [];
-    }
+  const transformValue = useCallback((value = []) => {
     if (!cascade) {
       return value;
     }

package/esm/MultiCascadeTree/utils.js

@@ -4,10 +4,7 @@ import remove from 'lodash/remove';
  * get all ancestor nodes of given node
  * @param {*} node
  */
-export function getNodeParents(node, parentKey, valueKey) {
-  if (parentKey === void 0) {
-    parentKey = 'parent';
-  }
+export function getNodeParents(node, parentKey = 'parent', valueKey) {
   const parents = [];
   const traverse = node => {
     if (node !== null && node !== void 0 && node[parentKey]) {

package/esm/Nav/AdaptiveNavItem.js

@@ -11,7 +11,7 @@ import SidenavItem from "../Sidenav/SidenavItem.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useInternalId } from "../internals/hooks/index.js";
 import { NavbarContext } from "../Navbar/NavbarContext.js";
-import { SidenavContext } from "../Sidenav/Sidenav.js";
+import { SidenavContext } from "../Sidenav/SidenavContext.js";
 import { NavMenuActionType, NavMenuContext } from "./NavMenu.js";
 
 /**

package/esm/Nav/Nav.js

@@ -13,7 +13,7 @@ import Box from "../internals/Box/index.js";
 import { forwardRef, deprecateComponent } from "../internals/utils/index.js";
 import { useStyles, useCustom, useEnsuredRef, useControlled } from "../internals/hooks/index.js";
 import { NavbarContext } from "../Navbar/NavbarContext.js";
-import { SidenavContext } from "../Sidenav/Sidenav.js";
+import { SidenavContext } from "../Sidenav/SidenavContext.js";
 const DeprecatedNavDropdown = deprecateComponent(NavDropdown, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');
 DeprecatedNavDropdown.Menu = deprecateComponent(NavDropdownMenu, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');
 DeprecatedNavDropdown.Item = deprecateComponent(NavDropdownItem, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');

package/esm/Nav/NavDropdown.js

@@ -89,11 +89,10 @@ const NavDropdown = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Menu, {
     renderMenuButton: renderMenuButton,
     openMenuOn: menuButtonTriggers,
-    renderMenuPopup: (_ref, popupRef) => {
-      let {
-        open,
-        ...popupProps
-      } = _ref;
+    renderMenuPopup: ({
+      open,
+      ...popupProps
+    }, popupRef) => {
       const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: popupRef,
@@ -110,11 +109,10 @@ const NavDropdown = forwardRef((props, ref) => {
         onClose === null || onClose === void 0 || onClose();
       }
     }
-  }, (_ref2, menuContainerRef) => {
-    let {
-      open,
-      ...menuContainer
-    } = _ref2;
+  }, ({
+    open,
+    ...menuContainer
+  }, menuContainerRef) => {
     const classes = merge(className, withPrefix({
       disabled,
       open

package/esm/Nav/NavDropdownItem.js

@@ -64,12 +64,11 @@ const NavDropdownItem = forwardRef((props, ref) => {
     selected: selected,
     disabled: disabled,
     onActivate: handleSelectItem
-  }, (_ref, menuitemRef) => {
-    let {
-      selected,
-      active,
-      ...menuitem
-    } = _ref;
+  }, ({
+    selected,
+    active,
+    ...menuitem
+  }, menuitemRef) => {
     const classes = merge(className, withPrefix({
       'with-icon': icon,
       active: selected,

package/esm/Nav/NavDropdownMenu.js

@@ -57,43 +57,38 @@ const NavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const Icon = rtl ? PagePreviousIcon : PageNextIcon;
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: (_ref, buttonRef) => {
-      let {
-        open,
-        ...menuButtonProps
-      } = _ref;
-      return /*#__PURE__*/React.createElement(MenuItem, {
-        disabled: disabled
-      }, (_ref2, menuitemRef) => {
-        let {
-          selected,
-          active,
-          ...menuitem
-        } = _ref2;
-        const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-          'with-icon': icon,
-          open,
-          active: selected,
-          disabled,
-          focus: active
-        }));
-        return /*#__PURE__*/React.createElement("div", _extends({
-          ref: mergeRefs(buttonRef, menuitemRef),
-          className: classes,
-          "data-event-key": eventKey,
-          "data-event-key-type": typeof eventKey
-        }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
-          className: prefix('menu-icon')
-        }), title, !noCaret && /*#__PURE__*/React.createElement(Icon, {
-          className: prefix`toggle-icon`
-        }));
-      });
-    },
-    renderMenuPopup: (_ref3, popupRef) => {
-      let {
+    renderMenuButton: ({
+      open,
+      ...menuButtonProps
+    }, buttonRef) => /*#__PURE__*/React.createElement(MenuItem, {
+      disabled: disabled
+    }, ({
+      selected,
+      active,
+      ...menuitem
+    }, menuitemRef) => {
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
+        'with-icon': icon,
         open,
-        ...popupProps
-      } = _ref3;
+        active: selected,
+        disabled,
+        focus: active
+      }));
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: mergeRefs(buttonRef, menuitemRef),
+        className: classes,
+        "data-event-key": eventKey,
+        "data-event-key-type": typeof eventKey
+      }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), title, !noCaret && /*#__PURE__*/React.createElement(Icon, {
+        className: prefix`toggle-icon`
+      }));
+    }),
+    renderMenuPopup: ({
+      open,
+      ...popupProps
+    }, popupRef) => {
       const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: popupRef,
@@ -103,11 +98,10 @@ const NavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, (_ref4, menuContainerRef) => {
-    let {
-      open,
-      ...menuContainer
-    } = _ref4;
+  }, ({
+    open,
+    ...menuContainer
+  }, menuContainerRef) => {
     const classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled,
       open,

package/esm/Nav/NavMenu.js

@@ -8,7 +8,7 @@ import NavbarDropdownMenu from "../Navbar/NavbarDropdownMenu.js";
 import SidenavDropdown from "../Sidenav/SidenavDropdown.js";
 import SidenavDropdownMenu from "../Sidenav/SidenavDropdownMenu.js";
 import { NavbarContext } from "../Navbar/index.js";
-import { SidenavContext } from "../Sidenav/Sidenav.js";
+import { SidenavContext } from "../Sidenav/SidenavContext.js";
 export const NavMenuContext = /*#__PURE__*/React.createContext(null);
 NavMenuContext.displayName = 'NavMenu.Context';
 export let NavMenuActionType = /*#__PURE__*/function (NavMenuActionType) {

package/esm/Navbar/NavbarDropdown.js

@@ -61,11 +61,10 @@ const NavbarDropdown = forwardRef((props, ref) => {
         onClose === null || onClose === void 0 || onClose();
       }
     }
-  }, (_ref, containerRef) => {
-    let {
-      open,
-      ...props
-    } = _ref;
+  }, ({
+    open,
+    ...props
+  }, containerRef) => {
     const classes = merge(className, withPrefix({
       disabled,
       open
@@ -82,10 +81,9 @@ const NavbarDropdown = forwardRef((props, ref) => {
       className: toggleClassName,
       placement: placement,
       disabled: disabled
-    }, omit(buttonProps, ['open']), toggleProps), title)), /*#__PURE__*/React.createElement(Disclosure.Content, null, (_ref2, elementRef) => {
-      let {
-        open
-      } = _ref2;
+    }, omit(buttonProps, ['open']), toggleProps), title)), /*#__PURE__*/React.createElement(Disclosure.Content, null, ({
+      open
+    }, elementRef) => {
       const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", {
         ref: elementRef,

package/esm/Navbar/NavbarDropdownMenu.js

@@ -67,11 +67,10 @@ const NavbarDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     hideOnClickOutside: true,
     trigger: ['click', 'hover'],
     onToggle: (open, event) => onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, undefined, event)
-  }, (_ref, containerRef) => {
-    let {
-      open,
-      ...props
-    } = _ref;
+  }, ({
+    open,
+    ...props
+  }, containerRef) => {
     const classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled,
       open,
@@ -80,11 +79,10 @@ const NavbarDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, containerRef),
       className: classes
-    }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, (_ref2, buttonRef) => {
-      let {
-        open,
-        ...buttonProps
-      } = _ref2;
+    }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, ({
+      open,
+      ...buttonProps
+    }, buttonRef) => {
       const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
         'with-icon': icon,
         open,
@@ -104,10 +102,9 @@ const NavbarDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
       }), title, /*#__PURE__*/React.createElement(Icon, {
         className: prefix`toggle-icon`
       }));
-    }), /*#__PURE__*/React.createElement(Disclosure.Content, null, (_ref3, elementRef) => {
-      let {
-        open
-      } = _ref3;
+    }), /*#__PURE__*/React.createElement(Disclosure.Content, null, ({
+      open
+    }, elementRef) => {
       const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: elementRef,

package/esm/NumberInput/utils/number.js

@@ -26,10 +26,7 @@ function getDecimalLength(value) {
   }
   return 0;
 }
-export function decimals() {
-  for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
-    values[_key] = arguments[_key];
-  }
+export function decimals(...values) {
   const lengths = values.map(getDecimalLength);
   return Math.max(...lengths);
 }

package/esm/Progress/Progress.d.ts

@@ -1,4 +1,4 @@
-import ProgressCircle from './ProgressCircle';
+import ProgressCircle from '../ProgressCircle';
 import ProgressLine, { ProgressLineProps } from './ProgressLine';
 import { InternalRefForwardingComponent } from '../internals/types';
 export interface Progress extends InternalRefForwardingComponent<'div', ProgressLineProps> {

package/esm/Progress/Progress.js

@@ -1,5 +1,5 @@
 'use client';
-import ProgressCircle from "./ProgressCircle.js";
+import ProgressCircle from "../ProgressCircle/index.js";
 import ProgressLine from "./ProgressLine.js";
 /**
  * The `Progress` component is used to display the progress of current operation.

package/esm/Progress/ProgressInfo.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ProgressInfoProps {
+    /** The prefix of the component CSS class */
+    classPrefix: string;
+    /** Percent of progress */
+    percent: number;
+    /** Progress status */
+    status?: 'success' | 'fail' | 'active';
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
+}
+/**
+ * Shared component for displaying progress information
+ * Used by both ProgressLine and ProgressCircle
+ */
+declare const ProgressInfo: (props: ProgressInfoProps) => React.JSX.Element;
+export default ProgressInfo;

package/esm/Progress/ProgressInfo.js

@@ -0,0 +1,24 @@
+'use client';
+import React from 'react';
+import { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
+import { useStyles } from "../internals/hooks/index.js";
+/**
+ * Shared component for displaying progress information
+ * Used by both ProgressLine and ProgressCircle
+ */
+const ProgressInfo = props => {
+  const {
+    percent,
+    renderInfo,
+    status,
+    classPrefix
+  } = props;
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  const showIcon = status && status !== 'active';
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('info')
+  }, renderInfo ? renderInfo(percent, status) : showIcon ? PROGRESS_STATUS_ICON[status] : `${percent}%`);
+};
+export default ProgressInfo;

package/esm/Progress/ProgressLine.d.ts

@@ -1,21 +1,35 @@
+import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { ProgressSection } from './types';
 export interface ProgressLineProps extends BoxProps {
-    /** Line color */
-    strokeColor?: string;
+    /** Whether to show indeterminate loading animation */
+    indeterminate?: boolean;
     /** Percent of progress */
     percent?: number;
+    /** The placement of the percent info */
+    percentPlacement?: 'start' | 'end' | 'insideStart' | 'insideEnd' | 'insideCenter';
+    /** Line color */
+    strokeColor?: string;
     /** Line width */
     strokeWidth?: number;
-    /** Trail color */
-    trailColor?: string;
-    /** Trail width */
-    trailWidth?: number;
     /** Show text */
     showInfo?: boolean;
     /** Progress status */
     status?: 'success' | 'fail' | 'active';
+    /** Whether to apply a striped effect to the progress bar */
+    striped?: boolean;
+    /** Multiple sections with different colors */
+    sections?: ProgressSection[];
+    /** Trail color */
+    trailColor?: string;
+    /** Trail width */
+    trailWidth?: number;
     /**  The progress bar is displayed vertically */
     vertical?: boolean;
+    /** The radius of the progress bar */
+    radius?: number | string;
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
 }
 /**
  * The `Progress.Line` component is used to display the progress of current operation.

package/esm/Progress/ProgressLine.js

@@ -2,8 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
-import { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
-import { forwardRef } from "../internals/utils/index.js";
+import ProgressInfo from "./ProgressInfo.js";
+import ProgressStroke from "./ProgressStroke.js";
+import ProgressSections from "./ProgressSections.js";
+import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
 import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The `Progress.Line` component is used to display the progress of current operation.
@@ -16,61 +18,70 @@ const ProgressLine = forwardRef((props, ref) => {
   const {
     as,
     className,
+    classPrefix = 'progress-line',
     percent = 0,
+    percentPlacement = 'end',
+    radius,
     strokeColor,
     strokeWidth,
-    trailColor,
-    trailWidth,
     status,
+    striped,
+    style,
     showInfo = true,
-    classPrefix = 'progress',
+    trailColor,
+    trailWidth,
     vertical,
+    sections,
+    renderInfo,
+    indeterminate,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     prefix,
-    withPrefix
+    withPrefix,
+    cssVar
   } = useStyles(classPrefix);
-  const lineInnerStyle = {
-    backgroundColor: trailColor,
-    [vertical ? 'width' : 'height']: trailWidth || strokeWidth
-  };
-  const percentStyle = {
-    [vertical ? 'height' : 'width']: `${percent}%`,
-    backgroundColor: strokeColor,
-    [vertical ? 'width' : 'height']: strokeWidth
-  };
-  const classes = merge(className, withPrefix('line', {
-    'line-vertical': vertical,
-    [`line-${status}`]: !!status
+  const classes = merge(className, withPrefix({
+    vertical,
+    striped,
+    indeterminate
   }));
-  const showIcon = status && status !== 'active';
-  const info = showIcon ? /*#__PURE__*/React.createElement("span", {
-    className: prefix(`icon-${status || ''}`)
-  }, PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/React.createElement("span", {
-    className: prefix('info-status')
-  }, percent, "%");
+  const totalPercent = sections ? sections.reduce((sum, section) => sum + section.percent, 0) : percent;
+  const styles = mergeStyles(cssVar('trail-size', getCssValue(trailWidth || strokeWidth)), cssVar('trail-color', trailColor), cssVar('stroke', `${totalPercent}%`), cssVar('size', getCssValue(strokeWidth)), cssVar('color', strokeColor), cssVar('radius', getCssValue(radius)), style);
+  const info = /*#__PURE__*/React.createElement(ProgressInfo, {
+    percent: percent,
+    renderInfo: renderInfo,
+    status: status,
+    classPrefix: classPrefix
+  });
+
+  // Determine if the info should be placed inside the stroke
+  const isInsidePlacement = percentPlacement === null || percentPlacement === void 0 ? void 0 : percentPlacement.startsWith('inside');
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
+    ref: ref,
+    className: classes,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",
-    "aria-valuenow": percent
-  }, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/React.createElement("div", {
-    className: prefix('line-outer')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefix('line-inner'),
-    style: lineInnerStyle
+    "aria-valuenow": totalPercent,
+    "data-status": status,
+    "data-placement": percentPlacement,
+    style: styles
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: prefix('outer')
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefix('line-bg'),
-    style: percentStyle
-  }))), showInfo ? /*#__PURE__*/React.createElement("div", {
-    className: prefix('info')
-  }, info) : null);
+    className: prefix('trail')
+  }, sections ? /*#__PURE__*/React.createElement(ProgressSections, {
+    classPrefix: classPrefix,
+    sections: sections,
+    vertical: vertical
+  }) : /*#__PURE__*/React.createElement(ProgressStroke, {
+    classPrefix: classPrefix,
+    percent: indeterminate ? 100 : percent,
+    vertical: vertical
+  }, showInfo && isInsidePlacement ? info : null))), showInfo && !isInsidePlacement ? info : null);
 });
 ProgressLine.displayName = 'ProgressLine';
 export default ProgressLine;

package/esm/Progress/ProgressSections.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ProgressSection } from './types';
+export interface ProgressSectionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The classPrefix passed from parent component */
+    classPrefix: string;
+    /** Multiple sections with different colors */
+    sections: ProgressSection[];
+    /** Whether the progress bar is displayed vertically */
+    vertical?: boolean;
+}
+/**
+ * A component to render multiple sections in a progress bar
+ */
+declare const ProgressSections: React.MemoExoticComponent<(props: ProgressSectionsProps) => React.JSX.Element>;
+export default ProgressSections;