@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/components/steppedProgressBar/SteppedProgressBar.js

@@ -1,28 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Nav } from 'react-bootstrap';
-import classNames from 'classnames';
-const SteppedProgressBar = (props) => {
-    const { labels, selectedStepNumber, onSelectedChanged, variant = 'circle', disableFollowingPages: disableFollowingPageIndex, mobileBreakpoint = true, className = '', } = props;
-    const [disableFollowingPages, setDisableFollowingPages] = useState(disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber);
-    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 = classNames('stepped-progress-bar', variant && `variant-${variant}`, mobileBreakpoint && 'mobile-breakpoint', className && className);
-    const handleSelect = (selectedKey) => onSelectedChanged(Number(selectedKey));
-    return (_jsx(Nav, { className: wrapperClasses, activeKey: selectedStepNumber, onSelect: handleSelect, children: labels.map((labelObject, index) => (_jsx(Nav.Link, { eventKey: index, disabled: index > disableFollowingPages, as: 'a', className: classNames('step-tab', labelObject.labelWrapperClassName), children: _jsxs("div", { className: 'step-tab-content', children: [_jsx("div", { className: 'item-icon', children: labelObject.icon }), _jsx("div", { className: classNames('item-label', labelObject.labelClassName), children: labelObject.label })] }) }, index))) }));
+import { jsx as l, jsxs as v } from "react/jsx-runtime";
+import { useState as S, useEffect as h } from "react";
+import { Nav as m } from "react-bootstrap";
+import i from "classnames";
+const o = (p) => {
+  const {
+    labels: N,
+    selectedStepNumber: e,
+    onSelectedChanged: g,
+    variant: r = "circle",
+    disableFollowingPages: a,
+    mobileBreakpoint: b = !0,
+    className: n = ""
+  } = p, [c, d] = S(
+    a || e
+  );
+  h(() => {
+    if (a !== void 0) {
+      if (a < e) {
+        console.warn(
+          `Invalid component state detected in SteppedProgressBar: can not disable following pages ${a} when selectedStep is ${e}!`
+        );
+        return;
+      }
+      d(a);
+    } else e > c && d(e);
+  }, [a, e]);
+  const f = i(
+    "stepped-progress-bar",
+    r && `variant-${r}`,
+    b && "mobile-breakpoint",
+    n && n
+  );
+  return /* @__PURE__ */ l(m, { className: f, activeKey: e, onSelect: (s) => g(Number(s)), children: N.map((s, t) => /* @__PURE__ */ l(
+    m.Link,
+    {
+      eventKey: t,
+      disabled: t > c,
+      as: "a",
+      className: i("step-tab", s.labelWrapperClassName),
+      children: /* @__PURE__ */ v("div", { className: "step-tab-content", children: [
+        /* @__PURE__ */ l("div", { className: "item-icon", children: s.icon }),
+        /* @__PURE__ */ l("div", { className: i("item-label", s.labelClassName), children: s.label })
+      ] })
+    },
+    t
+  )) });
 };
-SteppedProgressBar.VARIANT_CIRCLE = 'circle';
-SteppedProgressBar.VARIANT_RECTANGLE = 'rectangle';
-SteppedProgressBar.VARIANT_ROADSIGN = 'roadsign';
-export default SteppedProgressBar;
+o.VARIANT_CIRCLE = "circle";
+o.VARIANT_RECTANGLE = "rectangle";
+o.VARIANT_ROADSIGN = "roadsign";
+export {
+  o as default
+};
+//# sourceMappingURL=SteppedProgressBar.js.map

package/components/steppedProgressBar/SteppedProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SteppedProgressBar.js","sources":["../../../src/components/steppedProgressBar/SteppedProgressBar.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { Nav } from 'react-bootstrap';\nimport classNames from 'classnames';\n\nexport type SteppedProgressBarLabel = {\n    /**\n     * The element shown in the step element.\n     *\n     * This can be a single step number or an icon element.\n     */\n    icon?: string | ReactNode;\n\n    /**\n     * The label shown below the step element.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the label element.\n     */\n    labelClassName?: string;\n\n    /**\n     * Additional classes to be set on the label wrapping element.\n     */\n    labelWrapperClassName?: string;\n};\n\nexport type SteppedProgressBarProps = {\n    /**\n     * Objects to defining the icon and the label of the navigation items.\n     *\n     * The icon can be a string or an icon.\n     */\n    labels: SteppedProgressBarLabel[];\n\n    /**\n     * Index of the selected navigation item.\n     */\n    selectedStepNumber: number;\n\n    /**\n     * Called with the new selected index after the user clicked a nav item.\n     */\n    onSelectedChanged: (selectedKey: number) => void;\n\n    /**\n     * The SteppedProgressBar Variant.\n     *\n     * One of \"circle\", \"rectangle\" or \"roadsign\".\n     *\n     * @default 'circle'\n     */\n    variant?: 'circle' | 'rectangle' | 'roadsign';\n\n    /**\n     * All navigation items with a higher index than this will be disabled.\n     */\n    disableFollowingPages?: number;\n\n    /**\n     * Deactivating the wrapping of bubbles on mobile.\n     *\n     * @default true\n     */\n    mobileBreakpoint?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst SteppedProgressBar = (props: SteppedProgressBarProps) => {\n    const {\n        labels,\n        selectedStepNumber,\n        onSelectedChanged,\n        variant = 'circle',\n        disableFollowingPages: disableFollowingPageIndex,\n        mobileBreakpoint = true,\n        className = '',\n    } = props;\n\n    const [disableFollowingPages, setDisableFollowingPages] = useState(\n        disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber\n    );\n\n    useEffect(() => {\n        if (disableFollowingPageIndex !== undefined) {\n            if (disableFollowingPageIndex < selectedStepNumber) {\n                console.warn(\n                    'Invalid component state detected in SteppedProgressBar: can not disable following ' +\n                        `pages ${disableFollowingPageIndex} when selectedStep is ${selectedStepNumber}!`\n                );\n                return;\n            }\n\n            setDisableFollowingPages(disableFollowingPageIndex);\n        } else if (selectedStepNumber > disableFollowingPages) {\n            setDisableFollowingPages(selectedStepNumber);\n        }\n    }, [disableFollowingPageIndex, selectedStepNumber]);\n\n    const wrapperClasses = classNames(\n        'stepped-progress-bar',\n        variant && `variant-${variant}`,\n        mobileBreakpoint && 'mobile-breakpoint',\n        className && className\n    );\n\n    const handleSelect = (selectedKey: string | null) => onSelectedChanged(Number(selectedKey));\n\n    return (\n        <Nav className={wrapperClasses} activeKey={selectedStepNumber} onSelect={handleSelect}>\n            {labels.map((labelObject, index) => (\n                <Nav.Link\n                    key={index}\n                    eventKey={index}\n                    disabled={index > disableFollowingPages}\n                    as='a'\n                    className={classNames('step-tab', labelObject.labelWrapperClassName)}\n                >\n                    <div className='step-tab-content'>\n                        <div className='item-icon'>{labelObject.icon}</div>\n                        <div className={classNames('item-label', labelObject.labelClassName)}>{labelObject.label}</div>\n                    </div>\n                </Nav.Link>\n            ))}\n        </Nav>\n    );\n};\n\nSteppedProgressBar.VARIANT_CIRCLE = 'circle' as const;\nSteppedProgressBar.VARIANT_RECTANGLE = 'rectangle' as const;\nSteppedProgressBar.VARIANT_ROADSIGN = 'roadsign' as const;\n\nexport default SteppedProgressBar;\n"],"names":["SteppedProgressBar","props","labels","selectedStepNumber","onSelectedChanged","variant","disableFollowingPageIndex","mobileBreakpoint","className","disableFollowingPages","setDisableFollowingPages","useState","useEffect","wrapperClasses","classNames","jsx","Nav","selectedKey","labelObject","index","jsxs"],"mappings":";;;;AAyEA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,uBAAuBC;AAAA,IACvB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,EAAA,IACZP,GAEE,CAACQ,GAAuBC,CAAwB,IAAIC;AAAA,IACtDL,KAAwDH;AAAA,EAAA;AAG5D,EAAAS,EAAU,MAAM;AACZ,QAAIN,MAA8B,QAAW;AACzC,UAAIA,IAA4BH,GAAoB;AAChD,gBAAQ;AAAA,UACJ,2FACaG,CAAyB,yBAAyBH,CAAkB;AAAA,QAAA;AAErF;AAAA,MACJ;AAEA,MAAAO,EAAyBJ,CAAyB;AAAA,IACtD,MAAA,CAAWH,IAAqBM,KAC5BC,EAAyBP,CAAkB;AAAA,EAEnD,GAAG,CAACG,GAA2BH,CAAkB,CAAC;AAElD,QAAMU,IAAiBC;AAAA,IACnB;AAAA,IACAT,KAAW,WAAWA,CAAO;AAAA,IAC7BE,KAAoB;AAAA,IACpBC,KAAaA;AAAA,EAAA;AAKjB,SACI,gBAAAO,EAACC,GAAA,EAAI,WAAWH,GAAgB,WAAWV,GAAoB,UAH9C,CAACc,MAA+Bb,EAAkB,OAAOa,CAAW,CAAC,GAIjF,UAAAf,EAAO,IAAI,CAACgB,GAAaC,MACtB,gBAAAJ;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MAEG,UAAUG;AAAA,MACV,UAAUA,IAAQV;AAAA,MAClB,IAAG;AAAA,MACH,WAAWK,EAAW,YAAYI,EAAY,qBAAqB;AAAA,MAEnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,QAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAG,EAAY,MAAK;AAAA,QAC7C,gBAAAH,EAAC,SAAI,WAAWD,EAAW,cAAcI,EAAY,cAAc,GAAI,UAAAA,EAAY,MAAA,CAAM;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA;AAAA,IATKC;AAAA,EAAA,CAWZ,GACL;AAER;AAEAnB,EAAmB,iBAAiB;AACpCA,EAAmB,oBAAoB;AACvCA,EAAmB,mBAAmB;"}

package/components/supportMarker/toggleSupportMarker.js

@@ -1,25 +1,17 @@
-export const SUPPORT_MARKER_CLASS = 'show-support-marker';
-export const toggleSupportMarker = () => {
-    if (!document || !document.documentElement) {
-        return;
-    }
-    const htmlClassList = document.documentElement.classList;
-    if (htmlClassList.contains(SUPPORT_MARKER_CLASS)) {
-        htmlClassList.remove(SUPPORT_MARKER_CLASS);
-    }
-    else {
-        htmlClassList.add(SUPPORT_MARKER_CLASS);
-    }
+const t = "show-support-marker", o = () => {
+  if (!document || !document.documentElement)
+    return;
+  const e = document.documentElement.classList;
+  e.contains(t) ? e.remove(t) : e.add(t);
+}, s = (e) => {
+  if (!document || !document.documentElement)
+    return;
+  const n = document.documentElement.classList;
+  e ? n.add(t) : n.remove(t);
 };
-export const enableSupportMarker = (enabled) => {
-    if (!document || !document.documentElement) {
-        return;
-    }
-    const htmlClassList = document.documentElement.classList;
-    if (enabled) {
-        htmlClassList.add(SUPPORT_MARKER_CLASS);
-    }
-    else {
-        htmlClassList.remove(SUPPORT_MARKER_CLASS);
-    }
+export {
+  t as SUPPORT_MARKER_CLASS,
+  s as enableSupportMarker,
+  o as toggleSupportMarker
 };
+//# sourceMappingURL=toggleSupportMarker.js.map

package/components/supportMarker/toggleSupportMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleSupportMarker.js","sources":["../../../src/components/supportMarker/toggleSupportMarker.ts"],"sourcesContent":["export const SUPPORT_MARKER_CLASS = 'show-support-marker';\n\nexport const toggleSupportMarker = () => {\n    if (!document || !document.documentElement) {\n        return;\n    }\n\n    const htmlClassList = document.documentElement.classList;\n    if (htmlClassList.contains(SUPPORT_MARKER_CLASS)) {\n        htmlClassList.remove(SUPPORT_MARKER_CLASS);\n    } else {\n        htmlClassList.add(SUPPORT_MARKER_CLASS);\n    }\n};\n\nexport const enableSupportMarker = (enabled: boolean) => {\n    if (!document || !document.documentElement) {\n        return;\n    }\n\n    const htmlClassList = document.documentElement.classList;\n\n    if (enabled) {\n        htmlClassList.add(SUPPORT_MARKER_CLASS);\n    } else {\n        htmlClassList.remove(SUPPORT_MARKER_CLASS);\n    }\n};\n"],"names":["SUPPORT_MARKER_CLASS","toggleSupportMarker","htmlClassList","enableSupportMarker","enabled"],"mappings":"AAAO,MAAMA,IAAuB,uBAEvBC,IAAsB,MAAM;AACrC,MAAI,CAAC,YAAY,CAAC,SAAS;AACvB;AAGJ,QAAMC,IAAgB,SAAS,gBAAgB;AAC/C,EAAIA,EAAc,SAASF,CAAoB,IAC3CE,EAAc,OAAOF,CAAoB,IAEzCE,EAAc,IAAIF,CAAoB;AAE9C,GAEaG,IAAsB,CAACC,MAAqB;AACrD,MAAI,CAAC,YAAY,CAAC,SAAS;AACvB;AAGJ,QAAMF,IAAgB,SAAS,gBAAgB;AAE/C,EAAIE,IACAF,EAAc,IAAIF,CAAoB,IAEtCE,EAAc,OAAOF,CAAoB;AAEjD;"}

package/components/svgImage/SvgElement.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type ColorOverridesMap } from './svgConverter';
+import { default as React } from 'react';
+import { ColorOverridesMap } from './svgConverter';
 type SvgElementProps = {
     node: Element;
     colorMap: ColorOverridesMap;

package/components/svgImage/SvgElement.js

@@ -1,11 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { convertAttributes } from "./svgConverter.js";
-const SvgElement = ({ node, colorMap }) => {
-    const attributes = convertAttributes(node, colorMap);
-    return React.createElement(node.tagName.toLowerCase(), {
-        ...attributes,
-        key: attributes.id || Math.random(),
-    }, Array.from(node.childNodes).map((child, idx) => child.nodeType === 1 ? _jsx(SvgElement, { node: child, colorMap: colorMap }, idx) : null));
+import { jsx as a } from "react/jsx-runtime";
+import n from "react";
+import { convertAttributes as s } from "./svgConverter.js";
+const i = ({ node: t, colorMap: e }) => {
+  const r = s(t, e);
+  return n.createElement(
+    t.tagName.toLowerCase(),
+    {
+      ...r,
+      key: r.id || Math.random()
+    },
+    Array.from(t.childNodes).map(
+      (o, m) => o.nodeType === 1 ? /* @__PURE__ */ a(i, { node: o, colorMap: e }, m) : null
+    )
+  );
 };
-export default SvgElement;
+export {
+  i as default
+};
+//# sourceMappingURL=SvgElement.js.map

package/components/svgImage/SvgElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgElement.js","sources":["../../../src/components/svgImage/SvgElement.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type ColorOverridesMap, convertAttributes } from './svgConverter';\n\ntype SvgElementProps = {\n    node: Element;\n    colorMap: ColorOverridesMap;\n};\n\nconst SvgElement = ({ node, colorMap }: SvgElementProps) => {\n    const attributes = convertAttributes(node, colorMap);\n\n    return React.createElement(\n        node.tagName.toLowerCase(),\n        {\n            ...attributes,\n            key: (attributes.id as string) || Math.random(),\n        },\n        Array.from(node.childNodes).map((child, idx) =>\n            child.nodeType === 1 ? <SvgElement key={idx} node={child as Element} colorMap={colorMap} /> : null\n        )\n    );\n};\n\nexport default SvgElement;\n"],"names":["SvgElement","node","colorMap","attributes","convertAttributes","React","child","idx","jsx"],"mappings":";;;AASA,MAAMA,IAAa,CAAC,EAAE,MAAAC,GAAM,UAAAC,QAAgC;AACxD,QAAMC,IAAaC,EAAkBH,GAAMC,CAAQ;AAEnD,SAAOG,EAAM;AAAA,IACTJ,EAAK,QAAQ,YAAA;AAAA,IACb;AAAA,MACI,GAAGE;AAAA,MACH,KAAMA,EAAW,MAAiB,KAAK,OAAA;AAAA,IAAO;AAAA,IAElD,MAAM,KAAKF,EAAK,UAAU,EAAE;AAAA,MAAI,CAACK,GAAOC,MACpCD,EAAM,aAAa,IAAI,gBAAAE,EAACR,GAAA,EAAqB,MAAMM,GAAkB,UAAAJ,EAAA,GAA7BK,CAAiD,IAAK;AAAA,IAAA;AAAA,EAClG;AAER;"}

package/components/svgImage/SvgImage.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ColorOverridesMap } from './svgConverter';
+import { default as React } from 'react';
+import { ColorOverridesMap } from './svgConverter';
 type SvgImageProps = {
     /**
      * The name of the image file without extension.

package/components/svgImage/SvgImage.js

@@ -1,20 +1,14 @@
-import React from 'react';
-import { useSvgLoader } from "./useSvgLoader.js";
-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 } = useSvgLoader(name, baseUrl, colorMap);
-    if (error) {
-        console.error(`Icon "${name}" not found`);
-        return null;
-    }
-    if (!svgElement) {
-        return null;
-    }
-    return React.cloneElement(svgElement, {
-        width: size,
-        height: size,
-        className,
-    });
+import a from "react";
+import { useSvgLoader as i } from "./useSvgLoader.js";
+const m = "https://cdn.rio.cloud/riosvg", f = (t) => {
+  const { name: o, className: n = "", size: e = 150, baseUrl: s = m, colorMap: l } = t, { svgElement: r, error: c } = i(o, s, l);
+  return c ? (console.error(`Icon "${o}" not found`), null) : r ? a.cloneElement(r, {
+    width: e,
+    height: e,
+    className: n
+  }) : null;
 };
-export default SvgImage;
+export {
+  f as default
+};
+//# sourceMappingURL=SvgImage.js.map

package/components/svgImage/SvgImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgImage.js","sources":["../../../src/components/svgImage/SvgImage.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useSvgLoader } from './useSvgLoader';\nimport type { ColorOverridesMap } from './svgConverter';\n\nconst BASE_CDN_URL = 'https://cdn.rio.cloud/riosvg';\n\ntype SvgImageProps = {\n    /**\n     * The name of the image file without extension.\n     */\n    name: string;\n\n    /**\n     * The height and width of the SVG image in pixels.\n     *\n     * @default 150\n     */\n    size?: number;\n\n    /**\n     * The CDN base URL where the images are located.\n     *\n     * @default 'https://cdn.rio.cloud/riosvg'\n     */\n    baseUrl?: string;\n\n    /**\n     * Customize color using the color map and define the CSS variable name that shall be used.\n     */\n    colorMap?: ColorOverridesMap;\n\n    /**\n     * Additional class names added to the SVG element.\n     */\n    className?: string;\n};\n\nconst SvgImage = (props: SvgImageProps) => {\n    const { name, className = '', size = 150, baseUrl = BASE_CDN_URL, colorMap } = props;\n\n    const { svgElement, error } = useSvgLoader(name, baseUrl, colorMap);\n\n    if (error) {\n        console.error(`Icon \"${name}\" not found`);\n        return null;\n    }\n\n    if (!svgElement) {\n        return null;\n    }\n\n    return React.cloneElement(svgElement as React.ReactElement, {\n        width: size,\n        height: size,\n        className,\n    });\n};\n\nexport default SvgImage;\n"],"names":["BASE_CDN_URL","SvgImage","props","name","className","size","baseUrl","colorMap","svgElement","error","useSvgLoader","React"],"mappings":";;AAKA,MAAMA,IAAe,gCAiCfC,IAAW,CAACC,MAAyB;AACvC,QAAM,EAAE,MAAAC,GAAM,WAAAC,IAAY,IAAI,MAAAC,IAAO,KAAK,SAAAC,IAAUN,GAAc,UAAAO,EAAA,IAAaL,GAEzE,EAAE,YAAAM,GAAY,OAAAC,EAAA,IAAUC,EAAaP,GAAMG,GAASC,CAAQ;AAElE,SAAIE,KACA,QAAQ,MAAM,SAASN,CAAI,aAAa,GACjC,QAGNK,IAIEG,EAAM,aAAaH,GAAkC;AAAA,IACxD,OAAOH;AAAA,IACP,QAAQA;AAAA,IACR,WAAAD;AAAA,EAAA,CACH,IAPU;AAQf;"}

package/components/svgImage/svgConverter.js

@@ -1,78 +1,65 @@
-// 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)',
-export const 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();
-export const parseStyleString = (style) => {
-    return style.split(';').reduce((acc, rule) => {
-        const [key, value] = rule.split(':').map(s => s.trim());
-        if (key && value) {
-            acc[camelCase(key)] = value;
-        }
-        return acc;
-    }, {});
-};
-export const camelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-const REACT_ATTRIBUTE_MAP = {
-    'xml:space': 'xmlSpace',
-    'xmlns:xlink': 'xmlnsXlink',
-    'stroke-width': 'strokeWidth',
-    'fill-opacity': 'fillOpacity',
-    'stroke-opacity': 'strokeOpacity',
-    'clip-path': 'clipPath',
-};
-export 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 || defaultColorMap.mainFillColor})`,
-        '#cff0f3': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,
-        // Main stroke color
-        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,
-        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,
-        // Secondary stroke color (gray elements)
-        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,
-        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,
-        // Background fill color
-        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,
-        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || 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 = 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;
-        }
+const r = {
+  mainStrokeColor: "brand-info",
+  mainFillColor: "color-highlight-lighter",
+  secondaryStrokeColor: "gray",
+  backgroundFillColor: "gray-lighter"
+}, k = (t) => t.replace(/\s+/g, "").toLowerCase(), C = (t) => t.split(";").reduce((o, a) => {
+  const [s, e] = a.split(":").map((i) => i.trim());
+  return s && e && (o[m(s)] = e), o;
+}, {}), m = (t) => t.replace(/-([a-z])/g, (o, a) => a.toUpperCase()), p = {
+  "xml:space": "xmlSpace",
+  "xmlns:xlink": "xmlnsXlink",
+  "stroke-width": "strokeWidth",
+  "fill-opacity": "fillOpacity",
+  "stroke-opacity": "strokeOpacity",
+  "clip-path": "clipPath"
+}, g = (t, o) => {
+  const a = {}, s = t.attributes, e = {
+    // Main fill color
+    "rgb(207, 240, 243)": `var(--${o.mainFillColor || r.mainFillColor})`,
+    "#cff0f3": `var(--${o.mainFillColor || r.mainFillColor})`,
+    // Main stroke color
+    "rgb(75, 128, 166)": `var(--${o.mainStrokeColor || r.mainStrokeColor})`,
+    "#4b80a6": `var(--${o.mainStrokeColor || r.mainStrokeColor})`,
+    // Secondary stroke color (gray elements)
+    "rgb(188, 192, 196)": `var(--${o.secondaryStrokeColor || r.secondaryStrokeColor})`,
+    "#bcc0c4": `var(--${o.secondaryStrokeColor || r.secondaryStrokeColor})`,
+    // Background fill color
+    "rgb(233, 235, 236)": `var(--${o.backgroundFillColor || r.backgroundFillColor})`,
+    "#e9ebec": `var(--${o.backgroundFillColor || r.backgroundFillColor})`,
+    // Static colors that don't change
+    "rgb(255, 255, 255)": "var(--color-white)",
+    "#fff": "var(--color-white)",
+    "#ffffff": "var(--color-white)"
+  };
+  for (const i of s) {
+    const c = p[i.name] || i.name;
+    let n = i.value;
+    if (c === "style") {
+      const l = C(n);
+      if (l.fill) {
+        const f = k(l.fill);
+        l.fill = e[f] || l.fill;
+      }
+      if (l.stroke) {
+        const f = k(l.stroke);
+        l.stroke = e[f] || l.stroke;
+      }
+      a.style = l;
+    } else {
+      if (c === "fill" || c === "stroke") {
+        const l = k(n);
+        n = e[l] || n;
+      }
+      a[c] = n;
     }
-    return attributes;
+  }
+  return a;
+};
+export {
+  m as camelCase,
+  g as convertAttributes,
+  r as defaultColorMap,
+  C as parseStyleString
 };
+//# sourceMappingURL=svgConverter.js.map

package/components/svgImage/svgConverter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgConverter.js","sources":["../../../src/components/svgImage/svgConverter.tsx"],"sourcesContent":["// Define the color replacements - handle hex colors and fallbacks\n// const svgColorReplacement: Record<string, string> = {\n//     'rgb(255, 255, 255)': 'var(--color-white)',\n//     '#fff': 'var(--color-white)',\n//     '#ffffff': 'var(--color-white)',\n\n//     // Main stroke color\n//     'rgb(75, 128, 166)': 'var(--brand-info)',\n//     '#4b80a6': 'var(--brand-info)',\n\n//     // Main fill color\n//     'rgb(207, 240, 243)': 'var(--color-highlight-lighter)',\n//     '#cff0f3': 'var(--color-highlight-lighter)',\n\n//     // Gray elements color\n//     'rgb(188, 192, 196)': 'var(--gray-dark)',\n//     '#bcc0c4': 'var(--gray-dark)',\n\n//     // Light background fill color\n//     'rgb(233, 235, 236)': 'var(--gray-lighter)',\n//     '#e9ebec': 'var(--gray-lighter)',\n// };\n\nexport type CSSColorVar =\n    | 'color-white'\n    | 'color-black'\n    | 'always-color-white'\n    | 'always-color-black'\n    | 'gray-darkest'\n    | 'gray-darker'\n    | 'gray-dark'\n    | 'gray'\n    | 'gray-light'\n    | 'gray-lighter'\n    | 'gray-lightest'\n    | 'gray-decent'\n    | 'brand-primary'\n    | 'brand-secondary'\n    | 'brand-primary-decent'\n    | 'brand-secondary-decent'\n    | 'brand-info'\n    | 'brand-success'\n    | 'brand-warning'\n    | 'brand-danger'\n    | 'brand-info-decent'\n    | 'brand-success-decent'\n    | 'brand-warning-decent'\n    | 'brand-danger-decent'\n    | 'color-code'\n    | 'color-status-available'\n    | 'color-status-driving'\n    | 'color-status-resting'\n    | 'color-status-working'\n    | 'color-map-marker-asset'\n    | 'color-map-marker-poi'\n    | 'color-map-marker-geofence'\n    | 'color-map-marker-route'\n    | 'color-map-marker-info'\n    | 'color-map-marker-success'\n    | 'color-map-marker-warning'\n    | 'color-map-marker-danger'\n    | 'color-map-marker-restrictions'\n    | 'color-map-marker-text'\n    | 'color-map-marker-active'\n    | 'color-highlight-darkest'\n    | 'color-highlight-darker'\n    | 'color-highlight-dark'\n    | 'color-highlight'\n    | 'color-highlight-light'\n    | 'color-highlight-lighter'\n    | 'color-highlight-lightest'\n    | 'color-highlight-decent'\n    | 'color-rating-1'\n    | 'color-rating-2'\n    | 'color-rating-3'\n    | 'color-rating-4'\n    | 'color-rating-5'\n    | 'color-coldplay-wine'\n    | 'color-coldplay-aubergine'\n    | 'color-coldplay-kashmir'\n    | 'color-coldplay-fountain'\n    | 'color-coldplay-turquoise'\n    | 'color-coldplay-bermuda'\n    | 'color-coldplay-moos'\n    | 'color-coldplay-primrose'\n    | 'color-coldplay-khaki'\n    | 'color-warmup-crimson'\n    | 'color-warmup-victoria'\n    | 'color-warmup-cadillac'\n    | 'color-warmup-raspberry'\n    | 'color-warmup-cerise'\n    | 'color-warmup-charm'\n    | 'color-warmup-salmon'\n    | 'color-warmup-cherokee'\n    | 'color-warmup-corn'\n    | 'color-spectrum-indigo'\n    | 'color-spectrum-violet'\n    | 'color-spectrum-purple'\n    | 'color-spectrum-fuchsia'\n    | 'color-spectrum-pink'\n    | 'color-spectrum-rose';\n\nexport type ColorOverridesMap = {\n    mainStrokeColor?: CSSColorVar;\n    mainFillColor?: CSSColorVar;\n    secondaryStrokeColor?: CSSColorVar;\n    backgroundFillColor?: CSSColorVar;\n};\n\nexport const defaultColorMap: ColorOverridesMap = {\n    mainStrokeColor: 'brand-info',\n    mainFillColor: 'color-highlight-lighter',\n    secondaryStrokeColor: 'gray',\n    backgroundFillColor: 'gray-lighter',\n};\n\n// Utility function to normalize RGB values (removes spaces, converts case)\nconst normalizeColor = (color: string) => color.replace(/\\s+/g, '').toLowerCase();\n\ntype StyleObject = Record<string, string>;\n\nexport const parseStyleString = (style: string): StyleObject => {\n    return style.split(';').reduce((acc, rule) => {\n        const [key, value] = rule.split(':').map(s => s.trim());\n        if (key && value) {\n            acc[camelCase(key)] = value;\n        }\n        return acc;\n    }, {} as StyleObject);\n};\n\nexport const camelCase = (str: string): string => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n\nconst REACT_ATTRIBUTE_MAP: Record<string, string> = {\n    'xml:space': 'xmlSpace',\n    'xmlns:xlink': 'xmlnsXlink',\n    'stroke-width': 'strokeWidth',\n    'fill-opacity': 'fillOpacity',\n    'stroke-opacity': 'strokeOpacity',\n    'clip-path': 'clipPath',\n};\n\ntype ConvertedAttributes = {\n    style?: React.CSSProperties;\n    [key: string]: string | React.CSSProperties | undefined;\n};\n\nexport const convertAttributes = (node: Element, colorOverrides: ColorOverridesMap) => {\n    const attributes: ConvertedAttributes = {};\n\n    const attrs = node.attributes;\n\n    // Create a dynamic color map based on the overrides\n    const colorMap = {\n        // Main fill color\n        'rgb(207, 240, 243)': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,\n        '#cff0f3': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,\n\n        // Main stroke color\n        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,\n        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,\n\n        // Secondary stroke color (gray elements)\n        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,\n        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,\n\n        // Background fill color\n        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,\n        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,\n\n        // Static colors that don't change\n        'rgb(255, 255, 255)': 'var(--color-white)',\n        '#fff': 'var(--color-white)',\n        '#ffffff': 'var(--color-white)',\n    };\n\n    for (const attr of attrs) {\n        const attrName = REACT_ATTRIBUTE_MAP[attr.name] || attr.name;\n        let value = attr.value;\n\n        if (attrName === 'style') {\n            const parsedStyle = parseStyleString(value);\n\n            if (parsedStyle.fill) {\n                const normalizedFill = normalizeColor(parsedStyle.fill);\n                parsedStyle.fill = colorMap[normalizedFill as keyof typeof colorMap] || parsedStyle.fill;\n            }\n\n            if (parsedStyle.stroke) {\n                const normalizedStroke = normalizeColor(parsedStyle.stroke);\n                parsedStyle.stroke = colorMap[normalizedStroke as keyof typeof colorMap] || parsedStyle.stroke;\n            }\n\n            attributes.style = parsedStyle;\n        } else {\n            if (attrName === 'fill' || attrName === 'stroke') {\n                const normalizedColor = normalizeColor(value);\n                value = colorMap[normalizedColor as keyof typeof colorMap] || value;\n            }\n\n            attributes[attrName] = value;\n        }\n    }\n\n    return attributes;\n};\n"],"names":["defaultColorMap","normalizeColor","color","parseStyleString","style","acc","rule","key","value","s","camelCase","str","_","letter","REACT_ATTRIBUTE_MAP","convertAttributes","node","colorOverrides","attributes","attrs","colorMap","attr","attrName","parsedStyle","normalizedFill","normalizedStroke","normalizedColor"],"mappings":"AA6GO,MAAMA,IAAqC;AAAA,EAC9C,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,qBAAqB;AACzB,GAGMC,IAAiB,CAACC,MAAkBA,EAAM,QAAQ,QAAQ,EAAE,EAAE,YAAA,GAIvDC,IAAmB,CAACC,MACtBA,EAAM,MAAM,GAAG,EAAE,OAAO,CAACC,GAAKC,MAAS;AAC1C,QAAM,CAACC,GAAKC,CAAK,IAAIF,EAAK,MAAM,GAAG,EAAE,IAAI,CAAAG,MAAKA,EAAE,KAAA,CAAM;AACtD,SAAIF,KAAOC,MACPH,EAAIK,EAAUH,CAAG,CAAC,IAAIC,IAEnBH;AACX,GAAG,CAAA,CAAiB,GAGXK,IAAY,CAACC,MAAwBA,EAAI,QAAQ,aAAa,CAACC,GAAGC,MAAWA,EAAO,YAAA,CAAa,GAExGC,IAA8C;AAAA,EAChD,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,aAAa;AACjB,GAOaC,IAAoB,CAACC,GAAeC,MAAsC;AACnF,QAAMC,IAAkC,CAAA,GAElCC,IAAQH,EAAK,YAGbI,IAAW;AAAA;AAAA,IAEb,sBAAsB,SAASH,EAAe,iBAAiBjB,EAAgB,aAAa;AAAA,IAC5F,WAAW,SAASiB,EAAe,iBAAiBjB,EAAgB,aAAa;AAAA;AAAA,IAGjF,qBAAqB,SAASiB,EAAe,mBAAmBjB,EAAgB,eAAe;AAAA,IAC/F,WAAW,SAASiB,EAAe,mBAAmBjB,EAAgB,eAAe;AAAA;AAAA,IAGrF,sBAAsB,SAASiB,EAAe,wBAAwBjB,EAAgB,oBAAoB;AAAA,IAC1G,WAAW,SAASiB,EAAe,wBAAwBjB,EAAgB,oBAAoB;AAAA;AAAA,IAG/F,sBAAsB,SAASiB,EAAe,uBAAuBjB,EAAgB,mBAAmB;AAAA,IACxG,WAAW,SAASiB,EAAe,uBAAuBjB,EAAgB,mBAAmB;AAAA;AAAA,IAG7F,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAGf,aAAWqB,KAAQF,GAAO;AACtB,UAAMG,IAAWR,EAAoBO,EAAK,IAAI,KAAKA,EAAK;AACxD,QAAIb,IAAQa,EAAK;AAEjB,QAAIC,MAAa,SAAS;AACtB,YAAMC,IAAcpB,EAAiBK,CAAK;AAE1C,UAAIe,EAAY,MAAM;AAClB,cAAMC,IAAiBvB,EAAesB,EAAY,IAAI;AACtD,QAAAA,EAAY,OAAOH,EAASI,CAAuC,KAAKD,EAAY;AAAA,MACxF;AAEA,UAAIA,EAAY,QAAQ;AACpB,cAAME,IAAmBxB,EAAesB,EAAY,MAAM;AAC1D,QAAAA,EAAY,SAASH,EAASK,CAAyC,KAAKF,EAAY;AAAA,MAC5F;AAEA,MAAAL,EAAW,QAAQK;AAAA,IACvB,OAAO;AACH,UAAID,MAAa,UAAUA,MAAa,UAAU;AAC9C,cAAMI,IAAkBzB,EAAeO,CAAK;AAC5C,QAAAA,IAAQY,EAASM,CAAwC,KAAKlB;AAAA,MAClE;AAEA,MAAAU,EAAWI,CAAQ,IAAId;AAAA,IAC3B;AAAA,EACJ;AAEA,SAAOU;AACX;"}

package/components/svgImage/useSvgLoader.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import { type ColorOverridesMap } from './svgConverter';
+import { ReactNode } from 'react';
+import { ColorOverridesMap } from './svgConverter';
 type UseSvgLoaderResult = {
     svgElement: ReactNode | null;
     error: boolean;

package/components/svgImage/useSvgLoader.js

@@ -1,43 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { convertAttributes, defaultColorMap } from "./svgConverter.js";
-import SvgElement from "./SvgElement.js";
-export const useSvgLoader = (name, baseUrl, colorMap = defaultColorMap) => {
-    const [svgElement, setSvgElement] = useState(null);
-    const [error, setError] = useState(false);
-    useEffect(() => {
-        const fetchSvg = async () => {
-            try {
-                const url = `${baseUrl}/${name}.svg`;
-                const response = await fetch(url);
-                if (!response.ok) {
-                    throw new Error('Failed to load SVG');
-                }
-                const svgText = await response.text();
-                if (svgText.startsWith('<html>')) {
-                    // When fetching from RIO CDN, a default index page is returned when something cannot be found.
-                    // Hence, we need to check for this to throw a proper error message.
-                    throw new Error(`Could not load SVG with URL: ${url}`);
-                }
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(svgText, 'image/svg+xml');
-                const svgNode = doc.querySelector('svg');
-                if (!svgNode) {
-                    throw new Error('Invalid SVG format');
-                }
-                const attributes = convertAttributes(svgNode, colorMap);
-                const svgJsx = (_jsx("svg", { ...attributes, children: Array.from(svgNode.childNodes).map((node, idx) => node.nodeType === 1 ? (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                    _jsx(SvgElement, { node: node, colorMap: colorMap }, idx)) : null) }));
-                setSvgElement(svgJsx);
-                setError(false);
-            }
-            catch (err) {
-                console.error(`Error loading SVG "${name}":`, err);
-                setError(true);
-            }
-        };
-        fetchSvg();
-    }, [name, baseUrl, colorMap]);
-    return { svgElement, error };
+import { jsx as i } from "react/jsx-runtime";
+import { useState as f, useEffect as S } from "react";
+import { defaultColorMap as p, convertAttributes as w } from "./svgConverter.js";
+import E from "./SvgElement.js";
+const F = (t, s, o = p) => {
+  const [g, m] = f(null), [v, n] = f(!1);
+  return S(() => {
+    (async () => {
+      try {
+        const r = `${s}/${t}.svg`, c = await fetch(r);
+        if (!c.ok)
+          throw new Error("Failed to load SVG");
+        const a = await c.text();
+        if (a.startsWith("<html>"))
+          throw new Error(`Could not load SVG with URL: ${r}`);
+        const e = new DOMParser().parseFromString(a, "image/svg+xml").querySelector("svg");
+        if (!e)
+          throw new Error("Invalid SVG format");
+        const d = w(e, o), u = /* @__PURE__ */ i("svg", { ...d, children: Array.from(e.childNodes).map(
+          (l, h) => l.nodeType === 1 ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            /* @__PURE__ */ i(E, { node: l, colorMap: o }, h)
+          ) : null
+        ) });
+        m(u), n(!1);
+      } catch (r) {
+        console.error(`Error loading SVG "${t}":`, r), n(!0);
+      }
+    })();
+  }, [t, s, o]), { svgElement: g, error: v };
 };
+export {
+  F as useSvgLoader
+};
+//# sourceMappingURL=useSvgLoader.js.map

package/components/svgImage/useSvgLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSvgLoader.js","sources":["../../../src/components/svgImage/useSvgLoader.tsx"],"sourcesContent":["import { useState, useEffect, type ReactNode } from 'react';\n\nimport { type ColorOverridesMap, convertAttributes, defaultColorMap } from './svgConverter';\nimport SvgElement from './SvgElement';\n\ntype UseSvgLoaderResult = {\n    svgElement: ReactNode | null;\n    error: boolean;\n    colorMap?: ColorOverridesMap;\n};\n\nexport const useSvgLoader = (name: string, baseUrl: string, colorMap = defaultColorMap): UseSvgLoaderResult => {\n    const [svgElement, setSvgElement] = useState<ReactNode | null>(null);\n    const [error, setError] = useState(false);\n\n    useEffect(() => {\n        const fetchSvg = async () => {\n            try {\n                const url = `${baseUrl}/${name}.svg`;\n                const response = await fetch(url);\n\n                if (!response.ok) {\n                    throw new Error('Failed to load SVG');\n                }\n\n                const svgText = await response.text();\n\n                if (svgText.startsWith('<html>')) {\n                    // When fetching from RIO CDN, a default index page is returned when something cannot be found.\n                    // Hence, we need to check for this to throw a proper error message.\n                    throw new Error(`Could not load SVG with URL: ${url}`);\n                }\n\n                const parser = new DOMParser();\n                const doc = parser.parseFromString(svgText, 'image/svg+xml');\n                const svgNode = doc.querySelector('svg');\n\n                if (!svgNode) {\n                    throw new Error('Invalid SVG format');\n                }\n\n                const attributes = convertAttributes(svgNode, colorMap);\n\n                const svgJsx = (\n                    <svg {...attributes}>\n                        {Array.from(svgNode.childNodes).map((node, idx) =>\n                            node.nodeType === 1 ? (\n                                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>\n                                <SvgElement key={idx} node={node as Element} colorMap={colorMap} />\n                            ) : null\n                        )}\n                    </svg>\n                );\n\n                setSvgElement(svgJsx);\n                setError(false);\n            } catch (err) {\n                console.error(`Error loading SVG \"${name}\":`, err);\n                setError(true);\n            }\n        };\n\n        fetchSvg();\n    }, [name, baseUrl, colorMap]);\n\n    return { svgElement, error };\n};\n"],"names":["useSvgLoader","name","baseUrl","colorMap","defaultColorMap","svgElement","setSvgElement","useState","error","setError","useEffect","url","response","svgText","svgNode","attributes","convertAttributes","svgJsx","node","idx","jsx","SvgElement","err"],"mappings":";;;;AAWO,MAAMA,IAAe,CAACC,GAAcC,GAAiBC,IAAWC,MAAwC;AAC3G,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAA2B,IAAI,GAC7D,CAACC,GAAOC,CAAQ,IAAIF,EAAS,EAAK;AAExC,SAAAG,EAAU,MAAM;AA+CZ,KA9CiB,YAAY;AACzB,UAAI;AACA,cAAMC,IAAM,GAAGT,CAAO,IAAID,CAAI,QACxBW,IAAW,MAAM,MAAMD,CAAG;AAEhC,YAAI,CAACC,EAAS;AACV,gBAAM,IAAI,MAAM,oBAAoB;AAGxC,cAAMC,IAAU,MAAMD,EAAS,KAAA;AAE/B,YAAIC,EAAQ,WAAW,QAAQ;AAG3B,gBAAM,IAAI,MAAM,gCAAgCF,CAAG,EAAE;AAKzD,cAAMG,IAFS,IAAI,UAAA,EACA,gBAAgBD,GAAS,eAAe,EACvC,cAAc,KAAK;AAEvC,YAAI,CAACC;AACD,gBAAM,IAAI,MAAM,oBAAoB;AAGxC,cAAMC,IAAaC,EAAkBF,GAASX,CAAQ,GAEhDc,sBACD,OAAA,EAAK,GAAGF,GACJ,UAAA,MAAM,KAAKD,EAAQ,UAAU,EAAE;AAAA,UAAI,CAACI,GAAMC,MACvCD,EAAK,aAAa;AAAA;AAAA,YAEd,gBAAAE,EAACC,GAAA,EAAqB,MAAAH,GAAuB,UAAAf,EAAA,GAA5BgB,CAAgD;AAAA,cACjE;AAAA,QAAA,GAEZ;AAGJ,QAAAb,EAAcW,CAAM,GACpBR,EAAS,EAAK;AAAA,MAClB,SAASa,GAAK;AACV,gBAAQ,MAAM,sBAAsBrB,CAAI,MAAMqB,CAAG,GACjDb,EAAS,EAAI;AAAA,MACjB;AAAA,IACJ,GAEA;AAAA,EACJ,GAAG,CAACR,GAAMC,GAASC,CAAQ,CAAC,GAErB,EAAE,YAAAE,GAAY,OAAAG,EAAA;AACzB;"}

package/components/switch/Switch.d.ts

@@ -1,5 +1,5 @@
-import React, { type PropsWithChildren } from 'react';
-import { type CurrentColor } from '../../utils/currentColors';
+import { default as React, PropsWithChildren } from 'react';
+import { CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
      * Optional key that is used as key and as the id on the internal input.

package/components/switch/Switch.js

@@ -1,21 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import { noop } from 'es-toolkit/function';
-import { getCurrentBackgroundColor } from "../../utils/currentColors.js";
-const Switch = forwardRef((props, ref) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, className = '', labelPosition = children ? 'right' : undefined, onChange = noop, ...remainingProps } = props;
-    const handleChange = (event) => {
-        onChange(event.target.checked);
-    };
-    const hasMultipleText = enabledText && disabledText;
-    const hasSingleText = enabledText && !disabledText;
-    const switchClasses = classNames('uikit-switch', className);
-    const switchLabelClasses = classNames('switch-label', disabled && 'cursor-not-allowed', labelPosition && `label-position-${labelPosition}`);
-    const switchContentClasses = classNames('switch-content');
-    const switchBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsx("div", { ref: ref, ...remainingProps, className: switchClasses, children: _jsxs("label", { className: switchLabelClasses, children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", { className: switchContentClasses, style: { color: switchBackgroundColor, minWidth }, children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] }), children && children] }) }));
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import o from "classnames";
+import { noop as y } from "es-toolkit/function";
+import { getCurrentBackgroundColor as B } from "../../utils/currentColors.js";
+const r = I((d, h) => {
+  const {
+    keyName: i,
+    checked: m = !1,
+    enabledText: s,
+    minWidth: f = 40,
+    disabled: c = !1,
+    color: p = "primary",
+    disabledText: e,
+    children: a,
+    className: w = "",
+    labelPosition: l = a ? "right" : void 0,
+    onChange: N = y,
+    ...g
+  } = d, u = (L) => {
+    N(L.target.checked);
+  }, x = s && e, C = s && !e, b = o("uikit-switch", w), T = o(
+    "switch-label",
+    c && "cursor-not-allowed",
+    l && `label-position-${l}`
+  ), k = o("switch-content"), v = B(p);
+  return /* @__PURE__ */ t("div", { ref: h, ...g, className: b, children: /* @__PURE__ */ n("label", { className: T, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        onChange: u,
+        checked: m,
+        type: "checkbox",
+        id: i,
+        className: "switch-input",
+        disabled: c
+      },
+      i
+    ),
+    /* @__PURE__ */ n("div", { className: k, style: { color: v, minWidth: f }, children: [
+      x ? /* @__PURE__ */ t("div", { className: "switch-text", "data-on": s, "data-off": e }) : C && /* @__PURE__ */ t("div", { className: "switch-text", "data-on": s, "data-off": s }),
+      /* @__PURE__ */ t("div", { className: "switch-handle" })
+    ] }),
+    a && a
+  ] }) });
 });
-Switch.LABEL_POSITION_LEFT = 'left';
-Switch.LABEL_POSITION_RIGHT = 'right';
-export default Switch;
+r.LABEL_POSITION_LEFT = "left";
+r.LABEL_POSITION_RIGHT = "right";
+export {
+  r as default
+};
+//# sourceMappingURL=Switch.js.map