@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/utils/hooks/useDragAndDrop.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { getTranslateValuesFromElement, getWindow } from '../functions/index.js';
+import { useEventListener } from './useEventListener.js';
+import { useResizeObserver } from './useResizeObserver.js';
+let getContainerRect = (containerRef)=>{
+    let containerRect = containerRef?.current?.getBoundingClientRect();
+    return {
+        top: containerRect?.top ?? 0,
+        right: containerRect?.right ?? getWindow()?.innerWidth ?? 0,
+        bottom: containerRect?.bottom ?? getWindow()?.innerHeight ?? 0,
+        left: containerRect?.left ?? 0
+    };
+};
+export const useDragAndDrop = (elementRef, containerRef, enabled = true)=>{
+    let grabOffsetX = React.useRef(0);
+    let grabOffsetY = React.useRef(0);
+    let translateX = React.useRef();
+    let translateY = React.useRef();
+    let containerRectRef = React.useRef(getContainerRect(containerRef));
+    let adjustTransform = React.useCallback(()=>{
+        if (!elementRef.current || !enabled) return;
+        let { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
+        let [newTranslateX, newTranslateY] = getTranslateValuesFromElement(elementRef.current);
+        containerRectRef.current = getContainerRect(containerRef);
+        if (bottom > containerRectRef.current.bottom) newTranslateY -= bottom - containerRectRef.current.bottom;
+        if (top < containerRectRef.current.top) newTranslateY += containerRectRef.current.top - top;
+        if (right > containerRectRef.current.right) newTranslateX -= right - containerRectRef.current.right;
+        if (left < containerRectRef.current.left) newTranslateX += containerRectRef.current.left - left;
+        translateX.current = newTranslateX;
+        translateY.current = newTranslateY;
+        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+    }, [
+        containerRef,
+        elementRef,
+        enabled
+    ]);
+    let [resizeRef, resizeObserver] = useResizeObserver(adjustTransform);
+    resizeRef(containerRef?.current);
+    React.useEffect(()=>()=>{
+            resizeObserver?.disconnect();
+        }, [
+        resizeObserver
+    ]);
+    useEventListener('resize', ()=>{
+        adjustTransform();
+        if (null != translateX.current && null != translateY.current) setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
+    }, getWindow());
+    let [transform, setTransform] = React.useState('');
+    let onPointerMove = React.useRef((event)=>{
+        if (!elementRef.current) return;
+        let newTranslateX = event.clientX - grabOffsetX.current;
+        let newTranslateY = event.clientY - grabOffsetY.current;
+        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+        adjustTransform();
+    });
+    let originalUserSelect = React.useRef('');
+    let onPointerDown = React.useCallback((e)=>{
+        if (!elementRef.current || 0 !== e.button || !enabled) return;
+        let [x, y] = getTranslateValuesFromElement(elementRef.current);
+        grabOffsetX.current = e.clientX - x;
+        grabOffsetY.current = e.clientY - y;
+        originalUserSelect.current = elementRef.current.style.userSelect;
+        elementRef.current.style.userSelect = 'none';
+        let ownerDocument = elementRef.current.ownerDocument || document;
+        ownerDocument.addEventListener('pointermove', onPointerMove.current);
+        ownerDocument.addEventListener('pointerup', ()=>{
+            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
+            ownerDocument.removeEventListener('pointermove', onPointerMove.current);
+            if (elementRef.current) elementRef.current.style.userSelect = originalUserSelect.current;
+        }, {
+            once: true
+        });
+    }, [
+        elementRef,
+        enabled
+    ]);
+    return {
+        onPointerDown,
+        transform
+    };
+};

package/DEV-esm/utils/hooks/useEventListener.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export const useEventListener = (eventName, handler, element)=>{
+    let savedHandler = React.useRef();
+    React.useEffect(()=>{
+        savedHandler.current = handler;
+    }, [
+        handler
+    ]);
+    React.useEffect(()=>{
+        if (!element) return;
+        let eventListener = (event)=>savedHandler.current?.(event);
+        element.addEventListener(eventName, eventListener);
+        return ()=>{
+            element.removeEventListener(eventName, eventListener);
+        };
+    }, [
+        eventName,
+        element
+    ]);
+};

package/DEV-esm/utils/hooks/useGlobals.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ThemeContext } from '../../core/ThemeProvider/ThemeContext.js';
+import { isUnitTest } from '../functions/dev.js';
+let didLogWarning = {
+    fontSize: false,
+    themeProvider: false
+};
+export const useGlobals = ()=>{
+    let themeContext = React.useContext(ThemeContext);
+    useThemeProviderWarning(themeContext);
+    useRootFontSizeWarning();
+    return themeContext;
+};
+export const useThemeProviderWarning = (themeContext)=>{
+    React.useEffect(()=>{
+        if (!isUnitTest && !didLogWarning.themeProvider && !themeContext) {
+            console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
+            didLogWarning.themeProvider = true;
+        }
+    }, [
+        themeContext
+    ]);
+};
+let useRootFontSizeWarning = ()=>{
+    React.useEffect(()=>{
+        if (!isUnitTest && !didLogWarning.fontSize) {
+            let rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (rootFontSize < 16) console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
+            didLogWarning.fontSize = true;
+        }
+    }, []);
+};

