@carbon/react 1.103.0 → 1.104.0-rc.0

package/es/components/Tile/Tile.js

@@ -1,615 +1,416 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useState, useEffect, useCallback, useRef, forwardRef, Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
-import Link from '../Link/Link.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { composeEventHandlers } from '../../tools/events.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import { getInteractiveContent, getRoleContent } from '../../internal/useNoInteractiveChildren.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { useId } from '../../internal/useId.js';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
-import { AILabel } from '../AILabel/index.js';
-import { isComponentElement } from '../../internal/utils.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Text } from "../Text/Text.js";
+import { Enter, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
+import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
+import { useId } from "../../internal/useId.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import Link_default from "../Link/index.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { getInteractiveContent, getRoleContent } from "../../internal/useNoInteractiveChildren.js";
+import { AILabel } from "../AILabel/index.js";
+import { isComponentElement } from "../../internal/utils.js";
+import { composeEventHandlers } from "../../tools/events.js";
+import classNames from "classnames";
+import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AiLabel, ArrowRight, Checkbox, CheckboxCheckedFilled, ChevronDown, Error } from "@carbon/icons-react";
 
-var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  decorator,
-  light = false,
-  slug,
-  hasRoundedCorners = false,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-  const tileClasses = cx(`${prefix}--tile`, {
-    [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
-    [`${prefix}--tile--decorator`]: decorator,
-    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
-  }, className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: tileClasses,
-    ref: ref
-  }, rest), children, slug, decorator && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tile--inner-decorator`
-  }, decorator));
+//#region src/components/Tile/Tile.tsx
+/**
+* Copyright IBM Corp. 2019, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const Tile = React.forwardRef(({ children, className, decorator, light = false, slug, hasRoundedCorners = false, ...rest }, ref) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(`${prefix}--tile`, {
+			[`${prefix}--tile--light`]: light,
+			[`${prefix}--tile--slug`]: slug,
+			[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+			[`${prefix}--tile--decorator`]: decorator,
+			[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
+		}, className),
+		ref,
+		...rest,
+		children: [
+			children,
+			slug,
+			decorator && /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tile--inner-decorator`,
+				children: decorator
+			})
+		]
+	});
 });
