@rio-cloud/rio-uikit 1.2.2 → 1.4.0

package/lib/es/hooks/useTimeout.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainedTimeout = void 0;
 const react_1 = require("react");
 // See www.joshwcomeau.com/snippets/react-hooks/use-timeout/
 /**
@@ -33,4 +34,43 @@ const useTimeout = (callback, delay) => {
     }, [delay]);
     return timeoutRef;
 };
+const useChainedTimeout = () => {
+    const MAX_DELAY_MS = Math.pow(2, 31) - 1;
+    const setChainedTimeout = (ref, fn, timeoutAtMs) => {
+        const delayMs = timeoutAtMs - Date.now();
+        ref.current =
+            delayMs <= MAX_DELAY_MS
+                ? setTimeout(fn, delayMs)
+                : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
+    };
+    const handleRef = (0, react_1.useRef)();
+    const { set, clear } = (0, react_1.useMemo)(() => {
+        const clear = () => clearTimeout(handleRef.current);
+        const set = (fn, delayMs = 0) => {
+            clear();
+            if (delayMs <= MAX_DELAY_MS) {
+                // For simplicity, if the timeout is short, just set a normal timeout.
+                handleRef.current = setTimeout(fn, delayMs);
+            }
+            else {
+                setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+            }
+        };
+        return {
+            set,
+            clear,
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clear();
+        };
+    }, [clear]);
+    return {
+        set,
+        clear,
+        handleRef,
+    };
+};
+exports.useChainedTimeout = useChainedTimeout;
 exports.default = useTimeout;

package/lib/es/hooks/useUncontrollable.d.ts

@@ -0,0 +1,13 @@
+export type Handler = (value: any, ...args: any[]) => any;
+export declare function defaultKey(key: string): string;
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue: TProp, handler?: THandler): readonly [TProp, THandler];
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue?: TProp | undefined, handler?: THandler): readonly [TProp | undefined, (...args: Parameters<THandler>) => ReturnType<THandler> | void];
+export { useUncontrolledProp };
+type FilterFlags<Base, Condition> = {
+    [Key in keyof Base]: NonNullable<Base[Key]> extends Condition ? Key : never;
+};
+type AllowedNames<Base, Condition> = FilterFlags<Base, Condition>[keyof Base];
+type ConfigMap<TProps extends object> = {
+    [p in keyof TProps]?: AllowedNames<TProps, Function>;
+};
+export declare function useUncontrolled<TProps extends object, TDefaults extends string = never>(props: TProps, config: ConfigMap<TProps>): Omit<TProps, TDefaults>;

package/lib/es/hooks/useUncontrollable.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUncontrolled = exports.useUncontrolledProp = exports.defaultKey = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+// forked from https://github.com/jquense/uncontrollable/blob/master/src/index.ts
+const react_1 = require("react");
+function defaultKey(key) {
+    return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
+}
+exports.defaultKey = defaultKey;
+function useUncontrolledProp(propValue, defaultValue, handler) {
+    const wasPropRef = (0, react_1.useRef)(propValue !== undefined);
+    const [stateValue, setState] = (0, react_1.useState)(defaultValue);
+    const isProp = propValue !== undefined;
+    const wasProp = wasPropRef.current;
+    wasPropRef.current = isProp;
+    /**
+     * If a prop switches from controlled to Uncontrolled
+     * reset its value to the defaultValue
+     */
+    if (!isProp && wasProp && stateValue !== defaultValue) {
+        setState(defaultValue);
+    }
+    return [
+        isProp ? propValue : stateValue,
+        (0, react_1.useCallback)((...args) => {
+            const [value, ...rest] = args;
+            const returnValue = handler === null || handler === void 0 ? void 0 : handler(value, ...rest);
+            setState(value);
+            return returnValue;
+        }, [handler]),
+    ];
+}
+exports.useUncontrolledProp = useUncontrolledProp;
+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 = tslib_1.__rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + ""]);
+        // @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 });
+    }, props);
+}
+exports.useUncontrolled = useUncontrolled;

package/lib/es/styles/variables/colors/colors.json

