@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/Footer/Footer.js

@@ -9,42 +9,42 @@ import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
 const footerTranslations = {
-  cookies: 'Cookies',
-  legalNotices: 'Legal notices',
-  privacy: 'Privacy',
-  termsOfService: 'Terms of service',
-  termsOfUse: 'Terms of use',
+    cookies: 'Cookies',
+    legalNotices: 'Legal notices',
+    privacy: 'Privacy',
+    termsOfService: 'Terms of service',
+    termsOfUse: 'Terms of use',
 };
 export const defaultFooterElements = [
-  {
-    key: 'copyright',
-    title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`,
-  },
-  {
-    key: 'termsOfService',
-    title: footerTranslations.termsOfService,
-    url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
-  },
-  {
-    key: 'privacy',
-    title: footerTranslations.privacy,
-    url: 'https://www.bentley.com/en/privacy-policy',
-  },
-  {
-    key: 'termsOfUse',
-    title: footerTranslations.termsOfUse,
-    url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
-  },
-  {
-    key: 'cookies',
-    title: footerTranslations.cookies,
-    url: 'https://www.bentley.com/en/cookie-policy',
-  },
-  {
-    key: 'legalNotices',
-    title: footerTranslations.legalNotices,
-    url: 'https://connect.bentley.com/Legal',
-  },
+    {
+        key: 'copyright',
+        title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`,
+    },
+    {
+        key: 'termsOfService',
+        title: footerTranslations.termsOfService,
+        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
+    },
+    {
+        key: 'privacy',
+        title: footerTranslations.privacy,
+        url: 'https://www.bentley.com/en/privacy-policy',
+    },
+    {
+        key: 'termsOfUse',
+        title: footerTranslations.termsOfUse,
+        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
+    },
+    {
+        key: 'cookies',
+        title: footerTranslations.cookies,
+        url: 'https://www.bentley.com/en/cookie-policy',
+    },
+    {
+        key: 'legalNotices',
+        title: footerTranslations.legalNotices,
+        url: 'https://connect.bentley.com/Legal',
+    },
 ];
 /**
  * Footer element with all needed legal and info links.
@@ -59,65 +59,34 @@ export const defaultFooterElements = [
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export const Footer = Object.assign(
-  (props) => {
-    const { children, customElements, translatedTitles, className, ...rest } =
-      props;
+export const Footer = Object.assign((props) => {
+    const { children, customElements, translatedTitles, className, ...rest } = props;
     const titles = { ...footerTranslations, ...translatedTitles };
     const translatedElements = defaultFooterElements.map((element) => {
-      if (element.key && titles.hasOwnProperty(element.key)) {
-        const key = element.key;
-        return {
-          ...element,
-          title: titles[key],
-        };
-      }
-      return element;
+        if (element.key && titles.hasOwnProperty(element.key)) {
+            const key = element.key;
+            return {
+                ...element,
+                title: titles[key],
+            };
+        }
+        return element;
     });
     let elements = translatedElements;
     if (customElements) {
-      elements =
-        typeof customElements === 'function'
-          ? customElements(translatedElements)
-          : [...translatedElements, ...customElements];
+        elements =
+            typeof customElements === 'function'
+                ? customElements(translatedElements)
+                : [...translatedElements, ...customElements];
     }
-    return React.createElement(
-      Box,
-      { as: 'footer', className: cx('iui-legal-footer', className), ...rest },
-      children
-        ? children
-        : React.createElement(
-            FooterList,
-            null,
-            elements.map((element, index) => {
-              return React.createElement(
-                React.Fragment,
-                { key: element.key || `${element.title}-${index}` },
-                index > 0 && React.createElement(FooterSeparator, null),
-                React.createElement(
-                  FooterItem,
-                  null,
-                  element.url
-                    ? React.createElement(
-                        'a',
-                        {
-                          href: element.url,
-                          target: '_blank',
-                          rel: 'noreferrer',
-                        },
-                        element.title,
-                      )
-                    : element.title,
-                ),
-              );
-            }),
-          ),
-    );
-  },
-  {
+    return (React.createElement(Box, { as: 'footer', className: cx('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList, null, elements.map((element, index) => {
+        return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
+            index > 0 && React.createElement(FooterSeparator, null),
+            React.createElement(FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
+    })))));
+}, {
     List: FooterList,
     Item: FooterItem,
     Separator: FooterSeparator,
-  },
-);
+});
 export default Footer;

package/esm/core/Footer/FooterSeparator.js

@@ -7,6 +7,6 @@ import { polymorphic } from '../utils/index.js';
  * Footer separator. Recommended to use inside `Footer.List`.
  */
 export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
-  'aria-hidden': true,
+    'aria-hidden': true,
 });
 export default FooterSeparator;

package/esm/core/Header/Header.js

