@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/hooks/useClickOutside.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
 export type EventListenerType = keyof DocumentEventMap;
+export declare const DEFAULT_EVENT_TYPES: EventListenerType[];
 /**
  * Custom hook to detect clicks outside a specified element.
  *
  * @param callback - The callback function to be called when a click outside the element is detected.
  * @param events - Array of event types to listen for.
+ * @param isActive - Flag to only listen for clicks when target element active.
  *
  * @returns A mutable ref object representing the target element.
  */
-declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => import("react").MutableRefObject<T>;
-export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => void;
+declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[], isActive?: boolean) => React.MutableRefObject<T>;
+export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[], isActive?: boolean) => void;
 export default useClickOutside;

package/hooks/useClickOutside.js

@@ -2,22 +2,28 @@
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 import { useEffect, useRef } from 'react';
+export const DEFAULT_EVENT_TYPES = ['mousedown', 'touchstart'];
 /**
  * Custom hook to detect clicks outside a specified element.
  *
  * @param callback - The callback function to be called when a click outside the element is detected.
  * @param events - Array of event types to listen for.
+ * @param isActive - Flag to only listen for clicks when target element active.
  *
  * @returns A mutable ref object representing the target element.
  */
-const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
+const useClickOutside = (callback, events = DEFAULT_EVENT_TYPES, isActive = true // Only listen when active
+) => {
     const targetRef = useRef(null);
-    useClickOutsideWithRef(targetRef, callback, events);
+    useClickOutsideWithRef(targetRef, callback, events, isActive);
     return targetRef;
 };
 // Internal use for now - extend it later to be used outside
-export const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstart']) => {
+export const useClickOutsideWithRef = (ref, callback, events = DEFAULT_EVENT_TYPES, isActive = true) => {
     useEffect(() => {
+        if (!isActive) {
+            return; // Simply return early if not active, no cleanup needed
+        }
         // In case the ref is actually a state and will be set via the state setter function
         const element = ref && 'current' in ref ? ref.current : ref;
         // Event listener function to check if the click is outside the target element
@@ -32,6 +38,6 @@ export const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'to
         return () => {
             events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [ref, callback, events]);
+    }, [ref, callback, events, isActive]);
 };
 export default useClickOutside;

package/hooks/useClipboard.js

