@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/statusBar/StatusBar.js

@@ -1,213 +1,56 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["percentage", "tooltip", "tooltipPosition", "tooltipDelay", "color", "className"];
-import React from 'react';
-import PropTypes from 'prop-types';
-import classname from 'classnames';
-import Tooltip from '../tooltip/Tooltip';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-var LEFT = OverlayTrigger.LEFT;
-var TOP = OverlayTrigger.TOP;
-var RIGHT = OverlayTrigger.RIGHT;
-var BOTTOM = OverlayTrigger.BOTTOM;
-var SMALL = 'small';
-var LARGE = 'large';
-var LIGHT = 'light';
-var BOLD = 'bold';
-var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivider) {
-  var _ref$percentage = _ref.percentage,
-    percentage = _ref$percentage === void 0 ? 0 : _ref$percentage,
-    tooltip = _ref.tooltip,
-    _ref$tooltipPosition = _ref.tooltipPosition,
-    tooltipPosition = _ref$tooltipPosition === void 0 ? TOP : _ref$tooltipPosition,
-    _ref$tooltipDelay = _ref.tooltipDelay,
-    tooltipDelay = _ref$tooltipDelay === void 0 ? 50 : _ref$tooltipDelay,
-    color = _ref.color,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = classname('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
-  var progressBar = /*#__PURE__*/React.createElement("div", _extends({
-    key: index,
-    className: classNames,
-    style: {
-      width: "".concat(percentage, "%")
-    }
-  }, props));
-  if (tooltip) {
-    var tooltipElement = /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-".concat(index),
-      width: 'auto'
-    }, tooltip);
-    return /*#__PURE__*/React.createElement(OverlayTrigger, {
-      key: index,
-      placement: tooltipPosition,
-      overlay: tooltipElement,
-      delay: tooltipDelay
-    }, progressBar);
-  }
-  return progressBar;
-};
-var renderAllProgressBars = function renderAllProgressBars(progress, useProgressDivider) {
-  if (!progress.length) {
-    return null;
-  }
-  return progress.map(function (item, index) {
-    return renderProgressBar(item, index, useProgressDivider);
-  });
-};
-var getIconAlignment = function getIconAlignment(icon) {
-  return icon.alignment || LEFT;
-};
-var getIconColorClassName = function getIconColorClassName(icon) {
-  return icon.color || 'text-color-gray';
-};
-var getLabelAlignment = function getLabelAlignment(label) {
-  return label.alignment || RIGHT;
-};
-var getLabelColorClassName = function getLabelColorClassName(label) {
-  return label.color || 'text-color-dark';
-};
-var getLabelAlignmentClassName = function getLabelAlignmentClassName(label) {
-  return label.alignment === TOP ? 'align-items-end' : 'align-items-center';
-};
-var getProgressBarHightClassName = function getProgressBarHightClassName(size) {
-  return size === SMALL && 'height-5' || size === LARGE && 'height-10';
-};
-var getIsIconLeftAndLabelRight = function getIsIconLeftAndLabelRight(icon, iconAlignment, label, labelAlignment) {
-  return icon.name && iconAlignment === LEFT && label.value && labelAlignment === RIGHT;
-};
-var getIsIconRightAndLabelLeft = function getIsIconRightAndLabelLeft(icon, iconAlignment, label, labelAlignment) {
-  return icon.name && iconAlignment === RIGHT && label.value && labelAlignment === LEFT;
-};
-var getIsIconAndLabelLeft = function getIsIconAndLabelLeft(icon, iconAlignment, label, labelAlignment) {
-  return icon.name && iconAlignment === LEFT && label.value && labelAlignment === LEFT;
-};
-var getIsIconAndLabelRight = function getIsIconAndLabelRight(icon, iconAlignment, label, labelAlignment) {
-  return icon.name && iconAlignment === RIGHT && label.value && labelAlignment === RIGHT;
-};
-var getIsIconOnly = function getIsIconOnly(label, icon) {
-  return !label.value && icon.name;
-};
-var getIsIconOnlyLeft = function getIsIconOnlyLeft(isIconOnly, iconAlignment) {
-  return isIconOnly && iconAlignment === LEFT;
-};
-var getIsIconOnlyRight = function getIsIconOnlyRight(isIconOnly, iconAlignment) {
-  return isIconOnly && iconAlignment === RIGHT;
-};
-var getIsLabelOnly = function getIsLabelOnly(label, icon) {
-  return label.value && !icon.name;
-};
-var getIsLabelOnlyLeft = function getIsLabelOnlyLeft(isLabelOnly, labelAlignment) {
-  return isLabelOnly && labelAlignment === LEFT;
-};
-var getIsLabelOnlyRight = function getIsLabelOnlyRight(isLabelOnly, labelAlignment) {
-  return isLabelOnly && labelAlignment === RIGHT;
-};
-var renderIcon = function renderIcon(icon, size) {
-  if (!icon.name) {
-    return null;
-  }
-  var iconColor = getIconColorClassName(icon);
-  var iconAlignment = getIconAlignment(icon);
-  var iconWrapperClasses = classname(iconAlignment === LEFT && 'flex-order-1 margin-right-5', iconAlignment === RIGHT && 'flex-order-2 margin-left-5');
-  var iconClasses = classname('rioglyph', icon.name && icon.name, iconColor, size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className && icon.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: iconWrapperClasses
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClasses
-  }));
-};
-var renderLabel = function renderLabel(label, size, labelWrapperClasses) {
-  if (!label.value) {
-    return null;
-  }
-  var labelColor = getLabelColorClassName(label);
-  var labelAlignment = getLabelAlignment(label);
-  var labelClasses = classname('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', labelAlignment === TOP && 'width-0', labelColor, size === SMALL && 'text-size-16', size === LARGE && 'text-size-h3', label.weight !== LIGHT && 'text-bold', label.className && label.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: labelWrapperClasses
-  }, /*#__PURE__*/React.createElement("span", {
-    className: labelClasses
-  }, label.value));
-};
-
-// eslint-disable-next-line complexity
-var StatusBar = function StatusBar(props) {
-  var _props$progress = props.progress,
-    progress = _props$progress === void 0 ? [] : _props$progress,
-    icon = props.icon,
-    label = props.label,
-    size = props.size,
-    className = props.className,
-    useProgressDivider = props.useProgressDivider;
-
-  // Default values for icon and label alignment
-  var iconAlignment = getIconAlignment(icon);
-  var labelAlignment = getLabelAlignment(label);
-  var isIconLeftAndLabelRight = getIsIconLeftAndLabelRight(icon, iconAlignment, label, labelAlignment);
-  var isIconRightAndLabelLeft = getIsIconRightAndLabelLeft(icon, iconAlignment, label, labelAlignment);
-  var isIconAndLabelLeft = getIsIconAndLabelLeft(icon, iconAlignment, label, labelAlignment);
-  var isIconAndLabelRight = getIsIconAndLabelRight(icon, iconAlignment, label, labelAlignment);
-  var isIconOnly = getIsIconOnly(label, icon);
-  var isIconOnlyLeft = getIsIconOnlyLeft(isIconOnly, iconAlignment);
-  var isIconOnlyRight = getIsIconOnlyRight(isIconOnly, iconAlignment);
-  var isLabelOnly = getIsLabelOnly(label, icon);
-  var isLabelOnlyLeft = getIsLabelOnlyLeft(isLabelOnly, labelAlignment);
-  var isLabelOnlyRight = getIsLabelOnlyRight(isLabelOnly, labelAlignment);
-  var wrapperClasses = classname('StatusBar', 'width-100pct', 'display-flex', getLabelAlignmentClassName(label), className);
-  var progressLabelWrapperClasses = classname('display-flex', 'flex-1-0', labelAlignment === TOP && 'flex-order-1 flex-column margin-bottom-10', isIconAndLabelRight && 'flex-order-1 align-items-center', isIconAndLabelLeft && 'flex-order-2 align-items-center', isIconLeftAndLabelRight && 'flex-order-2 align-items-center', isIconRightAndLabelLeft && 'flex-order-1 align-items-center', isLabelOnlyLeft && 'align-items-center', isLabelOnlyRight && 'align-items-center', isIconOnlyLeft && 'flex-order-2 align-items-center', isIconOnlyRight && 'flex-order-1 align-items-center');
-  var labelWrapperClasses = classname(labelAlignment === TOP && 'display-flex justify-content-center', isIconAndLabelLeft && 'flex-order-1 margin-right-10', isIconAndLabelRight && 'flex-order-2 margin-left-10', isIconLeftAndLabelRight && 'flex-order-2 margin-left-10', isIconRightAndLabelLeft && 'flex-order-1 margin-right-10', isLabelOnlyLeft && 'flex-order-1 margin-right-10', isLabelOnlyRight && 'flex-order-2 margin-left-10');
-  var progressOuterWrapperClasses = classname('display-flex', 'flex-1-0', isIconAndLabelLeft && 'flex-order-2', isIconAndLabelRight && 'flex-order-1', isIconLeftAndLabelRight && 'flex-order-1', isIconRightAndLabelLeft && 'flex-order-2', isLabelOnlyLeft && 'flex-order-2', isLabelOnlyRight && 'flex-order-1');
-  var progressWrapperClasses = classname('progress', 'margin-0', 'flex-1-0', getProgressBarHightClassName(size));
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapperClasses
-  }, renderIcon(icon, size), /*#__PURE__*/React.createElement("div", {
-    className: progressLabelWrapperClasses
-  }, renderLabel(label, size, labelWrapperClasses), /*#__PURE__*/React.createElement("div", {
-    className: progressOuterWrapperClasses
-  }, /*#__PURE__*/React.createElement("div", {
-    className: progressWrapperClasses
-  }, renderAllProgressBars(progress, useProgressDivider)))));
-};
-StatusBar.defaultProps = {
-  size: SMALL,
-  useProgressDivider: true,
-  icon: {
-    name: '',
-    alignment: LEFT
-  },
-  label: {
-    value: '',
-    alignment: RIGHT,
-    weight: BOLD
-  },
-  progress: [],
-  className: ''
-};
-StatusBar.propTypes = {
-  icon: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    alignment: PropTypes.oneOf([LEFT, RIGHT]),
-    color: PropTypes.string,
-    className: PropTypes.string
-  }),
-  label: PropTypes.shape({
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    alignment: PropTypes.oneOf([LEFT, TOP, RIGHT]),
-    weight: PropTypes.oneOf([LIGHT, BOLD]),
-    color: PropTypes.string,
-    className: PropTypes.string
-  }),
-  progress: PropTypes.arrayOf(PropTypes.shape({
-    percentage: PropTypes.number.isRequired,
-    tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    tooltipPosition: PropTypes.oneOf([TOP, BOTTOM, LEFT, RIGHT]),
-    tooltipDelay: PropTypes.number,
-    color: PropTypes.string,
-    className: PropTypes.string
-  })),
-  useProgressDivider: PropTypes.bool,
-  size: PropTypes.oneOf([SMALL, LARGE]),
-  className: PropTypes.string
-};
-export default StatusBar;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+import { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';
+import StatusBarProgressBar from './StatusBarProgressBar';
+import StatusBarIcon from './StatusBarIcon';
+import StatusBarLabel from './StatusBarLabel';
+const iconDefaults = { name: '', alignment: LEFT };
+const labelDefaults = { value: '', alignment: RIGHT, weight: BOLD };
+const StatusBar = (props) => {
+    const { progress = [], size = SMALL, className = '', useProgressDivider = true } = props;
+    // deep destructuring with merging default props don't work
+    const icon = Object.assign(Object.assign({}, iconDefaults), props.icon);
+    const label = Object.assign(Object.assign({}, labelDefaults), props.label);
+    const hasIcon = !!icon.name;
+    const iconIsLeft = icon.alignment === LEFT;
+    const iconIsRight = icon.alignment === RIGHT;
+    const hasLabel = !!label.value;
+    const labelIsLeft = label.alignment === LEFT;
+    const labelIsTop = label.alignment === TOP;
+    const labelIsRight = label.alignment === RIGHT;
+    const hasOnlyIcon = hasIcon && !hasLabel;
+    const hasOnlyLabel = !hasIcon && hasLabel;
+    const hasIconAndLabel = hasIcon && hasLabel;
+    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;
+    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;
+    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;
+    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;
+    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;
+    const isIconOnlyRight = hasOnlyIcon && iconIsRight;
+    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;
+    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;
+    const wrapperClasses = classNames('StatusBar', 'width-100pct', 'display-flex', labelIsTop ? 'align-items-end' : 'align-items-center', className);
+    const progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', {
+        'flex-order-1 flex-column margin-bottom-10': labelIsTop,
+        'flex-order-1 align-items-center': isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight,
+        'flex-order-2 align-items-center': isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft,
+        'align-items-center': isLabelOnlyLeft || isLabelOnlyRight,
+    });
+    const labelWrapperClasses = classNames({
+        'display-flex justify-content-center': labelIsTop,
+        'flex-order-1 margin-right-10': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-2 margin-left-10': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', {
+        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', {
+        'height-5': size === SMALL,
+        'height-10': size === LARGE,
+    });
+    return (_jsxs("div", Object.assign({ className: wrapperClasses }, { children: [_jsx(StatusBarIcon, { icon: icon, size: size }), _jsxs("div", Object.assign({ className: progressLabelWrapperClasses }, { children: [_jsx(StatusBarLabel, { label: label, size: size, className: labelWrapperClasses }), _jsx("div", Object.assign({ className: progressOuterWrapperClasses }, { children: _jsx("div", Object.assign({ className: progressWrapperClasses }, { children: progress.map((item, index) => (_jsx(StatusBarProgressBar, { progress: item, index: index, useProgressDivider: useProgressDivider }, index))) })) }))] }))] })));
+};
+export default StatusBar;

