@festo-ui/react 8.1.0-dev.569 → 8.2.0-dev.575

package/node/lib/components/card/CardNotification.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _warning = _interopRequireDefault(require("../icons/warning.js"));
+var _reactIcons = require("@festo-ui/react-icons");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CardNotification(_ref) {
@@ -14,10 +14,10 @@ function CardNotification(_ref) {
     title,
     message
   } = _ref;
-  const classes = (0, _classnames.default)('fwe-card-notification', className);
+  const classes = (0, _classnames.default)("fwe-card-notification", className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconWarning, {
       size: 24
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fwe-card-title",

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _reactIcons = require("@festo-ui/react-icons");
 var _MobileFlyoutContext = _interopRequireDefault(require("../MobileFlyoutContext.js"));
-var _right = _interopRequireDefault(require("../../icons/right-2.js"));
 var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,7 +28,7 @@ const MobileFlyoutItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     active,
     ...props
   } = _ref;
-  const Component = component || 'a';
+  const Component = component || "a";
   const {
     setVisible,
     setOpen
@@ -49,13 +49,13 @@ const MobileFlyoutItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
       icon: icon
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('fwe-flex-grow-1', {
-        'fwe-color-hero': active
+      className: (0, _classnames.default)("fwe-flex-grow-1", {
+        "fwe-color-hero": active
       }, {
-        'fwe-ml-xxs': !!icon
+        "fwe-ml-xxs": !!icon
       }),
       children: children
-    }), pageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_right.default, {})]
+    }), pageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconRight2, {})]
   });
 });
 var _default = exports.default = MobileFlyoutItem;

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

@@ -4,28 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PREDEFINED_COLORS = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIcons = require("@festo-ui/react-icons");
 var _ColorHelper = _interopRequireDefault(require("./ColorHelper.js"));
 var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _checkSmall = _interopRequireDefault(require("../../components/icons/check-small.js"));
-var _collapse = _interopRequireDefault(require("../../components/icons/collapse.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
-const PREDEFINED_COLORS = exports.PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f0f2f3', '#e2e5e8', '#d3d8dd', '#b6bec6', '#80ca3d', '#ffd600', '#ff9600', '#d50000'];
+const PREDEFINED_COLORS = exports.PREDEFINED_COLORS = ["#0091dc", "#333333", "#ffffff", "#f0f2f3", "#e2e5e8", "#d3d8dd", "#b6bec6", "#80ca3d", "#ffd600", "#ff9600", "#d50000"];
 function ColorPicker(_ref) {
   let {
     palette = PREDEFINED_COLORS,
     useAlpha = false,
     alpha = 100,
     paletteOnly,
-    color = '#FFFFFF',
+    color = "#FFFFFF",
     onChange,
     onAlphaChange,
     className
@@ -44,7 +41,7 @@ function ColorPicker(_ref) {
   const [greenInput, setGreenInput] = (0, _react.useState)(initialRgb?.g || 255);
   const [blueInput, setBlueInput] = (0, _react.useState)(initialRgb?.b || 255);
   const [hexInputColor, setHexInputColor] = (0, _react.useState)(color);
-  const [inputType, setInputType] = (0, _react.useState)('RGB');
+  const [inputType, setInputType] = (0, _react.useState)("RGB");
   const [selectOpen, setSelectOpen] = (0, _react.useState)(false);
   const [innerAlpha, setInnerAlpha] = (0, _react.useState)(alpha);
   const [changeColor, setChangeColor] = (0, _react.useState)(true);
@@ -134,7 +131,7 @@ function ColorPicker(_ref) {
     updateAlpha(data.y);
   }
   const updateColorRgb = newColor => {
-    const currentColor = newColor || '#FFFFFF';
+    const currentColor = newColor || "#FFFFFF";
     updateInputs(currentColor);
     const rgb = _ColorHelper.default.hexToRgb(currentColor);
     setChangeColor(false);
@@ -161,22 +158,22 @@ function ColorPicker(_ref) {
     }
   }
   function onRgbBlur(channel) {
-    let currentInput = '';
+    let currentInput = "";
     switch (channel) {
-      case 'r':
+      case "r":
         currentInput = redInput;
         break;
-      case 'g':
+      case "g":
         currentInput = greenInput;
         break;
-      case 'b':
+      case "b":
         currentInput = blueInput;
         break;
       default:
       // no other value possible
     }
-    if (typeof currentInput !== 'number' || typeof currentInput === 'number' && currentInput > 255 && currentInput < 0) {
-      const rgb = _ColorHelper.default.hexToRgb(innerColor || '#FFFFFF');
+    if (typeof currentInput !== "number" || typeof currentInput === "number" && currentInput > 255 && currentInput < 0) {
+      const rgb = _ColorHelper.default.hexToRgb(innerColor || "#FFFFFF");
       if (rgb) {
         const newHexColor = _ColorHelper.default.rgbToHex(rgb);
         updateInputs(newHexColor);
@@ -186,20 +183,20 @@ function ColorPicker(_ref) {
   function onRgbInput(_value, channel) {
     const numberValue = Number.parseInt(_value, 10);
     switch (channel) {
-      case 'r':
+      case "r":
         setRedInput(_value);
         break;
-      case 'g':
+      case "g":
         setGreenInput(_value);
         break;
-      case 'b':
+      case "b":
         setBlueInput(_value);
         break;
       default:
       // no other value possible
     }
     if (numberValue <= 255 && numberValue >= 0) {
-      const rgb = _ColorHelper.default.hexToRgb(innerColor || '#FFFFFF');
+      const rgb = _ColorHelper.default.hexToRgb(innerColor || "#FFFFFF");
       if (rgb) {
         rgb[channel] = numberValue;
         const newHexColor = _ColorHelper.default.rgbToHex(rgb);
@@ -227,8 +224,8 @@ function ColorPicker(_ref) {
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('fwe-color-picker', {
-      'fwe-alpha-active': useAlpha
+    className: (0, _classnames.default)("fwe-color-picker", {
+      "fwe-alpha-active": useAlpha
     }, className),
     children: [!paletteOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fwe-d-flex",
@@ -385,28 +382,28 @@ function ColorPicker(_ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "fwe-input-type",
             children: inputType
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCollapse, {
             className: "fwe-ml-s"
           })]
         }), selectOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fwe-popover",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _classnames.default)('fwe-type-item', {
-              'fwe-selected': inputType === 'HEX'
+            className: (0, _classnames.default)("fwe-type-item", {
+              "fwe-selected": inputType === "HEX"
             }),
-            onClick: () => onChangeType('HEX'),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {}), " HEX"]
+            onClick: () => onChangeType("HEX"),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {}), " HEX"]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _classnames.default)('fwe-type-item', {
-              'fwe-selected': inputType === 'RGB'
+            className: (0, _classnames.default)("fwe-type-item", {
+              "fwe-selected": inputType === "RGB"
             }),
-            onClick: () => onChangeType('RGB'),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {}), " RGB"]
+            onClick: () => onChangeType("RGB"),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {}), " RGB"]
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fwe-d-flex",
-        children: [inputType === 'HEX' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: [inputType === "HEX" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
           "aria-label": "Hexadecimal Color",
           className: "fwe-input-text fwe-hex-input",
           htmlFor: hexId,
@@ -417,7 +414,7 @@ function ColorPicker(_ref) {
             onChange: onHexInput,
             id: hexId
           })
-        }), inputType === 'RGB' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), inputType === "RGB" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
             "aria-label": "RGB Color Red",
             className: "fwe-input-text fwe-red-input",
@@ -425,8 +422,8 @@ function ColorPicker(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
               type: "text",
               value: redInput,
-              onBlur: () => onRgbBlur('r'),
-              onChange: e => onRgbInput(e.target.value, 'r'),
+              onBlur: () => onRgbBlur("r"),
+              onChange: e => onRgbInput(e.target.value, "r"),
               id: redId
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -436,8 +433,8 @@ function ColorPicker(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
               type: "text",
               value: greenInput,
-              onBlur: () => onRgbBlur('g'),
-              onChange: e => onRgbInput(e.target.value, 'g'),
+              onBlur: () => onRgbBlur("g"),
+              onChange: e => onRgbInput(e.target.value, "g"),
               id: greenId
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -447,8 +444,8 @@ function ColorPicker(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
               type: "text",
               value: blueInput,
-              onBlur: () => onRgbBlur('b'),
-              onChange: e => onRgbInput(e.target.value, 'b'),
+              onBlur: () => onRgbBlur("b"),
+              onChange: e => onRgbInput(e.target.value, "b"),
               id: blueId
             })
           })]
@@ -531,14 +528,14 @@ function ColorPicker(_ref) {
             fill: "url(#bwsquare2px)",
             strokeWidth: "0"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {
           className: (0, _classnames.default)({
-            'fwe-color-text': !innerColor
+            "fwe-color-text": !innerColor
           })
         })]
       }), palette.map(colorItem => {
-        const itemClasses = (0, _classnames.default)('fwe-color-item', {
-          'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
+        const itemClasses = (0, _classnames.default)("fwe-color-item", {
+          "fwe-white-item": colorItem.toUpperCase() === "#FFFFFF"
         });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: itemClasses,
@@ -546,7 +543,7 @@ function ColorPicker(_ref) {
             background: colorItem
           },
           onClick: () => updateColorRgb(colorItem.toUpperCase()),
-          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {})
+          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {})
         }, colorItem);
       })]
     })]

package/node/lib/forms/date-picker/DatePicker.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _flatpickr = _interopRequireDefault(require("flatpickr"));
+var _reactIcons = require("@festo-ui/react-icons");
 var _useId = _interopRequireDefault(require("../../helper/useId.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -65,7 +66,7 @@ function DatePicker(_ref) {
         defaultDate: innerDefaultValue,
         onChange: v => handleChange(v[0]),
         onClose: handleClose,
-        position: 'below center',
+        position: "below center",
         formatDate,
         closeOnSelect: !keepOpenOnDateChange ?? true,
         clickOpens: false,
@@ -80,12 +81,12 @@ function DatePicker(_ref) {
     }
   }, [calendar]);
   const handleKeyDown = event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       toggle();
     }
   };
   const handleKeyUp = event => {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       toggle();
     }
   };
@@ -96,12 +97,12 @@ function DatePicker(_ref) {
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: (0, _classnames.default)('fwe-input-text fwe-input-text-icon', className),
+      className: (0, _classnames.default)("fwe-input-text fwe-input-text-icon", className),
       htmlFor: id,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: (0, _classnames.default)('fwe-icon fwe-icon-time-calendar', {
-          'fwe-color-hero': open && !disabled,
-          'fwe-color-control-disabled': disabled
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCalendar, {
+        className: (0, _classnames.default)({
+          "fwe-color-hero": open && !disabled,
+          "fwe-color-control-disabled": disabled
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         id: id,
@@ -110,8 +111,8 @@ function DatePicker(_ref) {
         type: "text",
         readOnly: true,
         required: required,
-        className: (0, _classnames.default)('fr-date-picker', {
-          'fwe-border-hero': open && !disabled
+        className: (0, _classnames.default)("fr-date-picker", {
+          "fwe-border-hero": open && !disabled
         }),
         disabled: disabled
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/node/lib/forms/date-range-picker/DateRangePicker.js

@@ -8,6 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _flatpickr = _interopRequireDefault(require("flatpickr"));
 var _rangePlugin = _interopRequireDefault(require("flatpickr/dist/plugins/rangePlugin.js"));
 var _react = require("react");
+var _reactIcons = require("@festo-ui/react-icons");
 var _useId = _interopRequireDefault(require("../../helper/useId.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,7 +58,7 @@ function DateRangePicker(_ref) {
           input: input2Ref.current
         })],
         onChange: v => handleChange(v),
-        position: 'below center',
+        position: "below center",
         positionElement: containerRef.current,
         formatDate,
         closeOnSelect: !options?.keepOpenOnDateChange ?? true,
@@ -74,29 +75,29 @@ function DateRangePicker(_ref) {
     }
   }, [calendar]);
   const handleKeyDown = event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       toggle();
     }
   };
   const handleKeyUp = event => {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       toggle();
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     tabIndex: 0,
     role: "button",
-    className: (0, _classnames.default)('fr-date-range-picker', className),
+    className: (0, _classnames.default)("fr-date-range-picker", className),
     onClick: toggle,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
       className: "fwe-input-text fwe-input-text-icon",
       htmlFor: id,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: (0, _classnames.default)('fwe-icon fwe-icon-time-calendar', {
-          'fwe-color-hero': open && !disabled,
-          'fwe-color-control-disabled': disabled
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCalendar, {
+        className: (0, _classnames.default)({
+          "fwe-color-hero": open && !disabled,
+          "fwe-color-control-disabled": disabled
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: containerRef,
@@ -108,7 +109,7 @@ function DateRangePicker(_ref) {
           readOnly: true,
           required: required,
           className: (0, _classnames.default)({
-            'fwe-border-hero': open && !disabled
+            "fwe-border-hero": open && !disabled
           }),
           disabled: disabled,
           id: id
@@ -119,13 +120,13 @@ function DateRangePicker(_ref) {
           readOnly: true,
           required: required,
           className: (0, _classnames.default)({
-            'fwe-border-hero': open && !disabled
+            "fwe-border-hero": open && !disabled
           }),
           disabled: disabled
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _classnames.default)('fwe-input-text-label', {
-          'fwe-color-text-disabled': disabled
+        className: (0, _classnames.default)("fwe-input-text-label", {
+          "fwe-color-text-disabled": disabled
         }),
         children: children
       }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/node/lib/forms/select/internal/SelectButtonContent.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SelectButtonContent;
-var _closeSmall = _interopRequireDefault(require("../../../components/icons/close-small.js"));
+var _reactIcons = require("@festo-ui/react-icons");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
@@ -32,7 +31,7 @@ function SelectButtonContent(_ref) {
         children: [v, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "chip-removable",
           onClick: handleChipClick(v),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_closeSmall.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCloseSmall, {
             size: 16
           })
         })]

package/node/lib/forms/time-picker/TimePicker.js

@@ -5,15 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactPopper = require("react-popper");
+var _reactIcons = require("@festo-ui/react-icons");
 var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
 var _useId = _interopRequireDefault(require("../../helper/useId.js"));
 var _TimePickerDropdown = _interopRequireDefault(require("./time-picker-dropdown/TimePickerDropdown.js"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
@@ -31,24 +30,24 @@ const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...props
   } = _ref;
   const id = (0, _useId.default)(idProps);
-  const innerFormatDate = formatDate ?? Intl.DateTimeFormat('default', {
-    hour: 'numeric',
-    minute: 'numeric',
+  const innerFormatDate = formatDate ?? Intl.DateTimeFormat("default", {
+    hour: "numeric",
+    minute: "numeric",
     ...(options?.showSeconds && {
-      second: 'numeric'
+      second: "numeric"
     })
   }).format;
-  const timeFormat = options?.timeFormat ?? '24';
+  const timeFormat = options?.timeFormat ?? "24";
   const [referenceElement, setReferenceElement] = (0, _react.useState)(null);
   const [popperElement, setPopperElement] = (0, _react.useState)(null);
   const customModifier = (0, _react.useMemo)(() => ({
-    name: 'offset',
+    name: "offset",
     options: {
       offset: _ref2 => {
         let {
           placement
         } = _ref2;
-        if (placement === 'bottom') {
+        if (placement === "bottom") {
           return [0, -12];
         }
         return [0, 0];
@@ -97,12 +96,12 @@ const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setOpen(false);
   }
   const handleKeyDown = event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       toggle();
     }
   };
   const handleKeyUp = event => {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       toggle();
     }
   };
@@ -119,10 +118,10 @@ const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         htmlFor: id,
         className: "fr-time-picker fwe-input-text fwe-input-text-icon",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: (0, _classnames.default)('fwe-icon fwe-icon-time-time', {
-            'fwe-color-hero': open,
-            'fwe-color-control-disabled': disabled
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconTime, {
+          className: (0, _classnames.default)({
+            "fwe-color-hero": open && !disabled,
+            "fwe-color-control-disabled": disabled
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           id: id,
@@ -131,7 +130,7 @@ const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           readOnly: true,
           required: required,
           className: (0, _classnames.default)({
-            'fwe-border-hero': open
+            "fwe-border-hero": open
           }),
           value: innerFormatDate(innerValue),
           disabled: disabled