@carbon/react 1.63.2 → 1.64.0-rc.0

package/lib/components/TreeView/TreeNode.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React, { ComponentType, FunctionComponent } from 'react';
+export type TreeNodeProps = {
+    /**
+     * **Note:** this is controlled by the parent TreeView component, do not set manually.
+     * The ID of the active node in the tree
+     */
+    active?: string | number;
+    /**
+     * Specify the children of the TreeNode
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the TreeNode
+     */
+    className?: string;
+    /**
+     * **[Experimental]** The default expansion state of the node.
+     * *This is only supported with the `enable-treeview-controllable` feature flag!*
+     */
+    defaultIsExpanded?: boolean;
+    /**
+     * **Note:** this is controlled by the parent TreeView component, do not set manually.
+     * TreeNode depth to determine spacing
+     */
+    depth?: number;
+    /**
+     * Specify if the TreeNode is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+     */
+    id?: string;
+    /**
+     * Specify if the TreeNode is expanded (only applicable to parent nodes)
+     */
+    isExpanded?: boolean;
+    /**
+     * Rendered label for the TreeNode
+     */
+    label: React.ReactNode;
+    /**
+     * Callback function for when the node receives or loses focus
+     */
+    onNodeFocusEvent?: (event: React.FocusEvent<HTMLLIElement>) => void;
+    /**
+     * Callback function for when the node is selected
+     */
+    onSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    /**
+     * Callback function for when a parent node is expanded or collapsed
+     */
+    onToggle?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    /**
+     * Callback function for when any node in the tree is selected
+     */
+    onTreeSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    /**
+     * Optional prop to allow each node to have an associated icon.
+     * Can be a React component class
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * **Note:** this is controlled by the parent TreeView component, do not set manually.
+     * Array containing all selected node IDs in the tree
+     */
+    selected?: Array<string | number>;
+    /**
+     * Specify the value of the TreeNode
+     */
+    value?: string;
+} & Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onSelect'>;
+declare const TreeNode: React.ForwardRefExoticComponent<{
+    /**
+     * **Note:** this is controlled by the parent TreeView component, do not set manually.
+     * The ID of the active node in the tree
+     */
+    active?: string | number | undefined;
+    /**
+     * Specify the children of the TreeNode
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the TreeNode
+     */
+    className?: string | undefined;
+    /**
+     * **[Experimental]** The default expansion state of the node.
+     * *This is only supported with the `enable-treeview-controllable` feature flag!*
+     */
+    defaultIsExpanded?: boolean | undefined;
+    /**
+     * **Note:** this is controlled by the parent TreeView component, do not set manually.
+     * TreeNode depth to determine spacing
+     */
+    depth?: number | undefined;
+    /**
+     * Specify if the TreeNode is disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+     */
+    id?: string | undefined;
+    /**
+     * Specify if the TreeNode is expanded (only applicable to parent nodes)
+     */
+    isExpanded?: boolean | undefined;
+    /**
+     * Rendered label for the TreeNode
+     */
+    label: React.ReactNode;
+    /**
+     * Callback function for when the node receives or loses focus
+     */
+    onNodeFocusEvent?: ((event: React.FocusEvent<HTMLLIElement>) => void) | undefined;
+    /**
+     * Callback function for when the node is selected
+     */
+    onSelect?: ((event: React.MouseEvent, node?: TreeNodeProps) => void) | undefined;
+    /**
+     * Callback function for when a parent node is expanded or collapsed
+     */
+    onToggle?: ((event: React.MouseEvent, node?: TreeNodeProps) => void) | undefined;
+    /**
+     * Callback function for when any node in the tree is selected
+     */
+    onTreeSelect?: ((event: React.MouseEvent, node?: TreeNodeProps) => void) | undefined;
+    /**
+     * Optional prop to allow each node to have an associated icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ComponentType<{}> | undefined;
+    /**
+     * **Note:** this is controlled by the parent TreeView component, do not set manually.
+     * Array containing all selected node IDs in the tree
+     */
+    selected?: (string | number)[] | undefined;
+    /**
+     * Specify the value of the TreeNode
+     */
+    value?: string | undefined;
+} & Omit<React.LiHTMLAttributes<HTMLLIElement>, "onSelect"> & React.RefAttributes<HTMLLIElement>>;
+export default TreeNode;

package/lib/components/TreeView/TreeNode.js

@@ -10,29 +10,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
-var uniqueId = require('../../tools/uniqueId.js');
-var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
+var React = require('react');
 var useControllableState = require('../../internal/useControllableState.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var uniqueId = require('../../tools/uniqueId.js');
 var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     active,
     children,
     className,
-    depth,
+    depth: propDepth,
     disabled,
     id: nodeId,
     isExpanded,
@@ -43,10 +43,13 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     onToggle,
     onTreeSelect,
     renderIcon: Icon,
-    selected,
+    selected: propSelected,
     value,
     ...rest
   } = _ref;
+  // These are provided by the parent TreeView component
+  const depth = propDepth;
+  const selected = propSelected;
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
@@ -151,7 +154,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
          * When focus is on a leaf node or a closed parent node, move focus to
          * its parent node (unless its depth is level 1)
          */
-        findParentTreeNode(currentNode.current.parentNode)?.focus();
+        findParentTreeNode(currentNode.current?.parentNode)?.focus();
       }
     }
     if (children && match.match(event, keys.ArrowRight)) {
@@ -160,7 +163,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
          * When focus is on an expanded parent node, move focus to the first
          * child node
          */
-        currentNode.current.lastChild.firstChild.focus();
+        (currentNode.current?.lastChild?.firstChild).focus();
       } else {
         if (!enableTreeviewControllable) {
           onToggle?.(event, {
@@ -227,8 +230,8 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
   const treeNodeProps = {
     ...rest,
-    ['aria-current']: isActive || null,
-    ['aria-selected']: disabled ? null : isSelected,
+    ['aria-current']: isActive || undefined,
+    ['aria-selected']: disabled ? undefined : isSelected,
     ['aria-disabled']: disabled,
     className: treeNodeClasses,
     id,
@@ -236,8 +239,9 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     onClick: handleClick,
     onFocus: handleFocusEvent,
     onKeyDown: handleKeyDown,
-    ref: currentNode,
-    role: 'treeitem'
+    role: 'treeitem',
+    // @ts-ignore
+    ref: currentNode
   };
   if (!children) {
     return /*#__PURE__*/React__default["default"].createElement("li", treeNodeProps, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -257,7 +261,9 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`,
+      className: `${prefix}--tree-parent-node__toggle`
+      // @ts-ignore
+      ,
       disabled: disabled,
       onClick: handleToggleClick
     }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
@@ -332,11 +338,13 @@ TreeNode.propTypes = {
    * Optional prop to allow each node to have an associated icon.
    * Can be a React component class
    */
+  // @ts-ignore
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * Array containing all selected node IDs in the tree
    */
+  // @ts-ignore
   selected: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])),
   /**
    * Specify the value of the TreeNode
@@ -344,6 +352,5 @@ TreeNode.propTypes = {
   value: PropTypes__default["default"].string
 };
 TreeNode.displayName = 'TreeNode';
-var TreeNode$1 = TreeNode;
 
-exports["default"] = TreeNode$1;
+exports["default"] = TreeNode;

package/lib/components/TreeView/TreeView.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import TreeNode from './TreeNode';
+export type TreeViewProps = {
+    /**
+     * Mark the active node in the tree, represented by its ID
+     */
+    active?: string | number;
+    /**
+     * Specify the children of the TreeView
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the TreeView
+     */
+    className?: string;
+    /**
+     * Specify whether or not the label should be hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide the label text that will be read by a screen reader
+     */
+    label: string;
+    /**
+     * **[Experimental]** Specify the selection mode of the tree.
+     * If `multiselect` is `false` then only one node can be selected at a time
+     */
+    multiselect?: boolean;
+    /**
+     * **[Experimental]** Callback function that is called when any node is activated.
+     * *This is only supported with the `enable-treeview-controllable` feature flag!*
+     */
+    onActivate?: (activated?: string | number) => void;
+    /**
+     * Callback function that is called when any node is selected
+     */
+    onSelect?: (selected: Array<string | number>, payload: any) => void;
+    /**
+     * Array representing all selected node IDs in the tree
+     */
+    selected?: Array<string | number>;
+    /**
+     * Specify the size of the tree from a list of available sizes.
+     */
+    size?: 'xs' | 'sm';
+} & React.HTMLAttributes<HTMLUListElement>;
+type TreeViewComponent = {
+    (props: TreeViewProps): JSX.Element;
+    propTypes?: any;
+    TreeNode: typeof TreeNode;
+};
+declare const TreeView: TreeViewComponent;
+export default TreeView;

package/lib/components/TreeView/TreeView.js

@@ -10,23 +10,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var PropTypes = require('prop-types');
 var cx = require('classnames');
-var uniqueId = require('../../tools/uniqueId.js');
-var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
+var React = require('react');
 var useControllableState = require('../../internal/useControllableState.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var uniqueId = require('../../tools/uniqueId.js');
 var index = require('../FeatureFlags/index.js');
+var TreeNode = require('./TreeNode.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function TreeView(_ref) {
+const TreeView = _ref => {
   let {
     active: prespecifiedActive,
     children,
@@ -46,6 +47,7 @@ function TreeView(_ref) {
   } = React.useRef(rest.id || uniqueId["default"]());
   const prefix = usePrefix.usePrefix();
   const treeClasses = cx__default["default"](className, `${prefix}--tree`, {
+    // @ts-ignore - will always be false according to prop types
     [`${prefix}--tree--${size}`]: size !== 'default'
   });
   const treeRootRef = React.useRef(null);
@@ -71,9 +73,7 @@ function TreeView(_ref) {
   }
   function handleTreeSelect(event) {
     let node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const {
-      id: nodeId
-    } = node;
+    const nodeId = node.id;
     if (multiselect && (event.metaKey || event.ctrlKey)) {
       if (!selected.includes(nodeId)) {
         setSelected(selected.concat(nodeId));
@@ -117,14 +117,15 @@ function TreeView(_ref) {
     }
   }
   let focusTarget = false;
-  const nodesWithProps = React__default["default"].Children.map(children, node => {
+  const nodesWithProps = React__default["default"].Children.map(children, _node => {
+    const node = _node;
     const sharedNodeProps = {
       active,
       depth: 0,
       onNodeFocusEvent: handleFocusEvent,
       onTreeSelect: handleTreeSelect,
       selected,
-      tabIndex: !node.props.disabled && -1 || null
+      tabIndex: !node.props.disabled && -1 || undefined
     };
     if (!focusTarget && !node.props.disabled) {
       sharedNodeProps.tabIndex = 0;
@@ -136,40 +137,47 @@ function TreeView(_ref) {
   });
   function handleKeyDown(event) {
     event.stopPropagation();
-    if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End, {
+    if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
+    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
+    {
       code: 'KeyA'
     }])) {
       event.preventDefault();
     }
+    if (!treeWalker.current) {
+      return;
+    }
     treeWalker.current.currentNode = event.target;
-    let nextFocusNode;
+    let nextFocusNode = null;
     if (match.match(event, keys.ArrowUp)) {
       nextFocusNode = treeWalker.current.previousNode();
     }
     if (match.match(event, keys.ArrowDown)) {
       nextFocusNode = treeWalker.current.nextNode();
     }
+    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
     if (match.matches(event, [keys.Home, keys.End, {
       code: 'KeyA'
     }])) {
       const nodeIds = [];
       if (match.matches(event, [keys.Home, keys.End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
           nodeIds.push(treeWalker.current.currentNode?.id);
         }
         while (match.match(event, keys.Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
-          if (multiselect && event.shiftKey && event.ctrlKey && !nextFocusNode.getAttribute('aria-disabled')) {
+          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled')) {
             nodeIds.push(nextFocusNode?.id);
           }
         }
       }
+      // @ts-ignore - `matches` doesn't like the object syntax without missing properties
       if (match.match(event, {
         code: 'KeyA'
       }) && event.ctrlKey) {
         treeWalker.current.currentNode = treeWalker.current.root;
         while (treeWalker.current.nextNode()) {
-          if (!treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
             nodeIds.push(treeWalker.current.currentNode?.id);
           }
         }
@@ -178,14 +186,19 @@ function TreeView(_ref) {
     }
     if (nextFocusNode && nextFocusNode !== event.target) {
       resetNodeTabIndices();
-      nextFocusNode.tabIndex = 0;
-      nextFocusNode.focus();
+      if (nextFocusNode instanceof HTMLElement) {
+        nextFocusNode.tabIndex = 0;
+        nextFocusNode.focus();
+      }
     }
     rest?.onKeyDown?.(event);
   }
   React.useEffect(() => {
     treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef?.current, NodeFilter.SHOW_ELEMENT, {
       acceptNode: function (node) {
+        if (!(node instanceof Element)) {
+          return NodeFilter.FILTER_SKIP;
+        }
         if (node.classList.contains(`${prefix}--tree-node--disabled`)) {
           return NodeFilter.FILTER_REJECT;
         }
@@ -208,20 +221,20 @@ function TreeView(_ref) {
   }, []);
   useActiveAndSelectedOnMount();
   const labelId = `${treeId}__label`;
-  const TreeLabel = () => !hideLabel && /*#__PURE__*/React__default["default"].createElement("label", {
+  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React__default["default"].createElement("label", {
     id: labelId,
     className: `${prefix}--label`
-  }, label);
+  }, label) : null;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TreeLabel, null), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    "aria-label": hideLabel ? label : null,
-    "aria-labelledby": !hideLabel ? labelId : null,
-    "aria-multiselectable": multiselect || null,
+    "aria-label": hideLabel ? label : undefined,
+    "aria-labelledby": !hideLabel ? labelId : undefined,
+    "aria-multiselectable": multiselect || undefined,
     className: treeClasses,
     onKeyDown: handleKeyDown,
     ref: treeRootRef,
     role: "tree"
   }), nodesWithProps));
-}
+};
 TreeView.propTypes = {
   /**
    * Mark the active node in the tree, represented by its ID
@@ -266,5 +279,6 @@ TreeView.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['xs', 'sm'])
 };
+TreeView.TreeNode = TreeNode["default"];
 
 exports["default"] = TreeView;

package/lib/components/TreeView/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 TreeNode, { TreeNodeProps } from './TreeNode';
+import TreeView, { TreeViewProps } from './TreeView';
+export { TreeNode, TreeView };
+export type { TreeViewProps, TreeNodeProps };
+export default TreeView;

package/lib/components/UIShell/SwitcherItem.d.ts

@@ -47,6 +47,10 @@ interface BaseSwitcherItemProps {
      * Specify where to open the link.
      */
     target?: HTMLAttributeAnchorTarget;
+    /**
+     * The rel property for the link.
+     */
+    rel?: string;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/lib/components/UIShell/SwitcherItem.js

@@ -39,6 +39,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
     onKeyDown = () => {},
     href,
     target,
+    rel,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -77,6 +78,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
     },
     href: href,
     target: target,
+    rel: rel,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -121,7 +123,11 @@ SwitcherItem.propTypes = {
   /**
    * Specify where to open the link.
    */
-  target: PropTypes__default["default"].string
+  target: PropTypes__default["default"].string,
+  /**
+   * The rel property for the link.
+   */
+  rel: PropTypes__default["default"].string
 };
 
 exports["default"] = SwitcherItem;

package/lib/index.d.ts

@@ -116,9 +116,11 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';
-export { Slug as unstable__Slug, SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug';
+export { AILabel, AILabelContent, AILabelActions } from './components/AILabel';
+export { AILabel as unstable__Slug, AILabelContent as unstable__SlugContent, AILabelActions as unstable__SlugActions, } from './components/AILabel';
 export { ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, } from './components/ChatButton';
-export { AiSkeletonText as unstable__AiSkeletonText, AiSkeletonIcon as unstable__AiSkeletonIcon, AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder, } from './components/AiSkeleton';
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder, } from './components/AISkeleton';
+export { AISkeletonText as unstable__AiSkeletonText, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, } from './components/AISkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';

package/lib/index.js

@@ -130,6 +130,8 @@ var Toggle = require('./components/Toggle/Toggle.js');
 var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var index$b = require('./components/Toggletip/index.js');
+var TreeNode = require('./components/TreeView/TreeNode.js');
+var TreeView = require('./components/TreeView/TreeView.js');
 var Content = require('./components/UIShell/Content.js');
 var Header = require('./components/UIShell/Header.js');
 var HeaderContainer = require('./components/UIShell/HeaderContainer.js');
@@ -168,10 +170,10 @@ var index$1 = require('./components/Layout/index.js');
 var index$2 = require('./components/OverflowMenuV2/index.js');
 var index$f = require('./components/Popover/index.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
-var index$3 = require('./components/Slug/index.js');
-var AiSkeletonPlaceholder = require('./components/AiSkeleton/AiSkeletonPlaceholder.js');
-var AiSkeletonIcon = require('./components/AiSkeleton/AiSkeletonIcon.js');
-var AiSkeletonText = require('./components/AiSkeleton/AiSkeletonText.js');
+var index$3 = require('./components/AILabel/index.js');
+var AISkeletonPlaceholder = require('./components/AISkeleton/AISkeletonPlaceholder.js');
+var AISkeletonIcon = require('./components/AISkeleton/AISkeletonIcon.js');
+var AISkeletonText = require('./components/AISkeleton/AISkeletonText.js');
 var DefinitionTooltip = require('./components/Tooltip/DefinitionTooltip.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
 require('./components/Text/index.js');
@@ -192,7 +194,6 @@ var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var TextInput = require('./components/TextInput/TextInput.js');
-var TreeView = require('./components/TreeView/TreeView.js');
 var FluidComboBox = require('./components/FluidComboBox/FluidComboBox.js');
 var FluidComboBox_Skeleton = require('./components/FluidComboBox/FluidComboBox.Skeleton.js');
 var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.js');
@@ -238,7 +239,6 @@ var TableToolbarSearch = require('./components/DataTable/TableToolbarSearch.js')
 var TableToolbarMenu = require('./components/DataTable/TableToolbarMenu.js');
 var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
-var TreeNode = require('./components/TreeView/TreeNode.js');
 
 
 
@@ -394,6 +394,8 @@ exports.ToggletipActions = index$b.ToggletipActions;
 exports.ToggletipButton = index$b.ToggletipButton;
 exports.ToggletipContent = index$b.ToggletipContent;
 exports.ToggletipLabel = index$b.ToggletipLabel;
+exports.TreeNode = TreeNode["default"];
+exports.TreeView = TreeView["default"];
 exports.Content = Content["default"];
 exports.Header = Header["default"];
 exports.HeaderContainer = HeaderContainer["default"];
@@ -438,12 +440,18 @@ exports.unstable_OverflowMenuV2 = index$2.OverflowMenuV2;
 exports.Popover = index$f.Popover;
 exports.PopoverContent = index$f.PopoverContent;
 exports.ProgressBar = ProgressBar["default"];
-exports.unstable__Slug = index$3.Slug;
-exports.unstable__SlugActions = index$3.SlugActions;
-exports.unstable__SlugContent = index$3.SlugContent;
-exports.unstable__AiSkeletonPlaceholder = AiSkeletonPlaceholder["default"];
-exports.unstable__AiSkeletonIcon = AiSkeletonIcon["default"];
-exports.unstable__AiSkeletonText = AiSkeletonText["default"];
+exports.AILabel = index$3.AILabel;
+exports.AILabelActions = index$3.AILabelActions;
+exports.AILabelContent = index$3.AILabelContent;
+exports.unstable__Slug = index$3.AILabel;
+exports.unstable__SlugActions = index$3.AILabelActions;
+exports.unstable__SlugContent = index$3.AILabelContent;
+exports.AISkeletonPlaceholder = AISkeletonPlaceholder["default"];
+exports.unstable__AiSkeletonPlaceholder = AISkeletonPlaceholder["default"];
+exports.AISkeletonIcon = AISkeletonIcon["default"];
+exports.unstable__AiSkeletonIcon = AISkeletonIcon["default"];
+exports.AISkeletonText = AISkeletonText["default"];
+exports.unstable__AiSkeletonText = AISkeletonText["default"];
 exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
 exports.Tooltip = Tooltip.Tooltip;
 exports.GlobalTheme = index$g.GlobalTheme;
@@ -468,7 +476,6 @@ exports.useContextMenu = useContextMenu["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.TextInput = TextInput["default"];
-exports.TreeView = TreeView["default"];
 exports.unstable__FluidComboBox = FluidComboBox["default"];
 exports.unstable__FluidComboBoxSkeleton = FluidComboBox_Skeleton["default"];
 exports.unstable__FluidDatePicker = FluidDatePicker["default"];
@@ -514,4 +521,3 @@ exports.TableToolbarSearch = TableToolbarSearch["default"];
 exports.TableToolbarMenu = TableToolbarMenu["default"];
 exports.FilterableMultiSelect = FilterableMultiSelect["default"];
 exports.MultiSelect = MultiSelect["default"];
-exports.TreeNode = TreeNode["default"];