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

package/cjs/core/{ProgressIndicators/ProgressLinear → InputGrid}/index.js

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

package/cjs/core/InputGroup/InputGroup.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type InputGroupProps = {
+import { StatusMessage } from '../StatusMessage/index.js';
+type InputGroupProps = {
     /**
      * Label of the group.
      */
@@ -36,6 +37,18 @@ declare type InputGroupProps = {
      * Child inputs inside group.
      */
     children: React.ReactNode;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for message.
+     */
+    messageProps?: Pick<React.ComponentProps<typeof StatusMessage>, 'iconProps' | 'contentProps'>;
+    /**
+     * Passes properties for inner input group element.
+     */
+    innerProps?: React.ComponentProps<'div'>;
 };
 /**
  * Group Checkbox/Radio components together

package/cjs/core/InputGroup/InputGroup.js

@@ -1,35 +1,17 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.InputGroup = 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 index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../InputGrid/index.js');
+const index_js_3 = require('../Label/index.js');
+const index_js_4 = require('../StatusMessage/index.js');
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -46,19 +28,68 @@ const index_js_1 = require("../utils/index.js");
  * </InputGroup>
  */
 exports.InputGroup = React.forwardRef((props, forwardedRef) => {
-    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, ...rest } = props;
-    const icon = () => {
-        if (svgIcon) {
-            return React.cloneElement(svgIcon, { 'aria-hidden': true });
-        }
-        if (status && message) {
-            return React.cloneElement(index_js_1.StatusIconMap[status](), {
-                'aria-hidden': true,
-            });
-        }
-        return undefined;
-    };
-    return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { className: 'iui-input-group' }, children)));
+  const {
+    className,
+    children,
+    disabled = false,
+    displayStyle = 'default',
+    label,
+    message,
+    status,
+    svgIcon,
+    required = false,
+    labelProps,
+    messageProps,
+    innerProps,
+    ...rest
+  } = props;
+  const icon = () => {
+    if (svgIcon) {
+      return React.cloneElement(svgIcon, { 'aria-hidden': true });
+    }
+    if (status && message) {
+      return React.cloneElement(index_js_1.StatusIconMap[status](), {
+        'aria-hidden': true,
+      });
+    }
+    return undefined;
+  };
+  return React.createElement(
+    index_js_2.InputGrid,
+    {
+      ref: forwardedRef,
+      as: 'div',
+      labelPlacement: displayStyle,
+      className: (0, classnames_1.default)(
+        'iui-input-group-wrapper',
+        className,
+      ),
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        index_js_3.Label,
+        { as: 'label', required: required, disabled: disabled, ...labelProps },
+        label,
+      ),
+    React.createElement(
+      index_js_1.Box,
+      {
+        as: 'div',
+        ...innerProps,
+        className: (0, classnames_1.default)(
+          'iui-input-group',
+          innerProps?.className,
+        ),
+      },
+      children,
+    ),
+    (message || status || svgIcon) &&
+      React.createElement(
+        index_js_4.StatusMessage,
+        { startIcon: icon(), status: status, ...messageProps },
+        displayStyle !== 'inline' && message,
+      ),
+  );
 });
 exports.default = exports.InputGroup;

package/cjs/core/InputGroup/index.js

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

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { InputProps } from '../Input/Input.js';
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "as" | keyof import("../utils/index.js").InputFlexContainerProps> & import("../utils/index.js").InputFlexContainerProps & {
+    as?: "div" | undefined;
+}> & {
+    /**
+     * Subcomponent to include input in your InputWithDecorations
+     */
+    Input: PolymorphicForwardRefComponent<"input", InputProps>;
+    /**
+     * Subcomponent to include button in your InputWithDecorations
+     */
+    Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+        isActive?: boolean | undefined;
+        label?: React.ReactNode;
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        as?: "button" | undefined;
+    }>;
+};

package/cjs/core/InputWithDecorations/InputWithDecorations.js