@@ -18,7 +18,7 @@
     "brand-info": "#4B80A6",
     "brand-success": "#5cb85c",
     "brand-warning": "#ff8e3c",
-    "brand-danger": "#d90000",
+    "brand-danger": "#e22837",
     "brand-info-decent": "#f5f8fb",
     "brand-success-decent": "#f6fbf5",
     "brand-warning-decent": "#fdf5f0",
@@ -37,8 +37,8 @@
     "color-map-marker-info": "#3f759b",
     "color-map-marker-success": "#5cb85c",
     "color-map-marker-warning": "#ff8e3c",
-    "color-map-marker-danger": "#d90000",
-    "color-rating-1": "#d90000",
+    "color-map-marker-danger": "#e22837",
+    "color-rating-1": "#e22837",
     "color-rating-2": "#ff8e3c",
     "color-rating-3": "#f8c575",
     "color-rating-4": "#5cb85c",

package/lib/es/useElapsedTime.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useElapsedTime';
+export * from './hooks/useElapsedTime';

package/lib/es/useElapsedTime.js

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

package/lib/es/utils/colorScheme.js

@@ -12,12 +12,11 @@ exports.THEME_SYSTEM = 'system';
 exports.THEME_LIGHT = 'light';
 exports.THEME_DARK = 'dark';
 const updateHtmlScheme = (scheme) => {
-    const html = document.documentElement;
     if (scheme) {
-        html.setAttribute(exports.THEME_DATA_ATTRIBUTE, scheme);
+        document.documentElement.setAttribute(exports.THEME_DATA_ATTRIBUTE, scheme);
     }
     else {
-        html.removeAttribute(exports.THEME_DATA_ATTRIBUTE);
+        document.documentElement.removeAttribute(exports.THEME_DATA_ATTRIBUTE);
     }
 };
 const getSchemeFromCookie = () => {
@@ -61,7 +60,7 @@ exports.getColorScheme = getColorScheme;
  * @param scheme The color scheme to save.
  */
 const setColorScheme = (scheme) => {
-    const isDevEnv = (window === null || window === void 0 ? void 0 : window.location.host.startsWith('localhost')) || (window === null || window === void 0 ? void 0 : window.location.host.startsWith('127.0.0.1'));
+    const isDevEnv = window.location.host.startsWith('localhost') || window.location.host.startsWith('127.0.0.1');
     const newCookieValues = encodeURIComponent(scheme);
     const domain = isDevEnv ? 'localhost' : DOMAIN;
     document.cookie = `${COOKIE_NAME}=${newCookieValues};domain=${domain};expires=${EXPIRATION_DATE};path=${PATH}`;
@@ -71,11 +70,14 @@ exports.setColorScheme = setColorScheme;
  * Initiates listening for theme change events.
  */
 const listenForSchemeChange = () => {
-    window === null || window === void 0 ? void 0 : window.addEventListener('message', event => {
-        if (event.data === exports.THEME_CHANGE_EVENT) {
-            readColorSchemeFromCookie();
+    window.addEventListener('message', ({ data }) => {
+        var _a;
+        if (data === exports.THEME_CHANGE_EVENT) {
+            (0, exports.getColorScheme)();
             // Re-send the event to all iframes that might not be notified yet
-            [...document === null || document === void 0 ? void 0 : document.getElementsByTagName('iframe')].map(frame => { var _a; return (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(exports.THEME_CHANGE_EVENT, '*'); });
+            for (const iframe of document.getElementsByTagName('iframe')) {
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(exports.THEME_CHANGE_EVENT, '*');
+            }
         }
     }, false);
 };

package/lib/es/utils/currentColors.d.ts

@@ -0,0 +1,3 @@
+export declare const currentColorOptions: readonly ["primary", "secondary", "info", "success", "warning", "danger"];
+export type CurrentColor = (typeof currentColorOptions)[number];
+export declare const getCurrentBackgroundColor: (color: CurrentColor) => string;

package/lib/es/utils/currentColors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentBackgroundColor = exports.currentColorOptions = void 0;
+exports.currentColorOptions = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
+const currentColorMapping = {
+    primary: '--brand-primary',
+    secondary: '--brand-secondary',
+    info: '--brand-info',
+    success: '--brand-success',
+    warning: '--brand-warning',
+    danger: '--brand-danger',
+};
+const getCurrentBackgroundColor = (color) => `var(${currentColorMapping[`${color}`]})`;
+exports.getCurrentBackgroundColor = getCurrentBackgroundColor;

package/lib/es/utils/hasUtilityClass.d.ts

@@ -0,0 +1,30 @@
+declare const hasAlignContentClass: (classes: string) => boolean;
+declare const hasAlignItemsClass: (classes: string) => boolean;
+declare const hasAlignSelfClass: (classes: string) => boolean;
+declare const hasBgClass: (classes: string) => boolean;
+declare const hasBorderClass: (classes: string) => boolean;
+declare const hasBorderStyleClass: (classes: string) => boolean;
+declare const hasBorderWidthClass: (classes: string) => boolean;
+declare const hasCursorClass: (classes: string) => boolean;
+declare const hasDisplayClass: (classes: string) => boolean;
+declare const hasFlexClass: (classes: string) => boolean;
+declare const hasGapClass: (classes: string) => boolean;
+declare const hasHeightClass: (classes: string) => boolean;
+declare const hasHoverBgClass: (classes: string) => boolean;
+declare const hasHoverOpacityClass: (classes: string) => boolean;
+declare const hasHoverScaleClass: (classes: string) => boolean;
+declare const hasHoverTextColorClass: (classes: string) => boolean;
+declare const hasMarginClass: (classes: string) => boolean;
+declare const hasMaxHeightClass: (classes: string) => boolean;
+declare const hasMinHeightClass: (classes: string) => boolean;
+declare const hasOpacityClass: (classes: string) => boolean;
+declare const hasOverflowClass: (classes: string) => boolean;
+declare const hasPaddingClass: (classes: string) => boolean;
+declare const hasRioglyphClass: (classes: string) => boolean;
+declare const hasRoundedClass: (classes: string) => boolean;
+declare const hasScaleClass: (classes: string) => boolean;
+declare const hasSpaceClass: (classes: string) => boolean;
+declare const hasTextColorClass: (classes: string) => boolean;
+declare const hasTextSizeClass: (classes: string) => boolean;
+declare const hasUserSelectClass: (classes: string) => boolean;
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };

package/lib/es/utils/hasUtilityClass.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasUserSelectClass = exports.hasTextSizeClass = exports.hasTextColorClass = exports.hasSpaceClass = exports.hasScaleClass = exports.hasRoundedClass = exports.hasRioglyphClass = exports.hasPaddingClass = exports.hasOverflowClass = exports.hasOpacityClass = exports.hasMinHeightClass = exports.hasMaxHeightClass = exports.hasMarginClass = exports.hasHoverTextColorClass = exports.hasHoverScaleClass = exports.hasHoverOpacityClass = exports.hasHoverBgClass = exports.hasHeightClass = exports.hasGapClass = exports.hasFlexClass = exports.hasDisplayClass = exports.hasCursorClass = exports.hasBorderWidthClass = exports.hasBorderStyleClass = exports.hasBorderClass = exports.hasBgClass = exports.hasAlignSelfClass = exports.hasAlignItemsClass = exports.hasAlignContentClass = void 0;
+const hasClass = (utilityClass) => {
+    return (classes) => {
+        if (classes.includes(utilityClass)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
+const hasAlignContentClass = hasClass('align-content-');
+exports.hasAlignContentClass = hasAlignContentClass;
+const hasAlignItemsClass = hasClass('align-items-');
+exports.hasAlignItemsClass = hasAlignItemsClass;
+const hasAlignSelfClass = hasClass('align-self');
+exports.hasAlignSelfClass = hasAlignSelfClass;
+const hasBgClass = hasClass('bg-');
+exports.hasBgClass = hasBgClass;
+const hasBorderClass = hasClass('border-');
+exports.hasBorderClass = hasBorderClass;
+const hasBorderStyleClass = hasClass('border-style-');
+exports.hasBorderStyleClass = hasBorderStyleClass;
+const hasBorderWidthClass = hasClass('border-width');
+exports.hasBorderWidthClass = hasBorderWidthClass;
+const hasCursorClass = hasClass('cursor-');
+exports.hasCursorClass = hasCursorClass;
+const hasDisplayClass = hasClass('display-');
+exports.hasDisplayClass = hasDisplayClass;
+const hasFlexClass = hasClass('flex-');
+exports.hasFlexClass = hasFlexClass;
+const hasGapClass = hasClass('gap-');
+exports.hasGapClass = hasGapClass;
+const hasHeightClass = hasClass('height-');
+exports.hasHeightClass = hasHeightClass;
+const hasHoverBgClass = hasClass('hover-bg-');
+exports.hasHoverBgClass = hasHoverBgClass;
+const hasHoverOpacityClass = hasClass('hover-opacity-');
+exports.hasHoverOpacityClass = hasHoverOpacityClass;
+const hasHoverScaleClass = hasClass('hover-scale-');
+exports.hasHoverScaleClass = hasHoverScaleClass;
+const hasHoverTextColorClass = hasClass('hover-text-color-');
+exports.hasHoverTextColorClass = hasHoverTextColorClass;
+const hasMarginClass = hasClass('margin-');
+exports.hasMarginClass = hasMarginClass;
+const hasMaxHeightClass = hasClass('max-height-');
+exports.hasMaxHeightClass = hasMaxHeightClass;
+const hasMinHeightClass = hasClass('min-height-');
+exports.hasMinHeightClass = hasMinHeightClass;
+const hasOpacityClass = hasClass('opacity-');
+exports.hasOpacityClass = hasOpacityClass;
+const hasOverflowClass = hasClass('overflow-');
+exports.hasOverflowClass = hasOverflowClass;
+const hasPaddingClass = hasClass('padding-');
+exports.hasPaddingClass = hasPaddingClass;
+const hasRioglyphClass = hasClass('rioglyph-');
+exports.hasRioglyphClass = hasRioglyphClass;
+const hasRoundedClass = hasClass('rounded-');
+exports.hasRoundedClass = hasRoundedClass;
+const hasScaleClass = hasClass('scale-');
+exports.hasScaleClass = hasScaleClass;
+const hasSpaceClass = hasClass('space-');
+exports.hasSpaceClass = hasSpaceClass;
+const hasTextColorClass = hasClass('text-color-');
+exports.hasTextColorClass = hasTextColorClass;
+const hasTextSizeClass = hasClass('text-size');
+exports.hasTextSizeClass = hasTextSizeClass;
+const hasUserSelectClass = hasClass('user-select-');
+exports.hasUserSelectClass = hasUserSelectClass;

package/lib/es/utils/init/initCSS.js

@@ -66,3 +66,15 @@ const checkCSSVersion = () => {
     });
 };
 exports.checkCSSVersion = checkCSSVersion;
+// remote URL is not supported by most browsers yet
+// export const addTabsClippingSVG = () => {
+//     const clippingSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+//     clippingSVG.setAttribute('width', '0');
+//     clippingSVG.setAttribute('height', '0');
+//     clippingSVG.setAttribute('id', 'tabs-rounded-clipping-mask');
+//     clippingSVG.innerHTML = `
+//         <clipPath id='tabs-rounded-clip-mask'>
+//             <path fill-rule='evenodd' d='M0 4a4 4 0 0 0 4-4v4z' />
+//         </clipPath>`;
+//     document.body.appendChild(clippingSVG);
+// };

package/lib/es/utils/mergeRefs.d.ts

@@ -1,3 +1,3 @@
-import React, { Ref } from 'react';
+import React, { type Ref } from 'react';
 declare const mergeRefs: <T>(refs: React.Ref<T>[]) => React.Ref<T>;
 export default mergeRefs;

package/lib/es/values/Trigger.d.ts

@@ -4,6 +4,5 @@ export declare const TRIGGER: {
     readonly CLICK: "click";
     readonly FOCUS: "focus";
 };
-type TriggerType = ObjectValues<typeof TRIGGER>;
+export type TriggerType = ObjectValues<typeof TRIGGER>;
 export type Trigger = TriggerType | TriggerType[];
-export {};

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.2.2"
+    "version": "1.4.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.2.2",
+    "version": "1.4.0",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -43,15 +43,17 @@
     "module": "index.js",
     "types": "index.d.ts",
     "less": "./styles/css/rio-uikit.less",
-    "files": ["**/*.*"],
+    "files": [
+        "**/*.*"
+    ],
     "devDependencies": {
         "@testing-library/dom": "9.3.3",
         "@testing-library/jest-dom": "5.17.0",
         "@testing-library/react": "12.1.5",
         "@testing-library/user-event": "14.5.2",
         "@types/heremaps": "3.1.14",
-        "@types/lodash": "4.17.5",
-        "@types/react": "18.3.3",
+        "@types/lodash": "4.17.7",
+        "@types/react": "18.3.5",
         "@types/react-dom": "18.3.0",
         "@types/react-input-mask": "3.0.5",
         "@types/react-redux": "7.1.33",
@@ -60,7 +62,7 @@
         "@typescript-eslint/parser": "6.13.2",
         "@vitejs/plugin-react": "4.3.1",
         "@vitest/coverage-c8": "0.33.0",
-        "autoprefixer": "10.4.19",
+        "autoprefixer": "10.4.20",
         "backstopjs": "6.3.23",
         "copyfiles": "2.4.1",
         "dotenv": "16.4.5",
@@ -68,21 +70,20 @@
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-compat": "4.2.0",
         "eslint-plugin-getsentry": "2.0.0",
-        "eslint-plugin-import": "2.29.1",
+        "eslint-plugin-import": "2.30.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "eslint-plugin-prettier": "5.1.3",
-        "eslint-plugin-react": "7.34.2",
+        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-react": "7.35.2",
         "eslint-plugin-react-hooks": "4.6.2",
-        "jsdom": "22.1.0",
+        "jsdom": "25.0.0",
         "jsdom-global": "3.0.2",
         "less": "4.2.0",
         "license-checker": "25.0.1",
-        "postcss": "8.4.38",
+        "postcss": "8.4.45",
         "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
-        "postcss-variable-compress": "2.1.0",
         "pre-commit": "1.2.2",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-intl": "6.6.8",
@@ -92,8 +93,8 @@
         "tiny-invariant": "1.3.3",
         "typescript": "4.9.5",
         "vite": "4.5.0",
-        "vite-plugin-zip-pack": "1.2.3",
-        "vitest": "1.6.0",
+        "vite-plugin-zip-pack": "1.2.4",
+        "vitest": "2.0.5",
         "webfonts-generator": "github:rio-cloud/webfonts-generator#f666e60803da9155175a7f1775e09671d47a383b"
     },
     "peerDependencies": {
@@ -104,7 +105,7 @@
         "@dnd-kit/core": "6.1.0",
         "@dnd-kit/modifiers": "6.0.1",
         "@dnd-kit/sortable": "7.0.2",
-        "@formkit/auto-animate": "0.8.1",
+        "@formkit/auto-animate": "0.8.2",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1",
         "events": "3.3.0",
@@ -112,7 +113,7 @@
         "iframe-resizer-react": "1.1.0",
         "lodash": "4.17.21",
         "moment": "2.30.1",
-        "natural-orderby": "2.0.3",
+        "natural-orderby": "3.0.2",
         "process": "0.11.10",
         "prop-types": "15.8.1",
         "react-bootstrap": "1.6.4",
@@ -124,14 +125,19 @@
         "react-notifications": "1.7.4",
         "react-onclickoutside": "6.13.1",
         "react-popper": "2.3.0",
-        "react-responsive": "9.0.2",
         "react-shadow-root": "6.2.0",
         "recharts": "2.12.7",
-        "tslib": "2.6.3"
+        "tslib": "2.7.0"
     },
     "overrides": {
         "iframe-resizer": "4.3.11"
     },
-    "pre-commit": ["format-code"],
-    "browserslist": ["> 0.5%", "Firefox ESR", "not dead"]
+    "pre-commit": [
+        "format-code"
+    ],
+    "browserslist": [
+        "> 0.5%",
+        "Firefox ESR",
+        "not dead"
+    ]
 }

package/styles/variables/colors/colors.json

@@ -18,7 +18,7 @@
     "brand-info": "#4B80A6",
     "brand-success": "#5cb85c",
     "brand-warning": "#ff8e3c",
-    "brand-danger": "#d90000",
+    "brand-danger": "#e22837",
     "brand-info-decent": "#f5f8fb",
     "brand-success-decent": "#f6fbf5",
     "brand-warning-decent": "#fdf5f0",
@@ -37,8 +37,8 @@
     "color-map-marker-info": "#3f759b",
     "color-map-marker-success": "#5cb85c",
     "color-map-marker-warning": "#ff8e3c",
-    "color-map-marker-danger": "#d90000",
-    "color-rating-1": "#d90000",
+    "color-map-marker-danger": "#e22837",
+    "color-rating-1": "#e22837",
     "color-rating-2": "#ff8e3c",
     "color-rating-3": "#f8c575",
     "color-rating-4": "#5cb85c",

package/useElapsedTime.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useElapsedTime';
+export * from './hooks/useElapsedTime';

package/useElapsedTime.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useElapsedTime';
+export * from './hooks/useElapsedTime';

package/utils/colorScheme.js

@@ -9,12 +9,11 @@ export const THEME_SYSTEM = 'system';
 export const THEME_LIGHT = 'light';
 export const THEME_DARK = 'dark';
 const updateHtmlScheme = (scheme) => {
-    const html = document.documentElement;
     if (scheme) {
-        html.setAttribute(THEME_DATA_ATTRIBUTE, scheme);
+        document.documentElement.setAttribute(THEME_DATA_ATTRIBUTE, scheme);
     }
     else {
-        html.removeAttribute(THEME_DATA_ATTRIBUTE);
+        document.documentElement.removeAttribute(THEME_DATA_ATTRIBUTE);
     }
 };
 const getSchemeFromCookie = () => {
@@ -57,7 +56,7 @@ export const getColorScheme = () => {
  * @param scheme The color scheme to save.
  */
 export const setColorScheme = (scheme) => {
-    const isDevEnv = (window === null || window === void 0 ? void 0 : window.location.host.startsWith('localhost')) || (window === null || window === void 0 ? void 0 : window.location.host.startsWith('127.0.0.1'));
+    const isDevEnv = window.location.host.startsWith('localhost') || window.location.host.startsWith('127.0.0.1');
     const newCookieValues = encodeURIComponent(scheme);
     const domain = isDevEnv ? 'localhost' : DOMAIN;
     document.cookie = `${COOKIE_NAME}=${newCookieValues};domain=${domain};expires=${EXPIRATION_DATE};path=${PATH}`;
@@ -66,11 +65,14 @@ export const setColorScheme = (scheme) => {
  * Initiates listening for theme change events.
  */
 export const listenForSchemeChange = () => {
-    window === null || window === void 0 ? void 0 : window.addEventListener('message', event => {
-        if (event.data === THEME_CHANGE_EVENT) {
-            readColorSchemeFromCookie();
+    window.addEventListener('message', ({ data }) => {
+        var _a;
+        if (data === THEME_CHANGE_EVENT) {
+            getColorScheme();
             // Re-send the event to all iframes that might not be notified yet
-            [...document === null || document === void 0 ? void 0 : document.getElementsByTagName('iframe')].map(frame => { var _a; return (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(THEME_CHANGE_EVENT, '*'); });
+            for (const iframe of document.getElementsByTagName('iframe')) {
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(THEME_CHANGE_EVENT, '*');
+            }
         }
     }, false);
 };

package/utils/currentColors.d.ts

@@ -0,0 +1,3 @@
+export declare const currentColorOptions: readonly ["primary", "secondary", "info", "success", "warning", "danger"];
+export type CurrentColor = (typeof currentColorOptions)[number];
+export declare const getCurrentBackgroundColor: (color: CurrentColor) => string;

package/utils/currentColors.js

@@ -0,0 +1,10 @@
+export const currentColorOptions = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
+const currentColorMapping = {
+    primary: '--brand-primary',
+    secondary: '--brand-secondary',
+    info: '--brand-info',
+    success: '--brand-success',
+    warning: '--brand-warning',
+    danger: '--brand-danger',
+};
+export const getCurrentBackgroundColor = (color) => `var(${currentColorMapping[`${color}`]})`;

package/utils/hasUtilityClass.d.ts

@@ -0,0 +1,30 @@
+declare const hasAlignContentClass: (classes: string) => boolean;
+declare const hasAlignItemsClass: (classes: string) => boolean;
+declare const hasAlignSelfClass: (classes: string) => boolean;
+declare const hasBgClass: (classes: string) => boolean;
+declare const hasBorderClass: (classes: string) => boolean;
+declare const hasBorderStyleClass: (classes: string) => boolean;
+declare const hasBorderWidthClass: (classes: string) => boolean;
+declare const hasCursorClass: (classes: string) => boolean;
+declare const hasDisplayClass: (classes: string) => boolean;
+declare const hasFlexClass: (classes: string) => boolean;
+declare const hasGapClass: (classes: string) => boolean;
+declare const hasHeightClass: (classes: string) => boolean;
+declare const hasHoverBgClass: (classes: string) => boolean;
+declare const hasHoverOpacityClass: (classes: string) => boolean;
+declare const hasHoverScaleClass: (classes: string) => boolean;
+declare const hasHoverTextColorClass: (classes: string) => boolean;
+declare const hasMarginClass: (classes: string) => boolean;
+declare const hasMaxHeightClass: (classes: string) => boolean;
+declare const hasMinHeightClass: (classes: string) => boolean;
+declare const hasOpacityClass: (classes: string) => boolean;
+declare const hasOverflowClass: (classes: string) => boolean;
+declare const hasPaddingClass: (classes: string) => boolean;
+declare const hasRioglyphClass: (classes: string) => boolean;
+declare const hasRoundedClass: (classes: string) => boolean;
+declare const hasScaleClass: (classes: string) => boolean;
+declare const hasSpaceClass: (classes: string) => boolean;
+declare const hasTextColorClass: (classes: string) => boolean;
+declare const hasTextSizeClass: (classes: string) => boolean;
+declare const hasUserSelectClass: (classes: string) => boolean;
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };

package/utils/hasUtilityClass.js

@@ -0,0 +1,40 @@
+const hasClass = (utilityClass) => {
+    return (classes) => {
+        if (classes.includes(utilityClass)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
+const hasAlignContentClass = hasClass('align-content-');
+const hasAlignItemsClass = hasClass('align-items-');
+const hasAlignSelfClass = hasClass('align-self');
+const hasBgClass = hasClass('bg-');
+const hasBorderClass = hasClass('border-');
+const hasBorderStyleClass = hasClass('border-style-');
+const hasBorderWidthClass = hasClass('border-width');
+const hasCursorClass = hasClass('cursor-');
+const hasDisplayClass = hasClass('display-');
+const hasFlexClass = hasClass('flex-');
+const hasGapClass = hasClass('gap-');
+const hasHeightClass = hasClass('height-');
+const hasHoverBgClass = hasClass('hover-bg-');
+const hasHoverOpacityClass = hasClass('hover-opacity-');
+const hasHoverScaleClass = hasClass('hover-scale-');
+const hasHoverTextColorClass = hasClass('hover-text-color-');
+const hasMarginClass = hasClass('margin-');
+const hasMaxHeightClass = hasClass('max-height-');
+const hasMinHeightClass = hasClass('min-height-');
+const hasOpacityClass = hasClass('opacity-');
+const hasOverflowClass = hasClass('overflow-');
+const hasPaddingClass = hasClass('padding-');
+const hasRioglyphClass = hasClass('rioglyph-');
+const hasRoundedClass = hasClass('rounded-');
+const hasScaleClass = hasClass('scale-');
+const hasSpaceClass = hasClass('space-');
+const hasTextColorClass = hasClass('text-color-');
+const hasTextSizeClass = hasClass('text-size');
+const hasUserSelectClass = hasClass('user-select-');
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };