@itwin/itwinui-react 3.3.4 → 3.4.1

package/cjs/core/utils/components/Resizer.js

@@ -33,6 +33,8 @@ const index_js_1 = require("../functions/index.js");
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
+ *
+ * Ideally should be used within a shadow root.
  * @private
  * @example
  * const ref = React.useRef<HTMLDivElement>(null);
@@ -43,6 +45,17 @@ const index_js_1 = require("../functions/index.js");
  * );
  */
 const Resizer = (props) => {
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            inset: -6,
+            display: 'grid',
+            pointerEvents: 'none',
+        } },
+        React.createElement(ResizerStyles, null),
+        React.createElement(Resizers, { ...props })));
+};
+exports.Resizer = Resizer;
+const Resizers = (props) => {
     const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
     const isResizing = React.useRef(false);
     const onResizePointerDown = (event) => {
@@ -173,70 +186,46 @@ const Resizer = (props) => {
         }, { once: true });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: 12,
-                height: 12,
-                cursor: 'nw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 'n-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: 12,
-                height: 12,
-                cursor: 'ne-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                right: 0,
-                bottom: 8,
-                width: 8,
-                cursor: 'e-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                right: 0,
-                width: 12,
-                height: 12,
-                cursor: 'se-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 's-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                width: 12,
-                height: 12,
-                cursor: 'sw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                left: 0,
-                bottom: 8,
-                width: 8,
-                cursor: 'w-resize',
-            } })));
+        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: { cursor: 'nw-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: { cursor: 'n-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: { cursor: 'ne-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: { cursor: 'e-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: { cursor: 'se-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: { cursor: 's-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: { cursor: 'sw-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: { cursor: 'w-resize' } })));
 };
-exports.Resizer = Resizer;
-exports.default = exports.Resizer;
+// ----------------------------------------------------------------------------
+const ResizerStyles = React.memo(() => React.createElement("style", null, resizerStyles));
+const resizerStyles = /* css */ `
+[data-iui-resizer] {
+  pointer-events: auto;
+  grid-area: 1 / 1 / -1 / -1;
+  width: 12px;
+  height: 12px;
+  z-index: 1;
+}
+[data-iui-resizer='top'],
+[data-iui-resizer='bottom'] {
+  height: 8px;
+  width: auto;
+  z-index: 0;
+}
+[data-iui-resizer='left'],
+[data-iui-resizer='right'] {
+  height: auto;
+  width: 8px;
+  z-index: 0;
+}
+[data-iui-resizer^='top'] {
+  align-self: start;
+}
+[data-iui-resizer^='bottom'] {
+  align-self: end;
+}
+[data-iui-resizer$='left'] {
+  justify-self: start;
+}
+[data-iui-resizer$='right'] {
+  justify-self: end;
+}`;

package/cjs/core/utils/components/ShadowRoot.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ *
+ * @private
+ */
+export declare const ShadowRoot: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element | null;

package/cjs/core/utils/components/ShadowRoot.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShadowRoot = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
+const isBrowser = typeof document !== 'undefined';
+const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ *
+ * @private
+ */
+const ShadowRoot = ({ children }) => {
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const isFirstRender = useIsFirstRender();
+    const attachShadowRef = React.useCallback((template) => {
+        const parent = template?.parentElement;
+        if (!template || !parent) {
+            return;
+        }
+        queueMicrotask(() => ReactDOM.flushSync(() => setShadowRoot(parent.shadowRoot || parent.attachShadow({ mode: 'open' }))));
+    }, []);
+    if (!isBrowser) {
+        return React.createElement("template", { shadowrootmode: 'open' }, children);
+    }
+    // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
+    // To pass hydration, the first client render needs to emulate this browser behavior and return null.
+    if (supportsDSD && isFirstRender) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, shadowRoot ? (ReactDOM.createPortal(children, shadowRoot)) : (React.createElement("template", { ref: attachShadowRef }))));
+};
+exports.ShadowRoot = ShadowRoot;
+// ----------------------------------------------------------------------------
+function useIsFirstRender() {
+    const [isFirstRender, setIsFirstRender] = React.useState(true);
+    React.useEffect(() => setIsFirstRender(false), []);
+    return isFirstRender;
+}

package/cjs/core/utils/components/VirtualScroll.d.ts

@@ -73,4 +73,3 @@ export declare const useVirtualization: (props: VirtualScrollProps) => {
     };
     visibleChildren: JSX.Element[];
 };
