@festo-ui/react 8.1.0 → 8.2.0-dev.576

package/lib/components/card/CardNotification.d.ts

@@ -1,7 +1,7 @@
-import { ClassNameProps } from '../../helper/types';
+import type { ClassNameProps } from "../../helper/types";
 interface CardNotificationProps extends ClassNameProps {
     title: string;
     message?: string;
 }
-declare function CardNotification({ className, title, message }: CardNotificationProps): import("react/jsx-runtime").JSX.Element;
+declare function CardNotification({ className, title, message, }: CardNotificationProps): import("react/jsx-runtime").JSX.Element;
 export default CardNotification;

package/lib/components/card/CardNotification.js

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import IconWarning from "../icons/warning.js";
+import classNames from "classnames";
+import { IconWarning } from "@festo-ui/react-icons";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function CardNotification(_ref) {
   let {
@@ -7,7 +7,7 @@ function CardNotification(_ref) {
     title,
     message
   } = _ref;
-  const classes = classNames('fwe-card-notification', className);
+  const classes = classNames("fwe-card-notification", className);
   return /*#__PURE__*/_jsxs("div", {
     className: classes,
     children: [/*#__PURE__*/_jsx(IconWarning, {

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

@@ -1,5 +1,5 @@
-import { PolymorphicRef } from '../../../helper/types';
-declare module 'react' {
+import type { PolymorphicRef } from "../../../helper/types";
+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 {

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

@@ -1,7 +1,7 @@
-import cn from 'classnames';
-import { forwardRef, useContext } from 'react';
+import cn from "classnames";
+import { forwardRef, useContext } from "react";
+import { IconRight2 } from "@festo-ui/react-icons";
 import MobileFlyoutContext from "../MobileFlyoutContext.js";
-import IconRight2 from "../../icons/right-2.js";
 import IconWrapper from "../../icon-wrapper/IconWrapper.js";
 /*
  * Augment `forwardRef` only for this module so that storybook can infer controls
@@ -20,7 +20,7 @@ const MobileFlyoutItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     active,
     ...props
   } = _ref;
-  const Component = component || 'a';
+  const Component = component || "a";
   const {
     setVisible,
     setOpen
@@ -41,10 +41,10 @@ const MobileFlyoutItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: [/*#__PURE__*/_jsx(IconWrapper, {
       icon: icon
     }), /*#__PURE__*/_jsx("div", {
-      className: cn('fwe-flex-grow-1', {
-        'fwe-color-hero': active
+      className: cn("fwe-flex-grow-1", {
+        "fwe-color-hero": active
       }, {
-        'fwe-ml-xxs': !!icon
+        "fwe-ml-xxs": !!icon
       }),
       children: children
     }), pageLink && /*#__PURE__*/_jsx(IconRight2, {})]

package/lib/forms/color-picker/ColorPicker.d.ts

@@ -1,5 +1,5 @@
-import './ColorPicker.scss';
-import { ClassNameProps } from '../../helper/types';
+import "./ColorPicker.scss";
+import type { ClassNameProps } from "../../helper/types";
 export declare const PREDEFINED_COLORS: string[];
 interface ColorPickerProps extends ClassNameProps {
     palette?: string[];

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

@@ -1,21 +1,21 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useRef, useCallback, useEffect, useState } from 'react';
-import Draggable from 'react-draggable';
-import classNames from 'classnames';
+
+import { useRef, useCallback, useEffect, useState } from "react";
+import Draggable from "react-draggable";
+import classNames from "classnames";
+import { IconCheckSmall, IconCollapse } from "@festo-ui/react-icons";
 import ColorHelper from "./ColorHelper.js";
 import useId from "../../helper/useId.js";
-import IconCheckSmall from "../../components/icons/check-small.js";
-import IconCollapse from "../../components/icons/collapse.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f0f2f3', '#e2e5e8', '#d3d8dd', '#b6bec6', '#80ca3d', '#ffd600', '#ff9600', '#d50000'];
+export const 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
@@ -34,7 +34,7 @@ function ColorPicker(_ref) {
   const [greenInput, setGreenInput] = useState(initialRgb?.g || 255);
   const [blueInput, setBlueInput] = useState(initialRgb?.b || 255);
   const [hexInputColor, setHexInputColor] = useState(color);
-  const [inputType, setInputType] = useState('RGB');
+  const [inputType, setInputType] = useState("RGB");
   const [selectOpen, setSelectOpen] = useState(false);
   const [innerAlpha, setInnerAlpha] = useState(alpha);
   const [changeColor, setChangeColor] = useState(true);
@@ -124,7 +124,7 @@ function ColorPicker(_ref) {
     updateAlpha(data.y);
   }
   const updateColorRgb = newColor => {
-    const currentColor = newColor || '#FFFFFF';
+    const currentColor = newColor || "#FFFFFF";
     updateInputs(currentColor);
     const rgb = ColorHelper.hexToRgb(currentColor);
     setChangeColor(false);
@@ -151,22 +151,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.hexToRgb(innerColor || '#FFFFFF');
+    if (typeof currentInput !== "number" || typeof currentInput === "number" && currentInput > 255 && currentInput < 0) {
+      const rgb = ColorHelper.hexToRgb(innerColor || "#FFFFFF");
       if (rgb) {
         const newHexColor = ColorHelper.rgbToHex(rgb);
         updateInputs(newHexColor);
@@ -176,20 +176,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.hexToRgb(innerColor || '#FFFFFF');
+      const rgb = ColorHelper.hexToRgb(innerColor || "#FFFFFF");
       if (rgb) {
         rgb[channel] = numberValue;
         const newHexColor = ColorHelper.rgbToHex(rgb);
@@ -217,8 +217,8 @@ function ColorPicker(_ref) {
     }
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames('fwe-color-picker', {
-      'fwe-alpha-active': useAlpha
+    className: classNames("fwe-color-picker", {
+      "fwe-alpha-active": useAlpha
     }, className),
     children: [!paletteOnly && /*#__PURE__*/_jsxs("div", {
       className: "fwe-d-flex",
@@ -381,22 +381,22 @@ function ColorPicker(_ref) {
         }), selectOpen && /*#__PURE__*/_jsxs("div", {
           className: "fwe-popover",
           children: [/*#__PURE__*/_jsxs("div", {
-            className: classNames('fwe-type-item', {
-              'fwe-selected': inputType === 'HEX'
+            className: classNames("fwe-type-item", {
+              "fwe-selected": inputType === "HEX"
             }),
-            onClick: () => onChangeType('HEX'),
+            onClick: () => onChangeType("HEX"),
             children: [/*#__PURE__*/_jsx(IconCheckSmall, {}), " HEX"]
           }), /*#__PURE__*/_jsxs("div", {
-            className: classNames('fwe-type-item', {
-              'fwe-selected': inputType === 'RGB'
+            className: classNames("fwe-type-item", {
+              "fwe-selected": inputType === "RGB"
             }),
-            onClick: () => onChangeType('RGB'),
+            onClick: () => onChangeType("RGB"),
             children: [/*#__PURE__*/_jsx(IconCheckSmall, {}), " RGB"]
           })]
         })]
       }), /*#__PURE__*/_jsxs("div", {
         className: "fwe-d-flex",
-        children: [inputType === 'HEX' && /*#__PURE__*/_jsx("label", {
+        children: [inputType === "HEX" && /*#__PURE__*/_jsx("label", {
           "aria-label": "Hexadecimal Color",
           className: "fwe-input-text fwe-hex-input",
           htmlFor: hexId,
@@ -407,7 +407,7 @@ function ColorPicker(_ref) {
             onChange: onHexInput,
             id: hexId
           })
-        }), inputType === 'RGB' && /*#__PURE__*/_jsxs(_Fragment, {
+        }), inputType === "RGB" && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("label", {
             "aria-label": "RGB Color Red",
             className: "fwe-input-text fwe-red-input",
@@ -415,8 +415,8 @@ function ColorPicker(_ref) {
             children: /*#__PURE__*/_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__*/_jsx("label", {
@@ -426,8 +426,8 @@ function ColorPicker(_ref) {
             children: /*#__PURE__*/_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__*/_jsx("label", {
@@ -437,8 +437,8 @@ function ColorPicker(_ref) {
             children: /*#__PURE__*/_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
             })
           })]
@@ -523,12 +523,12 @@ function ColorPicker(_ref) {
           })]
         }), /*#__PURE__*/_jsx(IconCheckSmall, {
           className: classNames({
-            'fwe-color-text': !innerColor
+            "fwe-color-text": !innerColor
           })
         })]
       }), palette.map(colorItem => {
-        const itemClasses = classNames('fwe-color-item', {
-          'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
+        const itemClasses = classNames("fwe-color-item", {
+          "fwe-white-item": colorItem.toUpperCase() === "#FFFFFF"
         });
         return /*#__PURE__*/_jsx("div", {
           className: itemClasses,

package/lib/forms/date-picker/DatePicker.d.ts

@@ -1,5 +1,5 @@
-import { ClassNamePropsWithChildren } from '../../helper/types';
-import './DatePicker.scss';
+import type { ClassNamePropsWithChildren } from "../../helper/types";
+import "./DatePicker.scss";
 export interface DatePickerOptions {
     maxDate?: Date;
     minDate?: Date;

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

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import flatpickr from 'flatpickr';
+import { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import flatpickr from "flatpickr";
+import { IconCalendar } from "@festo-ui/react-icons";
 import useId from "../../helper/useId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DatePicker(_ref) {
@@ -58,7 +59,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,
@@ -73,12 +74,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();
     }
   };
@@ -89,12 +90,12 @@ function DatePicker(_ref) {
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     children: /*#__PURE__*/_jsxs("label", {
-      className: classNames('fwe-input-text fwe-input-text-icon', className),
+      className: classNames("fwe-input-text fwe-input-text-icon", className),
       htmlFor: id,
-      children: [/*#__PURE__*/_jsx("i", {
-        className: classNames('fwe-icon fwe-icon-time-calendar', {
-          'fwe-color-hero': open && !disabled,
-          'fwe-color-control-disabled': disabled
+      children: [/*#__PURE__*/_jsx(IconCalendar, {
+        className: classNames({
+          "fwe-color-hero": open && !disabled,
+          "fwe-color-control-disabled": disabled
         })
       }), /*#__PURE__*/_jsx("input", {
         id: id,
@@ -103,8 +104,8 @@ function DatePicker(_ref) {
         type: "text",
         readOnly: true,
         required: required,
-        className: classNames('fr-date-picker', {
-          'fwe-border-hero': open && !disabled
+        className: classNames("fr-date-picker", {
+          "fwe-border-hero": open && !disabled
         }),
         disabled: disabled
       }), /*#__PURE__*/_jsx("span", {

package/lib/forms/date-range-picker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
-import { ClassNamePropsWithChildren } from '../../helper/types';
-import './DateRangePicker.scss';
+import type { ClassNamePropsWithChildren } from "../../helper/types";
+import "./DateRangePicker.scss";
 export interface DatePickerOptions {
     maxDate?: Date;
     minDate?: Date;

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

@@ -1,7 +1,8 @@
-import classNames from 'classnames';
-import flatpickr from 'flatpickr';
-import rangePlugin from 'flatpickr/dist/plugins/rangePlugin.js';
-import { useEffect, useRef, useState } from 'react';
+import classNames from "classnames";
+import flatpickr from "flatpickr";
+import rangePlugin from "flatpickr/dist/plugins/rangePlugin.js";
+import { useEffect, useRef, useState } from "react";
+import { IconCalendar } from "@festo-ui/react-icons";
 import useId from "../../helper/useId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DateRangePicker(_ref) {
@@ -50,7 +51,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,
@@ -67,29 +68,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__*/_jsx("div", {
     tabIndex: 0,
     role: "button",
-    className: classNames('fr-date-range-picker', className),
+    className: classNames("fr-date-range-picker", className),
     onClick: toggle,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     children: /*#__PURE__*/_jsxs("label", {
       className: "fwe-input-text fwe-input-text-icon",
       htmlFor: id,
-      children: [/*#__PURE__*/_jsx("i", {
-        className: classNames('fwe-icon fwe-icon-time-calendar', {
-          'fwe-color-hero': open && !disabled,
-          'fwe-color-control-disabled': disabled
+      children: [/*#__PURE__*/_jsx(IconCalendar, {
+        className: classNames({
+          "fwe-color-hero": open && !disabled,
+          "fwe-color-control-disabled": disabled
         })
       }), /*#__PURE__*/_jsxs("div", {
         ref: containerRef,
@@ -101,7 +102,7 @@ function DateRangePicker(_ref) {
           readOnly: true,
           required: required,
           className: classNames({
-            'fwe-border-hero': open && !disabled
+            "fwe-border-hero": open && !disabled
           }),
           disabled: disabled,
           id: id
@@ -112,13 +113,13 @@ function DateRangePicker(_ref) {
           readOnly: true,
           required: required,
           className: classNames({
-            'fwe-border-hero': open && !disabled
+            "fwe-border-hero": open && !disabled
           }),
           disabled: disabled
         })]
       }), /*#__PURE__*/_jsx("span", {
-        className: classNames('fwe-input-text-label', {
-          'fwe-color-text-disabled': disabled
+        className: classNames("fwe-input-text-label", {
+          "fwe-color-text-disabled": disabled
         }),
         children: children
       }), hint && /*#__PURE__*/_jsx("span", {

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

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import IconCloseSmall from "../../../components/icons/close-small.js";
+
+import { IconCloseSmall } from "@festo-ui/react-icons";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function SelectButtonContent(_ref) {
   let {

package/lib/forms/time-picker/TimePicker.d.ts

@@ -1,6 +1,7 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import type React from "react";
+import { type ComponentPropsWithoutRef } from "react";
 export interface TimePickerOptions {
-    timeFormat?: '12' | '24';
+    timeFormat?: "12" | "24";
     showSeconds?: boolean;
     minuteStepSize?: number;
     range?: {
@@ -8,7 +9,7 @@ export interface TimePickerOptions {
         maxValue: Date;
     };
 }
-export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'> {
+export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> {
     error?: string;
     hint?: string;
     required?: boolean;

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

@@ -1,7 +1,8 @@
-import cn from 'classnames';
-import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { usePopper } from 'react-popper';
+import cn from "classnames";
+import { forwardRef, useMemo, useRef, useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
+import { IconTime } from "@festo-ui/react-icons";
 import useForkRef from "../../helper/useForkRef.js";
 import useId from "../../helper/useId.js";
 import TimePickerDropdown from "./time-picker-dropdown/TimePickerDropdown.js";
@@ -22,24 +23,24 @@ const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const id = useId(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] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const customModifier = useMemo(() => ({
-    name: 'offset',
+    name: "offset",
     options: {
       offset: _ref2 => {
         let {
           placement
         } = _ref2;
-        if (placement === 'bottom') {
+        if (placement === "bottom") {
           return [0, -12];
         }
         return [0, 0];
@@ -88,12 +89,12 @@ const TimePicker = /*#__PURE__*/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();
     }
   };
@@ -110,10 +111,10 @@ const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: /*#__PURE__*/_jsxs("label", {
         htmlFor: id,
         className: "fr-time-picker fwe-input-text fwe-input-text-icon",
-        children: [/*#__PURE__*/_jsx("i", {
-          className: cn('fwe-icon fwe-icon-time-time', {
-            'fwe-color-hero': open,
-            'fwe-color-control-disabled': disabled
+        children: [/*#__PURE__*/_jsx(IconTime, {
+          className: cn({
+            "fwe-color-hero": open && !disabled,
+            "fwe-color-control-disabled": disabled
           })
         }), /*#__PURE__*/_jsx("input", {
           id: id,
@@ -122,7 +123,7 @@ const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           readOnly: true,
           required: required,
           className: cn({
-            'fwe-border-hero': open
+            "fwe-border-hero": open
           }),
           value: innerFormatDate(innerValue),
           disabled: disabled

package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts

@@ -1,7 +1,8 @@
-import './TimePickerDropdown.scss';
-import React, { RefObject } from 'react';
+import "./TimePickerDropdown.scss";
+import type React from "react";
+import { type RefObject } from "react";
 interface TimePickerDropdownProps {
-    timeFormat: '12' | '24';
+    timeFormat: "12" | "24";
     date: Date;
     onDateChange: (date: Date) => void;
     showSeconds?: boolean;

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

@@ -1,11 +1,10 @@
-import cn from 'classnames';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import cn from "classnames";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { IconCollapse, IconExpand } from "@festo-ui/react-icons";
 import useForkRef from "../../../helper/useForkRef.js";
 import LinkButton from "../../../components/link-button/LinkButton.js";
 import TimePickerInput from "./TimePickerInput.js";
 import useOnClickOutside from "../../../helper/useOnClickOutside.js";
-import IconCollapse from "../../../components/icons/collapse.js";
-import IconExpand from "../../../components/icons/expand.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -28,7 +27,7 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [innerDate, setInnerDate] = useState(date);
   useOnClickOutside(labelRef, () => onClose(innerDate), innerRef);
   const min = 0;
-  const hourMax = timeFormat === '12' ? 12 : 23;
+  const hourMax = timeFormat === "12" ? 12 : 23;
   const minutesSecondsMax = 59;
   let innerMinuteStepSize = 1;
   if (minuteStepSize) {
@@ -42,8 +41,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     });
   }, []);
   function handleKeyPress(e) {
-    if (e.key === 'Escape' || e.key === 'Enter') {
-      onClose(e.key === 'Enter' ? innerDate : undefined);
+    if (e.key === "Escape" || e.key === "Enter") {
+      onClose(e.key === "Enter" ? innerDate : undefined);
     }
   }
   function limitRange(newDate) {
@@ -105,7 +104,7 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     setInnerDate(newDate);
     setTmpSeconds(newDate.getSeconds().toString());
   }
-  const hours = timeFormat === '12' ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
+  const hours = timeFormat === "12" ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
   function toggleAmPm() {
     const newDate = new Date(innerDate);
     // Get the current hour in 24-hour format
@@ -120,7 +119,7 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
     setInnerDate(newDate);
     onDateChange(newDate);
   }
-  const formatNumberWithLeadingZero = number => (number < 10 ? '0' : '') + number;
+  const formatNumberWithLeadingZero = number => (number < 10 ? "0" : "") + number;
   return (
     /*#__PURE__*/
     // should not be an issue with dialog
@@ -129,8 +128,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
       role: "dialog",
       style: style,
       ref: combinedRef,
-      className: cn('fr-timepicker fwe-timepicker', {
-        'fwe-timepicker-am-pm': timeFormat === '12'
+      className: cn("fr-timepicker fwe-timepicker", {
+        "fwe-timepicker-am-pm": timeFormat === "12"
       }),
       onKeyDown: e => handleKeyPress(e),
       tabIndex: -1,
@@ -201,11 +200,11 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             icon: /*#__PURE__*/_jsx(IconCollapse, {})
           })]
         })]
-      }), timeFormat === '12' && /*#__PURE__*/_jsx("button", {
+      }), timeFormat === "12" && /*#__PURE__*/_jsx("button", {
         onClick: toggleAmPm,
         type: "button",
         className: "fwe-btn fwe-ml-m",
-        children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
+        children: innerDate.getHours() >= 12 ? "PM" : "AM"
       })]
     })
   );