@carbon/react 1.91.0-rc.0 → 1.92.0-rc.0

package/lib/components/NumberInput/NumberInput.js

@@ -18,7 +18,8 @@ var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var clamp = require('../../internal/clamp.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var utilities = require('@carbon/utilities');
@@ -27,7 +28,6 @@ var match = require('../../internal/keyboard/match.js');
 var NumberFormatPropTypes = require('./NumberFormatPropTypes.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 var _Subtract, _Add;
 const translationIds = {
@@ -43,6 +43,7 @@ const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'
 };
+
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const {
@@ -77,6 +78,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     translateWithId: t = id => defaultTranslations[id],
     type = 'number',
     defaultValue = type === 'number' ? 0 : NaN,
+    validate,
     warn = false,
     warnText = '',
     stepStartValue = 0,
@@ -123,7 +125,6 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
    * Only used when type="text"
    */
   const [previousNumberValue, setPreviousNumberValue] = React.useState(numberValue);
-
   /**
    * The current text value of the input.
    * Only used when type=text
@@ -154,9 +155,11 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const isInputValid = getInputValidity({
     allowEmpty,
     invalid,
-    value: type === 'number' ? value : numberValue,
+    value: validate ? inputValue : type === 'number' ? value : numberValue,
     max,
-    min
+    min,
+    validate,
+    locale
   });
   const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
     id,
@@ -214,8 +217,6 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     }
     if (type === 'text') {
       const _value = allowEmpty && event.target.value === '' ? '' : event.target.value;
-
-      // When isControlled, setNumberValue will not update numberValue in useControllableState.
       setNumberValue(numberParser.parse(_value));
       setInputValue(_value);
       // The onChange prop isn't called here because it will be called on blur
@@ -265,7 +266,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         rawValue = currentValue - step;
       }
       const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
-      const floatValue = parseFloat(rawValue.toFixed(precision));
+      const floatValue = parseFloat(Number(rawValue).toFixed(precision));
       const newValue = clamp.clamp(floatValue, min ?? -Infinity, max ?? Infinity);
       const state = {
         value: newValue,
@@ -376,13 +377,15 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // they've passed in.
         const _numberValue = isControlled ? numberParser.parse(inputValue) : numberValue;
         const formattedValue = isNaN(_numberValue) ? '' : format(_numberValue);
-        setInputValue(formattedValue);
-
+        const rawValue = e.target.value;
+        // Validate raw input
+        const isValid = validate ? validate(rawValue, locale) : true;
+        setInputValue(isValid ? formattedValue : rawValue);
         // Calling format() can alter the number (such as rounding it)
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
-        if (onChange) {
+        if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
             direction: previousNumberValue < parsedFormattedNewValue ? 'up' : 'down'
@@ -616,7 +619,18 @@ NumberInput.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Optional validation function that is called with the input value and locale.
+   *
+   * - Return `false` to immediately fail validation.
+   * - Return `true` to pass this validation, but still run other checks (min, max, required, etc.).
+   * - Return `undefined` to defer entirely to built-in validation logic.
+   *
+   * This is called before other validations, giving consumers the ability
+   * to short-circuit or extend validation without replacing built-in rules.
+   */
+  validate: PropTypes.func
 };
 const Label = ({
   disabled,
@@ -639,17 +653,11 @@ const Label = ({
   }
   return null;
 };
-Label.propTypes = {
-  disabled: PropTypes.bool,
-  hideLabel: PropTypes.bool,
-  id: PropTypes.string,
-  label: PropTypes.node
-};
-function HelperText({
+const HelperText = ({
   disabled,
   description,
   id
-}) {
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -662,11 +670,6 @@ function HelperText({
     }, description);
   }
   return null;
-}
-HelperText.propTypes = {
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  id: PropTypes.string
 };
 
 /**
@@ -680,6 +683,8 @@ HelperText.propTypes = {
  * @param {number} config.value
  * @param {number} config.max
  * @param {number} config.min
+ * @param {Function} config.validate
+ * @param {string} config.locale
  * @returns {boolean}
  */
 function getInputValidity({
@@ -687,8 +692,17 @@ function getInputValidity({
   invalid,
   value,
   max,
-  min
+  min,
+  validate,
+  locale
 }) {
+  if (typeof validate === 'function') {
+    const result = validate(value, locale);
+    if (result === false) {
+      return false; // immediate invalid
+    }
+    // If true or undefined, continue to further validations
+  }
   if (invalid) {
     return false;
   }

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -175,8 +175,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
     if (onCloseMenu) {
       onCloseMenu();
     }
-    onClose();
-  }, [onClose]);
+  }, []);
   const closeMenuAndFocus = React.useCallback(() => {
     const wasClicked = click;
     const wasOpen = open;
@@ -321,7 +320,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.cloneElement(menuBody, {
     'data-floating-menu-direction': direction
   }));
-  const combinedRef = innerRef ? mergeRefs.default(triggerRef, innerRef, ref) : mergeRefs.default(triggerRef, ref);
+  const combinedRef = innerRef ? mergeRefs.mergeRefs(triggerRef, innerRef, ref) : mergeRefs.mergeRefs(triggerRef, ref);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--overflow-menu__wrapper`,
     "aria-owns": open ? menuBodyId : undefined,

package/lib/components/OverflowMenu/next/index.js

@@ -99,7 +99,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
   const triggerClasses = cx(`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
-  const floatingRef = mergeRefs.default(triggerRef, refs.setReference);
+  const floatingRef = mergeRefs.mergeRefs(triggerRef, refs.setReference);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: containerClasses,
     "aria-owns": open ? id : undefined,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -17,8 +17,8 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
-require('../Text/index.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 
 const frFn = React.forwardRef;
 const OverflowMenuItem = frFn((props, ref) => {

package/lib/components/PageHeader/PageHeader.js

@@ -14,7 +14,8 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index$1 = require('../MenuButton/index.js');
 require('../Menu/Menu.js');
 var MenuItem = require('../Menu/MenuItem.js');
@@ -36,7 +37,6 @@ require('../Grid/Row.js');
 var Column = require('../Grid/Column.js');
 require('../Grid/ColumnHang.js');
 require('../Grid/GridContext.js');
-var Text = require('../Text/Text.js');
 
 /**
  * ----------

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 import { TranslateWithId } from '../../types/common';
+type TooltipAlignment = 'start' | 'center' | 'end';
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 declare const translationIds: {
     readonly 'carbon.pagination-nav.next': "Next";
     readonly 'carbon.pagination-nav.previous': "Previous";
@@ -34,6 +36,14 @@ export interface DirectionButtonProps {
      * The callback function called when the button is clicked.
      */
     onClick?: React.MouseEventHandler;
+    /**
+     * Specify the alignment of the tooltip for the icon-only next/prev buttons.
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Specify the position of the tooltip for the icon-only next/prev buttons.
+     */
+    tooltipPosition?: TooltipPosition;
 }
 export interface PaginationItemProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
     /**
@@ -98,6 +108,16 @@ export interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElemen
      * Specify the size of the PaginationNav.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the alignment of the tooltip for the icon-only next/prev buttons.
+     * Can be one of: start, center, or end.
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Specify the position of the tooltip for the icon-only next/prev buttons.
+     * Can be one of: top, right, bottom, or left.
+     */
+    tooltipPosition?: TooltipPosition;
     /**
      * The total number of items.
      */

package/lib/components/PaginationNav/PaginationNav.js

@@ -72,13 +72,16 @@ function DirectionButton({
   direction,
   label,
   disabled,
-  onClick
+  onClick,
+  tooltipAlignment = 'center',
+  tooltipPosition = 'bottom'
 }) {
   const prefix = usePrefix.usePrefix();
+  const align = tooltipAlignment === 'center' ? tooltipPosition : `${tooltipPosition}-${tooltipAlignment}`;
   return /*#__PURE__*/React.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
   }, /*#__PURE__*/React.createElement(index.IconButton, {
-    align: "bottom",
+    align: align,
     disabled: disabled,
     kind: "ghost",
     label: label,
@@ -177,6 +180,8 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   page = 0,
   loop = false,
   size = 'lg',
+  tooltipAlignment,
+  tooltipPosition,
   translateWithId: t = translateWithId,
   ...rest
 }, ref) => {
@@ -280,7 +285,9 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
     "aria-label": t('carbon.pagination-nav.previous'),
     label: t('carbon.pagination-nav.previous'),
     disabled: backwardButtonDisabled,
-    onClick: jumpToPrevious
+    onClick: jumpToPrevious,
+    tooltipAlignment: tooltipAlignment,
+    tooltipPosition: tooltipPosition
   }),
   // render first item if at least 5 items can be displayed or
   // 4 items can be displayed and the current page is either 0 or 1
@@ -325,7 +332,9 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
     "aria-label": t('carbon.pagination-nav.next'),
     label: t('carbon.pagination-nav.next'),
     disabled: forwardButtonDisabled,
-    onClick: jumpToNext
+    onClick: jumpToNext,
+    tooltipAlignment: tooltipAlignment,
+    tooltipPosition: tooltipPosition
   })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": "true",
@@ -348,7 +357,17 @@ DirectionButton.propTypes = {
   /**
    * The callback function called when the button is clicked.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  /**
+   * Specify how the tooltip should align with the navigation button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * Specify the position of the tooltip relative to the navigation button.
+   * Can be one of: top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 PaginationItem.propTypes = {
   /**
@@ -419,6 +438,16 @@ PaginationNav.propTypes = {
    * Specify the size of the PaginationNav.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify the alignment of the tooltip for the icon-only prev/next buttons.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * Specify the position of the tooltip for the icon-only prev/next buttons.
+   * Can be one of: top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /**
    * The total number of items.
    */

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -15,8 +15,8 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
 var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 
 const defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',

package/lib/components/RadioButton/RadioButton.js

@@ -13,14 +13,14 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -65,7 +65,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${prefix}--radio-button`,
     onChange: handleOnChange,
     id: uniqueId,
-    ref: mergeRefs.default(inputRef, ref),
+    ref: mergeRefs.mergeRefs(inputRef, ref),
     disabled: disabled,
     value: value,
     name: name,

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var index$1 = require('../Text/index.js');
+var createTextComponent = require('../Text/createTextComponent.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -117,13 +117,13 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses,
-    ref: mergeRefs.default(divRef, ref)
+    ref: mergeRefs.mergeRefs(divRef, ref)
   }, /*#__PURE__*/React.createElement("fieldset", _rollupPluginBabelHelpers.extends({
     className: fieldsetClasses,
     disabled: disabled,
     "data-invalid": invalid ? true : undefined,
     "aria-describedby": showHelper && helperText ? helperId : undefined
-  }, rest), legendText && /*#__PURE__*/React.createElement(index$1.Legend, {
+  }, rest), legendText && /*#__PURE__*/React.createElement(createTextComponent.Legend, {
     className: `${prefix}--label`
   }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--radio-button-group-inner--decorator`

package/lib/components/RadioTile/RadioTile.js

@@ -20,11 +20,11 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
 const RadioTile = /*#__PURE__*/React.forwardRef(({

package/lib/components/Select/Select.js

@@ -20,10 +20,10 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var events = require('../../tools/events.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 const Select = /*#__PURE__*/React.forwardRef(({
   className,

package/lib/components/Slider/Slider.js

@@ -16,13 +16,13 @@ var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var iconsReact = require('@carbon/icons-react');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var SliderHandles = require('./SliderHandles.js');
 var clamp = require('../../internal/clamp.js');
 var throttle = require('../../node_modules/es-toolkit/dist/compat/function/throttle.js');
-var Text = require('../Text/Text.js');
 
 const ThumbWrapper = ({
   hasTooltip,

package/lib/components/StructuredList/StructuredList.js

@@ -14,10 +14,10 @@ var cx = require('classnames');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var iconsReact = require('@carbon/icons-react');
 var useOutsideClick = require('../../internal/useOutsideClick.js');
-var Text = require('../Text/Text.js');
 
 var _StructuredListCell;
 const GridSelectedRowStateContext = /*#__PURE__*/React.createContext(null);

package/lib/components/Tabs/Tabs.js

@@ -34,10 +34,10 @@ var usePressable = require('./usePressable.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var index = require('../BadgeIndicator/index.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
-var Text = require('../Text/Text.js');
 
 var _ChevronLeft, _ChevronRight, _BadgeIndicator;
 const verticalTabHeight = 64;

package/lib/components/Tag/DismissibleTag.js

@@ -20,12 +20,12 @@ var Tag = require('./Tag.js');
 var iconsReact = require('@carbon/icons-react');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 var _Close;
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
@@ -56,7 +56,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef(({
     const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagLabelRef]);
-  const combinedRef = mergeRefs.default(tagLabelRef, forwardRef);
+  const combinedRef = mergeRefs.mergeRefs(tagLabelRef, forwardRef);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();

package/lib/components/Tag/OperationalTag.js

@@ -18,10 +18,10 @@ var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
-var Text = require('../Text/Text.js');
 
 const TYPES = {
   red: 'Red',
@@ -57,7 +57,7 @@ const OperationalTag = /*#__PURE__*/React.forwardRef(({
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
-  const combinedRef = mergeRefs.default(tagRef, forwardRef);
+  const combinedRef = mergeRefs.mergeRefs(tagRef, forwardRef);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
       label: text,

package/lib/components/Tag/SelectableTag.js

@@ -18,11 +18,11 @@ var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var useControllableState = require('../../internal/useControllableState.js');
-var Text = require('../Text/Text.js');
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const SelectableTag = /*#__PURE__*/React.forwardRef(({
@@ -56,7 +56,7 @@ const SelectableTag = /*#__PURE__*/React.forwardRef(({
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
-  const combinedRef = mergeRefs.default(tagRef, forwardRef);
+  const combinedRef = mergeRefs.mergeRefs(tagRef, forwardRef);
   const handleClick = e => {
     setSelectedTag(!selectedTag);
     onClick?.(e);

package/lib/components/Tag/Tag.js

@@ -16,7 +16,8 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../Text/index.js');
+var Text = require('../Text/Text.js');
+require('../Text/TextDirection.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
@@ -24,7 +25,6 @@ var isEllipsisActive = require('./isEllipsisActive.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
-var Text = require('../Text/Text.js');
 
 var _Close;
 const TYPES = {

package/lib/components/Text/Text.d.ts

@@ -6,7 +6,7 @@
  */
 import { type ElementType, type ReactElement, type ReactNode } from 'react';
 import { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../internal/PolymorphicProps';
-import { type TextDir } from '.';
+import { type TextDir } from './TextDirectionContext';
 export interface TextBaseProps {
     dir?: TextDir;
     children?: ReactNode;

package/lib/components/Text/Text.js

@@ -10,7 +10,6 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-require('./index.js');
 var TextDirectionContext = require('./TextDirectionContext.js');
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071

package/lib/components/Text/TextDirection.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { ReactNode } from 'react';
-import { type GetTextDirection, type TextDir } from '.';
+import { type GetTextDirection, type TextDir } from './TextDirectionContext';
 export interface TextDirectionProps {
     children: ReactNode;
     dir?: TextDir;

package/lib/components/Text/TextDirection.js

@@ -9,7 +9,6 @@
 
 var PropTypes = require('prop-types');
 var React = require('react');
-require('./index.js');
 var TextDirectionContext = require('./TextDirectionContext.js');
 
 const TextDirection = ({

package/lib/components/Text/createTextComponent.d.ts

@@ -5,14 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type ElementType } from 'react';
-import { TextProps } from '.';
-/**
- * Create a text component wrapper for a given text node type. Useful for
- * returning a `Text` component for a text node like a `<label>`.
- * @param {string} element
- * @param {string} displayName
- */
-export declare const createTextComponent: (element: ElementType, displayName: string) => {
+import { TextProps } from './Text';
+export declare const Legend: {
     (props: TextProps<ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/components/Text/createTextComponent.js

@@ -9,7 +9,6 @@
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-require('./index.js');
 var Text = require('./Text.js');
 
 /**
@@ -29,5 +28,6 @@ const createTextComponent = (element, displayName) => {
   }
   return TextWrapper;
 };
+const Legend = createTextComponent('legend', 'Legend');
 
-exports.createTextComponent = createTextComponent;
+exports.Legend = Legend;