-export default VirtualScroll;

package/cjs/core/utils/components/VirtualScroll.js

@@ -172,17 +172,17 @@ const useVirtualization = (props) => {
     const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(onResize);
     // Find scrollable parent
     // Needed only on init
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
+    (0, index_js_1.useLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = React.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -215,7 +215,7 @@ const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
@@ -227,7 +227,7 @@ const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!isMounted) {
             return;
         }
@@ -282,8 +282,8 @@ const useVirtualization = (props) => {
                 });
             }
         }
-    }, [scrollToIndex, isMounted]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    }, [scrollToIndex, isMounted, itemsLength]);
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!scrollContainerHeight) {
             return;
         }
@@ -310,4 +310,3 @@ const useVirtualization = (props) => {
     };
 };
 exports.useVirtualization = useVirtualization;
-exports.default = exports.VirtualScroll;

package/cjs/core/utils/components/WithCSSTransition.d.ts

@@ -4,4 +4,3 @@ export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWith
     children: JSX.Element;
     dimension?: 'height' | 'width';
 }) => React.JSX.Element;
-export default WithCSSTransition;

package/cjs/core/utils/components/WithCSSTransition.js

@@ -65,4 +65,3 @@ const WithCSSTransition = (props) => {
     })) : (React.createElement(React.Fragment, null))));
 };
 exports.WithCSSTransition = WithCSSTransition;
-exports.default = exports.WithCSSTransition;

package/cjs/core/utils/components/index.d.ts

@@ -10,3 +10,4 @@ export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
+export * from './ShadowRoot.js';

package/cjs/core/utils/components/index.js

@@ -30,3 +30,4 @@ __exportStar(require("./AutoclearingHiddenLiveRegion.js"), exports);
 __exportStar(require("./Box.js"), exports);
 __exportStar(require("./ButtonBase.js"), exports);
 __exportStar(require("./Portal.js"), exports);
+__exportStar(require("./ShadowRoot.js"), exports);

package/cjs/core/utils/hooks/useContainerWidth.d.ts

@@ -14,4 +14,3 @@
  * return <div ref={ref}>...</div>;
  */
 export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null | undefined) => void, number];
-export default useContainerWidth;

package/cjs/core/utils/hooks/useContainerWidth.js

@@ -63,4 +63,3 @@ const useContainerWidth = (watchResizes = true) => {
     return [refs, contentWidth];
 };
 exports.useContainerWidth = useContainerWidth;
-exports.default = exports.useContainerWidth;

package/cjs/core/utils/hooks/useDragAndDrop.d.ts

@@ -11,4 +11,3 @@ export declare const useDragAndDrop: (elementRef: React.RefObject<HTMLElement>,
     onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
     transform: string;
 };
-export default useDragAndDrop;

package/cjs/core/utils/hooks/useDragAndDrop.js

@@ -125,4 +125,3 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
     return { onPointerDown, transform };
 };
 exports.useDragAndDrop = useDragAndDrop;
-exports.default = exports.useDragAndDrop;

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = void 0;
+exports.useLayoutEffect = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,6 +32,9 @@ const React = __importStar(require("react"));
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+exports.useLayoutEffect = useIsomorphicLayoutEffect;

package/cjs/core/utils/hooks/useMediaQuery.d.ts

@@ -1,2 +1 @@
 export declare const useMediaQuery: (queryString: string) => boolean;