@@ -8,7 +8,7 @@ import { IconButton } from '../Buttons/IconButton.js';
 import { SvgMoreVertical, Box } from '../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 const defaultTranslations = {
-  moreOptions: 'More options',
+    moreOptions: 'More options',
 };
 /**
  * Application header
@@ -38,59 +38,18 @@ const defaultTranslations = {
  * />
  */
 export const Header = React.forwardRef((props, forwardedRef) => {
-  const {
-    appLogo,
-    breadcrumbs,
-    isSlim = false,
-    actions,
-    menuItems,
-    translatedStrings,
-    className,
-    children,
-    ...rest
-  } = props;
-  const headerTranslations = { ...defaultTranslations, ...translatedStrings };
-  return React.createElement(
-    Box,
-    {
-      as: 'header',
-      className: cx('iui-page-header', className),
-      'data-iui-size': isSlim ? 'slim' : undefined,
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      { className: 'iui-page-header-left' },
-      appLogo,
-      breadcrumbs &&
-        React.createElement(Box, { className: 'iui-page-header-divider' }),
-      breadcrumbs,
-    ),
-    children &&
-      React.createElement(
-        Box,
-        { className: 'iui-page-header-center' },
-        children,
-      ),
-    React.createElement(
-      Box,
-      { className: 'iui-page-header-right' },
-      actions,
-      menuItems &&
-        React.createElement(
-          DropdownMenu,
-          { menuItems: menuItems },
-          React.createElement(
-            IconButton,
-            {
-              styleType: 'borderless',
-              'aria-label': headerTranslations.moreOptions,
-            },
-            React.createElement(SvgMoreVertical, { 'aria-hidden': true }),
-          ),
-        ),
-    ),
-  );
+    const { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
+    const headerTranslations = { ...defaultTranslations, ...translatedStrings };
+    return (React.createElement(Box, { as: 'header', className: cx('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-page-header-left' },
+            appLogo,
+            breadcrumbs && React.createElement(Box, { className: 'iui-page-header-divider' }),
+            breadcrumbs),
+        children && React.createElement(Box, { className: 'iui-page-header-center' }, children),
+        React.createElement(Box, { className: 'iui-page-header-right' },
+            actions,
+            menuItems && (React.createElement(DropdownMenu, { menuItems: menuItems },
+                React.createElement(IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
+                    React.createElement(SvgMoreVertical, { "aria-hidden": true })))))));
 });
 export default Header;

package/esm/core/Header/HeaderBasicButton.js

@@ -6,20 +6,12 @@ import cx from 'classnames';
 import * as React from 'react';
 import { ButtonBase } from '../utils/index.js';
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
-    props;
-  styleType; // To omit and prevent eslint error.
-  size; // To omit and prevent eslint error.
-  return React.createElement(
-    ButtonBase,
-    {
-      className: cx('iui-header-breadcrumb-button', className),
-      ref: ref,
-      ...rest,
-    },
-    startIcon,
-    children,
-    endIcon,
-  );
+    const { className, children, startIcon, endIcon, styleType, size, ...rest } = props;
+    styleType; // To omit and prevent eslint error.
+    size; // To omit and prevent eslint error.
+    return (React.createElement(ButtonBase, { className: cx('iui-header-breadcrumb-button', className), ref: ref, ...rest },
+        startIcon,
+        children,
+        endIcon));
 });
 export default HeaderBasicButton;

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -16,37 +16,13 @@ import { SvgChevronRight, Box } from '../utils/index.js';
  * />
  */
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-  const { className, items, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'nav',
-      'aria-label': 'breadcrumbs',
-      className: cx('iui-header-breadcrumbs', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      { as: 'ol', className: 'iui-header-breadcrumbs-list' },
-      items.reduce(
-        (previous, current, index) => [
-          ...previous,
-          current,
-          index !== items.length - 1 &&
-            React.createElement(
-              Box,
-              { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
-              React.createElement(SvgChevronRight, {
-                key: `chevron${index}`,
-                'aria-hidden': true,
-                className: 'iui-chevron',
-              }),
-            ),
-        ],
-        [],
-      ),
-    ),
-  );
+    const { className, items, ...rest } = props;
+    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+            ...previous,
+            current,
+            index !== items.length - 1 && (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
+                React.createElement(SvgChevronRight, { key: `chevron${index}`, "aria-hidden": true, className: 'iui-chevron' }))),
+        ], []))));
 });
 export default HeaderBreadcrumbs;

package/esm/core/Header/HeaderButton.js

