@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/lib/components/Tile/Tile.js

@@ -1,617 +1,425 @@
 /**
- * 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.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_Text = require('../Text/Text.js');
+const require_keys = require('../../internal/keyboard/keys.js');
+const require_match = require('../../internal/keyboard/match.js');
+const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+const require_useId = require('../../internal/useId.js');
+const require_deprecate = require('../../prop-types/deprecate.js');
+const require_index = require('../Link/index.js');
+const require_useMergedRefs = require('../../internal/useMergedRefs.js');
+const require_index$1 = require('../FeatureFlags/index.js');
+const require_useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
+const require_index$2 = require('../AILabel/index.js');
+const require_utils = require('../../internal/utils.js');
+const require_events = require('../../tools/events.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var PropTypes = require('prop-types');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
-var Link = require('../Link/Link.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
-var deprecate = require('../../prop-types/deprecate.js');
-var events = require('../../tools/events.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
-var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
-var index = require('../FeatureFlags/index.js');
-var useId = require('../../internal/useId.js');
-var Text = require('../Text/Text.js');
-require('../Text/TextDirection.js');
-var index$1 = require('../AILabel/index.js');
-var utils = require('../../internal/utils.js');
-
-var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  decorator,
-  light = false,
-  slug,
-  hasRoundedCorners = false,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.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", _rollupPluginBabelHelpers.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.default.forwardRef(({ children, className, decorator, light = false, slug, hasRoundedCorners = false, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(`${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__ */ (0, react_jsx_runtime.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.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.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: prop_types.default.node,
+	className: prop_types.default.string,
+	decorator: prop_types.default.node,
+	hasRoundedCorners: prop_types.default.bool,
+	light: require_deprecate.deprecate(prop_types.default.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: require_deprecate.deprecate(prop_types.default.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.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);
-  const [isSelected, setIsSelected] = React.useState(clicked);
-  function handleOnClick(evt) {
-    evt?.persist?.();
-    setIsSelected(!isSelected);
-    onClick(evt);
-  }
-  function handleOnKeyDown(evt) {
-    evt?.persist?.();
-    if (match.matches(evt, [keys.Enter, keys.Space])) {
-      setIsSelected(!isSelected);
-    }
-    onKeyDown(evt);
-  }
-  const v12DefaultIcons = index.useFeatureFlag('enable-v12-tile-default-icons');
-  if (v12DefaultIcons) {
-    if (!Icon) {
-      Icon = iconsReact.ArrowRight;
-    }
-    if (disabled) {
-      Icon = iconsReact.Error;
-    }
-  }
-  const iconClasses = cx({
-    [`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
-    [`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
-  });
-  return /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.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(iconsReact.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.default.forwardRef(({ children, className, clicked = false, decorator, disabled, href, light, onClick = () => {}, onKeyDown = () => {}, renderIcon: Icon, hasRoundedCorners, slug, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const classes = (0, classnames.default)(`${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] = (0, react.useState)(clicked);
+	function handleOnClick(evt) {
+		evt?.persist?.();
+		setIsSelected(!isSelected);
+		onClick(evt);
+	}
+	function handleOnKeyDown(evt) {
+		evt?.persist?.();
+		if (!href && require_match.matches(evt, [require_keys.Enter, require_keys.Space])) {
+			evt.preventDefault();
+			setIsSelected(!isSelected);
+			onClick(evt);
+		}
+		onKeyDown(evt);
+	}
+	const v12DefaultIcons = require_index$1.useFeatureFlag("enable-v12-tile-default-icons");
+	if (v12DefaultIcons) {
+		if (!Icon) Icon = _carbon_icons_react.ArrowRight;
+		if (disabled) Icon = _carbon_icons_react.Error;
+	}
+	const iconClasses = (0, classnames.default)({
+		[`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
+		[`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.default, {
+		className: classes,
+		href,
+		tabIndex: !href && !disabled ? 0 : void 0,
+		onClick: !disabled ? handleOnClick : void 0,
+		onKeyDown: handleOnKeyDown,
+		ref,
+		disabled,
+		...rest,
+		children: [
+			slug || decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--tile-content`,
+				children
+			}) : children,
+			(slug === true || decorator === true) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.AiLabel, {
+				size: "24",
+				className: `${prefix}--tile--ai-label-icon`
+			}),
+			react.default.isValidElement(decorator) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--tile--inner-decorator`,
+				children: decorator
+			}),
+			Icon && /* @__PURE__ */ (0, react_jsx_runtime.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.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: prop_types.default.node,
+	className: prop_types.default.string,
+	clicked: prop_types.default.bool,
+	decorator: prop_types.default.oneOfType([prop_types.default.bool, prop_types.default.node]),
+	disabled: prop_types.default.bool,
+	hasRoundedCorners: prop_types.default.bool,
+	href: prop_types.default.string,
+	light: require_deprecate.deprecate(prop_types.default.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: prop_types.default.func,
+	onKeyDown: prop_types.default.func,
+	rel: prop_types.default.string,
+	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.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.usePrefix();
-  const clickHandler = onClick;
-  const keyDownHandler = onKeyDown;
-  const [isSelected, setIsSelected] = React.useState(selected);
-
-  // Use useEffect to sync with prop changes instead of render-time logic
-  React.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 = React.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 (match.matches(evt, [keys.Enter, keys.Space])) {
-      evt.preventDefault();
-      const newSelected = !isSelected;
-      handleSelectionChange(evt, newSelected);
-    }
-    keyDownHandler(evt);
-  }
-
-  // AILabel is always size `xs`
-  const decoratorRef = React.useRef(null);
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
-    size: 'xs',
-    ref: decoratorRef
-  }) : candidate;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    React.createElement("div", _rollupPluginBabelHelpers.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(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React.createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React.createElement(Text.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.default.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title = "title", slug, hasRoundedCorners, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const clickHandler = onClick;
+	const keyDownHandler = onKeyDown;
+	const [isSelected, setIsSelected] = (0, react.useState)(selected);
+	(0, react.useEffect)(() => {
+		setIsSelected(selected);
+	}, [selected]);
+	const classes = (0, classnames.default)(`${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 = (0, react.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 (require_match.matches(evt, [require_keys.Enter, require_keys.Space])) {
+			evt.preventDefault();
+			handleSelectionChange(evt, !isSelected);
+		}
+		keyDownHandler(evt);
+	}
+	const decoratorRef = (0, react.useRef)(null);
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index$2.AILabel) ? (0, react.cloneElement)(candidate, {
+		size: "xs",
+		ref: decoratorRef
+	}) : candidate;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`,
+				children: isSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CheckboxCheckedFilled, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Checkbox, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				as: "label",
+				htmlFor: id,
+				className: `${prefix}--tile-content`,
+				children
+			}),
+			slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.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.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.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.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.deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	decorator: prop_types.default.node,
+	disabled: prop_types.default.bool,
+	hasRoundedCorners: prop_types.default.bool,
+	id: prop_types.default.string,
+	light: require_deprecate.deprecate(prop_types.default.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: require_deprecate.deprecate(prop_types.default.string, "The `name` property is no longer used.  It will be removed in the next major release."),
+	onChange: prop_types.default.func,
+	onClick: prop_types.default.func,
+	onKeyDown: prop_types.default.func,
+	selected: prop_types.default.bool,
+	slug: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number,
+	title: prop_types.default.string,
+	value: require_deprecate.deprecate(prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]), "The `value` property is no longer used.  It will be removed in the next major release.`")
 };
-const ExpandableTile = /*#__PURE__*/React.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] = React.useState(0);
-  const [measuredPadding, setMeasuredPadding] = React.useState(0);
-  const [isExpanded, setIsExpanded] = React.useState(expanded);
-  const [interactive, setInteractive] = React.useState(true);
-  const aboveTheFold = React.useRef(null);
-  const belowTheFold = React.useRef(null);
-  const chevronInteractiveRef = React.useRef(null);
-  const tileContent = React.useRef(null);
-  const tile = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
-  const prefix = usePrefix.usePrefix();
-  React.useEffect(() => {
-    setIsExpanded(expanded);
-  }, [expanded]);
-  const handleClick = () => {
-    setIsExpanded(prev => !prev);
-  };
-  const handleKeyUp = evt => {
-    if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
-      if (match.matches(evt, [keys.Enter, keys.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 = React.Children.toArray(children);
-  useIsomorphicEffect.default(() => {
-    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.default(() => {
-    if (!aboveTheFold.current || !belowTheFold.current) {
-      return;
-    }
-    const hasInteractive = Boolean(useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current)) || Boolean(useNoInteractiveChildren.getRoleContent(aboveTheFold.current)) || Boolean(useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) || Boolean(useNoInteractiveChildren.getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
-    setInteractive(hasInteractive);
-  }, [slug, decorator, children]);
-  useIsomorphicEffect.default(() => {
-    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]);
-  React.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.useId(interactive ? 'expandable-tile-interactive' : 'expandable-tile');
-
-  // AILabel is always size `xs`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
-    size: 'xs'
-  }) : candidate;
-  return interactive ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.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: events.composeEventHandlers([onKeyUp, handleKeyUp]),
-    onClick: events.composeEventHandlers([onClick, handleClick]),
-    "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
-    ref: chevronInteractiveRef,
-    className: chevronInteractiveClassNames
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
-    ref: belowTheFold,
-    className: `${prefix}--tile-content`,
-    id: belowTheFoldId
-  }, childrenAsArray[1]))) : /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
-    type: "button",
-    ref: ref,
-    className: classNames,
-    "aria-controls": belowTheFoldId,
-    "aria-expanded": isExpanded,
-    title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
-  }, rest, {
-    onKeyUp: events.composeEventHandlers([onKeyUp, handleKeyUp]),
-    onClick: events.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(iconsReact.ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
-    ref: belowTheFold,
-    id: belowTheFoldId,
-    className: `${prefix}--tile-content`
-  }, childrenAsArray[1])));
+const ExpandableTile = (0, react.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] = (0, react.useState)(0);
+	const [measuredPadding, setMeasuredPadding] = (0, react.useState)(0);
+	const [isExpanded, setIsExpanded] = (0, react.useState)(expanded);
+	const [interactive, setInteractive] = (0, react.useState)(true);
+	const aboveTheFold = (0, react.useRef)(null);
+	const belowTheFold = (0, react.useRef)(null);
+	const chevronInteractiveRef = (0, react.useRef)(null);
+	const tileContent = (0, react.useRef)(null);
+	const tile = (0, react.useRef)(null);
+	const ref = require_useMergedRefs.useMergedRefs([forwardRef, tile]);
+	const prefix = require_usePrefix.usePrefix();
+	(0, react.useEffect)(() => {
+		setIsExpanded(expanded);
+	}, [expanded]);
+	const handleClick = () => {
+		setIsExpanded((prev) => !prev);
+	};
+	const handleKeyUp = (evt) => {
+		if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
+			if (require_match.matches(evt, [require_keys.Enter, require_keys.Space])) evt.preventDefault();
+		}
+	};
+	const classNames = (0, classnames.default)(`${prefix}--tile`, `${prefix}--tile--expandable`, {
+		[`${prefix}--tile--is-expanded`]: isExpanded,
+		[`${prefix}--tile--light`]: light
+	}, className);
+	const interactiveClassNames = (0, classnames.default)(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 = (0, classnames.default)(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
+	const childrenAsArray = react.Children.toArray(children);
+	require_useIsomorphicEffect.default(() => {
+		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);
+	}, []);
+	require_useIsomorphicEffect.default(() => {
+		if (!aboveTheFold.current || !belowTheFold.current) return;
+		setInteractive(Boolean(require_useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current)) || Boolean(require_useNoInteractiveChildren.getRoleContent(aboveTheFold.current)) || Boolean(require_useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) || Boolean(require_useNoInteractiveChildren.getRoleContent(belowTheFold.current)) || Boolean(slug || decorator));
+	}, [
+		slug,
+		decorator,
+		children
+	]);
+	require_useIsomorphicEffect.default(() => {
+		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
+	]);
+	(0, react.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 = require_useId.useId(interactive ? "expandable-tile-interactive" : "expandable-tile");
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index$2.AILabel) ? (0, react.cloneElement)(candidate, { size: "xs" }) : candidate;
+	return interactive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: interactiveClassNames,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: tileContent,
+			children: [
+				slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--tile--inner-decorator`,
+					children: normalizedDecorator
+				}) : "",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: aboveTheFold,
+					className: `${prefix}--tile-content`,
+					children: childrenAsArray[0]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-expanded": isExpanded,
+					"aria-controls": belowTheFoldId,
+					onKeyUp: require_events.composeEventHandlers([onKeyUp, handleKeyUp]),
+					onClick: require_events.composeEventHandlers([onClick, handleClick]),
+					"aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+					ref: chevronInteractiveRef,
+					className: chevronInteractiveClassNames,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: belowTheFold,
+					className: `${prefix}--tile-content`,
+					id: belowTheFoldId,
+					children: childrenAsArray[1]
+				})
+			]
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		ref,
+		className: classNames,
+		"aria-controls": belowTheFoldId,
+		"aria-expanded": isExpanded,
+		title: isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+		...rest,
+		onKeyUp: require_events.composeEventHandlers([onKeyUp, handleKeyUp]),
+		onClick: require_events.composeEventHandlers([onClick, handleClick]),
+		tabIndex,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: tileContent,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: aboveTheFold,
+					className: `${prefix}--tile-content`,
+					children: childrenAsArray[0]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `${prefix}--tile__chevron`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: isExpanded ? tileExpandedLabel : tileCollapsedLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, {})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.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.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.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: prop_types.default.node,
+	className: prop_types.default.string,
+	decorator: prop_types.default.node,
+	expanded: prop_types.default.bool,
+	hasRoundedCorners: prop_types.default.bool,
+	id: prop_types.default.string,
+	light: require_deprecate.deprecate(prop_types.default.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: prop_types.default.func,
+	onKeyUp: prop_types.default.func,
+	slug: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number,
+	tileCollapsedIconText: prop_types.default.string,
+	tileCollapsedLabel: prop_types.default.string,
+	tileExpandedIconText: prop_types.default.string,
+	tileExpandedLabel: prop_types.default.string
 };
-ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(({
-  children
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: `${prefix}--tile-content__above-the-fold`
-  }, children);
+ExpandableTile.displayName = "ExpandableTile";
+const TileAboveTheFoldContent = react.default.forwardRef(({ children }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: `${require_usePrefix.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.usePrefix();
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: `${prefix}--tile-content__below-the-fold`
-  }, children);
+TileAboveTheFoldContent.propTypes = { children: prop_types.default.node };
+TileAboveTheFoldContent.displayName = "TileAboveTheFoldContent";
+const TileBelowTheFoldContent = react.default.forwardRef(({ children }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: `${require_usePrefix.usePrefix()}--tile-content__below-the-fold`,
+		children
+	});
 });
-TileBelowTheFoldContent.propTypes = {
-  /**
-   * The child nodes.
-   */
-  children: PropTypes.node
-};
-TileBelowTheFoldContent.displayName = 'TileBelowTheFoldContent';
+TileBelowTheFoldContent.propTypes = { children: prop_types.default.node };
+TileBelowTheFoldContent.displayName = "TileBelowTheFoldContent";
 
+//#endregion
 exports.ClickableTile = ClickableTile;
 exports.ExpandableTile = ExpandableTile;
 exports.SelectableTile = SelectableTile;
 exports.Tile = Tile;
 exports.TileAboveTheFoldContent = TileAboveTheFoldContent;
-exports.TileBelowTheFoldContent = TileBelowTheFoldContent;
+exports.TileBelowTheFoldContent = TileBelowTheFoldContent;