package/components/statusBar/StatusBar.types.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+export type StatusBarIconSpec = {
+    /**
+     * The class name of the icon i.e. "rioglyph-cruise-control".
+     */
+    name: string;
+    /**
+     * The position of the icon.
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * The text color class name for the icon.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the icon.
+     */
+    className?: string;
+};
+export type StatusBarLabelSpec = {
+    /**
+     * The label content.
+     */
+    value: string | ReactNode;
+    /**
+     * The position of the icon.
+     *
+     * @default 'right'
+     */
+    alignment?: 'left' | 'top' | 'right';
+    /**
+     * The text weight of the label.
+     *
+     * @default 'bold'
+     */
+    weight?: 'light' | 'bold';
+    /**
+     * The text color class name for the label.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the label.
+     */
+    className?: string;
+};
+export type StatusBarProgress = {
+    /**
+     * The percentage of the progress.
+     *
+     * @default 0
+     */
+    percentage?: number;
+    /**
+     * The color class name for the label.
+     *
+     * @default 'progress-bar-info'
+     */
+    color?: string;
+    /**
+     * Optional tooltip content to be shown for the progress bar.
+     */
+    tooltip?: string | ReactNode;
+    /**
+     * The position of the tooltip for the progress bar.
+     *
+     * @default 'top'
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The delay in milliseconds for when the tooltip is shown when hovering the progress bar.
+     *
+     * @default 50
+     */
+    tooltipDelay?: number;
+    /**
+     * Optional class names for the progress bar.
+     */
+    className?: string;
+};

package/components/statusBar/StatusBar.types.js

@@ -0,0 +1 @@
+export {};

package/components/statusBar/StatusBarConstants.d.ts

@@ -0,0 +1,8 @@
+export declare const LEFT: "left";
+export declare const TOP: "top";
+export declare const RIGHT: "right";
+export declare const BOTTOM: "bottom";
+export declare const SMALL = "small";
+export declare const LARGE = "large";
+export declare const LIGHT = "light";
+export declare const BOLD = "bold";

package/components/statusBar/StatusBarConstants.js

@@ -0,0 +1,12 @@
+import OverlayTrigger from '../overlay/OverlayTrigger';
+// alignment / position
+export const LEFT = OverlayTrigger.LEFT;
+export const TOP = OverlayTrigger.TOP;
+export const RIGHT = OverlayTrigger.RIGHT;
+export const BOTTOM = OverlayTrigger.BOTTOM;
+// icon size
+export const SMALL = 'small';
+export const LARGE = 'large';
+// font weight
+export const LIGHT = 'light';
+export const BOLD = 'bold';

package/components/statusBar/StatusBarIcon.d.ts

@@ -0,0 +1,7 @@
+import type { StatusBarIconSpec } from './StatusBar.types';
+type StatusBarIconProps = {
+    icon: StatusBarIconSpec;
+    size: 'small' | 'large';
+};
+declare const StatusBarIcon: (props: StatusBarIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusBarIcon;

package/components/statusBar/StatusBarIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+import { LARGE, LEFT, SMALL } from './StatusBarConstants';
+const StatusBarIcon = (props) => {
+    var _a;
+    const { icon, size } = props;
+    if (!icon.name) {
+        return null;
+    }
+    const wrapperClasses = icon.alignment === LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';
+    const iconClasses = classNames('rioglyph', icon.name, (_a = icon.color) !== null && _a !== void 0 ? _a : 'text-color-gray', size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className);
+    return (_jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsx("span", { className: iconClasses }) })));
+};
+export default StatusBarIcon;

package/components/statusBar/StatusBarLabel.d.ts

@@ -0,0 +1,8 @@
+import type { StatusBarLabelSpec } from './StatusBar.types';
+type StatusBarLabelProps = {
+    label: StatusBarLabelSpec;
+    size: 'small' | 'large';
+    className?: string;
+};
+declare const StatusBarLabel: (props: StatusBarLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusBarLabel;

package/components/statusBar/StatusBarLabel.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+import { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';
+const StatusBarLabel = (props) => {
+    var _a;
+    const { label, size, className = '' } = props;
+    if (!label.value) {
+        return null;
+    }
+    const labelClasses = classNames('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', (_a = label.color) !== null && _a !== void 0 ? _a : 'text-color-dark', {
+        'width-0': label.alignment === TOP,
+        'text-size-16': size === SMALL,
+        'text-size-h3': size === LARGE,
+        'text-bold': label.weight !== LIGHT,
+    }, label.className);
+    return (_jsx("div", Object.assign({ className: className }, { children: _jsx("span", Object.assign({ className: labelClasses }, { children: label.value })) })));
+};
+export default StatusBarLabel;

package/components/statusBar/StatusBarProgressBar.d.ts

@@ -0,0 +1,8 @@
+import type { StatusBarProgress } from './StatusBar.types';
+type StatusBarProgressBarProps = {
+    index: number;
+    progress: StatusBarProgress;
+    useProgressDivider: boolean;
+};
+export declare const StatusBarProgressBar: (props: StatusBarProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusBarProgressBar;

package/components/statusBar/StatusBarProgressBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'react';
+import classNames from 'classnames';
+import Tooltip from '../tooltip/Tooltip';
+import OverlayTrigger from '../overlay/OverlayTrigger';
+import { TOP } from './StatusBarConstants';
+export const StatusBarProgressBar = (props) => {
+    const { index, progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP }, useProgressDivider, } = props;
+    const progressBarClasses = classNames('progress-bar', color !== null && color !== void 0 ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className);
+    const progressBar = _jsx("div", { className: progressBarClasses, style: { width: `${percentage}%` } });
+    if (!tooltip) {
+        return progressBar;
+    }
+    return (_jsx(OverlayTrigger, Object.assign({ placement: tooltipPosition, overlay: _jsx(Tooltip, Object.assign({ id: `tooltip-${index}`, width: 'auto' }, { children: tooltip })), delay: tooltipDelay }, { children: progressBar })));
+};
+export default StatusBarProgressBar;

package/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -0,0 +1,35 @@
+export default SteppedProgressBar;
+declare function SteppedProgressBar(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace SteppedProgressBar {
+    const VARIANT_CIRCLE: string;
+    const VARIANT_RECTANGLE: string;
+    const VARIANT_ROADSIGN: string;
+    namespace defaultProps {
+        const selectedStepNumber: number;
+        const labels: never[];
+        function onSelectedChanged(): void;
+        const variant: string;
+        const mobileBreakpoint: boolean;
+    }
+    namespace propTypes {
+        export const disableFollowingPages: PropTypes.Requireable<number>;
+        const onSelectedChanged_1: PropTypes.Validator<(...args: any[]) => any>;
+        export { onSelectedChanged_1 as onSelectedChanged };
+        const labels_1: PropTypes.Validator<(PropTypes.InferProps<{
+            icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+            label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+            labelClassName: PropTypes.Requireable<string>;
+            labelWrapperClassName: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        export { labels_1 as labels };
+        export const itemClassName: PropTypes.Requireable<string>;
+        const selectedStepNumber_1: PropTypes.Validator<number>;
+        export { selectedStepNumber_1 as selectedStepNumber };
+        export const className: PropTypes.Requireable<string>;
+        const mobileBreakpoint_1: PropTypes.Requireable<boolean>;
+        export { mobileBreakpoint_1 as mobileBreakpoint };
+        const variant_1: PropTypes.Requireable<string>;
+        export { variant_1 as variant };
+    }
+}
+import PropTypes from "prop-types";