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

package/cjs/core/Alert/Alert.js

@@ -30,7 +30,6 @@ exports.Alert = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -60,7 +59,8 @@ var Alert = function (props) {
             children,
             clickableText && (react_1.default.createElement("a", __assign({}, clickableTextProps, { className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }), clickableText))),
         onClose && (react_1.default.createElement("button", { onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
-            react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true, className: 'iui-alert-button-icon' })))));
+            react_1.default.createElement("span", { className: 'iui-alert-button-icon', "aria-hidden": true },
+                react_1.default.createElement(utils_1.SvgCloseSmall, null))))));
 };
 exports.Alert = Alert;
 exports.default = exports.Alert;

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -33,7 +33,6 @@ exports.Breadcrumbs = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 require("@itwin/itwinui-css/css/breadcrumbs.css");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -94,6 +93,6 @@ var ListItem = function (_a) {
 };
 var Separator = function (_a) {
     var separator = _a.separator;
-    return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(ChevronRight_1.default, null)));
+    return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(utils_1.SvgChevronRight, null)));
 };
 exports.default = exports.Breadcrumbs;

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -34,8 +34,6 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Button_1 = require("../Button");
 var DropdownMenu_1 = require("../../DropdownMenu");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
-var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
@@ -60,6 +58,6 @@ exports.DropdownButton = react_1.default.forwardRef(function (props, ref) {
         }
     }, [children, size, styleType]);
     return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        react_1.default.createElement(Button_1.Button, __assign({ className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(CaretUpSmall_1.default, { "aria-hidden": true })) : (react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
+        react_1.default.createElement(Button_1.Button, __assign({ className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
 });
 exports.default = exports.DropdownButton;

package/cjs/core/Buttons/IdeasButton/IdeasButton.js

@@ -31,7 +31,6 @@ exports.IdeasButton = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var SmileyHappy_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SmileyHappy"));
 var utils_1 = require("../../utils");
 var Button_1 = require("../Button");
 /**
@@ -42,6 +41,6 @@ var Button_1 = require("../Button");
 exports.IdeasButton = react_1.default.forwardRef(function (props, ref) {
     var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: react_1.default.createElement(SmileyHappy_1.default, { "aria-hidden": true }) }, rest), feedbackLabel));
+    return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: react_1.default.createElement(utils_1.SvgSmileyHappy, { "aria-hidden": true }) }, rest), feedbackLabel));
 });
 exports.default = exports.IdeasButton;

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -35,8 +35,6 @@ var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Button");
 var IconButton_1 = require("../IconButton");
 var DropdownMenu_1 = require("../../DropdownMenu");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
-var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
@@ -69,6 +67,6 @@ exports.SplitButton = react_1.default.forwardRef(function (props, forwardedRef)
         }), style: style, title: title, ref: ref },
         react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children),
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
-            react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(CaretUpSmall_1.default, null) : react_1.default.createElement(CaretDownSmall_1.default, null)))));
+            react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(utils_1.SvgCaretUpSmall, null) : react_1.default.createElement(utils_1.SvgCaretDownSmall, null)))));
 });
 exports.default = exports.SplitButton;

package/cjs/core/Carousel/CarouselNavigation.js

@@ -35,8 +35,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var CarouselContext_1 = require("./CarouselContext");
 var Buttons_1 = require("../Buttons");
 var CarouselDotsList_1 = require("./CarouselDotsList");
-var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var utils_1 = require("../utils");
 /** Button for switching to previous slide */
 var PreviousButton = react_1.default.forwardRef(function (props, ref) {
     var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
@@ -51,7 +50,7 @@ var PreviousButton = react_1.default.forwardRef(function (props, ref) {
             scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } }),
-        react_1.default.createElement(ChevronLeft_1.default, null)));
+        react_1.default.createElement(utils_1.SvgChevronLeft, null)));
 });
 /** Button for switching to next slide */
 var NextButton = react_1.default.forwardRef(function (props, ref) {
@@ -67,7 +66,7 @@ var NextButton = react_1.default.forwardRef(function (props, ref) {
             scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } }),
-        react_1.default.createElement(ChevronRight_1.default, null)));
+        react_1.default.createElement(utils_1.SvgChevronRight, null)));
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -36,7 +36,6 @@ var Buttons_1 = require("../Buttons");
 var Input_1 = require("../Input");
 var utils_1 = require("../utils");
 var ColorPickerContext_1 = require("./ColorPickerContext");
-var Swap_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Swap"));
 require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -303,7 +302,7 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
             : currentFormat.toUpperCase()),
         react_1.default.createElement("div", { className: 'iui-color-input' },
             allowedColorFormats.length > 1 && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-                react_1.default.createElement(Swap_1.default, null))),
+                react_1.default.createElement(utils_1.SvgSwap, null))),
             react_1.default.createElement("div", { ref: inputsContainerRef, className: 'iui-color-input-fields' },
                 currentFormat === 'hex' && hexInputField,
                 currentFormat === 'rgb' && rgbInputs,

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -34,7 +34,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 exports.ComboBoxEndIcon = react_1.default.forwardRef(function (props, forwardedRef) {
     var className = props.className, children = props.children, onClickProp = props.onClick, disabled = props.disabled, isOpen = props.isOpen, rest = __rest(props, ["className", "children", "onClick", "disabled", "isOpen"]);
     var dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
@@ -49,6 +48,6 @@ exports.ComboBoxEndIcon = react_1.default.forwardRef(function (props, forwardedR
             if (!e.isDefaultPrevented()) {
                 dispatch([isOpen ? 'close' : 'open']);
             }
-        } }, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })));
+        } }, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });
 exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/DatePicker/DatePicker.js

@@ -30,10 +30,6 @@ exports.DatePicker = exports.generateLocalizedStrings = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
-var ChevronLeftDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeftDouble"));
-var ChevronRightDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRightDouble"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -374,17 +370,17 @@ var DatePicker = function (props) {
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: 'iui-calendar-month-year' },
                 showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
-                    react_1.default.createElement(ChevronLeftDouble_1.default, null))),
+                    react_1.default.createElement(utils_1.SvgChevronLeftDouble, null))),
                 react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
-                    react_1.default.createElement(ChevronLeft_1.default, null)),
+                    react_1.default.createElement(utils_1.SvgChevronLeft, null)),
                 react_1.default.createElement("span", { "aria-live": 'polite' },
                     react_1.default.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
                 react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
-                    react_1.default.createElement(ChevronRight_1.default, null)),
+                    react_1.default.createElement(utils_1.SvgChevronRight, null)),
                 showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
-                    react_1.default.createElement(ChevronRightDouble_1.default, null)))),
+                    react_1.default.createElement(utils_1.SvgChevronRightDouble, null)))),
             react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)); })),
             react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
                 return (react_1.default.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {

package/cjs/core/Dialog/DialogTitleBar.js

@@ -32,7 +32,6 @@ exports.DialogTitleBar = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
 var Buttons_1 = require("../Buttons");
 require("@itwin/itwinui-css/css/dialog.css");
@@ -72,7 +71,7 @@ exports.DialogTitleBar = Object.assign(react_1.default.forwardRef(function (prop
         }), ref: ref, onPointerDown: handlePointerDown }, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(DialogTitleBarTitle_1.DialogTitleBarTitle, null, titleText),
         isDismissible && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-            react_1.default.createElement(Close_1.default, null)))))));
+            react_1.default.createElement(utils_1.SvgClose, null)))))));
 }), {
     Title: DialogTitleBarTitle_1.DialogTitleBarTitle,
 });

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -30,7 +30,6 @@ exports.ExpandableBlock = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -70,7 +69,7 @@ var ExpandableBlock = function (props) {
             'iui-borderless': styleType === 'borderless',
         }, className), style: style }, rest),
         react_1.default.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
