@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/statusBar/StatusBar.d.ts

@@ -0,0 +1,33 @@
+import type { StatusBarIconSpec, StatusBarLabelSpec, StatusBarProgress } from './StatusBar.types';
+export type StatusBarProps = {
+    /**
+     * The icon to be shown next to the progress bar.
+     */
+    icon?: StatusBarIconSpec;
+    /**
+     * The label to be shown for the progress bar.
+     */
+    label?: StatusBarLabelSpec;
+    /**
+     * List of progress bars which will be stacked in given order if there are multiple.
+     */
+    progress?: StatusBarProgress[];
+    /**
+     * The size of the icon and progress bar.
+     *
+     * @default 'small'
+     */
+    size?: 'small' | 'large';
+    /**
+     * Uses a divider for multiple progress bars when defined.
+     *
+     * @default true
+     */
+    useProgressDivider?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const StatusBar: (props: StatusBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusBar;

package/lib/es/src/components/statusBar/StatusBar.js

@@ -0,0 +1,57 @@
+"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 StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarProgressBar_1 = tslib_1.__importDefault(require("./StatusBarProgressBar"));
+const StatusBarIcon_1 = tslib_1.__importDefault(require("./StatusBarIcon"));
+const StatusBarLabel_1 = tslib_1.__importDefault(require("./StatusBarLabel"));
+const iconDefaults = { name: '', alignment: StatusBarConstants_1.LEFT };
+const labelDefaults = { value: '', alignment: StatusBarConstants_1.RIGHT, weight: StatusBarConstants_1.BOLD };
+const StatusBar = (props) => {
+    const { progress = [], size = StatusBarConstants_1.SMALL, className = '', useProgressDivider = true } = props;
+    // deep destructuring with merging default props don't work
+    const icon = { ...iconDefaults, ...props.icon };
+    const label = { ...labelDefaults, ...props.label };
+    const hasIcon = !!icon.name;
+    const iconIsLeft = icon.alignment === StatusBarConstants_1.LEFT;
+    const iconIsRight = icon.alignment === StatusBarConstants_1.RIGHT;
+    const hasLabel = !!label.value;
+    const labelIsLeft = label.alignment === StatusBarConstants_1.LEFT;
+    const labelIsTop = label.alignment === StatusBarConstants_1.TOP;
+    const labelIsRight = label.alignment === StatusBarConstants_1.RIGHT;
+    const hasOnlyIcon = hasIcon && !hasLabel;
+    const hasOnlyLabel = !hasIcon && hasLabel;
+    const hasIconAndLabel = hasIcon && hasLabel;
+    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;
+    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;
+    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;
+    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;
+    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;
+    const isIconOnlyRight = hasOnlyIcon && iconIsRight;
+    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;
+    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;
+    const wrapperClasses = (0, classnames_1.default)('StatusBar', 'width-100pct', 'display-flex', labelIsTop ? 'align-items-end' : 'align-items-center', className);
+    const progressLabelWrapperClasses = (0, classnames_1.default)('display-flex', 'flex-1-0', {
+        'flex-order-1 flex-column margin-bottom-10': labelIsTop,
+        'flex-order-1 align-items-center': isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight,
+        'flex-order-2 align-items-center': isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft,
+        'align-items-center': isLabelOnlyLeft || isLabelOnlyRight,
+    });
+    const labelWrapperClasses = (0, classnames_1.default)({
+        'display-flex justify-content-center': labelIsTop,
+        'flex-order-1 margin-right-10': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-2 margin-left-10': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressOuterWrapperClasses = (0, classnames_1.default)('display-flex', 'flex-1-0', {
+        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressWrapperClasses = (0, classnames_1.default)('progress', 'margin-0', 'flex-1-0', {
+        'height-5': size === StatusBarConstants_1.SMALL,
+        'height-10': size === StatusBarConstants_1.LARGE,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [(0, jsx_runtime_1.jsx)(StatusBarIcon_1.default, { icon: icon, size: size }), (0, jsx_runtime_1.jsxs)("div", { className: progressLabelWrapperClasses, children: [(0, jsx_runtime_1.jsx)(StatusBarLabel_1.default, { label: label, size: size, className: labelWrapperClasses }), (0, jsx_runtime_1.jsx)("div", { className: progressOuterWrapperClasses, children: (0, jsx_runtime_1.jsx)("div", { className: progressWrapperClasses, children: progress.map((item, index) => ((0, jsx_runtime_1.jsx)(StatusBarProgressBar_1.default, { progress: item, index: index, useProgressDivider: useProgressDivider }, index))) }) })] })] }));
+};
+exports.default = StatusBar;

package/lib/es/src/components/statusBar/StatusBar.types.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+export type StatusBarIconSpec = {
+    /**
+     * The class name of the icon i.e. "rioglyph-cruise-control".
+     */
+    name: string;
+    /**
+     * The position of the icon.
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * The text color class name for the icon.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the icon.
+     */
+    className?: string;
+};
+export type StatusBarLabelSpec = {
+    /**
+     * The label content.
+     */
+    value: string | ReactNode;
+    /**
+     * The position of the icon.
+     *
+     * @default 'right'
+     */
+    alignment?: 'left' | 'top' | 'right';
+    /**
+     * The text weight of the label.
+     *
+     * @default 'bold'
+     */
+    weight?: 'light' | 'bold';
+    /**
+     * The text color class name for the label.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the label.
+     */
+    className?: string;
+};
+export type StatusBarProgress = {
+    /**
+     * The percentage of the progress.
+     *
+     * @default 0
+     */
+    percentage?: number;
+    /**
+     * The color class name for the label.
+     *
+     * @default 'progress-bar-info'
+     */
+    color?: string;
+    /**
+     * Optional tooltip content to be shown for the progress bar.
+     */
+    tooltip?: string | ReactNode;
+    /**
+     * The position of the tooltip for the progress bar.
+     *
+     * @default 'top'
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The delay in milliseconds for when the tooltip is shown when hovering the progress bar.
+     *
+     * @default 50
+     */
+    tooltipDelay?: number;
+    /**
+     * Optional class names for the progress bar.
+     */
+    className?: string;
+};

package/lib/es/src/components/statusBar/StatusBar.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/es/src/components/statusBar/StatusBarConstants.d.ts

@@ -0,0 +1,8 @@
+export declare const LEFT: "left";
+export declare const TOP: "top";
+export declare const RIGHT: "right";
+export declare const BOTTOM: "bottom";
+export declare const SMALL = "small";
+export declare const LARGE = "large";
+export declare const LIGHT = "light";
+export declare const BOLD = "bold";

package/lib/es/src/components/statusBar/StatusBarConstants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BOLD = exports.LIGHT = exports.LARGE = exports.SMALL = exports.BOTTOM = exports.RIGHT = exports.TOP = exports.LEFT = void 0;
+const tslib_1 = require("tslib");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
+// alignment / position
+exports.LEFT = OverlayTrigger_1.default.LEFT;
+exports.TOP = OverlayTrigger_1.default.TOP;
+exports.RIGHT = OverlayTrigger_1.default.RIGHT;
+exports.BOTTOM = OverlayTrigger_1.default.BOTTOM;
+// icon size
+exports.SMALL = 'small';
+exports.LARGE = 'large';
+// font weight
+exports.LIGHT = 'light';
+exports.BOLD = 'bold';

package/lib/es/src/components/statusBar/StatusBarIcon.d.ts

@@ -0,0 +1,7 @@
+import type { StatusBarIconSpec } from './StatusBar.types';
+type StatusBarIconProps = {
+    icon: StatusBarIconSpec;
+    size: 'small' | 'large';
+};
+declare const StatusBarIcon: (props: StatusBarIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusBarIcon;

package/lib/es/src/components/statusBar/StatusBarIcon.js

@@ -0,0 +1,16 @@
+"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 StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarIcon = (props) => {
+    const { icon, size } = props;
+    if (!icon.name) {
+        return null;
+    }
+    const wrapperClasses = icon.alignment === StatusBarConstants_1.LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';
+    const iconClasses = (0, classnames_1.default)('rioglyph', icon.name, icon.color ?? 'text-color-gray', size === StatusBarConstants_1.SMALL && 'text-size-h3', size === StatusBarConstants_1.LARGE && 'text-size-h2', icon.className);
+    return ((0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)("span", { className: iconClasses }) }));
+};
+exports.default = StatusBarIcon;

package/lib/es/src/components/statusBar/StatusBarLabel.d.ts

@@ -0,0 +1,8 @@
+import type { StatusBarLabelSpec } from './StatusBar.types';
+type StatusBarLabelProps = {
+    label: StatusBarLabelSpec;
+    size: 'small' | 'large';
+    className?: string;
+};
+declare const StatusBarLabel: (props: StatusBarLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusBarLabel;

package/lib/es/src/components/statusBar/StatusBarLabel.js

@@ -0,0 +1,20 @@
+"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 StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarLabel = (props) => {
+    const { label, size, className = '' } = props;
+    if (!label.value) {
+        return null;
+    }
+    const labelClasses = (0, classnames_1.default)('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', label.color ?? 'text-color-dark', {
+        'width-0': label.alignment === StatusBarConstants_1.TOP,
+        'text-size-16': size === StatusBarConstants_1.SMALL,
+        'text-size-h3': size === StatusBarConstants_1.LARGE,
+        'text-bold': label.weight !== StatusBarConstants_1.LIGHT,
+    }, label.className);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)("span", { className: labelClasses, children: label.value }) }));
+};
+exports.default = StatusBarLabel;

