@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/Header/Header.js

@@ -0,0 +1,38 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { IconButton } from '../Buttons/IconButton.js';
+import { SvgMoreVertical, Box } from '../../utils/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+let defaultTranslations = {
+    moreOptions: 'More options'
+};
+export const Header = React.forwardRef((props, forwardedRef)=>{
+    let { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
+    let headerTranslations = {
+        ...defaultTranslations,
+        ...translatedStrings
+    };
+    return React.createElement(Box, {
+        as: "header",
+        className: cx('iui-page-header', className),
+        "data-iui-size": isSlim ? 'slim' : void 0,
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        className: "iui-page-header-left"
+    }, appLogo, breadcrumbs && React.createElement(Box, {
+        className: "iui-page-header-divider"
+    }), breadcrumbs), children && React.createElement(Box, {
+        className: "iui-page-header-center"
+    }, children), React.createElement(Box, {
+        className: "iui-page-header-right"
+    }, actions, menuItems && React.createElement(DropdownMenu, {
+        menuItems: menuItems
+    }, React.createElement(IconButton, {
+        styleType: "borderless",
+        "aria-label": headerTranslations.moreOptions
+    }, React.createElement(SvgMoreVertical, {
+        "aria-hidden": true
+    })))));
+});
+Header.displayName = 'Header';

package/DEV-esm/core/Header/HeaderBasicButton.js

@@ -0,0 +1,11 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { ButtonBase } from '../../utils/index.js';
+export const HeaderBasicButton = React.forwardRef((props, ref)=>{
+    let { className, children, startIcon, endIcon, styleType, size, ...rest } = props;
+    return React.createElement(ButtonBase, {
+        className: cx('iui-header-breadcrumb-button', className),
+        ref: ref,
+        ...rest
+    }, startIcon, children, endIcon);
+});

package/DEV-esm/core/Header/HeaderBreadcrumbs.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { SvgChevronRight, Box } from '../../utils/index.js';
+export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef)=>{
+    let { className, items, ...rest } = props;
+    return React.createElement(Box, {
+        as: "nav",
+        "aria-label": "breadcrumbs",
+        className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        as: "ol",
+        className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list')
+    }, items.reduce((previous, current, index)=>[
+            ...previous,
+            current,
+            index !== items.length - 1 && React.createElement(Box, {
+                as: "li",
+                className: "iui-breadcrumbs-separator",
+                key: index
+            }, React.createElement(SvgChevronRight, {
+                key: `chevron${index}`,
+                "aria-hidden": true,
+                className: "iui-chevron"
+            }))
+        ], [])));
+});
+HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs';

package/DEV-esm/core/Header/HeaderButton.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import { HeaderSplitButton } from './HeaderSplitButton.js';
+import { HeaderDropdownButton } from './HeaderDropdownButton.js';
+import { HeaderBasicButton } from './HeaderBasicButton.js';
+export const HeaderButton = React.forwardRef((props, ref)=>{
+    let { name, description, htmlName, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
+    let buttonProps = {
+        startIcon: startIcon ? React.createElement(Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-icon",
+            "aria-hidden": true
+        }, startIcon) : null,
+        children: React.createElement(Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-text"
+        }, React.createElement(Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-text-label"
+        }, name), description && React.createElement(Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-text-sublabel"
+        }, description)),
+        ref: ref,
+        disabled: disabled,
+        name: htmlName,
+        ...!!menuItems && {
+            menuItems
+        },
+        ...rest
+    };
+    let headerButton = props.menuItems && props.onClick ? React.createElement(HeaderSplitButton, buttonProps) : props.menuItems ? React.createElement(HeaderDropdownButton, buttonProps) : React.createElement(HeaderBasicButton, buttonProps);
+    return React.createElement(Box, {
+        as: "li",
+        className: "iui-header-breadcrumb-item",
+        "aria-current": isActive ? 'location' : void 0,
+        "aria-disabled": disabled ? 'true' : void 0
+    }, headerButton);
+});
+HeaderButton.displayName = 'HeaderButton';

package/DEV-esm/core/Header/HeaderDropdownButton.js

