@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/cjs/core/Overlay/Overlay.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type OverlayComponentProps = {
+    /**
+     * The sub-component elements of Overlay.
+     */
+    children?: React.ReactNode;
+    /**
+     * Placeholder for Progress Indicator in Overlay
+     */
+    content?: React.ReactNode;
+};
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <Overlay content="loading">
+ * content beneath the overlay... (text, img, etc.)
+ * </Overlay>
+ *
+ *
+ * This is an Overlay Component using subcomponents.
+ *
+ *
+ * @example
+ * <Overlay.Wrapper>
+ *  <Overlay.Overlay>
+ *    loading...
+ *  <Overlay.Overlay>
+ *  <Overlay.HiddenContent>
+ *    content beneath the overlay... (text, img, etc.)
+ *  <Overlay.HiddenContent />
+ * </Overlay.Wrapper>
+ *
+ *
+ */
+export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
+    /**
+     *
+     * The main component is a wrapper to hold the
+     * Overlay HiddenContent and Overlay Message.
+     */
+    Wrapper: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * HiddenContent houses page elements that are blurred by the
+     * Overlay.
+     */
+    HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
+    /**
+     *  Message contains the progress indicator and loading message
+     *  for the Overlay. It sits on top of the HiddenContent.
+     */
+    Overlay: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+};
+export {};

package/cjs/core/Overlay/Overlay.js

@@ -0,0 +1,96 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Overlay = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = tslib_1.__importDefault(require('react'));
+const index_js_1 = require('../utils/index.js');
+// --------------------------------------------------------------------------------
+const OverlayComponent = react_1.default.forwardRef((props, forwardedRef) => {
+  const { content, children, ...rest } = props;
+  return react_1.default.createElement(
+    OverlayWrapper,
+    { ref: forwardedRef, ...rest },
+    react_1.default.createElement(OverlayMessage, null, content),
+    react_1.default.createElement(OverlayHiddenContent, null, children),
+  );
+});
+OverlayComponent.displayName = 'Overlay';
+// --------------------------------------------------------------------------------
+const OverlayHiddenContent = react_1.default.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  useInertPolyfill();
+  return react_1.default.createElement(
+    index_js_1.Box,
+    { inert: '', ref: ref, ...rest },
+    children,
+  );
+});
+OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
+// --------------------------------------------------------------------------------
+const OverlayMessage = (0, index_js_1.polymorphic)('iui-overlay');
+OverlayMessage.displayName = 'Overlay.Overlay';
+// --------------------------------------------------------------------------------
+const OverlayWrapper = (0, index_js_1.polymorphic)('iui-overlay-wrapper');
+OverlayWrapper.displayName = 'Overlay.Wrapper';
+// --------------------------------------------------------------------------------
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <Overlay content="loading">
+ * content beneath the overlay... (text, img, etc.)
+ * </Overlay>
+ *
+ *
+ * This is an Overlay Component using subcomponents.
+ *
+ *
+ * @example
+ * <Overlay.Wrapper>
+ *  <Overlay.Overlay>
+ *    loading...
+ *  <Overlay.Overlay>
+ *  <Overlay.HiddenContent>
+ *    content beneath the overlay... (text, img, etc.)
+ *  <Overlay.HiddenContent />
+ * </Overlay.Wrapper>
+ *
+ *
+ */
+exports.Overlay = Object.assign(OverlayComponent, {
+  /**
+   *
+   * The main component is a wrapper to hold the
+   * Overlay HiddenContent and Overlay Message.
+   */
+  Wrapper: OverlayWrapper,
+  /**
+   * HiddenContent houses page elements that are blurred by the
+   * Overlay.
+   */
+  HiddenContent: OverlayHiddenContent,
+  /**
+   *  Message contains the progress indicator and loading message
+   *  for the Overlay. It sits on top of the HiddenContent.
+   */
+  Overlay: OverlayMessage,
+});
+const useInertPolyfill = () => {
+  const loaded = react_1.default.useRef(false);
+  const modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  react_1.default.useEffect(() => {
+    async () => {
+      if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
+        await (0, index_js_1.dynamicImport)(modulePath);
+        loaded.current = true;
+      }
+    };
+  }, []);
+};

package/cjs/core/Overlay/index.d.ts

@@ -0,0 +1 @@
+export { Overlay } from './Overlay.js';

package/{esm/core/ProgressIndicators/ProgressRadial → cjs/core/Overlay}/index.js

@@ -1,6 +1,14 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Overlay = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { ProgressRadial } from './ProgressRadial.js';
-export default './ProgressRadial';
+var Overlay_js_1 = require('./Overlay.js');
+Object.defineProperty(exports, 'Overlay', {
+  enumerable: true,
+  get: function () {
+    return Overlay_js_1.Overlay;
+  },
+});

package/cjs/core/ProgressIndicators/{ProgressLinear/ProgressLinear.d.ts → ProgressLinear.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type ProgressLinearProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
-     * Progress variant. If true, value will be ignored.
-     * @default false
+     * Progress variant. If true, `value` will be ignored.
+     *
+     * Defaults to true if `value` is passed, otherwise false.
      */
     indeterminate?: boolean;
     /**
@@ -21,7 +21,7 @@ declare type ProgressLinearProps = {
      */
     isAnimated?: boolean;
     /**
-     * Status of progress. Positive status always has 100% value.
+     * Status of progress.
      */
     status?: 'positive' | 'negative';
 };

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -0,0 +1,64 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ProgressLinear = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+/**
+ * Shows progress on a linear bar
+ * @example
+ * Determinate
+ * <ProgressLinear value={25}/>
+ * Indeterminate
+ * <ProgressLinear indeterminate={true}/>
+ * Labeled - Center
+ * <ProgressLinear value={50} labels={['Centered Label']} />
+ * Labeled - Left & Right
+ * <ProgressLinear value={50} labels={['Loading...', '50%']} />
+ * Positive / Negative.
+ * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * <ProgressLinear status='negative' />
+ */
+exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    indeterminate = value === undefined,
+    labels = [],
+    isAnimated = false,
+    status,
+    className,
+    ...rest
+  } = props;
+  const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-progress-indicator-linear',
+        className,
+      ),
+      ref: forwardedRef,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      'data-iui-animated': isAnimated ? 'true' : undefined,
+      style: {
+        '--iui-progress-percentage': `${boundedValue}%`,
+      },
+      ...rest,
+    },
+    labels.length > 0 &&
+      React.createElement(
+        index_js_1.Box,
+        { className: 'iui-progress-indicator-linear-label' },
+        labels.map((label, index) =>
+          React.createElement('span', { key: index }, label),
+        ),
+      ),
+  );
+});
+exports.default = exports.ProgressLinear;

package/cjs/core/ProgressIndicators/{ProgressRadial/ProgressRadial.d.ts → ProgressRadial.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type ProgressRadialProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
      * Progress variant. If true, value will be ignored.
-     * @default false
+     *
+     * @default false if value is provided, true otherwise
      */
     indeterminate?: boolean;
     /**

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -0,0 +1,74 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ProgressRadial = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+/**
+ * Circular Progress Indicator
+ * @example
+ * Basic
+ * <ProgressRadial value={50} />
+ * Indeterminate
+ * <ProgressRadial indeterminate />
+ * Positive / Negative
+ * <ProgressRadial status='positive' />
+ * <ProgressRadial status='negative' />
+ * Centered Content
+ * <ProgressRadial value={63}>63</ProgressRadial>
+ * Small
+ * <ProgressRadial size={'small'} indeterminate/>
+ */
+exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    indeterminate = value === undefined,
+    status,
+    size,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  const statusMap = {
+    negative: React.createElement(index_js_1.SvgImportantSmall, {
+      'aria-hidden': true,
+    }),
+    positive: React.createElement(index_js_1.SvgCheckmarkSmall, {
+      'aria-hidden': true,
+    }),
+  };
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-progress-indicator-radial',
+        className,
+      ),
+      'data-iui-size': size,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      ref: forwardedRef,
+      style: {
+        ...(value !== undefined && {
+          '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(
+            value,
+            0,
+            100,
+          )}%`,
+        }),
+        ...style,
+      },
+      ...rest,
+    },
+    size !== 'x-small'
+      ? children ?? (!!status ? statusMap[status] : null)
+      : null,
+  );
+});
+exports.default = exports.ProgressRadial;

package/cjs/core/ProgressIndicators/index.d.ts

@@ -1,2 +1,2 @@
-export { ProgressLinear } from './ProgressLinear/index.js';
-export { ProgressRadial } from './ProgressRadial/index.js';
+export { ProgressLinear } from './ProgressLinear.js';
+export { ProgressRadial } from './ProgressRadial.js';

package/cjs/core/ProgressIndicators/index.js

@@ -1,11 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ProgressRadial = exports.ProgressLinear = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var index_js_1 = require("./ProgressLinear/index.js");
-Object.defineProperty(exports, "ProgressLinear", { enumerable: true, get: function () { return index_js_1.ProgressLinear; } });
-var index_js_2 = require("./ProgressRadial/index.js");
-Object.defineProperty(exports, "ProgressRadial", { enumerable: true, get: function () { return index_js_2.ProgressRadial; } });
+var ProgressLinear_js_1 = require('./ProgressLinear.js');
+Object.defineProperty(exports, 'ProgressLinear', {
+  enumerable: true,
+  get: function () {
+    return ProgressLinear_js_1.ProgressLinear;
+  },
+});
+var ProgressRadial_js_1 = require('./ProgressRadial.js');
+Object.defineProperty(exports, 'ProgressRadial', {
+  enumerable: true,
+  get: function () {
+    return ProgressRadial_js_1.ProgressRadial;
+  },
+});

package/cjs/core/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type RadioProps = {
+type RadioProps = {
     /**
      * Label of the radio.
      */
@@ -9,11 +9,6 @@ declare type RadioProps = {
      * Status of the radio.
      */
     status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Set focus on radio element.
-     * @default false
-     */
-    setFocus?: boolean;
 };
 /**
  * Basic radio input component

package/cjs/core/Radio/Radio.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Radio = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Basic radio input component
  * @example
@@ -45,17 +20,41 @@ const index_js_1 = require("../utils/index.js");
  * <Radio status='negative' label='Negative' />
  */
 exports.Radio = React.forwardRef((props, ref) => {
-    const { className, disabled = false, label, status, style, setFocus = false, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    const radio = (React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
-    return !label ? (radio) : (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
+  const { className, disabled = false, label, status, style, ...rest } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+  const radio = React.createElement(index_js_1.Box, {
+    as: 'input',
+    className: (0, classnames_1.default)(
+      'iui-radio',
+      className && { [className]: !label },
+    ),
+    style: !label ? style : undefined,
+    disabled: disabled,
+    type: 'radio',
+    ref: refs,
+    ...rest,
+  });
+  return !label
+    ? radio
+    : React.createElement(
+        index_js_1.Box,
+        {
+          as: 'label',
+          className: (0, classnames_1.default)(
+            'iui-radio-wrapper',
+            { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
+            className,
+          ),
+          style: style,
+        },
         radio,
-        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-radio-label' }, label))));
+        label &&
+          React.createElement(
+            index_js_1.Box,
+            { as: 'span', className: 'iui-radio-label' },
+            label,
+          ),
+      );
 });
 exports.default = exports.Radio;

package/cjs/core/Radio/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Radio = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Radio_js_1 = require("./Radio.js");
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_js_1.Radio; } });
+var Radio_js_1 = require('./Radio.js');
+Object.defineProperty(exports, 'Radio', {
+  enumerable: true,
+  get: function () {
+    return Radio_js_1.Radio;
+  },
+});
 exports.default = './Radio';

package/cjs/core/RadioTiles/RadioTile.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type RadioTileProps = {
+type RadioTileProps = {
     /**
      * Icon to be used.
      */
@@ -13,11 +13,6 @@ declare type RadioTileProps = {
      * Additional description, if needed.
      */
     description?: React.ReactNode;
-    /**
-     * Set focus on radio tile element.
-     * @default false
-     */
-    setFocus?: boolean;
 };
 /**
  * RadioTile component to be used in RadioTileGroup component

package/cjs/core/RadioTiles/RadioTile.js

@@ -1,58 +1,59 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.RadioTile = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
 exports.RadioTile = React.forwardRef((props, ref) => {
-    const { icon, label, description, setFocus = false, className, style, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-radio-tile', className), style: style },
-        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
-        React.createElement(index_js_1.Box, { className: 'iui-radio-tile-content' },
-            icon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-radio-tile-icon', "aria-hidden": true }, icon)),
-            label && React.createElement(index_js_1.Box, { className: 'iui-radio-tile-label' }, label),
-            description && (React.createElement(index_js_1.Box, { className: 'iui-radio-tile-sublabel' }, description)))));
+  const { icon, label, description, className, style, ...rest } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'label',
+      className: (0, classnames_1.default)('iui-radio-tile', className),
+      style: style,
+    },
+    React.createElement(index_js_1.Box, {
+      as: 'input',
+      className: 'iui-radio-tile-input',
+      type: 'radio',
+      ref: refs,
+      ...rest,
+    }),
+    React.createElement(
+      index_js_1.Box,
+      { className: 'iui-radio-tile-content' },
+      icon &&
+        React.createElement(
+          index_js_1.Box,
+          { as: 'span', className: 'iui-radio-tile-icon', 'aria-hidden': true },
+          icon,
+        ),
+      label &&
+        React.createElement(
+          index_js_1.Box,
+          { className: 'iui-radio-tile-label' },
+          label,
+        ),
+      description &&
+        React.createElement(
+          index_js_1.Box,
+          { className: 'iui-radio-tile-sublabel' },
+          description,
+        ),
+    ),
+  );
 });
 exports.default = exports.RadioTile;