@itwin/itwinui-react 3.11.3 → 3.12.0

package/esm/core/Label/Label.js

@@ -1,21 +1,29 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../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.
- * @example
- * <Label htmlFor='name-input'>Name</Label>
- * <Input id='name-input' />
- */
 export const Label = React.forwardRef((props, forwardedRef) => {
-    const { displayStyle = 'block', required, disabled, className, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'label', className: cx('iui-input-label', {
-            'iui-inline': displayStyle === 'inline',
-            'iui-required': required,
-        }, className), "data-iui-disabled": disabled ? true : undefined, ref: forwardedRef, ...rest }, children));
+  const {
+    displayStyle = 'block',
+    required,
+    disabled,
+    className,
+    children,
+    ...rest
+  } = props;
+  return _jsx(Box, {
+    as: 'label',
+    className: cx(
+      'iui-input-label',
+      {
+        'iui-inline': displayStyle === 'inline',
+        'iui-required': required,
+      },
+      className,
+    ),
+    'data-iui-disabled': disabled ? true : undefined,
+    ref: forwardedRef,
+    ...rest,
+    children: children,
+  });
 });

package/esm/core/LabeledInput/LabeledInput.js

@@ -1,7 +1,4 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
 import { InputWithIcon, StatusIconMap } from '../../utils/index.js';
@@ -10,22 +7,63 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/Icon.js';
 import cx from 'classnames';