@@ -0,0 +1,81 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InputWithDecorations = 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 index_js_2 = require('../Buttons/index.js');
+const InputWithDecorationsContext = React.createContext(undefined);
+const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
+  const { children, size, isDisabled, ...rest } = props;
+  return React.createElement(
+    InputWithDecorationsContext.Provider,
+    { value: { size, isDisabled } },
+    React.createElement(
+      index_js_1.InputFlexContainer,
+      { isDisabled: isDisabled, size: size, ref: ref, ...rest },
+      children,
+    ),
+  );
+});
+//-------------------------------------------------------------------------------
+const InputWithDecorationsInput = React.forwardRef((props, ref) => {
+  const { id: idProp, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = (0, index_js_1.useSafeContext)(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(index_js_1.Box, {
+    as: 'input',
+    ref: ref,
+    'data-iui-size': size ?? contextSize,
+    disabled: localDisabled ?? isDisabled,
+    id: idProp,
+    ...rest,
+  });
+});
+//-------------------------------------------------------------------------------
+const InputWithDecorationsButton = React.forwardRef((props, ref) => {
+  const { children, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = (0, index_js_1.useSafeContext)(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(
+    index_js_2.IconButton,
+    {
+      ref: ref,
+      size: size ?? contextSize,
+      styleType: 'borderless',
+      disabled: localDisabled ?? isDisabled,
+      ...rest,
+    },
+    children,
+  );
+});
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+exports.InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
+  /**
+   * Subcomponent to include input in your InputWithDecorations
+   */
+  Input: InputWithDecorationsInput,
+  /**
+   * Subcomponent to include button in your InputWithDecorations
+   */
+  Button: InputWithDecorationsButton,
+});

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

@@ -0,0 +1,3 @@
+export { InputWithDecorations } from './InputWithDecorations.js';
+declare const _default: "./Input";
+export default _default;

package/cjs/core/InputWithDecorations/index.js

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

package/cjs/core/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type LabelOwnProps = {
+type LabelOwnProps = {
     /**
      * Set the display style of the label.
      *   - 'block' - default, no extra spacing (label and input will be on separate lines)
@@ -12,6 +12,11 @@ declare type LabelOwnProps = {
      * This adds an asterisk next to the label text.
      */
     required?: boolean;
+    /**
+     * Adds disabled styling to a label.
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * A standalone label to be used with input components (using `htmlFor`).

package/cjs/core/Label/Label.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.Label = 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("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.
@@ -42,10 +17,31 @@ const index_js_1 = require("../utils/index.js");
  * <Input id='name-input' />
  */
 exports.Label = React.forwardRef((props, forwardedRef) => {
-    const { displayStyle = 'block', required, className, children, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-input-label', {
-            'iui-inline': displayStyle === 'inline',
-            'iui-required': required,
-        }, className), ref: forwardedRef, ...rest }, children));
+  const {
+    displayStyle = 'block',
+    required,
+    disabled,
+    className,
+    children,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'label',
+      className: (0, classnames_1.default)(
+        'iui-input-label',
+        {
+          'iui-inline': displayStyle === 'inline',
+          'iui-required': required,
+        },
+        className,
+      ),
+      'data-iui-disabled': disabled ? true : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 exports.default = exports.Label;

package/cjs/core/Label/index.js

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

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import type { InputProps } from '../Input/Input.js';
+import { Input } from '../Input/Input.js';
+import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type LabeledInputProps = {
+import { InputGrid } from '../InputGrid/index.js';
+import { InputWithDecorations } from '../InputWithDecorations/index.js';
+export type LabeledInputProps = {
     /**
      * Label of the input.
      */
@@ -17,15 +20,11 @@ export declare type LabeledInputProps = {
     /**
      * Custom svg icon. Will override status icon if specified.
      */
-    svgIcon?: JSX.Element;
+    svgIcon?: JSX.Element | null;
     /**
-     * Custom CSS class name for the input element.
+     * Pass props to wrapper element.
      */
-    inputClassName?: string;
-    /**
-     * Custom CSS Style for the input element.
-     */
-    inputStyle?: React.CSSProperties;
+    wrapperProps?: React.ComponentProps<typeof InputGrid>;
     /**
      * Set display style of label.
      * Supported values:
@@ -35,15 +34,22 @@ export declare type LabeledInputProps = {
      */
     displayStyle?: 'default' | 'inline';
     /**
-     * Set display style of icon.
-     * Supported values:
-     * - 'block' - icon appears below input.
-     * - 'inline' - icon appears inside input (at the end).
-     *
-     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
+     * Passes properties for message content.
+     */
+    messageContentProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Passes properties for icon.
+     */
+    iconProps?: React.ComponentProps<typeof Icon>;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     *  Passes properties for input wrapper.
      */
-    iconDisplayStyle?: 'block' | 'inline';
-} & InputProps;
+    inputWrapperProps?: React.ComponentProps<typeof InputWithDecorations>;
+} & React.ComponentProps<typeof Input>;
 /**
  * Basic labeled input component
  * @example

package/cjs/core/LabeledInput/LabeledInput.js

@@ -1,36 +1,17 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.LabeledInput = 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 Input_js_1 = require("../Input/Input.js");
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../InputGrid/index.js');
+const index_js_3 = require('../InputWithDecorations/index.js');
+const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
+const Label_js_1 = require('../Label/Label.js');
 /**
  * Basic labeled input component
  * @example
@@ -40,10 +21,68 @@ const index_js_1 = require("../utils/index.js");
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
 exports.LabeledInput = React.forwardRef((props, ref) => {
-    const uid = (0, index_js_1.useId)();
-    const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, id = uid, ...rest } = props;
-    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && index_js_1.StatusIconMap[status]());
-    return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
-        React.createElement(Input_js_1.Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));
+  const uid = (0, index_js_1.useId)();
+  const {
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
+    displayStyle = 'default',
+    required = false,
+    id = uid,
+    ...rest
+  } = props;
+  const icon = svgIcon ?? (status && index_js_1.StatusIconMap[status]());
+  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+  return React.createElement(
+    index_js_2.InputGrid,
+    { labelPlacement: displayStyle, ...wrapperProps },
+    label &&
+      React.createElement(
+        Label_js_1.Label,
+        {
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          htmlFor: id,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(
+      index_js_3.InputWithDecorations,
+      { status: status, isDisabled: disabled, ...inputWrapperProps },
+      React.createElement(index_js_3.InputWithDecorations.Input, {
+        disabled: disabled,
+        required: required,
+        id: id,
+        ref: ref,
+        ...rest,
+      }),
+      shouldShowIcon &&
+        React.createElement(
+          index_js_1.Icon,
+          { fill: !svgIcon ? status : undefined, padded: true, ...iconProps },
+          icon,
+        ),
+    ),
+    typeof message === 'string'
+      ? React.createElement(
+          StatusMessage_js_1.StatusMessage,
+          {
+            status: status,
+            iconProps: iconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
+  );
 });
 exports.default = exports.LabeledInput;