package/DEV-esm/utils/hooks/useId.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { getRandomValue } from '../functions/numbers.js';
+export const useId = ()=>{
+    let uniqueValue = useUniqueValue();
+    return React.useMemo(()=>`iui-${uniqueValue}`, [
+        uniqueValue
+    ]);
+};
+let _React = React;
+let useUniqueValue = _React.useId ?? (()=>React.useMemo(()=>getRandomValue(10), []));

package/DEV-esm/utils/hooks/useIntersection.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { getWindow } from '../functions/dom.js';
+export const useIntersection = (onIntersect, options = {}, once = true)=>{
+    let { root, rootMargin, threshold } = options;
+    let cleanupRef = React.useRef(()=>{});
+    let setRef = React.useCallback((node)=>{
+        cleanupRef.current?.();
+        cleanupRef.current = ()=>{};
+        if (!node || !getWindow()?.IntersectionObserver) return;
+        let observer = new IntersectionObserver(([entry], obs)=>{
+            if (entry.isIntersecting) {
+                if (once) obs.disconnect();
+                onIntersect();
+            }
+        }, {
+            root,
+            rootMargin,
+            threshold
+        });
+        observer.observe(node);
+        cleanupRef.current = ()=>observer.disconnect();
+    }, [
+        onIntersect,
+        once,
+        root,
+        rootMargin,
+        threshold
+    ]);
+    return setRef;
+};

package/DEV-esm/utils/hooks/useIsClient.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const useIsClient = ()=>{
+    let [isClient, setIsClient] = React.useState(false);
+    React.useEffect(()=>{
+        setIsClient(true);
+    }, []);
+    return isClient;
+};

package/DEV-esm/utils/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+let useIsomorphicLayoutEffect = 'undefined' != typeof window ? React.useLayoutEffect : React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/DEV-esm/utils/hooks/useLatestRef.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export const useLatestRef = (value)=>{
+    let valueRef = React.useRef(value);
+    React.useEffect(()=>{
+        valueRef.current = value;
+    }, [
+        value
+    ]);
+    return valueRef;
+};

package/DEV-esm/utils/hooks/useMediaQuery.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useSyncExternalStore } from './useSyncExternalStore.js';
+export const useMediaQuery = (queryString)=>{
+    let getSnapshot = React.useCallback(()=>'undefined' != typeof window ? window.matchMedia?.(queryString).matches : void 0, [
+        queryString
+    ]);
+    let subscribe = React.useCallback((onChange)=>{
+        let mediaQueryList = window.matchMedia?.(queryString);
+        mediaQueryList?.addEventListener?.('change', onChange);
+        return ()=>mediaQueryList?.removeEventListener?.('change', onChange);
+    }, [
+        queryString
+    ]);
+    return useSyncExternalStore(subscribe, getSnapshot, ()=>void 0);
+};

