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

package/components/assetTree/TypeCounter.js

@@ -1,11 +1,10 @@
 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, useRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import useHover from '../../hooks/useHover';
-import mergeRefs from '../../utils/mergeRefs';
-import { withRioglyphPrefix } from './treeUtils';
+import { noop } from 'es-toolkit/function';
+import useHover from "../../hooks/useHover.js";
+import mergeRefs from "../../utils/mergeRefs.js";
+import { withRioglyphPrefix } from "./treeUtils.js";
 const TypeCounter = forwardRef((props, ref) => {
     const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop, type, hideOnZero = false, ...remainingProps } = props;
     const internalRef = useRef(null);

package/components/assetTree/treeReducer.d.ts

@@ -1,7 +1,7 @@
-import type { GroupedItem, TreeItem, TreeGroup } from './Tree';
+import type { GroupedItems, TreeItem, TreeGroup } from './Tree';
 import type { TreeSummaryCounts, AssetType } from './TreeSummary';
 export type State = {
-    groupedItems: GroupedItem[];
+    groupedItems: GroupedItems;
     flatItems: TreeItem[];
     allChecked: boolean;
     searchValue: string;
@@ -24,7 +24,7 @@ type Action = {
     payload: TreeItem[];
 } | {
     type: 'groupedItemsChanged';
-    payload: GroupedItem[];
+    payload: GroupedItems;
 } | {
     type: 'typeFilterChanged';
     payload: string[];
@@ -39,7 +39,7 @@ export declare const assetCounted: (payload: TreeSummaryCounts) => Action;
 export declare const allCheckedChanged: (payload: boolean) => Action;
 export declare const searchValueChanged: (payload: string) => Action;
 export declare const flatItemsChanged: (payload: TreeItem[]) => Action;
-export declare const groupedItemsChanged: (payload: GroupedItem[]) => Action;
+export declare const groupedItemsChanged: (payload: GroupedItems) => Action;
 export declare const typeFilterChanged: (payload: string[]) => Action;
 export declare const visibleTypeCountersChanged: (payload: AssetType[]) => Action;
 export declare const emptyGroupsChanged: (payload: TreeGroup[]) => Action;

package/components/assetTree/treeUtils.d.ts

@@ -1,18 +1,18 @@
 import type { TreeItem, TreeGroup, GroupedItems } from './Tree';
-export declare const notEqual: (value: any, other: any) => boolean;
+export declare const notEqual: (a: any, b: any) => boolean;
 export declare const notEmpty: (value?: any) => boolean;
 export declare const filterOutByItemId: (list: string[]) => (item: TreeItem | TreeGroup) => boolean;
 export declare const containsItemById: (list: string[]) => (item: TreeGroup) => boolean;
 export declare const getListIds: (list: TreeItem[] | TreeGroup[]) => string[];
-export declare const getTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
-export declare const getSubTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
-export declare const debounceFn: <T extends (...args: any[]) => any>(fn: T) => import("lodash").DebouncedFunc<T>;
+export declare const getTypeCounts: (items: TreeItem[]) => Record<string, number>;
+export declare const getSubTypeCounts: (items: TreeItem[]) => Record<string, number>;
+export declare const debounceFn: <T extends (...args: any[]) => any>(fn: T) => import("es-toolkit/compat").DebouncedFunc<T>;
 export declare const getFullName: (item: TreeItem) => string;
 export declare const getFlatItems: (items: TreeItem[], searchValue: string) => TreeItem[];
-export declare const filterEmptyGroups: import("lodash/fp").LodashFilter2x1<GroupedItems>;
-export declare const filterAssetByType: (types?: string[]) => import("lodash/fp").LodashFilter2x1<TreeItem>;
+export declare const filterEmptyGroups: (groups: GroupedItems) => GroupedItems;
+export declare const filterAssetByType: (items: TreeItem[], types?: string[]) => TreeItem[];
 export declare const excludeFromList: <T>(list: T[], itemId: T) => T[];
-export declare const sortGroupsByName: (groups: GroupedItems) => TreeItem[];
+export declare const sortGroupsByName: (groups: GroupedItems) => GroupedItems;
 export declare const sortGroupItemsByName: (groups: GroupedItems) => GroupedItems;
 export declare const getMappedItemsToGroups: (groups: TreeGroup[], items: TreeItem[]) => GroupedItems;
 export declare const addOrRemoveFromList: <T>(list: T[], item: T) => T[];

package/components/assetTree/treeUtils.js

@@ -1,32 +1,36 @@
-import isEmpty from 'lodash/fp/isEmpty';
-import isEqual from 'lodash/fp/isEqual';
-import orderBy from 'lodash/fp/orderBy';
-import isObject from 'lodash/fp/isObject';
-import debounce from 'lodash/fp/debounce';
-import countBy from 'lodash/fp/countBy';
-import flow from 'lodash/fp/flow';
-import filter from 'lodash/fp/filter';
-import negate from 'lodash/fp/negate';
-import mapValues from 'lodash/fp/mapValues';
-import { searchNormalized } from '../../utils/searchNormalized';
+import { countBy, debounce, filter, isEmpty, isObject, mapValues, negate } from 'es-toolkit/compat';
+import { isEqual } from 'es-toolkit/predicate';
+import { orderBy } from 'es-toolkit/array';
+import { searchNormalized } from "../../utils/searchNormalized.js";
 const SEARCH_DEBOUNCE = 100;
 export const notEqual = negate(isEqual);
 export const notEmpty = negate(isEmpty);
 export const filterOutByItemId = (list) => (item) => !list.includes(item.id);
 export const containsItemById = (list) => (item) => list.includes(item.id);
 export const getListIds = (list) => list.map(listItem => listItem.id);
-export const getTypeCounts = (items) => countBy(item => item.type, items);
-export const getSubTypeCounts = (items) => countBy(item => item.subType, items);
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-export const debounceFn = (fn) => debounce(SEARCH_DEBOUNCE, fn);
+export const getTypeCounts = (items) => countBy(items, item => item.type);
+export const getSubTypeCounts = (items) => countBy(items, item => item.subType);
+// biome-ignore lint/suspicious/noExplicitAny: we don't know the type
+export const debounceFn = (fn) => debounce(fn, SEARCH_DEBOUNCE);
 const isNameObject = (item) => isObject(item.name);
 export const getFullName = (item) => `${item.name.firstName} ${item.name.lastName}`;
 const getName = (item) => (isNameObject(item) ? getFullName(item) : item.name);
-const orderByName = orderBy([
+const orderTreeItemsByName = (items) => orderBy(items, [
     (item) => isNameObject(item)
         ? item.name.lastName.toLowerCase()
-        : (item.name.toLowerCase() ?? ''),
+        : (item.name?.toLowerCase() ?? ''),
 ], ['asc']);
+const orderGroupedItemsByName = (groups) => {
+    const groupArray = Object.values(groups);
+    const sortedArray = orderBy(groupArray, [
+        (group) => (typeof group.name === 'string' ? group.name.toLowerCase() : String(group.name)) ?? '',
+    ], ['asc']);
+    const sortedGroups = {};
+    for (const group of sortedArray) {
+        sortedGroups[group.id] = group;
+    }
+    return sortedGroups;
+};
 // TODO: extend to use provided external search function instead?
 const filterByName = (searchValue) => (item) => {
     if (searchValue) {
@@ -34,29 +38,37 @@ const filterByName = (searchValue) => (item) => {
     }
     return true;
 };
-export const getFlatItems = (items, searchValue) => flow(filter(filterByName(searchValue)), orderByName)(items);
-export const filterEmptyGroups = filter((group) => notEmpty(group.items));
-export const filterAssetByType = (types = []) => filter((asset) => types.includes(asset.type));
+export const getFlatItems = (items, searchValue) => filter(orderTreeItemsByName(items), filterByName(searchValue));
+export const filterEmptyGroups = (groups) => {
+    const result = {};
+    Object.values(groups).forEach(group => {
+        if (notEmpty(group.items)) {
+            result[group.id] = group;
+        }
+    });
+    return result;
+};
+export const filterAssetByType = (items, types = []) => filter(items, (asset) => types.includes(asset.type));
 export const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
 export const sortGroupsByName = (groups) => {
     const fixedGroups = {};
     const sortableGroups = {};
-    mapValues((group) => {
+    mapValues(groups, (group) => {
         if (group.position === 'last') {
             fixedGroups[group.id] = { ...group };
         }
         else {
             sortableGroups[group.id] = { ...group };
         }
-    })(groups);
-    const sortedGroups = orderByName(sortableGroups);
+    });
+    const sortedGroups = orderGroupedItemsByName(sortableGroups);
     return isEmpty(fixedGroups) ? sortedGroups : { ...sortedGroups, ...fixedGroups };
 };
 export const sortGroupItemsByName = (groups) => {
-    return mapValues((group) => ({
+    return mapValues(groups, (group) => ({
         ...group,
-        items: orderByName(group.items),
-    }))(groups);
+        items: orderTreeItemsByName(group.items),
+    }));
 };
 export const getMappedItemsToGroups = (groups, items) => {
     const mappedGroups = {};

package/components/assetTree/useTreeExpansion.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { isEqual } from 'lodash/fp';
+import { isEqual } from 'es-toolkit/compat';
 export const useTreeExpansion = (expandedGroups, onExpandGroupsChange) => {
     const [internalExpandedGroups, setInternalExpandedGroups] = useState(expandedGroups);
     const [previousExpandedGroups, setPreviousExpandedGroups] = useState(expandedGroups);

package/components/assetTree/useTreeVirtualization.d.ts

@@ -1,4 +1,4 @@
-import type { TreeItem, GroupedItem } from './Tree';
+import type { TreeItem, GroupedItem, GroupedItems } from './Tree';
 type VirtualizedItem = {
     type: 'group';
     data: GroupedItem;
@@ -10,7 +10,7 @@ type VirtualizedItem = {
     id: string;
     groupId: string;
 };
-export declare const useTreeVirtualization: (groupedItems: GroupedItem[], flatItems: TreeItem[], hasSearchValue: boolean, hasGroups: boolean, internalExpandedGroups: string[] | undefined, scrollElementRef: React.RefObject<HTMLDivElement>, overscan: number) => {
+export declare const useTreeVirtualization: (groupedItems: GroupedItems, flatItems: TreeItem[], hasSearchValue: boolean, hasGroups: boolean, internalExpandedGroups: string[] | undefined, scrollElementRef: React.RefObject<HTMLDivElement>, overscan: number) => {
     virtualizedItems: VirtualizedItem[];
     virtualizer: import("@tanstack/virtual-core").Virtualizer<any, Element>;
 };

package/components/assetTree/useTreeVirtualization.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import map from 'lodash/fp/map';
+import { map } from 'es-toolkit/compat';
 import { useVirtualizer } from '@tanstack/react-virtual';
 export const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups, scrollElementRef, overscan) => {
     const virtualizedItems = useMemo(() => {
@@ -14,7 +14,7 @@ export const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, h
         // Virtualize grouped list, when there's no search value and we have groups
         if (hasGroups) {
             const flatList = [];
-            map((group) => {
+            map(groupedItems, (group) => {
                 const isExpanded = internalExpandedGroups?.includes(group.id) ?? false;
                 // Add the group header
                 flatList.push({
@@ -34,7 +34,7 @@ export const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, h
                         });
                     });
                 }
-            })(groupedItems);
+            });
             return flatList;
         }
         // Virtualize flat list when no groups are provided initially

package/components/autosuggest/AutoSuggest.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export type AutoSuggestSuggestion = {
     /**
      * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.

package/components/autosuggest/AutoSuggest.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: <explanation>
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import isNil from 'lodash/fp/isNil';
-import noop from 'lodash/fp/noop';
-import ClearableInput from '../clearableInput/ClearableInput';
-import { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';
-import { useDropDirection } from '../../utils/useDropDirection';
-import DropdownHeader from '../selects/DropdownHeader';
-import MenuItem from '../menuItems/MenuItem';
-import useClickOutside from '../../hooks/useClickOutside';
-import AutoSuggestAddons from './AutoSuggestAddons';
-import DropdownSpinner from './DropdownSpinner';
-import NoItemMessage from './NoItemMessage';
+import { isEmpty } from 'es-toolkit/compat';
+import { noop } from 'es-toolkit/function';
+import { isNil } from 'es-toolkit/predicate';
+import ClearableInput from "../clearableInput/ClearableInput.js";
+import { scrollItemIntoView, UP, DOWN } from "../../utils/scrollItemIntoView.js";
+import { useDropDirection } from "../../utils/useDropDirection.js";
+import DropdownHeader from "../selects/DropdownHeader.js";
+import MenuItem from "../menuItems/MenuItem.js";
+import useClickOutside from "../../hooks/useClickOutside.js";
+import AutoSuggestAddons from "./AutoSuggestAddons.js";
+import DropdownSpinner from "./DropdownSpinner.js";
+import NoItemMessage from "./NoItemMessage.js";
 export const AutoSuggest = (props) => {
     const { id, onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion, customSuggestionKey, getSuggestionValue, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
         id,
@@ -69,12 +68,12 @@ export const AutoSuggest = (props) => {
     const closeMenu = () => {
         setIsOpen(false);
     };
-    const handleFocus = (event) => {
+    const handleFocus = (_event) => {
         if (openOnFocus) {
             openMenu();
         }
         if (inputProps.onFocus) {
-            inputProps.onFocus(event);
+            inputProps.onFocus();
         }
     };
     const handleKeyDown = (event) => {
@@ -142,7 +141,7 @@ export const AutoSuggest = (props) => {
         const currentHighlightedSuggestion = currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];
         onSuggestionHighlighted(currentHighlightedSuggestion);
     };
-    const clearInputValue = (event) => {
+    const clearInputValue = (_event) => {
         setValue('');
         setHighlightedItemIndex(-1);
         // Focus the input field after clearing it's value in order to allow
@@ -155,7 +154,7 @@ export const AutoSuggest = (props) => {
         handleHighlightedSuggestionChanged(-1);
         // Additionally, fire the onClear callback as the service may react on it
         if (inputProps.onClear) {
-            inputProps.onClear(event);
+            inputProps.onClear();
         }
     };
     const getDefaultSuggestionValue = (suggestion) => {

package/components/autosuggest/AutoSuggestAddons.d.ts

@@ -1,4 +1,5 @@
-import React, { type PropsWithChildren } from 'react';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
 export type AutoSuggestAddonsProps = {
     icon?: string;
     leadingInputAddons?: React.ReactNode[];

package/components/autosuggest/DropdownSpinner.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Spinner from '../spinner/Spinner';
+import Spinner from "../spinner/Spinner.js";
 const DropdownSpinner = ({ className }) => (_jsx("ul", { className: className, children: _jsx("div", { className: 'display-flex justify-content-center padding-10', children: _jsx(Spinner, {}) }) }));
 export default DropdownSpinner;

package/components/autosuggest/NoItemMessage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 declare const NoItemMessage: ({ message }: {
     message: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/components/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 export type AvatarProps = ComponentProps<'div'> & {
     /**
      * When a name is provided, the Avatar automatically generates and displays the initials of that name.

package/components/avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import SimpleTooltip from '../tooltip/SimpleTooltip';
-import AvatarContent from './AvatarContent';
+import SimpleTooltip from "../tooltip/SimpleTooltip.js";
+import AvatarContent from "./AvatarContent.js";
 const TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;
 const TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;
 const Avatar = (props) => {

package/components/avatar/AvatarGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import Avatar from './Avatar';
+import Avatar from "./Avatar.js";
 const AvatarGroup = (props) => {
     const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;
     const avatars = React.Children.toArray(children);

package/components/banner/Banner.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type PropsWithChildren } from 'react';
+import { type ReactNode } from 'react';
 type BannerProps = {
     /**
      * Defines if the content is shown or not.
@@ -57,16 +57,16 @@ type BannerProps = {
 };
 declare const Banner: {
     (props: BannerProps): import("react/jsx-runtime").JSX.Element;
-    Page: ({ className, children, ...remainingProps }: PropsWithChildren<{
+    Page: ({ className, children, ...remainingProps }: import("react").PropsWithChildren<{
         className?: string;
     }>) => import("react/jsx-runtime").JSX.Element;
-    Icon: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerIcon").BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
+    Icon: ({ className, children, ...remainingProps }: import("react").PropsWithChildren<import("./BannerIcon").BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: import("react").PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
         title?: string | React.ReactElement;
         actions?: React.ReactElement;
         minWidthBreakpoint?: number;
         className?: string;
     }>) => import("react/jsx-runtime").JSX.Element;
-    Actions: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerActions").BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ className, children, ...remainingProps }: import("react").PropsWithChildren<import("./BannerActions").BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Banner;

package/components/banner/Banner.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, createContext, useRef } from 'react';
-import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
+import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
 import classNames from 'classnames';
-import Card from '../card/Card';
-import Button from '../button/Button';
-import BannerPageActions from './BannerActions';
-import BannerPageContent from './BannerContent';
-import BannerPageIcon from './BannerIcon';
-import BannerPage from './BannerPage';
+import Card from "../card/Card.js";
+import Button from "../button/Button.js";
+import BannerPageActions from "./BannerActions.js";
+import BannerPageContent from "./BannerContent.js";
+import BannerPageIcon from "./BannerIcon.js";
+import BannerPage from "./BannerPage.js";
 const BannerContext = createContext(undefined);
 const Banner = (props) => {
     const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
@@ -62,7 +62,7 @@ const Banner = (props) => {
                     height: { duration: 0.2 },
                     opacity: { duration: 0.2 },
                     ease: 'easeInOut',
-                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
+                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { mode: 'wait', children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
                                                 duration: 1.5,
                                                 ease: [0.25, 1, 0.5, 1],
                                             }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));

package/components/banner/BannerContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import useResizeObserver from '../../useResizeObserver';
+import useResizeObserver from "../../useResizeObserver.js";
 const DEFAULT_MIN_WIDTH_BREAKPOINT = 400;
 const BannerContent = (props) => {
     const { title, actions, children, minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT, className = '', ...remainingProps } = props;

package/components/barList/BarList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
-import { SortDirection } from '../../utils/SortUtils';
-import { useSortedBars } from './useSortedBars';
+import { motion } from 'motion/react';
+import { SortDirection } from "../../utils/SortUtils.js";
+import { useSortedBars } from "./useSortedBars.js";
 // Animation variants
 const containerVariants = {
     animate: {

package/components/barList/useSortedBars.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { SortDirection } from '../../utils/SortUtils';
+import { SortDirection } from "../../utils/SortUtils.js";
 export function useSortedBars(data, sortOrder, getValue) {
     return useMemo(() => {
         if (sortOrder === 'none') {

package/components/bottomSheet/BottomSheet.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import isFunction from 'lodash/fp/isFunction';
-import { motion } from 'framer-motion';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+import { motion } from 'motion/react';
+import { isFunction } from 'es-toolkit/predicate';
+import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
 const OFFSET_POSITION = -1000;
 const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {

package/components/bottomSheet/TimedBottomSheet.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import noop from 'lodash/fp/noop';
-import BottomSheet from './BottomSheet';
-import useTimeout from '../../hooks/useTimeout';
-import useLocalStorage from '../../useLocalStorage';
+import { noop } from 'es-toolkit/function';
+import BottomSheet from "./BottomSheet.js";
+import useTimeout from "../../hooks/useTimeout.js";
+import useLocalStorage from "../../useLocalStorage.js";
 const DEFAULT_SHOW_AFTER = 0; // immediately after mount
 const DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour
 const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');

package/components/button/Button.d.ts

@@ -2,6 +2,7 @@ import React, { type ForwardRefExoticComponent, type HTMLProps, type PropsWithCh
 import type { ObjectValues } from '../../utils/ObjectValues';
 export declare const STYLES_MAP: {
     readonly DEFAULT: "default";
+    readonly UNSTYLED: "unstyled";
     readonly PRIMARY: "primary";
     readonly SECONDARY: "secondary";
     readonly INFO: "info";
@@ -125,6 +126,7 @@ export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'>
 type Props = PropsWithChildren<ButtonProps>;
 type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {
     DEFAULT: 'default';
+    UNSTYLED: 'unstyled';
     PRIMARY: 'primary';
     SECONDARY: 'secondary';
     INFO: 'info';

package/components/button/Button.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import { createButtonRipple } from '../../utils/buttonEffect';
-import useMergeRefs from '../../hooks/useMergeRefs';
+import { noop } from 'es-toolkit/function';
+import { createButtonRipple } from "../../utils/buttonEffect.js";
+import useMergeRefs from "../../hooks/useMergeRefs.js";
 export const STYLES_MAP = {
     DEFAULT: 'default',
+    UNSTYLED: 'unstyled',
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
     INFO: 'info',

package/components/button/ButtonToolbar.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
 export type ButtonToolbarProps = ComponentProps<'div'> & {
     /**
      * Align buttons to a defined side or set them apart.

package/components/button/StepButton.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { type ButtonProps } from './Button';
 export type StepButtonProps = ButtonProps & {
     /**

package/components/button/StepButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Button from './Button';
+import Button from "./Button.js";
 const StepButton = (props) => {
     const { direction = 'next', ...remainingProps } = props;
     const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';

package/components/button/ToggleButton.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { type ButtonProps } from './Button';
 export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
     /**

package/components/button/ToggleButton.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Button from './Button';
+import Button from "./Button.js";
 const ToggleButton = (props) => _jsx(Button, { ...props, asToggle: true });
 export default ToggleButton;

package/components/calendarStripe/CalendarStripe.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type CalendarStripeProps = {
     /**
      * The minimum width in pixel of a single day column
@@ -20,10 +20,6 @@ export type CalendarStripeProps = {
      * @default 7
      */
     maxDays?: number;
-    /**
-     * @deprecated Please use `renderDay` instead.
-     */
-    render?: React.ReactNode;
     /**
      * A function that renders each individual day to be displayed.
      *

package/components/calendarStripe/CalendarStripe.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import noop from 'lodash/noop';
-import useAfterMount from '../../hooks/useAfterMount';
-import useElementSize from '../../hooks/useElementSize';
-import usePrevious from '../../hooks/usePrevious';
-import { hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasHoverScaleClass, hasHoverTextColorClass, hasOverflowClass, hasPaddingClass, hasRoundedClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, } from '../../utils/hasUtilityClass';
+import { AnimatePresence, motion } from 'motion/react';
+import { noop } from 'es-toolkit/compat';
+import useAfterMount from "../../hooks/useAfterMount.js";
+import useElementSize from "../../hooks/useElementSize.js";
+import usePrevious from "../../hooks/usePrevious.js";
+import { hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasHoverScaleClass, hasHoverTextColorClass, hasOverflowClass, hasPaddingClass, hasRoundedClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, } from "../../utils/hasUtilityClass.js";
 const DEFAULT_MIN_WITH = 200;
 const DEFAULT_MIN_DAYS = 1;
 const DEFAULT_MAX_DAYS = 7;
@@ -29,12 +29,8 @@ const getFirstColumnItem = (node) => {
     return getFirstColumnItem(node.children[0]);
 };
 const CalendarStripe = forwardRef((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = props;
-    if (render) {
-        console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
-            ' Please use the "renderDay" prop instead.');
-    }
-    if (!render && !renderDay) {
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = props;
+    if (!renderDay) {
         console.error('CalendarStripe component is missing the required "renderDay" prop');
     }
     const [firstDate, setFirstDate] = useState(startDate);
@@ -119,6 +115,6 @@ const CalendarStripe = forwardRef((props, ref) => {
     const baseButtonClassNames = classNames(!hasAlignItemsClass(buttonClassName) && 'align-items-center', !hasDisplayClass(buttonClassName) && 'display-flex', !hasHoverScaleClass(buttonClassName) && 'hover-scale-105', !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest', !hasPaddingClass(buttonClassName) && 'padding-10', !hasCursorClass(buttonClassName) && 'cursor-pointer', !hasTextColorClass(buttonClassName) && 'text-color-darker', !hasTextSizeClass(buttonClassName) && 'text-size-12', !hasAlignSelfClass(buttonClassName) && 'align-self-stretch', buttonClassName);
     const daysWrapperClassNames = classNames(!hasDisplayClass(daysWrapperClassName) && 'display-flex', !hasSpaceClass(daysWrapperClassName) && 'space-x--1', !hasUserSelectClass(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
     const dayWrapperClassNames = classNames(ITEM_NAME, !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0', !hasSpaceClass(dayWrapperClassName) && 'space-x--1', !hasUserSelectClass(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
-    return (_jsxs("div", { ref: ref, className: wrapperClassNames, children: [_jsx("div", { className: baseButtonClassNames, onClick: handlePrev, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }), _jsx("div", { className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef, children: _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION }, children: _jsx("div", { className: daysWrapperClassNames, children: dates.map(date => (_jsxs("div", { className: dayWrapperClassNames, children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }, `${getDateString(date)}`))) }) }, getDateString(firstDate)) }) }), _jsx("div", { className: baseButtonClassNames, onClick: handleNext, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })] }));
+    return (_jsxs("div", { ref: ref, className: wrapperClassNames, children: [_jsx("div", { className: baseButtonClassNames, onClick: handlePrev, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }), _jsx("div", { className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef, children: _jsx(AnimatePresence, { mode: 'wait', custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION }, children: _jsx("div", { className: daysWrapperClassNames, children: dates.map(date => (_jsx("div", { className: dayWrapperClassNames, children: renderDay ? renderDay(date) : null }, `${getDateString(date)}`))) }) }, getDateString(firstDate)) }) }), _jsx("div", { className: baseButtonClassNames, onClick: handleNext, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })] }));
 });
 export default CalendarStripe;

package/components/card/Card.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
 export type CardProps = ComponentProps<'div'> & {
     /**
      * Shadow classes.