@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/cjs/core/InformationPanel/InformationPanel.js

@@ -1,40 +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.InformationPanel = 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");
-require("@itwin/itwinui-css/css/information-panel.css");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -57,44 +31,76 @@ require("@itwin/itwinui-css/css/information-panel.css");
  * </InformationPanelWrapper>
  */
 exports.InformationPanel = React.forwardRef((props, ref) => {
-    const { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
-    const infoPanelRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(ref, infoPanelRef);
-    const startResize = (e) => {
-        if (!infoPanelRef.current) {
-            return;
-        }
-        if (e.button != undefined && e.button !== 0) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
-        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => {
-            var _a;
-            return (_a = infoPanelRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.removeEventListener('pointermove', onResize);
-        }, { once: true });
-    };
-    const onResize = React.useCallback((e) => {
-        e.preventDefault();
-        if (!infoPanelRef.current) {
-            return;
-        }
-        const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
-        if (orientation === 'vertical') {
-            infoPanelRef.current.style.width = `${right - e.clientX}px`;
-        }
-        else {
-            infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
-        }
-    }, [orientation]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-information-panel', {
-            'iui-right': orientation === 'vertical',
-            'iui-bottom': orientation === 'horizontal',
-            'iui-visible': isOpen,
-        }, className), ref: refs, ...rest },
-        resizable && (React.createElement(index_js_1.Box, { className: 'iui-resizer', onPointerDown: startResize },
-            React.createElement(index_js_1.Box, { className: 'iui-resizer-bar' }))),
-        children));
+  const {
+    className,
+    isOpen = false,
+    orientation = 'vertical',
+    resizable = true,
+    children,
+    ...rest
+  } = props;
+  const infoPanelRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(ref, infoPanelRef);
+  const startResize = (e) => {
+    if (!infoPanelRef.current) {
+      return;
+    }
+    if (e.button != undefined && e.button !== 0) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    infoPanelRef.current.ownerDocument.addEventListener(
+      'pointermove',
+      onResize,
+    );
+    infoPanelRef.current.ownerDocument.addEventListener(
+      'pointerup',
+      () =>
+        infoPanelRef.current?.ownerDocument.removeEventListener(
+          'pointermove',
+          onResize,
+        ),
+      { once: true },
+    );
+  };
+  const onResize = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!infoPanelRef.current) {
+        return;
+      }
+      const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
+      if (orientation === 'vertical') {
+        infoPanelRef.current.style.width = `${right - e.clientX}px`;
+      } else {
+        infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
+      }
+    },
+    [orientation],
+  );
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-information-panel',
+        {
+          'iui-right': orientation === 'vertical',
+          'iui-bottom': orientation === 'horizontal',
+          'iui-visible': isOpen,
+        },
+        className,
+      ),
+      ref: refs,
+      ...rest,
+    },
+    resizable &&
+      React.createElement(
+        index_js_1.Box,
+        { className: 'iui-resizer', onPointerDown: startResize },
+        React.createElement(index_js_1.Box, { className: 'iui-resizer-bar' }),
+      ),
+    children,
+  );
 });
 exports.default = exports.InformationPanel;

package/cjs/core/InformationPanel/InformationPanelBody.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/cjs/core/InformationPanel/InformationPanelBody.js

@@ -1,14 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.InformationPanelBody = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
+const index_js_1 = require('../utils/index.js');
 /**
  * Body of the `InformationPanel` containing the main content.
  */
-exports.InformationPanelBody = index_js_1.polymorphic.div('iui-information-body');
+exports.InformationPanelBody = index_js_1.polymorphic.div(
+  'iui-information-body',
+);
 exports.default = exports.InformationPanelBody;

package/cjs/core/InformationPanel/InformationPanelContent.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-declare type InformationPanelContentProps = {
+type InformationPanelContentProps = {
     /**
      * If set to 'inline', the label/input pairs will be shown on the same line.
      * The component handles the spacing and alignment automatically.

package/cjs/core/InformationPanel/InformationPanelContent.js

@@ -1,40 +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.InformationPanelContent = 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");
-require("@itwin/itwinui-css/css/information-panel.css");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * The `InformationPanelContent` component should be used inside `InformationPanelBody`
  * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
@@ -59,7 +33,19 @@ require("@itwin/itwinui-css/css/information-panel.css");
  * </InformationPanelContent>
  */
 exports.InformationPanelContent = React.forwardRef((props, forwardedRef) => {
-    const { className, displayStyle = 'default', children, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className), ref: forwardedRef, ...rest }, children));
+  const { className, displayStyle = 'default', children, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-information-body-content',
+        { 'iui-inline': displayStyle === 'inline' },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 exports.default = exports.InformationPanelContent;

package/cjs/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-declare type InformationPanelHeaderProps = {
+type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.
      *

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -1,41 +1,15 @@
-"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.InformationPanelHeader = 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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../Buttons/index.js");
-const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../Buttons/index.js');
+const index_js_2 = require('../utils/index.js');
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *
@@ -53,12 +27,32 @@ require("@itwin/itwinui-css/css/information-panel.css");
  * </InformationPanelHeader>
  */
 exports.InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
-    const { children, onClose, actions, className, ...rest } = props;
-    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-information-header', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_2.Box, { as: 'span', className: 'iui-information-header-label' }, children),
-        React.createElement(index_js_2.Box, { className: 'iui-information-header-actions' },
-            actions,
-            onClose && (React.createElement(index_js_1.IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                React.createElement(index_js_2.SvgCloseSmall, { "aria-hidden": true }))))));
+  const { children, onClose, actions, className, ...rest } = props;
+  return React.createElement(
+    index_js_2.Box,
+    {
+      className: (0, classnames_1.default)('iui-information-header', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      index_js_2.Box,
+      { as: 'span', className: 'iui-information-header-label' },
+      children,
+    ),
+    React.createElement(
+      index_js_2.Box,
+      { className: 'iui-information-header-actions' },
+      actions,
+      onClose &&
+        React.createElement(
+          index_js_1.IconButton,
+          { styleType: 'borderless', onClick: onClose, 'aria-label': 'Close' },
+          React.createElement(index_js_2.SvgCloseSmall, {
+            'aria-hidden': true,
+          }),
+        ),
+    ),
+  );
 });
 exports.default = exports.InformationPanelHeader;

package/cjs/core/InformationPanel/InformationPanelWrapper.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

package/cjs/core/InformationPanel/InformationPanelWrapper.js

@@ -1,12 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.InformationPanelWrapper = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
+const index_js_1 = require('../utils/index.js');
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.
@@ -16,5 +15,7 @@ require("@itwin/itwinui-css/css/information-panel.css");
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-exports.InformationPanelWrapper = index_js_1.polymorphic.div('iui-information-panel-wrapper');
+exports.InformationPanelWrapper = index_js_1.polymorphic.div(
+  'iui-information-panel-wrapper',
+);
 exports.default = exports.InformationPanelWrapper;

package/cjs/core/InformationPanel/index.js

@@ -1,18 +1,48 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InformationPanelContent =
+  exports.InformationPanelBody =
+  exports.InformationPanelHeader =
+  exports.InformationPanelWrapper =
+  exports.InformationPanel =
+    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 InformationPanel_js_1 = require("./InformationPanel.js");
-Object.defineProperty(exports, "InformationPanel", { enumerable: true, get: function () { return InformationPanel_js_1.InformationPanel; } });
+var InformationPanel_js_1 = require('./InformationPanel.js');
+Object.defineProperty(exports, 'InformationPanel', {
+  enumerable: true,
+  get: function () {
+    return InformationPanel_js_1.InformationPanel;
+  },
+});
 exports.default = './InformationPanel';