package/DEV-esm/utils/hooks/useMergedRefs.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export const mergeRefs = (...refs)=>(instance)=>{
+        refs.forEach((ref)=>{
+            if ('function' == typeof ref) ref(instance);
+            else if (ref) ref.current = instance;
+        });
+    };
+export const useMergedRefs = (...refs)=>React.useCallback(mergeRefs(...refs), [
+        ...refs
+    ]);

package/DEV-esm/utils/hooks/useOverflow.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useMergedRefs } from './useMergedRefs.js';
+import { useResizeObserver } from './useResizeObserver.js';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
+let STARTING_MAX_ITEMS_COUNT = 20;
+export const useOverflow = (items, disabled = false, orientation = 'horizontal')=>{
+    let containerRef = React.useRef(null);
+    let [visibleCount, setVisibleCount] = React.useState(()=>disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+    let needsFullRerender = React.useRef(true);
+    let [containerSize, setContainerSize] = React.useState(0);
+    let previousContainerSize = React.useRef(0);
+    let updateContainerSize = React.useCallback(({ width, height })=>setContainerSize('horizontal' === orientation ? width : height), [
+        orientation
+    ]);
+    let [resizeRef, observer] = useResizeObserver(updateContainerSize);
+    let resizeObserverRef = React.useRef(observer);
+    useLayoutEffect(()=>{
+        if (disabled) setVisibleCount(items.length);
+        else {
+            setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+            needsFullRerender.current = true;
+        }
+    }, [
+        containerSize,
+        disabled,
+        items
+    ]);
+    let mergedRefs = useMergedRefs(containerRef, resizeRef);
+    useLayoutEffect(()=>{
+        if (!containerRef.current || disabled) {
+            resizeObserverRef.current?.disconnect();
+            return;
+        }
+        let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
+        let availableSize = containerRef.current[`offset${dimension}`];
+        let requiredSize = containerRef.current[`scroll${dimension}`];
+        if (availableSize < requiredSize) {
+            let avgItemSize = requiredSize / visibleCount;
+            let visibleItems = Math.floor(availableSize / avgItemSize);
+            setVisibleCount(visibleItems > 0 ? visibleItems : 1);
+        } else if (needsFullRerender.current) {
+            let childrenSize = Array.from(containerRef.current.children).reduce((sum, child)=>sum + child[`offset${dimension}`], 0);
+            let currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+            let avgItemSize = childrenSize / currentVisibleCount;
+            let visibleItems = Math.floor(availableSize / avgItemSize);
+            if (!isNaN(visibleItems)) setVisibleCount(Math.min(items.length, 2 * visibleItems));
+        }
+        needsFullRerender.current = false;
+    }, [
+        containerSize,
+        visibleCount,
+        disabled,
+        items.length,
+        orientation
+    ]);
+    useLayoutEffect(()=>{
+        previousContainerSize.current = containerSize;
+    }, [
+        containerSize
+    ]);
+    return [
+        mergedRefs,
+        visibleCount
+    ];
+};

package/DEV-esm/utils/hooks/useResizeObserver.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getWindow } from '../functions/dom.js';
+export const useResizeObserver = (onResize)=>{
+    let resizeObserver = React.useRef();
+    let elementRef = React.useCallback((element)=>{
+        if (!getWindow()?.ResizeObserver) return;
+        resizeObserver.current?.disconnect?.();
+        if (element) {
+            resizeObserver.current = new ResizeObserver((entries)=>{
+                window.requestAnimationFrame(()=>{
+                    if (!Array.isArray(entries) || !entries.length) return;
+                    let [{ contentRect }] = entries;
+                    return onResize(contentRect);
+                });
+            });
+            resizeObserver.current?.observe?.(element);
+        }
+    }, [
+        onResize
+    ]);
+    return [
+        elementRef,
+        resizeObserver.current
+    ];
+};

package/DEV-esm/utils/hooks/useSafeContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export const useSafeContext = (context)=>{
+    let value = React.useContext(context);
+    if (!value) throw new Error(`${context.displayName || 'Context'} is undefined`);
+    return value;
+};

package/DEV-esm/utils/hooks/useSyncExternalStore.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+let _React = React;
+export const useSyncExternalStore = _React.useSyncExternalStore || useSyncExternalStoreShim;
+function useSyncExternalStoreShim(subscribe, getSnapshot) {
+    let value = getSnapshot();
+    let [{ instance }, forceUpdate] = React.useState({
+        instance: {
+            value,
+            getSnapshot
+        }
+    });
+    React.useLayoutEffect(()=>{
+        instance.value = value;
+        instance.getSnapshot = getSnapshot;
+        if (!Object.is(value, getSnapshot())) forceUpdate({
+            instance
+        });
+    }, [
+        subscribe,
+        value,
+        getSnapshot
+    ]);
+    React.useEffect(()=>{
+        let synchronize = ()=>{
+            if (!Object.is(instance.value, instance.getSnapshot())) forceUpdate({
+                instance
+            });
+        };
+        synchronize();
+        return subscribe(synchronize);
+    }, [
+        subscribe
+    ]);
+    return value;
+}

package/DEV-esm/utils/hooks/useVirtualScroll.js

@@ -0,0 +1,27 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React from 'react';
+export const useVirtualScroll = (params)=>{
+    let { ...rest } = params;
+    let virtualizer = useVirtualizer({
+        indexAttribute: 'data-iui-index',
+        overscan: 10,
+        ...rest
+    });
+    let scrollToIndex = React.useCallback((index, options)=>{
+        setTimeout(()=>{
+            virtualizer.scrollToIndex(index, {
+                align: 'auto',
+                ...options
+            });
+        });
+    }, [
+        virtualizer
+    ]);
+    return React.useMemo(()=>({
+            ...virtualizer,
+            scrollToIndex
+        }), [
+        virtualizer,
+        scrollToIndex
+    ]);
+};

package/DEV-esm/utils/icons/StatusIconMap.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { SvgInfoCircular } from './SvgInfoCircular.js';
+import { SvgStatusError } from './SvgStatusError.js';
+import { SvgStatusSuccess } from './SvgStatusSuccess.js';
+import { SvgStatusWarning } from './SvgStatusWarning.js';
+export const StatusIconMap = {
+    negative: (args)=>React.createElement(SvgStatusError, {
+            "aria-hidden": true,
+            ...args
+        }),
+    positive: (args)=>React.createElement(SvgStatusSuccess, {
+            "aria-hidden": true,
+            ...args
+        }),
+    warning: (args)=>React.createElement(SvgStatusWarning, {
+            "aria-hidden": true,
+            ...args
+        }),
+    informational: (args)=>React.createElement(SvgInfoCircular, {
+            "aria-hidden": true,
+            ...args
+        })
+};

package/DEV-esm/utils/icons/Svg.js

@@ -0,0 +1,6 @@
+import { polymorphic } from '../functions/polymorphic.js';
+export const Svg = polymorphic.svg('', {
+    viewBox: '0 0 16 16',
+    width: 16,
+    height: 16
+});

package/DEV-esm/utils/icons/SvgCalendar.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCalendar = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z"
+    }));

package/DEV-esm/utils/icons/SvgCaretDownSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCaretDownSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z"
+    }));

package/DEV-esm/utils/icons/SvgCaretRightSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCaretRightSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M6.003 4.807v6.4a.28.28 0 0 0 .443.24L9.9 8.27a.34.34 0 0 0 0-.48L6.446 4.566a.269.269 0 0 0-.443.24z"
+    }));

package/DEV-esm/utils/icons/SvgCaretUpSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCaretUpSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M4.807 9.997h6.395a.28.28 0 0 0 .24-.443L8.27 6.097a.34.34 0 0 0-.48 0h-.001L4.566 9.554a.27.27 0 0 0 .24.443z"
+    }));

