@itwin/itwinui-react 1.48.1 → 2.0.0-dev.1

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

@@ -6,7 +6,6 @@ export * from './Popover';
 export * from './Resizer';
 export * from './FocusTrap';
 export * from './InputContainer';
-export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';

package/esm/core/utils/functions/colors.d.ts

@@ -1,20 +1,20 @@
 export declare const SoftBackgrounds: {
-    readonly skyblue: "hsl(197, 71%, 83%)";
-    readonly celery: "hsl(72, 51%, 66%)";
-    readonly froly: "hsl(2, 90%, 83%)";
-    readonly steelblue: "hsl(207, 44%, 73%)";
-    readonly sunglow: "hsl(42, 100%, 70%)";
-    readonly seabuckthorn: "hsl(29, 92%, 71%)";
-    readonly montecarlo: "hsl(176, 43%, 72%)";
-    readonly poloblue: "hsl(211, 44%, 77%)";
-    readonly bouquet: "hsl(305, 19%, 75%)";
-    readonly ash: "hsl(42, 15%, 85%)";
-    readonly oak: "hsl(27, 32%, 72%)";
+    readonly skyblue: "var(--iui-color-background-skyblue)";
+    readonly celery: "var(--iui-color-background-celery)";
+    readonly froly: "var(--iui-color-background-froly)";
+    readonly steelblue: "var(--iui-color-background-steelblue)";
+    readonly sunglow: "var(--iui-color-background-sunglow)";
+    readonly seabuckthorn: "var(--iui-color-background-seabuckthorn)";
+    readonly montecarlo: "var(--iui-color-background-montecarlo)";
+    readonly poloblue: "var(--iui-color-background-poloblue)";
+    readonly bouquet: "var(--iui-color-background-bouquet)";
+    readonly ash: "var(--iui-color-background-ash)";
+    readonly oak: "var(--iui-color-background-oak)";
 };
 /** Returns true if a string value is one of the SoftBackgrounds keys */
 export declare const isSoftBackground: (value: string) => value is "skyblue" | "celery" | "froly" | "steelblue" | "sunglow" | "seabuckthorn" | "montecarlo" | "poloblue" | "bouquet" | "ash" | "oak";
 /**
  * Generate color from user name or email.
- * Recommended to use for `backgroundColor` in `UserIcon` component.
+ * Recommended to use for `backgroundColor` in `Avatar` component.
  */
 export declare const getUserColor: (emailOrName: string) => string;

package/esm/core/utils/functions/colors.js

@@ -3,17 +3,17 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export var SoftBackgrounds = {
-    skyblue: 'hsl(197, 71%, 83%)',
-    celery: 'hsl(72, 51%, 66%)',
-    froly: 'hsl(2, 90%, 83%)',
-    steelblue: 'hsl(207, 44%, 73%)',
-    sunglow: 'hsl(42, 100%, 70%)',
-    seabuckthorn: 'hsl(29, 92%, 71%)',
-    montecarlo: 'hsl(176, 43%, 72%)',
-    poloblue: 'hsl(211, 44%, 77%)',
-    bouquet: 'hsl(305, 19%, 75%)',
-    ash: 'hsl(42, 15%, 85%)',
-    oak: 'hsl(27, 32%, 72%)',
+    skyblue: 'var(--iui-color-background-skyblue)',
+    celery: 'var(--iui-color-background-celery)',
+    froly: 'var(--iui-color-background-froly)',
+    steelblue: 'var(--iui-color-background-steelblue)',
+    sunglow: 'var(--iui-color-background-sunglow)',
+    seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
+    montecarlo: 'var(--iui-color-background-montecarlo)',
+    poloblue: 'var(--iui-color-background-poloblue)',
+    bouquet: 'var(--iui-color-background-bouquet)',
+    ash: 'var(--iui-color-background-ash)',
+    oak: 'var(--iui-color-background-oak)',
 };
 /** Returns true if a string value is one of the SoftBackgrounds keys */
 export var isSoftBackground = function (value) {
@@ -34,7 +34,7 @@ var USER_COLORS = [
 ];
 /**
  * Generate color from user name or email.
- * Recommended to use for `backgroundColor` in `UserIcon` component.
+ * Recommended to use for `backgroundColor` in `Avatar` component.
  */
 export var getUserColor = function (emailOrName) {
     var normalizedString = emailOrName.trim().toLowerCase();

package/esm/core/utils/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './useIntersection';
 export * from './useMediaQuery';
 export * from './useSafeContext';
 export * from './useLatestRef';
+export * from './useIsomorphicLayoutEffect';

package/esm/core/utils/hooks/index.js

@@ -12,3 +12,4 @@ export * from './useIntersection';
 export * from './useMediaQuery';
 export * from './useSafeContext';
 export * from './useLatestRef';
+export * from './useIsomorphicLayoutEffect';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
+ *
+ * @see https://fb.me/react-uselayouteffect-ssr
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

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

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+/**
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
+ *
+ * @see https://fb.me/react-uselayouteffect-ssr
+ */
+export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

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

@@ -4,9 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { getWindow } from '../functions';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 export var useMediaQuery = function (queryString) {
     var _a = React.useState(), matches = _a[0], setMatches = _a[1];
-    React.useLayoutEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         var _a, _b, _c;
         var mediaQueryList = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
         var handleChange = function (_a) {

package/esm/core/utils/hooks/useTheme.d.ts

@@ -1,9 +1,13 @@
 import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-variables/index.css';
 export declare type ThemeOptions = {
     /**
      * Document to which the theme will be applied.
      * Can be specified to handle popup windows.
      * @default document
+     *
+     * @deprecated This prop will continue to work in `useTheme` but
+     * we recommend rendering `ThemeProvider` in the correct document instead.
      */
     ownerDocument?: Document;
     /**
@@ -13,10 +17,23 @@ export declare type ThemeOptions = {
     highContrast?: boolean;
 };
 export declare type ThemeType = 'light' | 'dark' | 'os';
+export declare type UseThemeProps = {
+    /**
+     * Theme to be applied. If not set, light theme will be used.
+     */
+    theme?: ThemeType;
+    /**
+     * Options that can be specified to override default theming behavior.
+     */
+    themeOptions?: ThemeOptions;
+};
 /**
- * Hook that applies styling and theme to all components.
- * Defaults to light theme if none provided or set elsewhere.
+ * Hook that conditionally applies styling and theme to all components.
+ * Defaults to light theme if none provided.
+ *
+ * If ThemeProvider is used as an ancestor, this hook will not do anything.
+ *
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
-export declare const useTheme: (theme?: ThemeType, themeOptions?: ThemeOptions) => void;
+export declare const useTheme: (theme?: UseThemeProps['theme'], themeOptions?: UseThemeProps['themeOptions']) => void;

package/esm/core/utils/hooks/useTheme.js

@@ -3,77 +3,76 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
+import { getDocument, getWindow } from '../functions';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 import '@itwin/itwinui-css/css/global.css';
-import { getDocument, getWindow } from '../functions/dom';
-import { useMediaQuery } from './useMediaQuery';
+import '@itwin/itwinui-variables/index.css';
 /**
- * Hook that applies styling and theme to all components.
- * Defaults to light theme if none provided or set elsewhere.
+ * Hook that conditionally applies styling and theme to all components.
+ * Defaults to light theme if none provided.
+ *
+ * If ThemeProvider is used as an ancestor, this hook will not do anything.
+ *
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
 export var useTheme = function (theme, themeOptions) {
     var _a;
+    var themeContext = React.useContext(ThemeContext);
     var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
-    var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-    var highContrast = React.useMemo(function () { var _a; return !!((_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast); }, [prefersHighContrast, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast]);
-    React.useLayoutEffect(function () {
-        if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
-            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
-        }
-    }, [ownerDocument]);
-    React.useLayoutEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!ownerDocument) {
+    useIsomorphicLayoutEffect(function () {
+        // exit early if theme was already set by provider
+        if (themeContext || !ownerDocument) {
             return;
         }
-        var prefersDarkMediaQuery = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)');
-        var addOSTheme = function (_a) {
-            var isDark = _a.matches;
-            if (isDark) {
-                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
-            }
-            else {
-                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
-            }
-        };
+        ownerDocument.body.classList.toggle('iui-root', true);
         switch (theme) {
             case 'light':
-                (_c = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
-                break;
             case 'dark':
-                (_d = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
-                break;
-            case 'os':
-                if (prefersDarkMediaQuery != undefined) {
-                    addOSTheme(prefersDarkMediaQuery);
-                    (_e = prefersDarkMediaQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                }
-                else {
-                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
-                }
-                break;
-            default:
-                if (ownerDocument.documentElement.className.indexOf('iui-theme') === -1) {
-                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
+            case 'os': {
+                return handleTheme(theme, ownerDocument, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast);
+            }
+            default: {
+                // set light theme by default
+                if (ownerDocument.documentElement.dataset.iuiTheme == null) {
+                    return handleTheme('light', ownerDocument, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast);
                 }
+                return;
+            }
         }
-        return function () {
-            var _a;
-            (_a = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkMediaQuery, 'change', addOSTheme);
-        };
-    }, [highContrast, ownerDocument, theme]);
+    }, [theme, themeContext, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
 };
-var applyTheme = function (theme, _a) {
-    var ownerDocument = _a.ownerDocument, highContrast = _a.highContrast;
-    var classList = ownerDocument.documentElement.classList;
-    var currentTheme = Array.from(classList).find(function (cls) {
-        return cls.startsWith('iui-theme');
-    });
-    if (currentTheme) {
-        classList.remove(currentTheme);
-    }
-    classList.add("iui-theme-".concat(theme).concat(highContrast ? '-hc' : ''));
+/**
+ * Helper function to apply the specified theme, or detect the OS theme.
+ * Returns a cleanup function to remove the change handlers.
+ */
+var handleTheme = function (theme, ownerDocument, highContrast) {
+    var _a, _b, _c, _d, _e;
+    var root = ownerDocument.documentElement;
+    var _window = (_a = ownerDocument.defaultView) !== null && _a !== void 0 ? _a : getWindow();
+    var applyThemeAttributes = function (isDark, isHC) {
+        if (isDark === void 0) { isDark = false; }
+        if (isHC === void 0) { isHC = false; }
+        root.dataset.iuiTheme = isDark ? 'dark' : 'light';
+        root.dataset.iuiContrast = isHC ? 'high' : 'default';
+    };
+    var prefersDarkQuery = (_b = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_window, '(prefers-color-scheme: dark)');
+    var prefersHCQuery = (_c = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(_window, '(prefers-contrast: more)');
+    var changeHandler = function () {
+        var isDark = theme === 'dark' || (theme === 'os' && (prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.matches));
+        var isHC = highContrast !== null && highContrast !== void 0 ? highContrast : prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.matches;
+        applyThemeAttributes(isDark, isHC);
+    };
+    // call handler once to set initial theme
+    changeHandler();
+    // add listeners in supported browsers
+    (_d = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.addEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkQuery, 'change', changeHandler);
+    (_e = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersHCQuery, 'change', changeHandler);
+    // return cleanup function to remove event listeners (should be returned from useEffect)
+    return function () {
+        var _a, _b;
+        (_a = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkQuery, 'change', changeHandler);
+        (_b = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(prefersHCQuery, 'change', changeHandler);
+    };
 };

package/esm/core/utils/{components/icons.d.ts → icons/StatusIconMap.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../props';
+import { type CommonProps } from '../props';
 export declare const StatusIconMap: {
     negative: (args?: CommonProps) => JSX.Element;
     positive: (args?: CommonProps) => JSX.Element;

package/esm/core/utils/{components/icons.js → icons/StatusIconMap.js}

@@ -13,11 +13,11 @@ var __assign = (this && this.__assign) || function () {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import SvgInfoCircular from '@itwin/itwinui-icons-react/cjs/icons/InfoCircular';
-import SvgStatusError from '@itwin/itwinui-icons-react/cjs/icons/StatusError';
-import SvgStatusSuccess from '@itwin/itwinui-icons-react/cjs/icons/StatusSuccess';
-import SvgStatusWarning from '@itwin/itwinui-icons-react/cjs/icons/StatusWarning';
-import React from 'react';
+import * as React from 'react';
+import { SvgInfoCircular } from './SvgInfoCircular';
+import { SvgStatusError } from './SvgStatusError';
+import { SvgStatusSuccess } from './SvgStatusSuccess';
+import { SvgStatusWarning } from './SvgStatusWarning';
 export var StatusIconMap = {
     negative: function (args) { return React.createElement(SvgStatusError, __assign({ "aria-hidden": true }, args)); },
     positive: function (args) { return React.createElement(SvgStatusSuccess, __assign({ "aria-hidden": true }, args)); },

package/esm/core/utils/icons/SvgCalendar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCalendar: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgCalendar.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgCalendar = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgCaretDownSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCaretDownSmall: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgCaretDownSmall.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgCaretDownSmall = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgCaretRightSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCaretRightSmall: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgCaretRightSmall.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgCaretRightSmall = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgCaretUpSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCaretUpSmall: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgCaretUpSmall.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgCaretUpSmall = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgCheckmark.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCheckmark: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgCheckmark.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgCheckmark = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+        React.createElement("path", { d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' })));
+};

package/esm/core/utils/icons/SvgCheckmarkSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCheckmarkSmall: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgCheckmarkSmall.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgCheckmarkSmall = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgChevronLeft.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgChevronLeft: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgChevronLeft.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgChevronLeft = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgChevronLeftDouble.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgChevronLeftDouble: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgChevronLeftDouble.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgChevronLeftDouble = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgChevronRight.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgChevronRight: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgChevronRight.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgChevronRight = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgChevronRightDouble.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgChevronRightDouble: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgChevronRightDouble.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgChevronRightDouble = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgClose.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgClose: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/esm/core/utils/icons/SvgClose.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export var SvgClose = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, 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/esm/core/utils/icons/SvgCloseSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCloseSmall: (props: React.ComponentProps<'svg'>) => JSX.Element;