@festo-ui/react 7.2.0-dev.422 → 7.2.0-dev.426

package/lib/components/icons/right-2.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function IconRight2(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/_jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "white background",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "right-2",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "none",
+        d: "M0 16V0h16v16z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "m10.707 8-4.353 4.354-.708-.708L9.293 8 5.646 4.354l.708-.708z"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/_jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "white background",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "right-2",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "none",
+        d: "M0 24V0h24v24z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M9.172 18.364 15.536 12 9.172 5.636l-.708.707L14.121 12l-5.657 5.657z"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/_jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "white background",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "right-2",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "none",
+        d: "M0 32V0h32v32z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "m22 16-8.707 8.707-1.414-1.414L19.172 16l-7.293-7.293 1.414-1.414z"
+      })]
+    });
+  }
+  return null;
+}

package/lib/components/icons/warning.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, SVGProps } from 'react';
+export default function IconWarning({ className, svgProps, festoColor, size, }: {
+    className?: string;
+    svgProps?: SVGProps<SVGSVGElement>;
+    festoColor?: boolean;
+    size?: 16 | 24 | 32 | 48 | 64 | 96 | 128;
+}): ReactElement<any, any> | null;

package/lib/components/icons/warning.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function IconWarning(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/_jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "warning",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "none",
+        d: "M0 0h16v16H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: festoColor ? '#ff9600' : 'currentColor',
+        d: "M15.216 13.53 8.882 1.653a1 1 0 0 0-1.764 0L.784 13.53A1 1 0 0 0 1.667 15h12.666a1 1 0 0 0 .883-1.47M9 13H7v-2h2Zm0-3H7V5h2Z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/_jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "warning",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: festoColor ? '#ff9600' : 'currentColor',
+        d: "M22.4 19.86 13.273 2.743a1.441 1.441 0 0 0-2.544 0L1.6 19.86a1.44 1.44 0 0 0 1.272 2.12H21.13a1.44 1.44 0 0 0 1.272-2.12M11 7h2v8h-2Zm2.005 11.965h-2.01v-2.01h2.01Z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/_jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "warning",
+      children: [/*#__PURE__*/_jsx("path", {
+        fill: "none",
+        d: "M0 0h32v32H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: festoColor ? '#ff9600' : 'currentColor',
+        d: "M30.431 26.059 17.765 2.309a2 2 0 0 0-3.53 0L1.57 26.059A2 2 0 0 0 3.333 29h25.334a2 2 0 0 0 1.764-2.941M17 25h-2v-2h2Zm0-5h-2V10h2Z",
+        "data-name": "content"
+      })]
+    });
+  }
+  return null;
+}

package/lib/components/link-button/LinkButton.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { forwardRef } from 'react';
+import IconWrapper from '../icon-wrapper/IconWrapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -14,17 +15,9 @@ const LinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   const classes = classNames('fwe-btn', 'fwe-btn-link', {
     'fwe-disabled': disabled
+  }, {
+    'fwe-btn-icon': iconOnly
   }, className);
-  let innerIcon;
-  if (icon) {
-    if (typeof icon === 'string') {
-      innerIcon = /*#__PURE__*/_jsx("i", {
-        className: `fwe-icon fwe-icon-${icon}`
-      });
-    } else {
-      innerIcon = icon;
-    }
-  }
   return /*#__PURE__*/_jsxs("button", {
     onClick: onClick,
     type: "button",
@@ -32,7 +25,9 @@ const LinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled: disabled,
     ref: ref,
     ...props,
-    children: [innerIcon, !iconOnly && children]
+    children: [/*#__PURE__*/_jsx(IconWrapper, {
+      icon: icon
+    }), !iconOnly && children]
   });
 });
 export default LinkButton;

package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.d.ts

@@ -4,7 +4,7 @@ declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 interface MobileFlyoutItemBaseProps {
-    icon?: string;
+    icon?: React.ReactNode;
     pageLink?: string;
     active?: boolean;
 }

package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -1,6 +1,8 @@
 import cn from 'classnames';
 import { forwardRef, useContext } from 'react';
 import MobileFlyoutContext from '../MobileFlyoutContext';
+import IconRight2 from '../../icons/right-2';
+import IconWrapper from '../../icon-wrapper/IconWrapper';
 
 /*
  * Augment `forwardRef` only for this module so that storybook can infer controls
@@ -38,16 +40,16 @@ const MobileFlyoutItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...props,
     ref: ref,
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/_jsx("i", {
-      className: `fwe-mr-xs fwe-icon fwe-icon-${icon}`
+    children: [/*#__PURE__*/_jsx(IconWrapper, {
+      icon: icon
     }), /*#__PURE__*/_jsx("div", {
       className: cn('fwe-flex-grow-1', {
         'fwe-color-hero': active
+      }, {
+        'fwe-ml-xxs': !!icon
       }),
       children: children
-    }), pageLink && /*#__PURE__*/_jsx("i", {
-      className: "fwe-icon fwe-icon-arrows-right-2"
-    })]
+    }), pageLink && /*#__PURE__*/_jsx(IconRight2, {})]
   });
 });
 export default MobileFlyoutItem;

package/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -29,15 +29,15 @@ export const MobileFlyoutPage = /*#__PURE__*/forwardRef((_ref, ref) => {
     }),
     ref: ref,
     ...props,
-    children: [!root && /*#__PURE__*/_jsxs("div", {
+    children: [!root && /*#__PURE__*/_jsx("div", {
       tabIndex: 0,
       role: "button",
       className: "fwe-page-back",
       onClick: handleChange,
       onKeyUp: handleChange,
-      children: [/*#__PURE__*/_jsx("i", {}), /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx("div", {
         children: innerBack
-      })]
+      })
     }), /*#__PURE__*/_jsx("div", {
       className: "fwe-mobile-flyout-item-container",
       children: children

package/lib/components/modals/imageGallery/ImageGallery.js

@@ -54,27 +54,18 @@ export const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
           length: images.length,
           pagination: pagination
         }), showScaleButton ? /*#__PURE__*/_jsx("button", {
-          "aria-label": "scale up",
           type: "button",
-          className: "fwe-btn fwe-btn-link fwe-ml-auto",
-          onClick: handleScale,
-          children: /*#__PURE__*/_jsx("i", {
-            className: cn('fwe-icon fwe-icon-lg fwe-color-white fwe-modal-image-gallery-scale', {
-              'fwe-icon-arrows-scale-down': isScaled,
-              'fwe-icon-arrows-scale-up': !isScaled
-            })
-          })
+          "aria-label": "scale up",
+          className: "fwe-image-gallery-scale-btn fwe-ml-auto",
+          onClick: handleScale
         }) : null, /*#__PURE__*/_jsx("button", {
-          "aria-label": "close",
           type: "button",
-          className: cn('fwe-btn fwe-btn-link', {
+          "aria-label": "close",
+          className: cn('fwe-image-gallery-close-btn', {
             'fwe-ml-auto': !showScaleButton,
             'fwe-ml-3': showScaleButton
           }),
-          onClick: onClose,
-          children: /*#__PURE__*/_jsx("i", {
-            className: "fwe-icon fwe-icon-2x fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
-          })
+          onClick: onClose
         })]
       }), descriptiveContent ? /*#__PURE__*/_jsxs("div", {
         className: "fwe-image-gallery-container",

package/lib/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -3,13 +3,12 @@ import { PopoverProps } from '../popover/Popover';
 import './PopoverMenu.scss';
 interface PopoverMenuItem {
     text: string;
-    icon: string;
+    icon: React.ReactNode;
     action?: (data: unknown) => void;
     data: unknown;
 }
-export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'children' | 'open' | 'onStatusChange'> {
-    icon: string;
+export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'open' | 'onStatusChange'> {
     menu: PopoverMenuItem[];
 }
-declare function PopoverMenu({ icon, menu, className, ...props }: PopoverMenuProps): JSX.Element;
+declare function PopoverMenu({ children, menu, className, ...props }: PopoverMenuProps): JSX.Element;
 export default PopoverMenu;

package/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import classNames from 'classnames';
 import Popover from '../popover/Popover';
+import IconWrapper from '../../icon-wrapper/IconWrapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function PopoverMenu(_ref) {
   let {
-    icon,
+    children,
     menu,
     className,
     ...props
@@ -29,8 +30,8 @@ function PopoverMenu(_ref) {
         type: "button",
         className: "fwe-btn fwe-btn-link fwe-dark",
         onClick: e => handleClick(e, item),
-        children: [/*#__PURE__*/_jsx("i", {
-          className: `fwe-icon fwe-mr-0 ${item.icon}`
+        children: [/*#__PURE__*/_jsx(IconWrapper, {
+          icon: item.icon
         }), /*#__PURE__*/_jsx("span", {
           children: item.text
         })]
@@ -47,11 +48,8 @@ function PopoverMenu(_ref) {
       ...props,
       children: /*#__PURE__*/_jsx("button", {
         type: "button",
-        "data-testid": "fwe-popover-menu-button",
-        className: "fwe-btn fwe-btn-link fwe-dark origin",
-        children: /*#__PURE__*/_jsx("i", {
-          className: `fwe-icon fwe-mr-0 ${icon}`
-        })
+        className: "menu-button",
+        children: children
       })
     })
   });

package/lib/components/tab/Tabs.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
 import useForkRef from '../../helper/useForkRef';
 import useTabScroll from './useTabScroll';
+import IconWrapper from '../icon-wrapper/IconWrapper';
 
 // legacy: recommended for desktop only applications
 // responsive: desktop, tablet, mobile with scrollable tabs
@@ -142,8 +143,8 @@ export const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
                   role: "tab",
                   "aria-controls": id,
                   "aria-selected": active,
-                  children: [/*#__PURE__*/_jsx("i", {
-                    className: `fwe-icon ${icon}`
+                  children: [/*#__PURE__*/_jsx(IconWrapper, {
+                    icon: icon
                   }), /*#__PURE__*/_jsx("span", {
                     children: name
                   })]

package/lib/components/tab/interfaces.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 export type Tab = {
-    icon?: string;
+    icon?: React.ReactNode;
     active?: boolean;
     name: string;
 };

package/lib/forms/color-picker/ColorPicker.js

@@ -5,6 +5,8 @@ import Draggable from 'react-draggable';
 import classNames from 'classnames';
 import ColorHelper from './ColorHelper';
 import useId from '../../helper/useId';
+import IconCheckSmall from '../../components/icons/check-small';
+import IconCollapse from '../../components/icons/collapse';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -368,8 +370,8 @@ function ColorPicker(_ref) {
           children: [/*#__PURE__*/_jsx("span", {
             className: "fwe-input-type",
             children: inputType
-          }), /*#__PURE__*/_jsx("i", {
-            className: "fwe-icon fwe-icon-arrows-collapse"
+          }), /*#__PURE__*/_jsx(IconCollapse, {
+            className: "fwe-ml-s"
           })]
         }), selectOpen && /*#__PURE__*/_jsxs("div", {
           className: "fwe-popover",
@@ -378,17 +380,13 @@ function ColorPicker(_ref) {
               'fwe-selected': inputType === 'HEX'
             }),
             onClick: () => onChangeType('HEX'),
-            children: [/*#__PURE__*/_jsx("i", {
-              className: "fwe-icon fwe-icon-menu-check"
-            }), " HEX"]
+            children: [/*#__PURE__*/_jsx(IconCheckSmall, {}), " HEX"]
           }), /*#__PURE__*/_jsxs("div", {
             className: classNames('fwe-type-item', {
               'fwe-selected': inputType === 'RGB'
             }),
             onClick: () => onChangeType('RGB'),
-            children: [/*#__PURE__*/_jsx("i", {
-              className: "fwe-icon fwe-icon-menu-check"
-            }), " RGB"]
+            children: [/*#__PURE__*/_jsx(IconCheckSmall, {}), " RGB"]
           })]
         })]
       }), /*#__PURE__*/_jsxs("div", {
@@ -513,8 +511,8 @@ function ColorPicker(_ref) {
             fill: "url(#bwsquare2px)",
             strokeWidth: "0"
           })]
-        }), /*#__PURE__*/_jsx("i", {
-          className: classNames('fwe-icon fwe-icon-menu-check', {
+        }), /*#__PURE__*/_jsx(IconCheckSmall, {
+          className: classNames({
             'fwe-color-text': !innerColor
           })
         })]
@@ -528,9 +526,7 @@ function ColorPicker(_ref) {
             background: colorItem
           },
           onClick: () => updateColorRgb(colorItem.toUpperCase()),
-          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/_jsx("i", {
-            className: "fwe-icon fwe-icon-menu-check"
-          })
+          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/_jsx(IconCheckSmall, {})
         }, colorItem);
       })]
     })]

package/lib/forms/segment/segment-control/SegmentControl.d.ts

@@ -6,10 +6,10 @@ export interface SegmentControlProps extends ClassNameProps {
     value: any;
     checked?: boolean;
     disabled?: boolean;
-    icon?: string;
+    icon?: React.ReactNode;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
-    iconOnly?: boolean;
     id?: string;
+    iconOnly?: boolean;
 }
 declare function SegmentControl(props: SegmentControlProps): JSX.Element;
 export default SegmentControl;

package/lib/forms/segment/segment-control/SegmentControl.js

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import classNames from 'classnames';
+import IconWrapper from '../../../components/icon-wrapper/IconWrapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -12,20 +13,15 @@ function SegmentControl(props) {
     value,
     icon,
     onChange,
-    iconOnly,
     id,
-    className
+    className,
+    iconOnly
   } = props;
   const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
   let viewMode = 'text';
   if (icon) {
     viewMode = iconOnly ? 'icon' : 'icon-text';
   }
-  const prefix = 'fwe-icon-';
-  let innerIcon = icon;
-  if (icon && icon.indexOf(prefix) === -1) {
-    innerIcon = prefix + icon;
-  }
   const handleChange = event => {
     if (onChange) {
       onChange(event, value);
@@ -48,15 +44,16 @@ function SegmentControl(props) {
         children: [/*#__PURE__*/_jsx("span", {
           className: "fwe-sr-only",
           children: label
-        }), /*#__PURE__*/_jsx("i", {
-          "aria-hidden": "true",
-          className: classNames('fwe-icon', innerIcon)
+        }), /*#__PURE__*/_jsx(IconWrapper, {
+          icon: icon
         })]
       }), viewMode === 'text' && label, viewMode === 'icon-text' && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("i", {
-          "aria-hidden": "true",
-          className: classNames('fwe-icon', innerIcon)
-        }), label]
+        children: [/*#__PURE__*/_jsx(IconWrapper, {
+          icon: icon
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fwe-ml-xxs",
+          children: label
+        })]
       })]
     })]
   });

