@rolster/react-components 19.6.3 → 19.6.7

package/dist/es/index.mjs

@@ -0,0 +1,4576 @@
+import require$$0, { useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext, useContext } from 'react';
+import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
+import { i18n, i18nSubscribe } from '@rolster/i18n';
+import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, navigationListFromInput, navigationListFromElement, createAutocompleteStore, PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
+import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, Time, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
+import ReactDOM from 'react-dom';
+import { useReactControl } from '@rolster/react-forms';
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_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 = requireJsxRuntime();
+
+function renderClassStatus(base, status = {}, additionals) {
+    const _classElement = [base];
+    Object.entries(status).forEach(([key, state]) => {
+        state &&
+            (typeof state === 'string'
+                ? _classElement.push(`${base}--${state}`)
+                : _classElement.push(`${base}--${key}`));
+    });
+    additionals && _classElement.push(additionals);
+    return _classElement.join(' ').trim();
+}
+
+const className = 'rls-tabular-text';
+const pointers = ['.', ','];
+function getCharClass(char) {
+    return pointers.includes(char)
+        ? `${className}__pointer`
+        : `${className}__char`;
+}
+function RlsTabularText({ className, value }) {
+    const codes = useMemo(() => {
+        return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: getCharClass(char), children: char }, index))) }));
+    }, [value]);
+    const _className = useMemo(() => {
+        return renderClassStatus('rls-tabular-text', {}, className);
+    }, [className]);
+    return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
+}
+
+function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
+    const classNameAmount = useMemo(() => {
+        return renderClassStatus('rls-amount', {}, className);
+    }, [className]);
+    const { decimal, integer } = useMemo(() => {
+        const currency = currencyFormat({ value, decimals });
+        if (!currency.includes(',')) {
+            return { integer: currency, decimal: '' };
+        }
+        const currencySplit = currency.split(',');
+        return {
+            integer: currencySplit[0] + (currencySplit[1] ? ',' : ''),
+            decimal: currencySplit[1] || ''
+        };
+    }, [value, decimals]);
+    return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
+}
+
+function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+    const valueInitial = String(formControl?.value ?? value ?? '');
+    const [valueArea, setValueArea] = useState(valueInitial);
+    const [focused, setFocused] = useState(false);
+    const elementRef = useRef(null);
+    const areaRef = formControl?.elementRef ?? elementRef;
+    const changeIsInternal = useRef(false);
+    const refreshHeight = useCallback(() => {
+        const element = areaRef.current;
+        if (element) {
+            element.style.height = 'auto';
+            element.style.height = `${element.scrollHeight}px`;
+        }
+    }, [areaRef]);
+    useEffect(() => {
+        if (!changeIsInternal.current) {
+            const nextValue = String(formControl?.value ?? value ?? '');
+            valueArea !== nextValue && setValueArea(nextValue);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value, value, valueArea]);
+    useEffect(() => {
+        refreshHeight();
+    }, [refreshHeight, valueArea]);
+    const onChangeArea = useCallback((event) => {
+        const nextValue = event.target.value;
+        changeIsInternal.current = true;
+        onValue?.(nextValue);
+        setValueArea(nextValue);
+        formControl?.setValue(nextValue);
+        event.target.style.height = 'auto';
+        event.target.style.height = `${event.target.scrollHeight}px`;
+    }, [formControl, onValue]);
+    const onKeyDownArea = useCallback((event) => {
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
+    }, [onKeyDown, onEnter]);
+    const onKeyUpArea = useCallback((event) => {
+        onKeyUp?.(event);
+    }, [onKeyUp]);
+    const onFocusArea = useCallback(() => {
+        formControl?.focus();
+        setFocused(() => true);
+        onFocus?.();
+    }, [formControl, onFocus]);
+    const onBlurArea = useCallback(() => {
+        formControl?.blur();
+        setFocused(() => false);
+        onBlur?.();
+    }, [formControl, onBlur]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-area-text', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused,
+            readonly: readOnly
+        });
+    }, [
+        formControl?.disabled,
+        formControl?.focused,
+        disabled,
+        focused,
+        readOnly
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+}
+
+function RlsAvatar({ children, contrasted, rounded, skeleton, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-avatar', { contrasted, rounded, skeleton });
+    }, [contrasted, rounded, skeleton]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsBadge({ children, contrasted, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-badge', { contrasted });
+    }, [contrasted]);
+    return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsBreadcrumbLabel({ label }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-breadcrumb__label__a', {
+            actionable: !!label.onClick
+        });
+    }, [label.onClick]);
+    return (jsxRuntimeExports.jsx("span", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, "rls-theme": label.rlsTheme, children: label.label }) }));
+}
+function RlsBreadcrumb({ labels }) {
+    const children = useMemo(() => {
+        return labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index)));
+    }, [labels]);
+    return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
+}
+
+function RlsIcon({ value, className, rlsTheme, skeleton }) {
+    const classNameIcon = useMemo(() => {
+        return renderClassStatus('rls-icon', { skeleton }, className);
+    }, [className, skeleton]);
+    return (jsxRuntimeExports.jsx("div", { className: classNameIcon, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
+}
+
+function RlsSpinner() {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-spinner", children: [jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--1", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--2", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--3", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--4", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--5", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--6", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--7", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--8", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--9", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) })] }));
+}
+
+function RlsButton({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-button__content', { type });
+    }, [type]);
+    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, rlsTheme, tooltip, type }) {
+    const className = 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 }) {
+    const classNameButton = useMemo(() => {
+        return renderClassStatus('rls-button-icon', { skeleton }, className);
+    }, [className, skeleton]);
+    return (jsxRuntimeExports.jsx("button", { className: classNameButton, onClick: onClick, disabled: disabled, children: !skeleton && jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
+}
+
+function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
+    const [checked, setChecked] = useState(formControl?.value === value);
+    useEffect(() => {
+        setChecked(formControl?.value === value);
+    }, [formControl?.value]);
+    const onSelect = useCallback(() => {
+        if (!disabled) {
+            formControl?.setValue(value);
+            onValue?.(value);
+        }
+    }, [formControl, value, onValue, disabled]);
+    return { checked, onSelect };
+}
+
+function RlsButtonOption({ icon, children, disabled, formControl, identifier, onClick, onValue, value }) {
+    const { checked, onSelect } = useFormSingleSelectionController({
+        disabled,
+        formControl,
+        onValue,
+        value
+    });
+    const className = useMemo(() => {
+        return renderClassStatus('rls-button-option', { checked });
+    }, [checked]);
+    const onAction = useCallback(() => {
+        onSelect();
+        onClick?.();
+    }, [onSelect, onClick]);
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onAction, disabled: disabled, children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), children] }));
+}
+
+function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-checkbox', { checked, disabled });
+    }, [checked, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark" }) }));
+}
+function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
+    const onClick = useCallback(() => {
+        formControl.setValue(!formControl.value);
+    }, [formControl.value]);
+    return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
+}
+
+function RlsSkeleton({ rlsTheme }) {
+    return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+}
+
+function RlsImage({ src, rlsTheme }) {
+    const [srcIsComplet, setSrcIsComplet] = useState(false);
+    const refImage = useRef(null);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-image', { complet: srcIsComplet });
+    }, [srcIsComplet]);
+    useEffect(() => {
+        setSrcIsComplet(!!(src && refImage.current?.complete));
+    }, [src]);
+    const onLoad = useCallback(() => {
+        setSrcIsComplet(true);
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { ref: refImage, src: src, onLoad: onLoad })] }));
+}
+
+function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
+    const valueInitial = (formControl?.value ?? value) ? String(value) : '';
+    const [valueInput, setValueInput] = useState(valueInitial);
+    const [focused, setFocused] = useState(false);
+    const changeIsInternal = useRef(false);
+    useEffect(() => {
+        if (!changeIsInternal.current && formControl) {
+            const valueControl = formControl.value ? String(formControl.value) : '';
+            valueInput !== valueControl && setValueInput(valueControl);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
+    const onChangeInput = useCallback((event) => {
+        const valueInput = event.target.value;
+        const value = type === 'number'
+            ? parseFloat((+valueInput).toFixed(decimals))
+            : valueInput;
+        changeIsInternal.current = true;
+        onValue?.(value);
+        setValueInput(valueInput);
+        formControl?.setValue(value);
+    }, [formControl, onValue, type, decimals]);
+    const onKeyDownInput = useCallback((event) => {
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
+    }, [onKeyDown, onEnter]);
+    const onKeyUpInput = useCallback((event) => {
+        onKeyUp?.(event);
+    }, [onKeyUp]);
+    const onFocusInput = useCallback(() => {
+        formControl?.focus();
+        setFocused(() => true);
+        onFocus?.();
+    }, [formControl, onFocus]);
+    const onBlurInput = useCallback(() => {
+        formControl?.blur();
+        setFocused(() => false);
+        onBlur?.();
+    }, [formControl, onBlur]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-input', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused
+        });
+    }, [formControl?.focused, formControl?.disabled, focused, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+}
+
+function RlsInputCounter({ className, disabled, formControl, identifier, max, min, onBlur, onFocus, onValue, readOnly, rlsTheme, step = 1, value: valueProp }) {
+    const changeIsInternal = useRef(false);
+    const [value, setValue] = useState(formControl?.value ?? valueProp ?? 0);
+    const [focused, setFocused] = useState(false);
+    const _disabled = useMemo(() => formControl?.disabled || disabled, [formControl?.disabled, disabled]);
+    const classNameCounter = useMemo(() => {
+        return renderClassStatus('rls-input-counter', {
+            disabled: _disabled,
+            focused: formControl?.focused ?? focused,
+            readonly: readOnly
+        }, className);
+    }, [_disabled, formControl?.focused, focused, readOnly, className]);
+    useEffect(() => {
+        if (!changeIsInternal.current && formControl) {
+            const counterValue = formControl.value;
+            counterValue !== undefined &&
+                counterValue !== value &&
+                setValue(counterValue);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
+    const onUpdate = useCallback((nextValue) => {
+        const clamped = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, nextValue));
+        changeIsInternal.current = true;
+        setValue(clamped);
+        formControl?.setValue(clamped);
+        onValue?.(clamped);
+    }, [formControl, max, min, onValue]);
+    const onDecrement = useCallback(() => {
+        onUpdate(value - step);
+    }, [onUpdate, value, step]);
+    const onIncrement = useCallback(() => {
+        onUpdate(value + step);
+    }, [onUpdate, value, step]);
+    const decrementIsAllowed = useMemo(() => min !== undefined && value <= min, [min, value]);
+    const incrementIsAllowed = useMemo(() => max !== undefined && value >= max, [max, value]);
+    const onChangeInput = useCallback((event) => {
+        const parsed = parseFloat(event.target.value);
+        !isNaN(parsed) && onUpdate(parsed);
+    }, [onUpdate]);
+    const onFocusInput = useCallback(() => {
+        setFocused(true);
+        formControl?.focus();
+        onFocus?.();
+    }, [formControl, onFocus]);
+    const onBlurInput = useCallback(() => {
+        setFocused(false);
+        formControl?.blur();
+        onBlur?.();
+    }, [formControl, onBlur]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameCounter, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__down", icon: "minus", onClick: onDecrement, disabled: _disabled || decrementIsAllowed }), jsxRuntimeExports.jsx("div", { className: "rls-input-counter__body", children: jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input-counter__control", type: "text", inputMode: "numeric", value: value, disabled: _disabled, readOnly: readOnly, onChange: onChangeInput, onFocus: onFocusInput, onBlur: onBlurInput }) }), jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__up", icon: "plus", onClick: onIncrement, disabled: _disabled || incrementIsAllowed })] }));
+}
+
+function RlsInputDecimal(props) {
+    const { decimals, formControl, identifier, onValue, symbol, value } = props;
+    const [valueInput, setValueInput] = useState((formControl?.value ?? value ?? BigDecimal.zero()).rounded);
+    const amount = useMemo(() => {
+        return formControl?.value?.rounded ?? valueInput;
+    }, [formControl?.value, valueInput]);
+    const onValueInput = useCallback((value) => {
+        const valueDecimal = BigDecimal.create(value);
+        formControl ? formControl.setValue(valueDecimal) : setValueInput(value);
+        onValue?.(valueDecimal);
+    }, [formControl, onValue]);
+    const decimalProps = { ...props, formControl: undefined };
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
+}
+
+function RlsInputMoney(props) {
+    const { decimals, formControl, identifier, onValue, symbol, value } = props;
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
+    const onValueInput = useCallback((value) => {
+        !formControl && setValueInput(value);
+        onValue?.(value);
+    }, [formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
+}
+
+function RlsInputNumber(props) {
+    const { formControl, identifier, onValue, value } = props;
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
+    const onValueInput = useCallback((value) => {
+        !formControl && setValueInput(value);
+        onValue?.(value);
+    }, [formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
+}
+
+function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type }) {
+    const [focused, setFocused] = useState(false);
+    const _onChange = useCallback((event) => {
+        formControl?.setValue(event.target.value);
+        onValue?.(event.target.value);
+    }, [formControl, onValue]);
+    const _onKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
+    }, [onKeyDown, onEnter]);
+    const _onKeyUp = useCallback((event) => {
+        onKeyUp?.(event);
+    }, [onKeyUp]);
+    const _onFocus = useCallback(() => {
+        formControl?.focus();
+        setFocused(() => true);
+    }, [formControl]);
+    const _onBlur = useCallback(() => {
+        formControl?.blur();
+        setFocused(() => false);
+    }, [formControl]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-input-password', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused
+        });
+    }, [formControl?.focused, formControl?.disabled, focused, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, readOnly: readOnly, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp }) }));
+}
+
+function RlsInputPercentage(props) {
+    const { formControl, identifier, onValue, value } = props;
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
+    const onValueInput = useCallback((value) => {
+        !formControl && setValueInput(value);
+        onValue?.(value);
+    }, [formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
+}
+
+function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
+    const [value, setValue] = useState('');
+    const className = useMemo(() => {
+        return renderClassStatus('rls-input-search', { disabled });
+    }, [disabled]);
+    const onValue = useCallback((value) => {
+        !formControl && setValue(() => value);
+    }, [formControl]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onEnter: onEnter, onValue: onValue, disabled: disabled, children: formControl?.value ?? value }), onSearch && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch, disabled: disabled }))] }));
+}
+
+function RlsInputText(props) {
+    const { formControl, identifier, onValue, value } = props;
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
+    const onValueInput = useCallback((value) => {
+        !formControl && setValueInput(value);
+        onValue?.(value);
+    }, [formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
+}
+
+function RlsLabel({ children, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("span", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
+}
+
+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 = useRef(null);
+    const refColor = useRef(undefined);
+    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 }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
+}
+
+function RlsPoster({ children, contrasted, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-poster', { contrasted });
+    }, [contrasted]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-progress-bar', { indeterminate });
+    }, [indeterminate]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage ?? 0}%` } }) }));
+}
+
+function RlsProgressCircular({ rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsxRuntimeExports.jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
+}
+
+function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-radiobutton', { checked, disabled });
+    }, [checked, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
+}
+
+function RlsSkeletonText({ active, children, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+}
+
+function RlsSwitch({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-switch', { checked, capsule, disabled });
+    }, [checked, capsule, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component", children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }) }) }));
+}
+function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
+    const onClick = useCallback(() => {
+        formControl.setValue(!formControl.value);
+    }, [formControl.value]);
+    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
+}
+
+function RlsAccordion({ bordered, children, className, disabled, identifier, onToggle, opened, rlsTheme, title }) {
+    const [open, setOpen] = useState(opened);
+    const [animating, setAnimating] = useState(false);
+    const contentRef = useRef(null);
+    const initializedRef = useRef(false);
+    const classNameAccordion = useMemo(() => {
+        return renderClassStatus('rls-accordion', { bordered, disabled, open, animating }, className);
+    }, [animating, bordered, className, disabled, open]);
+    const onClickHeader = useCallback(() => {
+        if (!disabled) {
+            setOpen((current) => {
+                const next = !current;
+                onToggle?.(next);
+                return next;
+            });
+        }
+    }, [disabled, onToggle]);
+    useEffect(() => {
+        const element = contentRef.current;
+        if (!element) {
+            return;
+        }
+        if (!initializedRef.current) {
+            initializedRef.current = true;
+            element.style.height = open ? 'auto' : '0px';
+            return;
+        }
+        setAnimating(true);
+        if (open) {
+            const target = element.scrollHeight;
+            element.style.height = '0px';
+            requestAnimationFrame(() => {
+                element.style.height = `${target}px`;
+            });
+        }
+        else {
+            element.style.height = `${element.scrollHeight}px`;
+            requestAnimationFrame(() => {
+                element.style.height = '0px';
+            });
+        }
+    }, [open]);
+    const onTransitionEnd = useCallback((event) => {
+        if (event.propertyName === 'height') {
+            const element = contentRef.current;
+            if (element && open) {
+                element.style.height = 'auto';
+            }
+            setAnimating(false);
+        }
+    }, [open]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameAccordion, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "rls-accordion__header", "aria-expanded": open, disabled: disabled, onClick: onClickHeader, children: [jsxRuntimeExports.jsx("span", { className: "rls-accordion__title", children: title }), jsxRuntimeExports.jsx("span", { className: "rls-accordion__indicator", children: jsxRuntimeExports.jsx(RlsIcon, { value: "chevron-down" }) })] }), jsxRuntimeExports.jsx("div", { ref: contentRef, className: "rls-accordion__body", "aria-hidden": !open, onTransitionEnd: onTransitionEnd, children: jsxRuntimeExports.jsx("div", { className: "rls-accordion__content", children: children }) })] }));
+}
+
+function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-alert', { bordered });
+    }, [bordered]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
+}
+
+function RlsBallot({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
+    const classNameBallot = useMemo(() => {
+        return renderClassStatus('rls-ballot', { bordered, skeleton }, className);
+    }, [bordered, skeleton, className]);
+    return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
+}
+
+function RlsBody({ children, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__body", "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-button-progress', { progressing });
+    }, [progressing]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
+}
+
+function RlsButtonStepper({ disabled, onAction, rlsTheme }) {
+    const onDown = useCallback(() => {
+        onAction?.('down');
+    }, [onAction]);
+    const onUp = useCallback(() => {
+        onAction?.('up');
+    }, [onAction]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-stepper", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", disabled: disabled, onClick: onDown }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-up", disabled: disabled, onClick: onUp })] }));
+}
+
+function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
+    const componentRef = useRef(null);
+    const [action, setAction] = useState(options[0]);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        function onCloseMenu({ target }) {
+            !componentRef?.current?.contains(target) && setVisible(false);
+        }
+        document.addEventListener('click', onCloseMenu);
+        return () => {
+            document.removeEventListener('click', onCloseMenu);
+        };
+    }, []);
+    const classNameList = useMemo(() => {
+        return renderClassStatus('rls-button-toggle__list', {
+            hide: !visible,
+            visible
+        });
+    }, [visible]);
+    const onClickMenu = useCallback(() => {
+        setVisible((visible) => !visible);
+    }, []);
+    const onSelectAction = useCallback((action) => {
+        setAction(() => action);
+        setVisible(() => false);
+        automatic && onAction(action.value);
+    }, [onAction, automatic]);
+    const onClickAction = useCallback(() => {
+        action && onAction(action.value);
+    }, [action, onAction]);
+    const onClickOption = useCallback((event) => {
+        const index = Number(event.currentTarget.dataset.index);
+        const option = options[index];
+        option && onSelectAction(option);
+    }, [options, onSelectAction]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntimeExports.jsx(RlsButton, { disabled: disabled, type: type, onClick: onClickAction, children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: classNameList, children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "rls-truncate", "data-index": index, onClick: onClickOption, children: action.label }, index))) }) })] }));
+}
+
+function RlsContent({ children, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-theme": rlsTheme, children: children }));
+}
+
+const errors = {
+    es: {
+        alphabetic: 'Campo solo permite caracteres',
+        alphanumber: 'Campo solo permite caracteres y número',
+        checked: 'Campo debe ser seleccionado',
+        decimal: 'Campo debe ser número decimal',
+        defined: 'Campo debe estar definido',
+        email: 'Campo debe ser correo electrónico',
+        greaterThanValue: 'Campo debe tener un valor mayor a {thanValue}',
+        greaterOrEqualsThanValue: 'Campo debe tener un valor mayor o igual a {thanValue}',
+        lessThanValue: 'Campo debe tener un valor menor a {thanValue}',
+        lessOrEqualsThanValue: 'Campo debe tener un valor menor o igual a {thanValue}',
+        maxValue: 'Campo debe tener un valor máximo de {thanValue}',
+        minValue: 'Campo debe tener un valor mínimo de {thanValue}',
+        nickname: 'Campo inválido para nombre de usuario',
+        onlyNumber: 'Campo debe ser númerico',
+        password: 'Campo no permitido para password',
+        required: 'Campo es requerido',
+        strMinlength: 'Campo debe tener mínimo {length} caracter(es)',
+        strMaxlength: 'Campo debe tener máximo {length} caracter(es)',
+        strReqLength: 'Campo debe tener {length} caracter(es)',
+        textonly: 'Campo solo permite caracteres (sin espacio)',
+        _unknown: 'Campo inválido {error}'
+    },
+    en: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        checked: 'Field must be selected',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlyNumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        strReqLength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    },
+    fr: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        checked: 'Field must be selected',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlyNumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        strReqLength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    },
+    pt: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        checked: 'Field must be selected',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlyNumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        strReqLength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    }
+};
+let _msgErrorsI18n = i18n(errors);
+function setErrorsI18n(dictionary) {
+    _msgErrorsI18n = i18n(Object.entries(errors).reduce((errors, [key, value]) => {
+        // Merge keys from dictionary in errors i18n
+        errors[key] = {
+            ...value,
+            ...dictionary[key]
+        };
+        return errors;
+    }, {}));
+}
+function msgErrorsI18n(key, language, interpolators) {
+    return _msgErrorsI18n(key, { language, interpolators });
+}
+
+function RlsMessageFormError({ className, formControl }) {
+    const [language, setLanguage] = useState('es');
+    useEffect(() => {
+        return i18nSubscribe((language) => {
+            setLanguage(language);
+        });
+    }, []);
+    const msgError = useMemo(() => {
+        return (formControl?.error &&
+            (msgErrorsI18n(formControl.error.id, language, formControl.error.data) ||
+                msgErrorsI18n('_unknown', language, { error: formControl.error.id })));
+    }, [formControl?.error, language]);
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: msgError }) })) }));
+}
+
+function RlsFieldDecimal(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-decimal');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function RlsFieldArea(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-area');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function RlsFieldFile({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+    const inputRef = useRef(null);
+    const disabled = useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
+    const className = useMemo(() => renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: readOnly
+    }, 'rls-field-file'), [formControl?.focused, formControl?.wrong, readOnly, disabled]);
+    const currentFile = useMemo(() => formControl?.value ?? value, [formControl?.value, value]);
+    const displayValue = useMemo(() => {
+        return currentFile?.name ?? '';
+    }, [currentFile]);
+    const onClickAction = useCallback((event) => {
+        if (currentFile) {
+            formControl?.setValue(undefined);
+            onValue?.(undefined);
+        }
+        else {
+            inputRef.current?.click();
+        }
+        event.stopPropagation();
+    }, [currentFile, formControl, onValue]);
+    const onChangeInput = useCallback((event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            formControl?.setValue(file);
+            onValue?.(file);
+        }
+        event.target.value = '';
+    }, [formControl, onValue]);
+    const onClickControl = useCallback(() => {
+        !readOnly && !disabled && inputRef.current?.click();
+    }, [readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+const reactI18n = i18n({
+    es: {
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        chooserImageActionCancel: 'Cancelar',
+        editorImageActionRestore: 'Restaurar',
+        editorImageActionSelect: 'Seleccionar',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
+    },
+    en: {
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        chooserImageActionCancel: 'Cancel',
+        editorImageActionRestore: 'Restore',
+        editorImageActionSelect: 'Select',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Enter keyword to filter...'
+    }
+});
+
+function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
+    const onClick = useMemo(() => {
+        return onClickElement(element);
+    }, [element, onClickElement]);
+    const onKeyDown = useMemo(() => {
+        return onKeydownElement(element);
+    }, [element, onKeydownElement]);
+    return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
+}
+function RlsFieldListSuggestions({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
+    const [labels, setLabels] = useState({
+        listEmptyDescription: reactI18n('listEmptyDescription'),
+        listEmptyTitle: reactI18n('listEmptyTitle')
+    });
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                listEmptyDescription: reactI18n('listEmptyDescription'),
+                listEmptyTitle: reactI18n('listEmptyTitle')
+            });
+        });
+    }, []);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-list__suggestions', {
+            disabled,
+            higher,
+            visible
+        });
+    }, [disabled, higher, visible]);
+    const onChangePattern = useCallback((event) => {
+        searchControl?.onChange(event.target.value);
+    }, [searchControl?.onChange]);
+    const onClickAction = useCallback((event) => {
+        action?.onClick();
+        if (!action?.keepOpen) {
+            onClickBackdrop(event);
+        }
+    }, [action?.onClick, action?.keepOpen, onClickBackdrop]);
+    const searching = searchControl?.searching ?? false;
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
+}
+
+function RlsFieldMoney(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-money');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function RlsFieldNumber(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-number');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function RlsFieldPassword(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const [passwordIsActive, setPasswordIsActive] = useState(true);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-password');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const onTogglePassword = useCallback(() => {
+        setPasswordIsActive((password) => !password);
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { ...props, type: passwordIsActive ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: passwordIsActive ? 'eye' : 'eye-off', onClick: onTogglePassword })] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function RlsFieldPercentage(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-percentage');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputPercentage, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: value }) }) })] }));
+}
+
+function RlsFieldText(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-text');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+function useFormToggleController({ disabled, formControl }) {
+    const [checked, setChecked] = useState(!!formControl?.value);
+    useEffect(() => {
+        setChecked(!!formControl?.value);
+    }, [formControl?.value]);
+    const onToggle = useCallback(() => {
+        if (!disabled) {
+            formControl
+                ? formControl.enabled && formControl.setValue(!formControl.value)
+                : setChecked((checked) => !checked);
+        }
+    }, [formControl, disabled]);
+    return { checked, onToggle };
+}
+
+function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+    const { checked, onToggle } = useFormToggleController({
+        disabled,
+        formControl
+    });
+    const className = useMemo(() => {
+        return renderClassStatus('rls-label-checkbox', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
+}
+
+function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
+    const { checked, onSelect } = useFormSingleSelectionController({
+        disabled,
+        formControl,
+        onValue,
+        value
+    });
+    const className = useMemo(() => {
+        return renderClassStatus('rls-label-radiobutton', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
+}
+
+function RlsLabelSwitch({ capsule, children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+    const { checked, onToggle } = useFormToggleController({
+        disabled,
+        formControl
+    });
+    const className = useMemo(() => {
+        return renderClassStatus('rls-label-switch', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, capsule: capsule, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
+}
+
+function RlsMessageEmpty({ children, className, emoji, icon, identifier, image, rlsTheme, title }) {
+    const classNameMessageEmpty = useMemo(() => {
+        return renderClassStatus('rls-message-empty', {}, className);
+    }, [className]);
+    const logo = useMemo(() => {
+        if (icon) {
+            return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
+        }
+        if (emoji) {
+            return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx("span", { className: "rls-message-empty__logo--emoji", children: emoji }) }));
+        }
+        if (image) {
+            return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx("img", { className: "rls-message-empty__logo--image", src: image }) }));
+        }
+        return null;
+    }, [icon, emoji, image]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameMessageEmpty, "rls-theme": rlsTheme, children: [logo, jsxRuntimeExports.jsxs("div", { className: "rls-message-empty__body", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-message-empty__title", children: title }), children && (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__content", children: children }))] })] }));
+}
+
+function RlsNavbar({ children, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsxs("nav", { id: identifier, className: "rls-app__page__nav", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__content", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__backdrop" })] }));
+}
+
+function RlsNavbarMenuOption({ option, onOption }) {
+    const onClick = useCallback(() => {
+        onOption?.(option);
+    }, [onOption]);
+    return (jsxRuntimeExports.jsxs("li", { className: "rls-app__page__nav__option", onClick: onClick, children: [jsxRuntimeExports.jsx(RlsIcon, { value: option.icon }), jsxRuntimeExports.jsx("span", { className: "rls-label-font", children: option.label })] }));
+}
+function RlsNavbarMenu({ options, onOption }) {
+    return (jsxRuntimeExports.jsx("ul", { className: "rls-app__page__nav__menu", children: options.map((option) => (jsxRuntimeExports.jsx(RlsNavbarMenuOption, { option: option, onOption: onOption }, option.id))) }));
+}
+
+function PageButton({ page, onSelect }) {
+    const className = useMemo(() => renderClassStatus('rls-pagination__page', { active: page.active }), [page.active]);
+    const onClick = useCallback(() => {
+        onSelect(page);
+    }, [page, onSelect]);
+    return (jsxRuntimeExports.jsx("button", { type: "button", className: className, onClick: onClick, children: page.label }));
+}
+function RlsPagination({ suggestions, count, filter, onPagination }) {
+    const [template, setTemplate] = useState();
+    const controller = useRef(undefined);
+    const refreshTemplate = useCallback((template, suggestions) => {
+        const { firstPage, lastPage } = template;
+        onPagination?.({ firstPage, lastPage, suggestions });
+        setTemplate(template);
+    }, [onPagination]);
+    const refreshPagination = useCallback((pagination) => {
+        pagination &&
+            refreshTemplate(pagination.template, pagination.page.collection);
+    }, [refreshTemplate]);
+    useEffect(() => {
+        const pagination = new PaginationController({
+            suggestions,
+            count,
+            position: template?.currentPage.value
+        });
+        controller.current = pagination;
+        refreshTemplate(pagination.template, pagination.page.collection);
+    }, [suggestions, count, refreshTemplate]);
+    useEffect(() => {
+        refreshPagination(controller.current?.filtrable(filter));
+    }, [filter, refreshPagination]);
+    const goToPagination = useCallback((page) => {
+        refreshPagination(controller.current?.goToPage(page));
+    }, [refreshPagination]);
+    const goFirstPagination = useCallback(() => {
+        refreshPagination(controller.current?.goFirstPage());
+    }, [refreshPagination]);
+    const goPreviousPagination = useCallback(() => {
+        refreshPagination(controller.current?.goPreviousPage());
+    }, [refreshPagination]);
+    const goNextPagination = useCallback(() => {
+        refreshPagination(controller.current?.goNextPage());
+    }, [refreshPagination]);
+    const goLastPagination = useCallback(() => {
+        refreshPagination(controller.current?.goLastPage());
+    }, [refreshPagination]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page) => (jsxRuntimeExports.jsx(PageButton, { page: page, onSelect: goToPagination }, page.value))) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+}
+
+function RlsPickerDayHeaders() {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("span", { className: "rls-picker-day__label", children: title }, index))) }));
+}
+function RlsPickerDayElement({ day, onSelect, disabled }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-picker-day__element', {
+            disabled: day.disabled || disabled,
+            focused: day.focused,
+            forbidden: day.forbidden,
+            selected: day.selected,
+            today: day.today
+        });
+    }, [day, disabled]);
+    const onClick = useCallback(() => {
+        day.value && !day.disabled && !disabled && onSelect(day.value);
+    }, [day.value, day.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: day.value || '??' }) }));
+}
+function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+    const dateDay = useMemo(() => date ?? new Date(), [date]);
+    const [weeks, setWeeks] = useState([]);
+    const [value, setValue] = useState(formControl?.value ?? dateDay.getDate());
+    const [_, setI18nVersion] = useState(0);
+    const setDayValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setDayValue(value);
+        onValue?.(value);
+    }, [setDayValue, onValue]);
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setI18nVersion((value) => value + 1);
+        });
+    }, []);
+    useEffect(() => {
+        const options = createPickerOptions();
+        const day = verifyDayPicker(options);
+        day ? setDayValue(day) : setWeeks(createDayPicker(options));
+    }, [dateDay, month, year, value, minDate, maxDate]);
+    useEffect(() => {
+        const day = verifyDayPicker(createPickerOptions());
+        day
+            ? formControl?.setValue(day)
+            : setValue(formControl?.value || dateDay.getDate());
+    }, [formControl?.value]);
+    const createPickerOptions = useCallback(() => {
+        return {
+            date: dateDay,
+            day: formControl?.value ?? value,
+            month: month ?? dateDay.getMonth(),
+            year: year ?? dateDay.getFullYear(),
+            minDate,
+            maxDate
+        };
+    }, [dateDay, formControl?.value, value, month, year, minDate, maxDate]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
+}
+
+function RlsPickerDayRangeHeaders() {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("span", { className: "rls-picker-day__label", children: title }, index))) }));
+}
+function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-picker-day-range__element', {
+            disabled: day.disabled || disabled,
+            end: day.end,
+            forbidden: day.forbidden,
+            ranged: day.ranged,
+            source: day.source
+        });
+    }, [day.disabled, day.end, day.forbidden, day.ranged, day.source, disabled]);
+    const onClick = useCallback(() => {
+        day.value && !day.disabled && !disabled && onSelect(day.value);
+    }, [day.value, day.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: day.value || '??' }) }));
+}
+function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsTheme }) {
+    const rangeDay = useMemo(() => {
+        return formControl?.value ?? DateRange.now();
+    }, [formControl?.value]);
+    const dateDayRange = useMemo(() => {
+        return normalizeMinTime(date ?? rangeDay.minDate);
+    }, [date, rangeDay]);
+    const sourceDate = useRef(rangeDay.minDate);
+    const [weeks, setWeeks] = useState([]);
+    const [range, setRange] = useState(rangeDay);
+    const [_, setI18nVersion] = useState(0);
+    const onSelect = useCallback((value) => {
+        const date = assignDayInDate(dateDayRange, value);
+        const range = dateIsBefore(date, sourceDate.current)
+            ? new DateRange(sourceDate.current, date)
+            : new DateRange(date, sourceDate.current);
+        sourceDate.current = date;
+        setRange(range);
+        formControl?.setValue(range);
+    }, [dateDayRange, formControl]);
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setI18nVersion((value) => value + 1);
+        });
+    }, []);
+    useEffect(() => {
+        setWeeks(createDayRangePicker({
+            date: dateDayRange,
+            range,
+            sourceDate: sourceDate.current,
+            minDate,
+            maxDate
+        }));
+    }, [dateDayRange, range, minDate, maxDate]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
+}
+
+function RlsPickerMonthElement({ month, onSelect, disabled }) {
+    const [label, setLabel] = useState(MONTH_NAMES(month.value));
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabel(MONTH_NAMES(month.value));
+        });
+    }, []);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-picker-month__component', {
+            disabled: month.disabled || disabled,
+            focused: month.focused,
+            selected: month.selected
+        });
+    }, [month.disabled, month.focused, month.selected, disabled]);
+    const onClick = useCallback(() => {
+        valueIsDefined(month.value) &&
+            !month.disabled &&
+            !disabled &&
+            onSelect(month.value);
+    }, [month.value, month.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }));
+}
+function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+    const dateMonth = useMemo(() => date ?? new Date(), [date]);
+    const [months, setMonths] = useState([]);
+    const [value, setValue] = useState(formControl?.value ?? dateMonth.getMonth());
+    const setMonthValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setMonthValue(value);
+        onValue?.(value);
+    }, [setMonthValue, onValue]);
+    useEffect(() => {
+        const options = {
+            date: dateMonth,
+            month: formControl?.value ?? value,
+            year: year ?? dateMonth.getFullYear(),
+            minDate,
+            maxDate
+        };
+        const month = verifyMonthPicker(options);
+        valueIsDefined(month)
+            ? setMonthValue(month)
+            : setMonths(createMonthPicker(options));
+    }, [dateMonth, year, value, minDate, maxDate]);
+    useEffect(() => {
+        const month = verifyMonthPicker({
+            date: dateMonth,
+            month: formControl?.value ?? value,
+            year: year ?? dateMonth.getFullYear(),
+            minDate,
+            maxDate
+        });
+        valueIsDefined(month)
+            ? formControl?.setValue(month)
+            : setValue(formControl?.value ?? dateMonth.getMonth());
+    }, [formControl?.value]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
+}
+
+function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+    const { limitNext, limitPrevious } = useMemo(() => {
+        return monthLimitTemplate({
+            date,
+            maxDate,
+            minDate,
+            month: monthControl.value
+        });
+    }, [date, maxDate, minDate, monthControl.value]);
+    const [label, setLabel] = useState(MONTH_NAMES(monthControl.value ?? Month.January));
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabel(MONTH_NAMES(monthControl.value ?? Month.January));
+        });
+    }, []);
+    useEffect(() => {
+        setLabel(MONTH_NAMES(monthControl.value ?? Month.January));
+    }, [monthControl.value]);
+    const onPreviousMonth = useCallback(() => {
+        if (valueIsDefined(monthControl.value) &&
+            valueIsDefined(yearControl.value)) {
+            if (monthControl.value > Month.January) {
+                monthControl.setValue(monthControl.value - 1);
+            }
+            else {
+                monthControl.setValue(Month.December);
+                yearControl.setValue(yearControl.value - 1);
+            }
+        }
+    }, [monthControl.value, yearControl.value]);
+    const onMonth = useCallback(() => {
+        onClick?.('month');
+    }, [onClick]);
+    const onYear = useCallback(() => {
+        onClick?.('year');
+    }, [onClick]);
+    const onPreviousYear = useCallback(() => {
+        valueIsDefined(yearControl.value) &&
+            yearControl.setValue(yearControl.value - 1);
+    }, [yearControl.value]);
+    const onPrevious = useCallback(() => {
+        type === 'month' ? onPreviousMonth() : onPreviousYear();
+    }, [type, onPreviousMonth, onPreviousYear]);
+    const onNextMonth = useCallback(() => {
+        if (valueIsDefined(monthControl.value) &&
+            valueIsDefined(yearControl.value)) {
+            if (monthControl.value < Month.December) {
+                monthControl.setValue(monthControl.value + 1);
+            }
+            else {
+                monthControl.setValue(Month.January);
+                yearControl.setValue(yearControl.value + 1);
+            }
+        }
+    }, [monthControl.value, yearControl.value]);
+    const onNextYear = useCallback(() => {
+        valueIsDefined(yearControl.value) &&
+            yearControl.setValue(yearControl.value + 1);
+    }, [yearControl.value]);
+    const onNext = useCallback(() => {
+        type === 'month' ? onNextMonth() : onNextYear();
+    }, [type, onNextMonth, onNextYear]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title__label", children: [jsxRuntimeExports.jsxs("span", { onClick: onMonth, children: [label, ","] }), jsxRuntimeExports.jsx("span", { onClick: onYear, children: yearControl.value })] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
+}
+
+function RlsPickerYearElement({ onSelect, year, disabled }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-picker-year__element', {
+            disabled: year.disabled || disabled,
+            focused: year.focused,
+            selected: year.selected
+        });
+    }, [year.disabled, year.focused, year.selected, disabled]);
+    const onClick = useCallback(() => {
+        year.value && !year.disabled && !disabled && onSelect(year.value);
+    }, [year.value, year.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__span", children: year.value || '????' }) }));
+}
+function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
+    const dateYear = useMemo(() => date ?? new Date(), [date]);
+    const [year, setYear] = useState(formControl?.value ?? dateYear.getFullYear());
+    const createPickerOptions = useCallback(() => {
+        return {
+            date: dateYear,
+            year,
+            minDate,
+            maxDate
+        };
+    }, [dateYear, year, minDate, maxDate]);
+    const [template, setTemplate] = useState(createYearPicker(createPickerOptions()));
+    useEffect(() => {
+        const options = createPickerOptions();
+        const validYear = verifyYearPicker(options);
+        validYear ? setYear(validYear) : setTemplate(createYearPicker(options));
+    }, [dateYear, year, minDate, maxDate]);
+    useEffect(() => {
+        const yearValue = formControl?.value;
+        valueIsDefined(yearValue) && yearValue !== year && setYear(yearValue);
+    }, [formControl?.value]);
+    const onSelect = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setYear(value);
+        onValue?.(value);
+    }, [formControl, onValue]);
+    const onClickPrev = useCallback(() => {
+        setYear((year) => year - 8);
+    }, []);
+    const onClickNext = useCallback(() => {
+        setYear((year) => year + 8);
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) })] }));
+}
+
+function calculateInitialValue(value, minValue, maxValue) {
+    return minValue > value ? minValue : maxValue < value ? maxValue : value;
+}
+function calculateInitialRate(value, minValue, maxValue) {
+    const rateMax = maxValue - minValue;
+    const rateValue = value - minValue;
+    return Math.ceil((rateValue / rateMax) * 100);
+}
+function RlsSlider({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, value }) {
+    const minValueSlider = useMemo(() => {
+        return minValue ?? 0;
+    }, [minValue]);
+    const maxValueSlider = useMemo(() => {
+        return maxValue ?? 100;
+    }, [maxValue]);
+    const [valueSlider, setValue] = useState(calculateInitialValue(formControl?.value ?? value ?? 0, minValueSlider, maxValueSlider));
+    const [rate, setRate] = useState(calculateInitialRate(valueSlider, minValueSlider, maxValueSlider));
+    const refComponent = useRef(null);
+    const refTrack = useRef(null);
+    const refTrackOn = useRef(null);
+    const refThumb = useRef(null);
+    const classNameSlider = useMemo(() => {
+        return renderClassStatus('rls-slider', {
+            complet: valueSlider === maxValueSlider,
+            disabled: disabled,
+            empty: valueSlider === minValueSlider
+        }, className);
+    }, [valueSlider, minValueSlider, maxValueSlider, disabled]);
+    useEffect(() => {
+        const valueInitial = formControl?.value ?? value ?? 0;
+        refThumb.current.style.left = `${rate}%`;
+        refTrackOn.current.style.width = `${rate}%`;
+        if (valueInitial !== valueSlider) {
+            formControl?.setValue(valueSlider);
+            onValue?.(valueSlider);
+        }
+    }, []);
+    const calculateValueWithRate = useCallback((rate) => {
+        const value = Math.ceil(((maxValueSlider - minValueSlider) * rate) / 100);
+        refThumb.current.style.left = `${rate}%`;
+        refTrackOn.current.style.width = `${rate}%`;
+        const sliderValue = value + minValueSlider;
+        setRate(rate);
+        setValue(sliderValue);
+        formControl?.setValue(sliderValue);
+        onValue?.(sliderValue);
+    }, [minValueSlider, maxValueSlider, formControl, onValue]);
+    const onClickTrack = useCallback((event) => {
+        const { left, width } = refTrack.current.getBoundingClientRect();
+        const rate = Math.ceil(((event.clientX - left) / width) * 100);
+        calculateValueWithRate(rate);
+    }, [minValueSlider, maxValueSlider]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: children }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
+}
+
+function RlsTab({ onSelect, tab, value }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-tabs__children', {
+            active: tab.value === value,
+            disabled: tab.disabled
+        });
+    }, [tab, value]);
+    const onClick = useCallback(() => {
+        !tab.disabled && onSelect(tab.value);
+    }, [tab.disabled]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+}
+function RlsTabs({ tabs, onValue, rlsTheme }) {
+    const [value, setValue] = useState();
+    const onSelect = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    useEffect(() => {
+        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
+        initial && onSelect(initial.value);
+    }, []);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
+        }) }));
+}
+
+function RlsToolbar({ actions, children, subtitle }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
+}
+
+function RlsBottomSheet({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+    const classNameSheet = useMemo(() => {
+        return renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
+    const onClickBackdrop = useCallback(() => {
+        autoclose && controller?.close();
+        onBackdrop?.();
+    }, [autoclose, controller, onBackdrop]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
+}
+
+function RlsCard({ children, className, outline, rlsTheme }) {
+    const classNameCard = useMemo(() => {
+        return renderClassStatus('rls-card', { outline }, className);
+    }, [outline, className]);
+    return (jsxRuntimeExports.jsx("div", { className: classNameCard, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
+}
+
+class ConfirmationResult extends SealedPartial {
+    static approved() {
+        return new ConfirmationResult('approved');
+    }
+    static reject() {
+        return new ConfirmationResult('reject');
+    }
+}
+function RlsConfirmation({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
+    const classConfirmation = useMemo(() => {
+        return renderClassStatus('rls-confirmation', { visible }, className);
+    }, [visible, className]);
+    return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__content", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+}
+function useConfirmation() {
+    const [config, setConfig] = useState({});
+    const [visible, setVisible] = useState(false);
+    const component = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
+    const confirmation = useCallback((options) => {
+        return new Promise((resolve) => {
+            setConfig({
+                ...options,
+                approved: {
+                    label: options.approved?.label ?? reactI18n('confirmationActionApproved'),
+                    onClick: () => {
+                        setVisible(false);
+                        resolve(ConfirmationResult.approved());
+                    },
+                    type: options.approved?.type ?? 'raised',
+                    disabled: options.approved?.disabled,
+                    identifier: options.approved?.identifier,
+                    rlsTheme: options.approved?.rlsTheme
+                },
+                reject: options.reject
+                    ? {
+                        label: options.reject.label,
+                        onClick: () => {
+                            setVisible(false);
+                            resolve(ConfirmationResult.reject());
+                        },
+                        type: options.reject.type ?? 'outline',
+                        disabled: options.reject.disabled,
+                        identifier: options.reject.identifier,
+                        rlsTheme: options.reject.rlsTheme
+                    }
+                    : undefined
+            });
+            setVisible(true);
+        });
+    }, []);
+    return {
+        RlsConfirmation: component,
+        confirmation
+    };
+}
+
+function createObserver(options) {
+    const { setScrolleable, table } = options;
+    const observer = new ResizeObserver(() => {
+        const scrollHeight = table.scrollHeight || 0;
+        const clientHeight = table.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    });
+    observer.observe(table);
+    return observer;
+}
+function useDatatable(table) {
+    const [scrolleable, setScrolleable] = useState(false);
+    const refTable = useRef(table ? table : null);
+    useEffect(() => {
+        const observer = refTable.current &&
+            createObserver({ setScrolleable, table: refTable.current });
+        return () => {
+            observer?.disconnect();
+        };
+    }, []);
+    return { refTable, scrolleable };
+}
+
+function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
+    const datatable = useDatatable(table);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-datatable', {
+            resizable,
+            scrolleable: resizable && datatable?.scrolleable
+        });
+    }, [resizable, datatable.scrolleable]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsx("div", { className: "rls-datatable__table", children: jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.refTable, className: "rls-datatable__body", children: children })] }) }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
+}
+function RlsDatatableHeader({ children, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
+}
+function RlsDatatableTitle({ children, className, contained, control, identifier, rlsTheme }) {
+    const classNameTitle = useMemo(() => {
+        return renderClassStatus('rls-datatable__title', { contained, control }, className);
+    }, [className, contained, control]);
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
+}
+function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
+    const classNameSubheader = useMemo(() => {
+        return renderClassStatus('rls-datatable__subheader', {}, className);
+    }, [className]);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
+}
+function RlsDatatableRecord({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
+    const classNameRecord = useMemo(() => {
+        return renderClassStatus('rls-datatable__record', { error, info, contained, success, warning }, className);
+    }, [className, contained, error, info, success, warning]);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
+}
+function RlsDatatableTotals({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
+    const classNameTotals = useMemo(() => {
+        return renderClassStatus('rls-datatable__totals', { error, info, contained, success, warning }, className);
+    }, [className, contained, error, info, success, warning]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
+}
+function RlsDatatableCell({ children, className, contained, control, identifier, rlsTheme }) {
+    const classNameCell = useMemo(() => {
+        return renderClassStatus('rls-datatable__cell', { control, contained }, className);
+    }, [className, contained, control]);
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
+}
+function RlsDatatableData({ children, className, contained, control, identifier }) {
+    const classNameData = useMemo(() => {
+        return renderClassStatus('rls-datatable__data', { control, contained }, className);
+    }, [className, contained, control]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
+}
+function RlsDatatableFloating({ children, className, identifier, invested, rlsTheme }) {
+    const classNameFloating = useMemo(() => {
+        return renderClassStatus('rls-datatable__floating', { invested }, className);
+    }, [className, invested]);
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsDropdown({ children, controller, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-dropdown', {
+            visible: controller.visible
+        });
+    }, [controller.visible]);
+    useEffect(() => {
+        function onCloseDropdown({ target }) {
+            !controller.component.current.contains(target) &&
+                controller.close();
+        }
+        document.addEventListener('click', onCloseDropdown);
+        return () => {
+            document.removeEventListener('click', onCloseDropdown);
+        };
+    }, []);
+    return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
+}
+
+const MAX_LIST_HEIGHT_REM$1 = 90;
+const FALLBACK_REM_SIZE$1 = 16;
+function getRemSize$1() {
+    if (typeof window === 'undefined') {
+        return FALLBACK_REM_SIZE$1;
+    }
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE$1;
+}
+function shouldDisplayHigher$1(content, list) {
+    if (!content) {
+        return false;
+    }
+    const { top, bottom } = content.getBoundingClientRect();
+    const spaceAbove = top;
+    const spaceBelow = window.innerHeight - bottom;
+    const maxHeight = MAX_LIST_HEIGHT_REM$1 * getRemSize$1();
+    const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
+    if (spaceBelow >= desiredHeight) {
+        return false;
+    }
+    if (spaceAbove >= desiredHeight) {
+        return true;
+    }
+    return spaceAbove > spaceBelow;
+}
+function useListController(props) {
+    const { suggestions, automatic, formControl, reference } = props;
+    const refContent = useRef(null);
+    const refList = useRef(null);
+    const refInput = useRef(null);
+    const listIsOpen = useRef(false);
+    const [collection, setCollection] = useState(new ListCollection(suggestions));
+    const [state, refreshState] = useState({
+        focused: false,
+        higher: false,
+        listIsVisible: false,
+        value: ''
+    });
+    const changeValueInternal = useRef(false);
+    const position = useRef(0);
+    const valueProtected = useRef(undefined);
+    useEffect(() => {
+        function onCloseSuggestions({ target }) {
+            !refContent?.current?.contains(target) &&
+                refreshState((state) => ({ ...state, listIsVisible: false }));
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    useEffect(() => {
+        if (!listIsOpen.current && state.listIsVisible) {
+            listIsOpen.current = true;
+        }
+        if (listIsOpen.current && !state.listIsVisible) {
+            formControl?.touch();
+        }
+    }, [state.listIsVisible]);
+    useEffect(() => {
+        setCollection(new ListCollection(suggestions, reference));
+    }, [suggestions]);
+    useEffect(() => {
+        if (!changeValueInternal.current) {
+            if (formControl?.value) {
+                const element = collection.find(formControl.value);
+                if (!element) {
+                    valueProtected.current = formControl.value;
+                    automatic
+                        ? setFormValue(collection.value[0], true)
+                        : setFormValue(undefined);
+                }
+                else {
+                    refreshState((state) => ({ ...state, value: element.description }));
+                }
+            }
+            else if (valueProtected.current) {
+                const element = collection.find(valueProtected.current);
+                element ? setFormValue(element) : refreshState({ ...state, value: '' });
+            }
+            else {
+                automatic
+                    ? setFormValue(collection.value[0], true)
+                    : refreshState({ ...state, value: '' });
+            }
+        }
+        changeValueInternal.current = false;
+    }, [collection, formControl?.value]);
+    const setState = useCallback((state) => {
+        const _state = state.listIsVisible
+            ? {
+                ...state,
+                higher: shouldDisplayHigher$1(refContent.current, refList.current)
+            }
+            : state;
+        refreshState((state) => ({ ...state, ..._state }));
+    }, []);
+    const setFormValue = useCallback((element, valueIsDefault = false) => {
+        refreshState((state) => ({
+            ...state,
+            value: element?.description || ''
+        }));
+        changeValueInternal.current = true;
+        valueIsDefault
+            ? formControl?.setDefaultValue(element?.value)
+            : formControl?.setValue(element?.value);
+    }, [formControl]);
+    const navigationInput = useCallback((event) => {
+        if (state.listIsVisible) {
+            const _position = navigationListFromInput({
+                content: refContent.current,
+                event: event,
+                list: refList.current
+            });
+            position.current = _position ?? 0;
+        }
+    }, [state.listIsVisible]);
+    const navigationElement = useCallback((event) => {
+        position.current = navigationListFromElement({
+            content: refContent.current,
+            event: event,
+            input: refInput.current,
+            list: refList.current,
+            position: position.current
+        });
+    }, [state.listIsVisible]);
+    return {
+        ...state,
+        navigationElement,
+        navigationInput,
+        refContent,
+        refInput,
+        refList,
+        setFormValue,
+        setState
+    };
+}
+
+const DURATION_ANIMATION$2 = 240;
+const MAX_ELEMENTS = 6;
+function useFieldAutocomplete(props) {
+    const controller = useListController(props);
+    const [coincidences, setCoincidences] = useState([]);
+    const [pattern, setPattern] = useState('');
+    const _store = useRef({
+        coincidences: [],
+        pattern: '',
+        previous: null
+    });
+    const focusTimeoutId = useRef(undefined);
+    const rebootIsRequired = useRef(true);
+    const prevSuggestions = useRef(props.suggestions);
+    const refreshCoincidences = useCallback((suggestions, pattern, reboot = false) => {
+        const { collection, store } = createAutocompleteStore({
+            pattern,
+            suggestions,
+            reboot,
+            store: _store.current
+        });
+        _store.current = store;
+        const coincidences = collection.slice(0, MAX_ELEMENTS);
+        setCoincidences(coincidences);
+    }, []);
+    useEffect(() => {
+        const reboot = rebootIsRequired.current || prevSuggestions.current !== props.suggestions;
+        rebootIsRequired.current = false;
+        prevSuggestions.current = props.suggestions;
+        refreshCoincidences(props.suggestions, pattern, reboot);
+    }, [props.suggestions, pattern]);
+    useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled, controller.setState]);
+    const onFocusInput = useCallback(() => {
+        controller.setState({ focused: true });
+    }, [controller.setState]);
+    const onBlurInput = useCallback(() => {
+        controller.setState({ focused: false });
+    }, [controller.setState]);
+    const onKeydownInput = useCallback((event) => {
+        switch (event.code) {
+            case 'Escape':
+            case 'Tab':
+                controller.setState({ listIsVisible: false });
+                break;
+            default:
+                controller.navigationInput(event);
+                break;
+        }
+    }, [controller.setState, controller.navigationInput]);
+    const onClickControl = useCallback(() => {
+        if (!props.readOnly) {
+            controller.setState({ listIsVisible: true });
+            clearTimeout(focusTimeoutId.current);
+            focusTimeoutId.current = setTimeout(() => {
+                controller.refInput?.current?.focus();
+            }, DURATION_ANIMATION$2);
+        }
+    }, [controller.setState, props.readOnly]);
+    useEffect(() => {
+        return () => {
+            clearTimeout(focusTimeoutId.current);
+        };
+    }, []);
+    const onClickAction = useCallback(() => {
+        if (controller.value) {
+            controller.setState({ listIsVisible: false });
+            controller.setFormValue(undefined);
+            props.onValue?.(props.value);
+        }
+        else {
+            onClickControl();
+        }
+    }, [
+        controller.value,
+        controller.setState,
+        controller.setFormValue,
+        props.onValue,
+        props.value,
+        onClickControl
+    ]);
+    const onClickBackdrop = useCallback(() => {
+        controller.setState({ listIsVisible: false });
+    }, [controller.setState]);
+    const onChange = useCallback((element) => {
+        if (props.onSelect) {
+            element.value && props.onSelect(element.value);
+        }
+        else {
+            controller.setFormValue(element);
+        }
+        if (props.keepOpen) {
+            setPattern('');
+            controller.refInput?.current?.focus();
+        }
+        else {
+            controller.setState({ listIsVisible: false });
+        }
+        props.onValue?.(element.value);
+    }, [
+        controller.setState,
+        controller.setFormValue,
+        setPattern,
+        props.keepOpen,
+        props.onSelect,
+        props.onValue
+    ]);
+    const onClickElement = useCallback((element) => {
+        return () => {
+            onChange(element);
+        };
+    }, [onChange]);
+    const onKeydownElement = useCallback((element) => {
+        return (event) => {
+            event.code === 'Enter'
+                ? onChange(element)
+                : controller.navigationElement(event);
+        };
+    }, [onChange, controller.navigationElement]);
+    return {
+        ...controller,
+        coincidences,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput,
+        pattern,
+        setPattern
+    };
+}
+
+function RlsFieldAutocompleteTemplate(props) {
+    const autocomplete = useFieldAutocomplete(props);
+    const { render, action, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setListInputPlaceholder(reactI18n('listInputPlaceholder'));
+        });
+    }, []);
+    useEffect(() => {
+        props.onInput?.(autocomplete.pattern);
+    }, [autocomplete.pattern, props.onInput]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            focused: autocomplete.focused && !disabled,
+            error: formControl?.wrong,
+            disabled,
+            readonly: props.readOnly,
+            selected: !!autocomplete.value
+        }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
+    }, [
+        formControl?.wrong,
+        autocomplete.value,
+        autocomplete.focused,
+        props.className,
+        props.readOnly,
+        disabled
+    ]);
+    const onClickPattern = useCallback(() => {
+        onSearch?.(autocomplete.pattern);
+    }, [onSearch, autocomplete.pattern]);
+    const onKeyDownPattern = useCallback((event) => {
+        event.key === 'Enter' && onSearch?.(autocomplete.pattern);
+        autocomplete.onKeydownInput(event);
+    }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
+    const searchControl = useMemo(() => ({
+        pattern: autocomplete.pattern,
+        placeholder: listInputPlaceholder,
+        searching,
+        refInput: autocomplete.refInput,
+        onChange: autocomplete.setPattern,
+        onFocus: autocomplete.onFocusInput,
+        onBlur: autocomplete.onBlurInput,
+        onKeyDown: onKeyDownPattern,
+        onSearch: onSearch ? onClickPattern : undefined
+    }), [
+        autocomplete.pattern,
+        autocomplete.refInput,
+        autocomplete.setPattern,
+        autocomplete.onFocusInput,
+        autocomplete.onBlurInput,
+        listInputPlaceholder,
+        searching,
+        onKeyDownPattern,
+        onClickPattern,
+        onSearch
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
+}
+function RlsFieldAutocomplete(props) {
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
+}
+
+function RlsModal({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+    const classNameModal = useMemo(() => {
+        return renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
+    const onClickBackdrop = useCallback(() => {
+        autoclose && controller?.close();
+        onBackdrop?.();
+    }, [autoclose, controller, onBackdrop]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
+}
+
+function formatTime(value) {
+    return String(value).padStart(2, '0');
+}
+const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const RADIUS = 48;
+const DIAL_RADIUS = 60;
+const TICK_RADIUS = 7;
+function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+    const styleTick = useMemo(() => {
+        const radian = (value / 6) * Math.PI;
+        const x = Math.sin(radian) * RADIUS;
+        const y = Math.cos(radian) * RADIUS;
+        return {
+            left: `${DIAL_RADIUS + x - TICK_RADIUS - 1}rem`,
+            top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
+        };
+    }, []);
+    const label = useMemo(() => {
+        if (selectionIsHours) {
+            return formatTime(value);
+        }
+        if (value === 12) {
+            return formatTime(0);
+        }
+        return formatTime(value * 5);
+    }, [selectionIsHours]);
+    const onClick = useCallback((event) => {
+        event.preventDefault();
+        onValue(value);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+}
+function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
+    const timeInitial = useMemo(() => {
+        return formControl?.value ?? time ?? Time.now();
+    }, [formControl?.value, time]);
+    const plateElement = useRef(null);
+    const lineElement = useRef(null);
+    const centerElement = useRef(null);
+    const indicatorElement = useRef(null);
+    const pointElement = useRef(null);
+    const [labels, setLabels] = useState({
+        timeActionCancel: reactI18n('dateActionCancel'),
+        timeActionSelect: reactI18n('dateActionSelect')
+    });
+    const [zoneIsPM, setZoneIsPM] = useState(timeInitial.hour >= 12);
+    const [hour, setHour] = useState(zoneIsPM ? timeInitial.hour - 12 : timeInitial.hour);
+    const [minute, setMinute] = useState(timeInitial.minute);
+    const [selectionIsHours, setSelectionIsHours] = useState(true);
+    const changeIsInternal = useRef(true);
+    const selectionIsActive = useRef(false);
+    const radianUnit = useMemo(() => {
+        return Math.PI / (selectionIsHours ? 6 : 30);
+    }, [selectionIsHours]);
+    const hourFormat = useMemo(() => {
+        return formatTime(hour === 0 ? 12 : hour);
+    }, [hour]);
+    const minuteFormat = useMemo(() => {
+        return formatTime(minute);
+    }, [minute]);
+    const classNameHour = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameMinute = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: !selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameAM = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: !zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const classNamePM = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const refreshClockHour = useEffectEvent(() => {
+        refreshClock(hour > 12 ? hour - 12 : hour);
+    });
+    const refreshClockMinute = useEffectEvent(() => {
+        refreshClock(minute);
+    });
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                timeActionCancel: reactI18n('dateActionCancel'),
+                timeActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    useEffect(() => {
+        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+    }, [selectionIsHours]);
+    useEffect(() => {
+        if (!changeIsInternal.current && formControl?.value) {
+            const zoneIsPM = formControl.value.hour >= 12;
+            setZoneIsPM(zoneIsPM);
+            setHour(zoneIsPM ? formControl.value.hour - 12 : formControl.value.hour);
+            setMinute(formControl.value.minute);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
+    const refreshComponent = useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const value = Math.round(angle / radianUnit);
+        refreshClock(value);
+        selectionIsHours ? setHour(value === 0 ? 12 : value) : setMinute(value);
+    }, [selectionIsHours, radianUnit]);
+    const refreshClock = useCallback((value) => {
+        const angle = value * radianUnit;
+        const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
+        const y2 = -Math.cos(angle) * (RADIUS - TICK_RADIUS);
+        const cx = Math.sin(angle) * RADIUS;
+        const cy = -Math.cos(angle) * RADIUS;
+        lineElement.current.setAttribute('x2', `${x2 - 1}rem`);
+        lineElement.current.setAttribute('y2', `${y2 - 1}rem`);
+        indicatorElement.current.setAttribute('cx', `${cx - 1}rem`);
+        indicatorElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.setAttribute('cx', `${cx - 1}rem`);
+        pointElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.style.visibility =
+            selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
+    }, [selectionIsHours, radianUnit]);
+    const onClickHour = useCallback(() => {
+        setSelectionIsHours(true);
+    }, []);
+    const onClickMinute = useCallback(() => {
+        setSelectionIsHours(false);
+    }, []);
+    const onClickAM = useCallback(() => {
+        setZoneIsPM(false);
+    }, []);
+    const onClickPM = useCallback(() => {
+        setZoneIsPM(true);
+    }, []);
+    const onActiveSelection = useCallback(() => {
+        selectionIsActive.current = true;
+    }, []);
+    const onMouseSelection = useCallback((event) => {
+        if (selectionIsActive.current) {
+            event.preventDefault();
+            refreshComponent(event.clientX, event.clientY);
+        }
+    }, [refreshComponent]);
+    const onTouchSelection = useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (selectionIsActive.current && touch) {
+            refreshComponent(touch.clientX, touch.clientY);
+        }
+    }, [refreshComponent]);
+    const onInactiveSelection = useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
+    const onClickValue = useCallback((value) => {
+        if (selectionIsHours) {
+            setHour(value);
+            refreshClock(value);
+        }
+        else {
+            const minute = value === 12 ? 0 : value * 5;
+            setMinute(minute);
+            refreshClock(minute);
+        }
+    }, [selectionIsHours]);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onCurrentTime = useCallback(() => {
+        const currentTime = Time.now();
+        changeIsInternal.current = true;
+        formControl?.setValue(currentTime);
+        setHour(currentTime.hour);
+        setMinute(currentTime.minute);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: currentTime
+        });
+    }, [formControl, onListener]);
+    const onSelect = useCallback(() => {
+        const hourValue = zoneIsPM
+            ? hour !== 12
+                ? hour + 12
+                : 12
+            : hour === 12
+                ? 0
+                : hour;
+        const timeValue = new Time(hourValue, minute);
+        changeIsInternal.current = true;
+        formControl?.setValue(timeValue);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: timeValue
+        });
+    }, [formControl, hour, minute, zoneIsPM, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+                                        transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
+                                    }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
+                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                            }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
+}
+
+function RlsFieldClock({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const timeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: timeValue ? 'trash-2' : 'timer',
+            valueInput: timeValue?.normalizeMeridiemFormat || ''
+        };
+    }, [timeValue]);
+    const onClickInput = useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (timeValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [timeValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        event !== PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
+}
+
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
+function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const today = useRef(new Date()); // Initial current date in component
+    const _date = useMemo(() => {
+        return formControl?.value ?? date ?? today.current;
+    }, [formControl?.value, date]);
+    const yearControl = useReactControl(_date.getFullYear());
+    const dayControl = useReactControl(_date.getDate());
+    const monthControl = useReactControl(_date.getMonth());
+    const [visibility, setVisibility] = useState('DAY');
+    const [labels, setLabels] = useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect'),
+        dateActionToday: reactI18n('dateActionToday')
+    });
+    const value = useMemo(() => {
+        return new Date(yearControl.value, monthControl.value, dayControl.value);
+    }, [yearControl.value, monthControl.value, dayControl.value]);
+    const classNameComponent = useMemo(() => {
+        return renderClassStatus('rls-picker-date__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const title = useMemo(() => {
+        return dateFormatTemplate(value, DATE_FORMAT_TITLE);
+    }, [value]);
+    const itIsDisabledToday = useMemo(() => dateOutRange({
+        date: today.current,
+        maxDate,
+        minDate
+    }), [maxDate, minDate]);
+    useEffect(() => {
+        const date = verifyDateRange({ date: _date, minDate, maxDate });
+        yearControl.setValue(date.getFullYear());
+        monthControl.setValue(date.getMonth());
+        dayControl.setValue(date.getDate());
+        formControl?.setValue(date);
+        return i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect'),
+                dateActionToday: reactI18n('dateActionToday')
+            });
+        });
+    }, []);
+    const onVisibilityDay = useCallback(() => {
+        setVisibility('DAY');
+    }, []);
+    const onVisibilityTitle = useCallback((type) => {
+        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
+    }, []);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onToday = useCallback(() => {
+        yearControl.setValue(today.current.getFullYear());
+        dayControl.setValue(today.current.getDate());
+        monthControl.setValue(today.current.getMonth());
+        formControl?.setValue(today.current);
+        onListener?.({
+            event: PickerListenerEvent.Now,
+            value: today.current
+        });
+    }, [formControl, onListener]);
+    const onSelect = useCallback(() => {
+        formControl?.setValue(value);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: value
+        });
+    }, [formControl, value, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: value, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+}
+
+function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const today = useRef(new Date()); // Initial current date in component
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const dateValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: dateValue ? 'trash-2' : 'calendar',
+            label: dateValue
+                ? dateFormatTemplate(dateValue, format ?? DATE_FORMAT)
+                : ''
+        };
+    }, [dateValue, format]);
+    useEffect(() => {
+        const dateSecure = verifyDateRange({
+            date: formControl?.value ?? date ?? today.current,
+            minDate,
+            maxDate
+        });
+        setValue(dateSecure);
+        formControl?.setValue(dateSecure);
+    }, []);
+    const onClickInput = useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (dateValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [dateValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        event !== PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+}
+
+function rangeFormatTemplate({ maxDate, minDate }) {
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
+function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = useMemo(() => normalizeMinTime(datePicker ?? new Date()), [datePicker]);
+    const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
+    const yearControl = useReactControl(_date.getFullYear());
+    const monthControl = useReactControl(_date.getMonth());
+    const rangeControl = useReactControl(_range);
+    const [visibility, setVisibility] = useState('DAY');
+    const [labels, setLabels] = useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect')
+    });
+    const value = useMemo(() => {
+        return rangeControl.value ?? _range;
+    }, [rangeControl.value, _range]);
+    const date = useMemo(() => {
+        let value = _date;
+        if (valueIsDefined(yearControl.value)) {
+            value = assignYearInDate(value, yearControl.value);
+        }
+        if (valueIsDefined(monthControl.value)) {
+            value = assignMonthInDate(value, monthControl.value);
+        }
+        return value;
+    }, [_date, yearControl.value, monthControl.value]);
+    const classNameComponent = useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const classNameFooter = useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__footer', { automatic });
+    }, [automatic]);
+    const title = useMemo(() => rangeFormatTemplate(value), [value]);
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    useEffect(() => {
+        setVisibility('DAY');
+    }, [rangeControl.value]);
+    const onVisibilityDay = useCallback(() => {
+        setVisibility('DAY');
+    }, []);
+    const onVisibilityTitle = useCallback((type) => {
+        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
+    }, []);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onSelect = useCallback(() => {
+        formControl?.setValue(value);
+        onListener?.({ event: PickerListenerEvent.Select, value });
+    }, [formControl, value, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
+}
+
+function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const currentDate = useMemo(() => date ?? new Date(), [date]);
+    const [value, setValue] = useState(formControl?.value || valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const dateRangeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
+        };
+    }, [dateRangeValue]);
+    const onClickInput = useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (dateRangeValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        event !== PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+}
+
+function useFieldSelect(props) {
+    const controller = useListController(props);
+    useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
+    const onFocusInput = useCallback(() => {
+        controller.setState({ focused: true });
+    }, [controller.setState]);
+    const onBlurInput = useCallback(() => {
+        controller.setState({ focused: false });
+    }, [controller.setState]);
+    const onClickInput = useCallback(() => {
+        !props.readOnly && controller.setState({ listIsVisible: true });
+    }, [controller.setState, props.readOnly]);
+    const onKeydownInput = useCallback((event) => {
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                controller.setState({ listIsVisible: true });
+                break;
+            case 'Escape':
+            case 'Tab':
+                controller.setState({ listIsVisible: false });
+                break;
+            default:
+                controller.navigationInput(event);
+                break;
+        }
+    }, [controller.setState, controller.navigationInput]);
+    const onClickAction = useCallback(() => {
+        const removable = !props.unremovable && !!controller.value;
+        if (removable) {
+            controller.setState({ listIsVisible: false });
+            controller.setFormValue(undefined);
+            props.onValue?.(props.value);
+        }
+        else {
+            const listIsVisible = !controller.listIsVisible;
+            controller.setState({ listIsVisible });
+            listIsVisible && controller.refInput?.current?.focus();
+        }
+    }, [
+        controller.listIsVisible,
+        controller.value,
+        controller.setState,
+        controller.setFormValue,
+        props.unremovable,
+        props.onValue
+    ]);
+    const onClickBackdrop = useCallback(() => {
+        controller.setState({ listIsVisible: false });
+    }, [controller.setState]);
+    const onChange = useCallback((element) => {
+        !props.disabled && controller.refInput?.current?.focus();
+        if (props.onSelect) {
+            controller.setState({ listIsVisible: false });
+            element.value && props.onSelect(element.value);
+        }
+        else {
+            controller.setFormValue(element);
+            controller.setState({ listIsVisible: false });
+        }
+        props.onValue?.(element.value);
+    }, [
+        controller.setState,
+        controller.setFormValue,
+        props.onSelect,
+        props.onValue,
+        props.disabled
+    ]);
+    const onClickElement = useCallback((element) => {
+        return () => {
+            onChange(element);
+        };
+    }, [onChange]);
+    const onKeydownElement = useCallback((element) => {
+        return (event) => {
+            event.code === 'Enter'
+                ? onChange(element)
+                : controller.navigationElement(event);
+        };
+    }, [onChange, controller.navigationElement]);
+    return {
+        ...controller,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    };
+}
+
+function RlsFieldSelectTemplate(props) {
+    const select = useFieldSelect(props);
+    const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            focused: select.focused && !disabled,
+            error: formControl?.wrong,
+            disabled: disabled,
+            readonly: props.readOnly
+        }, `rls-field-list rls-field-select ${props.className ?? ''}`);
+    }, [
+        formControl?.wrong,
+        select.focused,
+        props.className,
+        props.readOnly,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
+}
+function RlsFieldSelect(props) {
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
+}
+
+function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
+    const initialColor = useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
+    const initialHsv = useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
+    const canvasRef = useRef(null);
+    const hueRef = useRef(null);
+    const alphaRef = useRef(null);
+    const selectionIsActive = useRef(false);
+    const activeSlider = useRef(null);
+    const hexEditing = useRef(false);
+    const [hsv, setHsv] = useState(initialHsv);
+    const [alpha, setAlpha] = useState(1);
+    const [hexInput, setHexInput] = useState(initialColor);
+    const [labels, setLabels] = useState({
+        colorActionCancel: reactI18n('dateActionCancel'),
+        colorActionSelect: reactI18n('dateActionSelect')
+    });
+    const hexColor = useMemo(() => hsvToHex(hsv), [hsv]);
+    const hexValue = useMemo(() => {
+        return hexInput.replace('#', '');
+    }, [hexInput]);
+    const canvasStyle = useMemo(() => {
+        const { r, g, b } = hsvToRgb({ h: hsv.h, s: 100, v: 100 });
+        return {
+            background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), rgb(${r}, ${g}, ${b})`
+        };
+    }, [hsv.h]);
+    const indicatorPosition = useMemo(() => {
+        return {
+            left: `${(hsv.s / 100) * 100}%`,
+            top: `${100 - (hsv.v / 100) * 100}%`
+        };
+    }, [hsv.s, hsv.v]);
+    const hueSliderStyle = useMemo(() => {
+        return {
+            background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
+        };
+    }, []);
+    const hueIndicatorStyle = useMemo(() => {
+        return { left: `${(hsv.h / 360) * 100}%`, backgroundColor: hexColor };
+    }, [hsv.h, hexColor]);
+    const alphaSliderStyle = useMemo(() => {
+        return {
+            background: `linear-gradient(to right, transparent, ${hexColor})`
+        };
+    }, [hexColor]);
+    const alphaIndicatorStyle = useMemo(() => {
+        return { left: `${alpha * 100}%`, backgroundColor: hexColor };
+    }, [alpha, hexColor]);
+    useEffect(() => {
+        !hexEditing.current && setHexInput(hexColor);
+    }, [hexColor]);
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                colorActionCancel: reactI18n('dateActionCancel'),
+                colorActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    const getPositionInElement = useCallback((element, clientX, clientY) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: (clientX - rect.left) / rect.width,
+            y: (clientY - rect.top) / rect.height
+        };
+    }, []);
+    const updateColorOnCanvas = useEffectEvent((clientX, clientY) => {
+        if (!canvasRef.current)
+            return;
+        const pos = getPositionInElement(canvasRef.current, clientX, clientY);
+        setHsv((prev) => ({
+            ...prev,
+            s: Math.round(Math.min(1, Math.max(0, pos.x)) * 100),
+            v: Math.round(Math.min(1, Math.max(0, 1 - pos.y)) * 100)
+        }));
+    });
+    const updateHueOnSlider = useEffectEvent((clientX, clientY) => {
+        if (!hueRef.current)
+            return;
+        const pos = getPositionInElement(hueRef.current, clientX, clientY);
+        setHsv((prev) => ({
+            ...prev,
+            h: Math.round(Math.min(1, Math.max(0, pos.x)) * 360)
+        }));
+    });
+    const updateAlphaOnSlider = useEffectEvent((clientX, clientY) => {
+        if (!alphaRef.current)
+            return;
+        const pos = getPositionInElement(alphaRef.current, clientX, clientY);
+        setAlpha(Math.min(1, Math.max(0, pos.x)));
+    });
+    const onMouseDown = useCallback((event) => {
+        const slider = event.currentTarget.dataset.slider;
+        if (!slider)
+            return;
+        event.preventDefault();
+        selectionIsActive.current = true;
+        activeSlider.current = slider;
+        switch (slider) {
+            case 'canvas':
+                updateColorOnCanvas(event.clientX, event.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(event.clientX, event.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(event.clientX, event.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onMouseMove = useCallback((event) => {
+        if (!selectionIsActive.current || !activeSlider.current)
+            return;
+        event.preventDefault();
+        switch (activeSlider.current) {
+            case 'canvas':
+                updateColorOnCanvas(event.clientX, event.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(event.clientX, event.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(event.clientX, event.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onTouchStart = useCallback((event) => {
+        const slider = event.currentTarget.dataset.slider;
+        if (!slider)
+            return;
+        const touch = event.touches.item(0);
+        if (!touch)
+            return;
+        selectionIsActive.current = true;
+        activeSlider.current = slider;
+        switch (slider) {
+            case 'canvas':
+                updateColorOnCanvas(touch.clientX, touch.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(touch.clientX, touch.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(touch.clientX, touch.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onTouchMove = useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (!selectionIsActive.current || !activeSlider.current || !touch)
+            return;
+        switch (activeSlider.current) {
+            case 'canvas':
+                updateColorOnCanvas(touch.clientX, touch.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(touch.clientX, touch.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(touch.clientX, touch.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onInactiveSelection = useCallback(() => {
+        selectionIsActive.current = false;
+        activeSlider.current = null;
+    }, []);
+    const onHexChange = useCallback((value) => {
+        setHexInput(value);
+        const normalized = normalizeHex(value);
+        if (normalized) {
+            const hsv = hexToHsv(normalized);
+            hsv && setHsv(hsv);
+        }
+    }, []);
+    const onHexFocus = useCallback(() => {
+        hexEditing.current = true;
+    }, []);
+    const onHexBlur = useEffectEvent(() => {
+        hexEditing.current = false;
+        const normalized = normalizeHex(hexInput);
+        if (normalized) {
+            setHexInput(normalized);
+        }
+        else {
+            setHexInput(hexColor);
+        }
+    });
+    const onHexKeyDown = useCallback((event) => {
+        event.key === 'Enter' && onHexBlur();
+    }, [onHexBlur]);
+    const onHexInputChange = useCallback((event) => onHexChange(event.target.value ? `#${event.target.value}` : ''), [onHexChange]);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onSelect = useCallback(() => {
+        formControl?.setValue(hexColor);
+        onListener?.({ event: PickerListenerEvent.Select, value: hexColor });
+    }, [formControl, hexColor, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__preview", children: jsxRuntimeExports.jsx("div", { ref: canvasRef, className: "rls-picker-color__canvas", style: canvasStyle, "data-slider": "canvas", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator", style: {
+                            left: indicatorPosition.left,
+                            top: indicatorPosition.top
+                        }, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator__circle", style: { backgroundColor: hexColor } }) }) }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__controls", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: hueRef, className: "rls-picker-color__slider__track", style: hueSliderStyle, "data-slider": "hue", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: hueIndicatorStyle }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: alphaRef, className: "rls-picker-color__slider__track rls-picker-color__slider__track--alpha", style: alphaSliderStyle, "data-slider": "alpha", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: alphaIndicatorStyle }) }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__hex", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__hex__swatch", style: { backgroundColor: hexColor } }), jsxRuntimeExports.jsx("span", { className: "rls-picker-color__hex__prefix", children: "#" }), jsxRuntimeExports.jsx("input", { className: "rls-picker-color__hex__input", type: "text", maxLength: 6, value: hexValue, onChange: onHexInputChange, onFocus: onHexFocus, onBlur: onHexBlur, onKeyDown: onHexKeyDown })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.colorActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.colorActionSelect }) })] })] }));
+}
+
+function RlsFieldColor({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const colorValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const displayHex = useMemo(() => {
+        const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
+        return normalizeHex(hex);
+    }, [colorValue]);
+    const onClickInput = useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (colorValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [colorValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        event !== PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [displayHex && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: displayHex } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: displayHex, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-color-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
+}
+
+const MAX_LIST_HEIGHT_REM = 90;
+const FALLBACK_REM_SIZE = 16;
+function getRemSize() {
+    if (typeof window === 'undefined') {
+        return FALLBACK_REM_SIZE;
+    }
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE;
+}
+function shouldDisplayHigher(content, list) {
+    if (!content) {
+        return false;
+    }
+    const { top, bottom } = content.getBoundingClientRect();
+    const spaceAbove = top;
+    const spaceBelow = window.innerHeight - bottom;
+    const maxHeight = MAX_LIST_HEIGHT_REM * getRemSize();
+    const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
+    if (spaceBelow >= desiredHeight) {
+        return false;
+    }
+    if (spaceAbove >= desiredHeight) {
+        return true;
+    }
+    return spaceAbove > spaceBelow;
+}
+function useFieldList(props) {
+    const { suggestions, disabled } = props;
+    const refContent = useRef(null);
+    const refList = useRef(null);
+    const formControl = props.formControl;
+    const [state, setState] = useState({
+        higher: false,
+        listIsVisible: false
+    });
+    const [selected, setSelected] = useState([]);
+    useEffect(() => {
+        function onCloseSuggestions({ target }) {
+            !refContent?.current?.contains(target) &&
+                setState((state) => ({ ...state, listIsVisible: false }));
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    useEffect(() => {
+        const formValue = formControl?.value;
+        if (formValue !== undefined && formValue !== null && formValue.length) {
+            const selectedElements = suggestions.filter((state) => formValue.some((value) => state.compareTo(value)));
+            setSelected(selectedElements);
+        }
+        else {
+            setSelected([]);
+        }
+    }, [formControl?.value, suggestions]);
+    const setListState = useCallback((updates) => {
+        setState((state) => {
+            const _updates = updates.listIsVisible !== undefined
+                ? {
+                    ...updates,
+                    ...(updates.listIsVisible
+                        ? {
+                            higher: shouldDisplayHigher(refContent.current, refList.current)
+                        }
+                        : {})
+                }
+                : updates;
+            return { ...state, ..._updates };
+        });
+    }, []);
+    const toggleElement = useCallback((element) => {
+        const alreadySelected = selected.some((state) => state.compareTo(element.value));
+        const newSelected = alreadySelected
+            ? selected.filter((state) => !state.compareTo(element.value))
+            : [...selected, element];
+        const newValues = newSelected.map((state) => state.value);
+        setSelected(newSelected);
+        formControl?.setValue(newValues);
+        props.onValue?.(newValues);
+    }, [selected, formControl, props.onValue]);
+    const isSelected = useCallback((element) => {
+        return selected.some((state) => state.compareTo(element.value));
+    }, [selected]);
+    const onClickInput = useCallback(() => {
+        if (!props.readOnly) {
+            setListState({ listIsVisible: true });
+        }
+    }, [setListState, props.readOnly]);
+    const onClickBackdrop = useCallback(() => {
+        setListState({ listIsVisible: false });
+    }, [setListState]);
+    const onClickAction = useCallback(() => {
+        if (!disabled && !props.readOnly) {
+            setListState({ listIsVisible: !state.listIsVisible });
+        }
+    }, [disabled, props.readOnly, setListState, state.listIsVisible]);
+    const onClickElement = useCallback((element) => {
+        return () => {
+            toggleElement(element);
+        };
+    }, [toggleElement]);
+    const onRemoveElement = useCallback((element) => {
+        return (event) => {
+            event.stopPropagation();
+            const newSelected = selected.filter((state) => !state.compareTo(element.value));
+            const newValues = newSelected.map((state) => state.value);
+            setSelected(newSelected);
+            formControl?.setValue(newValues);
+            props.onValue?.(newValues);
+        };
+    }, [selected, formControl, props.onValue]);
+    const onKeydownElement = useCallback((element) => {
+        return (event) => {
+            event.code === 'Enter' && toggleElement(element);
+        };
+    }, [toggleElement]);
+    return {
+        ...state,
+        selected,
+        refContent,
+        refList,
+        isSelected,
+        onClickAction,
+        onClickBackdrop,
+        onClickElement,
+        onClickInput,
+        onKeydownElement,
+        onRemoveElement
+    };
+}
+
+function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, placeholder, rlsTheme, ...props }) {
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            focused: fieldList.listIsVisible && !disabled,
+            error: formControl?.wrong,
+            disabled,
+            readonly: props.readOnly
+        }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
+    }, [
+        formControl?.wrong,
+        fieldList.listIsVisible,
+        props.className,
+        props.readOnly,
+        disabled
+    ]);
+    const renderWithCheckbox = useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refList: fieldList.refList, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop })] }));
+}
+function RlsFieldListTemplate(props) {
+    const fieldList = useFieldList(props);
+    return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, fieldList: fieldList });
+}
+function RlsFieldList(props) {
+    const fieldList = useFieldList(props);
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, render: render, fieldList: fieldList });
+}
+
+function RlsFormNavigation({ children, className, controller, visible, rlsTheme }) {
+    const classNameForm = useMemo(() => {
+        return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: classNameForm, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }) }), document.body);
+}
+
+function useRelocationOnComponent({ container, element, onDrag }) {
+    const position = useRef({ x: 0, y: 0 });
+    const dragOffset = useRef({ x: 0, y: 0 });
+    const dragging = useRef(false);
+    const getClientX = useCallback((positionX) => {
+        let clientX = position.current.x + positionX - dragOffset.current.x;
+        if (clientX < 0) {
+            clientX = 0;
+        }
+        else {
+            const width = clientX + element.current.offsetWidth;
+            if (width > container.current.offsetWidth) {
+                clientX = container.current.offsetWidth - element.current.offsetWidth;
+            }
+        }
+        return clientX;
+    }, []);
+    const getClientY = useCallback((positionY) => {
+        let clientY = position.current.y + positionY - dragOffset.current.y;
+        if (clientY < 0) {
+            clientY = 0;
+        }
+        else {
+            const height = clientY + element.current.offsetHeight;
+            if (height > container.current.offsetHeight) {
+                clientY = container.current.offsetHeight - element.current.offsetHeight;
+            }
+        }
+        return clientY;
+    }, []);
+    const start = useCallback((positionX, positionY) => {
+        dragOffset.current = {
+            x: positionX,
+            y: positionY
+        };
+        position.current = {
+            x: element.current.offsetLeft,
+            y: element.current.offsetTop
+        };
+        dragging.current = true;
+    }, []);
+    const relocation = useCallback((positionX, positionY) => {
+        const clientX = getClientX(positionX);
+        const clientY = getClientY(positionY);
+        element.current.style.top = `${clientY}px`;
+        element.current.style.left = `${clientX}px`;
+        onDrag?.();
+    }, []);
+    useEffect(() => {
+        const mousedown = (event) => {
+            start(event.clientX, event.clientY);
+        };
+        const mousemove = (event) => {
+            if (dragging.current) {
+                relocation(event.clientX, event.clientY);
+                event.preventDefault();
+            }
+        };
+        const mouseup = () => {
+            dragging.current = false;
+        };
+        const touchstart = (event) => {
+            if (event.touches[0]) {
+                start(event.touches[0].clientX, event.touches[0].clientY);
+            }
+        };
+        const touchmove = (event) => {
+            if (event.touches[0] && dragging.current) {
+                relocation(event.touches[0].clientX, event.touches[0].clientY);
+                event.preventDefault();
+            }
+        };
+        const touchend = () => {
+            dragging.current = false;
+        };
+        element.current.addEventListener('mousedown', mousedown);
+        element.current.addEventListener('mousemove', mousemove);
+        element.current.addEventListener('mouseup', mouseup);
+        element.current.addEventListener('touchstart', touchstart);
+        element.current.addEventListener('touchmove', touchmove);
+        element.current.addEventListener('touchend', touchend);
+        return () => {
+            element.current?.removeEventListener('mousedown', mousedown);
+            element.current?.removeEventListener('mousemove', mousemove);
+            element.current?.removeEventListener('mouseup', mouseup);
+            element.current?.removeEventListener('touchstart', touchstart);
+            element.current?.removeEventListener('touchmove', touchmove);
+            element.current?.removeEventListener('touchend', touchend);
+        };
+    }, []);
+}
+
+function useResize(props) {
+    const { refElement, onResize } = props;
+    const dimension = useRef({ height: 0, width: 0 });
+    const observer = useCallback((entries) => {
+        const { height, width } = entries[0].contentRect;
+        onResize &&
+            onResize({
+                current: dimension.current,
+                dimension: {
+                    height,
+                    width
+                }
+            });
+        dimension.current = { height, width };
+    }, []);
+    useEffect(() => {
+        dimension.current = {
+            height: refElement.current.offsetHeight,
+            width: refElement.current.offsetWidth
+        };
+        const resizeObserver = new ResizeObserver(observer);
+        resizeObserver.observe(refElement.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+}
+
+const MIN_SLIDER_VALUE = 50;
+const MAX_SLIDER_VALUE = 100;
+function getRatioFactor(ratio) {
+    switch (ratio) {
+        case '16:9':
+            return 9 / 16;
+        case '8:5':
+            return 5 / 8;
+        case '4:3':
+            return 3 / 4;
+        case '3:4':
+            return 4 / 3;
+        case '3:2':
+            return 2 / 3;
+        default:
+            return 1;
+    }
+}
+function simpleThreeRule(a1, b1, a2) {
+    return (b1 * a2) / a1;
+}
+function calculateImgDimension(image, dimension) {
+    let { height, width } = image;
+    if (height > width) {
+        height = height > dimension ? dimension : height;
+        width = simpleThreeRule(image.height, height, width);
+        return { height, width };
+    }
+    width = width > dimension ? dimension : width;
+    height = simpleThreeRule(image.width, width, height);
+    return { height, width };
+}
+function RlsImageEditor(props) {
+    const [selection, setSelection] = useState(props.selection ?? 60);
+    const [labels, setLabels] = useState({
+        actionRestore: reactI18n('editorImageActionRestore'),
+        actionSelect: reactI18n('editorImageActionSelect')
+    });
+    const refBody = useRef(null);
+    const refImage = useRef(null);
+    const refSelection = useRef(null);
+    const refOverlayTop = useRef(null);
+    const refOverlayBottom = useRef(null);
+    const refOverlayLeft = useRef(null);
+    const refOverlayRight = useRef(null);
+    const refCanvas = useRef(null);
+    const refPicture = useRef(null);
+    const image = useRef(new Image());
+    const originalImage = useRef(undefined);
+    const hasInteracted = useRef(false);
+    const ratio = useMemo(() => {
+        return props.ratio || '1:1';
+    }, [props.ratio]);
+    const getCropProperties = useCallback(() => {
+        return {
+            height: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetHeight),
+            left: simpleThreeRule(refImage.current.offsetWidth, image.current.width, refSelection.current.offsetLeft),
+            top: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetTop),
+            width: simpleThreeRule(refImage.current.offsetWidth, image.current.width, refSelection.current.offsetWidth)
+        };
+    }, []);
+    const refreshOverlaysStyle = useCallback(() => {
+        const width = refSelection.current.offsetWidth;
+        const height = refSelection.current.offsetHeight;
+        const top = refSelection.current.offsetTop;
+        const left = refSelection.current.offsetLeft;
+        refOverlayTop.current.style.width = `${width}px`;
+        refOverlayTop.current.style.bottom = `calc(100% - ${top}px)`;
+        refOverlayTop.current.style.left = `${left}px`;
+        refOverlayRight.current.style.left = `calc(${width + left}px)`;
+        refOverlayRight.current.style.width = `calc(100% - ${width + left}px)`;
+        refOverlayBottom.current.style.width = `${width}px`;
+        refOverlayBottom.current.style.top = `calc(${height + top}px)`;
+        refOverlayBottom.current.style.left = `${left}px`;
+        refOverlayLeft.current.style.right = `calc(100% - ${left}px)`;
+        refOverlayLeft.current.style.width = `calc(${left}px)`;
+    }, []);
+    const refreshSelectionFromWidth = useCallback((rateSelection) => {
+        const ratioFactor = getRatioFactor(ratio);
+        const _ratio = rateSelection * ratioFactor;
+        const offsetWidth = refImage.current?.offsetWidth || 0;
+        const offsetHeight = refImage.current?.offsetHeight || 0;
+        let width = (offsetWidth * rateSelection) / 100;
+        let height = (offsetWidth * _ratio) / 100;
+        if (height > offsetHeight) {
+            height = offsetHeight;
+            width = height / ratioFactor;
+        }
+        return { height, width };
+    }, [ratio]);
+    const refreshSelectionFromHeight = useCallback((rateSelection) => {
+        const ratioFactor = getRatioFactor(ratio);
+        const _ratio = rateSelection / ratioFactor;
+        const offsetWidth = refImage.current?.offsetWidth || 0;
+        const offsetHeight = refImage.current?.offsetHeight || 0;
+        let height = (offsetHeight * rateSelection) / 100;
+        let width = (offsetHeight * _ratio) / 100;
+        if (width > offsetWidth) {
+            width = offsetWidth;
+            height = width * ratioFactor;
+        }
+        return { height, width };
+    }, [ratio]);
+    const refreshSelectionStyle = useCallback((rateSelection) => {
+        if (refSelection.current &&
+            image.current.width > 0 &&
+            image.current.height > 0) {
+            const { height, width } = image.current.width >= image.current.height
+                ? 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) {
+                refSelection.current.style.left = `${left < 0 ? 0 : left}px`;
+            }
+            if (refSelection.current.offsetTop + height >
+                refImage.current.offsetHeight) {
+                refSelection.current.style.top = `${top < 0 ? 0 : top}px`;
+            }
+            refreshOverlaysStyle();
+        }
+    }, [ratio]);
+    const setImageStyle = useCallback((width, height) => {
+        refImage.current.style.width = width;
+        refImage.current.style.height = height;
+        refCanvas.current.style.width = width;
+        refCanvas.current.style.height = height;
+    }, []);
+    const refreshImageStyle = useCallback(() => {
+        if (image.current.width <= 0 || image.current.height <= 0) {
+            return setImageStyle('0px', '0px');
+        }
+        const height = (refBody.current.offsetWidth * image.current.height) /
+            image.current.width;
+        if (height <= refBody.current.offsetHeight) {
+            return setImageStyle('100%', `${height}px`);
+        }
+        const width = (refBody.current.offsetHeight * image.current.width) /
+            image.current.height;
+        return setImageStyle(`${width}px`, '100%');
+    }, []);
+    useEffect(() => {
+        image.current.onload = () => {
+            const context = refCanvas.current.getContext('2d', {
+                willReadFrequently: true
+            });
+            const width = image.current.width;
+            const height = image.current.height;
+            refCanvas.current.width = width;
+            refCanvas.current.height = height;
+            context?.drawImage(image.current, 0, 0, width, height);
+            originalImage.current = context?.getImageData(0, 0, width, height);
+            refreshImageStyle();
+            refreshSelectionStyle(selection);
+        };
+        const unsubscription = i18nSubscribe(() => {
+            setLabels({
+                actionRestore: reactI18n('editorImageActionRestore'),
+                actionSelect: reactI18n('editorImageActionSelect')
+            });
+        });
+        window.addEventListener('resize', refreshImageStyle);
+        return () => {
+            window.removeEventListener('resize', refreshImageStyle);
+            unsubscription();
+        };
+    }, []);
+    useEffect(() => {
+        image.current.src = props.src || '';
+    }, [props.src]);
+    useEffect(() => {
+        refreshSelectionStyle(selection);
+    }, [ratio, selection]);
+    const onResizeElement = useCallback(() => {
+        refreshSelectionStyle(selection);
+    }, [selection]);
+    useRelocationOnComponent({
+        container: refImage,
+        element: refSelection,
+        onDrag: () => {
+            hasInteracted.current = true;
+            refreshOverlaysStyle();
+        }
+    });
+    useResize({ refElement: refImage, onResize: onResizeElement });
+    const onCropImage = useCallback(() => {
+        const cropProps = getCropProperties();
+        const width = props.maxWidth || cropProps.width;
+        const height = width * getRatioFactor(ratio);
+        refPicture.current.width = width;
+        refPicture.current.height = height;
+        const context = refPicture.current.getContext('2d');
+        context?.drawImage(refCanvas.current, cropProps.left, cropProps.top, cropProps.width, cropProps.height, 0, 0, width, height);
+        refPicture.current.toBlob((blob) => {
+            if (blob) {
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = function () {
+                    const value = {
+                        base64: reader.result,
+                        blob
+                    };
+                    props.onValue?.(value);
+                    props.formControl?.setValue(value);
+                };
+            }
+        }, props.mimeType || 'image/jpeg', props.quality || 1);
+    }, [
+        ratio,
+        props.mimeType,
+        props.onValue,
+        props.formControl,
+        props.maxWidth,
+        props.quality
+    ]);
+    const onRestore = useCallback(() => {
+        const context = refCanvas.current.getContext('2d');
+        if (originalImage.current) {
+            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: 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) {
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-editor-modal", visible: props.visible, children: jsxRuntimeExports.jsx(RlsImageEditor, { ...props, children: props.children }) }));
+}
+
+const MIME_TYPE_SUPPORTS = [
+    'image/png',
+    'image/jpg',
+    'image/jpeg',
+    'image/bmp',
+    'image/webp',
+    'image/gif',
+    'image/svg+xml'
+];
+
+function useImageEditorController(options) {
+    const refInput = useRef(null);
+    const [srcEditor, setSrcEditor] = useState();
+    const [labels, setLabels] = useState({
+        actionCancel: reactI18n('chooserImageActionCancel')
+    });
+    const processImage = useCallback((file) => {
+        const reader = new FileReader();
+        reader.onload = function () {
+            setSrcEditor(reader.result);
+            refInput.current.value = '';
+        };
+        reader.readAsDataURL(file);
+    }, []);
+    useEffect(() => {
+        refInput.current = document.createElement('input');
+        refInput.current.type = 'file';
+        refInput.current.onchange = () => {
+            if (refInput.current.files &&
+                MIME_TYPE_SUPPORTS.includes(refInput.current.files[0].type)) {
+                processImage(refInput.current.files[0]);
+            }
+        };
+        return i18nSubscribe(() => {
+            setLabels({
+                actionCancel: reactI18n('chooserImageActionCancel')
+            });
+        });
+    }, []);
+    const onEditorValue = useCallback((image) => {
+        setSrcEditor(undefined);
+        options.onValue && options.onValue(image);
+    }, [options.onValue]);
+    const onCancel = useCallback(() => {
+        setSrcEditor(undefined);
+    }, []);
+    const RlsImageEditorChooser = useMemo(() => {
+        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, selection: options.selection, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
+    }, [
+        srcEditor,
+        labels,
+        options.formControl,
+        options.maxWidth,
+        options.quality,
+        options.ratio,
+        options.disabled,
+        onEditorValue,
+        onCancel
+    ]);
+    const onImageChooser = useCallback(() => {
+        !options.disabled && refInput.current.click();
+    }, [options.disabled]);
+    return { onImageChooser, RlsImageEditorChooser };
+}
+
+function RlsImageChooser(props) {
+    const [src, setSrc] = useState();
+    const onValue = useCallback((image) => {
+        setSrc(image.base64);
+        props.onValue?.(image);
+    }, [props.onValue]);
+    const controller = useImageEditorController({ ...props, onValue });
+    useEffect(() => {
+        props.src && setSrc(props.src);
+    }, [props.src]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: controller.onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), controller.RlsImageEditorChooser] }));
+}
+
+function RlsModalSheet({ autoclose, children, className, controller, onAutoClose, visible, rlsTheme }) {
+    const classNameModal = useMemo(() => {
+        return renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
+    const onClickBackdrop = useCallback(() => {
+        autoclose && controller?.close();
+        onAutoClose?.();
+    }, [autoclose, controller, onAutoClose]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
+}
+
+const DURATION_ANIMATION$1 = 240;
+const DURATION_DEFAULT = 4000;
+let _id = 0;
+function generateId() {
+    return `rls-notification-${++_id}`;
+}
+function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-notification', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
+}
+function useNotifications() {
+    const [notifications, setNotifications] = useState([]);
+    const timersRef = useRef(new Map());
+    useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            timers.forEach((timer) => clearTimeout(timer));
+            timers.clear();
+        };
+    }, []);
+    const remove = useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
+        setNotifications((notifications) => notifications.map((notification) => notification.id === id
+            ? { ...notification, visible: false }
+            : notification));
+        setTimeout(() => {
+            setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
+        }, DURATION_ANIMATION$1);
+    }, []);
+    const notify = useCallback((config) => {
+        const id = generateId();
+        const duration = config.duration ?? DURATION_DEFAULT;
+        setNotifications((notifications) => [
+            ...notifications,
+            { id, config, visible: true }
+        ]);
+        const timer = setTimeout(() => {
+            remove(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+    }, [remove]);
+    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: "rls-notifications", children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+    return {
+        RlsNotifications,
+        notify
+    };
+}
+
+const DURATION_ANIMATION = 240;
+const DURATION_CHAR = 75;
+const DURATION_MAX = 9000;
+const DURATION_MIN = 3000;
+const DURATION_RESET = 480;
+function calculateDuration({ length }) {
+    let duration = length * DURATION_CHAR;
+    if (duration < DURATION_MIN) {
+        duration = DURATION_MIN;
+    }
+    else if (duration > DURATION_MAX) {
+        duration = DURATION_MAX;
+    }
+    return duration + DURATION_RESET;
+}
+function RlsSnackbar({ content, onClose, icon, rlsTheme, title, visible }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-snackbar', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
+}
+function useSnackbar() {
+    const timeoutId = useRef(undefined);
+    const duration = useRef(4000);
+    const [state, setState] = useState({
+        config: {},
+        visible: false
+    });
+    const onClose = useCallback(() => {
+        timeoutId.current && clearTimeout(timeoutId.current);
+        timeoutId.current = undefined;
+        setState((state) => ({ ...state, visible: false }));
+    }, []);
+    const rlsSnackbar = (jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible, onClose: onClose }));
+    useEffect(() => {
+        if (state.visible) {
+            timeoutId.current = setTimeout(() => {
+                timeoutId.current = undefined;
+                setState((state) => ({ ...state, visible: false }));
+            }, duration.current);
+        }
+        else if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+            timeoutId.current = undefined;
+            setTimeout(() => {
+                snackbar(state.config);
+            }, DURATION_ANIMATION);
+        }
+    }, [state.visible]);
+    const snackbar = useCallback((config) => {
+        duration.current = calculateDuration(String(config.content));
+        setState((state) => ({
+            ...state,
+            config,
+            visible: !state.visible
+        }));
+    }, []);
+    return {
+        RlsSnackbar: rlsSnackbar,
+        snackbar
+    };
+}
+
+const RlsContext = createContext(null);
+function useRlsContext() {
+    const state = useContext(RlsContext);
+    if (!state) {
+        throw new Error('RlsApplication not wrapped in Project');
+    }
+    return state;
+}
+function RlsApplication({ children }) {
+    const { RlsConfirmation, confirmation } = useConfirmation();
+    const { RlsNotifications, notify } = useNotifications();
+    const { RlsSnackbar, snackbar } = useSnackbar();
+    const [navbarInApp, setNavbarInApp] = useState(false);
+    const [navbarIsCondense, setNavbarIsCondense] = useState(false);
+    const [appIsMobile, setIsMobile] = useState(false);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-app__body', {
+            mobile: appIsMobile,
+            'navbar-snackbar': navbarInApp,
+            'navbar-condense': navbarIsCondense
+        });
+    }, [appIsMobile, navbarInApp, navbarIsCondense]);
+    return (jsxRuntimeExports.jsxs(RlsContext, { value: {
+            confirmation,
+            notify,
+            snackbar,
+            setIsMobile,
+            setNavbarInApp,
+            setNavbarIsCondense
+        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, 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] = useState(() => {
+        setDesignSystem(primaryDesignSystem);
+        return primaryDesignSystem;
+    });
+    const setValue = useCallback((value) => {
+        setDesignSystem(value);
+        setDesignSystemValue(value);
+    }, []);
+    const toggle = 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] = useState(false);
+    const component = useRef(null);
+    const open = useCallback((positionX, positionY) => {
+        const content = component.current.querySelector('.rls-dropdown__content');
+        content.style.transformOrigin = effect;
+        component.current.style.top = `${positionY}px`;
+        component.current.style.left = `${positionX}px`;
+        setVisible(true);
+    }, [effect]);
+    const openWithEvent = useCallback((event) => {
+        const rectContent = component.current.getBoundingClientRect();
+        const rectElement = event.target.getBoundingClientRect();
+        let positionX = 0;
+        let positionY = 0;
+        let effect = '0% 0%';
+        let transform = 0;
+        const elementX = rectElement.x + rectElement.width / 2;
+        const elementY = rectElement.y + rectElement.height / 2;
+        if (elementX + rectContent.width <= window.innerWidth) {
+            positionX = elementX;
+            transform += 1;
+        }
+        else if (elementX + rectElement.width - rectContent.width > 0) {
+            positionX = elementX + rectElement.width - rectContent.width;
+            transform += 3;
+        }
+        else {
+            positionX = window.innerWidth - rectContent.width;
+            transform += 1;
+        }
+        if (elementY + rectContent.height <= window.innerHeight) {
+            positionY = elementY;
+            transform += 4;
+        }
+        else if (elementY + rectElement.height - rectContent.height > 0) {
+            positionY = elementY + rectElement.height - rectContent.height;
+            transform += 7;
+        }
+        else {
+            positionY = window.innerHeight - rectContent.height;
+            transform += 4;
+        }
+        switch (transform) {
+            case 7:
+                effect = '100% 0%';
+                break;
+            case 8:
+                effect = '0% 100%';
+                break;
+            case 10:
+                effect = '100% 100%';
+                break;
+            default:
+                effect = '0% 0%';
+                break;
+        }
+        const content = component.current.querySelector('.rls-dropdown__content');
+        content.style.transformOrigin = effect;
+        component.current.style.top = `${positionY}px`;
+        component.current.style.left = `${positionX}px`;
+        setVisible(true);
+        event.stopPropagation();
+    }, []);
+    const close = useCallback(() => {
+        setVisible(false);
+    }, []);
+    return {
+        close,
+        component,
+        open,
+        openWithEvent,
+        visible
+    };
+}
+
+function usePortalController() {
+    const [visible, setVisible] = useState(false);
+    const open = useCallback(() => {
+        setVisible(true);
+    }, []);
+    const close = useCallback(() => {
+        setVisible(false);
+    }, []);
+    return { close, open, visible };
+}
+
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setDesignSystem, setErrorsI18n, setThemeColor, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
+//# sourceMappingURL=index.mjs.map