@itwin/itwinui-react 1.23.1 → 1.26.0

package/esm/core/InformationPanel/InformationPanelContent.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
+export declare type InformationPanelContentProps = {
+    /**
+     * If set to 'inline', the label/input pairs will be shown on the same line.
+     * The component handles the spacing and alignment automatically.
+     *
+     * @default 'default'
+     */
+    displayStyle?: 'default' | 'inline';
+    /**
+     * Content of the component.
+     * Should ideally be pairs of `Label` and input components.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * The `InformationPanelContent` component should be used inside `InformationPanelBody`
+ * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
+ * and the value can be any input element (including readonly inputs for non-modifiable fields).
+ *
+ * By default, the pairs are displayed of label and input are displayed  in separate lines,
+ * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
+ *
+ * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
+ * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
+ *
+ * @example
+ * <InformationPanelContent displayStyle='inline'>
+ *   <Label htmlFor='name-input'>File name</Label>
+ *   <Input id='name-input' value='Alpha.mp3' />
+ *
+ *   <Label htmlFor='year-input'>Year</Label>
+ *   <Input id='year-input' value='2021' />
+ *
+ *   <Label htmlFor='path-input'>Path</Label>
+ *   <Input id='path-input' value='/Shared/Music/' />
+ * </InformationPanelContent>
+ */
+export declare const InformationPanelContent: (props: InformationPanelContentProps) => JSX.Element;
+export default InformationPanelContent;

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -0,0 +1,59 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
+/**
+ * The `InformationPanelContent` component should be used inside `InformationPanelBody`
+ * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
+ * and the value can be any input element (including readonly inputs for non-modifiable fields).
+ *
+ * By default, the pairs are displayed of label and input are displayed  in separate lines,
+ * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
+ *
+ * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
+ * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
+ *
+ * @example
+ * <InformationPanelContent displayStyle='inline'>
+ *   <Label htmlFor='name-input'>File name</Label>
+ *   <Input id='name-input' value='Alpha.mp3' />
+ *
+ *   <Label htmlFor='year-input'>Year</Label>
+ *   <Input id='year-input' value='2021' />
+ *
+ *   <Label htmlFor='path-input'>Path</Label>
+ *   <Input id='path-input' value='/Shared/Music/' />
+ * </InformationPanelContent>
+ */
+export var InformationPanelContent = function (props) {
+    var className = props.className, _a = props.displayStyle, displayStyle = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "displayStyle", "children"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className) }, rest), children));
+};
+export default InformationPanelContent;

package/esm/core/InformationPanel/index.d.ts

@@ -8,3 +8,5 @@ export { InformationPanelHeader } from './InformationPanelHeader';
 export type { InformationPanelHeaderProps } from './InformationPanelHeader';
 export { InformationPanelBody } from './InformationPanelBody';
 export type { InformationPanelBodyProps } from './InformationPanelBody';
+export { InformationPanelContent } from './InformationPanelContent';
+export type { InformationPanelContentProps } from './InformationPanelContent';

package/esm/core/InformationPanel/index.js

@@ -7,3 +7,4 @@ export default './InformationPanel';
 export { InformationPanelWrapper } from './InformationPanelWrapper';
 export { InformationPanelHeader } from './InformationPanelHeader';
 export { InformationPanelBody } from './InformationPanelBody';
+export { InformationPanelContent } from './InformationPanelContent';

package/esm/core/Label/Label.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/inputs.css';
+declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
+    /**
+     * What element should the label be rendered as?
+     * @default 'label'
+     */
+    as?: T;
+    /**
+     * Set the display style of the label.
+     *   - 'block' - default, no extra spacing (label and input will be on separate lines)
+     *   - 'inline' - label gets a right margin so it can be placed inline
+     * @default 'block'
+     */
+    displayStyle?: 'block' | 'inline';
+    /**
+     * Set to true if the label's associated input is required.
+     * This adds an asterisk next to the label text.
+     */
+    required?: boolean;
+};
+export declare type LabelProps<T extends React.ElementType = 'label'> = LabelOwnProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof LabelOwnProps<T>>;
+/**
+ * A standalone label to be used with input components (using `htmlFor`).
+ * Can be rendered as any element, e.g. span, using the `as` prop.
+ * @example
+ * <Label htmlFor='name-input'>Name</Label>
+ * <Input id='name-input' />
+ */
+export declare const Label: <T extends React.ElementType<any> = "label">(props: LabelProps<T>) => JSX.Element;
+export default Label;

package/esm/core/Label/Label.js

