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

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -30,7 +30,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var Calendar_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Calendar"));
 var utils_1 = require("../../../utils");
 var LabeledInput_1 = require("../../../LabeledInput");
 var DatePicker_1 = require("../../../DatePicker");
@@ -70,6 +69,6 @@ var DatePickerInput = function (props) {
             }
         }, appendTo: 'parent' },
         react_1.default.createElement(LabeledInput_1.LabeledInput, __assign({ displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: function () { return setIsVisible(function (v) { return !v; }); }, ref: buttonRef },
-                react_1.default.createElement(Calendar_1.default, null)) }, rest))));
+                react_1.default.createElement(utils_1.SvgCalendar, null)) }, rest))));
 };
 exports.default = DatePickerInput;

package/cjs/core/Table/filters/FilterToggle.js

@@ -30,8 +30,6 @@ exports.FilterToggle = 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 FilterHollow_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/FilterHollow"));
-var Filter_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Filter"));
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
@@ -59,6 +57,6 @@ var FilterToggle = function (props) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort
                 e.stopPropagation();
-            } }, rest), isColumnFiltered ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
+            } }, rest), isColumnFiltered ? react_1.default.createElement(utils_1.SvgFilter, null) : react_1.default.createElement(utils_1.SvgFilterHollow, null))))));
 };
 exports.FilterToggle = FilterToggle;

package/cjs/core/Tabs/Tabs.d.ts

@@ -1,5 +1,22 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/tabs.css';
+declare type TabsOrientationProps = {
+    /**
+     * Orientation of the tabs.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal';
+    /**
+     * Type of the tabs.
+     *
+     * If `orientation = 'vertical'`, `pill` is not applicable.
+     * @default 'default'
+     */
+    type?: 'default' | 'borderless' | 'pill';
+} | {
+    orientation: 'vertical';
+    type?: 'default' | 'borderless';
+};
 export declare type TabsProps = {
     /**
      * Elements shown for each tab.
@@ -25,16 +42,6 @@ export declare type TabsProps = {
      * @default 'blue'
      */
     color?: 'blue' | 'green';
-    /**
-     * Type of the tabs.
-     * @default 'default'
-     */
-    type?: 'default' | 'borderless' | 'pill';
-    /**
-     * Orientation of the tabs.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
     /**
      * Custom CSS class name for tabs.
      */
@@ -51,8 +58,14 @@ export declare type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-};
+} & TabsOrientationProps;
+/**
+ * @deprecated Since v2, use `TabProps` with `Tabs`
+ */
 export declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
+/**
+ * @deprecated Since v2, use `TabProps` with `Tabs`
+ */
 export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
     type?: 'default' | 'borderless';
 };
@@ -67,6 +80,9 @@ export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'>
  * <Tabs labels={tabs} />
  *
  * @example
+ * <Tabs orientation='vertical' labels={tabs} />
+ *
+ * @example
  * const tabsWithSublabels = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
@@ -82,6 +98,8 @@ export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'>
  */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
@@ -93,12 +111,14 @@ export declare const Tabs: (props: TabsProps) => JSX.Element;
  */
 export declare const HorizontalTabs: (props: HorizontalTabsProps) => JSX.Element;
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3'  sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
+ *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */

package/cjs/core/Tabs/Tabs.js

@@ -46,6 +46,9 @@ var Tab_1 = require("./Tab");
  * <Tabs labels={tabs} />
  *
  * @example
+ * <Tabs orientation='vertical' labels={tabs} />
+ *
+ * @example
  * const tabsWithSublabels = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
@@ -199,6 +202,8 @@ var Tabs = function (props) {
 };
 exports.Tabs = Tabs;
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
@@ -211,12 +216,14 @@ exports.Tabs = Tabs;
 var HorizontalTabs = function (props) { return (react_1.default.createElement(exports.Tabs, __assign({ orientation: 'horizontal' }, props))); };
 exports.HorizontalTabs = HorizontalTabs;
 /**
+ * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
+ *
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
  * const tabs = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3'  sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
+ *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */

package/cjs/core/Tabs/index.d.ts

@@ -1,4 +1,4 @@
-export { VerticalTabs, HorizontalTabs } from './Tabs';
-export type { VerticalTabsProps, HorizontalTabsProps } from './Tabs';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
+export type { TabsProps, VerticalTabsProps, HorizontalTabsProps } from './Tabs';
 export { Tab } from './Tab';
 export type { TabProps } from './Tab';

package/cjs/core/Tabs/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.HorizontalTabs = exports.VerticalTabs = void 0;
+exports.Tab = exports.HorizontalTabs = exports.VerticalTabs = exports.Tabs = 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 Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
 Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_1.HorizontalTabs; } });
 var Tab_1 = require("./Tab");

package/cjs/core/Tag/Tag.js

@@ -32,7 +32,6 @@ exports.Tag = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tag.css");
 var Buttons_1 = require("../Buttons");
@@ -51,7 +50,7 @@ var Tag = function (props) {
         }, className) }, rest),
         variant === 'default' ? (react_1.default.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
         onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
-            react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true })))));
+            react_1.default.createElement(utils_1.SvgCloseSmall, { "aria-hidden": true })))));
 };
 exports.Tag = Tag;
 exports.default = exports.Tag;

package/cjs/core/Tile/Tile.js

@@ -32,9 +32,6 @@ exports.Tile = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
-var More_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/More"));
-var New_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/New"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tile.css");
 var DropdownMenu_1 = require("../DropdownMenu");
@@ -111,7 +108,7 @@ var Tile = function (props) {
                         'iui-visible': isMenuVisible,
                     }) },
                     react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                        react_1.default.createElement(More_1.default, null))))),
+                        react_1.default.createElement(utils_1.SvgMore, null))))),
             children),
         buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
@@ -123,10 +120,10 @@ var TitleIcon = function (_a) {
         return (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
     }
     if (isSelected) {
-        return react_1.default.createElement(Checkmark_1.default, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        return react_1.default.createElement(utils_1.SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
     }
     if (isNew) {
-        return react_1.default.createElement(New_1.default, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        return react_1.default.createElement(utils_1.SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
     }
     if (StatusIcon) {
         return react_1.default.createElement(StatusIcon, { className: 'iui-tile-status-icon' });

package/cjs/core/Toast/Toast.js

@@ -32,7 +32,6 @@ exports.ToastPresentation = exports.Toast = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var react_transition_group_1 = require("react-transition-group");
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/toast.css");
@@ -145,7 +144,7 @@ var ToastPresentation = function (props) {
         react_1.default.createElement("div", { className: 'iui-message' }, content),
         link && (react_1.default.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-            react_1.default.createElement(CloseSmall_1.default, null)))));
+            react_1.default.createElement(utils_1.SvgCloseSmall, null)))));
 };
 exports.ToastPresentation = ToastPresentation;
 exports.default = exports.Toast;

package/cjs/core/Tree/TreeNodeExpander.js

@@ -32,13 +32,13 @@ exports.TreeNodeExpander = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var utils_1 = require("../utils");
 var IconButton_1 = require("../Buttons/IconButton");
 require("@itwin/itwinui-css/css/tree.css");
 var TreeNodeExpander = function (props) {
     var isExpanded = props.isExpanded, rest = __rest(props, ["isExpanded"]);
     return (react_1.default.createElement(IconButton_1.IconButton, __assign({ styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand' }, rest),
-        react_1.default.createElement(ChevronRight_1.default, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
+        react_1.default.createElement(utils_1.SvgChevronRight, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 };

package/cjs/core/Typography/Body/Body.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/text.css';
+/**
+ * @deprecated Since v2, use `Text` with variant 'body'.
+ */
 export declare type BodyProps = {
     /**
      * Set text to muted.
@@ -13,10 +16,9 @@ export declare type BodyProps = {
     isSkeleton?: boolean;
 } & React.HTMLAttributes<HTMLParagraphElement>;
 /**
- * Body text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'body'.
  * @example
- * <Body>I'm some body text!</Body>
- * <Body isMuted>I'm some muted body text.</Body>
+ * <Text variant='body' as='p'>I'm some body text!</Text>
  */
 export declare const Body: React.ForwardRefExoticComponent<{
     /**

package/cjs/core/Typography/Body/Body.js

@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
- * Body text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'body'.
  * @example
- * <Body>I'm some body text!</Body>
- * <Body isMuted>I'm some muted body text.</Body>
+ * <Text variant='body' as='p'>I'm some body text!</Text>
  */
 exports.Body = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, _b = props.isSkeleton, isSkeleton = _b === void 0 ? false : _b, rest = __rest(props, ["className", "isMuted", "isSkeleton"]);

package/cjs/core/Typography/Headline/Headline.d.ts

@@ -8,10 +8,9 @@ export declare type HeadlineProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The biggest title on the page, renders a h1 element
+ * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example
- * <Headline>I'm a headline!</Headline>
- * <Headline isMuted>I'm a muted headline.</Headline>
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
  */
 export declare const Headline: React.ForwardRefExoticComponent<{
     /**

package/cjs/core/Typography/Headline/Headline.js

@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
- * The biggest title on the page, renders a h1 element
+ * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example
- * <Headline>I'm a headline!</Headline>
- * <Headline isMuted>I'm a muted headline.</Headline>
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
  */
 exports.Headline = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/cjs/core/Typography/Leading/Leading.d.ts

@@ -8,10 +8,9 @@ export declare type LeadingProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example
- * <Leading>I'm a Leading!</Leading>
- * <Leading isMuted>I'm a muted Leading.</Leading>
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
  */
 export declare const Leading: React.ForwardRefExoticComponent<{
     /**

package/cjs/core/Typography/Leading/Leading.js

@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example
- * <Leading>I'm a Leading!</Leading>
- * <Leading isMuted>I'm a muted Leading.</Leading>
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
  */
 exports.Leading = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/cjs/core/Typography/Small/Small.d.ts

@@ -8,10 +8,9 @@ export declare type SmallProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLParagraphElement>;
 /**
- * Small text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'small'.
  * @example
- * <Small>I'm some small text!</Small>
- * <Small isMuted>I'm some muted small text.</Small>
+ * <Text variant='small' as='small'>I'm some small text!</Text>
  */
 export declare const Small: React.ForwardRefExoticComponent<{
     /**

package/cjs/core/Typography/Small/Small.js

@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
- * Small text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'small'.
  * @example
- * <Small>I'm some small text!</Small>
- * <Small isMuted>I'm some muted small text.</Small>
+ * <Text variant='small' as='small'>I'm some small text!</Text>
  */
 exports.Small = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/cjs/core/Typography/Subheading/Subheading.d.ts

@@ -8,10 +8,9 @@ export declare type SubheadingProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example
- * <Subheading>I'm a subheading!</Subheading>
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
  */
 export declare const Subheading: React.ForwardRefExoticComponent<{
     /**

package/cjs/core/Typography/Subheading/Subheading.js

@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example
- * <Subheading>I'm a subheading!</Subheading>
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
  */
 exports.Subheading = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/cjs/core/Typography/Text/Text.d.ts

@@ -30,6 +30,8 @@ export declare type TextProps<T extends React.ElementType = 'div'> = Polymorphic
 declare type TextComponent = PolymorphicForwardRefComponent<'div', TextOwnProps>;
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
+ *
  * @example
  * <Text>Some normal paragraph text rendered as a div</Text>
  * @example

package/cjs/core/Typography/Text/Text.js

@@ -36,6 +36,8 @@ var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
+ *
  * @example
  * <Text>Some normal paragraph text rendered as a div</Text>
  * @example

package/cjs/core/Typography/Title/Title.d.ts

@@ -8,10 +8,9 @@ export declare type TitleProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The second biggest title on the page, renders a h2 element
+ * @deprecated Since v2, use `Text` with variant 'title'.
  * @example
- * <Title>I'm a title!</Title>
- * <Title isMuted>I'm a muted title.</Title>
+ * <Text variant='title' as='h2'>I'm a title!</Text>
  */
 export declare const Title: React.ForwardRefExoticComponent<{
     /**

package/cjs/core/Typography/Title/Title.js

@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
- * The second biggest title on the page, renders a h2 element
+ * @deprecated Since v2, use `Text` with variant 'title'.
  * @example
- * <Title>I'm a title!</Title>
- * <Title isMuted>I'm a muted title.</Title>
+ * <Text variant='title' as='h2'>I'm a title!</Text>
  */
 exports.Title = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/cjs/core/index.d.ts

@@ -40,7 +40,7 @@ export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
-export { VerticalTabs, Tab, HorizontalTabs } from './Tabs';
+export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';

package/cjs/core/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
-exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = void 0;
+exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
+exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -70,6 +70,7 @@ Object.defineProperty(exports, "HeaderButton", { enumerable: true, get: function
 Object.defineProperty(exports, "HeaderLogo", { enumerable: true, get: function () { return Header_1.HeaderLogo; } });
 var Tabs_1 = require("./Tabs");
 Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });
 Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_1.HorizontalTabs; } });
 var InformationPanel_1 = require("./InformationPanel");

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

@@ -2,7 +2,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/cjs/core/utils/components/index.js

@@ -22,7 +22,6 @@ __exportStar(require("./Popover"), exports);
 __exportStar(require("./Resizer"), exports);
 __exportStar(require("./FocusTrap"), exports);
 __exportStar(require("./InputContainer"), exports);
-__exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
 __exportStar(require("./MiddleTextTruncation"), exports);
 __exportStar(require("./VirtualScroll"), exports);

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

@@ -1,15 +1,15 @@
 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";

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

@@ -6,17 +6,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUserColor = exports.isSoftBackground = exports.SoftBackgrounds = void 0;
 exports.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 */
 var isSoftBackground = function (value) {

package/cjs/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;