@@ -18,67 +18,19 @@ import { HeaderBasicButton } from './HeaderBasicButton.js';
  * <HeaderButton name='Project D' isActive />
  */
 export const HeaderButton = React.forwardRef((props, ref) => {
-  const {
-    name,
-    description,
-    htmlName,
-    isActive = false,
-    startIcon,
-    menuItems,
-    disabled,
-    ...rest
-  } = props;
-  const buttonProps = {
-    startIcon: startIcon
-      ? React.createElement(
-          Box,
-          {
-            as: 'span',
-            className: 'iui-header-breadcrumb-button-icon',
-            'aria-hidden': true,
-          },
-          startIcon,
-        )
-      : null,
-    children: React.createElement(
-      Box,
-      { as: 'span', className: 'iui-header-breadcrumb-button-text' },
-      React.createElement(
-        Box,
-        { as: 'span', className: 'iui-header-breadcrumb-button-text-label' },
-        name,
-      ),
-      description &&
-        React.createElement(
-          Box,
-          {
-            as: 'span',
-            className: 'iui-header-breadcrumb-button-text-sublabel',
-          },
-          description,
-        ),
-    ),
-    ref: ref,
-    disabled: disabled,
-    name: htmlName,
-    ...(!!menuItems && { menuItems }),
-    ...rest,
-  }; // eslint-disable-line @typescript-eslint/no-explicit-any
-  const headerButton =
-    !!props.menuItems && !!props.onClick
-      ? React.createElement(HeaderSplitButton, { ...buttonProps })
-      : !!props.menuItems
-      ? React.createElement(HeaderDropdownButton, { ...buttonProps })
-      : React.createElement(HeaderBasicButton, { ...buttonProps });
-  return React.createElement(
-    Box,
-    {
-      as: 'li',
-      className: 'iui-header-breadcrumb-item',
-      'aria-current': isActive ? 'location' : undefined,
-      'aria-disabled': disabled ? 'true' : undefined,
-    },
-    headerButton,
-  );
+    const { name, description, htmlName, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
+    const buttonProps = {
+        startIcon: startIcon ? (React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-icon', "aria-hidden": true }, startIcon)) : null,
+        children: (React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-text' },
+            React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-label' }, name),
+            description && (React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
+        ref: ref,
+        disabled: disabled,
+        name: htmlName,
+        ...(!!menuItems && { menuItems }),
+        ...rest,
+    }; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const headerButton = !!props.menuItems && !!props.onClick ? (React.createElement(HeaderSplitButton, { ...buttonProps })) : !!props.menuItems ? (React.createElement(HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton, { ...buttonProps }));
+    return (React.createElement(Box, { as: 'li', className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
 });
 export default HeaderButton;

package/esm/core/Header/HeaderDropdownButton.js

@@ -5,49 +5,20 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import {
-  useMergedRefs,
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-} from '../utils/index.js';
+import { useMergedRefs, SvgCaretDownSmall, SvgCaretUpSmall, } from '../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderDropdownButton = React.forwardRef((props, ref) => {
-  const { menuItems, className, children, ...rest } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const buttonRef = React.useRef(null);
-  const refs = useMergedRefs(ref, buttonRef);
-  React.useEffect(() => {
-    if (buttonRef.current) {
-      setMenuWidth(buttonRef.current.offsetWidth);
-    }
-  }, [children]);
-  return React.createElement(
-    DropdownMenu,
-    {
-      menuItems: menuItems,
-      style: { minInlineSize: menuWidth },
-      onVisibleChange: (open) => setIsMenuOpen(open),
-    },
-    React.createElement(
-      HeaderBasicButton,
-      {
-        className: cx('iui-header-breadcrumb-button', className),
-        ref: refs,
-        'aria-label': 'Dropdown',
-        endIcon: isMenuOpen
-          ? React.createElement(SvgCaretUpSmall, {
-              className: 'iui-header-breadcrumb-button-dropdown-icon',
-              'aria-hidden': true,
-            })
-          : React.createElement(SvgCaretDownSmall, {
-              className: 'iui-header-breadcrumb-button-dropdown-icon',
-              'aria-hidden': true,
-            }),
-        ...rest,
-      },
-      children,
-    ),
-  );
+    const { menuItems, className, children, ...rest } = props;
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [menuWidth, setMenuWidth] = React.useState(0);
+    const buttonRef = React.useRef(null);
+    const refs = useMergedRefs(ref, buttonRef);
+    React.useEffect(() => {
+        if (buttonRef.current) {
+            setMenuWidth(buttonRef.current.offsetWidth);
+        }
+    }, [children]);
+    return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minInlineSize: menuWidth }, onVisibleChange: (open) => setIsMenuOpen(open) },
+        React.createElement(HeaderBasicButton, { className: cx('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })), ...rest }, children)));
 });
 export default HeaderDropdownButton;

package/esm/core/Header/HeaderLogo.js

@@ -14,41 +14,10 @@ import { Box } from '../utils/index.js';
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
 export const HeaderLogo = React.forwardRef((props, ref) => {
-  const {
-    className,
-    children,
-    logo,
-    onClick,
-    as = !!onClick ? 'button' : 'div', // eslint-disable-line @typescript-eslint/no-explicit-any
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-header-brand', className),
-      as: as,
-      type: as === 'button' ? 'button' : undefined,
-      onClick: onClick,
-      ref: ref,
-      ...rest,
-    },
-    logo
-      ? React.createElement(
-          Box,
-          {
-            as: 'span',
-            className: 'iui-header-brand-icon',
-            'aria-hidden': true,
-          },
-          logo,
-        )
-      : null,
-    children &&
-      React.createElement(
-        Box,
-        { as: 'span', className: 'iui-header-brand-label' },
-        children,
-      ),
-  );
+    const { className, children, logo, onClick, as = (!!onClick ? 'button' : 'div'), // eslint-disable-line @typescript-eslint/no-explicit-any
+    ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-header-brand', className), as: as, type: as === 'button' ? 'button' : undefined, onClick: onClick, ref: ref, ...rest },
+        logo ? (React.createElement(Box, { as: 'span', className: 'iui-header-brand-icon', "aria-hidden": true }, logo)) : null,
+        children && (React.createElement(Box, { as: 'span', className: 'iui-header-brand-label' }, children))));
 });
 export default HeaderLogo;

package/esm/core/Header/HeaderSplitButton.js

@@ -5,68 +5,21 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import {
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-  Box,
-  ButtonBase,
-} from '../utils/index.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall, Box, ButtonBase, } from '../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-  const {
-    menuItems,
-    className,
-    menuPlacement = 'bottom-end',
-    children,
-    disabled,
-    ...rest
-  } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (ref.current) {
-      setMenuWidth(ref.current.offsetWidth);
-    }
-  }, [children]);
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-header-breadcrumb-button-wrapper', className),
-      ref: ref,
-    },
-    React.createElement(
-      HeaderBasicButton,
-      { ref: forwardedRef, disabled: disabled, ...rest },
-      children,
-    ),
-    React.createElement(
-      DropdownMenu,
-      {
-        placement: menuPlacement,
-        menuItems: menuItems,
-        style: { minInlineSize: menuWidth },
-        onVisibleChange: (open) => setIsMenuOpen(open),
-      },
-      React.createElement(
-        ButtonBase,
-        {
-          'aria-label': 'More',
-          className:
-            'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
-          disabled: disabled,
-        },
-        isMenuOpen
-          ? React.createElement(SvgCaretUpSmall, {
-              className: 'iui-header-breadcrumb-button-dropdown-icon',
-              'aria-hidden': true,
-            })
-          : React.createElement(SvgCaretDownSmall, {
-              className: 'iui-header-breadcrumb-button-dropdown-icon',
-              'aria-hidden': true,
-            }),
-      ),
-    ),
-  );
+    const { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [menuWidth, setMenuWidth] = React.useState(0);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            setMenuWidth(ref.current.offsetWidth);
+        }
+    }, [children]);
+    return (React.createElement(Box, { className: cx('iui-header-breadcrumb-button-wrapper', className), ref: ref },
+        React.createElement(HeaderBasicButton, { ref: forwardedRef, disabled: disabled, ...rest }, children),
+        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minInlineSize: menuWidth }, onVisibleChange: (open) => setIsMenuOpen(open) },
+            React.createElement(ButtonBase, { "aria-label": 'More', className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
 });
 export default HeaderSplitButton;

package/esm/core/Icon/Icon.js

@@ -6,16 +6,16 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/components/Box.js';
 const getSizeValue = (size) => {
-  switch (size) {
-    case 'small':
-      return 's';
-    case 'medium':
-      return 'm';
-    case 'large':
-      return 'l';
-    default:
-      return size;
-  }
+    switch (size) {
+        case 'small':
+            return 's';
+        case 'medium':
+            return 'm';
+        case 'large':
+            return 'l';
+        default:
+            return size;
+    }
 };
 /**
  * A utility component to provide size and fill to svgs.
@@ -32,21 +32,7 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 export const Icon = React.forwardRef((props, ref) => {
-  const {
-    size = 'medium',
-    fill = 'default',
-    className,
-    padded = false,
-    ...rest
-  } = props;
-  return React.createElement(Box, {
-    as: 'span',
-    className: cx('iui-svg-icon', className),
-    'data-iui-icon-size': getSizeValue(size),
-    'data-iui-icon-color': fill,
-    'data-iui-padded': padded ? 'true' : undefined,
-    ref: ref,
-    ...rest,
-  });
+    const { size = 'medium', fill = 'default', className, padded = false, ...rest } = props;
+    return (React.createElement(Box, { as: 'span', className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, "data-iui-padded": padded ? 'true' : undefined, ref: ref, ...rest }));
 });
 export default Icon;