package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js

@@ -4,6 +4,8 @@ import useForkRef from '../../../helper/useForkRef';
 import LinkButton from '../../../components/link-button/LinkButton';
 import TimePickerInput from './TimePickerInput';
 import useOnClickOutside from '../../../helper/useOnClickOutside';
+import IconCollapse from '../../../components/icons/collapse';
+import IconExpand from '../../../components/icons/expand';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -141,10 +143,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             "aria-label": "hour up",
             className: "fwe-dark",
             onClick: () => handleHourIncrement(1),
-            icon: /*#__PURE__*/_jsx("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-expand"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconExpand, {})
           }), /*#__PURE__*/_jsx(TimePickerInput, {
             "aria-label": "hours value",
             min: min,
@@ -156,10 +156,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             "aria-label": "hour down",
             className: "fwe-dark",
             onClick: () => handleHourIncrement(-1),
-            icon: /*#__PURE__*/_jsx("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-collapse"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconCollapse, {})
           })]
         }), /*#__PURE__*/_jsxs("div", {
           className: "fwe-timepicker-spinners-minutes",
@@ -167,10 +165,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             "aria-label": "minute up",
             className: "fwe-dark",
             onClick: () => handleMinuteIncrement(innerMinuteStepSize),
-            icon: /*#__PURE__*/_jsx("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-expand"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconExpand, {})
           }), /*#__PURE__*/_jsx(TimePickerInput, {
             "aria-label": "minutes value",
             min: min,
@@ -181,10 +177,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             "aria-label": "minute down",
             className: "fwe-dark",
             onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
-            icon: /*#__PURE__*/_jsx("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-collapse"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconCollapse, {})
           })]
         }), showSeconds && /*#__PURE__*/_jsxs("div", {
           className: "fwe-timepicker-spinners-seconds",
@@ -192,10 +186,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             "aria-label": "seconds up",
             className: "fwe-dark",
             onClick: () => handleSecondIncrement(1),
-            icon: /*#__PURE__*/_jsx("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-expand"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconExpand, {})
           }), /*#__PURE__*/_jsx(TimePickerInput, {
             "aria-label": "seconds value",
             min: min,
@@ -206,10 +198,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             "aria-label": "minute down",
             className: "fwe-dark",
             onClick: () => handleSecondIncrement(-1),
-            icon: /*#__PURE__*/_jsx("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-collapse"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconCollapse, {})
           })]
         })]
       }), timeFormat === '12' && /*#__PURE__*/_jsx("button", {

package/node/lib/components/buttons/button/Button.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -39,8 +40,8 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     disabled: disabled,
     ref: ref,
     ...props,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: `fwe-icon fwe-icon-${icon}`
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+      icon: icon
     }), !iconOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: children
     })]