-export default useMediaQuery;

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -33,7 +33,7 @@ const index_js_1 = require("../functions/index.js");
 const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
 const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {
@@ -59,4 +59,3 @@ const useMediaQuery = (queryString) => {
     return !!matches;
 };
 exports.useMediaQuery = useMediaQuery;
-exports.default = exports.useMediaQuery;

package/cjs/core/utils/hooks/useOverflow.js

@@ -64,7 +64,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = (0, useResizeObserver_js_1.useResizeObserver)(updateContainerSize);
     const resizeObserverRef = React.useRef(observer);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -74,7 +74,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         if (!containerRef.current || disabled) {
             resizeObserverRef.current?.disconnect();
             return;
@@ -103,7 +103,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/esm/core/Alert/Alert.d.ts

@@ -74,4 +74,4 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
      */
     CloseButton: PolymorphicForwardRefComponent<"button", {}>;
 };
-export default Alert;
+export {};

package/esm/core/Alert/Alert.js

@@ -101,4 +101,3 @@ export const Alert = Object.assign(AlertComponent, {
      */
     CloseButton: AlertCloseButton,
 });
-export default Alert;

package/esm/core/Avatar/Avatar.d.ts

@@ -52,4 +52,4 @@ export declare const defaultStatusTitles: StatusTitles;
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 export declare const Avatar: PolymorphicForwardRefComponent<"span", AvatarProps>;
-export default Avatar;
+export {};

package/esm/core/Avatar/Avatar.js

@@ -44,4 +44,3 @@ export const Avatar = React.forwardRef((props, ref) => {
         image,
         status ? React.createElement(VisuallyHidden, null, statusTitles[status]) : null));
 });
-export default Avatar;

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -58,4 +58,4 @@ type AvatarGroupProps = {
  * </AvatarGroup>
  */
 export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-export default AvatarGroup;
+export {};

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -54,4 +54,3 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
                 ? `${childrenLength - maxIcons}`
                 : `${maxLength}+`)))));
 });
-export default AvatarGroup;

package/esm/core/Badge/Badge.d.ts

@@ -23,4 +23,4 @@ type BadgeProps = {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 export declare const Badge: PolymorphicForwardRefComponent<"span", BadgeProps>;
-export default Badge;
+export {};

package/esm/core/Badge/Badge.js

@@ -41,4 +41,3 @@ export const Badge = React.forwardRef((props, forwardedRef) => {
         : { ...style };
     return (React.createElement(Box, { as: 'span', className: cx('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
 });
-export default Badge;

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -89,4 +89,4 @@ export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", Breadcru
      */
     Item: PolymorphicForwardRefComponent<"a", {}>;
 };
-export default Breadcrumbs;
+export {};

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -95,4 +95,3 @@ export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
      */
     Item: BreadcrumbsItem,
 });
-export default Breadcrumbs;

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -57,4 +57,4 @@ type ButtonGroupProps = {
  * </ButtonGroup>
  */
 export declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
-export default ButtonGroup;
+export {};

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -66,4 +66,3 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
                         overflowButton(overflowStart)));
             })()))));
 });
-export default ButtonGroup;

package/esm/core/Buttons/Button.d.ts

@@ -43,4 +43,3 @@ export type ButtonProps = {
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export declare const Button: PolymorphicForwardRefComponent<"button", ButtonProps>;
-export default Button;

package/esm/core/Buttons/Button.js

@@ -21,4 +21,3 @@ export const Button = React.forwardRef((props, ref) => {
         children && React.createElement("span", { ...labelProps }, children),
         endIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: cx('iui-button-icon', endIconProps?.className) }, endIcon))));
 });
-export default Button;

package/esm/core/Buttons/DropdownButton.d.ts

@@ -29,4 +29,3 @@ export type DropdownButtonProps = {
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
 export declare const DropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
-export default DropdownButton;

package/esm/core/Buttons/DropdownButton.js

@@ -25,4 +25,3 @@ export const DropdownButton = React.forwardRef((props, forwardedRef) => {
         } },
         React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: forwardedRef, ...rest }, children)));
 });
-export default DropdownButton;

package/esm/core/Buttons/IconButton.d.ts

@@ -30,4 +30,3 @@ export type IconButtonProps = {
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export declare const IconButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
-export default IconButton;

package/esm/core/Buttons/IconButton.js

@@ -23,4 +23,3 @@ export const IconButton = React.forwardRef((props, ref) => {
         label ? React.createElement(VisuallyHidden, null, label) : null));
     return label ? (React.createElement(Tooltip, { placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top', ...labelProps, content: label, ariaStrategy: 'none' }, button)) : (button);
 });
-export default IconButton;

package/esm/core/Buttons/IdeasButton.d.ts

@@ -16,4 +16,4 @@ type IdeasButtonProps = {
  * <IdeasButton />
  */
 export declare const IdeasButton: PolymorphicForwardRefComponent<"button", IdeasButtonProps>;
-export default IdeasButton;
+export {};

package/esm/core/Buttons/IdeasButton.js

@@ -14,4 +14,3 @@ export const IdeasButton = React.forwardRef((props, ref) => {
     const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
     return (React.createElement(Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
-export default IdeasButton;

package/esm/core/Buttons/SplitButton.d.ts

@@ -43,4 +43,3 @@ export type SplitButtonProps = ButtonProps & {
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
 export declare const SplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;
-export default SplitButton;

package/esm/core/Buttons/SplitButton.js

@@ -58,4 +58,3 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
                     },
                 }), ref: popover.refs.setFloating }, menuContent)))));
 });
-export default SplitButton;

package/esm/core/Carousel/Carousel.d.ts

@@ -217,4 +217,4 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         isSmaller?: boolean | undefined;
     }>;
 };
-export default Carousel;
+export {};

package/esm/core/Carousel/Carousel.js

@@ -75,4 +75,3 @@ export const Carousel = Object.assign(CarouselComponent, {
     DotsList: CarouselDotsList,
     Dot: CarouselDot,
 });
-export default Carousel;

package/esm/core/Carousel/CarouselSlider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import { getWindow, useMergedRefs, useLayoutEffect, Box, } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
@@ -23,7 +23,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
             index,
         })
         : child) ?? [], [children, idPrefix]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);

package/esm/core/Checkbox/Checkbox.d.ts

@@ -46,4 +46,4 @@ type CheckboxProps = {
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 export declare const Checkbox: PolymorphicForwardRefComponent<"input", CheckboxProps>;
-export default Checkbox;
+export {};

package/esm/core/Checkbox/Checkbox.js

@@ -46,4 +46,3 @@ export const Checkbox = React.forwardRef((props, ref) => {
         checkbox,
         label && (React.createElement(Box, { as: 'span', className: cx('iui-checkbox-label', labelClassName), ...restLabelProps }, label))));
 });
-export default Checkbox;

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -23,4 +23,4 @@ type ColorInputPanelProps = {
  * </ColorPicker>
  */
 export declare const ColorInputPanel: PolymorphicForwardRefComponent<"div", ColorInputPanelProps>;
-export default ColorInputPanel;
+export {};

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -265,4 +265,3 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
                 currentFormat === 'rgb' && rgbInputs,
                 currentFormat === 'hsl' && hslInputs))));
 });
-export default ColorInputPanel;

package/esm/core/ColorPicker/ColorPalette.d.ts

@@ -27,4 +27,3 @@ export type ColorPaletteProps = {
  * </ColorPalette>
  */
 export declare const ColorPalette: PolymorphicForwardRefComponent<"div", ColorPaletteProps>;
-export default ColorPalette;

package/esm/core/ColorPicker/ColorPalette.js

@@ -35,4 +35,3 @@ export const ColorPalette = React.forwardRef((props, ref) => {
                         }, isActive: color.equals(activeColor) }));
                 }))));
 });
-export default ColorPalette;

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -54,4 +54,4 @@ type ColorPickerProps = {
  * </ColorPicker>
  */
 export declare const ColorPicker: PolymorphicForwardRefComponent<"div", ColorPickerProps>;
-export default ColorPicker;
+export {};