package/DEV-esm/utils/icons/SvgCheckmark.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCheckmark = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M6,14L0,8l2-2l4,4l8-8l2,2L6,14z"
+    }));

package/DEV-esm/utils/icons/SvgCheckmarkSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCheckmarkSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m6 13.4-4.7-4.7 1.4-1.4 3.3 3.3 7.3-7.3 1.4 1.4z"
+    }));

package/DEV-esm/utils/icons/SvgChevronLeft.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgChevronLeft = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m11.3 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z"
+    }));

package/DEV-esm/utils/icons/SvgChevronLeftDouble.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgChevronLeftDouble = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m14.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8zm-6.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z"
+    }));

package/DEV-esm/utils/icons/SvgChevronRight.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgChevronRight = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m4.7 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8z"
+    }));

package/DEV-esm/utils/icons/SvgChevronRightDouble.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgChevronRightDouble = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m1.4 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8zm6.6 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8z"
+    }));

package/DEV-esm/utils/icons/SvgChevronRightSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgChevronRightSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m5.525 2-1.05 1.05L9.425 8l-4.95 4.95L5.525 14l6-6-6-6Z"
+    }));

package/DEV-esm/utils/icons/SvgClose.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgClose = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m14 0-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6 6-6"
+    }));

package/DEV-esm/utils/icons/SvgCloseSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgCloseSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z"
+    }));

package/DEV-esm/utils/icons/SvgColumnManager.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgColumnManager = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m1 0h2v16h-2m6-16h2v16h-2m6-16h2v16h-2"
+    }));

package/DEV-esm/utils/icons/SvgDocument.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgDocument = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M10 0H2v16h12V4h-4zm1 0v3h3z"
+    }));

package/DEV-esm/utils/icons/SvgFilter.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgFilter = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m0 0v2l6 5v9l4-3v-6l6-5v-2z"
+    }));

package/DEV-esm/utils/icons/SvgFilterHollow.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgFilterHollow = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M15 1v.5L9.4 6.2l-.4.3v6L7 14V6.5l-.4-.3L1 1.5V1zm1-1H0v2l6 5v9l4-3V7l6-5z"
+    }));

package/DEV-esm/utils/icons/SvgImportantSmall.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgImportantSmall = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M6.25 1h3.5v3.19l-.676 6.408H6.91L6.25 4.19zm.12 10.572h3.268V15H6.37z"
+    }));

package/DEV-esm/utils/icons/SvgInfoCircular.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgInfoCircular = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm1.2 3.2a.923.923 0 0 1 .997.843l.003.057a1.31 1.31 0 0 1-1.3 1.2.945.945 0 0 1-1-1 1.228 1.228 0 0 1 1.3-1.1zm-2 9.6c-.5 0-.9-.3-.5-1.7l.6-2.4c.1-.4.1-.5 0-.5-.2-.1-.9.2-1.3.5l-.2-.5a6.497 6.497 0 0 1 3.3-1.6c.5 0 .6.6.3 1.6l-.7 2.6c-.1.5-.1.6.1.6a2.003 2.003 0 0 0 1.1-.6l.3.4a5.769 5.769 0 0 1-3 1.6z"
+    }));

package/DEV-esm/utils/icons/SvgMore.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgMore = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m4 8a2 2 0 1 1 -2-2 2 2 0 0 1 2 2zm4-2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z"
+    }));

package/DEV-esm/utils/icons/SvgMoreVertical.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgMoreVertical = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m8 4a2 2 0 1 1 2-2 2 2 0 0 1 -2 2zm2 4a2 2 0 1 0 -2 2 2 2 0 0 0 2-2zm0 6a2 2 0 1 0 -2 2 2 2 0 0 0 2-2z"
+    }));

package/DEV-esm/utils/icons/SvgNew.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgNew = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M8 5a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zM4.535 7a.997.997 0 0 1-.499-.134l-2.598-1.5a1 1 0 1 1 1-1.732l2.598 1.5A1 1 0 0 1 4.536 7zM1.94 12.5a1 1 0 0 1-.501-1.866l2.598-1.5a1 1 0 1 1 1 1.732l-2.598 1.5a.997.997 0 0 1-.499.134zM8 16a1 1 0 0 1-1-1v-3a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm6.061-3.5a.995.995 0 0 1-.499-.134l-2.598-1.5a1 1 0 1 1 1-1.732l2.598 1.5a1 1 0 0 1-.5 1.866zM11.465 7a1 1 0 0 1-.501-1.866l2.598-1.5a1 1 0 1 1 1 1.732l-2.598 1.5a.995.995 0 0 1-.5.134z"
+    }));

package/DEV-esm/utils/icons/SvgSearch.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgSearch = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m11 9.7c.7-1 1.1-2.2 1.1-3.5.1-3.5-2.7-6.2-6-6.2-3.4 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1c1.3 0 2.5-.4 3.5-1.1l4.9 4.9 1.4-1.4zm-5 .5c-2.3 0-4.1-1.8-4.1-4.1s1.8-4.1 4.1-4.1 4.1 1.8 4.1 4.1-1.8 4.1-4.1 4.1"
+    }));

package/DEV-esm/utils/icons/SvgSmileyHappy.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgSmileyHappy = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M8 12.5a5.19 5.19 0 0 1-3.872-1.666.5.5 0 1 1 .744-.668A4.191 4.191 0 0 0 8 11.5a4.191 4.191 0 0 0 3.128-1.334.5.5 0 1 1 .744.668A5.19 5.19 0 0 1 8 12.5zM11 5a1.146 1.146 0 0 1 1 1.25 1.146 1.146 0 0 1-1 1.25 1.146 1.146 0 0 1-1-1.25A1.146 1.146 0 0 1 11 5zM5 5a1.146 1.146 0 0 1 1 1.25A1.146 1.146 0 0 1 5 7.5a1.146 1.146 0 0 1-1-1.25A1.146 1.146 0 0 1 5 5zm3-5a8 8 0 1 0 8 8 8 8 0 0 0-8-8z"
+    }));

package/DEV-esm/utils/icons/SvgSortDown.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgSortDown = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m7 0v12.7l-3.8-3.7-1.2 1.2 6 5.8 1.2-1.2 4.8-4.6-1.2-1.2-3.8 3.7v-12.7z"
+    }));

package/DEV-esm/utils/icons/SvgSortUp.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgSortUp = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m9 16v-12.7l3.8 3.7 1.2-1.2-6-5.8-1.2 1.2-4.8 4.6 1.2 1.2 3.8-3.7v12.7z"
+    }));

package/DEV-esm/utils/icons/SvgStatusError.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgStatusError = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "M9 12H7v-2h2v2Zm0-3H7V4h2v5Zm2.314-9H4.686L0 4.686v6.628L4.686 16h6.628L16 11.314V4.686L11.314 0Z"
+    }));

package/DEV-esm/utils/icons/SvgStatusSuccess.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgStatusSuccess = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m8 0a8 8 0 1 0 8 8 8 8 0 0 0 -8-8zm-1.35 12-3.65-3.41 1.4-1.3 2.36 2.2 4.83-4.49 1.41 1.29z"
+    }));

package/DEV-esm/utils/icons/SvgStatusWarning.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Svg } from './Svg.js';
+export const SvgStatusWarning = (props)=>React.createElement(Svg, props, React.createElement("path", {
+        d: "m15.86807 13.26721-6.77-11.62a1.15 1.15 0 0 0 -1.1-.67 1.17 1.17 0 0 0 -1.1.69l-6.77 11.59a1.2 1.2 0 0 0 1.1 1.72h13.45a1.19 1.19 0 0 0 1.19-1.71zm-6.87-.29h-2v-2h2zm0-3h-2v-5h2z"
+    }));