@carbon/react 1.19.0 → 1.20.0

package/es/_virtual/_commonjsHelpers.js

@@ -12,8 +12,21 @@ function getDefaultExportFromCjs (x) {
 }
 
 function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
 	Object.keys(n).forEach(function (k) {
 		var d = Object.getOwnPropertyDescriptor(n, k);
 		Object.defineProperty(a, k, d.get ? d : {

package/es/_virtual/index.js

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var l10n = {exports: {}};
+var l10nExports = {};
+var l10n = {
+  get exports(){ return l10nExports; },
+  set exports(v){ l10nExports = v; },
+};
 
-export { l10n as l };
+export { l10n as __module, l10nExports as exports };

package/es/_virtual/rangePlugin.js

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var rangePlugin = {exports: {}};
+var rangePluginExports = {};
+var rangePlugin = {
+  get exports(){ return rangePluginExports; },
+  set exports(v){ rangePluginExports = v; },
+};
 
-export { rangePlugin as r };
+export { rangePlugin as __module, rangePluginExports as exports };

package/es/components/ContainedList/ContainedList.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -17,6 +18,7 @@ function ContainedList(_ref) {
   var action = _ref.action,
       children = _ref.children,
       className = _ref.className,
+      isInset = _ref.isInset,
       _ref$kind = _ref.kind,
       kind = _ref$kind === void 0 ? variants[0] : _ref$kind,
       label = _ref.label,
@@ -24,7 +26,7 @@ function ContainedList(_ref) {
       size = _ref$size === void 0 ? 'lg' : _ref$size;
   var labelId = "".concat(useId('contained-list'), "-header");
   var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--contained-list"), "".concat(prefix, "--contained-list--").concat(kind), "".concat(prefix, "--contained-list--").concat(size), className);
+  var classes = cx("".concat(prefix, "--contained-list"), _defineProperty({}, "".concat(prefix, "--contained-list--inset-rulers"), isInset), "".concat(prefix, "--contained-list--").concat(kind), "".concat(prefix, "--contained-list--").concat(size), className);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -55,6 +57,11 @@ ContainedList.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specify whether the dividing lines in between list items should be inset.
+   */
+  isInset: PropTypes.bool,
+
   /**
    * The kind of ContainedList you want to display
    */

package/es/components/DataTable/TableHeader.js

@@ -96,9 +96,7 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
     ref: ref,
     scope: scope
   }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'none'
-    },
+    className: "".concat(prefix, "--table-sort__description"),
     id: uniqueId
   }, sortDescription), /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",

package/es/components/DatePicker/DatePicker.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, typeof as _typeof, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useEffect } from 'react';
+import React__default, { useContext, useRef, useEffect, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import flatpickr from 'flatpickr';
 import l10n from '../../node_modules/flatpickr/dist/l10n/index.js';
@@ -121,8 +121,8 @@ function isLabelTextEmpty(children) {
   });
 }
 
-var rightArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n  <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n</svg>";
-var leftArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n  <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n</svg>";
+var rightArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n</svg>";
+var leftArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n</svg>";
 
 function updateClassNames(calendar, prefix) {
   var calendarContainer = calendar.calendarContainer;
@@ -382,7 +382,18 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       }
     };
   }, [savedOnChange, savedOnClose, savedOnOpen, readOnly]); //eslint-disable-line react-hooks/exhaustive-deps
+  // this hook allows consumers to access the flatpickr calendar
+  // instance for cases where functions like open() or close()
+  // need to be imperatively called on the calendar
 
+  useImperativeHandle(ref, function () {
+    return {
+      get calendar() {
+        return calendarRef.current;
+      }
+
+    };
+  });
   useEffect(function () {
     var _calendarRef$current;
 

package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className"];
+
+function FluidNumberInputSkeleton(_ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item ").concat(prefix, "--text-input--fluid__skeleton"), className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  })));
+}
+
+FluidNumberInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidNumberInputSkeleton as default };

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -0,0 +1,138 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import '../NumberInput/NumberInput.Skeleton.js';
+import { NumberInput } from '../NumberInput/NumberInput.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className"];
+var FluidNumberInput = /*#__PURE__*/React__default.forwardRef(function FluidNumberInput(_ref, ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--number-input--fluid"), className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(NumberInput, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidNumberInput.propTypes = {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty: PropTypes.bool,
+
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes.bool,
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node,
+
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+
+  /**
+   * The minimum value.
+   */
+  min: PropTypes.number,
+
+  /**
+   * Provide an optional handler that is called when the internal state of
+   * NumberInput changes. This handler is called with event and state info.
+   * `(event, { value, direction }) => void`
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp: PropTypes.func,
+
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step: PropTypes.number,
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+
+export { FluidNumberInput as default };

package/es/components/FluidSearch/FluidSearch.Skeleton.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className"];
+
+function FluidSearchSkeleton(_ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item ").concat(prefix, "--text-input--fluid__skeleton"), className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  })));
+}
+
+FluidSearchSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidSearchSkeleton as default };

package/es/components/FluidSearch/FluidSearch.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className"];
+var FluidSearch = /*#__PURE__*/React__default.forwardRef(function FluidSearch(_ref, ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--search--fluid"), className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(Search, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidSearch.defaultProps = {
+  autoComplete: 'off',
+  closeButtonLabelText: 'Clear search input',
+  role: 'searchbox',
+  type: 'text'
+};
+FluidSearch.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes.string,
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+export { FluidSearch as default };

package/es/components/NumberInput/NumberInput.js

@@ -9,12 +9,13 @@ import { defineProperty as _defineProperty, objectWithoutProperties as _objectWi
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef } from 'react';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
+import React__default, { useContext, useState, useRef } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
+import '../FluidForm/FluidForm.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["allowEmpty", "className", "disabled", "disableWheel", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
 
@@ -25,9 +26,7 @@ var translationIds = {
 };
 var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['increment.number'], 'Increment number'), _defineProperty(_defaultTranslations, translationIds['decrement.number'], 'Decrement number'), _defaultTranslations);
 var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(props, forwardRef) {
-  var _cx, _cx3;
-
-  var enabled = useFeatureFlag('enable-v11-release');
+  var _cx, _cx3, _cx4;
 
   var _props$allowEmpty = props.allowEmpty,
       allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
@@ -42,14 +41,12 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
       _props$hideLabel = props.hideLabel,
       hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
       hideSteppers = props.hideSteppers,
-      _props$iconDescriptio = props.iconDescription,
-      iconDescription = _props$iconDescriptio === void 0 ? enabled ? undefined : 'choose a number' : _props$iconDescriptio,
+      iconDescription = props.iconDescription,
       id = props.id,
       label = props.label,
       _props$invalid = props.invalid,
       invalid = _props$invalid === void 0 ? false : _props$invalid,
-      _props$invalidText = props.invalidText,
-      invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
+      invalidText = props.invalidText,
       light = props.light,
       _props$max = props.max,
       max = _props$max === void 0 ? 100 : _props$max,
@@ -76,7 +73,15 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
 
   var prefix = usePrefix();
 
-  var _useState = useState(function () {
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var _useState3 = useState(function () {
     if (controlledValue !== undefined) {
       return controlledValue;
     }
@@ -87,18 +92,18 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
 
     return 0;
   }),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var _useState3 = useState(controlledValue),
       _useState4 = _slicedToArray(_useState3, 2),
-      prevControlledValue = _useState4[0],
-      setPrevControlledValue = _useState4[1];
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var _useState5 = useState(controlledValue),
+      _useState6 = _slicedToArray(_useState5, 2),
+      prevControlledValue = _useState6[0],
+      setPrevControlledValue = _useState6[1];
 
   var inputRef = useRef(null);
   var ref = useMergedRefs([forwardRef, inputRef]);
-  var numberInputClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--number"), true), _defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _defineProperty(_cx, "".concat(prefix, "--number--light"), light), _defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _defineProperty(_cx, "".concat(prefix, "--number--").concat(size), size), _defineProperty(_cx, customClassName, !enabled), _cx));
+  var numberInputClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--number"), true), _defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _defineProperty(_cx, "".concat(prefix, "--number--light"), light), _defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _defineProperty(_cx, "".concat(prefix, "--number--").concat(size), size), _cx));
   var isInputValid = getInputValidity({
     allowEmpty: allowEmpty,
     invalid: invalid,
@@ -152,8 +157,19 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     }
   }
 
+  var handleFocus = function handleFocus(evt) {
+    if (evt.target.type === 'button') {
+      setIsFocused(false);
+    } else {
+      setIsFocused(evt.type === 'focus' ? true : false);
+    }
+  };
+
+  var outerElementClasses = cx("".concat(prefix, "--form-item"), (_cx4 = {}, _defineProperty(_cx4, customClassName, !!customClassName), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(prefix, "--form-item"), _defineProperty({}, customClassName, enabled))
+    className: outerElementClasses,
+    onFocus: isFluid ? handleFocus : null,
+    onBlur: isFluid ? handleFocus : null
   }, /*#__PURE__*/React__default.createElement("div", {
     className: numberInputClasses,
     "data-invalid": normalizedProps.invalid ? true : undefined
@@ -255,7 +271,9 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     className: "up-icon"
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--number__rule-divider")
-  }))), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default.createElement(HelperText, {
+  }))), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--number-input__divider")
+  }), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default.createElement(HelperText, {
     disabled: disabled,
     description: helperText
   })));