-Tile.displayName = 'Tile';
+Tile.displayName = "Tile";
 Tile.propTypes = {
-  /**
-   * The child nodes.
-   */
-  children: PropTypes.node,
-  /**
-   * The CSS class names.
-   */
-  className: PropTypes.string,
-  /**
-   * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
-   * when an AILabel is present
-   */
-  hasRoundedCorners: PropTypes.bool,
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   *
-   * @deprecated
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
-   */
-  slug: deprecate(PropTypes.node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
+	children: PropTypes.node,
+	className: PropTypes.string,
+	decorator: PropTypes.node,
+	hasRoundedCorners: PropTypes.bool,
+	light: deprecate(PropTypes.bool, "The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	slug: deprecate(PropTypes.node, "The `slug` prop for `Tile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.")
 };
-const ClickableTile = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  clicked = false,
-  decorator,
-  disabled,
-  href,
-  light,
-  onClick = () => {},
-  onKeyDown = () => {},
-  renderIcon: Icon,
-  hasRoundedCorners,
-  slug,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-  const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
-    [`${prefix}--tile--is-clicked`]: clicked,
-    [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
-    [`${prefix}--tile--decorator`]: decorator,
-    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
-  }, className);
-
-  // TODO: Can this be removed? Or is cds--tile--is-clicked supposed to use this instead of `clicked`?
-  // This state is never used
-  const [isSelected, setIsSelected] = useState(clicked);
-  function handleOnClick(evt) {
-    evt?.persist?.();
-    setIsSelected(!isSelected);
-    onClick(evt);
-  }
-  function handleOnKeyDown(evt) {
-    evt?.persist?.();
-    if (!href && matches(evt, [Enter, Space])) {
-      evt.preventDefault();
-      setIsSelected(!isSelected);
-      onClick(evt);
-    }
-    onKeyDown(evt);
-  }
-  const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
-  if (v12DefaultIcons) {
-    if (!Icon) {
-      Icon = ArrowRight;
-    }
-    if (disabled) {
-      Icon = Error;
-    }
-  }
-  const iconClasses = cx({
-    [`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
-    [`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
-  });
-  return /*#__PURE__*/React.createElement(Link, _extends({
-    className: classes,
-    href: href,
-    tabIndex: !href && !disabled ? 0 : undefined,
-    onClick: !disabled ? handleOnClick : undefined,
-    onKeyDown: handleOnKeyDown,
-    ref: ref,
-    disabled: disabled
-  }, rest), slug || decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tile-content`
-  }, children) : children, (slug === true || decorator === true) && /*#__PURE__*/React.createElement(AiLabel, {
-    size: "24",
-    className: `${prefix}--tile--ai-label-icon`
-  }), /*#__PURE__*/React.isValidElement(decorator) && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tile--inner-decorator`
-  }, decorator), Icon && /*#__PURE__*/React.createElement(Icon, {
-    className: iconClasses,
-    "aria-hidden": "true"
-  }));
+const ClickableTile = React.forwardRef(({ children, className, clicked = false, decorator, disabled, href, light, onClick = () => {}, onKeyDown = () => {}, renderIcon: Icon, hasRoundedCorners, slug, ...rest }, ref) => {
+	const prefix = usePrefix();
+	const classes = classNames(`${prefix}--tile`, `${prefix}--tile--clickable`, {
+		[`${prefix}--tile--is-clicked`]: clicked,
+		[`${prefix}--tile--light`]: light,
+		[`${prefix}--tile--slug`]: slug,
+		[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+		[`${prefix}--tile--decorator`]: decorator,
+		[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
+	}, className);
+	const [isSelected, setIsSelected] = useState(clicked);
+	function handleOnClick(evt) {
+		evt?.persist?.();
+		setIsSelected(!isSelected);
+		onClick(evt);
+	}
+	function handleOnKeyDown(evt) {
+		evt?.persist?.();
+		if (!href && matches(evt, [Enter, Space])) {
+			evt.preventDefault();
+			setIsSelected(!isSelected);
+			onClick(evt);
+		}
+		onKeyDown(evt);
+	}
+	const v12DefaultIcons = useFeatureFlag("enable-v12-tile-default-icons");
+	if (v12DefaultIcons) {
+		if (!Icon) Icon = ArrowRight;
+		if (disabled) Icon = Error;
+	}
+	const iconClasses = classNames({
+		[`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
+		[`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
+	});
+	return /* @__PURE__ */ jsxs(Link_default, {
+		className: classes,
+		href,
+		tabIndex: !href && !disabled ? 0 : void 0,
+		onClick: !disabled ? handleOnClick : void 0,
+		onKeyDown: handleOnKeyDown,
+		ref,
+		disabled,
+		...rest,
+		children: [
+			slug || decorator ? /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tile-content`,
+				children
+			}) : children,
+			(slug === true || decorator === true) && /* @__PURE__ */ jsx(AiLabel, {
+				size: "24",
+				className: `${prefix}--tile--ai-label-icon`
+			}),
+			React.isValidElement(decorator) && /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tile--inner-decorator`,
+				children: decorator
+			}),
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				className: iconClasses,
+				"aria-hidden": "true"
+			})
+		]
+	});
 });
-ClickableTile.displayName = 'ClickableTile';
+ClickableTile.displayName = "ClickableTile";
 ClickableTile.propTypes = {
-  /**
-   * The child nodes.
-   */
-  children: PropTypes.node,
-  /**
-   * The CSS class names.
-   */
-  className: PropTypes.string,
-  /**
-   * Boolean for whether a tile has been clicked.
-   */
-  clicked: PropTypes.bool,
-  /**
-   * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
-   */
-  decorator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-  /**
-   * Specify whether the ClickableTile should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
-   * Only valid when `slug` prop is present
-   */
-  hasRoundedCorners: PropTypes.bool,
-  /**
-   * The href for the link.
-   */
-  href: PropTypes.string,
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-  /**
-   * Specify the function to run when the ClickableTile is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * Specify the function to run when the ClickableTile is interacted with via a keyboard
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * The rel property for the link.
-   */
-  rel: PropTypes.string,
-  /**
-   * A component used to render an icon.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+	children: PropTypes.node,
+	className: PropTypes.string,
+	clicked: PropTypes.bool,
+	decorator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+	disabled: PropTypes.bool,
+	hasRoundedCorners: PropTypes.bool,
+	href: PropTypes.string,
+	light: deprecate(PropTypes.bool, "The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	onClick: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	rel: PropTypes.string,
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
-const SelectableTile = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  decorator,
-  disabled,
-  id,
-  light,
-  onClick = () => {},
-  onChange = () => {},
-  onKeyDown = () => {},
-  selected = false,
-  tabIndex = 0,
-  title = 'title',
-  slug,
-  hasRoundedCorners,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-  const clickHandler = onClick;
-  const keyDownHandler = onKeyDown;
-  const [isSelected, setIsSelected] = useState(selected);
-
-  // Use useEffect to sync with prop changes instead of render-time logic
-  useEffect(() => {
-    setIsSelected(selected);
-  }, [selected]);
-  const classes = cx(`${prefix}--tile`, `${prefix}--tile--selectable`, {
-    [`${prefix}--tile--is-selected`]: isSelected,
-    [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled,
-    [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
-    [`${prefix}--tile--decorator`]: decorator,
-    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
-  }, className);
-
-  // Single function to handle selection changes
-  const handleSelectionChange = useCallback((evt, newSelected) => {
-    setIsSelected(newSelected);
-    onChange(evt, newSelected, id);
-  }, [onChange, id]);
-  function handleClick(evt) {
-    evt.preventDefault();
-    evt?.persist?.();
-    if (normalizedDecorator && decoratorRef.current && evt.target instanceof Node && decoratorRef.current.contains(evt.target)) {
-      return;
-    }
-    const newSelected = !isSelected;
-    handleSelectionChange(evt, newSelected);
-    clickHandler(evt);
-  }
-  function handleKeyDown(evt) {
-    evt?.persist?.();
-    if (matches(evt, [Enter, Space])) {
-      evt.preventDefault();
-      const newSelected = !isSelected;
-      handleSelectionChange(evt, newSelected);
-    }
-    keyDownHandler(evt);
-  }
-
-  // AILabel is always size `xs`
-  const decoratorRef = useRef(null);
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = isComponentElement(candidate, AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
-    size: 'xs',
-    ref: decoratorRef
-  }) : candidate;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    React.createElement("div", _extends({
-      className: classes,
-      onClick: !disabled ? handleClick : undefined,
-      role: "checkbox",
-      "aria-checked": isSelected,
-      onKeyDown: !disabled ? handleKeyDown : undefined,
-      tabIndex: !disabled ? tabIndex : undefined,
-      ref: ref,
-      id: id,
-      title: title
-    }, rest), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
-    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React.createElement(Checkbox, null))), /*#__PURE__*/React.createElement(Text, {
-      as: "label",
-      htmlFor: id,
-      className: `${prefix}--tile-content`
-    }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefix}--tile--inner-decorator`
-    }, normalizedDecorator) : '')
-  );
+const SelectableTile = React.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title = "title", slug, hasRoundedCorners, ...rest }, ref) => {
+	const prefix = usePrefix();
+	const clickHandler = onClick;
+	const keyDownHandler = onKeyDown;
+	const [isSelected, setIsSelected] = useState(selected);
+	useEffect(() => {
+		setIsSelected(selected);
+	}, [selected]);
+	const classes = classNames(`${prefix}--tile`, `${prefix}--tile--selectable`, {
+		[`${prefix}--tile--is-selected`]: isSelected,
+		[`${prefix}--tile--light`]: light,
+		[`${prefix}--tile--disabled`]: disabled,
+		[`${prefix}--tile--slug`]: slug,
+		[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+		[`${prefix}--tile--decorator`]: decorator,
+		[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
+	}, className);
+	const handleSelectionChange = useCallback((evt, newSelected) => {
+		setIsSelected(newSelected);
+		onChange(evt, newSelected, id);
+	}, [onChange, id]);
+	function handleClick(evt) {
+		evt.preventDefault();
+		evt?.persist?.();
+		if (normalizedDecorator && decoratorRef.current && evt.target instanceof Node && decoratorRef.current.contains(evt.target)) return;
+		handleSelectionChange(evt, !isSelected);
+		clickHandler(evt);
+	}
+	function handleKeyDown(evt) {
+		evt?.persist?.();
+		if (matches(evt, [Enter, Space])) {
+			evt.preventDefault();
+			handleSelectionChange(evt, !isSelected);
+		}
+		keyDownHandler(evt);
+	}
+	const decoratorRef = useRef(null);
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, {
+		size: "xs",
+		ref: decoratorRef
+	}) : candidate;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		onClick: !disabled ? handleClick : void 0,
+		role: "checkbox",
+		"aria-checked": isSelected,
+		onKeyDown: !disabled ? handleKeyDown : void 0,
+		tabIndex: !disabled ? tabIndex : void 0,
+		ref,
+		id,
+		title,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`,
+				children: isSelected ? /* @__PURE__ */ jsx(CheckboxCheckedFilled, {}) : /* @__PURE__ */ jsx(Checkbox, {})
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				as: "label",
+				htmlFor: id,
+				className: `${prefix}--tile-content`,
+				children
+			}),
+			slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tile--inner-decorator`,
+				children: normalizedDecorator
+			}) : ""
+		]
+	});
 });
 SelectableTile.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * Specify whether the SelectableTile should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
