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

package/es/components/NumberInput/NumberInput.d.ts

@@ -17,6 +17,26 @@ export declare const translationIds: {
 type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
 export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
+    /**
+     * Optional validation function that is called with the input value and locale.
+     * This is called before other validations, giving consumers the ability
+     * to short-circuit or extend validation without replacing built-in rules
+     * @example
+     * // Using the built-in separator validation
+     * <NumberInput validate={validateNumberSeparators} />
+     *
+     * // Combining with custom validation
+     * <NumberInput
+     *   validate={(value, locale) => {
+     *     return validateNumberSeparators(value, locale) && customValidation(value)
+     *   }}
+     * />
+     * - 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.
+     *
+     */
+    validate?: (value: string, locale: string) => boolean | undefined;
     /**
      * `true` to allow empty string.
      */
@@ -186,16 +206,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     warnText?: ReactNode;
 }
+export declare const validateNumberSeparators: (input: string, locale: string) => boolean;
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
-export interface Label {
-    disabled?: boolean;
-    hideLabel?: boolean;
-    id?: string;
-    label?: ReactNode;
-}
-export interface HelperTextProps {
-    id?: string;
-    description?: ReactNode;
-    disabled?: boolean;
-}
 export { NumberInput };

package/es/components/NumberInput/NumberInput.js

@@ -16,7 +16,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { clamp } from '../../internal/clamp.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { NumberParser, NumberFormatter } from '@carbon/utilities';
@@ -25,7 +26,6 @@ import { match } from '../../internal/keyboard/match.js';
 import { NumberFormatOptionsPropType } from './NumberFormatPropTypes.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 var _Subtract, _Add;
 const translationIds = {
@@ -41,6 +41,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 {
@@ -75,6 +76,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,
@@ -121,7 +123,6 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
    * Only used when type="text"
    */
   const [previousNumberValue, setPreviousNumberValue] = useState(numberValue);
-
   /**
    * The current text value of the input.
    * Only used when type=text
@@ -152,9 +153,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({
     id,
@@ -212,8 +215,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
@@ -263,7 +264,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(floatValue, min ?? -Infinity, max ?? Infinity);
       const state = {
         value: newValue,
@@ -374,13 +375,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'
@@ -614,7 +617,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,
@@ -637,17 +651,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();
   const className = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -660,11 +668,6 @@ function HelperText({
     }, description);
   }
   return null;
-}
-HelperText.propTypes = {
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  id: PropTypes.string
 };
 
 /**
@@ -678,6 +681,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({
@@ -685,8 +690,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/es/components/OverflowMenu/OverflowMenu.js

@@ -17,7 +17,7 @@ import { matches } from '../../internal/keyboard/match.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { deprecate } from '../../prop-types/deprecate.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { IconButton } from '../IconButton/index.js';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
@@ -171,8 +171,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef(({
     if (onCloseMenu) {
       onCloseMenu();
     }
-    onClose();
-  }, [onClose]);
+  }, []);
   const closeMenuAndFocus = useCallback(() => {
     const wasClicked = click;
     const wasOpen = open;

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

@@ -15,7 +15,7 @@ import { useFeatureFlag } from '../../FeatureFlags/index.js';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';
 import '../../Menu/MenuItem.js';
-import mergeRefs from '../../../tools/mergeRefs.js';
+import { mergeRefs } from '../../../tools/mergeRefs.js';
 import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -13,8 +13,8 @@ import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
-import '../Text/index.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 
 const frFn = forwardRef;
 const OverflowMenuItem = frFn((props, ref) => {

package/es/components/PageHeader/PageHeader.js

@@ -12,7 +12,8 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { breakpoints } from '@carbon/layout';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { MenuButton } from '../MenuButton/index.js';
 import '../Menu/Menu.js';
 import { MenuItem } from '../Menu/MenuItem.js';
@@ -34,7 +35,6 @@ import '../Grid/Row.js';
 import Column from '../Grid/Column.js';
 import '../Grid/ColumnHang.js';
 import '../Grid/GridContext.js';
-import { Text } from '../Text/Text.js';
 
 /**
  * ----------

package/es/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/es/components/PaginationNav/PaginationNav.js

@@ -68,13 +68,16 @@ function DirectionButton({
   direction,
   label,
   disabled,
-  onClick
+  onClick,
+  tooltipAlignment = 'center',
+  tooltipPosition = 'bottom'
 }) {
   const prefix = usePrefix();
+  const align = tooltipAlignment === 'center' ? tooltipPosition : `${tooltipPosition}-${tooltipAlignment}`;
   return /*#__PURE__*/React.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
   }, /*#__PURE__*/React.createElement(IconButton, {
-    align: "bottom",
+    align: align,
     disabled: disabled,
     kind: "ghost",
     label: label,
@@ -173,6 +176,8 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   page = 0,
   loop = false,
   size = 'lg',
+  tooltipAlignment,
+  tooltipPosition,
   translateWithId: t = translateWithId,
   ...rest
 }, ref) => {
@@ -276,7 +281,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
@@ -321,7 +328,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",
@@ -344,7 +353,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 = {
   /**
@@ -415,6 +434,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/es/components/ProgressIndicator/ProgressIndicator.js

@@ -13,8 +13,8 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Warning, Incomplete, CheckmarkOutline, CircleDash } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 
 const defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',

package/es/components/RadioButton/RadioButton.js

@@ -9,14 +9,14 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React, { useRef, cloneElement } from 'react';
 import cx from 'classnames';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -9,11 +9,11 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React, { useState, useRef, cloneElement } from 'react';
 import cx from 'classnames';
-import { Legend } from '../Text/index.js';
+import { Legend } from '../Text/createTextComponent.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { deprecate } from '../../prop-types/deprecate.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { useId } from '../../internal/useId.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';

package/es/components/RadioTile/RadioTile.js

@@ -16,11 +16,11 @@ import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
 const RadioTile = /*#__PURE__*/React.forwardRef(({

package/es/components/Select/Select.js

@@ -16,10 +16,10 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { composeEventHandlers } from '../../tools/events.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 const Select = /*#__PURE__*/React.forwardRef(({
   className,

package/es/components/Slider/Slider.js

@@ -14,13 +14,13 @@ import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './SliderHandles.js';
 import { clamp } from '../../internal/clamp.js';
 import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/throttle.js';
-import { Text } from '../Text/Text.js';
 
 const ThumbWrapper = ({
   hasTooltip,

package/es/components/StructuredList/StructuredList.js

@@ -12,10 +12,10 @@ import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
-import { Text } from '../Text/Text.js';
 
 var _StructuredListCell;
 const GridSelectedRowStateContext = /*#__PURE__*/React.createContext(null);

package/es/components/Tabs/Tabs.js

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

package/es/components/Tag/DismissibleTag.js

@@ -16,12 +16,12 @@ import Tag, { TYPES, SIZES } from './Tag.js';
 import { Close } from '@carbon/icons-react';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 var _Close;
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071

package/es/components/Tag/OperationalTag.js

@@ -14,10 +14,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import '../Text/index.js';
-import { isEllipsisActive } from './isEllipsisActive.js';
-import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 
 const TYPES = {
   red: 'Red',

package/es/components/Tag/SelectableTag.js

@@ -14,11 +14,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
-import mergeRefs from '../../tools/mergeRefs.js';
+import { mergeRefs } from '../../tools/mergeRefs.js';
 import { useControllableState } from '../../internal/useControllableState.js';
-import { Text } from '../Text/Text.js';
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const SelectableTag = /*#__PURE__*/forwardRef(({

package/es/components/Tag/Tag.js

@@ -12,7 +12,8 @@ import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../Text/index.js';
+import { Text } from '../Text/Text.js';
+import '../Text/TextDirection.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
@@ -20,7 +21,6 @@ import { isEllipsisActive } from './isEllipsisActive.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { Text } from '../Text/Text.js';
 
 var _Close;
 const TYPES = {

package/es/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/es/components/Text/Text.js

@@ -8,7 +8,6 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React, { useContext, Children } from 'react';
-import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071

package/es/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/es/components/Text/TextDirection.js

@@ -7,7 +7,6 @@
 
 import PropTypes from 'prop-types';
 import React, { useRef, useMemo, useEffect } from 'react';
-import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
 const TextDirection = ({

package/es/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;
 };