@@ -0,0 +1,46 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
+/**
+ * A standalone label to be used with input components (using `htmlFor`).
+ * Can be rendered as any element, e.g. span, using the `as` prop.
+ * @example
+ * <Label htmlFor='name-input'>Name</Label>
+ * <Input id='name-input' />
+ */
+export var Label = function (props) {
+    var _a = props.as, Element = _a === void 0 ? 'label' : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'block' : _b, required = props.required, className = props.className, children = props.children, rest = __rest(props, ["as", "displayStyle", "required", "className", "children"]);
+    useTheme();
+    return (React.createElement(Element, __assign({ className: cx('iui-input-label', {
+            'iui-inline': displayStyle === 'inline',
+            'iui-required': required,
+        }, className) }, rest), children));
+};
+export default Label;

package/esm/core/Label/index.d.ts

@@ -0,0 +1,4 @@
+export { Label } from './Label';
+export type { LabelProps } from './Label';
+declare const _default: "./Label";
+export default _default;

package/esm/core/Label/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Label } from './Label';
+export default './Label';

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -84,7 +84,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
-    displayStyle?: "default" | "inline" | undefined;
+    displayStyle?: "inline" | "default" | undefined;
     /**
      * Set display style of icon.
      * Supported values:
@@ -93,7 +93,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
      */
-    iconDisplayStyle?: "inline" | "block" | undefined;
+    iconDisplayStyle?: "block" | "inline" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -66,7 +66,7 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
      * Custom style for textarea.
      */
     textareaStyle?: React.CSSProperties | undefined;