package/lib/es/src/components/statusBar/StatusBarProgressBar.d.ts

@@ -0,0 +1,8 @@
+import type { StatusBarProgress } from './StatusBar.types';
+type StatusBarProgressBarProps = {
+    index: number;
+    progress: StatusBarProgress;
+    useProgressDivider: boolean;
+};
+export declare const StatusBarProgressBar: (props: StatusBarProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusBarProgressBar;

package/lib/es/src/components/statusBar/StatusBarProgressBar.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBarProgressBar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
+const StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarProgressBar = (props) => {
+    const { index, progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = StatusBarConstants_1.TOP }, useProgressDivider, } = props;
+    const progressBarClasses = (0, classnames_1.default)('progress-bar', color ?? 'progress-bar-info', useProgressDivider && 'progress-divider', className);
+    const progressBar = (0, jsx_runtime_1.jsx)("div", { className: progressBarClasses, style: { width: `${percentage}%` } });
+    if (!tooltip) {
+        return progressBar;
+    }
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: tooltipPosition, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { id: `tooltip-${index}`, width: 'auto', children: tooltip }), delay: tooltipDelay, children: progressBar }));
+};
+exports.StatusBarProgressBar = StatusBarProgressBar;
+exports.default = exports.StatusBarProgressBar;

package/lib/es/src/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from 'react';
+export type SteppedProgressBarLabel = {
+    /**
+     * The element shown in the step element.
+     *
+     * This can be a single step number or an icon element.
+     */
+    icon?: string | ReactNode;
+    /**
+     * The label shown below the step element.
+     */
+    label?: string | ReactNode;
+    /**
+     * Additional classes to be set on the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional classes to be set on the label wrapping element.
+     */
+    labelWrapperClassName?: string;
+};
+export type SteppedProgressBarProps = {
+    /**
+     * Objects to defining the icon and the label of the navigation items.
+     *
+     * The icon can be a string or an icon.
+     */
+    labels: SteppedProgressBarLabel[];
+    /**
+     * Index of the selected navigation item.
+     */
+    selectedStepNumber: number;
+    /**
+     * Called with the new selected index after the user clicked a nav item.
+     */
+    onSelectedChanged: (selectedKey: number) => void;
+    /**
+     * The SteppedProgressBar Variant.
+     *
+     * One of "circle", "rectangle" or "roadsign".
+     *
+     * @default 'circle'
+     */
+    variant?: 'circle' | 'rectangle' | 'roadsign';
+    /**
+     * All navigation items with a higher index than this will be disabled.
+     */
+    disableFollowingPages?: number;
+    /**
+     * Deactivating the wrapping of bubbles on mobile.
+     *
+     * @default true
+     */
+    mobileBreakpoint?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SteppedProgressBar: {
+    (props: SteppedProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    VARIANT_CIRCLE: "circle";
+    VARIANT_RECTANGLE: "rectangle";
+    VARIANT_ROADSIGN: "roadsign";
+};
+export default SteppedProgressBar;

package/lib/es/src/components/steppedProgressBar/SteppedProgressBar.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_bootstrap_1 = require("react-bootstrap");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SteppedProgressBar = (props) => {
+    const { labels, selectedStepNumber, onSelectedChanged, variant = 'circle', disableFollowingPages: disableFollowingPageIndex, mobileBreakpoint = true, className = '', } = props;
+    const [disableFollowingPages, setDisableFollowingPages] = (0, react_1.useState)(disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber);
+    (0, react_1.useEffect)(() => {
+        if (disableFollowingPageIndex !== undefined) {
+            if (disableFollowingPageIndex < selectedStepNumber) {
+                console.warn('Invalid component state detected in SteppedProgressBar: can not disable following ' +
+                    `pages ${disableFollowingPageIndex} when selectedStep is ${selectedStepNumber}!`);
+                return;
+            }
+            setDisableFollowingPages(disableFollowingPageIndex);
+        }
+        else if (selectedStepNumber > disableFollowingPages) {
+            setDisableFollowingPages(selectedStepNumber);
+        }
+    }, [disableFollowingPageIndex, selectedStepNumber]);
+    const wrapperClasses = (0, classnames_1.default)('stepped-progress-bar', variant && `variant-${variant}`, mobileBreakpoint && 'mobile-breakpoint', className && className);
+    const handleSelect = (selectedKey) => onSelectedChanged(Number(selectedKey));
+    return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Nav, { className: wrapperClasses, activeKey: selectedStepNumber, onSelect: handleSelect, children: labels.map((labelObject, index) => ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Nav.Link, { eventKey: index, disabled: index > disableFollowingPages, as: 'a', className: (0, classnames_1.default)('step-tab', labelObject.labelWrapperClassName), children: (0, jsx_runtime_1.jsxs)("div", { className: 'step-tab-content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'item-icon', children: labelObject.icon }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('item-label', labelObject.labelClassName), children: labelObject.label })] }) }, index))) }));
+};
+SteppedProgressBar.VARIANT_CIRCLE = 'circle';
+SteppedProgressBar.VARIANT_RECTANGLE = 'rectangle';
+SteppedProgressBar.VARIANT_ROADSIGN = 'roadsign';
+exports.default = SteppedProgressBar;

package/lib/es/src/components/supportMarker/toggleSupportMarker.d.ts

@@ -0,0 +1,3 @@
+export declare const SUPPORT_MARKER_CLASS = "show-support-marker";
+export declare const toggleSupportMarker: () => void;
+export declare const enableSupportMarker: (enabled: boolean) => void;

package/lib/es/src/components/supportMarker/toggleSupportMarker.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enableSupportMarker = exports.toggleSupportMarker = exports.SUPPORT_MARKER_CLASS = void 0;
+exports.SUPPORT_MARKER_CLASS = 'show-support-marker';
+const toggleSupportMarker = () => {
+    if (!document || !document.documentElement) {
+        return;
+    }
+    const htmlClassList = document.documentElement.classList;
+    if (htmlClassList.contains(exports.SUPPORT_MARKER_CLASS)) {
+        htmlClassList.remove(exports.SUPPORT_MARKER_CLASS);
+    }
+    else {
+        htmlClassList.add(exports.SUPPORT_MARKER_CLASS);
+    }
+};
+exports.toggleSupportMarker = toggleSupportMarker;
+const enableSupportMarker = (enabled) => {
+    if (!document || !document.documentElement) {
+        return;
+    }
+    const htmlClassList = document.documentElement.classList;
+    if (enabled) {
+        htmlClassList.add(exports.SUPPORT_MARKER_CLASS);
+    }
+    else {
+        htmlClassList.remove(exports.SUPPORT_MARKER_CLASS);
+    }
+};
+exports.enableSupportMarker = enableSupportMarker;

package/lib/es/src/components/svgImage/SvgElement.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ColorOverridesMap } from './svgConverter';
+type SvgElementProps = {
+    node: Element;
+    colorMap: ColorOverridesMap;
+};
+declare const SvgElement: ({ node, colorMap }: SvgElementProps) => React.DOMElement<React.DOMAttributes<Element>, Element>;
+export default SvgElement;

package/lib/es/src/components/svgImage/SvgElement.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svgConverter_1 = require("./svgConverter");
+const SvgElement = ({ node, colorMap }) => {
+    const attributes = (0, svgConverter_1.convertAttributes)(node, colorMap);
+    return react_1.default.createElement(node.tagName.toLowerCase(), {
+        ...attributes,
+        key: attributes.id || Math.random(),
+    }, Array.from(node.childNodes).map((child, idx) => child.nodeType === 1 ? (0, jsx_runtime_1.jsx)(SvgElement, { node: child, colorMap: colorMap }, idx) : null));
+};
+exports.default = SvgElement;

package/lib/es/src/components/svgImage/SvgImage.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { ColorOverridesMap } from './svgConverter';
+type SvgImageProps = {
+    /**
+     * The name of the image file without extension.
+     */
+    name: string;
+    /**
+     * The height and width of the SVG image in pixels.
+     *
+     * @default 150
+     */
+    size?: number;
+    /**
+     * The CDN base URL where the images are located.
+     *
+     * @default 'https://cdn.rio.cloud/riosvg'
+     */
+    baseUrl?: string;
+    /**
+     * Customize color using the color map and define the CSS variable name that shall be used.
+     */
+    colorMap?: ColorOverridesMap;
+    /**
+     * Additional class names added to the SVG element.
+     */
+    className?: string;
+};
+declare const SvgImage: (props: SvgImageProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default SvgImage;

package/lib/es/src/components/svgImage/SvgImage.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useSvgLoader_1 = require("./useSvgLoader");
+const BASE_CDN_URL = 'https://cdn.rio.cloud/riosvg';
+const SvgImage = (props) => {
+    const { name, className = '', size = 150, baseUrl = BASE_CDN_URL, colorMap } = props;
+    const { svgElement, error } = (0, useSvgLoader_1.useSvgLoader)(name, baseUrl, colorMap);
+    if (error) {
+        console.error(`Icon "${name}" not found`);
+        return null;
+    }
+    if (!svgElement) {
+        return null;
+    }
+    return react_1.default.cloneElement(svgElement, {
+        width: size,
+        height: size,
+        className,
+    });
+};
+exports.default = SvgImage;

package/lib/es/src/components/svgImage/svgConverter.d.ts

@@ -0,0 +1,17 @@
+export type CSSColorVar = 'color-white' | 'color-black' | 'always-color-white' | 'always-color-black' | 'gray-darkest' | 'gray-darker' | 'gray-dark' | 'gray' | 'gray-light' | 'gray-lighter' | 'gray-lightest' | 'gray-decent' | 'brand-primary' | 'brand-secondary' | 'brand-primary-decent' | 'brand-secondary-decent' | 'brand-info' | 'brand-success' | 'brand-warning' | 'brand-danger' | 'brand-info-decent' | 'brand-success-decent' | 'brand-warning-decent' | 'brand-danger-decent' | 'color-code' | 'color-status-available' | 'color-status-driving' | 'color-status-resting' | 'color-status-working' | 'color-map-marker-asset' | 'color-map-marker-poi' | 'color-map-marker-geofence' | 'color-map-marker-route' | 'color-map-marker-info' | 'color-map-marker-success' | 'color-map-marker-warning' | 'color-map-marker-danger' | 'color-map-marker-restrictions' | 'color-map-marker-text' | 'color-map-marker-active' | 'color-highlight-darkest' | 'color-highlight-darker' | 'color-highlight-dark' | 'color-highlight' | 'color-highlight-light' | 'color-highlight-lighter' | 'color-highlight-lightest' | 'color-highlight-decent' | 'color-rating-1' | 'color-rating-2' | 'color-rating-3' | 'color-rating-4' | 'color-rating-5' | 'color-coldplay-wine' | 'color-coldplay-aubergine' | 'color-coldplay-kashmir' | 'color-coldplay-fountain' | 'color-coldplay-turquoise' | 'color-coldplay-bermuda' | 'color-coldplay-moos' | 'color-coldplay-primrose' | 'color-coldplay-khaki' | 'color-warmup-crimson' | 'color-warmup-victoria' | 'color-warmup-cadillac' | 'color-warmup-raspberry' | 'color-warmup-cerise' | 'color-warmup-charm' | 'color-warmup-salmon' | 'color-warmup-cherokee' | 'color-warmup-corn' | 'color-spectrum-indigo' | 'color-spectrum-violet' | 'color-spectrum-purple' | 'color-spectrum-fuchsia' | 'color-spectrum-pink' | 'color-spectrum-rose';
+export type ColorOverridesMap = {
+    mainStrokeColor?: CSSColorVar;
+    mainFillColor?: CSSColorVar;
+    secondaryStrokeColor?: CSSColorVar;
+    backgroundFillColor?: CSSColorVar;
+};
+export declare const defaultColorMap: ColorOverridesMap;
+type StyleObject = Record<string, string>;
+export declare const parseStyleString: (style: string) => StyleObject;
+export declare const camelCase: (str: string) => string;
+type ConvertedAttributes = {
+    style?: React.CSSProperties;
+    [key: string]: string | React.CSSProperties | undefined;
+};
+export declare const convertAttributes: (node: Element, colorOverrides: ColorOverridesMap) => ConvertedAttributes;
+export {};

package/lib/es/src/components/svgImage/svgConverter.js

@@ -0,0 +1,84 @@
+"use strict";
+// Define the color replacements - handle hex colors and fallbacks
+// const svgColorReplacement: Record<string, string> = {
+//     'rgb(255, 255, 255)': 'var(--color-white)',
+//     '#fff': 'var(--color-white)',
+//     '#ffffff': 'var(--color-white)',
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertAttributes = exports.camelCase = exports.parseStyleString = exports.defaultColorMap = void 0;
+exports.defaultColorMap = {
+    mainStrokeColor: 'brand-info',
+    mainFillColor: 'color-highlight-lighter',
+    secondaryStrokeColor: 'gray',
+    backgroundFillColor: 'gray-lighter',
+};
+// Utility function to normalize RGB values (removes spaces, converts case)
+const normalizeColor = (color) => color.replace(/\s+/g, '').toLowerCase();
+const parseStyleString = (style) => {
+    return style.split(';').reduce((acc, rule) => {
+        const [key, value] = rule.split(':').map(s => s.trim());
+        if (key && value) {
+            acc[(0, exports.camelCase)(key)] = value;
+        }
+        return acc;
+    }, {});
+};
+exports.parseStyleString = parseStyleString;
+const camelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+exports.camelCase = camelCase;
+const REACT_ATTRIBUTE_MAP = {
+    'xml:space': 'xmlSpace',
+    'xmlns:xlink': 'xmlnsXlink',
+    'stroke-width': 'strokeWidth',
+    'fill-opacity': 'fillOpacity',
+    'stroke-opacity': 'strokeOpacity',
+    'clip-path': 'clipPath',
+};
+const convertAttributes = (node, colorOverrides) => {
+    const attributes = {};
+    const attrs = node.attributes;
+    // Create a dynamic color map based on the overrides
+    const colorMap = {
+        // Main fill color
+        'rgb(207, 240, 243)': `var(--${colorOverrides.mainFillColor || exports.defaultColorMap.mainFillColor})`,
+        '#cff0f3': `var(--${colorOverrides.mainFillColor || exports.defaultColorMap.mainFillColor})`,
+        // Main stroke color
+        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || exports.defaultColorMap.mainStrokeColor})`,
+        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || exports.defaultColorMap.mainStrokeColor})`,
+        // Secondary stroke color (gray elements)
+        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || exports.defaultColorMap.secondaryStrokeColor})`,
+        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || exports.defaultColorMap.secondaryStrokeColor})`,
+        // Background fill color
+        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || exports.defaultColorMap.backgroundFillColor})`,
+        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || exports.defaultColorMap.backgroundFillColor})`,
+        // Static colors that don't change
+        'rgb(255, 255, 255)': 'var(--color-white)',
+        '#fff': 'var(--color-white)',
+        '#ffffff': 'var(--color-white)',
+    };
+    for (const attr of attrs) {
+        const attrName = REACT_ATTRIBUTE_MAP[attr.name] || attr.name;
+        let value = attr.value;
+        if (attrName === 'style') {
+            const parsedStyle = (0, exports.parseStyleString)(value);
+            if (parsedStyle.fill) {
+                const normalizedFill = normalizeColor(parsedStyle.fill);
+                parsedStyle.fill = colorMap[normalizedFill] || parsedStyle.fill;
+            }
+            if (parsedStyle.stroke) {
+                const normalizedStroke = normalizeColor(parsedStyle.stroke);
+                parsedStyle.stroke = colorMap[normalizedStroke] || parsedStyle.stroke;
+            }
+            attributes.style = parsedStyle;
+        }
+        else {
+            if (attrName === 'fill' || attrName === 'stroke') {
+                const normalizedColor = normalizeColor(value);
+                value = colorMap[normalizedColor] || value;
+            }
+            attributes[attrName] = value;
+        }
+    }
+    return attributes;
+};
+exports.convertAttributes = convertAttributes;

package/lib/es/src/components/svgImage/useSvgLoader.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type ColorOverridesMap } from './svgConverter';
+type UseSvgLoaderResult = {
+    svgElement: ReactNode | null;
+    error: boolean;
+    colorMap?: ColorOverridesMap;
+};
+export declare const useSvgLoader: (name: string, baseUrl: string, colorMap?: ColorOverridesMap) => UseSvgLoaderResult;
+export {};