@festo-ui/react 8.1.0-dev.563 → 8.1.0-dev.565

package/lib/components/search-input/SearchInput.js

@@ -2,8 +2,7 @@ import { useRef } from 'react';
 import useSearchInput from "./useSearchInput.js";
 import useOnClickOutside from "../../helper/useOnClickOutside.js";
 import ClearButton from "./ClearButton.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SearchInput(_ref) {
   let {
     defaultValue,
@@ -39,6 +38,7 @@ function SearchInput(_ref) {
       placeholder: label,
       onFocus: handleFocus,
       type: "search",
+      "aria-label": "Search",
       onInput: handleInput,
       onKeyDown: handleKeyDown,
       value: innerValue
@@ -55,6 +55,7 @@ function SearchInput(_ref) {
       _jsx("div", {
         role: "option",
         tabIndex: -1,
+        "aria-label": suggestion.value,
         "aria-selected": selectedSuggestionIndex === i,
         onClick: () => handleSuggestionClick(suggestion),
         className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,

package/lib/components/snackbar/Snackbar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassNameProps } from '../../helper/types';
 import './Snackbar.scss';
 export interface SnackbarConfig extends ClassNameProps {
@@ -19,5 +18,5 @@ export interface SnackbarProps {
     onClose?: () => void;
     first?: boolean;
 }
-declare function Snackbar(props: SnackbarProps): JSX.Element;
+declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;
 export default Snackbar;

package/lib/components/snackbar/Snackbar.js

@@ -1,8 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Snackbar(props) {
   const {
     data,

package/lib/components/snackbar/SnackbarProvider.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
 import { SnackbarConfig } from './Snackbar';
 interface SnackbarProviderProps extends ClassNamePropsWithChildren {
     config?: SnackbarConfig;
 }
-declare function SnackbarProvider(props: SnackbarProviderProps): JSX.Element;
+declare function SnackbarProvider(props: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
 export default SnackbarProvider;

package/lib/components/snackbar/SnackbarProvider.js

@@ -2,8 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import Snackbar from "./Snackbar.js";
 import SnackbarContext from "./SnackbarContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SnackbarProvider(props) {
   const {
     config = {

package/lib/components/snackbar/useSnackbar.js

@@ -1,3 +1,3 @@
 import { useContext } from 'react';
 import SnackbarContext from "./SnackbarContext.js";
-export default (() => useContext(SnackbarContext));
+export default () => useContext(SnackbarContext);

package/lib/components/stepper-horizontal/StepperHorizontal.d.ts

@@ -3,5 +3,5 @@ interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'div'>, '
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }
-export declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default StepperHorizontal;

package/lib/components/stepper-horizontal/StepperHorizontal.js

@@ -1,9 +1,7 @@
 import cn from 'classnames';
 import React, { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className,

package/lib/components/stepper-vertical/StepperVertical.d.ts

@@ -3,5 +3,5 @@ interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'on
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }
-export declare const StepperVertical: (props: StepperVerticalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare const StepperVertical: (props: StepperVerticalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default StepperVertical;

package/lib/components/stepper-vertical/StepperVertical.js

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import React, { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
+const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -15,7 +15,7 @@ export const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }
   const stepComponents = React.Children.map(children, (child, i) => {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       return /*#__PURE__*/React.cloneElement(child, {
         ...child.props,
         isActive: i === stepIndex,

package/lib/components/stepper-vertical/step-vertical/StepVertical.js

@@ -1,7 +1,6 @@
 import cn from 'classnames';
 import { forwardRef, useEffect, useRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StepVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,

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

@@ -19,5 +19,5 @@ interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
         current: string;
     }) => void;
 }
-export declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default Tabs;

package/lib/components/tab/Tabs.js

@@ -4,11 +4,9 @@ import useForkRef from "../../helper/useForkRef.js";
 import useTabScroll from "./useTabScroll.js";
 import IconWrapper from "../icon-wrapper/IconWrapper.js"; // legacy: recommended for desktop only applications
 // responsive: desktop, tablet, mobile with scrollable tabs
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 let nextId = 0;
-export const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     config,
     children,
@@ -27,7 +25,7 @@ export const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   const observer = useRef(null);
   let activeId = '';
   React.Children.forEach(children, (element, i) => {
-    if ( /*#__PURE__*/React.isValidElement(element)) {
+    if (/*#__PURE__*/React.isValidElement(element)) {
       if (activeId === '') {
         activeId = `${componentId.current}-tab-panel-${i}`;
       } else if (element.props.active) {
@@ -37,7 +35,7 @@ export const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const [currentId, setId] = useState(activeId);
   const innerChildren = React.Children.map(children, (element, i) => {
-    if ( /*#__PURE__*/isValidElement(element)) {
+    if (/*#__PURE__*/isValidElement(element)) {
       const newId = `${componentId.current}-tab-panel-${i}`;
       return /*#__PURE__*/React.cloneElement(element, {
         isVisible: newId === currentId,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Tab = {
     icon?: React.ReactNode;
     active?: boolean;

package/lib/components/tab/tab-pane/TabPane.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../../helper/types';
 import { Tab } from '../interfaces';
 import './TabPane.scss';
@@ -7,5 +6,5 @@ export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
     isVisible?: boolean;
     tabId?: string;
 }
-declare function TabPane({ isVisible, children, className, tabId, id }: TabPaneProps): JSX.Element;
+declare function TabPane({ isVisible, children, className, tabId, id }: TabPaneProps): import("react/jsx-runtime").JSX.Element;
 export default TabPane;

package/lib/components/tab/useTabScroll.js

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 // provides details about the left and right edges of the tab element and the tab content element
 // these values are used to determine the visual position of the tab with respect of its parent container
+
 const useTabScroll = (tabLength, componentId, refs) => {
   const {
     elRef,

package/lib/components/table-header-cell/TableHeaderCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     active?: boolean;
     ascending: boolean;

package/lib/forms/checkbox/Checkbox.d.ts

@@ -13,5 +13,5 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     disabled?: boolean;
     indeterminate?: boolean;
 }
-declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
+declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/lib/forms/checkbox/Checkbox.js

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import useControlled from "../../helper/useControlled.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Checkbox(_ref) {
   let {
     id,

package/lib/forms/color-indicator/ColorIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
 import './ColorIndicator.scss';
 interface ColorIndicatorProps extends ClassNamePropsWithChildren {
@@ -8,5 +7,5 @@ interface ColorIndicatorProps extends ClassNamePropsWithChildren {
     showPopOver?: boolean;
     disabled?: boolean;
 }
-declare function ColorIndicator({ text, label, color, className, showPopOver, children, disabled, }: ColorIndicatorProps): JSX.Element;
+declare function ColorIndicator({ text, label, color, className, showPopOver, children, disabled, }: ColorIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default ColorIndicator;

package/lib/forms/color-indicator/ColorIndicator.js

@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import Popover from "../../components/popovers/popover/Popover.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function ColorIndicator(_ref) {
   let {
     text,
@@ -20,7 +18,6 @@ function ColorIndicator(_ref) {
     if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F0F2F3') {
       return '#b6bec6'; // = $control-border
     }
-
     return color;
   }
   const colorBox = /*#__PURE__*/_jsx("div", {

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

@@ -30,7 +30,6 @@ export default class ColorHelper {
         default:
         // no other option
       }
-
       h /= 6;
     }
     return {
@@ -88,7 +87,6 @@ export default class ColorHelper {
       default:
       // no other option
     }
-
     return {
       r: this.limitToByte(r * 255),
       g: this.limitToByte(g * 255),

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './ColorPicker.scss';
 import { ClassNameProps } from '../../helper/types';
 export declare const PREDEFINED_COLORS: string[];
@@ -11,5 +10,5 @@ interface ColorPickerProps extends ClassNameProps {
     onChange?: (color?: string | null) => void;
     onAlphaChange?: (alpha?: number) => void;
 }
-declare function ColorPicker({ palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, className, }: ColorPickerProps): JSX.Element;
+declare function ColorPicker({ palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, className, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
 export default ColorPicker;

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

@@ -1,15 +1,13 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useRef, useCallback, useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
 import classNames from 'classnames';
 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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+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'];
 function ColorPicker(_ref) {
   let {
@@ -45,6 +43,9 @@ function ColorPicker(_ref) {
   const blueId = useId();
   const hexId = useId();
   const alphaId = useId();
+  const gradientKnobRef = useRef(null);
+  const hueKnobRef = useRef(null);
+  const alphaKnobRef = useRef(null);
   function limitAlpha() {
     if (innerAlpha > 100) {
       return 100;
@@ -164,7 +165,6 @@ function ColorPicker(_ref) {
       default:
       // no other value possible
     }
-
     if (typeof currentInput !== 'number' || typeof currentInput === 'number' && currentInput > 255 && currentInput < 0) {
       const rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
       if (rgb) {
@@ -188,7 +188,6 @@ function ColorPicker(_ref) {
       default:
       // no other value possible
     }
-
     if (numberValue <= 255 && numberValue >= 0) {
       const rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
       if (rgb) {
@@ -249,8 +248,10 @@ function ColorPicker(_ref) {
           },
           onDrag: (e, data) => onGradientDrag(e, data),
           bounds: "parent",
+          nodeRef: gradientKnobRef,
           children: /*#__PURE__*/_jsx("div", {
-            className: "fwe-knob"
+            className: "fwe-knob",
+            ref: gradientKnobRef
           })
         })]
       }), /*#__PURE__*/_jsxs("div", {
@@ -272,11 +273,13 @@ function ColorPicker(_ref) {
           },
           onDrag: (e, data) => onHueDrag(e, data),
           bounds: "parent",
+          nodeRef: hueKnobRef,
           children: /*#__PURE__*/_jsx("div", {
             className: "fwe-knob",
             style: {
               background: `hsl(${hsv.h * 360}, 100%, 50%)`
-            }
+            },
+            ref: hueKnobRef
           })
         })]
       }), useAlpha && /*#__PURE__*/_jsxs("div", {
@@ -355,8 +358,10 @@ function ColorPicker(_ref) {
           },
           onDrag: (e, data) => onAlphaDrag(e, data),
           bounds: "parent",
+          nodeRef: alphaKnobRef,
           children: /*#__PURE__*/_jsx("div", {
-            className: "fwe-knob"
+            className: "fwe-knob",
+            ref: alphaKnobRef
           })
         })]
       })]
@@ -392,6 +397,7 @@ function ColorPicker(_ref) {
       }), /*#__PURE__*/_jsxs("div", {
         className: "fwe-d-flex",
         children: [inputType === 'HEX' && /*#__PURE__*/_jsx("label", {
+          "aria-label": "Hexadecimal Color",
           className: "fwe-input-text fwe-hex-input",
           htmlFor: hexId,
           children: /*#__PURE__*/_jsx("input", {
@@ -403,6 +409,7 @@ function ColorPicker(_ref) {
           })
         }), inputType === 'RGB' && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("label", {
+            "aria-label": "RGB Color Red",
             className: "fwe-input-text fwe-red-input",
             htmlFor: redId,
             children: /*#__PURE__*/_jsx("input", {
@@ -413,6 +420,7 @@ function ColorPicker(_ref) {
               id: redId
             })
           }), /*#__PURE__*/_jsx("label", {
+            "aria-label": "RGB Color Green",
             className: "fwe-input-text fwe-green-input",
             htmlFor: greenId,
             children: /*#__PURE__*/_jsx("input", {
@@ -423,6 +431,7 @@ function ColorPicker(_ref) {
               id: greenId
             })
           }), /*#__PURE__*/_jsx("label", {
+            "aria-label": "RGB Color Blue",
             className: "fwe-input-text fwe-blue-input",
             htmlFor: blueId,
             children: /*#__PURE__*/_jsx("input", {
@@ -434,6 +443,7 @@ function ColorPicker(_ref) {
             })
           })]
         }), useAlpha && /*#__PURE__*/_jsx("label", {
+          "aria-label": "Alpha Channel",
           className: "fwe-input-text fwe-alpha-input fwe-ml-auto",
           htmlFor: alphaId,
           children: /*#__PURE__*/_jsxs("span", {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
 import './DatePicker.scss';
 export interface DatePickerOptions {
@@ -18,5 +17,5 @@ export interface DatePickerProps extends ClassNamePropsWithChildren {
     onChange?: (date: Date) => void;
     id?: string;
 }
-declare function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue, formatDate, options, onChange, id: idProps, }: DatePickerProps): JSX.Element;
+declare function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue, formatDate, options, onChange, id: idProps, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

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

@@ -2,8 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import flatpickr from 'flatpickr';
 import useId from "../../helper/useId.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DatePicker(_ref) {
   let {
     children,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
 import './DateRangePicker.scss';
 export interface DatePickerOptions {
@@ -16,5 +15,5 @@ export interface DateRangePickerProps extends ClassNamePropsWithChildren {
     options?: DatePickerOptions;
     onChange?: (dates: Date[]) => void;
 }
-declare function DateRangePicker({ children, className, disabled, error, formatDate, hint, onChange, options, required, defaultValue, }: DateRangePickerProps): JSX.Element;
+declare function DateRangePicker({ children, className, disabled, error, formatDate, hint, onChange, options, required, defaultValue, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePicker;

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

@@ -3,8 +3,7 @@ import flatpickr from 'flatpickr';
 import rangePlugin from 'flatpickr/dist/plugins/rangePlugin.js';
 import { useEffect, useRef, useState } from 'react';
 import useId from "../../helper/useId.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DateRangePicker(_ref) {
   let {
     children,

package/lib/forms/radio/RadioButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
 export interface RadioProps extends ClassNamePropsWithChildren {
     id?: string;
@@ -12,5 +11,5 @@ export interface RadioProps extends ClassNamePropsWithChildren {
     disabled?: boolean;
     required?: boolean;
 }
-declare function Radio(props: RadioProps): JSX.Element;
+declare function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/lib/forms/radio/RadioButton.js

@@ -2,8 +2,7 @@ import { useContext } from 'react';
 import classNames from 'classnames';
 import RadioGroupContext from "./RadioGroupContext.js";
 import useId from "../../helper/useId.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Radio(props) {
   const {
     id: idProps,

package/lib/forms/radio/RadioGroupContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ContextProps {
     name: string;
     value: string;

package/lib/forms/segment/Segment.d.ts

@@ -10,5 +10,5 @@ interface SegmentProps extends ClassNamePropsWithChildren {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
     value?: any;
 }
-declare function Segment(props: SegmentProps): JSX.Element;
+declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;
 export default Segment;

package/lib/forms/segment/Segment.js

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import useControlled from "../../helper/useControlled.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultConfig = {
   outline: true,
   iconOnly: true

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

@@ -11,5 +11,5 @@ export interface SegmentControlProps extends ClassNameProps {
     id?: string;
     iconOnly?: boolean;
 }
-declare function SegmentControl(props: SegmentControlProps): JSX.Element;
+declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
 export default SegmentControl;

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

@@ -1,9 +1,7 @@
 import React, { useRef } from 'react';
 import classNames from 'classnames';
 import IconWrapper from "../../../components/icon-wrapper/IconWrapper.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function SegmentControl(props) {
   const {
     label,

package/lib/forms/select/Select.d.ts

@@ -19,7 +19,7 @@ export interface SelectProps<T> extends Omit<ComponentPropsWithoutRef<'div'>, 'o
     onOpenChange?: (value: boolean) => void;
     renderLabelContent?: (label?: string | string[]) => JSX.Element;
 }
-declare function SelectComponent<T>({ defaultValue, open, defaultOpen, value: controlled, label, options, onChange, required, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): JSX.Element;
+declare function SelectComponent<T>({ defaultValue, open, defaultOpen, value: controlled, label, options, onChange, required, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare const Select: <T>(props: SelectProps<T> & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => ReturnType<typeof SelectComponent>;

package/lib/forms/select/Select.js

@@ -4,8 +4,7 @@ import useControlled from "../../helper/useControlled.js";
 import { Wrapper, HiddenInput, SelectButton, OptionsContainer, SelectLabel } from "./internal/index.js";
 import useForkRef from "../../helper/useForkRef.js";
 import getChildren from "./internal/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SelectComponent(_ref, ref) {
   let {
     defaultValue = '',
@@ -93,7 +92,7 @@ function SelectComponent(_ref, ref) {
     }), error && /*#__PURE__*/_jsx("div", {
       className: "fwe-select-invalid",
       children: error
-    }), focused && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(OptionsContainer, {
+    }), focused && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(OptionsContainer, {
       multiple: multiple,
       ref: innerRef,
       config: config,

package/lib/forms/select/internal/HiddenInput.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { SelectOptionType } from '../select-option/SelectOption';
 interface HiddenInputProps<T> {
     value: any;
     onChange: (value: SelectOptionType<T>) => void;
     options: SelectOptionType<T>[];
 }
-export default function HiddenInput<T>({ value, onChange, options }: HiddenInputProps<T>): JSX.Element;
+export default function HiddenInput<T>({ value, onChange, options }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/forms/select/internal/ListItem.d.ts

@@ -11,7 +11,7 @@ export interface ListItemProps<T> extends React.ComponentPropsWithoutRef<'li'> {
     selectedLabel?: string | string[];
     withCheckbox?: boolean;
 }
-declare function ListItemComponent<T>({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }: ListItemProps<T>, ref: Ref<RefObject<HTMLLIElement>[]>): JSX.Element;
+declare function ListItemComponent<T>({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }: ListItemProps<T>, ref: Ref<RefObject<HTMLLIElement>[]>): import("react/jsx-runtime").JSX.Element;
 declare const ListItem: <T>(props: ListItemProps<T> & {
     ref?: React.Ref<React.RefObject<HTMLLIElement>[]> | undefined;
 }) => ReturnType<typeof ListItemComponent>;

package/lib/forms/select/internal/SelectButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SelectButtonProps {
     onToggle: () => void;
     focused?: boolean;

package/lib/forms/select/internal/SelectButtonContent.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 interface SelectButtonContentProps {
     label?: string | string[];
     renderLabelContent?: (label?: string | string[]) => JSX.Element;
     onClick: (label: string) => void;
 }
-export default function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): JSX.Element;
+export default function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +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 { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function SelectButtonContent(_ref) {
   let {
     label,

package/lib/forms/select/internal/SelectCheckbox.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { CheckboxProps } from '../../checkbox/Checkbox';
 export default function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
     withCheckbox?: boolean;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
 import Checkbox from "../../checkbox/Checkbox.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export default function SelectCheckbox(_ref) {
   let {
     children,