-            react_1.default.createElement(ChevronRight_1.default, { className: 'iui-icon', "aria-hidden": true }),
+            react_1.default.createElement(utils_1.SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
             react_1.default.createElement("span", { className: 'iui-expandable-block-label' },
                 react_1.default.createElement("div", { className: 'iui-title' }, title),
                 caption && react_1.default.createElement("div", { className: 'iui-caption' }, caption)),

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -11,7 +11,6 @@ exports.FileUploadTemplate = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/file-upload.css");
-var Upload_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Upload"));
 /**
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
@@ -22,7 +21,7 @@ var FileUploadTemplate = function (props) {
     var onChange = props.onChange, _a = props.acceptMultiple, acceptMultiple = _a === void 0 ? true : _a, acceptType = props.acceptType, _b = props.label, label = _b === void 0 ? 'Choose a file' : _b, _c = props.subtitle, subtitle = _c === void 0 ? 'or drag & drop it here.' : _c, children = props.children;
     (0, utils_1.useTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Upload_1.default, { className: 'iui-icon', "aria-hidden": true }),
+        react_1.default.createElement(utils_1.SvgUpload, { className: 'iui-icon', "aria-hidden": true }),
         react_1.default.createElement("div", { className: 'iui-template-text' },
             react_1.default.createElement("label", { className: 'iui-anchor' },
                 react_1.default.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),

package/cjs/core/Header/Header.js

@@ -30,7 +30,6 @@ exports.Header = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var MoreVertical_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/MoreVertical"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../Buttons");
@@ -71,7 +70,7 @@ var Header = function (props) {
     var appLogo = props.appLogo, breadcrumbs = props.breadcrumbs, _a = props.isSlim, isSlim = _a === void 0 ? false : _a, actions = props.actions, userIcon = props.userIcon, menuItems = props.menuItems, translatedStrings = props.translatedStrings, className = props.className, children = props.children, rest = __rest(props, ["appLogo", "breadcrumbs", "isSlim", "actions", "userIcon", "menuItems", "translatedStrings", "className", "children"]);
     (0, utils_1.useTheme)();
     var headerTranslations = __assign(__assign({}, defaultTranslations), translatedStrings);
-    return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', { 'iui-slim': isSlim }, className) }, rest),
+    return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined }, rest),
         react_1.default.createElement("div", { className: 'iui-page-header-left' },
             appLogo,
             breadcrumbs && react_1.default.createElement("div", { className: 'iui-page-header-divider' }),
@@ -82,7 +81,7 @@ var Header = function (props) {
             userIcon,
             menuItems && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems },
                 react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
-                    react_1.default.createElement(MoreVertical_1.default, { "aria-hidden": true })))))));
+                    react_1.default.createElement(utils_1.SvgMoreVertical, { "aria-hidden": true })))))));
 };
 exports.Header = Header;
 exports.default = exports.Header;

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -39,7 +39,6 @@ exports.HeaderBreadcrumbs = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
@@ -60,7 +59,7 @@ var HeaderBreadcrumbs = function (props) {
         react_1.default.createElement("ol", { className: 'iui-header-breadcrumbs-list' }, items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
             current,
             index !== items.length - 1 && (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', key: index },
-                react_1.default.createElement(ChevronRight_1.default, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' }))),
+                react_1.default.createElement(utils_1.SvgChevronRight, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' }))),
         ], false); }, []))));
 };
 exports.HeaderBreadcrumbs = HeaderBreadcrumbs;

package/cjs/core/Header/HeaderDropdownButton.js

@@ -33,10 +33,7 @@ exports.HeaderDropdownButton = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var DropdownMenu_1 = require("../DropdownMenu");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
-var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../utils");
-var utils_2 = require("../utils");
 var HeaderBasicButton_1 = require("./HeaderBasicButton");
 exports.HeaderDropdownButton = react_1.default.forwardRef(function (props, ref) {
     var menuItems = props.menuItems, className = props.className, children = props.children, rest = __rest(props, ["menuItems", "className", "children"]);
@@ -44,13 +41,13 @@ exports.HeaderDropdownButton = react_1.default.forwardRef(function (props, ref)
     var _a = react_1.default.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
     var _b = react_1.default.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
     var buttonRef = react_1.default.useRef(null);
-    var refs = (0, utils_2.useMergedRefs)(ref, buttonRef);
+    var refs = (0, utils_1.useMergedRefs)(ref, buttonRef);
     react_1.default.useEffect(function () {
         if (buttonRef.current) {
             setMenuWidth(buttonRef.current.offsetWidth);
         }
     }, [children]);
     return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        react_1.default.createElement(HeaderBasicButton_1.HeaderBasicButton, __assign({ className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (react_1.default.createElement(CaretUpSmall_1.default, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (react_1.default.createElement(CaretDownSmall_1.default, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) }, rest), children)));
+        react_1.default.createElement(HeaderBasicButton_1.HeaderBasicButton, __assign({ className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) }, rest), children)));
 });
 exports.default = exports.HeaderDropdownButton;

package/cjs/core/Header/HeaderSplitButton.js

@@ -33,8 +33,6 @@ exports.HeaderSplitButton = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var DropdownMenu_1 = require("../DropdownMenu");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
-var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../utils");
 var HeaderBasicButton_1 = require("./HeaderBasicButton");
 exports.HeaderSplitButton = react_1.default.forwardRef(function (props, forwardedRef) {
@@ -51,6 +49,6 @@ exports.HeaderSplitButton = react_1.default.forwardRef(function (props, forwarde
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), style: style, title: title, ref: ref },
         react_1.default.createElement(HeaderBasicButton_1.HeaderBasicButton, __assign({ ref: forwardedRef, disabled: disabled }, rest), children),
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
-            react_1.default.createElement("button", { className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (react_1.default.createElement(CaretUpSmall_1.default, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (react_1.default.createElement(CaretDownSmall_1.default, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+            react_1.default.createElement("button", { className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
 });
 exports.default = exports.HeaderSplitButton;

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -33,7 +33,6 @@ exports.InformationPanelHeader = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Buttons_1 = require("../Buttons");
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/information-panel.css");
 /**
@@ -60,7 +59,7 @@ var InformationPanelHeader = function (props) {
         react_1.default.createElement("div", { className: 'iui-information-header-actions' },
             actions,
             onClose && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true }))))));
+                react_1.default.createElement(utils_1.SvgCloseSmall, { "aria-hidden": true }))))));
 };
 exports.InformationPanelHeader = InformationPanelHeader;
 exports.default = exports.InformationPanelHeader;

package/cjs/core/Menu/MenuItem.js

@@ -34,7 +34,6 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
-var CaretRightSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretRightSmall"));
 var Menu_1 = require("./Menu");
 /**
  * Context used to provide menu item ref to sub-menu items.
@@ -100,7 +99,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement("span", { className: 'iui-content' },
             react_1.default.createElement("div", { className: 'iui-menu-label' }, children),
             sublabel && react_1.default.createElement("div", { className: 'iui-menu-description' }, sublabel)),
-        !badge && subMenuItems.length > 0 && (react_1.default.createElement(CaretRightSmall_1.default, { className: 'iui-icon' })),
+        !badge && subMenuItems.length > 0 && (react_1.default.createElement(utils_1.SvgCaretRightSmall, { className: 'iui-icon' })),
         badge &&
             react_1.default.cloneElement(badge, {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -30,8 +30,6 @@ exports.ProgressRadial = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var CheckmarkSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CheckmarkSmall"));
-var ImportantSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ImportantSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
@@ -56,8 +54,8 @@ var ProgressRadial = function (props) {
     var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, status = props.status, children = props.children, _d = props.size, size = _d === void 0 ? '' : _d, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "status", "children", "size", "className", "style"]);
     (0, utils_1.useTheme)();
     var statusMap = {
-        negative: react_1.default.createElement(ImportantSmall_1.default, { "aria-hidden": true }),
-        positive: react_1.default.createElement(CheckmarkSmall_1.default, { "aria-hidden": true }),
+        negative: react_1.default.createElement(utils_1.SvgImportantSmall, { "aria-hidden": true }),
+        positive: react_1.default.createElement(utils_1.SvgCheckmarkSmall, { "aria-hidden": true }),
     };
     var fillStyle = {
         strokeDashoffset: status === 'positive'

package/cjs/core/Select/Select.js

@@ -36,7 +36,6 @@ var DropdownMenu_1 = require("../DropdownMenu");
 var MenuItem_1 = require("../Menu/MenuItem");
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/select.css");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 var SelectTag_1 = __importDefault(require("./SelectTag"));
 var isMultipleEnabled = function (variable, multiple) {
     return multiple;
@@ -194,7 +193,7 @@ var Select = function (props) {
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
             }), onClick: function () { return !disabled && toggle(); } },
-            react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true }))));
+            react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true }))));
 };
 exports.Select = Select;
 var SingleSelectButton = function (_a) {

package/cjs/core/SideNavigation/SideNavigation.js

@@ -33,7 +33,6 @@ exports.SideNavigation = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var Buttons_1 = require("../Buttons");
 var Tooltip_1 = require("../Tooltip");
 require("@itwin/itwinui-css/css/side-navigation.css");
@@ -62,7 +61,7 @@ var SideNavigation = function (props) {
             _setIsExpanded(function (expanded) { return !expanded; });
             onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
         }, [onExpanderClick]) },
-        react_1.default.createElement(ChevronRight_1.default, null)));
+        react_1.default.createElement(utils_1.SvgChevronRight, null)));
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-side-navigation-wrapper', className) }, rest),
         react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation', {
                 'iui-expanded': _isExpanded,

package/cjs/core/Surface/Surface.d.ts

@@ -4,7 +4,6 @@ import '@itwin/itwinui-css/css/surface.css';
 export declare type SurfaceProps = {
     /**
      * Sets the elevation of the surface
-     * @default 0
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
     /**
@@ -21,7 +20,6 @@ export declare type SurfaceProps = {
 export declare const Surface: React.ForwardRefExoticComponent<{
     /**
      * Sets the elevation of the surface
-     * @default 0
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
     /**

package/cjs/core/Surface/Surface.js

@@ -39,18 +39,20 @@ require("@itwin/itwinui-css/css/surface.css");
  */
 var getSurfaceElevationValue = function (elevation) {
     switch (elevation) {
+        case 0:
+            return 'none';
         case 1:
-            return '0 1px 5px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-1)';
         case 2:
-            return '0 1px 10px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-2)';
         case 3:
-            return '0 3px 14px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-3)';
         case 4:
-            return '0 6px 30px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-4)';
         case 5:
-            return '0 9px 46px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-5)';
         default:
-            return 'none';
+            return '';
     }
 };
 /**
@@ -60,7 +62,7 @@ var getSurfaceElevationValue = function (elevation) {
  * <Surface elevation={2}>Surface Content</Surface>
  */
 exports.Surface = react_1.default.forwardRef(function (props, ref) {
-    var _a = props.elevation, elevation = _a === void 0 ? 0 : _a, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
+    var elevation = props.elevation, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
     (0, utils_1.useTheme)();
     var _style = __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref }, rest), children));