@@ -0,0 +1,36 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { useMergedRefs, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
+import { HeaderBasicButton } from './HeaderBasicButton.js';
+export const HeaderDropdownButton = React.forwardRef((props, ref)=>{
+    let { menuItems, className, children, ...rest } = props;
+    let [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    let [menuWidth, setMenuWidth] = React.useState(0);
+    let buttonRef = React.useRef(null);
+    let refs = useMergedRefs(ref, buttonRef);
+    React.useEffect(()=>{
+        if (buttonRef.current) setMenuWidth(buttonRef.current.offsetWidth);
+    }, [
+        children
+    ]);
+    return React.createElement(DropdownMenu, {
+        menuItems: menuItems,
+        style: {
+            minInlineSize: menuWidth
+        },
+        onVisibleChange: (open)=>setIsMenuOpen(open)
+    }, React.createElement(HeaderBasicButton, {
+        className: cx('iui-header-breadcrumb-button', className),
+        ref: refs,
+        "aria-label": "Dropdown",
+        endIcon: isMenuOpen ? React.createElement(SvgCaretUpSmall, {
+            className: "iui-header-breadcrumb-button-dropdown-icon",
+            "aria-hidden": true
+        }) : React.createElement(SvgCaretDownSmall, {
+            className: "iui-header-breadcrumb-button-dropdown-icon",
+            "aria-hidden": true
+        }),
+        ...rest
+    }, children));
+});

package/DEV-esm/core/Header/HeaderLogo.js

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+export const HeaderLogo = React.forwardRef((props, ref)=>{
+    let { className, children, logo, onClick, as = onClick ? 'button' : 'div', ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-header-brand', className),
+        as: as,
+        type: 'button' === as ? 'button' : void 0,
+        onClick: onClick,
+        ref: ref,
+        ...rest
+    }, logo ? React.createElement(Box, {
+        as: "span",
+        className: "iui-header-brand-icon",
+        "aria-hidden": true
+    }, logo) : null, children && React.createElement(Box, {
+        as: "span",
+        className: "iui-header-brand-label"
+    }, children));
+});
+HeaderLogo.displayName = 'HeaderLogo';

package/DEV-esm/core/Header/HeaderSplitButton.js

@@ -0,0 +1,41 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall, Box, ButtonBase } from '../../utils/index.js';
+import { HeaderBasicButton } from './HeaderBasicButton.js';
+export const HeaderSplitButton = React.forwardRef((props, forwardedRef)=>{
+    let { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
+    let [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    let [menuWidth, setMenuWidth] = React.useState(0);
+    let ref = React.useRef(null);
+    React.useEffect(()=>{
+        if (ref.current) setMenuWidth(ref.current.offsetWidth);
+    }, [
+        children
+    ]);
+    return React.createElement(Box, {
+        className: cx('iui-header-breadcrumb-button-wrapper', className),
+        ref: ref
+    }, React.createElement(HeaderBasicButton, {
+        ref: forwardedRef,
+        disabled: disabled,
+        ...rest
+    }, children), React.createElement(DropdownMenu, {
+        placement: menuPlacement,
+        menuItems: menuItems,
+        style: {
+            minInlineSize: menuWidth
+        },
+        onVisibleChange: (open)=>setIsMenuOpen(open)
+    }, React.createElement(ButtonBase, {
+        "aria-label": "More",
+        className: "iui-header-breadcrumb-button iui-header-breadcrumb-button-split",
+        disabled: disabled
+    }, isMenuOpen ? React.createElement(SvgCaretUpSmall, {
+        className: "iui-header-breadcrumb-button-dropdown-icon",
+        "aria-hidden": true
+    }) : React.createElement(SvgCaretDownSmall, {
+        className: "iui-header-breadcrumb-button-dropdown-icon",
+        "aria-hidden": true
+    }))));
+});

package/DEV-esm/core/Icon/Icon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/components/Box.js';
+let getSizeValue = (size)=>{
+    switch(size){
+        case 'small':
+            return 's';
+        case 'medium':
+            return 'm';
+        case 'large':
+            return 'l';
+        default:
+            return size;
+    }
+};
+export const Icon = React.forwardRef((props, ref)=>{
+    let { size = 'medium', fill = 'default', className, padded = false, ...rest } = props;
+    return React.createElement(Box, {
+        as: "span",
+        className: cx('iui-svg-icon', className),
+        "data-iui-icon-size": getSizeValue(size),
+        "data-iui-icon-color": fill,
+        "data-iui-padded": padded ? 'true' : void 0,
+        ref: ref,
+        ...rest
+    });
+});
+Icon.displayName = 'Icon';

package/DEV-esm/core/InformationPanel/InformationPanel.js

@@ -0,0 +1,56 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { useMergedRefs, Box } from '../../utils/index.js';
+export const InformationPanel = React.forwardRef((props, forwardedRef)=>{
+    let { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
+    let [infoPanelSize, setInfoPanelSize] = React.useState({
+        width: void 0,
+        height: void 0
+    });
+    let infoPanelRef = React.useRef(null);
+    let refs = useMergedRefs(forwardedRef, infoPanelRef);
+    let startResize = (e)=>{
+        if (!infoPanelRef.current) return;
+        if (void 0 != e.button && 0 !== e.button) return;
+        e.preventDefault();
+        e.stopPropagation();
+        infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
+        infoPanelRef.current.ownerDocument.addEventListener('pointerup', ()=>infoPanelRef.current?.ownerDocument.removeEventListener('pointermove', onResize), {
+            once: true
+        });
+    };
+    let onResize = React.useCallback((e)=>{
+        e.preventDefault();
+        if (!infoPanelRef.current) return;
+        let { right, bottom } = infoPanelRef.current.getBoundingClientRect();
+        'vertical' === orientation ? setInfoPanelSize({
+            width: right - e.clientX,
+            height: void 0
+        }) : setInfoPanelSize({
+            height: bottom - e.clientY,
+            width: void 0
+        });
+    }, [
+        orientation
+    ]);
+    return React.createElement(Box, {
+        className: cx('iui-information-panel', {
+            'iui-right': 'vertical' === orientation,
+            'iui-bottom': 'horizontal' === orientation,
+            'iui-visible': isOpen
+        }, className),
+        ref: refs,
+        ...rest,
+        style: {
+            width: 'vertical' === orientation ? infoPanelSize.width : void 0,
+            height: 'horizontal' === orientation ? infoPanelSize.height : void 0,
+            ...props.style
+        }
+    }, resizable && React.createElement(Box, {
+        className: "iui-resizer",
+        onPointerDown: startResize
+    }, React.createElement(Box, {
+        className: "iui-resizer-bar"
+    })), children);
+});
+InformationPanel.displayName = 'InformationPanel';

package/DEV-esm/core/InformationPanel/InformationPanelBody.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const InformationPanelBody = polymorphic.div('iui-information-body');
+InformationPanelBody.displayName = 'InformationPanel.Body';

package/DEV-esm/core/InformationPanel/InformationPanelContent.js

@@ -0,0 +1,14 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+export const InformationPanelContent = React.forwardRef((props, forwardedRef)=>{
+    let { className, displayStyle = 'default', children, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-information-body-content', {
+            'iui-inline': 'inline' === displayStyle
+        }, className),
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+InformationPanelContent.displayName = 'InformationPanelContent';

package/DEV-esm/core/InformationPanel/InformationPanelHeader.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IconButton } from '../Buttons/IconButton.js';
+import { SvgCloseSmall, Box } from '../../utils/index.js';
+export const InformationPanelHeader = React.forwardRef((props, forwardedRef)=>{
+    let { children, onClose, actions, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-information-header', className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        as: "span",
+        className: "iui-information-header-label"
+    }, children), React.createElement(Box, {
+        className: "iui-information-header-actions"
+    }, actions, onClose && React.createElement(IconButton, {
+        styleType: "borderless",
+        onClick: onClose,
+        "aria-label": "Close"
+    }, React.createElement(SvgCloseSmall, {
+        "aria-hidden": true
+    }))));
+});
+InformationPanelHeader.displayName = 'InformationPanelHeader';

package/DEV-esm/core/InformationPanel/InformationPanelWrapper.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const InformationPanelWrapper = polymorphic.div('iui-information-panel-wrapper');
+InformationPanelWrapper.displayName = 'InformationPanelWrapper';

package/DEV-esm/core/Input/Input.js

@@ -0,0 +1,18 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { useMergedRefs, Box } from '../../utils/index.js';
+export const Input = React.forwardRef((props, ref)=>{
+    let { size, htmlSize, status, className, ...rest } = props;
+    let inputRef = React.useRef(null);
+    let refs = useMergedRefs(inputRef, ref);
+    return React.createElement(Box, {
+        as: "input",
+        className: cx('iui-input', 'iui-field', className),
+        "data-iui-size": size,
+        "data-iui-status": status,
+        size: htmlSize,
+        ref: refs,
+        ...rest
+    });
+});
+Input.displayName = 'Input';

package/DEV-esm/core/InputGrid/InputGrid.js

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Box, InputWithIcon, cloneElementWithRef, useId } from '../../utils/index.js';
+import cx from 'classnames';
+import { Label } from '../Label/Label.js';
+import { Input } from '../Input/Input.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
+import { ComboBox } from '../ComboBox/ComboBox.js';
+import { Select } from '../Select/Select.js';
+export const InputGrid = React.forwardRef((props, ref)=>{
+    let { children: childrenProp, className, labelPlacement, ...rest } = props;
+    let children = useChildrenWithIds(childrenProp);
+    return React.createElement(Box, {
+        className: cx('iui-input-grid', className),
+        "data-iui-label-placement": labelPlacement,
+        ref: ref,
+        ...rest
+    }, children);
+});
+InputGrid.displayName = 'InputGrid';
+let useChildrenWithIds = (children)=>{
+    let { labelId, inputId, messageId } = useSetup(children);
+    return React.useMemo(()=>React.Children.map(children, (child)=>{
+            if (!React.isValidElement(child)) return child;
+            if (child.type === Label || 'label' === child.type) return cloneElementWithRef(child, (child)=>({
+                    ...child.props,
+                    htmlFor: child.props.htmlFor || inputId,
+                    id: child.props.id || labelId
+                }));
+            if (child.type === StatusMessage) return cloneElementWithRef(child, (child)=>({
+                    ...child.props,
+                    id: child.props.id || messageId
+                }));
+            if (isInput(child) || child.type === InputWithDecorations || child.type === InputWithIcon) return handleCloningInputs(child, {
+                labelId,
+                inputId,
+                messageId
+            });
+            return child;
+        }), [
+        children,
+        inputId,
+        labelId,
+        messageId
+    ]);
+};
+let useSetup = (children)=>{
+    let idPrefix = useId();
+    let labelId;
+    let inputId;
+    let messageId;
+    let hasLabel = false;
+    let hasSelect = false;
+    let findInputId = (child)=>{
+        if (!React.isValidElement(child)) return;
+        if (child.type === ComboBox) return child.props.inputProps?.id || `${idPrefix}--input`;
+        if (child.type !== Select) return child.props.id || `${idPrefix}--input`;
+    };
+    React.Children.forEach(children, (child)=>{
+        if (!React.isValidElement(child)) return;
+        if (child.type === Label || 'label' === child.type) {
+            hasLabel = true;
+            labelId || (labelId = child.props.id || `${idPrefix}--label`);
+        }
+        if (child.type === StatusMessage) messageId || (messageId = child.props.id || `${idPrefix}--message`);
+        if (child.type === InputWithDecorations || child.type === InputWithIcon) React.Children.forEach(child.props.children, (child)=>{
+            if (isInput(child)) inputId || (inputId = findInputId(child));
+        });
+        else if (isInput(child)) inputId || (inputId = findInputId(child));
+        if (child.type === Select) hasSelect = true;
+    });
+    return {
+        labelId: hasSelect ? labelId : void 0,
+        inputId: hasLabel && !hasSelect ? inputId : void 0,
+        messageId
+    };
+};
+let handleCloningInputs = (child, { labelId, inputId, messageId })=>{
+    let inputProps = (props = {})=>{
+        let ariaDescribedBy = [
+            props['aria-describedby'],
+            messageId
+        ].filter(Boolean).join(' ');
+        return {
+            ...props,
+            ...child.type !== Select && {
+                id: props.id || inputId
+            },
+            'aria-describedby': ariaDescribedBy?.trim() || void 0
+        };
+    };
+    let cloneInput = (child)=>{
+        if (child.type === ComboBox) return cloneElementWithRef(child, (child)=>({
+                inputProps: inputProps(child.props.inputProps)
+            }));
+        if (child.type === Select) return cloneElementWithRef(child, (child)=>({
+                triggerProps: {
+                    'aria-labelledby': labelId,
+                    ...inputProps(child.props.triggerProps)
+                }
+            }));
+        return cloneElementWithRef(child, (child)=>inputProps(child.props));
+    };
+    if (child.type === InputWithDecorations || child.type === InputWithIcon) return cloneElementWithRef(child, (child)=>({
+            children: React.Children.map(child.props.children, (child)=>{
+                if (React.isValidElement(child) && isInput(child)) return cloneInput(child);
+                return child;
+            })
+        }));
+    return cloneInput(child);
+};
+let isInput = (child)=>React.isValidElement(child) && ('input' === child.type || 'textarea' === child.type || 'select' === child.type || child.type === Input || child.type === Textarea || child.type === InputWithDecorations.Input || child.type === Select || child.type === ComboBox);