@@ -8,7 +8,7 @@ import isNil from 'lodash/fp/isNil';
  * @returns An object containing functions and state related to clipboard operations.
  */
 const useClipboard = (options) => {
-    const { timeout = 2000 } = options !== null && options !== void 0 ? options : {};
+    const { timeout = 2000 } = options ?? {};
     const [error, setError] = useState(null);
     const [copied, setCopied] = useState(false);
     const [copyTimeout, setCopyTimeout] = useState(null);

package/hooks/useDebugInfo.js

@@ -16,16 +16,19 @@ const useDebugInfo = (componentName, props) => {
     const previousProps = useRef(props);
     const lastRenderTimestamp = useRef(Date.now());
     // Extract prop keys from the current and previous props
-    const propKeys = Object.keys(Object.assign(Object.assign({}, props), previousProps.current));
+    const propKeys = Object.keys({ ...props, ...previousProps.current });
     // Compare current props with previous props to find changed props
     changedProps.current = propKeys.reduce((obj, key) => {
         if (props[key] === previousProps.current[key]) {
             return obj;
         }
-        return Object.assign(Object.assign({}, obj), { [key]: {
+        return {
+            ...obj,
+            [key]: {
                 previous: previousProps.current[key],
                 current: props[key],
-            } });
+            },
+        };
     }, {});
     // Build debug information object
     const info = {

package/hooks/useFocusTrap.js

@@ -15,8 +15,8 @@ import { useEffect, useRef } from 'react';
 const useFocusTrap = (element) => {
     const ref = useRef(null);
     const handleFocus = (event) => {
-        const wrapper = element !== null && element !== void 0 ? element : ref.current;
-        const focusableElements = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelectorAll([
+        const wrapper = element ?? ref.current;
+        const focusableElements = wrapper?.querySelectorAll([
             'a[href]',
             'button',
             'textarea',
@@ -26,8 +26,8 @@ const useFocusTrap = (element) => {
             'input[type="checkbox"]',
             'select',
         ].join(', '));
-        const firstFocusableEl = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
-        const lastFocusableEl = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
+        const firstFocusableEl = focusableElements?.[0];
+        const lastFocusableEl = focusableElements?.[focusableElements.length - 1];
         const isTabPressed = event.key === 'Tab';
         if (!isTabPressed) {
             return;
@@ -35,19 +35,19 @@ const useFocusTrap = (element) => {
         // Handle: shift + tab
         if (event.shiftKey) {
             if (document.activeElement === firstFocusableEl) {
-                lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
+                lastFocusableEl?.focus();
                 event.preventDefault();
             }
             return;
         }
         // Handle: tab
         if (document.activeElement === lastFocusableEl) {
-            firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+            firstFocusableEl?.focus();
             event.preventDefault();
         }
     };
     useEffect(() => {
-        const wrapper = element !== null && element !== void 0 ? element : ref.current;
+        const wrapper = element ?? ref.current;
         if (wrapper) {
             wrapper.addEventListener('keydown', handleFocus);
         }

package/hooks/useFullscreen.js

@@ -1,5 +1,4 @@
 // inspired by https://github.com/imbhargav5/rooks/blob/main/src/hooks/useFullscreen.ts
-import { __awaiter } from "tslib";
 import { useState, useCallback } from 'react';
 import noop from 'lodash/fp/noop';
 import useEvent from './useEvent';
@@ -64,14 +63,14 @@ const useFullscreen = (options = {}) => {
     const [isFullscreen, setIsFullscreen] = useState(Boolean(initialFullscreenElement));
     const [fullscreenElement, setFullscreenElement] = useState(initialFullscreenElement);
     // Request
-    const requestFullscreen = useCallback((newTargetElement) => __awaiter(void 0, void 0, void 0, function* () {
+    const requestFullscreen = useCallback(async (newTargetElement) => {
         // check whether the new target element is a real DOM node or just a function
         const isHtmlElement = newTargetElement instanceof HTMLElement;
         try {
             const target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
             const requestFunctionName = getRequestFunctionName(target);
             if (requestFunctionName) {
-                return yield target[requestFunctionName](requestFullscreenOptions);
+                return await target[requestFunctionName](requestFullscreenOptions);
             }
             else {
                 throw new Error('Request function not found');
@@ -80,19 +79,19 @@ const useFullscreen = (options = {}) => {
         catch (error) {
             console.log(error);
         }
-    }), []);
+    }, []);
     // Exit
-    const exitFullscreen = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const exitFullscreen = useCallback(async () => {
         try {
             const exitFunctionName = getExitFunctionName();
             if (fullscreenElement && exitFunctionName) {
-                return yield document[exitFunctionName]();
+                return await document[exitFunctionName]();
             }
         }
         catch (error) {
             console.warn(error);
         }
-    }), [fullscreenElement]);
+    }, [fullscreenElement]);
     // Toggle
     const toggleFullscreen = useCallback((newTargetElement) => {
         if (fullscreenElement) {
@@ -115,9 +114,9 @@ const useFullscreen = (options = {}) => {
             setIsFullscreen(false);
             setFullscreenElement(null);
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event || new Event('default'), isOpen);
+        onChange?.call(document, event || new Event('default'), isOpen);
     };
-    const handleErrorEvent = () => (event) => onError === null || onError === void 0 ? void 0 : onError.call(document, event);
+    const handleErrorEvent = () => (event) => onError?.call(document, event);
     useEvent('fullscreenchange', handleChangeEvent);
     useEvent('webkitfullscreenchange', handleChangeEvent);
     useEvent('mozfullscreenchange', handleChangeEvent);

package/hooks/useHover.d.ts

@@ -1,9 +1,9 @@
-import React, { type RefObject } from 'react';
+import { type RefObject } from 'react';
 /**
  * Custom hook to detect hover state for a given HTML element.
  *
  * @param elementRef - The reference to the HTML element.
  * @returns A boolean value representing whether the element is being hovered over or not.
  */
-declare const useHover: <T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>) => boolean;
+declare const useHover: <T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>) => boolean;
 export default useHover;

package/hooks/useInterval.js

@@ -18,7 +18,7 @@ const useInterval = (callback, delay) => {
         const tick = () => savedCallback.current();
         if (typeof delay === 'number') {
             intervalRef.current = window.setInterval(tick, delay);
-            return () => { var _a; return window.clearInterval((_a = intervalRef.current) !== null && _a !== void 0 ? _a : undefined); };
+            return () => window.clearInterval(intervalRef.current ?? undefined);
         }
     }, [delay]);
     return intervalRef;

package/hooks/useKey.d.ts

@@ -9,5 +9,5 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
  *                                         If the first argument is a callback, this is the node (defaults to document).
  * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void | KeyboardEventType[]) | undefined, eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: (event: KeyboardEvent) => void | KeyboardEventType[], eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/hooks/useMutationObserver.js

@@ -21,7 +21,7 @@ const unRef = (target) => isRef(target) ? target.current : target;
  */
 const useMutationObserver = (target, callback = noop, options = DEFAULT_OPTIONS) => {
     const observer = useRef(null);
-    const disconnect = useCallback(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
+    const disconnect = useCallback(() => observer.current?.disconnect(), []);
     const observe = useCallback(() => {
         const targetElement = unRef(target);
         if (targetElement) {

package/hooks/usePostMessage.d.ts

@@ -25,7 +25,7 @@ export type RemoteAction = {
  * @param onReceiveMessage a callback function triggered when a message is received
  * @returns
  */
-declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: ((eventData: any) => void) | undefined) => {
+declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: (eventData: any) => void) => {
     sendMessageToParent: (message: RemoteAction) => void;
     sendMessageToWidget: (message: RemoteAction, targetFrames: HTMLIFrameElement | HTMLIFrameElement[]) => void;
 };

package/hooks/useResizeObserver.js

@@ -5,11 +5,10 @@ import { useRef, useLayoutEffect, useState, useCallback } from 'react';
  * @returns
  */
 const useResizeObserver = () => {
-    var _a, _b, _c, _d;
     const [observerEntry, setObserverEntry] = useState(null);
     const nodeRef = useRef(null);
     const observer = useRef(null);
-    const disconnect = useCallback(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
+    const disconnect = useCallback(() => observer.current?.disconnect(), []);
     const observe = useCallback(() => {
         observer.current = new ResizeObserver(([entry]) => setObserverEntry(entry));
         if (nodeRef.current) {
@@ -24,8 +23,8 @@ const useResizeObserver = () => {
         nodeRef,
         observerEntry,
         {
-            blockSize: (_b = (_a = observerEntry === null || observerEntry === void 0 ? void 0 : observerEntry.borderBoxSize) === null || _a === void 0 ? void 0 : _a.at(0)) === null || _b === void 0 ? void 0 : _b.blockSize,
-            inlineSize: (_d = (_c = observerEntry === null || observerEntry === void 0 ? void 0 : observerEntry.borderBoxSize) === null || _c === void 0 ? void 0 : _c.at(0)) === null || _d === void 0 ? void 0 : _d.inlineSize,
+            blockSize: observerEntry?.borderBoxSize?.at(0)?.blockSize,
+            inlineSize: observerEntry?.borderBoxSize?.at(0)?.inlineSize,
         },
     ];
 };

package/hooks/useStorage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type StorageType = 'localStorage' | 'sessionStorage';
 /**
  * A custom hook for managing state stored in localStorage.
@@ -9,7 +8,7 @@ export type StorageType = 'localStorage' | 'sessionStorage';
  * @returns A tuple containing the state value, a function to update the state, and a function
  *          to remove the value from localStorage.
  */
-export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>, () => void];
+export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => void];
 /**
  * A custom hook for managing state stored in sessionStorage.
  *
@@ -19,4 +18,4 @@ export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() =>
  * @returns A tuple containing the state value, a function to update the state,
  *          and a function to remove the value from sessionStorage.
  */
-export declare const useSessionStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>, () => void];
+export declare const useSessionStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => void];

package/hooks/useTimeout.js

@@ -32,7 +32,7 @@ const useTimeout = (callback, delay) => {
     return timeoutRef;
 };
 export const useChainedTimeout = () => {
-    const MAX_DELAY_MS = Math.pow(2, 31) - 1;
+    const MAX_DELAY_MS = 2 ** 31 - 1;
     const setChainedTimeout = (ref, fn, timeoutAtMs) => {
         const delayMs = timeoutAtMs - Date.now();
         ref.current =
@@ -40,7 +40,7 @@ export const useChainedTimeout = () => {
                 ? setTimeout(fn, delayMs)
                 : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
     };
-    const handleRef = useRef();
+    const handleRef = useRef(null);
     const { set, clear } = useMemo(() => {
         const clear = () => clearTimeout(handleRef.current);
         const set = (fn, delayMs = 0) => {

package/hooks/useToggle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom hook to handle toggle states.
+ *
+ * @param initialValue - The initial state of the toggle (default: false)
+ * @returns An object with the current value, toggle function, and control functions
+ */
+declare const useToggle: (initialValue?: boolean) => {
+    isToggled: boolean;
+    toggle: (eventOrCallback?: React.SyntheticEvent | ((newValue: boolean) => void)) => void;
+    enable: () => void;
+    disable: () => void;
+};
+export default useToggle;

package/hooks/useToggle.js

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+/**
+ * Custom hook to handle toggle states.
+ *
+ * @param initialValue - The initial state of the toggle (default: false)
+ * @returns An object with the current value, toggle function, and control functions
+ */
+const useToggle = (initialValue = false) => {
+    const [value, setValue] = useState(initialValue);
+    // Handle actual custom callbacks functions and
+    // events when assigning this function to a button directly
+    const toggle = useCallback((eventOrCallback) => {
+        setValue(prev => {
+            const newValue = !prev;
+            if (typeof eventOrCallback === 'function') {
+                // Call the callback with the new value
+                eventOrCallback(newValue);
+            }
+            return newValue;
+        });
+    }, []);
+    const enable = useCallback(() => setValue(true), []);
+    const disable = useCallback(() => setValue(false), []);
+    return {
+        isToggled: value,
+        toggle,
+        enable,
+        disable,
+    };
+};
+export default useToggle;

package/hooks/useUncontrollable.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 // forked from https://github.com/jquense/uncontrollable/blob/master/src/index.ts
 import { useCallback, useRef, useState } from 'react';
@@ -22,7 +21,7 @@ function useUncontrolledProp(propValue, defaultValue, handler) {
         isProp ? propValue : stateValue,
         useCallback((...args) => {
             const [value, ...rest] = args;
-            const returnValue = handler === null || handler === void 0 ? void 0 : handler(value, ...rest);
+            const returnValue = handler?.(value, ...rest);
             setState(value);
             return returnValue;
         }, [handler]),
@@ -31,11 +30,15 @@ function useUncontrolledProp(propValue, defaultValue, handler) {
 export { useUncontrolledProp };
 export function useUncontrolled(props, config) {
     return Object.keys(config).reduce((result, fieldName) => {
-        const _a = result, _b = defaultKey(fieldName), defaultValue = _a[_b], _c = fieldName, propsValue = _a[_c], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + ""]);
+        const { [defaultKey(fieldName)]: defaultValue, [fieldName]: propsValue, ...rest } = result;
         // @ts-ignore-next-line
         const handlerName = config[fieldName];
         // @ts-ignore-next-line
         const [value, handler] = useUncontrolledProp(propsValue, defaultValue, props[handlerName]);
-        return Object.assign(Object.assign({}, rest), { [fieldName]: value, [handlerName]: handler });
+        return {
+            ...rest,
+            [fieldName]: value,
+            [handlerName]: handler,
+        };
     }, props);
 }

package/lib/es/AccentBar.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/accentBar/AccentBar';
+export * from './components/accentBar/AccentBar';

package/lib/es/AccentBar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var AccentBar_1 = require("./components/accentBar/AccentBar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(AccentBar_1).default; } });
+tslib_1.__exportStar(require("./components/accentBar/AccentBar"), exports);

package/lib/es/Avatar.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/avatar/Avatar';
+export * from './components/avatar/Avatar';

package/lib/es/Avatar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var Avatar_1 = require("./components/avatar/Avatar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(Avatar_1).default; } });
+tslib_1.__exportStar(require("./components/avatar/Avatar"), exports);

package/lib/es/AvatarGroup.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/avatar/AvatarGroup';
+export * from './components/avatar/AvatarGroup';

package/lib/es/AvatarGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var AvatarGroup_1 = require("./components/avatar/AvatarGroup");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(AvatarGroup_1).default; } });
+tslib_1.__exportStar(require("./components/avatar/AvatarGroup"), exports);

package/lib/es/Banner.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/banner/Banner';
+export * from './components/banner/Banner';

package/lib/es/Banner.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var Banner_1 = require("./components/banner/Banner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(Banner_1).default; } });
+tslib_1.__exportStar(require("./components/banner/Banner"), exports);

package/lib/es/ButtonToolbar.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/button/ButtonToolbar';
+export * from './components/button/ButtonToolbar';

package/lib/es/ButtonToolbar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ButtonToolbar_1 = require("./components/button/ButtonToolbar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ButtonToolbar_1).default; } });
+tslib_1.__exportStar(require("./components/button/ButtonToolbar"), exports);

package/lib/es/Card.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/card/Card';
+export * from './components/card/Card';

package/lib/es/Card.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var Card_1 = require("./components/card/Card");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(Card_1).default; } });
+tslib_1.__exportStar(require("./components/card/Card"), exports);

package/lib/es/Colors.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var colors_json_1 = require("./styles/variables/colors/colors.json");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(colors_json_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(colors_json_1).default; } });

package/lib/es/DateRangePicker.js

@@ -10,7 +10,7 @@ const DateRangePicker_1 = tslib_1.__importDefault(require("./components/datepick
  * @deprecated This will be removed from the UIKIT at some time.
  */
 const DateRangePicker = (props) => {
-    const { children } = props, remainingProps = tslib_1.__rest(props, ["children"]);
-    return (0, jsx_runtime_1.jsx)(DateRangePicker_1.default, Object.assign({}, remainingProps, { children: children }));
+    const { children, ...remainingProps } = props;
+    return (0, jsx_runtime_1.jsx)(DateRangePicker_1.default, { ...remainingProps, children: children });
 };
 exports.DateRangePicker = DateRangePicker;

package/lib/es/FormLabel.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/formLabel/FormLabel';
+export * from './components/formLabel/FormLabel';

package/lib/es/FormLabel.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FormLabel_1 = require("./components/formLabel/FormLabel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FormLabel_1).default; } });
+tslib_1.__exportStar(require("./components/formLabel/FormLabel"), exports);

package/lib/es/LabeledElement.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/formLabel/LabeledElement';
+export * from './components/formLabel/LabeledElement';

package/lib/es/LabeledElement.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var LabeledElement_1 = require("./components/formLabel/LabeledElement");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(LabeledElement_1).default; } });
+tslib_1.__exportStar(require("./components/formLabel/LabeledElement"), exports);

package/lib/es/StatsWidgets.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var StatsWidgets_1 = require("./components/statsWidget/StatsWidgets");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(StatsWidgets_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(StatsWidgets_1).default; } });

package/lib/es/StepButton.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/button/StepButton';
+export * from './components/button/StepButton';

package/lib/es/{Onboarding.js → StepButton.js}

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 const tslib_1 = require("tslib");
-var Onboarding_1 = require("./components/onboarding/Onboarding");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(Onboarding_1).default; } });
-tslib_1.__exportStar(require("./components/onboarding/Onboarding"), exports);
+var StepButton_1 = require("./components/button/StepButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(StepButton_1).default; } });
+tslib_1.__exportStar(require("./components/button/StepButton"), exports);

package/lib/es/TagList.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var TagList_1 = require("./components/tag/TagList");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TagList_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(TagList_1).default; } });

package/lib/es/VirtualList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/virtualList/VirtualList';
+export * from './components/virtualList/VirtualList';

package/lib/es/VirtualList.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var VirtualList_1 = require("./components/virtualList/VirtualList");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(VirtualList_1).default; } });
+tslib_1.__exportStar(require("./components/virtualList/VirtualList"), exports);

package/lib/es/components/accentBar/AccentBar.d.ts

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react';
+type AccentBarProps = {
+    /**
+     * Defines the color by setting it to a UIKIT bg-<name> class name.
+     *
+     * @default 'bg-secondary'
+     */
+    color?: string;
+    /**
+     * Defines if the element is rendered as a stretching bar or just a centered circle.
+     *
+     * @default false
+     */
+    circle?: boolean;
+    /**
+     * Additional class names passed to the actual element.
+     */
+    className?: string;
+};
+declare const AccentBar: (props: PropsWithChildren<AccentBarProps>) => import("react/jsx-runtime").JSX.Element;
+export default AccentBar;

package/lib/es/components/accentBar/AccentBar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const AccentBar = (props) => {
+    const { color = 'bg-secondary', circle = false, className, children } = props;
+    const accentBarClassName = (0, classnames_1.default)('AccentBar', circle && 'AccentBarCircle', color, className);
+    const wrapperClassName = (0, classnames_1.default)('display-flex', circle ? 'align-items-center' : 'align-items-stretch');
+    if (children) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClassName, children: [(0, jsx_runtime_1.jsx)("div", { className: accentBarClassName }), children] }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: accentBarClassName });
+};
+exports.default = AccentBar;