-var InformationPanelWrapper_js_1 = require("./InformationPanelWrapper.js");
-Object.defineProperty(exports, "InformationPanelWrapper", { enumerable: true, get: function () { return InformationPanelWrapper_js_1.InformationPanelWrapper; } });
-var InformationPanelHeader_js_1 = require("./InformationPanelHeader.js");
-Object.defineProperty(exports, "InformationPanelHeader", { enumerable: true, get: function () { return InformationPanelHeader_js_1.InformationPanelHeader; } });
-var InformationPanelBody_js_1 = require("./InformationPanelBody.js");
-Object.defineProperty(exports, "InformationPanelBody", { enumerable: true, get: function () { return InformationPanelBody_js_1.InformationPanelBody; } });
-var InformationPanelContent_js_1 = require("./InformationPanelContent.js");
-Object.defineProperty(exports, "InformationPanelContent", { enumerable: true, get: function () { return InformationPanelContent_js_1.InformationPanelContent; } });
+var InformationPanelWrapper_js_1 = require('./InformationPanelWrapper.js');
+Object.defineProperty(exports, 'InformationPanelWrapper', {
+  enumerable: true,
+  get: function () {
+    return InformationPanelWrapper_js_1.InformationPanelWrapper;
+  },
+});
+var InformationPanelHeader_js_1 = require('./InformationPanelHeader.js');
+Object.defineProperty(exports, 'InformationPanelHeader', {
+  enumerable: true,
+  get: function () {
+    return InformationPanelHeader_js_1.InformationPanelHeader;
+  },
+});
+var InformationPanelBody_js_1 = require('./InformationPanelBody.js');
+Object.defineProperty(exports, 'InformationPanelBody', {
+  enumerable: true,
+  get: function () {
+    return InformationPanelBody_js_1.InformationPanelBody;
+  },
+});
+var InformationPanelContent_js_1 = require('./InformationPanelContent.js');
+Object.defineProperty(exports, 'InformationPanelContent', {
+  enumerable: true,
+  get: function () {
+    return InformationPanelContent_js_1.InformationPanelContent;
+  },
+});

package/cjs/core/Input/Input.d.ts

@@ -1,15 +1,18 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
-export declare type InputProps = {
-    /**
-     * Set focus on input element.
-     * @default false
-     */
-    setFocus?: boolean;
+export type InputProps = {
     /**
      * Modify size of the input.
      */
     size?: 'small' | 'large';
+    /**
+     * Status of input.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Modify the native `size` attribute of the `<input>` element.
+     * The `width` or `inline-size` property must be unset in order to use this prop.
+     */
+    htmlSize?: number;
 };
 /**
  * Basic input component

package/cjs/core/Input/Input.js

@@ -1,40 +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.Input = 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");
-require("@itwin/itwinui-css/css/input.css");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Basic input component
  * @example
@@ -43,14 +17,17 @@ require("@itwin/itwinui-css/css/input.css");
  * <Input size='small' />
  */
 exports.Input = React.forwardRef((props, ref) => {
-    const { setFocus = false, size, className, ...rest } = props;
-    const inputRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(inputRef, ref);
-    React.useEffect(() => {
-        if (inputRef.current && setFocus) {
-            inputRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
+  const { size, htmlSize, status, className, ...rest } = props;
+  const inputRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(inputRef, ref);
+  return React.createElement(index_js_1.Box, {
+    as: 'input',
+    className: (0, classnames_1.default)('iui-input', className),
+    'data-iui-size': size,
+    'data-iui-status': status,
+    size: htmlSize,
+    ref: refs,
+    ...rest,
+  });
 });
 exports.default = exports.Input;

package/cjs/core/Input/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Input = 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 Input_js_1 = require("./Input.js");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_js_1.Input; } });
+var Input_js_1 = require('./Input.js');
+Object.defineProperty(exports, 'Input', {
+  enumerable: true,
+  get: function () {
+    return Input_js_1.Input;
+  },
+});
 exports.default = './Input';

package/cjs/core/InputGrid/InputGrid.d.ts

@@ -0,0 +1,25 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type InputGridOwnProps = {
+    /**
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
+     * @default 'default'
+     */
+    labelPlacement?: 'default' | 'inline';
+};
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+export declare const InputGrid: PolymorphicForwardRefComponent<"div", InputGridOwnProps>;
+export default InputGrid;

package/cjs/core/InputGrid/InputGrid.js

@@ -0,0 +1,39 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InputGrid = 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 index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+//-------------------------------------------------------------------------------
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+exports.InputGrid = React.forwardRef((props, ref) => {
+  const { children, className, labelPlacement = undefined, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+//-------------------------------------------------------------------------------
+exports.default = exports.InputGrid;