@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.1

package/components/states/CustomState.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import StateButton from './StateButton';
-import StateIcon from './StateIcon';
-import { hasPaddingClass } from '../../utils/hasUtilityClass';
+import { isEmpty } from 'es-toolkit/compat';
+import StateButton from "./StateButton.js";
+import StateIcon from "./StateIcon.js";
+import { hasPaddingClass } from "../../utils/hasUtilityClass.js";
 const justify = {
     left: 'justify-content-start',
     center: 'justify-content-center',

package/components/states/EmptyState.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type EmptyStateProps = BaseStateProps;
 declare const EmptyState: (props: PropsWithChildren<EmptyStateProps>) => import("react/jsx-runtime").JSX.Element;

package/components/states/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CustomState from './CustomState';
+import CustomState from "./CustomState.js";
 const EmptyState = (props) => {
     const { icon = 'rioglyph-empty', ...remainingProps } = props;
     return _jsx(CustomState, { icon: icon, ...remainingProps });

package/components/states/ErrorState.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type ErrorStateProps = BaseStateProps;
 declare const ErrorState: (props: PropsWithChildren<ErrorStateProps>) => import("react/jsx-runtime").JSX.Element;

package/components/states/ErrorState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CustomState from './CustomState';
+import CustomState from "./CustomState.js";
 const ErrorState = (props) => {
     const { icon = 'rioglyph-truck-breakdown', ...remainingProps } = props;
     return _jsx(CustomState, { icon: icon, ...remainingProps });

package/components/states/ForbiddenState.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type ForbiddenStateProps = BaseStateProps;
 declare const ForbiddenState: (props: PropsWithChildren<ForbiddenStateProps>) => import("react/jsx-runtime").JSX.Element;

package/components/states/ForbiddenState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CustomState from './CustomState';
+import CustomState from "./CustomState.js";
 const ForbiddenState = (props) => {
     const { icon = 'rioglyph-ban-circle', ...remainingProps } = props;
     return _jsx(CustomState, { icon: icon, ...remainingProps });

package/components/states/MaintenanceState.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type MaintenanceStateProps = BaseStateProps;
 declare const MaintenanceState: (props: PropsWithChildren<MaintenanceStateProps>) => import("react/jsx-runtime").JSX.Element;

package/components/states/MaintenanceState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CustomState from './CustomState';
+import CustomState from "./CustomState.js";
 const MaintenanceState = (props) => {
     const { icon = 'rioglyph-wrench', ...remainingProps } = props;
     return _jsx(CustomState, { icon: icon, ...remainingProps });

package/components/states/NotBookedState.d.ts

@@ -1,4 +1,5 @@
-import React, { type PropsWithChildren } from 'react';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type NotBookedStateProps = BaseStateProps & {
     /**

package/components/states/NotBookedState.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import isArray from 'lodash/fp/isArray';
-import isEmpty from 'lodash/fp/isEmpty';
-import CustomState from './CustomState';
+import { isArray, isEmpty } from 'es-toolkit/compat';
+import CustomState from "./CustomState.js";
 const NotBookedState = (props) => {
     const { message, features, icon = 'rioglyph-stars', ...remainingProps } = props;
     const combinedMessages = (_jsxs(_Fragment, { children: [message && _jsx("div", { className: 'text-medium margin-bottom-20', children: message }), features && isArray(features) && !isEmpty(features) && (_jsx("ul", { className: 'feature-list icon-list margin-x-10pct-ls margin-y-10 text-size-12 text-size-14-sm', id: 'features', children: features.map((feature, index) => (_jsxs("li", { className: 'padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left', children: [_jsx("span", { className: 'rioglyph rioglyph-ok text-color-primary' }), _jsx("span", { className: 'text-color-darker', children: feature })] }, index))) }))] }));

package/components/states/NotFoundState.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type NotFoundStateProps = BaseStateProps;
 declare const NotFoundState: (props: PropsWithChildren<NotFoundStateProps>) => import("react/jsx-runtime").JSX.Element;

package/components/states/NotFoundState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CustomState from './CustomState';
+import CustomState from "./CustomState.js";
 const NotFoundState = (props) => {
     const { icon = 'rioglyph-looking-glass-man', ...remainingProps } = props;
     return _jsx(CustomState, { icon: icon, ...remainingProps });

package/components/states/StateButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { BUTTON_STYLE } from '../../Button';
 export type StateButtonProps = {
     /**

package/components/statsWidget/StatsWidget.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import StatsWidgetHeader from './StatsWidgetHeader';
-import StatsWidgetBody from './StatsWidgetBody';
-import StatsWidgetFooter from './StatsWidgetFooter';
+import StatsWidgetHeader from "./StatsWidgetHeader.js";
+import StatsWidgetBody from "./StatsWidgetBody.js";
+import StatsWidgetFooter from "./StatsWidgetFooter.js";
 const StatsWidget = (props) => {
     const { children, hasFilter = false, onFilterReset = () => { }, className, ...remainingProps } = props;
     const wrapperClasses = classNames('StatsWidget', className);

package/components/statsWidget/StatsWidgetBody.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type StatsWidgetBodyProps = {
     /**
      * Whether to use flex space-between for StatsWidgetNumbers.

package/components/statsWidget/StatsWidgetFooter.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type StatsWidgetFooterProps = {
     /**
      * Additional class names to be added to the element.

package/components/statsWidget/StatsWidgetHeader.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type StatsWidgetHeaderProps = {
     /**
      * Additional class names to be added to the element.

package/components/statsWidget/StatsWidgetNumber.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type MouseEventHandler } from 'react';
+import type { ReactNode, MouseEventHandler } from 'react';
 export type StatsWidgetNumberProps = {
     /**
      * The value to be shown.

package/components/statusBar/StatusBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';
-import StatusBarProgressBar from './StatusBarProgressBar';
-import StatusBarIcon from './StatusBarIcon';
-import StatusBarLabel from './StatusBarLabel';
+import { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from "./StatusBarConstants.js";
+import StatusBarProgressBar from "./StatusBarProgressBar.js";
+import StatusBarIcon from "./StatusBarIcon.js";
+import StatusBarLabel from "./StatusBarLabel.js";
 const iconDefaults = { name: '', alignment: LEFT };
 const labelDefaults = { value: '', alignment: RIGHT, weight: BOLD };
 const StatusBar = (props) => {

package/components/statusBar/StatusBarConstants.js

@@ -1,4 +1,4 @@
-import OverlayTrigger from '../overlay/OverlayTrigger';
+import OverlayTrigger from "../overlay/OverlayTrigger.js";
 // alignment / position
 export const LEFT = OverlayTrigger.LEFT;
 export const TOP = OverlayTrigger.TOP;

package/components/statusBar/StatusBarIcon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { LARGE, LEFT, SMALL } from './StatusBarConstants';
+import { LARGE, LEFT, SMALL } from "./StatusBarConstants.js";
 const StatusBarIcon = (props) => {
     const { icon, size } = props;
     if (!icon.name) {

package/components/statusBar/StatusBarLabel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';
+import { LARGE, LIGHT, SMALL, TOP } from "./StatusBarConstants.js";
 const StatusBarLabel = (props) => {
     const { label, size, className = '' } = props;
     if (!label.value) {

package/components/statusBar/StatusBarProgressBar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import Tooltip from '../tooltip/Tooltip';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-import { TOP } from './StatusBarConstants';
+import Tooltip from "../tooltip/Tooltip.js";
+import OverlayTrigger from "../overlay/OverlayTrigger.js";
+import { TOP } from "./StatusBarConstants.js";
 export const StatusBarProgressBar = (props) => {
     const { index, progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP }, useProgressDivider, } = props;
     const progressBarClasses = classNames('progress-bar', color ?? 'progress-bar-info', useProgressDivider && 'progress-divider', className);

package/components/svgImage/SvgElement.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { convertAttributes } from './svgConverter';
+import { convertAttributes } from "./svgConverter.js";
 const SvgElement = ({ node, colorMap }) => {
     const attributes = convertAttributes(node, colorMap);
     return React.createElement(node.tagName.toLowerCase(), {

package/components/svgImage/SvgImage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSvgLoader } from './useSvgLoader';
+import { useSvgLoader } from "./useSvgLoader.js";
 const BASE_CDN_URL = 'https://cdn.rio.cloud/riosvg';
 const SvgImage = (props) => {
     const { name, className = '', size = 150, baseUrl = BASE_CDN_URL, colorMap } = props;

package/components/svgImage/useSvgLoader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { convertAttributes, defaultColorMap } from './svgConverter';
-import SvgElement from './SvgElement';
+import { convertAttributes, defaultColorMap } from "./svgConverter.js";
+import SvgElement from "./SvgElement.js";
 export const useSvgLoader = (name, baseUrl, colorMap = defaultColorMap) => {
     const [svgElement, setSvgElement] = useState(null);
     const [error, setError] = useState(false);

package/components/switch/Switch.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import { getCurrentBackgroundColor } from '../../utils/currentColors';
+import { noop } from 'es-toolkit/function';
+import { getCurrentBackgroundColor } from "../../utils/currentColors.js";
 const Switch = forwardRef((props, ref) => {
     const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, className = '', labelPosition = children ? 'right' : undefined, onChange = noop, ...remainingProps } = props;
     const handleChange = (event) => {

package/components/table/SortArrows.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import toLower from 'lodash/fp/toLower';
+import { toLower } from 'es-toolkit/compat';
 const SortArrows = ({ direction }) => (_jsx("span", { className: `sort-arrows ${direction ? `sort-${toLower(direction)}` : ''}` }));
 export default SortArrows;

package/components/table/TableCardsSorting.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/noop';
-import Select from '../selects/Select';
-import ToggleButton from '../button/ToggleButton';
+import { noop } from 'es-toolkit/compat';
+import Select from "../selects/Select.js";
+import ToggleButton from "../button/ToggleButton.js";
 const TableCardsSorting = (props) => {
     const { sortName: controlledSortName, sortOrder: controlledSortOrder = 'asc', selectOptions, onSortChange = noop, className, } = props;
     const [sortName, setSortName] = useState(controlledSortName);

package/components/table/TableHead.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import SortArrows from './SortArrows';
+import SortArrows from "./SortArrows.js";
 const TableHead = (props) => {
     const { column, title, label, sortBy, sortDir, onClick = () => { }, className = '', children, ...remainingProps } = props;
     const tableHeadClassNames = classNames('user-select-none', 'sort-column', className);

package/components/table/TableSearch.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import ClearableInput from '../clearableInput/ClearableInput';
+import ClearableInput from "../clearableInput/ClearableInput.js";
 const TableSearch = (props) => {
     const { className, ...remainingProps } = props;
     return (_jsxs("div", { className: classNames('table-toolbar-search', 'input-group', className), children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search' }) }), _jsx(ClearableInput, { ...remainingProps })] }));

package/components/table/TableSettingsColumnButtons.d.ts

@@ -7,6 +7,6 @@ export type TableSettingsColumnButtonsProps = {
     disabled?: boolean;
     columnDetails?: TableColumnDetails;
     onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;
-    onOpenDetails?: (column: string, index: number, something: boolean) => void;
+    onOpenDetails?: (column: string) => void;
 };
 export declare const TableSettingsColumnButtons: (props: TableSettingsColumnButtonsProps) => import("react/jsx-runtime").JSX.Element;

package/components/table/TableSettingsColumnButtons.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import noop from 'lodash/noop';
+import { noop } from 'es-toolkit/compat';
 export const TableSettingsColumnButtons = (props) => {
     const { column = '', index = 0, columnDetails, columnOrder = [], openColumnsDetails = {}, disabled, onMoveColumn = noop, onOpenDetails = noop, } = props;
     const navButtonBase = classNames('btn btn-muted btn-icon-only btn-sm');

package/components/table/TableSettingsColumnDetails.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import noop from 'lodash/noop';
-import Slider from '../slider/Slider';
+import { noop } from 'es-toolkit/compat';
+import Slider from "../slider/Slider.js";
 export const TableSettingsColumnDetails = (props) => {
     const { width = 0, defaultWidth = 0, maxWidth, column, maxColumnWidth, onColumnWidthChange = noop, onResetColumnWidth = noop, } = props;
     const handleWidthInputChange = (event) => {

package/components/table/TableSettingsDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { TableColumnDetailsMap, TableColumnDetails } from './TableSettingsDialog.types';
 type TableSettingsDialogProps = {
     /**
@@ -50,7 +50,9 @@ type TableSettingsDialogProps = {
      * @example
      * { name: <FormattedMessage id='name' /> }
      */
-    columnLabels: any;
+    columnLabels: {
+        [name: string]: React.ReactNode;
+    };
     /**
      * Hide a sorted column will result in an error, so disable at least one important fallback column
      * or the sorted column (fallback column recommended)

package/components/table/TableSettingsDialog.js

@@ -1,18 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import isEqual from 'lodash/fp/isEqual';
-import isEmpty from 'lodash/fp/isEmpty';
-import mapValues from 'lodash/fp/mapValues';
-import some from 'lodash/fp/some';
-import noop from 'lodash/fp/noop';
+import { isEqual } from 'es-toolkit/predicate';
+import { isEmpty, mapValues, some } from 'es-toolkit/compat';
+import { noop } from 'es-toolkit/function';
 import { arrayMove } from '@dnd-kit/sortable';
-import Dialog from '../dialog/Dialog';
-import ClearableInput from '../clearableInput/ClearableInput';
-import { TableSettingsDialogFooter } from './TableSettingsDialogFooter';
-import { TableSettingsListContainer } from './TableSettingsListContainer';
-import { filterColumns } from './TableSettingsListItem';
+import Dialog from "../dialog/Dialog.js";
+import ClearableInput from "../clearableInput/ClearableInput.js";
+import { TableSettingsDialogFooter } from "./TableSettingsDialogFooter.js";
+import { TableSettingsListContainer } from "./TableSettingsListContainer.js";
+import { filterColumns } from "./TableSettingsListItem.js";
 const DEFAULT_COLUMN_WIDTH = 0;
 const MAX_COLUMN_WIDTH = 1000;
 const TableSettingsDialog = (props) => {
@@ -44,10 +41,10 @@ const TableSettingsDialog = (props) => {
         if (isEmpty(columnsDetailsToCheck)) {
             return false;
         }
-        const hasObjectChanged = some((details) => {
+        const hasObjectChanged = some(columnsDetailsToCheck, (details) => {
             const defaultWidth = Number.isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
             return details.width !== defaultWidth;
-        })(columnsDetailsToCheck);
+        });
         return hasObjectChanged;
     };
     // Update column details from outside if provided. Note, that in "sort columns only" mode
@@ -65,7 +62,7 @@ const TableSettingsDialog = (props) => {
         // For searching by name we need to get the label from the DOM as it may contain a FormattedMessage
         const labels = contentRef.current.getElementsByClassName('table-settings-item-label');
         const columnStrings = {};
-        [...labels].map(label => {
+        [...labels].forEach(label => {
             const dataKey = label.getAttribute('data-key');
             if (dataKey) {
                 const updatedLabel = label.textContent?.replace(/\r?\n|\r/g, '').toLowerCase();
@@ -94,12 +91,12 @@ const TableSettingsDialog = (props) => {
     const handleResetColumnChanges = () => setIsResetAll(true);
     const handleCancelResetColumnChanges = () => setIsResetAll(false);
     const resetColumnsDetails = (details) => {
-        return mapValues((singleColumnDetails) => {
+        return mapValues(details, (singleColumnDetails) => {
             return {
                 ...singleColumnDetails,
                 width: singleColumnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH,
             };
-        })(details);
+        });
     };
     const resetAllColumnChanges = () => {
         const defaultColumnsDetails = resetColumnsDetails(columnsDetails);

package/components/table/TableSettingsDialogFooter.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type TableSettingsDialogFooterProps = {
     hasChanged: boolean;
     isResetAll: boolean;

package/components/table/TableSettingsDialogFooter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import Button from '../../Button';
+import Button from "../../Button.js";
 export const TableSettingsDialogFooter = (props) => {
     const { hasChanged, isResetAll, immediateChange, resetButtonText, closeButtonText, cancelButtonText, applyButtonText, onHide, onResetColumnChanges, onDiscardChanges, onApplyChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, } = props;
     const restButtonClassNames = classNames('btn', 'btn-link', !hasChanged && 'disabled');

package/components/table/TableSettingsListContainer.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import TableSettingsListItem from './TableSettingsListItem';
+import TableSettingsListItem from "./TableSettingsListItem.js";
 export const TableSettingsListContainer = (props) => {
     const { items, itemProps, onSortEnd } = props;
     const [activeDraggedColumn, setActiveDraggedColumn] = useState(null);

package/components/table/TableSettingsListItem.js

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import isEmpty from 'lodash/fp/isEmpty';
-import noop from 'lodash/noop';
-import Checkbox from '../checkbox/Checkbox';
-import Collapse from '../collapse/Collapse';
-import { TableSettingsColumnDetails } from './TableSettingsColumnDetails';
-import { TableSettingsColumnButtons } from './TableSettingsColumnButtons';
+import { isEmpty, noop } from 'es-toolkit/compat';
+import Checkbox from "../checkbox/Checkbox.js";
+import Collapse from "../collapse/Collapse.js";
+import { TableSettingsColumnDetails } from "./TableSettingsColumnDetails.js";
+import { TableSettingsColumnButtons } from "./TableSettingsColumnButtons.js";
 const MAX_COLUMN_WIDTH = 1000;
 export const filterColumns = (searchValue, column, columnLabelStrings) => {
     if (!searchValue) {

package/components/table/TableToolbar.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type TableToolbarProps = {
     /**
      * Optional class names for the wrapper element.

package/components/table/TableViewToggles.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/noop';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-import Tooltip from '../tooltip/Tooltip';
+import { noop } from 'es-toolkit/compat';
+import OverlayTrigger from "../overlay/OverlayTrigger.js";
+import Tooltip from "../tooltip/Tooltip.js";
 // TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
 const wrapWithTooltip = (tooltipContent, element) => (_jsx(OverlayTrigger, { placement: 'bottom', overlay: _jsx(Tooltip, { id: 'tooltip', allowOnTouch: true, children: tooltipContent }), children: element }));
 const typeIcons = {

package/components/tag/Tag.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 const Tag = forwardRef((props, ref) => {

package/components/tag/TagList.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type TagListProps = {
     /**
      * Defines if the tag list is rendered inline or vertically.

package/components/tagManager/CustomSuggestionItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type CustomSuggestionItemProps = {
     value?: string | React.ReactNode;
     placeholder?: string | React.ReactNode;

package/components/tagManager/TagManager.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { TagManagerTag } from './TagManagerTag';
 export type { TagManagerTag } from './TagManagerTag';
 export type TagManagerProps = {

package/components/tagManager/TagManager.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import isEqual from 'lodash/fp/isEqual';
-import compact from 'lodash/fp/compact';
-import noop from 'lodash/fp/noop';
-import AutoSuggest from '../autosuggest/AutoSuggest';
-import CustomSuggestionItem from './CustomSuggestionItem';
-import TagManagerItemList from './TagManagerItemList';
+import { compact, isEmpty, noop } from 'es-toolkit/compat';
+import { isEqual } from 'es-toolkit/predicate';
+import AutoSuggest from "../autosuggest/AutoSuggest.js";
+import CustomSuggestionItem from "./CustomSuggestionItem.js";
+import TagManagerItemList from "./TagManagerItemList.js";
 const getCustomSuggestion = (value, placeholder) => ({
     customSuggestion: _jsx(CustomSuggestionItem, { value: value, placeholder: placeholder }),
     label: value,
@@ -30,11 +28,12 @@ const getNewSuggestion = (suggestion) => {
 };
 const buildSuggestions = (useCustomTags, customTagPlaceholder, dropdownSeparatorText) => (value, suggestions) => {
     const cleanedSuggestions = suggestions.map(cleanupTagState).filter(item => item.label);
+    const hasDropdownSeparatorText = typeof dropdownSeparatorText === 'string' && !isEmpty(dropdownSeparatorText);
     return compact([
         useCustomTags && getCustomSuggestion(value, customTagPlaceholder),
         useCustomTags &&
             !isEmpty(cleanedSuggestions) &&
-            !isEmpty(dropdownSeparatorText) &&
+            hasDropdownSeparatorText &&
             getSuggestionSeparator(dropdownSeparatorText),
         ...cleanedSuggestions,
     ]);

package/components/tagManager/TagManagerItemList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import TagList from '../tag/TagList';
-import Tag from '../tag/Tag';
+import TagList from "../tag/TagList.js";
+import Tag from "../tag/Tag.js";
 const TagManagerItemList = (props) => {
     const { tags, onRemoveFromTagList = () => { } } = props;
     return (_jsx(TagList, { inline: false, children: tags.map(tag => {

package/components/teaser/Teaser.d.ts

@@ -1,4 +1,5 @@
-import React, { type SyntheticEvent } from 'react';
+import type React from 'react';
+import type { SyntheticEvent } from 'react';
 import { type ButtonProps } from '../button/Button';
 export type TeaserProps = {
     /**

package/components/teaser/Teaser.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import Button from '../button/Button';
+import { noop } from 'es-toolkit/function';
+import Button from "../button/Button.js";
 const Teaser = (props) => {
     const { segmentation, verticalAlignment = 'top' } = props;
     const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';

package/components/timepicker/TimePicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type TimePickerProps = {
     /**
      * Value of the time as string. Note, when value is given the component is treated as controlled.