@rolster/react-components 19.6.1 → 19.6.4

package/dist/cjs/index.cjs

@@ -414,13 +414,21 @@ function requireReactJsxRuntime_development () {
 	return reactJsxRuntime_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
 }
 
-var jsxRuntimeExports = jsxRuntime.exports;
+var jsxRuntimeExports = requireJsxRuntime();
 
 function renderClassStatus(base, status = {}, additionals) {
     const _classElement = [base];
@@ -582,8 +590,11 @@ function RlsButton({ type, children, disabled, identifier, onClick, prefixIcon,
     return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [requesting && jsxRuntimeExports.jsx(RlsSpinner, {}), prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
-function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
-    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
+function RlsButtonAction({ icon, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-button-action', { type });
+    }, [type]);
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onClick, disabled: disabled, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 
 function RlsButtonIcon({ icon, className, disabled, onClick, skeleton }) {
@@ -857,8 +868,376 @@ function RlsLabel({ children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("span", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
 }
 
-function RlsLed({ rlsTheme }) {
-    return jsxRuntimeExports.jsx("div", { className: "rls-led", "rls-theme": rlsTheme });
+function msgInvalidColor(color) {
+    return `Invalid color: "${color}". Use format "#FF6600".`;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function computeHue(max, r, g, b, d) {
+    if (d === 0) {
+        return 0;
+    }
+    switch (max) {
+        case r:
+            return ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        case g:
+            return ((b - r) / d + 2) / 6;
+        case b:
+            return ((r - g) / d + 4) / 6;
+        default:
+            return 0;
+    }
+}
+function hsvToRgb({ h, s, v }) {
+    const _h = h / 360;
+    const _s = s / 100;
+    const _v = v / 100;
+    const i = Math.floor(_h * 6);
+    const f = _h * 6 - i;
+    const p = _v * (1 - _s);
+    const q = _v * (1 - f * _s);
+    const t = _v * (1 - (1 - f) * _s);
+    let r;
+    let g;
+    let b;
+    switch (i % 6) {
+        case 0:
+            r = _v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = _v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = _v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = _v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = _v;
+            break;
+        case 5:
+            r = _v;
+            g = p;
+            b = q;
+            break;
+        default:
+            r = 0;
+            g = 0;
+            b = 0;
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255)
+    };
+}
+function rgbToHsv({ r, g, b }) {
+    const _r = r / 255;
+    const _g = g / 255;
+    const _b = b / 255;
+    const max = Math.max(_r, _g, _b);
+    const min = Math.min(_r, _g, _b);
+    const d = max - min;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    const h = computeHue(max, _r, _g, _b, d);
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        v: Math.round(v * 100)
+    };
+}
+function rgbToHex({ r, g, b }) {
+    const toHex = (channel) => clamp(Math.round(channel), 0, 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+function hexToRgb(hex) {
+    const normalized = normalizeHex(hex);
+    if (!normalized) {
+        return null;
+    }
+    return {
+        r: parseInt(normalized.slice(1, 3), 16),
+        g: parseInt(normalized.slice(3, 5), 16),
+        b: parseInt(normalized.slice(5, 7), 16)
+    };
+}
+function hexToHsv(hex) {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsv(rgb) : null;
+}
+function hsvToHex(hsv) {
+    return rgbToHex(hsvToRgb(hsv));
+}
+function hexIsValid(hex) {
+    return /^#?([a-f\d]{3}){1,2}$/i.test(hex);
+}
+function normalizeHex(hex) {
+    let value = hex.replace(/[^a-fA-F\d]/g, '');
+    if (value.length === 3) {
+        value = value
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    return value.length === 6 ? `#${value.toUpperCase()}` : '';
+}
+function hslToHex({ h, s, l }) {
+    const _s = s / 100;
+    const _l = l / 100;
+    const a = _s * Math.min(_l, 1 - _l);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return clamp(Math.round(255 * (_l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1))), 0, 255)
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+}
+function rgbToHsl({ r, g, b }) {
+    const _r = r / 255;
+    const _g = g / 255;
+    const _b = b / 255;
+    const max = Math.max(_r, _g, _b);
+    const min = Math.min(_r, _g, _b);
+    const d = max - min;
+    const l = (max + min) / 2;
+    const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+    const h = computeHue(max, _r, _g, _b, d);
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+function hexToHsl(hex) {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsl(rgb) : null;
+}
+const SHADE_LABELS = [
+    '950',
+    '900',
+    '800',
+    '700',
+    '600',
+    '500',
+    '400',
+    '300',
+    '200',
+    '100',
+    '050'
+];
+/**
+ * Target perceptual lightness (OKLab L, expressed as a 0–100 percentage) for
+ * each shade level. OKLab lightness is perceptually uniform, so equal numeric
+ * steps look like equal visual steps regardless of hue.
+ */
+const STANDARD_LUMINANCE = {
+    '950': 16,
+    '900': 24,
+    '800': 28,
+    '700': 33,
+    '600': 40,
+    '500': 48,
+    '400': 58,
+    '300': 72,
+    '200': 84,
+    '100': 92,
+    '050': 97
+};
+const SKELETON_OPACITY = {
+    '500': 0.5,
+    '400': 0.325,
+    '300': 0.25,
+    '200': 0.175,
+    '100': 0.1
+};
+const GRADIENT_LABELS = ['700', '600', '500', '400', '300'];
+const BACKDROP_LABELS = [
+    '900',
+    '800',
+    '700',
+    '600',
+    '500',
+    '400',
+    '300',
+    '200',
+    '100'
+];
+function parseHex(color) {
+    const rgb = hexToRgb(color);
+    if (!rgb) {
+        throw new Error(msgInvalidColor(color));
+    }
+    return rgb;
+}
+function rgbChannels({ r, g, b }) {
+    return `${r}, ${g}, ${b}`;
+}
+function generateThemeCSS(colors, theme) {
+    const prop = (suffix, value) => ({
+        name: `--rls-${theme}-${suffix}`,
+        value
+    });
+    const rgb900 = rgbChannels(parseHex(colors['900']));
+    const rgb700 = rgbChannels(parseHex(colors['700']));
+    const rgb500 = rgbChannels(parseHex(colors['500']));
+    const colorProps = SHADE_LABELS.map((label) => prop(`color-${label}`, colors[label]));
+    const gradientProps = GRADIENT_LABELS.map((label) => {
+        const darker = SHADE_LABELS[SHADE_LABELS.indexOf(label) - 1];
+        return prop(`gradient-${label}`, `linear-gradient(180deg, ${colors[label]} 15%, ${colors[darker]} 85%)`);
+    });
+    const backdropProps = BACKDROP_LABELS.map((label) => prop(`backdrop-${label}`, `rgba(${rgb900}, ${Number(label) / 1000})`));
+    const skeletonProps = Object.entries(SKELETON_OPACITY).map(([label, opacity]) => prop(`skeleton-${label}`, `rgba(${rgb700}, ${opacity})`));
+    const shadowProps = [
+        prop('shadow-color-500', `rgba(${rgb500}, 0.24)`),
+        prop('shadow-500', `0px 0px 0px 3px rgba(${rgb500}, 0.24)`)
+    ];
+    return [
+        ...colorProps,
+        ...gradientProps,
+        ...backdropProps,
+        ...skeletonProps,
+        ...shadowProps
+    ];
+}
+const srgbToLinear = (channel) => {
+    const x = channel / 255;
+    return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+};
+const linearToSrgb = (channel) => {
+    const v = channel <= 0.0031308
+        ? 12.92 * channel
+        : 1.055 * channel ** (1 / 2.4) - 0.055;
+    return clamp(Math.round(v * 255), 0, 255);
+};
+function rgbToOklch({ r, g, b }) {
+    const lr = srgbToLinear(r);
+    const lg = srgbToLinear(g);
+    const lb = srgbToLinear(b);
+    const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+    const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+    const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+    const okL = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const okA = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const okB = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    return { l: okL, c: Math.hypot(okA, okB), h: Math.atan2(okB, okA) };
+}
+function oklabToLinearRgb(l, a, b) {
+    const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    return [
+        4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+        -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+        -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
+    ];
+}
+const inGamut = ([r, g, b]) => {
+    const e = 1e-4;
+    return (r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e);
+};
+function oklchToRgb({ l, c, h }) {
+    const a = Math.cos(h);
+    const b = Math.sin(h);
+    const linearAt = (chroma) => oklabToLinearRgb(l, a * chroma, b * chroma);
+    if (!inGamut(linearAt(c))) {
+        let lo = 0;
+        let hi = c;
+        for (let i = 0; i < 20; i++) {
+            const mid = (lo + hi) / 2;
+            if (inGamut(linearAt(mid))) {
+                lo = mid;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        c = lo;
+    }
+    const [lr, lg, lb] = linearAt(c);
+    return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
+}
+const chromaFactor = (lightness) => 0.4 + 0.6 * (1 - Math.abs(lightness - 0.5) * 2);
+function detectShadeLevel(lightness) {
+    let bestLevel = '500';
+    let minDiff = Infinity;
+    SHADE_LABELS.forEach((level) => {
+        const diff = Math.abs(lightness - STANDARD_LUMINANCE[level]);
+        if (diff < minDiff) {
+            minDiff = diff;
+            bestLevel = level;
+        }
+    });
+    return bestLevel;
+}
+function generateThemePalette(baseColor, theme = 'primary') {
+    const rgb = hexToRgb(baseColor);
+    if (!rgb) {
+        throw new Error(msgInvalidColor(baseColor));
+    }
+    const base = rgbToOklch(rgb);
+    const matchedLevel = detectShadeLevel(base.l * 100);
+    const colors = {};
+    SHADE_LABELS.forEach((label) => {
+        if (label === matchedLevel) {
+            colors[label] = rgbToHex(rgb); // preserve the base color exactly
+            return;
+        }
+        const lightness = STANDARD_LUMINANCE[label] / 100;
+        colors[label] = rgbToHex(oklchToRgb({
+            l: lightness,
+            c: base.c * chromaFactor(lightness),
+            h: base.h
+        }));
+    });
+    const properties = generateThemeCSS(colors, theme);
+    return {
+        theme,
+        colors,
+        css: properties.map((p) => `${p.name}: ${p.value};`).join('\n'),
+        properties
+    };
+}
+function setThemeColor(baseColor, theme = 'primary') {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const { properties } = generateThemePalette(baseColor, theme);
+    const target = document.body || document.documentElement;
+    properties.forEach(({ name, value }) => {
+        target.style.setProperty(name, value);
+    });
+}
+const DEFAULT_COLOR = '#1780e0';
+
+const CONTENT_BACKGROUND = '--pvt-content-background';
+function RlsLed({ color, rlsTheme }) {
+    const refLed = require$$0.useRef(null);
+    const refColor = require$$0.useRef(undefined);
+    require$$0.useEffect(() => {
+        if (color && hexIsValid(color)) {
+            refColor.current = normalizeHex(color);
+            refLed.current?.style.setProperty(CONTENT_BACKGROUND, refColor.current);
+        }
+        else if (refColor.current) {
+            refColor.current = undefined;
+            refLed.current?.style.setProperty(CONTENT_BACKGROUND, 'var(--rls-app-color-500)');
+        }
+    }, [color]);
+    return jsxRuntimeExports.jsx("div", { ref: refLed, className: "rls-led", "rls-theme": rlsTheme });
 }
 
 function RlsMessageIcon({ icon, children, rlsTheme }) {
@@ -3060,337 +3439,6 @@ function RlsFieldSelect(props) {
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
-function hsvToRgb({ h, s, v }) {
-    const _h = h / 360;
-    const _s = s / 100;
-    const _v = v / 100;
-    const i = Math.floor(_h * 6);
-    const f = _h * 6 - i;
-    const p = _v * (1 - _s);
-    const q = _v * (1 - f * _s);
-    const t = _v * (1 - (1 - f) * _s);
-    let r;
-    let g;
-    let b;
-    switch (i % 6) {
-        case 0:
-            r = _v;
-            g = t;
-            b = p;
-            break;
-        case 1:
-            r = q;
-            g = _v;
-            b = p;
-            break;
-        case 2:
-            r = p;
-            g = _v;
-            b = t;
-            break;
-        case 3:
-            r = p;
-            g = q;
-            b = _v;
-            break;
-        case 4:
-            r = t;
-            g = p;
-            b = _v;
-            break;
-        case 5:
-            r = _v;
-            g = p;
-            b = q;
-            break;
-        default:
-            r = 0;
-            g = 0;
-            b = 0;
-    }
-    return {
-        r: Math.round(r * 255),
-        g: Math.round(g * 255),
-        b: Math.round(b * 255)
-    };
-}
-function rgbToHsv(r, g, b) {
-    const _r = r / 255;
-    const _g = g / 255;
-    const _b = b / 255;
-    const max = Math.max(_r, _g, _b);
-    const min = Math.min(_r, _g, _b);
-    const d = max - min;
-    let h = 0;
-    const s = max === 0 ? 0 : d / max;
-    const v = max;
-    if (max !== min) {
-        switch (max) {
-            case _r:
-                h = ((_g - _b) / d + (_g < _b ? 6 : 0)) / 6;
-                break;
-            case _g:
-                h = ((_b - _r) / d + 2) / 6;
-                break;
-            case _b:
-                h = ((_r - _g) / d + 4) / 6;
-                break;
-        }
-    }
-    return {
-        h: Math.round(h * 360),
-        s: Math.round(s * 100),
-        v: Math.round(v * 100)
-    };
-}
-function rgbToHex(r, g, b) {
-    return ('#' +
-        [r, g, b]
-            .map((x) => x.toString(16).padStart(2, '0'))
-            .join('')
-            .toUpperCase());
-}
-function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        }
-        : null;
-}
-function hexToHsv(hex) {
-    const rgb = hexToRgb(hex);
-    return rgb ? rgbToHsv(rgb.r, rgb.g, rgb.b) : null;
-}
-function hsvToHex(hsv) {
-    const rgb = hsvToRgb(hsv);
-    return rgbToHex(rgb.r, rgb.g, rgb.b);
-}
-function hexIsValid(hex) {
-    return /^#?([a-f\d]{3}){1,2}$/i.test(hex);
-}
-function normalizeHex(hex) {
-    let value = hex.replace(/[^a-fA-F\d]/g, '');
-    if (value.length === 3) {
-        value = value
-            .split('')
-            .map((c) => c + c)
-            .join('');
-    }
-    return value.length === 6 ? `#${value.toUpperCase()}` : '';
-}
-function hslToHex({ h, s, l }) {
-    const _s = s / 100;
-    const _l = l / 100;
-    const a = _s * Math.min(_l, 1 - _l);
-    const f = (n) => {
-        const k = (n + h / 30) % 12;
-        return Math.round(255 * (_l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)))
-            .toString(16)
-            .padStart(2, '0');
-    };
-    return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
-}
-function rgbToHsl(r, g, b) {
-    const _r = r / 255;
-    const _g = g / 255;
-    const _b = b / 255;
-    const max = Math.max(_r, _g, _b);
-    const min = Math.min(_r, _g, _b);
-    const d = max - min;
-    let h = 0;
-    const l = (max + min) / 2;
-    const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
-    if (d !== 0) {
-        switch (max) {
-            case _r:
-                h = ((_g - _b) / d + (_g < _b ? 6 : 0)) / 6;
-                break;
-            case _g:
-                h = ((_b - _r) / d + 2) / 6;
-                break;
-            case _b:
-                h = ((_r - _g) / d + 4) / 6;
-                break;
-        }
-    }
-    return {
-        h: Math.round(h * 360),
-        s: Math.round(s * 100),
-        l: Math.round(l * 100)
-    };
-}
-function hexToHsl(hex) {
-    const rgb = hexToRgb(hex);
-    return rgb ? rgbToHsl(rgb.r, rgb.g, rgb.b) : null;
-}
-const STANDARD_LUMINANCE = {
-    '950': 16,
-    '900': 24,
-    '800': 28,
-    '700': 33,
-    '600': 40,
-    '500': 48,
-    '400': 58,
-    '300': 72,
-    '200': 84,
-    '100': 92,
-    '050': 97
-};
-const SHADE_LABELS = [
-    '950',
-    '900',
-    '800',
-    '700',
-    '600',
-    '500',
-    '400',
-    '300',
-    '200',
-    '100',
-    '050'
-];
-function parseHex(color) {
-    const rgb = hexToRgb(color);
-    if (!rgb)
-        throw new Error(`Invalid color: "${color}". Use format "#FF6600".`);
-    return rgb;
-}
-function generateThemeCSS(colors, theme) {
-    const c900 = colors['900'];
-    const c700 = colors['700'];
-    const c500 = colors['500'];
-    const r900 = parseHex(c900);
-    const r700 = parseHex(c700);
-    const r500 = parseHex(c500);
-    const rgb900 = `${r900.r}, ${r900.g}, ${r900.b}`;
-    const rgb700 = `${r700.r}, ${r700.g}, ${r700.b}`;
-    const rgb500 = `${r500.r}, ${r500.g}, ${r500.b}`;
-    return [
-        { name: `--rls-${theme}-color-950`, value: colors['950'] },
-        { name: `--rls-${theme}-color-900`, value: c900 },
-        { name: `--rls-${theme}-color-800`, value: colors['800'] },
-        { name: `--rls-${theme}-color-700`, value: c700 },
-        { name: `--rls-${theme}-color-600`, value: colors['600'] },
-        { name: `--rls-${theme}-color-500`, value: c500 },
-        { name: `--rls-${theme}-color-400`, value: colors['400'] },
-        { name: `--rls-${theme}-color-300`, value: colors['300'] },
-        { name: `--rls-${theme}-color-200`, value: colors['200'] },
-        { name: `--rls-${theme}-color-100`, value: colors['100'] },
-        { name: `--rls-${theme}-color-050`, value: colors['050'] },
-        {
-            name: `--rls-${theme}-gradient-700`,
-            value: `linear-gradient(180deg, ${c700} 15%, ${colors['800']} 85%)`
-        },
-        {
-            name: `--rls-${theme}-gradient-600`,
-            value: `linear-gradient(180deg, ${colors['600']} 15%, ${c700} 85%)`
-        },
-        {
-            name: `--rls-${theme}-gradient-500`,
-            value: `linear-gradient(180deg, ${c500} 15%, ${colors['600']} 85%)`
-        },
-        {
-            name: `--rls-${theme}-gradient-400`,
-            value: `linear-gradient(180deg, ${colors['400']} 15%, ${c500} 85%)`
-        },
-        {
-            name: `--rls-${theme}-gradient-300`,
-            value: `linear-gradient(180deg, ${colors['300']} 15%, ${colors['400']} 85%)`
-        },
-        { name: `--rls-${theme}-backdrop-900`, value: `rgba(${rgb900}, 0.9)` },
-        { name: `--rls-${theme}-backdrop-800`, value: `rgba(${rgb900}, 0.8)` },
-        { name: `--rls-${theme}-backdrop-700`, value: `rgba(${rgb900}, 0.7)` },
-        { name: `--rls-${theme}-backdrop-600`, value: `rgba(${rgb900}, 0.6)` },
-        { name: `--rls-${theme}-backdrop-500`, value: `rgba(${rgb900}, 0.5)` },
-        { name: `--rls-${theme}-backdrop-400`, value: `rgba(${rgb900}, 0.4)` },
-        { name: `--rls-${theme}-backdrop-300`, value: `rgba(${rgb900}, 0.3)` },
-        { name: `--rls-${theme}-backdrop-200`, value: `rgba(${rgb900}, 0.2)` },
-        { name: `--rls-${theme}-backdrop-100`, value: `rgba(${rgb900}, 0.1)` },
-        { name: `--rls-${theme}-skeleton-500`, value: `rgba(${rgb700}, 0.5)` },
-        { name: `--rls-${theme}-skeleton-400`, value: `rgba(${rgb700}, 0.325)` },
-        { name: `--rls-${theme}-skeleton-300`, value: `rgba(${rgb700}, 0.25)` },
-        { name: `--rls-${theme}-skeleton-200`, value: `rgba(${rgb700}, 0.175)` },
-        { name: `--rls-${theme}-skeleton-100`, value: `rgba(${rgb700}, 0.1)` },
-        { name: `--rls-${theme}-shadow-color-500`, value: `rgba(${rgb500}, 0.24)` },
-        {
-            name: `--rls-${theme}-shadow-500`,
-            value: `0px 0px 0px 3px rgba(${rgb500}, 0.24)`
-        }
-    ];
-}
-function detectShadeLevel(hsl) {
-    let bestLevel = '500';
-    let minDiff = Infinity;
-    Object.keys(STANDARD_LUMINANCE).forEach((level) => {
-        const targetL = STANDARD_LUMINANCE[level];
-        const diff = Math.abs(hsl.l - targetL);
-        if (diff < minDiff) {
-            minDiff = diff;
-            bestLevel = level;
-        }
-    });
-    return bestLevel;
-}
-function generateThemePalette(baseColor, theme = 'primary') {
-    const hsl = hexToHsl(baseColor);
-    if (!hsl)
-        throw new Error(`Invalid color: "${baseColor}". Use format "#FF6600".`);
-    const matchedLevel = detectShadeLevel(hsl);
-    const targetL = STANDARD_LUMINANCE[matchedLevel];
-    const inputL = hsl.l;
-    const colors = {};
-    const matchedIndex = SHADE_LABELS.indexOf(matchedLevel);
-    SHADE_LABELS.forEach((label) => {
-        if (label === matchedLevel) {
-            colors[label] = baseColor.toUpperCase();
-            return;
-        }
-        const shadeTargetL = STANDARD_LUMINANCE[label];
-        const labelIndex = SHADE_LABELS.indexOf(label);
-        let lightL;
-        if (labelIndex < matchedIndex) {
-            const ratio = inputL / targetL;
-            lightL = shadeTargetL * ratio;
-        }
-        else {
-            const remainingInput = 100 - inputL;
-            const remainingTarget = 100 - targetL;
-            const progress = (shadeTargetL - targetL) / remainingTarget;
-            lightL = inputL + progress * remainingInput;
-        }
-        lightL = Math.min(100, Math.max(0, lightL));
-        const satFactor = lightL > 60
-            ? Math.max(0.2, (100 - lightL) / 40)
-            : lightL < 30
-                ? Math.max(0.2, lightL / 30)
-                : 1;
-        colors[label] = hslToHex({
-            h: hsl.h,
-            s: Math.round(Math.min(100, hsl.s * satFactor)),
-            l: Math.round(lightL)
-        });
-    });
-    const shades = colors;
-    const properties = generateThemeCSS(shades, theme);
-    return {
-        theme,
-        colors: shades,
-        css: properties.map((p) => `${p.name}: ${p.value};`).join('\n'),
-        properties
-    };
-}
-function setThemeColor(baseColor, theme = 'primary') {
-    const { properties } = generateThemePalette(baseColor, theme);
-    const target = document.body || document.documentElement;
-    properties.forEach(({ name, value }) => {
-        target.style.setProperty(name, value);
-    });
-}
-const DEFAULT_COLOR = '#1780e0';
-
 function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
     const initialColor = require$$0.useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
     const initialHsv = require$$0.useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
@@ -3930,8 +3978,8 @@ function useResize(props) {
     }, []);
 }
 
-const minValueSlider = 50;
-const maxValueSlider = 100;
+const MIN_SLIDER_VALUE = 50;
+const MAX_SLIDER_VALUE = 100;
 function getRatioFactor(ratio) {
     switch (ratio) {
         case '16:9':
@@ -3979,6 +4027,7 @@ function RlsImageEditor(props) {
     const refPicture = require$$0.useRef(null);
     const image = require$$0.useRef(new Image());
     const originalImage = require$$0.useRef(undefined);
+    const hasInteracted = require$$0.useRef(false);
     const ratio = require$$0.useMemo(() => {
         return props.ratio || '1:1';
     }, [props.ratio]);
@@ -4037,18 +4086,22 @@ function RlsImageEditor(props) {
             image.current.width > 0 &&
             image.current.height > 0) {
             const { height, width } = image.current.width >= image.current.height
-                ? refreshSelectionFromHeight(rateSelection)
-                : refreshSelectionFromWidth(rateSelection);
+                ? refreshSelectionFromWidth(rateSelection)
+                : refreshSelectionFromHeight(rateSelection);
             refSelection.current.style.width = `${width}px`;
             refSelection.current.style.height = `${height}px`;
+            const left = refImage.current.offsetWidth - width;
+            const top = refImage.current.offsetHeight - height;
+            if (!hasInteracted.current) {
+                refSelection.current.style.left = `${left / 2}px`;
+                refSelection.current.style.top = `${top / 2}px`;
+            }
             if (refSelection.current.offsetLeft + width >
                 refImage.current.offsetWidth) {
-                const left = refImage.current.offsetWidth - width;
                 refSelection.current.style.left = `${left < 0 ? 0 : left}px`;
             }
             if (refSelection.current.offsetTop + height >
                 refImage.current.offsetHeight) {
-                const top = refImage.current.offsetHeight - height;
                 refSelection.current.style.top = `${top < 0 ? 0 : top}px`;
             }
             refreshOverlaysStyle();
@@ -4072,7 +4125,7 @@ function RlsImageEditor(props) {
         const width = (refBody.current.offsetHeight * image.current.width) /
             image.current.height;
         return setImageStyle(`${width}px`, '100%');
-    }, [ratio]);
+    }, []);
     require$$0.useEffect(() => {
         image.current.onload = () => {
             const context = refCanvas.current.getContext('2d', {
@@ -4111,7 +4164,10 @@ function RlsImageEditor(props) {
     useRelocationOnComponent({
         container: refImage,
         element: refSelection,
-        onDrag: refreshOverlaysStyle
+        onDrag: () => {
+            hasInteracted.current = true;
+            refreshOverlaysStyle();
+        }
     });
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = require$$0.useCallback(() => {
@@ -4150,7 +4206,7 @@ function RlsImageEditor(props) {
             context?.putImageData(originalImage.current, 0, 0);
         }
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: minValueSlider, maxValue: maxValueSlider, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "classic", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "standard", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", rlsTheme: "primary", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 
 function RlsImageEditorModal(props) {
@@ -4340,6 +4396,42 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
+const DEFAULT_DESIGN_SYSTEM = 'bordered';
+
+const DESIGN_SYSTEM_PREFIX = 'rls-design-system';
+const DESIGN_SYSTEMS = ['bordered', 'filled'];
+function designSystemClass(designSystem) {
+    return `${DESIGN_SYSTEM_PREFIX}-${designSystem}`;
+}
+function setDesignSystem(designSystem = DEFAULT_DESIGN_SYSTEM) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const target = document.body || document.documentElement;
+    DESIGN_SYSTEMS.forEach((value) => {
+        target.classList.toggle(designSystemClass(value), value === designSystem);
+    });
+}
+
+function useDesingSystemController(primaryDesignSystem = 'bordered', secondaryDesignSystem = 'filled') {
+    const [designSystem, setDesignSystemValue] = require$$0.useState(() => {
+        setDesignSystem(primaryDesignSystem);
+        return primaryDesignSystem;
+    });
+    const setValue = require$$0.useCallback((value) => {
+        setDesignSystem(value);
+        setDesignSystemValue(value);
+    }, []);
+    const toggle = require$$0.useCallback(() => {
+        const nextDesignSystem = designSystem === primaryDesignSystem
+            ? secondaryDesignSystem
+            : primaryDesignSystem;
+        setDesignSystem(nextDesignSystem);
+        setDesignSystemValue(nextDesignSystem);
+    }, [designSystem, primaryDesignSystem, secondaryDesignSystem]);
+    return { setValue, toggle, value: designSystem };
+}
+
 function useDropdownController(effect = '0% 0%') {
     const [visible, setVisible] = require$$0.useState(false);
     const component = require$$0.useRef(null);
@@ -4548,10 +4640,12 @@ exports.renderClassStatus = renderClassStatus;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsl = rgbToHsl;
 exports.rgbToHsv = rgbToHsv;
+exports.setDesignSystem = setDesignSystem;
 exports.setErrorsI18n = setErrorsI18n;
 exports.setThemeColor = setThemeColor;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
+exports.useDesingSystemController = useDesingSystemController;
 exports.useDropdownController = useDropdownController;
 exports.useFieldAutocomplete = useFieldAutocomplete;
 exports.useFieldList = useFieldList;