-/**
- * Basic labeled input component
- * @example
- * <LabeledInput label='My label' />
- * <LabeledInput disabled label='My label' />
- * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' />
- */
 export const LabeledInput = React.forwardRef((props, ref) => {
-    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, ...rest } = props;
-    const icon = svgIcon ?? (status && StatusIconMap[status]());
-    const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
-        React.createElement(InputWithIcon, { ...inputWrapperProps },
-            React.createElement(Input, { disabled: disabled, required: required, ref: ref, ...rest }),
-            shouldShowIcon && (React.createElement(Icon, { fill: status, ...iconProps, className: cx('iui-end-icon', iconProps?.className) }, icon))),
-        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
+  const {
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
+    displayStyle = 'default',
+    required = false,
+    ...rest
+  } = props;
+  const icon = svgIcon ?? (status && StatusIconMap[status]());
+  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+  return _jsxs(InputGrid, {
+    labelPlacement: displayStyle,
+    'data-iui-status': status,
+    ...wrapperProps,
+    children: [
+      label &&
+        _jsx(Label, {
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          ...labelProps,
+          children: label,
+        }),
+      _jsxs(InputWithIcon, {
+        ...inputWrapperProps,
+        children: [
+          _jsx(Input, {
+            disabled: disabled,
+            required: required,
+            ref: ref,
+            ...rest,
+          }),
+          shouldShowIcon &&
+            _jsx(Icon, {
+              fill: status,
+              ...iconProps,
+              className: cx('iui-end-icon', iconProps?.className),
+              children: icon,
+            }),
+        ],
+      }),
+      typeof message === 'string'
+        ? _jsx(StatusMessage, {
+            status: status,
+            iconProps: iconProps,
+            contentProps: messageContentProps,
+            children: message,
+          })
+        : message,
+    ],
+  });
 });

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -102,392 +102,6 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: <T>(props: ({
-    /**
-     * Label of the select.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the select. Does not apply to 'inline' select.
-     *
-     * @example
-     * <caption>strings</caption>
-     * <LabeledSelect message='Positive Message' … />
-     *
-     * @example
-     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
-     * <LabeledSelect
-     *   status="positive"
-     *   message={
-     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
-     *       Help message
-     *     </StatusMessage>
-     *   }
-     *   …
-     * />
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the select.
-     * @default ''
-     */
-    status?: "positive" | "negative" | "warning" | undefined;
-    /**
-     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-     *
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element | undefined;
-    /**
-     * If true, shows a red asterisk.
-     *
-     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
-     *
-     * @default false
-     */
-    required?: boolean | undefined;
-    /**
-     * Pass props to wrapper element.
-     */
-    wrapperProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "as" | "labelPlacement"> & {
-        labelPlacement?: "default" | "inline" | undefined;
-    } & {
-        as?: "div" | undefined;
-    }) | undefined;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
-    /**
-     * Passes properties for message content.
-     */
-    messageContentProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }) | undefined;
-    /**
-     * Passes properties for message icon.
-     */
-    messageIconProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
-        padded?: boolean | undefined;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        as?: "span" | undefined;
-    }) | undefined;
-} & Pick<LabeledInputProps, "displayStyle"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue" | "placeholder" | "value"> & {
-    native: true;
-} & {
-    disabled?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-    status?: "positive" | "negative" | "warning" | undefined;
-} & {
-    value?: string | null | undefined;
-    onChange?: ((value: string, event: React.ChangeEvent<HTMLSelectElement>) => void) | undefined;
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean | undefined;
-    }[];
-    defaultValue?: string | undefined;
-    triggerProps?: Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-        ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
-    }, "size"> | undefined;
-    required?: boolean | undefined;
-    multiple?: undefined;
-} & {
-    styleType?: "default" | undefined;
-    placeholder?: string | undefined;
-} & {
-    /**
-     * LabeledSelect does not support `styleType`.
-     */
-    styleType?: undefined;
-} & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
-}) | ({
-    /**
-     * Label of the select.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the select. Does not apply to 'inline' select.
-     *
-     * @example
-     * <caption>strings</caption>
-     * <LabeledSelect message='Positive Message' … />
-     *
-     * @example
-     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
-     * <LabeledSelect
-     *   status="positive"
-     *   message={
-     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
-     *       Help message
-     *     </StatusMessage>
-     *   }
-     *   …
-     * />
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the select.
-     * @default ''
-     */
-    status?: "positive" | "negative" | "warning" | undefined;
-    /**
-     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-     *
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element | undefined;
-    /**
-     * If true, shows a red asterisk.
-     *
-     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
-     *
-     * @default false
-     */
-    required?: boolean | undefined;
-    /**
-     * Pass props to wrapper element.
-     */
-    wrapperProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "as" | "labelPlacement"> & {
-        labelPlacement?: "default" | "inline" | undefined;
-    } & {
-        as?: "div" | undefined;
-    }) | undefined;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
-    /**
-     * Passes properties for message content.
-     */
-    messageContentProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }) | undefined;
-    /**
-     * Passes properties for message icon.
-     */
-    messageIconProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
-        padded?: boolean | undefined;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        as?: "span" | undefined;
-    }) | undefined;
-} & Pick<LabeledInputProps, "displayStyle"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue" | "placeholder" | "value"> & {
-    native?: false | undefined;
-} & {
-    disabled?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-    status?: "positive" | "negative" | "warning" | undefined;
-} & {
-    placeholder?: React.ReactNode;
-    options: import("../Select/Select.js").SelectOption<T>[];
-    itemRenderer?: ((option: import("../Select/Select.js").SelectOption<T>, itemProps: import("../Select/Select.js").ItemRendererProps) => JSX.Element) | undefined;
-    menuClassName?: string | undefined;
-    menuStyle?: React.CSSProperties | undefined;
-    popoverProps?: Pick<{
-        placement?: import("@floating-ui/utils").Placement | undefined;
-        /**
-         * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-         *
-         * Custom svg icon. Will override status icon if specified.
-         */
-        visible?: boolean | undefined;
-        onVisibleChange?: ((visible: boolean) => void) | undefined;
-        closeOnOutsideClick?: boolean | undefined;
-        middleware?: {
-            offset?: number | undefined;
-            flip?: boolean | undefined;
-            shift?: boolean | undefined;
-            autoPlacement?: boolean | undefined;
-            hide?: boolean | undefined;
-            inline?: boolean | undefined;
-        } | undefined;
-    } & {
-        autoUpdateOptions?: {
-            ancestorScroll?: boolean | undefined;
-            ancestorResize?: boolean | undefined;
-            elementResize?: boolean | undefined;
-            animationFrame?: boolean | undefined;
-            layoutShift?: boolean | undefined;
-        } | undefined;
-        interactions?: {
-            click?: boolean | import("@floating-ui/react").UseClickProps | undefined;
-            dismiss?: boolean | import("@floating-ui/react").UseDismissProps | undefined;
-            hover?: boolean | import("@floating-ui/react").UseHoverProps<import("@floating-ui/react").ReferenceType> | undefined;
-            focus?: boolean | import("@floating-ui/react").UseFocusProps | undefined;
-            listNavigation?: import("@floating-ui/react").UseListNavigationProps | undefined;
-        } | undefined;
-        role?: "dialog" | "menu" | "listbox" | undefined;
-        matchWidth?: boolean | undefined;
-    } & Omit<import("@floating-ui/react").UseFloatingOptions<import("@floating-ui/react").ReferenceType>, "placement" | "middleware">, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
-    triggerProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }) | undefined;
-} & {
-    multiple?: false | undefined;
-    selectedItemRenderer?: ((option: import("../Select/Select.js").SelectOption<T>) => JSX.Element) | undefined;
-    value?: T | null | undefined;
-    onChange?: ((value: T) => void) | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "onChange" | "placeholder" | "size"> & {
-    styleType?: undefined;
-} & {
-    /**
-     * LabeledSelect does not support `styleType`.
-     */
-    styleType?: undefined;
-} & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
-}) | ({
-    /**
-     * Label of the select.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the select. Does not apply to 'inline' select.
-     *
-     * @example
-     * <caption>strings</caption>
-     * <LabeledSelect message='Positive Message' … />
-     *
-     * @example
-     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
-     * <LabeledSelect
-     *   status="positive"
-     *   message={
-     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
-     *       Help message
-     *     </StatusMessage>
-     *   }
-     *   …
-     * />
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the select.
-     * @default ''
-     */
-    status?: "positive" | "negative" | "warning" | undefined;
-    /**
-     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-     *
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element | undefined;
-    /**
-     * If true, shows a red asterisk.
-     *
-     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
-     *
-     * @default false
-     */
-    required?: boolean | undefined;
-    /**
-     * Pass props to wrapper element.
-     */
-    wrapperProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "as" | "labelPlacement"> & {
-        labelPlacement?: "default" | "inline" | undefined;
-    } & {
-        as?: "div" | undefined;
-    }) | undefined;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
-    /**
-     * Passes properties for message content.
-     */
-    messageContentProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }) | undefined;
-    /**
-     * Passes properties for message icon.
-     */
-    messageIconProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
-        padded?: boolean | undefined;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        as?: "span" | undefined;
-    }) | undefined;
-} & Pick<LabeledInputProps, "displayStyle"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue" | "placeholder" | "value"> & {
-    native?: false | undefined;
-} & {
-    disabled?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-    status?: "positive" | "negative" | "warning" | undefined;
-} & {
-    placeholder?: React.ReactNode;
-    options: import("../Select/Select.js").SelectOption<T>[];
-    itemRenderer?: ((option: import("../Select/Select.js").SelectOption<T>, itemProps: import("../Select/Select.js").ItemRendererProps) => JSX.Element) | undefined;
-    menuClassName?: string | undefined;
-    menuStyle?: React.CSSProperties | undefined;
-    popoverProps?: Pick<{
-        placement?: import("@floating-ui/utils").Placement | undefined;
-        /**
-         * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-         *
-         * Custom svg icon. Will override status icon if specified.
-         */
-        visible?: boolean | undefined;
-        onVisibleChange?: ((visible: boolean) => void) | undefined;
-        closeOnOutsideClick?: boolean | undefined;
-        middleware?: {
-            offset?: number | undefined;
-            flip?: boolean | undefined;
-            shift?: boolean | undefined;
-            autoPlacement?: boolean | undefined;
-            hide?: boolean | undefined;
-            inline?: boolean | undefined;
-        } | undefined;
-    } & {
-        autoUpdateOptions?: {
-            ancestorScroll?: boolean | undefined;
-            ancestorResize?: boolean | undefined;
-            elementResize?: boolean | undefined;
-            animationFrame?: boolean | undefined;
-            layoutShift?: boolean | undefined;
-        } | undefined;
-        interactions?: {
-            click?: boolean | import("@floating-ui/react").UseClickProps | undefined;
-            dismiss?: boolean | import("@floating-ui/react").UseDismissProps | undefined;
-            hover?: boolean | import("@floating-ui/react").UseHoverProps<import("@floating-ui/react").ReferenceType> | undefined;
-            focus?: boolean | import("@floating-ui/react").UseFocusProps | undefined;
-            listNavigation?: import("@floating-ui/react").UseListNavigationProps | undefined;
-        } | undefined;
-        role?: "dialog" | "menu" | "listbox" | undefined;
-        matchWidth?: boolean | undefined;
-    } & Omit<import("@floating-ui/react").UseFloatingOptions<import("@floating-ui/react").ReferenceType>, "placement" | "middleware">, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
-    triggerProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }) | undefined;
-} & {
-    multiple: true;
-    selectedItemRenderer?: ((options: import("../Select/Select.js").SelectOption<T>[]) => JSX.Element) | undefined;
-    value?: T[] | undefined;
-    onChange?: ((value: T, event: import("../Select/Select.js").SelectValueChangeEvent) => void) | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "onChange" | "placeholder" | "size"> & {
-    styleType?: undefined;
-} & {
-    /**
-     * LabeledSelect does not support `styleType`.
-     */
-    styleType?: undefined;
-} & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
-})) => JSX.Element;
+export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+}) => JSX.Element;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -1,50 +1,59 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Select } from '../Select/Select.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
-import { Icon } from '../Icon/Icon.js';
-/**
- * Labeled select component to select value from options.
- * @example
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Help Message'
- * />
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Positive Message'
- *   status='positive'
- * />
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Custom Message'
- *   svgIcon={<SvgCamera />}
- * />
- */
 export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
-    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, ...labelProps }, label)),
-        React.createElement(Select, { disabled: disabled, className: className, style: style, required: props.native ? required : undefined, ...rest, ref: forwardedRef, ...{ styleType: 'default' } }),
-        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, startIcon: svgIcon, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
+  const {
+    className,
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    displayStyle = 'default',
+    style,
+    required = false,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    messageIconProps,
+    ...rest
+  } = props;
+  return _jsxs(InputGrid, {
+    labelPlacement: displayStyle,
+    'data-iui-status': status,
+    ...wrapperProps,
+    children: [
+      label &&
+        _jsx(Label, {
+          as: 'div',
+          required: required,
+          disabled: disabled,
+          ...labelProps,
+          children: label,
+        }),
+      _jsx(Select, {
+        disabled: disabled,
+        className: className,
+        style: style,
+        required: props.native ? required : undefined,
+        ...rest,
+        ref: forwardedRef,
+        ...{
+          styleType: 'default',
+        },
+      }),
+      typeof message === 'string'
+        ? _jsx(StatusMessage, {
+            status: status,
+            startIcon: svgIcon,
+            iconProps: messageIconProps,
+            contentProps: messageContentProps,
+            children: message,
+          })
+        : message,
+    ],
+  });
 });