-} & Pick<LabeledInputProps, "svgIcon" | "displayStyle" | "iconDisplayStyle"> & {
+} & Pick<LabeledInputProps, "displayStyle" | "svgIcon" | "iconDisplayStyle"> & {
     setFocus?: boolean | undefined;
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export default LabeledTextarea;

package/esm/core/Menu/MenuItem.d.ts

@@ -77,7 +77,7 @@ export declare const MenuItem: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
      */
-    size?: "large" | "default" | undefined;
+    size?: "default" | "large" | undefined;
     /**
      * Sub label shown below the main content of the item.
      */

package/esm/core/Table/TablePaginator.d.ts

@@ -67,5 +67,5 @@ export declare type TablePaginatorProps = {
  *   paginatorRenderer={(props) => <TablePaginator {...props} />}
  * />
  */
-export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element;
+export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element | null;
 export default TablePaginator;

package/esm/core/Table/TablePaginator.js

@@ -138,12 +138,17 @@ export var TablePaginator = function (props) {
         endPage = totalPagesCount;
     }
     var hasNoRows = totalPagesCount === 0;
+    var showPagesList = totalPagesCount > 1 || isLoading;
+    var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
     var ellipsis = (React.createElement("span", { className: cx('iui-ellipsis', { 'iui-small': size === 'small' }) }, "\u2026"));
     var noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
+    if (!showPagesList && !showPageSizeList) {
+        return null;
+    }
     return (React.createElement("div", __assign({ className: cx('iui-paginator', className) }, rest),
         React.createElement("div", { className: 'iui-left' }),
-        React.createElement("div", { className: 'iui-center', ref: overflowRef },
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0 || hasNoRows, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
+        showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
+            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(SvgChevronLeft, null)),
             React.createElement(ButtonGroup, { onKeyDown: onKeyDown, ref: pageListRef }, (function () {
                 if (hasNoRows) {
@@ -165,8 +170,8 @@ export var TablePaginator = function (props) {
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))));
             })()),
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: function () { return onPageChange(currentPage + 1); }, size: buttonSize, "aria-label": localization.nextPage },
-                React.createElement(SvgChevronRight, null))),
-        React.createElement("div", { className: 'iui-right' }, pageSizeList && onPageSizeChange && !!totalRowsCount && (React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: function (close) {
+                React.createElement(SvgChevronRight, null)))),
+        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: function (close) {
                 return pageSizeList.map(function (size) { return (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: function () {
                         close();
                         onPageSizeChange(size);

package/esm/core/Tabs/Tabs.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useResizeObserver, useMergedRefs, getBoundedValue, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, getWindow, useContainerWidth, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -54,45 +54,38 @@ import { Tab } from './Tab';
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 export var Tabs = function (props) {
-    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
+    var _a, _b, _c;
+    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
     useTheme();
     var tablistRef = React.useRef(null);
-    var _e = React.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _e[0], setTabsWidth = _e[1];
-    var updateTabsWidth = React.useCallback(function (_a) {
-        var width = _a.width;
-        return setTabsWidth(width);
-    }, []);
-    var tablistSizeRef = useResizeObserver(updateTabsWidth)[0];
+    var _h = useContainerWidth(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
     var refs = useMergedRefs(tablistRef, tablistSizeRef);
-    var _f = React.useState(function () {
+    var _j = React.useState(function () {
         return activeIndex != null
             ? getBoundedValue(activeIndex, 0, labels.length - 1)
             : 0;
-    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
+    }), currentActiveIndex = _j[0], setCurrentActiveIndex = _j[1];
     React.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex(getBoundedValue(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
-    var _g = React.useState({}), stripeStyle = _g[0], setStripeStyle = _g[1];
+    // CSS custom properties to place the active stripe
+    var _k = React.useState({}), stripeProperties = _k[0], setStripeProperties = _k[1];
     React.useLayoutEffect(function () {
-        var _a;
-        if (type !== 'default') {
-            var activeTab = (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.children[currentActiveIndex];
-            var activeTabRect = activeTab === null || activeTab === void 0 ? void 0 : activeTab.getBoundingClientRect();
-            setStripeStyle({
-                width: orientation === 'horizontal' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width : undefined,
-                height: orientation === 'vertical' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height : undefined,
-                left: orientation === 'horizontal'
-                    ? activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetLeft
-                    : (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width) - 2,
-                top: orientation === 'horizontal'
-                    ? (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height) - 2
-                    : activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetTop,
-            });
+        if (type !== 'default' && tablistRef.current != undefined) {
+            var activeTab = tablistRef.current.children[currentActiveIndex];
+            var activeTabRect = activeTab.getBoundingClientRect();
+            setStripeProperties(__assign(__assign({}, (orientation === 'horizontal' && {
+                '--stripe-width': activeTabRect.width + "px",
+                '--stripe-left': activeTab.offsetLeft + "px",
+            })), (orientation === 'vertical' && {
+                '--stripe-height': activeTabRect.height + "px",
+                '--stripe-top': activeTab.offsetTop + "px",
+            })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _h = React.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
+    var _l = React.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
     React.useEffect(function () {
         var _a;
         if (tablistRef.current && focusedIndex !== undefined) {
@@ -100,7 +93,7 @@ export var Tabs = function (props) {
             (_a = tab) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    var _j = React.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
+    var _m = React.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
     React.useLayoutEffect(function () {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
@@ -173,10 +166,12 @@ export var Tabs = function (props) {
                 break;
         }
     };
-    return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation) },
+    var isIE = !((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, '--stripe-width', '100px'));
+    return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation), style: stripeProperties },
         React.createElement("ul", __assign({ className: cx('iui-tabs', "iui-" + type, {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default',
+                'iui-animated': type !== 'default' && !isIE,
+                'iui-not-animated': isIE,
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
             var onClick = function () {
@@ -198,7 +193,6 @@ export var Tabs = function (props) {
                 },
             }))));
         })),
-        type !== 'default' && (React.createElement("div", { className: 'iui-tab-stripe', style: stripeStyle })),
         children && (React.createElement("div", { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 /**

package/esm/core/index.d.ts

@@ -32,10 +32,12 @@ export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
-export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
+export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
 export { Input } from './Input';
 export type { InputProps } from './Input';
+export { Label } from './Label';
+export type { LabelProps } from './Label';
 export { LabeledInput } from './LabeledInput';
 export type { LabeledInputProps } from './LabeledInput';
 export { InputGroup } from './InputGroup';
@@ -86,5 +88,5 @@ export { UserIconGroup } from './UserIconGroup';
 export type { UserIconGroupProps } from './UserIconGroup';
 export { Wizard } from './Wizard';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
-export type { ThemeType } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps } from './utils';

package/esm/core/index.js

@@ -19,8 +19,9 @@ export { FileUpload, FileUploadTemplate } from './FileUpload';
 export { Footer } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';
+export { Label } from './Label';
 export { LabeledInput } from './LabeledInput';
 export { InputGroup } from './InputGroup';
 export { LabeledSelect } from './LabeledSelect';
@@ -46,4 +47,4 @@ export { Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kb
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';
 export { Wizard } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';

package/esm/core/utils/color/ColorValue.d.ts

@@ -170,6 +170,7 @@ export declare class ColorValue {
     private static toHsv;
     /** True if the value of this ColorValue is the same as another ColorValue. */
     equals(other: ColorValue): boolean;
+    static getFormattedColorNumber(value: number, precision?: number): string;
     /** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
     toRgbString(includeAlpha?: boolean): string;
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */