@rio-cloud/rio-uikit 1.12.0 → 1.13.1

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

@@ -1,33 +0,0 @@
-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

@@ -1,57 +0,0 @@
-"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

@@ -1,85 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,16 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

@@ -1,66 +0,0 @@
-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

@@ -1,31 +0,0 @@
-"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

@@ -1,3 +0,0 @@
-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

@@ -1,30 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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

@@ -1,84 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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 {};