package/cjs/core/Table/SubRowExpander.js

@@ -9,14 +9,14 @@ exports.SubRowExpander = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var utils_1 = require("../utils");
 var Buttons_1 = require("../Buttons");
 var SubRowExpander = function (props) {
     var cell = props.cell, isDisabled = props.isDisabled, cellProps = props.cellProps, expanderCell = props.expanderCell;
     return (react_1.default.createElement(react_1.default.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (react_1.default.createElement(Buttons_1.IconButton, { style: { marginRight: 8 }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
-        }, disabled: isDisabled }, react_1.default.createElement(ChevronRight_1.default, { style: {
+        }, disabled: isDisabled }, react_1.default.createElement(utils_1.SvgChevronRight, { style: {
             transform: cell.row.isExpanded ? 'rotate(90deg)' : undefined,
         } })))));
 };

package/cjs/core/Table/Table.js

@@ -36,8 +36,6 @@ var react_table_1 = require("react-table");
 var ProgressIndicators_1 = require("../ProgressIndicators");
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/table.css");
-var SortDown_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SortDown"));
-var SortUp_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SortUp"));
 var utils_2 = require("./utils");
 var TableRowMemoized_1 = require("./TableRowMemoized");
 var filters_1 = require("./filters");
@@ -424,7 +422,7 @@ var Table = function (props) {
                                 showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
                                 showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column })),
                                 showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
