carbon-react 106.2.2 → 106.3.2

package/esm/components/pager/pager.style.d.ts

@@ -3,7 +3,7 @@ export const StyledPagerSizeOptions: import("styled-components").StyledComponent
 export const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledPagerLinkStyles: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
+export const StyledPagerLinkStyles: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledPagerNoSelect: import("styled-components").StyledComponent<"span", any, {}, never>;
 export const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/pod/pod.style.d.ts

@@ -1,6 +1,6 @@
 export const StyledBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
+export const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledActionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDeleteButton: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const StyledUndoButton: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,5 +1,5 @@
 export default ProgressTracker;
-declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
+declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
     [x: string]: any;
     "aria-label"?: string | undefined;
     "aria-describedby": any;
@@ -8,6 +8,7 @@ declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby":
     "aria-valuemax": any;
     "aria-valuetext": any;
     size?: string | undefined;
+    length?: string | undefined;
     progress?: number | undefined;
     showDefaultLabels?: boolean | undefined;
     currentProgressLabel: any;
@@ -34,6 +35,8 @@ declare namespace ProgressTracker {
         "aria-valuetext": PropTypes.Requireable<string>;
         /** Size of the progress bar. */
         size: PropTypes.Requireable<string>;
+        /** Length of the progress bar, any valid css string. */
+        length: PropTypes.Requireable<string>;
         /** Current progress (percentage). */
         progress: PropTypes.Requireable<number>;
         /** Flag to control whether the default value labels (as percentages) should be rendered. */

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign || 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); }
 
-import React from "react";
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue } from "./progress-tracker.style";
+import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const ProgressTracker = ({
@@ -16,6 +17,7 @@ const ProgressTracker = ({
   "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
+  length = "256px",
   progress = 0,
   showDefaultLabels = false,
   currentProgressLabel,
@@ -25,8 +27,23 @@ const ProgressTracker = ({
   labelsPosition,
   ...rest
 }) => {
+  const barRef = useRef();
+  const [barLength, setBarLength] = useState(0);
   const isVertical = orientation === "vertical";
   const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+  const updateBarLength = useCallback(() => {
+    if (orientation === "horizontal") {
+      setBarLength(`${barRef.current.offsetWidth}px`);
+    } else {
+      setBarLength(`${barRef.current.offsetHeight}px`);
+    }
+  }, [barRef, orientation]);
+  useLayoutEffect(() => {
+    updateBarLength();
+  }, [barRef, orientation, updateBarLength]);
+  useResizeObserver(barRef, () => {
+    updateBarLength();
+  });
 
   const renderValueLabels = () => {
     if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
@@ -53,6 +70,7 @@ const ProgressTracker = ({
 
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     size: size,
+    length: length,
     isVertical: isVertical
   }, rest, tagComponent("progress-bar", rest), {
     role: "progressbar",
@@ -65,10 +83,12 @@ const ProgressTracker = ({
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
     direction: isVertical ? direction : undefined,
     isVertical: isVertical,
-    size: size
+    size: size,
+    ref: barRef
   }, /*#__PURE__*/React.createElement(InnerBar, {
     isVertical: isVertical,
     size: size,
+    length: barLength,
     progress: progress
   })), !prefixLabels && renderValueLabels());
 };
@@ -98,6 +118,9 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Size of the progress bar. */
   size: PropTypes.oneOf(["small", "medium", "large"]),
 
+  /** Length of the progress bar, any valid css string. */
+  length: PropTypes.string,
+
   /** Current progress (percentage). */
   progress: PropTypes.number,
 

package/esm/components/progress-tracker/progress-tracker.config.d.ts

@@ -1,2 +1 @@
-export const OUTER_TRACKER_LENGTH: "256px";
 export const PROGRESS_TRACKER_SIZES: string[];

package/esm/components/progress-tracker/progress-tracker.config.js

@@ -1,2 +1,2 @@
-export const OUTER_TRACKER_LENGTH = "256px";
+/* eslint-disable import/prefer-default-export */
 export const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];

package/esm/components/progress-tracker/progress-tracker.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 
-export interface ProgressBarProps extends MarginProps {
+export interface ProgressTrackerProps extends MarginProps {
   /** Specifies an aria-label to the component */
   "aria-label"?: string;
   /** Specifies the aria-describedby for the component */
@@ -16,6 +16,8 @@ export interface ProgressBarProps extends MarginProps {
   "aria-valuetext"?: string;
   /** Size of the progressBar. */
   size?: "small" | "medium" | "large";
+  /** Length of the progress bar, any valid css string. */
+  length?: string;
   /** Current progress (percentage). */
   progress?: number;
   /** Flag to control whether the default value labels (as percentages) should be rendered. */
@@ -35,6 +37,6 @@ export interface ProgressBarProps extends MarginProps {
   labelsPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+declare function ProgressTracker(props: ProgressTrackerProps): JSX.Element;
 
-export default ProgressBar;
+export default ProgressTracker;

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -2,20 +2,21 @@ import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import { OUTER_TRACKER_LENGTH, PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
+import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
 const StyledProgressTracker = styled.div`
   ${margin}
   text-align: center;
   white-space: nowrap;
 
   ${({
-  isVertical
+  isVertical,
+  length
 }) => css`
     ${!isVertical && `
-      width: ${OUTER_TRACKER_LENGTH};
+      width: ${length};
     `}
     ${isVertical && `
-      height: ${OUTER_TRACKER_LENGTH};
+      height: ${length};
       display: flex;
     `}
   `}
@@ -94,19 +95,20 @@ const InnerBar = styled.span`
   ${({
   isVertical,
   progress,
-  size
+  size,
+  length
 }) => css`
     position: absolute;
     left: 0;
     background-color: ${getInnerBarColour(progress)};
 
     ${!isVertical && css`
-      width: calc(${OUTER_TRACKER_LENGTH} * ${progress / 100});
+      width: calc(${length} * ${progress / 100});
       min-width: 2px;
       height: ${getHeight(size)};
     `}
     ${isVertical && css`
-      height: calc(${OUTER_TRACKER_LENGTH} * ${progress / 100});
+      height: calc(${length} * ${progress / 100});
       min-height: 2px;
       width: ${getHeight(size)};
     `}

package/esm/components/radio-button/radio-button-svg.component.js

@@ -1,35 +1,22 @@
 import React from "react";
-import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 
 const RadioButtonSvg = () => {
-  return /*#__PURE__*/ React.createElement(
-    StyledCheckableInputSvgWrapper,
-    null,
-    /*#__PURE__*/ React.createElement(
-      "svg",
-      {
-        focusable: "false",
-        viewBox: "0 0 15 15",
-      },
-      /*#__PURE__*/ React.createElement(
-        "g",
-        {
-          stroke: "none",
-          strokeWidth: "1",
-          fill: "none",
-          fillRule: "evenodd",
-        },
-        /*#__PURE__*/ React.createElement("circle", {
-          className: "radio-button-check",
-          fill: "#FFFFFF",
-          cx: "7.5",
-          cy: "7.5",
-          r: "5",
-        })
-      )
-    )
-  );
+  return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    viewBox: "0 0 15 15"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "radio-button-check",
+    fill: "#FFFFFF",
+    cx: "7.5",
+    cy: "7.5",
+    r: "5"
+  }))));
 };
 
-export default /*#__PURE__*/ React.memo(RadioButtonSvg, () => true);
+export default /*#__PURE__*/React.memo(RadioButtonSvg, () => true);

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.d.ts

@@ -1,2 +1,2 @@
 export default StyledEditorLink;
-declare const StyledEditorLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
+declare const StyledEditorLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../link").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;

package/esm/components/tooltip/tooltip.component.js

@@ -1,19 +1,4 @@
-function _extends() {
-  _extends =
-    Object.assign ||
-    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 _extends() { _extends = Object.assign || 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); }
 
 import React from "react";
 import PropTypes from "prop-types";
@@ -27,253 +12,99 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 const TOOLTIP_DELAY = 100;
 const tippyPlugins = [sticky];
-const Tooltip = /*#__PURE__*/ React.forwardRef(
-  (
-    {
-      children,
-      isVisible,
-      position = "top",
-      message,
-      type,
-      size = "medium",
-      isPartOfInput,
-      inputSize,
-      id,
-      bgColor,
-      fontColor,
-      flipOverrides,
-      target,
-      ...rest
-    },
-    ref
-  ) => {
-    const isFlipOverridesValid =
-      !flipOverrides ||
-      (Array.isArray(flipOverrides) &&
-        flipOverrides.every((placement) =>
-          TOOLTIP_POSITIONS.includes(placement)
-        ));
-    invariant(
-      isFlipOverridesValid,
-      `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`
-    );
+const Tooltip = /*#__PURE__*/React.forwardRef(({
+  children,
+  isVisible,
+  position = "top",
+  message,
+  type,
+  size = "medium",
+  isPartOfInput,
+  inputSize,
+  id,
+  bgColor,
+  fontColor,
+  flipOverrides,
+  target,
+  ...rest
+}, ref) => {
+  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
+  invariant(isFlipOverridesValid, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`);
 
-    const tooltip = (attrs, content) => {
-      const currentPosition = attrs["data-placement"] || position;
-      return /*#__PURE__*/ React.createElement(
-        CarbonScopedTokensProvider,
-        null,
-        /*#__PURE__*/ React.createElement(
-          StyledTooltip,
-          _extends(
-            {
-              "data-element": "tooltip",
-              role: "tooltip",
-              tabIndex: -1,
-              type: type,
-              size: size,
-              id: id,
-            },
-            tagComponent("tooltip", rest),
-            {
-              isPartOfInput: isPartOfInput,
-              inputSize: inputSize,
-            },
-            attrs,
-            {
-              position: currentPosition,
-              ref: ref,
-              bgColor: bgColor,
-              fontColor: fontColor,
-            }
-          ),
-          /*#__PURE__*/ React.createElement(
-            StyledPointer,
-            _extends(
-              {
-                key: "pointer",
-                type: type,
-              },
-              attrs,
-              {
-                position: currentPosition,
-                "data-popper-arrow": "",
-                "data-element": "tooltip-pointer",
-                bgColor: bgColor,
-              }
-            )
-          ),
-          content
-        )
-      );
-    };
+  const tooltip = (attrs, content) => {
+    const currentPosition = attrs["data-placement"] || position;
+    return /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
+      "data-element": "tooltip",
+      role: "tooltip",
+      tabIndex: -1,
+      type: type,
+      size: size,
+      id: id
+    }, tagComponent("tooltip", rest), {
+      isPartOfInput: isPartOfInput,
+      inputSize: inputSize
+    }, attrs, {
+      position: currentPosition,
+      ref: ref,
+      bgColor: bgColor,
+      fontColor: fontColor
+    }), /*#__PURE__*/React.createElement(StyledPointer, _extends({
+      key: "pointer",
+      type: type
+    }, attrs, {
+      position: currentPosition,
+      "data-popper-arrow": "",
+      "data-element": "tooltip-pointer",
+      bgColor: bgColor
+    })), content));
+  };
 
-    return /*#__PURE__*/ React.createElement(
-      Tippy,
-      _extends(
-        {
-          placement: position,
-          delay: TOOLTIP_DELAY,
-        },
-        isVisible !== undefined && {
-          visible: isVisible,
-        },
-        {
-          plugins: tippyPlugins,
-          sticky: true,
-          render: (attrs) => tooltip(attrs, message),
-          reference: target,
-          popperOptions: {
-            modifiers: [
-              ...(flipOverrides
-                ? [
-                    {
-                      name: "flip",
-                      options: {
-                        fallbackPlacements: flipOverrides,
-                      },
-                    },
-                  ]
-                : []),
-              {
-                name: "computeStyles",
-                options: {
-                  gpuAcceleration: false,
-                },
-              },
-            ],
-          },
+  return /*#__PURE__*/React.createElement(Tippy, _extends({
+    placement: position,
+    delay: TOOLTIP_DELAY
+  }, isVisible !== undefined && {
+    visible: isVisible
+  }, {
+    plugins: tippyPlugins,
+    sticky: true,
+    render: attrs => tooltip(attrs, message),
+    reference: target,
+    popperOptions: {
+      modifiers: [...(flipOverrides ? [{
+        name: "flip",
+        options: {
+          fallbackPlacements: flipOverrides
         }
-      ),
-      children
-    );
-  }
-);
-
-Tooltip.propTypes = {
-  /**
-   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  bgColor: PropTypes.string,
-  /**
-   * Children elements
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * Overrides the default flip behaviour of the Tooltip,
-   * must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
-   */
-  flipOverrides: PropTypes.arrayOf(
-    PropTypes.oneOf(["bottom", "left", "right", "top"])
-  ),
-  /**
-   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  fontColor: PropTypes.string,
-  /**
-   * The id attribute to use for the tooltip
-   */
-  id: PropTypes.string,
-  inputSize: PropTypes.oneOf(["large", "medium", "small"]),
-  isPartOfInput: PropTypes.bool,
-  /**
-   * Whether to to show the Tooltip
-   */
-  isVisible: PropTypes.bool,
-  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * The message to be displayed within the tooltip
-   */
-  message: PropTypes.node,
-  /**
-   * Sets position of the tooltip
-   */
-  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-  /**
-   * Defines the size of the tooltip content
-   */
-  size: PropTypes.oneOf(["large", "medium"]),
-  target: function (props, propName) {
-    if (props[propName] == null) {
-      return null;
-    } else if (
-      typeof props[propName] !== "object" ||
-      props[propName].nodeType !== 1
-    ) {
-      return new Error(
-        "Expected prop '" + propName + "' to be of type Element"
-      );
+      }] : []), {
+        name: "computeStyles",
+        options: {
+          gpuAcceleration: false
+        }
+      }]
     }
-  },
-  /**
-   * Defines the message type
-   */
-  type: PropTypes.string,
-};
-
+  }), children);
+});
 Tooltip.propTypes = {
-  /**
-   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  bgColor: PropTypes.string,
-  /**
-   * Children elements
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * Overrides the default flip behaviour of the Tooltip,
-   * must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
-   */
-  flipOverrides: PropTypes.arrayOf(
-    PropTypes.oneOf(["bottom", "left", "right", "top"])
-  ),
-  /**
-   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  fontColor: PropTypes.string,
-  /**
-   * The id attribute to use for the tooltip
-   */
-  id: PropTypes.string,
-  inputSize: PropTypes.oneOf(["large", "medium", "small"]),
-  isPartOfInput: PropTypes.bool,
-  /**
-   * Whether to to show the Tooltip
-   */
-  isVisible: PropTypes.bool,
-  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * The message to be displayed within the tooltip
-   */
-  message: PropTypes.node,
-  /**
-   * Sets position of the tooltip
-   */
-  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-  /**
-   * Defines the size of the tooltip content
-   */
-  size: PropTypes.oneOf(["large", "medium"]),
-  target: function (props, propName) {
+  "bgColor": PropTypes.string,
+  "children": PropTypes.element.isRequired,
+  "flipOverrides": PropTypes.arrayOf(PropTypes.oneOf(["bottom", "left", "right", "top"])),
+  "fontColor": PropTypes.string,
+  "id": PropTypes.string,
+  "inputSize": PropTypes.oneOf(["large", "medium", "small"]),
+  "isPartOfInput": PropTypes.bool,
+  "isVisible": PropTypes.bool,
+  "message": PropTypes.node,
+  "position": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "size": PropTypes.oneOf(["large", "medium"]),
+  "target": function (props, propName) {
     if (props[propName] == null) {
       return null;
-    } else if (
-      typeof props[propName] !== "object" ||
-      props[propName].nodeType !== 1
-    ) {
-      return new Error(
-        "Expected prop '" + propName + "' to be of type Element"
-      );
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
     }
   },
-  /**
-   * Defines the message type
-   */
-  type: PropTypes.string,
+  "type": PropTypes.string
 };
-
 export { Tooltip };
 Tooltip.displayName = "Tooltip";
-export default Tooltip;
+export default Tooltip;

package/esm/components/vertical-divider/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./vertical-divider.component";
+export type { VerticalDividerProps } from "./vertical-divider.component";

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { SpaceProps } from "styled-system";
 declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
-export interface VerticalDividerPropTypes extends SpaceProps {
+export interface VerticalDividerProps extends SpaceProps {
     h?: number | string;
     height?: number | string;
     displayInline?: boolean;
     /** the supported rage is 1-100  */
     tint?: TintRange;
 }
-declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerPropTypes) => JSX.Element;
+declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerProps) => JSX.Element;
 export default VerticalDivider;