@itwin/itwinui-react 3.12.1 → 3.13.0

package/DEV-esm/core/Dialog/DialogTitleBar.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { SvgClose, mergeEventHandlers, Box } from '../../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { useDialogContext } from './DialogContext.js';
+import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
+import { useDialogDragContext } from './DialogDragContext.js';
+export const DialogTitleBar = Object.assign(React.forwardRef((props, ref)=>{
+    let dialogContext = useDialogContext();
+    let { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
+    let { onPointerDown } = useDialogDragContext();
+    return React.createElement(Box, {
+        className: cx('iui-dialog-title-bar', className, {
+            'iui-dialog-title-bar-filled': isDraggable
+        }),
+        ref: ref,
+        onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown),
+        ...rest
+    }, children ? children : React.createElement(React.Fragment, null, React.createElement(DialogTitleBarTitle, null, titleText), isDismissible && React.createElement(IconButton, {
+        size: "small",
+        styleType: "borderless",
+        onClick: onClose,
+        "aria-label": "Close",
+        "data-iui-shift": "right"
+    }, React.createElement(SvgClose, null))));
+}), {
+    Title: DialogTitleBarTitle
+});
+DialogTitleBar.displayName = 'Dialog.TitleBar';

package/DEV-esm/core/Dialog/DialogTitleBarTitle.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');
+DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/components/Box.js';
+export const Divider = React.forwardRef((props, ref)=>{
+    let { className, orientation = 'horizontal', ...rest } = props;
+    return React.createElement(Box, {
+        as: "hr",
+        className: cx('iui-divider', className),
+        "aria-orientation": 'vertical' === orientation ? 'vertical' : void 0,
+        ref: ref,
+        ...rest
+    });
+});
+Divider.displayName = 'Divider';

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { mergeEventHandlers, useControlledState } from '../../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { FloatingTree } from '@floating-ui/react';
+export const DropdownMenu = React.forwardRef((props, forwardedRef)=>React.createElement(FloatingTree, null, React.createElement(DropdownMenuContent, {
+        ref: forwardedRef,
+        ...props
+    })));
+DropdownMenu.displayName = 'DropdownMenu';
+let DropdownMenuContent = React.forwardRef((props, forwardedRef)=>{
+    let { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
+    let [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChange);
+    let menuContent = React.useMemo(()=>{
+        if ('function' == typeof menuItems) return menuItems(()=>setVisible(false));
+        return menuItems;
+    }, [
+        menuItems,
+        setVisible
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(Menu, {
+        trigger: children,
+        onKeyDown: mergeEventHandlers(props.onKeyDown, (e)=>{
+            if (e.defaultPrevented) return;
+            if ('Tab' === e.key) setVisible(false);
+        }),
+        role: role,
+        ref: forwardedRef,
+        portal: portal,
+        popoverProps: {
+            placement,
+            matchWidth,
+            visible,
+            onVisibleChange: setVisible
+        },
+        ...rest
+    }, menuContent));
+});

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

@@ -0,0 +1,139 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { StatusIconMap, SvgChevronRight, Box, useSafeContext, polymorphic, mergeEventHandlers, ButtonBase, useId } from '../../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
+import { LinkBox } from '../LinkAction/LinkAction.js';
+let ExpandableBlockContext = React.createContext(void 0);
+ExpandableBlockContext.displayName = 'ExpandableBlockContext';
+let ExpandableBlockComponent = React.forwardRef((props, forwardedRef)=>{
+    let { children, title, caption, endIcon, ...rest } = props;
+    return React.createElement(ExpandableBlock.Wrapper, {
+        ...rest,
+        ref: forwardedRef
+    }, React.createElement(ExpandableBlock.Trigger, {
+        label: title,
+        caption: caption,
+        endIcon: endIcon
+    }), React.createElement(ExpandableBlock.Content, null, children));
+});
+ExpandableBlockComponent.displayName = 'ExpandableBlock';
+let ExpandableBlockWrapper = React.forwardRef((props, forwardedRef)=>{
+    let { children, className, onToggle, style, isExpanded, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
+    let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+    let expanded = isExpanded ?? expandedState;
+    let [descriptionId, setDescriptionId] = React.useState(void 0);
+    return React.createElement(ExpandableBlockContext.Provider, {
+        value: {
+            status,
+            isExpanded: expanded,
+            onToggle,
+            size,
+            styleType,
+            disabled,
+            setExpanded,
+            children,
+            descriptionId,
+            setDescriptionId
+        }
+    }, React.createElement(Box, {
+        className: cx('iui-expandable-block', className),
+        "data-iui-expanded": expanded,
+        "data-iui-size": size,
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        style: style,
+        ref: forwardedRef,
+        ...rest
+    }, children));
+});
+ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
+let ExpandableBlockTrigger = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, label, caption, expandIcon, endIcon, ...rest } = props;
+    let { disabled, status } = useSafeContext(ExpandableBlockContext);
+    return React.createElement(LinkBox, {
+        className: cx('iui-expandable-header', className),
+        "data-iui-disabled": disabled ? 'true' : void 0,
+        ref: forwardedRef,
+        ...rest
+    }, children ?? React.createElement(React.Fragment, null, expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null), React.createElement(ExpandableBlock.LabelArea, null, React.createElement(ExpandableBlock.Title, null, label), caption && React.createElement(ExpandableBlock.Caption, null, caption)), endIcon || status ? React.createElement(ExpandableBlock.EndIcon, null, endIcon) : null));
+});
+ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
+let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, ...rest } = props;
+    return React.createElement(Icon, {
+        className: cx('iui-expandable-block-icon', className),
+        ref: forwardedRef,
+        ...rest
+    }, children ?? React.createElement(SvgChevronRight, {
+        "aria-hidden": true
+    }));
+});
+ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
+let ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
+ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
+let ExpandableBlockTitle = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, onClick: onClickProp, ...rest } = props;
+    let { isExpanded, setExpanded, disabled, onToggle, descriptionId } = useSafeContext(ExpandableBlockContext);
+    return React.createElement(ButtonBase, {
+        className: cx('iui-expandable-block-title', 'iui-link-action', className),
+        "aria-expanded": isExpanded,
+        "aria-disabled": disabled,
+        onClick: mergeEventHandlers(onClickProp, ()=>{
+            if (disabled) return;
+            setExpanded(!isExpanded);
+            onToggle?.(!isExpanded);
+        }),
+        ref: forwardedRef,
+        "aria-describedby": descriptionId,
+        ...rest
+    }, children);
+});
+ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
+let ExpandableBlockCaption = React.forwardRef((props, forwardedRef)=>{
+    let fallbackId = useId();
+    let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
+    React.useEffect(()=>{
+        setDescriptionId(props.id || fallbackId);
+        return ()=>setDescriptionId(void 0);
+    }, [
+        props.id,
+        fallbackId,
+        setDescriptionId
+    ]);
+    return React.createElement(Box, {
+        ref: forwardedRef,
+        id: fallbackId,
+        ...props,
+        className: cx('iui-expandable-block-caption', props?.className)
+    });
+});
+ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
+let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef)=>{
+    let { children, ...rest } = props;
+    let { status } = useSafeContext(ExpandableBlockContext);
+    let icon = children ?? (status && StatusIconMap[status]());
+    return React.createElement(Icon, {
+        fill: status,
+        ref: forwardedRef,
+        ...rest
+    }, icon);
+});
+ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
+let ExpandableBlockContent = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, innerProps, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-expandable-content', className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, innerProps, children));
+});
+ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
+export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
+    Wrapper: ExpandableBlockWrapper,
+    Trigger: ExpandableBlockTrigger,
+    ExpandIcon: ExpandableBlockExpandIcon,
+    LabelArea: ExpandableBlockLabelArea,
+    Title: ExpandableBlockTitle,
+    Caption: ExpandableBlockCaption,
+    EndIcon: ExpandableBlockEndIcon,
+    Content: ExpandableBlockContent
+});

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { FieldsetBase } from '../../utils/index.js';
+import cx from 'classnames';
+export const Fieldset = React.forwardRef((props, ref)=>{
+    let { children, className, disabled, legend, ...rest } = props;
+    return React.createElement(FieldsetBase, {
+        className: cx('iui-fieldset', className),
+        disabled: disabled,
+        ref: ref,
+        ...rest
+    }, legend && React.createElement("legend", null, legend), disabled ? React.Children.map(children, (child)=>React.isValidElement(child) ? React.cloneElement(child, {
+            disabled: true
+        }) : child) : children);
+});
+Fieldset.displayName = 'Fieldset';

package/DEV-esm/core/FileUpload/FileEmptyCard.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Box, polymorphic, SvgUpload } from '../../utils/index.js';
+import cx from 'classnames';
+import { FileUploadCard } from './FileUploadCard.js';
+let FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
+    children: React.createElement(SvgUpload, null)
+});
+FileEmptyCardIcon.displayName = 'FileEmptyCard.Icon';
+let FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
+FileEmptyCardText.displayName = 'FileEmptyCard.Text';
+let FileEmptyCardComponent = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-file-card-empty', className),
+        ref: ref,
+        ...rest
+    }, children ?? React.createElement(React.Fragment, null, React.createElement(FileEmptyCard.Icon, null), React.createElement(FileEmptyCard.Text, null, React.createElement(FileUploadCard.InputLabel, null, "Choose a file"), React.createElement("div", null, "to upload."))));
+});
+FileEmptyCardComponent.displayName = 'FileEmptyCard';
+export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
+    Icon: FileEmptyCardIcon,
+    Text: FileEmptyCardText
+});

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, mergeEventHandlers } from '../../utils/index.js';
+export const FileUpload = React.forwardRef((props, forwardedRef)=>{
+    let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
+    let [isDragActive, setIsDragActive] = React.useState(false);
+    let onDragOverHandler = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    let onDragEnterHandler = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') setIsDragActive(true);
+    };
+    let onDragLeaveHandler = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragActive && !e.currentTarget?.contains(e.relatedTarget)) setIsDragActive(false);
+    };
+    let onDropHandler = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragActive) {
+            setIsDragActive(false);
+            onFileDropped(e.dataTransfer?.files, e);
+        }
+    };
+    return React.createElement(Box, {
+        ...rest,
+        className: cx('iui-file-upload', {
+            'iui-drag': isDragActive
+        }, props?.className),
+        ref: forwardedRef,
+        onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler),
+        onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler),
+        onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler),
+        onDrop: mergeEventHandlers(props.onDrop, onDropHandler)
+    }, dragContent ? children : React.createElement(Box, {
+        as: "div",
+        ...contentProps,
+        className: cx('iui-content', contentProps?.className)
+    }, children), dragContent && React.createElement(Box, {
+        as: "div",
+        ...contentProps,
+        className: cx('iui-content', contentProps?.className)
+    }, dragContent));
+});
+FileUpload.displayName = 'FileUpload';