-                                    (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-table-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-table-sort', "aria-hidden": true })))))),
+                                    (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(utils_1.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
                                 (index !== headerGroup.headers.length - 1 ||

package/cjs/core/Table/TablePaginator.js

@@ -33,8 +33,6 @@ exports.TablePaginator = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var Buttons_1 = require("../Buttons");
 var ProgressIndicators_1 = require("../ProgressIndicators");
 var Menu_1 = require("../Menu");
@@ -160,7 +158,7 @@ var TablePaginator = function (props) {
         react_1.default.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (react_1.default.createElement("span", null, "".concat(totalSelectedRowsCount, " ").concat(totalSelectedRowsCount === 1 ? 'row' : 'rows', " selected")))),
         showPagesList && (react_1.default.createElement("div", { className: 'iui-center', ref: overflowRef },
             react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
-                react_1.default.createElement(ChevronLeft_1.default, null)),
+                react_1.default.createElement(utils_1.SvgChevronLeft, null)),
             react_1.default.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (function () {
                 if (hasNoRows) {
                     return noRowsContent;
@@ -181,7 +179,7 @@ var TablePaginator = function (props) {
                         react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true, size: 'small' })))));
             })()),
             react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: function () { return onPageChange(currentPage + 1); }, size: buttonSize, "aria-label": localization.nextPage },
-                react_1.default.createElement(ChevronRight_1.default, null)))),
+                react_1.default.createElement(utils_1.SvgChevronRight, null)))),
         react_1.default.createElement("div", { className: 'iui-right' }, showPageSizeList && (react_1.default.createElement(react_1.default.Fragment, null,
             localization.rowsPerPageLabel !== null &&
                 paginatorWidth >= 1024 && (react_1.default.createElement("span", { className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),

package/cjs/core/Table/columns/actionColumn.js

@@ -21,7 +21,7 @@ exports.ActionColumn = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var Checkbox_1 = require("../../Checkbox");
-var ColumnManager_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ColumnManager"));
+var utils_1 = require("../../utils");
 var DropdownMenu_1 = require("../../DropdownMenu");
 var IconButton_1 = require("../../Buttons/IconButton");
 var Menu_1 = require("../../Menu");
@@ -115,7 +115,7 @@ var ActionColumn = function (_a) {
                     (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
                 }, className: (0, classnames_1.default)('iui-scroll', dropdownMenuProps.className) }),
                 react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
-                    react_1.default.createElement(ColumnManager_1.default, null))));
+                    react_1.default.createElement(utils_1.SvgColumnManager, null))));
         },
     };
 };

package/cjs/core/Table/columns/expanderColumn.js

@@ -20,7 +20,7 @@ exports.ExpanderColumn = exports.EXPANDER_CELL_ID = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var utils_1 = require("../../utils");
 var Buttons_1 = require("../../Buttons");
 var cells_1 = require("../cells");
 exports.EXPANDER_CELL_ID = 'iui-table-expander';
@@ -72,7 +72,7 @@ var ExpanderColumn = function (props) {
                 return (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
                         e.stopPropagation();
                         row.toggleRowExpanded();
-                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, react_1.default.createElement(ChevronRight_1.default, null)));
+                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, react_1.default.createElement(utils_1.SvgChevronRight, null)));
             }
         },
         cellRenderer: function (props) { return (react_1.default.createElement(cells_1.DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },