@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/useEvent.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 useEvent_1 = require("./hooks/useEvent");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useEvent_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useEvent_1).default; } });

package/lib/es/useFocusTrap.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 useFocusTrap_1 = require("./hooks/useFocusTrap");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useFocusTrap_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useFocusTrap_1).default; } });

package/lib/es/useFullscreen.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 useFullscreen_1 = require("./hooks/useFullscreen");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useFullscreen_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useFullscreen_1).default; } });

package/lib/es/useHover.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 useHover_1 = require("./hooks/useHover");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useHover_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useHover_1).default; } });

package/lib/es/useInterval.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 useInterval_1 = require("./hooks/useInterval");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useInterval_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useInterval_1).default; } });

package/lib/es/useKey.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 useKey_1 = require("./hooks/useKey");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useKey_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useKey_1).default; } });

package/lib/es/useToggle.d.ts

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

package/lib/es/useToggle.js

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

package/lib/es/utils/colorScheme.js

@@ -22,7 +22,7 @@ const updateHtmlScheme = (scheme) => {
 const getSchemeFromCookie = () => {
     const decodedCookie = decodeURIComponent(document.cookie);
     const find = decodedCookie.split(';').find(entry => entry.includes(COOKIE_NAME));
-    return find === null || find === void 0 ? void 0 : find.split('=')[1];
+    return find?.split('=')[1];
 };
 /**
  * Returns the desired color scheme based on the user's cookie.
@@ -71,12 +71,11 @@ exports.setColorScheme = setColorScheme;
  */
 const listenForSchemeChange = () => {
     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
             for (const iframe of document.getElementsByTagName('iframe')) {
-                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(exports.THEME_CHANGE_EVENT, '*');
+                iframe.contentWindow?.postMessage(exports.THEME_CHANGE_EVENT, '*');
             }
         }
     }, false);

package/lib/es/utils/darkModeCDN.js

@@ -42,7 +42,7 @@ const listenForCookieChange = () => {
             readColorSchemeFromCookie();
         }
     };
-    window === null || window === void 0 ? void 0 : window.addEventListener('message', eventHandler, false);
+    window?.addEventListener('message', eventHandler, false);
 };
 readColorSchemeFromCookie();
 listenForCookieChange();

package/lib/es/utils/deviceUtils.js

@@ -4,21 +4,20 @@ exports.toggleZoomOnMobile = exports.inIframe = exports.isRetinaDevice = exports
 const cssuseragent_1 = require("./cssuseragent");
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not,
 // we need to initialize only when html really exists. This avoids issues when running the UIKIT in a web-worker
-if (document === null || document === void 0 ? void 0 : document.documentElement) {
+if (document?.documentElement) {
     (0, cssuseragent_1.cssua)(document.documentElement, navigator.userAgent, navigator.standalone);
 }
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const isDefined = (val) => val !== undefined && val !== null;
 // see https://patrickhlauke.github.io/touch/touchscreen-detection/ for reference
 const hasTouch = () => {
-    var _a;
     if (window.PointerEvent && isDefined(navigator.maxTouchPoints)) {
         // if Pointer Events are supported, just check maxTouchPoints
         if (navigator.maxTouchPoints > 0) {
             return true;
         }
     }
-    else if ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(any-pointer:coarse)').matches) {
+    else if (window.matchMedia?.('(any-pointer:coarse)').matches) {
         // no Pointer Events...
         // check for any-pointer:coarse which mostly means touchscreen
         return true;
@@ -38,11 +37,11 @@ exports.SCREEN_LG = 1200;
 exports.SCREEN_XL = 1700;
 const isMobileScreen = () => window.matchMedia(`(max-width: ${exports.MOBILE_SCREEN}px)`).matches;
 exports.isMobileScreen = isMobileScreen;
-const isMobile = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-mobile');
+const isMobile = () => document?.documentElement.classList.contains('ua-mobile');
 exports.isMobile = isMobile;
-const isDesktop = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop');
+const isDesktop = () => document?.documentElement.classList.contains('ua-desktop');
 exports.isDesktop = isDesktop;
-const isMac = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop-macintosh');
+const isMac = () => document?.documentElement.classList.contains('ua-desktop-macintosh');
 exports.isMac = isMac;
 const isRetinaDevice = () => window.devicePixelRatio > 1;
 exports.isRetinaDevice = isRetinaDevice;

package/lib/es/utils/init/checkForReleaseVersion.d.ts

@@ -0,0 +1 @@
+export declare const checkForReleaseVersion: () => Promise<void>;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkForReleaseVersion = void 0;
+const version_json_1 = require("../../version.json");
+const styledLogs_1 = require("./styledLogs");
+const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+const checkForReleaseVersion = async () => {
+    const logStyled = (message) => console.log('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+    try {
+        const response = await fetch(versionsListUrl);
+        const { latest_release } = await response.json();
+        if (latest_release > version_json_1.version) {
+            logStyled(`🆕 You are using version ${version_json_1.version} of the UIKIT while the latest released version is ` +
+                `${latest_release}. Please consider updating asap.`);
+        }
+    }
+    catch (error) {
+        logStyled('Failed to fetch UIKIT version list.');
+    }
+};
+exports.checkForReleaseVersion = checkForReleaseVersion;

package/lib/es/utils/init/doNotUseTailwind.d.ts

@@ -0,0 +1 @@
+export declare const doNotUseTailwind: () => Promise<boolean>;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.doNotUseTailwind = void 0;
+const styledLogs_1 = require("./styledLogs");
+const doNotUseTailwind = async () => {
+    // Detect Tailwind CSS in linked stylesheets
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+        try {
+            const response = await fetch(link.href);
+            const cssText = await response.text();
+            if (cssText.includes('--tw')) {
+                return true; // Tailwind detected
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to fetch CSS file: ${link.href}`, error);
+        }
+    }
+    // Detect Tailwind CSS in <style> tags
+    const styleTags = document.querySelectorAll('style');
+    for (const style of styleTags) {
+        if (style.textContent?.includes('--tw')) {
+            return true; // Tailwind detected
+        }
+    }
+    return false; // Tailwind not detected
+};
+exports.doNotUseTailwind = doNotUseTailwind;
+// Global flag to track if Tailwind has been detected
+let tailwindDetected = false;
+// Initial detection of Tailwind CSS
+(async () => {
+    try {
+        tailwindDetected = await (0, exports.doNotUseTailwind)();
+    }
+    catch (error) {
+        console.error('Error during Tailwind detection:', error);
+    }
+})();
+// Repeatedly log messages every 10 seconds if Tailwind was detected
+setInterval(() => {
+    if (tailwindDetected) {
+        const message = [
+            'TAILWIND DETECTED!!!',
+            'Using Tailwind CSS in combination with the RIO UIKIT is strongly discouraged because it can lead to significant design and development issues.',
+            'The RIO UIKIT is a component-driven design system with carefully crafted styles to ensure consistent branding and user experience.',
+            'Tailwind CSS, as a utility-first framework, introduces inline styling that can conflict with the RIO UIKIT’s predefined component styles.',
+            'This can result in overridden styles, broken layouts, inconsistent spacings, inconsistent design language, and increased maintenance complexity.',
+            'Tailwind’s global reset styles may also disrupt the base styles of the RIO UIKIT, causing unintended visual changes.',
+            'Furthermore, mixing the two systems creates unnecessary redundancy, increases CSS bundle size, and complicates debugging and future updates.',
+            'To ensure a cohesive, maintainable, and professional design system, it is essential to rely solely on the RIO UIKIT and its customization options rather than introducing conflicting styling frameworks.',
+            'WE MAY TECHNICALLY DISABLE TAILWIND FUNCTIONALITY IN THE FUTURE.\nPLEASE DO NOT USE TAILWIND!',
+        ].join('\n\n');
+        console.warn('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+    }
+}, 10_000);

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

@@ -9,14 +9,13 @@ const BRANDS = ['rio', 'man', 'vw', 'scania', 'traton'];
 const isValidBrand = (input) => BRANDS.includes(input);
 const getBrand = (input) => (isValidBrand(input) ? input : 'rio');
 const initCSS = () => {
-    var _a;
     if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
         document.documentElement.classList.add('css-no-gap');
     }
     if (initConfig_1.isInIframe) {
         document.documentElement.classList.add('window-iframe');
     }
-    if ((_a = document.title) === null || _a === void 0 ? void 0 : _a.includes('UIKIT Demo')) {
+    if (document.title?.includes('UIKIT Demo')) {
         return;
     }
     (0, initConfig_1.debug)('Checking for UIKIT CSS in document head.');

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

@@ -1,43 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initDocumentBootstrapping = void 0;
-const tslib_1 = require("tslib");
 const colorScheme_1 = require("../colorScheme");
-const version_json_1 = require("../../version.json");
 const initConfig_1 = require("./initConfig");
-const printPoweredByRIO_1 = require("./printPoweredByRIO");
+const usedUikitVersion_1 = require("./usedUikitVersion");
+const weAreHiring_1 = require("./weAreHiring");
+const doNotUseTailwind_1 = require("./doNotUseTailwind");
 const initCSS_1 = require("./initCSS");
-const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
-const checkForReleaseVersion = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    if (!initConfig_1.isProd) {
-        return;
-    }
-    try {
-        const response = yield fetch(versionsListUrl);
-        const { latest_release } = yield response.json();
-        if (latest_release > version_json_1.version) {
-            console.log(`🆕 You are using version ${version_json_1.version} of the UIKIT while the latest released version is` +
-                ` ${latest_release}. Please consider updating.`);
-        }
-    }
-    catch (error) {
-        console.debug('Failed to fetch UIKIT version list.');
-    }
-});
-const initDocumentBootstrapping = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+const checkForReleaseVersion_1 = require("./checkForReleaseVersion");
+const styledLogs_1 = require("./styledLogs");
+const initDocumentBootstrapping = async () => {
     if (!document || !document.documentElement) {
         return;
     }
+    // Initialize the CSS setup
     (0, initCSS_1.initCSS)();
     if (!initConfig_1.isTest) {
-        console.group('UIKIT');
-        console.log(`Init UIKIT for ${document.location.href}.`);
+        // Handle the current color scheme (e.g., light/dark mode)
         (0, colorScheme_1.getColorScheme)();
         (0, colorScheme_1.listenForSchemeChange)();
-        (0, printPoweredByRIO_1.printPoweredByRIO)();
-        yield checkForReleaseVersion();
+        // Verify the UIKIT version of the application
+        await (0, checkForReleaseVersion_1.checkForReleaseVersion)();
+        // Ensure the correct CSS version is being used
         (0, initCSS_1.checkCSSVersion)();
-        console.groupEnd();
+        if (!initConfig_1.isInIframe) {
+            const logStyled = (message) => console.log('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+            logStyled('- - - - - - - - - - - - - - - - - -');
+            // Log or validate the UI Kit version
+            (0, usedUikitVersion_1.usedUikitVersion)();
+            // Show a hiring message
+            (0, weAreHiring_1.weAreHiring)();
+            logStyled('- - - - - - - - - - - - - - - - - -');
+        }
     }
-});
+    // Enforce the rule that Tailwind CSS should not be used
+    await (0, doNotUseTailwind_1.doNotUseTailwind)();
+};
 exports.initDocumentBootstrapping = initDocumentBootstrapping;

package/lib/es/utils/init/styledLogs.d.ts

@@ -0,0 +1,3 @@
+export declare const getConsoleStyle: (params?: {
+    isBold?: boolean;
+}) => string;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConsoleStyle = void 0;
+const getConsoleStyle = (params) => {
+    return `color: #697a8b; ${params?.isBold ? 'font-weight: 800' : ''}`;
+};
+exports.getConsoleStyle = getConsoleStyle;

package/lib/es/utils/init/usedUikitVersion.d.ts

@@ -0,0 +1 @@
+export declare const usedUikitVersion: () => void;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usedUikitVersion = void 0;
+const version_json_1 = require("../../version.json");
+const styledLogs_1 = require("./styledLogs");
+const logStyled = (message) => console.log('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+const usedUikitVersion = () => {
+    const message = `RIO UIKIT Version ${version_json_1.version}\nhttps://uikit.developers.rio.cloud`;
+    logStyled(message);
+};
+exports.usedUikitVersion = usedUikitVersion;

package/lib/es/utils/init/weAreHiring.d.ts

@@ -0,0 +1 @@
+export declare const weAreHiring: () => void;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.weAreHiring = void 0;
+const styledLogs_1 = require("./styledLogs");
+const logStyled = (message) => console.log('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+const weAreHiring = () => {
+    const message = 'You are a Developer? RIO is hiring!\nhttps://company.rio.cloud/en/career/jobs';
+    logStyled(message);
+};
+exports.weAreHiring = weAreHiring;

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

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

package/lib/es/utils/mergeRefs.js

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 // Utility function to merge multiple refs
 const mergeRefs = (refs) => {
     return (value) => {

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

@@ -12,4 +12,4 @@ export declare const parseSorting: (sortValueShort: string) => {
     sortDir: "desc" | "asc";
 };
 export declare const mapColumnsSettingsToStrings: ({ columnOrder, hiddenColumns, columnsDetails, }: ColumnsSettings) => string[];
-export declare const parseColumnsSettingsStrings: (settings: string[], defaultColumnsDetails: ColumnsSettings['columnsDetails']) => ColumnsSettings;
+export declare const parseColumnsSettingsStrings: (settings: string[], defaultColumnsDetails: ColumnsSettings["columnsDetails"]) => ColumnsSettings;

package/lib/es/utils/routeUtils.js

@@ -32,7 +32,7 @@ const parseColumnsSettingsStrings = (settings, defaultColumnsDetails) => {
     const columns = {
         columnOrder: [],
         hiddenColumns: [],
-        columnsDetails: Object.assign({}, defaultColumnsDetails),
+        columnsDetails: { ...defaultColumnsDetails },
     };
     settings.map(setting => {
         const [column, columnWidth] = setting.split(':');
@@ -41,11 +41,11 @@ const parseColumnsSettingsStrings = (settings, defaultColumnsDetails) => {
         if (columnWidth) {
             const width = parseInt(columnWidth, 10);
             if ((0, isFinite_1.default)(width)) {
-                columns.columnsDetails[columnKey] = Object.assign(Object.assign({}, columns.columnsDetails[columnKey]), { width });
+                columns.columnsDetails[columnKey] = { ...columns.columnsDetails[columnKey], width };
             }
         }
         else {
-            columns.columnsDetails[columnKey] = Object.assign({}, defaultColumnsDetails[columnKey]);
+            columns.columnsDetails[columnKey] = { ...defaultColumnsDetails[columnKey] };
         }
         if (column.startsWith('-')) {
             columns.hiddenColumns = [...columns.hiddenColumns, columnKey];

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

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 export declare const DEFAULT_PREFIX = "featureToggle.";
 export type ToggleType = string | boolean | number;
 export declare const cleanupOldToggles: (oldToggles: string[], prefix: string) => void;

package/lib/es/utils/urlFeatureToggles.js

@@ -18,10 +18,9 @@ const cleanupOldToggles = (oldToggles, prefix) => {
 };
 exports.cleanupOldToggles = cleanupOldToggles;
 const detectToggle = (param, prefix, transformFn) => {
-    var _a;
     const [_, searchParams = ''] = window.location.hash.split('?');
     const urlSearchParams = qs_1.default.parse(searchParams);
-    const urlValue = ((_a = (0, get_1.default)(param, urlSearchParams)) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+    const urlValue = (0, get_1.default)(param, urlSearchParams)?.toString() || '';
     const storageValue = urlValue ? storageUtils_1.storage.save(param, urlValue, prefix) : storageUtils_1.storage.load(param, prefix);
     return storageValue && transformFn(storageValue);
 };

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.6.0"
+    "version": "1.7.0"
 }

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",
         "url": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse"
     },
     "scripts": {
-        "build": "npm run build:font && npm run build:styles && npm run build:vite && npm run format-code && echo '\n👉 For an npm release use build:npm 👈'",
+        "build": "npm run build:rioglyph && npm run build:styles && npm run build:vite && npm run format-code && echo '\n👉 For an npm release use build:npm 👈'",
         "build:npm": "npm run build:cjs && npm run build:esm && npm run copy-to-package && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
         "build:cjs": "tsc -p tsconfig.cjs.json && copyfiles --up 1 src/*.d.ts src/version.json src/styles/variables/colors/colors.json package/lib/es",
         "build:esm": "tsc -p tsconfig.esm.json && copyfiles --up 1 src/*.d.ts src/version.json src/styles/variables/colors/colors.json package",
@@ -24,7 +24,7 @@
         "build:style-scania": "vite build --mode style-scania",
         "build:style-traton": "vite build --mode style-traton",
         "build:style-xmas": "vite build --mode style-xmas",
-        "build:font": "svgo -f webfont/svgs/figma && svgo -f webfont/svgs/sketch && vite build --mode font",
+        "build:rioglyph": "svgo -f rioglyph/svgs && vite build --mode rioglyph",
         "fixCssMinified": "node tools/fixCssMinified.mjs",
         "format-code": "npm run format-code:uikit && npm run format-code:demo",
         "format-code:uikit": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
@@ -48,70 +48,69 @@
     "less": "./styles/css/rio-uikit.less",
     "files": ["**/*.*"],
     "devDependencies": {
-        "@testing-library/dom": "9.3.3",
-        "@testing-library/jest-dom": "5.17.0",
-        "@testing-library/react": "12.1.5",
-        "@testing-library/react-hooks": "^8.0.1",
-        "@testing-library/user-event": "14.5.2",
+        "@testing-library/dom": "10.4.0",
+        "@testing-library/jest-dom": "6.6.3",
+        "@testing-library/react": "16.2.0",
+        "@testing-library/react-hooks": "8.0.1",
+        "@testing-library/user-event": "14.6.1",
         "@types/heremaps": "3.1.14",
-        "@types/lodash": "4.17.7",
-        "@types/qs": "6.9.16",
-        "@types/react": "18.3.5",
-        "@types/react-dom": "18.3.0",
-        "@types/react-input-mask": "3.0.5",
-        "@types/react-redux": "7.1.33",
+        "@types/lodash": "4.17.14",
+        "@types/qs": "6.9.18",
+        "@types/react": "18.3.18",
+        "@types/react-dom": "18.3.5",
+        "@types/react-input-mask": "3.0.6",
+        "@types/react-redux": "7.1.34",
         "@types/resize-observer-browser": "0.1.11",
         "@typescript-eslint/eslint-plugin": "6.13.2",
         "@typescript-eslint/parser": "6.13.2",
-        "@vitejs/plugin-react": "4.3.1",
+        "@vitejs/plugin-react": "4.3.4",
         "@vitest/coverage-c8": "0.33.0",
         "autoprefixer": "10.4.20",
         "backstopjs": "6.3.25",
         "copyfiles": "2.4.1",
-        "dotenv": "16.4.5",
+        "dotenv": "16.4.7",
         "eslint": "8.55.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-compat": "4.2.0",
         "eslint-plugin-getsentry": "2.0.0",
-        "eslint-plugin-import": "2.30.0",
+        "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.35.2",
+        "eslint-plugin-prettier": "5.2.3",
+        "eslint-plugin-react": "7.37.4",
         "eslint-plugin-react-hooks": "4.6.2",
-        "jsdom": "25.0.0",
+        "jsdom": "26.0.0",
         "jsdom-global": "3.0.2",
-        "less": "4.2.0",
+        "less": "4.2.2",
         "license-checker": "25.0.1",
-        "postcss": "8.4.45",
+        "postcss": "8.5.1",
         "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
         "pre-commit": "1.2.2",
-        "prettier": "3.3.3",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "prettier": "3.4.2",
+        "react": "18.0.0",
+        "react-dom": "18.0.0",
         "react-intl": "6.6.8",
         "rollup-plugin-copy": "3.5.0",
         "strip-ansi": "7.1.0",
         "svgo": "3.3.2",
         "tiny-invariant": "1.3.3",
-        "typescript": "4.9.5",
-        "vite": "4.5.0",
+        "typescript": "5.7.3",
+        "vite": "6.0.11",
         "vite-plugin-zip-pack": "1.2.4",
-        "vitest": "2.0.5",
-        "webfonts-generator": "github:rio-cloud/webfonts-generator#f666e60803da9155175a7f1775e09671d47a383b"
+        "vitest": "3.0.4"
     },
     "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": ">=17.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": ">=18.0.0"
     },
     "dependencies": {
-        "@dnd-kit/core": "6.1.0",
+        "@dnd-kit/core": "6.3.1",
         "@dnd-kit/modifiers": "6.0.1",
         "@dnd-kit/sortable": "7.0.2",
         "@formkit/auto-animate": "0.8.2",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1",
-        "driver.js": "^1.3.1",
+        "driver.js": "1.3.1",
         "events": "3.3.0",
         "framer-motion": "4.1.17",
         "iframe-resizer-react": "1.1.0",
@@ -120,19 +119,20 @@
         "natural-orderby": "3.0.2",
         "process": "0.11.10",
         "prop-types": "15.8.1",
-        "qs": "6.13.0",
+        "qs": "6.14.0",
         "react-bootstrap": "1.6.4",
-        "react-content-loader": "6.2.1",
-        "react-custom-scrollbars-2": "^4.5.0",
+        "react-content-loader": "7.0.2",
+        "react-custom-scrollbars-2": "4.5.0",
         "react-datetime": "github:rio-cloud/react-datetime#v3.1.1-1-merged",
-        "react-dropzone": "14.2.3",
+        "react-dropzone": "14.3.5",
         "react-input-mask": "3.0.0-alpha.2",
         "react-notifications": "1.7.4",
         "react-onclickoutside": "6.13.1",
         "react-popper": "2.3.0",
         "react-shadow-root": "6.2.0",
-        "recharts": "2.12.7",
-        "tslib": "2.7.0"
+        "react-toastify": "11.0.3",
+        "recharts": "2.15.0",
+        "tslib": "2.8.1"
     },
     "overrides": {
         "iframe-resizer": "4.3.11"

package/styles/variables/colors/colors.json

@@ -69,5 +69,11 @@
     "color-warmup-charm": "#C9778D",
     "color-warmup-salmon": "#F19588",
     "color-warmup-cherokee": "#F5BB89",
-    "color-warmup-corn": "#FDE082"
+    "color-warmup-corn": "#FDE082",
+    "color-spectrum-indigo": "#8e96eb",
+    "color-spectrum-violet": "#ad91f3",
+    "color-spectrum-purple": "#c08eeb",
+    "color-spectrum-fuchsia": "#dc82e9",
+    "color-spectrum-pink": "#e878b6",
+    "color-spectrum-rose": "#ef7186"
 }