package/DEV-esm/core/FileUpload/FileUploadCard.js

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, polymorphic, Box } from '../../utils/index.js';
+import cx from 'classnames';
+import { FileEmptyCard } from './FileEmptyCard.js';
+import { Anchor } from '../Typography/Anchor.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+let toBytes = (bytes)=>{
+    let units = [
+        ' bytes',
+        'KB',
+        'MB',
+        'GB',
+        'TB'
+    ];
+    let i = 0;
+    while(bytes >= 1024 && ++i)bytes /= 1024;
+    return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
+};
+let toDate = (dateNumber)=>{
+    let date = new Date(dateNumber);
+    return date.toDateString() + ' ' + date.toLocaleTimeString();
+};
+let FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
+    children: React.createElement(SvgDocument, null)
+});
+FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
+let FileUploadCardInfo = polymorphic.span('iui-file-card-text');
+FileUploadCardInfo.displayName = 'FileUploadCard.Info';
+let FileUploadCardTitle = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { files } = useSafeContext(FileUploadCardContext);
+    let title = files.length > 1 ? files.length + ' files selected' : files[0].name;
+    return React.createElement(Box, {
+        as: "span",
+        className: cx('iui-file-card-title', className),
+        ref: ref,
+        ...rest
+    }, children ?? title);
+});
+FileUploadCardTitle.displayName = 'FileUploadCard.Title';
+let FileUploadCardDescription = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { files } = useSafeContext(FileUploadCardContext);
+    let description = files.length > 1 ? files[0].name + ', ' + files[1].name : toBytes(files[0].size) + ' ' + toDate(files[0].lastModified);
+    if (files.length > 2) description += ', and ' + (files.length - 2) + ' others';
+    return React.createElement(Box, {
+        as: "span",
+        className: cx('iui-file-card-description', className),
+        ref: ref,
+        ...rest
+    }, children ?? description);
+});
+FileUploadCardDescription.displayName = 'FileUploadCard.Description';
+let FileUploadCardAction = polymorphic.div('iui-file-card-action');
+FileUploadCardAction.displayName = 'FileUploadCard.Action';
+let FileUploadCardInputLabel = React.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    let { inputId } = useSafeContext(FileUploadCardContext);
+    return React.createElement(Anchor, {
+        as: "label",
+        ref: ref,
+        htmlFor: inputId,
+        ...rest
+    }, children);
+});
+FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
+let FileUploadCardInput = React.forwardRef((props, ref)=>{
+    let { children, onChange, id, ...rest } = props;
+    let { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
+    let setNativeFilesRef = React.useCallback((node)=>{
+        if (!node || !getWindow()?.DataTransfer) return;
+        let dataTransfer = new DataTransfer();
+        dataTransfer.items.clear();
+        Array.from(files).forEach((file)=>dataTransfer.items.add(file));
+        node.files = dataTransfer.files;
+    }, [
+        files
+    ]);
+    let refs = useMergedRefs(ref, setNativeFilesRef);
+    React.useEffect(()=>{
+        if (id && id !== inputId) setInputId(id);
+    }, [
+        id,
+        inputId,
+        setInputId
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, {
+        as: "input",
+        type: "file",
+        unhideOnFocus: false,
+        onChange: mergeEventHandlers(onChange, (e)=>{
+            let _files = Array.from(e.currentTarget.files || []);
+            onFilesChange?.(_files);
+            setInternalFiles(_files);
+        }),
+        ref: refs,
+        id: id ?? inputId,
+        ...rest
+    }), children);
+});
+FileUploadCardInput.displayName = 'FileUploadCard.Input';
+let FileUploadCardComponent = React.forwardRef((props, ref)=>{
+    let { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
+    let [internalFiles, setInternalFiles] = React.useState();
+    let uid = useId();
+    let [inputId, setInputId] = React.useState(uid);
+    let files = filesProp ?? internalFiles ?? [];
+    return React.createElement(FileUploadCardContext.Provider, {
+        value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId
+        }
+    }, files?.length ? React.createElement(Box, {
+        className: cx('iui-file-card', className),
+        ref: ref,
+        ...rest
+    }, children ?? React.createElement(React.Fragment, null, React.createElement(FileUploadCard.Icon, null), React.createElement(FileUploadCard.Info, null, React.createElement(FileUploadCard.Title, null), React.createElement(FileUploadCard.Description, null)), React.createElement(FileUploadCard.Action, null, React.createElement(FileUploadCard.InputLabel, null, "Replace")))) : emptyCard, input ?? React.createElement(FileUploadCard.Input, null));
+});
+export const FileUploadCard = Object.assign(FileUploadCardComponent, {
+    Icon: FileUploadCardIcon,
+    Info: FileUploadCardInfo,
+    Title: FileUploadCardTitle,
+    Description: FileUploadCardDescription,
+    Action: FileUploadCardAction,
+    InputLabel: FileUploadCardInputLabel,
+    Input: FileUploadCardInput
+});
+FileUploadCard.displayName = 'FileUploadCard';
+export const FileUploadCardContext = React.createContext(void 0);
+FileUploadCardContext.displayName = 'FileUploadCardContext';

package/DEV-esm/core/FileUpload/FileUploadTemplate.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { SvgUpload, Box } from '../../utils/index.js';
+import { Anchor } from '../Typography/Anchor.js';
+export const FileUploadTemplate = React.forwardRef((props, ref)=>{
+    let { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-file-upload-template', className),
+        ref: ref,
+        ...rest
+    }, React.createElement(SvgUpload, {
+        className: "iui-template-icon",
+        "aria-hidden": true
+    }), React.createElement(Box, {
+        className: "iui-template-text"
+    }, React.createElement(Anchor, {
+        as: "label"
+    }, React.createElement(Box, {
+        as: "input",
+        className: "iui-browse-input",
+        type: "file",
+        onChange: onChange,
+        multiple: acceptMultiple,
+        accept: acceptType
+    }), label), React.createElement("div", null, subtitle), children));
+});
+FileUploadTemplate.displayName = 'FileUploadTemplate';

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/components/Box.js';
+let sizeTokens = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl'
+];
+let getValueForToken = (token)=>{
+    if (sizeTokens.includes(token)) return `var(--iui-size-${token})`;
+    return token;
+};
+let FlexComponent = React.forwardRef((props, ref)=>{
+    let { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-flex', className),
+        style: {
+            '--iui-flex-display': display,
+            '--iui-flex-direction': flexDirection,
+            '--iui-flex-justify': justifyContent,
+            '--iui-flex-align': alignItems,
+            '--iui-flex-gap': getValueForToken(gap),
+            '--iui-flex-wrap': flexWrap,
+            ...style
+        },
+        ref: ref,
+        ...rest
+    });
+});
+FlexComponent.displayName = 'Flex';
+let FlexSpacer = React.forwardRef((props, ref)=>{
+    let { flex, className, style, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-flex-spacer', className),
+        style: {
+            '--iui-flex-spacer-flex': flex,
+            ...style
+        },
+        ref: ref,
+        ...rest
+    });
+});
+FlexSpacer.displayName = 'Flex.Spacer';
+let FlexItem = React.forwardRef((props, ref)=>{
+    let { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
+    let _style = {
+        '--iui-flex-item-flex': flex,
+        '--iui-flex-item-align': alignSelf,
+        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+        ...void 0 !== gapBefore && {
+            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)'
+        },
+        ...void 0 !== gapAfter && {
+            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)'
+        },
+        ...style
+    };
+    return React.createElement(Box, {
+        className: cx('iui-flex-item', className),
+        ref: ref,
+        style: _style,
+        ...rest
+    });
+});
+FlexItem.displayName = 'Flex.Item';
+export const Flex = Object.assign(FlexComponent, {
+    Item: FlexItem,
+    Spacer: FlexSpacer
+});

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+import { FooterItem } from './FooterItem.js';
+import { FooterSeparator } from './FooterSeparator.js';
+import { FooterList } from './FooterList.js';
+import { Anchor } from '../Typography/Anchor.js';
+let footerTranslations = {
+    cookies: 'Cookies',
+    legalNotices: 'Legal notices',
+    privacy: 'Privacy',
+    termsOfService: 'Terms of service',
+    termsOfUse: 'Terms of use'
+};
+export const defaultFooterElements = [
+    {
+        key: 'copyright',
+        title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`
+    },
+    {
+        key: 'termsOfService',
+        title: footerTranslations.termsOfService,
+        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect'
+    },
+    {
+        key: 'privacy',
+        title: footerTranslations.privacy,
+        url: 'https://www.bentley.com/en/privacy-policy'
+    },
+    {
+        key: 'termsOfUse',
+        title: footerTranslations.termsOfUse,
+        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement'
+    },
+    {
+        key: 'cookies',
+        title: footerTranslations.cookies,
+        url: 'https://www.bentley.com/en/cookie-policy'
+    },
+    {
+        key: 'legalNotices',
+        title: footerTranslations.legalNotices,
+        url: 'https://connect.bentley.com/Legal'
+    }
+];
+export const Footer = Object.assign((props)=>{
+    let { children, customElements, translatedTitles, className, ...rest } = props;
+    let titles = {
+        ...footerTranslations,
+        ...translatedTitles
+    };
+    let translatedElements = defaultFooterElements.map((element)=>{
+        if (element.key && titles.hasOwnProperty(element.key)) {
+            let key = element.key;
+            return {
+                ...element,
+                title: titles[key]
+            };
+        }
+        return element;
+    });
+    let elements = translatedElements;
+    if (customElements) elements = 'function' == typeof customElements ? customElements(translatedElements) : [
+        ...translatedElements,
+        ...customElements
+    ];
+    return React.createElement(Box, {
+        as: "footer",
+        className: cx('iui-legal-footer', className),
+        ...rest
+    }, children ? children : React.createElement(FooterList, null, elements.map((element, index)=>React.createElement(React.Fragment, {
+            key: element.key || `${element.title}-${index}`
+        }, index > 0 && React.createElement(FooterSeparator, null), React.createElement(FooterItem, null, element.url ? React.createElement(Anchor, {
+            href: element.url,
+            target: "_blank",
+            rel: "noreferrer"
+        }, element.title) : element.title)))));
+}, {
+    List: FooterList,
+    Item: FooterItem,
+    Separator: FooterSeparator
+});
+Footer.displayName = 'Footer';

package/DEV-esm/core/Footer/FooterItem.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const FooterItem = polymorphic.li('iui-legal-footer-item');
+FooterItem.displayName = 'Footer.Item';

package/DEV-esm/core/Footer/FooterList.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const FooterList = polymorphic.ul('iui-legal-footer-list');
+FooterList.displayName = 'Footer.List';

package/DEV-esm/core/Footer/FooterSeparator.js

@@ -0,0 +1,5 @@
+import { polymorphic } from '../../utils/index.js';
+export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
+    'aria-hidden': true
+});
+FooterSeparator.displayName = 'Footer.Separator';