-   * Only valid when `slug` prop is present
-   */
-  hasRoundedCorners: PropTypes.bool,
-  /**
-   * The ID of the `<input>`.
-   */
-  id: PropTypes.string,
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-  /**
-   * The `name` of the `<input>`.
-   * @deprecated
-   */
-  name: deprecate(PropTypes.string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
-  /**
-   * The empty handler of the `<input>`.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Specify the function to run when the SelectableTile is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * Specify the function to run when the SelectableTile is interacted with via a keyboard
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * `true` to select this tile.
-   */
-  selected: PropTypes.bool,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
-   */
-  slug: deprecate(PropTypes.node, 'The `slug` prop for `SelectableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
-  /**
-   * Specify the tab index of the wrapper element
-   */
-  tabIndex: PropTypes.number,
-  /**
-   * The `title` of the `<input>`.
-   */
-  title: PropTypes.string,
-  /**
-   * The value of the `<input>`.
-   * @deprecated
-   */
-  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
+	children: PropTypes.node,
+	className: PropTypes.string,
+	decorator: PropTypes.node,
+	disabled: PropTypes.bool,
+	hasRoundedCorners: PropTypes.bool,
+	id: PropTypes.string,
+	light: deprecate(PropTypes.bool, "The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	name: deprecate(PropTypes.string, "The `name` property is no longer used.  It will be removed in the next major release."),
+	onChange: PropTypes.func,
+	onClick: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	selected: PropTypes.bool,
+	slug: deprecate(PropTypes.node, "The `slug` prop for `SelectableTile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
+	tabIndex: PropTypes.number,
+	title: PropTypes.string,
+	value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), "The `value` property is no longer used.  It will be removed in the next major release.`")
 };
-const ExpandableTile = /*#__PURE__*/forwardRef(({
-  tabIndex = 0,
-  className,
-  children,
-  decorator,
-  expanded = false,
-  tileMaxHeight = 0,
-  tilePadding = 0,
-  onClick,
-  onKeyUp,
-  tileCollapsedIconText = 'Interact to expand Tile',
-  tileExpandedIconText = 'Interact to collapse Tile',
-  tileCollapsedLabel,
-  tileExpandedLabel,
-  light,
-  slug,
-  hasRoundedCorners,
-  ...rest
-}, forwardRef) => {
-  const [measuredAboveHeight, setMeasuredAboveHeight] = useState(0);
-  const [measuredPadding, setMeasuredPadding] = useState(0);
-  const [isExpanded, setIsExpanded] = useState(expanded);
-  const [interactive, setInteractive] = useState(true);
-  const aboveTheFold = useRef(null);
-  const belowTheFold = useRef(null);
-  const chevronInteractiveRef = useRef(null);
-  const tileContent = useRef(null);
-  const tile = useRef(null);
-  const ref = useMergedRefs([forwardRef, tile]);
-  const prefix = usePrefix();
-  useEffect(() => {
-    setIsExpanded(expanded);
-  }, [expanded]);
-  const handleClick = () => {
-    setIsExpanded(prev => !prev);
-  };
-  const handleKeyUp = evt => {
-    if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
-      if (matches(evt, [Enter, Space])) {
-        evt.preventDefault();
-      }
-    }
-  };
-  const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
-    [`${prefix}--tile--is-expanded`]: isExpanded,
-    [`${prefix}--tile--light`]: light
-  }, className);
-  const interactiveClassNames = cx(classNames, `${prefix}--tile--expandable--interactive`, {
-    [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
-    [`${prefix}--tile--decorator`]: decorator,
-    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
-  });
-  const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
-  const childrenAsArray = Children.toArray(children);
-  useIsomorphicEffect(() => {
-    if (!tile.current || !aboveTheFold.current) {
-      return;
-    }
-    const style = window.getComputedStyle(tile.current);
-    const paddingTop = parseInt(style.getPropertyValue('padding-top'), 10) || 0;
-    const paddingBottom = parseInt(style.getPropertyValue('padding-bottom'), 10) || 0;
-    setMeasuredPadding(paddingTop + paddingBottom);
-    setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
-  }, []);
-  useIsomorphicEffect(() => {
-    if (!aboveTheFold.current || !belowTheFold.current) {
-      return;
-    }
-    const hasInteractive = Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
-    setInteractive(hasInteractive);
-  }, [slug, decorator, children]);
-  useIsomorphicEffect(() => {
-    if (!tile.current) {
-      return;
-    }
-    if (isExpanded) {
-      tile.current.style.maxHeight = '';
-      return;
-    }
-    const measured = measuredAboveHeight || aboveTheFold.current?.scrollHeight || 0;
-    const baseHeight = tileMaxHeight > 0 ? tileMaxHeight : measured;
-    const pad = tilePadding > 0 ? tilePadding : measuredPadding;
-    tile.current.style.maxHeight = `${baseHeight + pad}px`;
-  }, [isExpanded, tileMaxHeight, tilePadding, measuredAboveHeight, measuredPadding]);
-  useEffect(() => {
-    if (!aboveTheFold.current) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      if (aboveTheFold.current) {
-        setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
-      }
-    });
-    resizeObserver.observe(aboveTheFold.current);
-    return () => resizeObserver.disconnect();
-  }, []);
-  const belowTheFoldId = useId(interactive ? 'expandable-tile-interactive' : 'expandable-tile');
-
-  // AILabel is always size `xs`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = isComponentElement(candidate, AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
-    size: 'xs'
-  }) : candidate;
-  return interactive ? /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: interactiveClassNames
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    ref: tileContent
-  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tile--inner-decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement("div", {
-    ref: aboveTheFold,
-    className: `${prefix}--tile-content`
-  }, childrenAsArray[0]), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-expanded": isExpanded,
-    "aria-controls": belowTheFoldId,
-    onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
-    onClick: composeEventHandlers([onClick, handleClick]),
-    "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
-    ref: chevronInteractiveRef,
-    className: chevronInteractiveClassNames
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
-    ref: belowTheFold,
-    className: `${prefix}--tile-content`,
-    id: belowTheFoldId
-  }, childrenAsArray[1]))) : /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
-    ref: ref,
-    className: classNames,
-    "aria-controls": belowTheFoldId,
-    "aria-expanded": isExpanded,
-    title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
-  }, rest, {
-    onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
-    onClick: composeEventHandlers([onClick, handleClick]),
-    tabIndex: tabIndex
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: tileContent
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: aboveTheFold,
-    className: `${prefix}--tile-content`
-  }, childrenAsArray[0]), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tile__chevron`
-  }, /*#__PURE__*/React.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React.createElement(ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
-    ref: belowTheFold,
-    id: belowTheFoldId,
-    className: `${prefix}--tile-content`
-  }, childrenAsArray[1])));
+const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorator, expanded = false, tileMaxHeight = 0, tilePadding = 0, onClick, onKeyUp, tileCollapsedIconText = "Interact to expand Tile", tileExpandedIconText = "Interact to collapse Tile", tileCollapsedLabel, tileExpandedLabel, light, slug, hasRoundedCorners, ...rest }, forwardRef) => {
+	const [measuredAboveHeight, setMeasuredAboveHeight] = useState(0);
+	const [measuredPadding, setMeasuredPadding] = useState(0);
+	const [isExpanded, setIsExpanded] = useState(expanded);
+	const [interactive, setInteractive] = useState(true);
+	const aboveTheFold = useRef(null);
+	const belowTheFold = useRef(null);
+	const chevronInteractiveRef = useRef(null);
+	const tileContent = useRef(null);
+	const tile = useRef(null);
+	const ref = useMergedRefs([forwardRef, tile]);
+	const prefix = usePrefix();
+	useEffect(() => {
+		setIsExpanded(expanded);
+	}, [expanded]);
+	const handleClick = () => {
+		setIsExpanded((prev) => !prev);
+	};
+	const handleKeyUp = (evt) => {
+		if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
+			if (matches(evt, [Enter, Space])) evt.preventDefault();
+		}
+	};
+	const classNames$1 = classNames(`${prefix}--tile`, `${prefix}--tile--expandable`, {
+		[`${prefix}--tile--is-expanded`]: isExpanded,
+		[`${prefix}--tile--light`]: light
+	}, className);
+	const interactiveClassNames = classNames(classNames$1, `${prefix}--tile--expandable--interactive`, {
+		[`${prefix}--tile--slug`]: slug,
+		[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+		[`${prefix}--tile--decorator`]: decorator,
+		[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
+	});
+	const chevronInteractiveClassNames = classNames(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
+	const childrenAsArray = Children.toArray(children);
+	useIsomorphicEffect(() => {
+		if (!tile.current || !aboveTheFold.current) return;
+		const style = window.getComputedStyle(tile.current);
+		setMeasuredPadding((parseInt(style.getPropertyValue("padding-top"), 10) || 0) + (parseInt(style.getPropertyValue("padding-bottom"), 10) || 0));
+		setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
+	}, []);
+	useIsomorphicEffect(() => {
+		if (!aboveTheFold.current || !belowTheFold.current) return;
+		setInteractive(Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator));
+	}, [
+		slug,
+		decorator,
+		children
+	]);
+	useIsomorphicEffect(() => {
+		if (!tile.current) return;
+		if (isExpanded) {
+			tile.current.style.maxHeight = "";
+			return;
+		}
+		const measured = measuredAboveHeight || aboveTheFold.current?.scrollHeight || 0;
+		const baseHeight = tileMaxHeight > 0 ? tileMaxHeight : measured;
+		const pad = tilePadding > 0 ? tilePadding : measuredPadding;
+		tile.current.style.maxHeight = `${baseHeight + pad}px`;
+	}, [
+		isExpanded,
+		tileMaxHeight,
+		tilePadding,
+		measuredAboveHeight,
+		measuredPadding
+	]);
+	useEffect(() => {
+		if (!aboveTheFold.current) return;
+		const resizeObserver = new ResizeObserver(() => {
+			if (aboveTheFold.current) setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
+		});
+		resizeObserver.observe(aboveTheFold.current);
+		return () => resizeObserver.disconnect();
+	}, []);
+	const belowTheFoldId = useId(interactive ? "expandable-tile-interactive" : "expandable-tile");
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "xs" }) : candidate;
+	return interactive ? /* @__PURE__ */ jsx("div", {
+		ref,
+		className: interactiveClassNames,
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: tileContent,
+			children: [
+				slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+					className: `${prefix}--tile--inner-decorator`,
+					children: normalizedDecorator
+				}) : "",
+				/* @__PURE__ */ jsx("div", {
+					ref: aboveTheFold,
+					className: `${prefix}--tile-content`,
+					children: childrenAsArray[0]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-expanded": isExpanded,
+					"aria-controls": belowTheFoldId,
+					onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
+					onClick: composeEventHandlers([onClick, handleClick]),
+					"aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+					ref: chevronInteractiveRef,
+					className: chevronInteractiveClassNames,
+					children: /* @__PURE__ */ jsx(ChevronDown, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: belowTheFold,
+					className: `${prefix}--tile-content`,
+					id: belowTheFoldId,
+					children: childrenAsArray[1]
+				})
+			]
+		})
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		ref,
+		className: classNames$1,
+		"aria-controls": belowTheFoldId,
+		"aria-expanded": isExpanded,
+		title: isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+		...rest,
+		onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
+		onClick: composeEventHandlers([onClick, handleClick]),
+		tabIndex,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: tileContent,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					ref: aboveTheFold,
+					className: `${prefix}--tile-content`,
+					children: childrenAsArray[0]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: `${prefix}--tile__chevron`,
+					children: [/* @__PURE__ */ jsx("span", { children: isExpanded ? tileExpandedLabel : tileCollapsedLabel }), /* @__PURE__ */ jsx(ChevronDown, {})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: belowTheFold,
+					id: belowTheFoldId,
+					className: `${prefix}--tile-content`,
+					children: childrenAsArray[1]
+				})
+			]
+		})
+	});
 });
 ExpandableTile.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * `true` if the tile is expanded.
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
-   * Only valid when `slug` prop is present
-   */
-  hasRoundedCorners: PropTypes.bool,
-  /**
-   * An ID that can be provided to aria-labelledby
-   */
-  id: PropTypes.string,
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-  /**
-   * Specify the function to run when the ExpandableTile is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * optional handler to trigger a function when a key is pressed
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
-   */
-  slug: deprecate(PropTypes.node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
-  /**
-   * The `tabindex` attribute.
-   */
-  tabIndex: PropTypes.number,
-  /**
-   * The description of the "collapsed" icon that can be read by screen readers.
-   */
-  tileCollapsedIconText: PropTypes.string,
-  /**
-   * When "collapsed", a label to appear next to the chevron (e.g., "View more").
-   */
-  tileCollapsedLabel: PropTypes.string,
-  /**
-   * The description of the "expanded" icon that can be read by screen readers.
-   */
-  tileExpandedIconText: PropTypes.string,
-  /**
-   * When "expanded", a label to appear next to the chevron (e.g., "View less").
-   */
-  tileExpandedLabel: PropTypes.string
+	children: PropTypes.node,
+	className: PropTypes.string,
+	decorator: PropTypes.node,
+	expanded: PropTypes.bool,
+	hasRoundedCorners: PropTypes.bool,
+	id: PropTypes.string,
+	light: deprecate(PropTypes.bool, "The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	onClick: PropTypes.func,
+	onKeyUp: PropTypes.func,
+	slug: deprecate(PropTypes.node, "The `slug` prop for `ExpandableTile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
+	tabIndex: PropTypes.number,
+	tileCollapsedIconText: PropTypes.string,
+	tileCollapsedLabel: PropTypes.string,
+	tileExpandedIconText: PropTypes.string,
+	tileExpandedLabel: PropTypes.string
 };
-ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(({
-  children
-}, ref) => {
-  const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: `${prefix}--tile-content__above-the-fold`
-  }, children);
+ExpandableTile.displayName = "ExpandableTile";
+const TileAboveTheFoldContent = React.forwardRef(({ children }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: `${usePrefix()}--tile-content__above-the-fold`,
+		children
+	});
 });
-TileAboveTheFoldContent.propTypes = {
-  /**
-   * The child nodes.
-   */
-  children: PropTypes.node
-};
-TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-const TileBelowTheFoldContent = /*#__PURE__*/React.forwardRef(({
-  children
-}, ref) => {
-  const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: `${prefix}--tile-content__below-the-fold`
-  }, children);
+TileAboveTheFoldContent.propTypes = { children: PropTypes.node };
+TileAboveTheFoldContent.displayName = "TileAboveTheFoldContent";
+const TileBelowTheFoldContent = React.forwardRef(({ children }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: `${usePrefix()}--tile-content__below-the-fold`,
+		children
+	});
 });
-TileBelowTheFoldContent.propTypes = {
-  /**
-   * The child nodes.
-   */
-  children: PropTypes.node
-};
-TileBelowTheFoldContent.displayName = 'TileBelowTheFoldContent';
+TileBelowTheFoldContent.propTypes = { children: PropTypes.node };
+TileBelowTheFoldContent.displayName = "TileBelowTheFoldContent";
 
-export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent };
+//#endregion
+export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent };