@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,269 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { getBoundedValue, useEventListener, Box } from '../../utils/index.js';
+import { Track } from './Track.js';
+import { Thumb } from './Thumb.js';
+let getPercentageOfRectangle = (rect, pointerX, pointerY, orientation)=>{
+    if ('horizontal' === orientation) {
+        let position = getBoundedValue(pointerX, rect.left, rect.right);
+        return (position - rect.left) / rect.width;
+    }
+    let position = getBoundedValue(pointerY, rect.top, rect.bottom);
+    return (rect.bottom - position) / rect.height;
+};
+let getClosestValueIndex = (values, pointerValue)=>{
+    if (1 === values.length) return 0;
+    let distances = values.map((value)=>Math.abs(value - pointerValue));
+    let smallest = Math.min(...distances);
+    return distances.indexOf(smallest);
+};
+let getDefaultTrackDisplay = (trackDisplayMode, values)=>{
+    if ('auto' !== trackDisplayMode) return trackDisplayMode;
+    return values.length % 2 ? 'even-segments' : 'odd-segments';
+};
+let roundValueToClosestStep = (value, step, min)=>Math.round((value - min) / step) * step + min;
+let formatNumberValue = (value, step, numDecimals)=>{
+    if (Number.isInteger(step)) return value.toFixed(0);
+    return value.toFixed(numDecimals);
+};
+let focusThumb = (sliderContainer, activeIndex)=>{
+    let doc = sliderContainer.ownerDocument;
+    if (!sliderContainer.contains(doc.activeElement) || Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex) {
+        let thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
+        thumbToFocus && thumbToFocus.focus();
+    }
+};
+export const Slider = React.forwardRef((props, ref)=>{
+    let { min = 0, max = 100, values, step = 1, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, trackContainerProps, minProps, maxProps, trackProps, tickProps, ticksProps, orientation = 'horizontal', ...rest } = props;
+    let [currentValues, setCurrentValues] = React.useState(values);
+    React.useEffect(()=>{
+        setCurrentValues(values);
+    }, [
+        values
+    ]);
+    let [minValueLabel, setMinValueLabel] = React.useState(()=>minLabel ?? min.toString());
+    React.useEffect(()=>{
+        setMinValueLabel(minLabel ?? min.toString());
+    }, [
+        minLabel,
+        min
+    ]);
+    let [maxValueLabel, setMaxValueLabel] = React.useState(()=>maxLabel ?? max.toString());
+    React.useEffect(()=>{
+        setMaxValueLabel(maxLabel ?? max.toString());
+    }, [
+        maxLabel,
+        max
+    ]);
+    let [trackDisplay, setTrackDisplay] = React.useState(()=>getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    React.useEffect(()=>{
+        setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    }, [
+        trackDisplayMode,
+        currentValues
+    ]);
+    let containerRef = React.useRef(null);
+    let getNumDecimalPlaces = React.useMemo(()=>{
+        let stepString = step.toString();
+        let decimalIndex = stepString.indexOf('.');
+        return stepString.length - (decimalIndex + 1);
+    }, [
+        step
+    ]);
+    let getAllowableThumbRange = React.useCallback((index)=>{
+        if ('inhibit-crossing' === thumbMode) {
+            let minVal = 0 === index ? min : currentValues[index - 1] + step;
+            let maxVal = index < currentValues.length - 1 ? currentValues[index + 1] - step : max;
+            return [
+                minVal,
+                maxVal
+            ];
+        }
+        return [
+            min,
+            max
+        ];
+    }, [
+        max,
+        min,
+        step,
+        thumbMode,
+        currentValues
+    ]);
+    let [activeThumbIndex, setActiveThumbIndex] = React.useState(void 0);
+    let updateThumbValue = React.useCallback((event, callbackType)=>{
+        if (containerRef.current && void 0 !== activeThumbIndex) {
+            let percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
+            let pointerValue = min + (max - min) * percent;
+            pointerValue = roundValueToClosestStep(pointerValue, step, min);
+            let [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
+            pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
+            if (pointerValue !== currentValues[activeThumbIndex]) {
+                let newValues = [
+                    ...currentValues
+                ];
+                newValues[activeThumbIndex] = pointerValue;
+                setCurrentValues(newValues);
+                'onChange' === callbackType ? onChange?.(newValues) : onUpdate?.(newValues);
+            } else if ('onChange' === callbackType) onChange?.(currentValues);
+        }
+    }, [
+        activeThumbIndex,
+        min,
+        max,
+        step,
+        getAllowableThumbRange,
+        currentValues,
+        onUpdate,
+        onChange,
+        orientation
+    ]);
+    let handlePointerMove = React.useCallback((event)=>{
+        if (void 0 === activeThumbIndex) return;
+        event.preventDefault();
+        event.stopPropagation();
+        updateThumbValue(event, 'onUpdate');
+    }, [
+        activeThumbIndex,
+        updateThumbValue
+    ]);
+    let onThumbValueChanged = React.useCallback((index, value, keyboardReleased)=>{
+        if (currentValues[index] === value && !keyboardReleased) return;
+        if (keyboardReleased) onChange?.(currentValues);
+        else {
+            let newValues = [
+                ...currentValues
+            ];
+            newValues[index] = value;
+            onUpdate?.(newValues);
+            setCurrentValues(newValues);
+        }
+    }, [
+        currentValues,
+        onUpdate,
+        onChange
+    ]);
+    let onThumbActivated = React.useCallback((index)=>{
+        setActiveThumbIndex(index);
+    }, []);
+    let handlePointerUp = React.useCallback((event)=>{
+        if (void 0 === activeThumbIndex) return;
+        updateThumbValue(event, 'onChange');
+        setActiveThumbIndex(void 0);
+        event.preventDefault();
+        event.stopPropagation();
+    }, [
+        activeThumbIndex,
+        updateThumbValue
+    ]);
+    let handlePointerDownOnSlider = React.useCallback((event)=>{
+        if (containerRef.current) {
+            let percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
+            let pointerValue = min + (max - min) * percent;
+            pointerValue = roundValueToClosestStep(pointerValue, step, min);
+            let closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
+            let [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
+            pointerValue = getBoundedValue(pointerValue, minVal, maxVal);
+            if (pointerValue === currentValues[closestValueIndex]) return;
+            let newValues = [
+                ...currentValues
+            ];
+            newValues[closestValueIndex] = pointerValue;
+            setCurrentValues(newValues);
+            onChange?.(newValues);
+            onUpdate?.(newValues);
+            focusThumb(containerRef.current, closestValueIndex);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [
+        min,
+        max,
+        step,
+        currentValues,
+        getAllowableThumbRange,
+        onChange,
+        onUpdate,
+        orientation
+    ]);
+    useEventListener('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
+    useEventListener('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
+    let tickMarkArea = React.useMemo(()=>{
+        if (!tickLabels) return null;
+        if (Array.isArray(tickLabels)) return React.createElement(Box, {
+            as: "div",
+            ...ticksProps,
+            className: cx('iui-slider-ticks', ticksProps?.className)
+        }, tickLabels.map((label, index)=>React.createElement(Box, {
+                as: "span",
+                ...tickProps,
+                key: index,
+                className: cx('iui-slider-tick', tickProps?.className)
+            }, label)));
+        return tickLabels;
+    }, [
+        tickLabels,
+        tickProps,
+        ticksProps
+    ]);
+    let generateTooltipProps = React.useCallback((index, val)=>{
+        let outProps = tooltipProps ? tooltipProps(index, val, step) : {};
+        return {
+            ...outProps,
+            content: outProps.content ? outProps.content : formatNumberValue(val, step, getNumDecimalPlaces)
+        };
+    }, [
+        getNumDecimalPlaces,
+        step,
+        tooltipProps
+    ]);
+    return React.createElement(Box, {
+        ref: ref,
+        className: cx('iui-slider-container', className),
+        "data-iui-orientation": orientation,
+        "data-iui-disabled": disabled ? 'true' : void 0,
+        ...rest
+    }, minValueLabel && React.createElement(Box, {
+        as: "span",
+        ...minProps,
+        className: cx('iui-slider-min', minProps?.className)
+    }, minValueLabel), React.createElement(Box, {
+        ref: containerRef,
+        ...trackContainerProps,
+        className: cx('iui-slider', {
+            'iui-grabbing': void 0 !== activeThumbIndex
+        }, trackContainerProps?.className),
+        onPointerDown: handlePointerDownOnSlider
+    }, currentValues.map((thumbValue, index)=>{
+        let [minVal, maxVal] = getAllowableThumbRange(index);
+        let thisThumbProps = thumbProps?.(index);
+        return React.createElement(Thumb, {
+            key: thisThumbProps?.id ?? index,
+            index: index,
+            disabled: disabled,
+            isActive: activeThumbIndex === index,
+            onThumbActivated: onThumbActivated,
+            onThumbValueChanged: onThumbValueChanged,
+            minVal: minVal,
+            maxVal: maxVal,
+            value: thumbValue,
+            tooltipProps: generateTooltipProps(index, thumbValue),
+            thumbProps: thisThumbProps,
+            step: step,
+            sliderMin: min,
+            sliderMax: max
+        });
+    }), React.createElement(Track, {
+        trackDisplayMode: trackDisplay,
+        sliderMin: min,
+        sliderMax: max,
+        values: currentValues,
+        orientation: orientation,
+        ...trackProps
+    })), tickMarkArea, maxValueLabel && React.createElement(Box, {
+        as: "span",
+        ...maxProps,
+        className: cx('iui-slider-max', maxProps?.className)
+    }, maxValueLabel));
+});
+Slider.displayName = 'Slider';

package/DEV-esm/core/Slider/Thumb.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Box, useMergedRefs } from '../../utils/index.js';
+export const Thumb = (props)=>{
+    let { value, index, minVal, maxVal, step, sliderMin, sliderMax, isActive, onThumbActivated, onThumbValueChanged, tooltipProps, thumbProps, disabled } = props;
+    let thumbRef = React.useRef(null);
+    let handleOnKeyboardEvent = React.useCallback((event, keyboardReleased)=>{
+        if (disabled || event.altKey) return;
+        switch(event.key){
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                onThumbValueChanged(index, Math.max(value - step, minVal), keyboardReleased);
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                onThumbValueChanged(index, Math.min(value + step, maxVal), keyboardReleased);
+                break;
+            case 'Home':
+                onThumbValueChanged(index, minVal, keyboardReleased);
+                break;
+            case 'End':
+                onThumbValueChanged(index, maxVal, keyboardReleased);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }, [
+        disabled,
+        onThumbValueChanged,
+        index,
+        value,
+        step,
+        minVal,
+        maxVal
+    ]);
+    let handlePointerDownOnThumb = React.useCallback(()=>{
+        disabled || onThumbActivated(index);
+    }, [
+        disabled,
+        index,
+        onThumbActivated
+    ]);
+    let adjustedValue = React.useMemo(()=>{
+        if (value < sliderMin) return sliderMin;
+        if (value > sliderMax) return sliderMax;
+        return value;
+    }, [
+        sliderMax,
+        sliderMin,
+        value
+    ]);
+    let lowPercent = React.useMemo(()=>{
+        if (sliderMax === sliderMin) return 0;
+        return 100.0 * (adjustedValue - sliderMin) / (sliderMax - sliderMin);
+    }, [
+        adjustedValue,
+        sliderMax,
+        sliderMin
+    ]);
+    let { style, className, ...rest } = thumbProps || {};
+    return React.createElement(Tooltip, {
+        placement: "top",
+        autoUpdateOptions: {
+            animationFrame: true
+        },
+        ariaStrategy: "none",
+        ...tooltipProps
+    }, React.createElement(Box, {
+        ...rest,
+        ref: useMergedRefs(thumbRef, thumbProps?.ref),
+        style: {
+            ...style,
+            '--iui-slider-thumb-position': `${lowPercent}%`
+        },
+        className: cx('iui-slider-thumb', {
+            'iui-active': isActive
+        }, className),
+        role: "slider",
+        tabIndex: disabled ? void 0 : 0,
+        "aria-valuemin": minVal,
+        "aria-valuenow": value,
+        "aria-valuemax": maxVal,
+        "aria-disabled": disabled,
+        onPointerDown: handlePointerDownOnThumb,
+        onKeyDown: (event)=>handleOnKeyboardEvent(event, false),
+        onKeyUp: (event)=>handleOnKeyboardEvent(event, true)
+    }));
+};

package/DEV-esm/core/Slider/Track.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+function shouldDisplaySegment(segmentIndex, mode) {
+    if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) return true;
+    if ('even-segments' === mode && 0 === segmentIndex % 2) return true;
+    return false;
+}
+function generateSegments(values, min, max) {
+    let segments = [];
+    let newValues = [
+        ...values
+    ];
+    newValues.sort((a, b)=>a - b);
+    if (0 === newValues.length || newValues[0] < min || newValues[newValues.length - 1] > max || min === max) return [];
+    let lastValue = min;
+    for(let i = 0; i < newValues.length; i++){
+        segments.push({
+            left: lastValue,
+            right: newValues[i]
+        });
+        lastValue = newValues[i];
+    }
+    segments.push({
+        left: lastValue,
+        right: max
+    });
+    return segments;
+}
+export const Track = (props)=>{
+    let { className, trackDisplayMode, sliderMin, sliderMax, values, orientation } = props;
+    let [segments, setSegments] = React.useState(()=>generateSegments(values, sliderMin, sliderMax));
+    React.useEffect(()=>{
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [
+        values,
+        sliderMin,
+        sliderMax
+    ]);
+    return React.createElement(React.Fragment, null, 'none' !== trackDisplayMode && segments.map((segment, index)=>{
+        let lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin ? 100.0 * (segment.left - sliderMin) / (sliderMax - sliderMin) : 0;
+        let highPercent = segment.right >= sliderMin && sliderMax !== sliderMin ? 100.0 - 100.0 * (segment.right - sliderMin) / (sliderMax - sliderMin) : 100;
+        return React.createElement(React.Fragment, {
+            key: index
+        }, shouldDisplaySegment(index, trackDisplayMode) ? React.createElement(Box, {
+            className: cx('iui-slider-track', className),
+            style: {
+                ...'horizontal' === orientation ? {
+                    insetInlineStart: `${lowPercent}%`,
+                    insetInlineEnd: `${highPercent}%`
+                } : {
+                    insetBlockStart: `${highPercent}%`,
+                    insetBlockEnd: `${lowPercent}%`
+                }
+            }
+        }) : null);
+    }));
+};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Box, StatusIconMap } from '../../utils/index.js';
+import cx from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+export const StatusMessage = React.forwardRef((props, ref)=>{
+    let { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
+    let icon = userStartIcon ?? (status && StatusIconMap[status]());
+    let shouldShowIcon = null !== userStartIcon && !!icon;
+    return React.createElement(Box, {
+        className: cx('iui-status-message', className),
+        "data-iui-status": status,
+        ref: ref,
+        ...rest
+    }, shouldShowIcon ? React.createElement(Icon, {
+        "aria-hidden": true,
+        ...iconProps
+    }, icon) : null, React.createElement(Box, contentProps, children));
+});
+StatusMessage.displayName = 'StatusMessage';

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

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import { StepperStep } from './StepperStep.js';
+let defaultStepperLocalization = {
+    stepsCountLabel: (currentStep, totalSteps)=>`Step ${currentStep} of ${totalSteps}:`
+};
+export const Stepper = React.forwardRef((props, ref)=>{
+    let { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, stepProps, trackContentProps, circleProps, nameProps, labelProps, labelCountProps, ...rest } = props;
+    let boundedCurrentStep = Math.min(Math.max(0, currentStep ?? 0), steps.length - 1);
+    return React.createElement(Box, {
+        className: 'iui-stepper',
+        ref: ref,
+        ...rest
+    }, React.createElement("ol", null, steps.map((s, index)=>{
+        let thisStepProps = stepProps?.(index);
+        let thisTrackContentProps = trackContentProps?.(index);
+        let thisCircleProps = circleProps?.(index);
+        let thisNameProps = nameProps?.(index);
+        return React.createElement(StepperStep, {
+            stepProps: thisStepProps,
+            trackContentProps: thisTrackContentProps,
+            circleProps: thisCircleProps,
+            nameProps: thisNameProps,
+            key: index,
+            index: index,
+            title: 'long' === type ? '' : s.name,
+            currentStepNumber: boundedCurrentStep,
+            totalSteps: steps.length,
+            type: type,
+            onClick: onStepClick,
+            description: s.description
+        });
+    })), 'long' === type && React.createElement(Box, {
+        as: "div",
+        ...labelProps,
+        className: cx('iui-stepper-steps-label', labelProps?.className)
+    }, React.createElement(Box, {
+        as: "span",
+        ...labelCountProps,
+        className: cx('iui-stepper-steps-label-count', labelCountProps?.className)
+    }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)), steps[boundedCurrentStep].name));
+});
+Stepper.displayName = 'Stepper';

package/DEV-esm/core/Stepper/StepperStep.js

@@ -0,0 +1,52 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Box } from '../../utils/index.js';
+export const StepperStep = React.forwardRef((props, forwardedRef)=>{
+    let { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, stepProps, trackContentProps, circleProps, nameProps, ...rest } = props;
+    let isPast = currentStepNumber > index;
+    let isActive = currentStepNumber === index;
+    let isClickable = isPast && !!onClick;
+    let onCompletedClick = ()=>{
+        if (isClickable) onClick?.(index);
+    };
+    let onKeyDown = (e)=>{
+        if (e.altKey) return;
+        if (!isClickable) return;
+        if ('Enter' === e.key || 'Space' === e.key || ' ' === e.key) onCompletedClick();
+    };
+    let stepShape = React.createElement(Box, {
+        as: "li",
+        ...stepProps,
+        className: cx('iui-stepper-step', {
+            'iui-current': isActive,
+            'iui-clickable': isClickable
+        }, className, stepProps?.className),
+        style: {
+            inlineSize: 'default' === type ? `${100 / totalSteps}%` : void 0,
+            ...style,
+            ...stepProps?.style
+        },
+        onClick: onCompletedClick,
+        onKeyDown: onKeyDown,
+        "aria-current": isActive ? 'step' : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        as: "div",
+        ...trackContentProps,
+        className: cx('iui-stepper-track-content', trackContentProps?.className)
+    }, React.createElement(Box, {
+        as: "span",
+        ...circleProps,
+        className: cx('iui-stepper-circle', circleProps?.className)
+    }, index + 1)), 'default' === type && React.createElement(Box, {
+        as: "span",
+        ...nameProps,
+        className: cx('iui-stepper-step-name', nameProps?.className)
+    }, title));
+    return description ? React.createElement(Tooltip, {
+        content: description
+    }, stepShape) : stepShape;
+});

package/DEV-esm/core/Stepper/WorkflowDiagram.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
+export const WorkflowDiagram = React.forwardRef((props, ref)=>{
+    let { steps, className, contentProps, wrapperProps, ...rest } = props;
+    return React.createElement(Box, {
+        as: "div",
+        ...wrapperProps,
+        ref: ref
+    }, React.createElement(Box, {
+        as: "ol",
+        className: cx('iui-workflow-diagram', className),
+        ...rest
+    }, steps.map((s, index)=>{
+        let thisContentProps = contentProps?.(index);
+        return React.createElement(WorkflowDiagramStep, {
+            contentProps: thisContentProps,
+            key: index,
+            title: s.name,
+            description: s.description
+        });
+    })));
+});
+WorkflowDiagram.displayName = 'WorkflowDiagram';

package/DEV-esm/core/Stepper/WorkflowDiagramStep.js

@@ -0,0 +1,20 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Box } from '../../utils/index.js';
+export const WorkflowDiagramStep = (props)=>{
+    let { title, description, className, style, contentProps, ...rest } = props;
+    let stepShape = React.createElement(Box, {
+        as: "li",
+        className: cx('iui-workflow-diagram-step', className),
+        style: style,
+        ...rest
+    }, React.createElement(Box, {
+        as: "span",
+        ...contentProps,
+        className: cx('iui-workflow-diagram-content', contentProps?.className)
+    }, title));
+    return description ? React.createElement(Tooltip, {
+        content: description
+    }, stepShape) : stepShape;
+};

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useSafeContext, supportsHas, Box } from '../../utils/index.js';
+let getSurfaceElevationValue = (elevation)=>{
+    switch(elevation){
+        case 0:
+            return 'none';
+        case 1:
+            return 'var(--iui-shadow-1)';
+        case 2:
+            return 'var(--iui-shadow-2)';
+        case 3:
+            return 'var(--iui-shadow-3)';
+        case 4:
+            return 'var(--iui-shadow-4)';
+        case 5:
+            return 'var(--iui-shadow-5)';
+        default:
+            return;
+    }
+};
+let getBorderValue = (border)=>{
+    if ('string' == typeof border) return border;
+    if (false === border) return 'none';
+};
+let SurfaceHeader = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { setHasLayout } = useSafeContext(SurfaceContext);
+    React.useEffect(()=>{
+        if (!supportsHas()) setHasLayout(true);
+    }, [
+        setHasLayout
+    ]);
+    return React.createElement(Box, {
+        className: cx('iui-surface-header', className),
+        ref: ref,
+        ...rest
+    }, children);
+});
+SurfaceHeader.displayName = 'Surface.Header';
+let SurfaceBody = React.forwardRef((props, ref)=>{
+    let { children, className, isPadded = false, ...rest } = props;
+    let { setHasLayout } = useSafeContext(SurfaceContext);
+    React.useEffect(()=>{
+        if (!supportsHas()) setHasLayout(true);
+    }, [
+        setHasLayout
+    ]);
+    return React.createElement(Box, {
+        className: cx('iui-surface-body', className),
+        ref: ref,
+        "data-iui-padded": isPadded ? 'true' : void 0,
+        ...rest
+    }, children);
+});
+SurfaceBody.displayName = 'Surface.Body';
+export const Surface = Object.assign(React.forwardRef((props, ref)=>{
+    let { elevation, border = true, className, style, children, ...rest } = props;
+    let [hasLayout, setHasLayout] = React.useState(false);
+    let _style = {
+        '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+        '--iui-surface-border': getBorderValue(border),
+        ...style
+    };
+    return React.createElement(Box, {
+        className: cx('iui-surface', className),
+        style: _style,
+        ref: ref,
+        "data-iui-layout": hasLayout ? 'true' : void 0,
+        ...rest
+    }, React.createElement(SurfaceContext.Provider, {
+        value: {
+            setHasLayout
+        }
+    }, children));
+}), {
+    Header: SurfaceHeader,
+    Body: SurfaceBody
+});
+Surface.displayName = 'Surface';
+let SurfaceContext = React.createContext(void 0);
+SurfaceContext.displayName = 'SurfaceContext';