package/DEV-esm/core/InputGroup/InputGroup.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Label } from '../Label/Label.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+export const InputGroup = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, disabled = false, displayStyle = 'default', label, status, required = false, labelProps, innerProps, message, svgIcon, messageProps, ...rest } = props;
+    return React.createElement(InputGrid, {
+        ref: forwardedRef,
+        as: "div",
+        labelPlacement: displayStyle,
+        className: cx('iui-input-group-wrapper', className),
+        "data-iui-status": status,
+        ...rest
+    }, label && React.createElement(Label, {
+        as: "label",
+        required: required,
+        disabled: disabled,
+        ...labelProps
+    }, label), React.createElement(Box, {
+        as: "div",
+        ...innerProps,
+        className: cx('iui-input-group', innerProps?.className)
+    }, children), React.createElement(BottomMessage, {
+        message: message,
+        status: status,
+        svgIcon: svgIcon,
+        displayStyle: displayStyle,
+        messageProps: messageProps
+    }));
+});
+InputGroup.displayName = 'InputGroup';
+let BottomMessage = (props)=>{
+    let { message, status, svgIcon, displayStyle, messageProps } = props;
+    if (message && 'string' != typeof message) return message;
+    if (message || status || svgIcon) return React.createElement(StatusMessage, {
+        iconProps: {
+            'aria-hidden': true
+        },
+        startIcon: svgIcon,
+        status: status,
+        ...messageProps
+    }, 'inline' !== displayStyle && message);
+    return null;
+};

package/DEV-esm/core/InputWithDecorations/InputWithDecorations.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Box, InputFlexContainer, InputFlexContainerButton, InputFlexContainerIcon, useSafeContext } from '../../utils/index.js';
+let InputWithDecorationsContext = React.createContext(void 0);
+InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
+let InputWithDecorationsComponent = React.forwardRef((props, ref)=>{
+    let { children, size, isDisabled, ...rest } = props;
+    return React.createElement(InputWithDecorationsContext.Provider, {
+        value: {
+            size,
+            isDisabled
+        }
+    }, React.createElement(InputFlexContainer, {
+        isDisabled: isDisabled,
+        size: size,
+        ref: ref,
+        ...rest
+    }, children));
+});
+InputWithDecorationsComponent.displayName = 'InputWithDecorations';
+let InputWithDecorationsInput = React.forwardRef((props, ref)=>{
+    let { id: idProp, size, disabled: localDisabled, ...rest } = props;
+    let { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
+    return React.createElement(Box, {
+        as: "input",
+        ref: ref,
+        "data-iui-size": size ?? contextSize,
+        disabled: localDisabled ?? isDisabled,
+        id: idProp,
+        ...rest
+    });
+});
+InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+let InputWithDecorationsButton = React.forwardRef((props, ref)=>{
+    let { children, size, disabled: localDisabled, ...rest } = props;
+    let { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
+    return React.createElement(InputFlexContainerButton, {
+        ref: ref,
+        size: size ?? contextSize,
+        disabled: localDisabled ?? isDisabled,
+        ...rest
+    }, children);
+});
+InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+let InputWithDecorationsIcon = InputFlexContainerIcon;
+InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+export const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
+    Input: InputWithDecorationsInput,
+    Button: InputWithDecorationsButton,
+    Icon: InputWithDecorationsIcon
+});

package/DEV-esm/core/Label/Label.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+export const Label = React.forwardRef((props, forwardedRef)=>{
+    let { displayStyle = 'block', required, disabled, className, children, ...rest } = props;
+    return React.createElement(Box, {
+        as: "label",
+        className: cx('iui-input-label', {
+            'iui-inline': 'inline' === displayStyle,
+            'iui-required': required
+        }, className),
+        "data-iui-disabled": !!disabled || void 0,
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+Label.displayName = 'Label';

package/DEV-esm/core/LabeledInput/LabeledInput.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Input } from '../Input/Input.js';
+import { InputWithIcon, StatusIconMap } from '../../utils/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/Icon.js';
+import cx from 'classnames';
+export const LabeledInput = React.forwardRef((props, ref)=>{
+    let { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, ...rest } = props;
+    let icon = svgIcon ?? (status && StatusIconMap[status]());
+    let shouldShowIcon = null !== svgIcon && (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)), 'string' == typeof message ? React.createElement(StatusMessage, {
+        status: status,
+        iconProps: iconProps,
+        contentProps: messageContentProps
+    }, message) : message);
+});
+LabeledInput.displayName = 'LabeledInput';