@rolster/react-components 19.3.0 → 19.4.0

package/dist/es/index.js

@@ -1,3376 +0,0 @@
-import require$$0, { useMemo, useState, useEffect, useCallback, useRef, useEffectEvent, createContext } 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, locationListCanTop, 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;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
-}
-
-var jsxRuntimeExports = jsxRuntime.exports;
-
-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 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, tooltip }) {
-    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
-}
-
-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 && formControl.setValue(value);
-            onValue && 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 && 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 refSrc = useRef(src);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-image', { complet: srcIsComplet });
-    }, [srcIsComplet]);
-    useEffect(() => {
-        if (refSrc.current !== src) {
-            setSrcIsComplet(false);
-            refSrc.current = src;
-        }
-    }, [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", { 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 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 && onKeyDown(event);
-        event.key === 'Enter' && onEnter && onEnter();
-    }, [onKeyDown, onEnter]);
-    const _onKeyUp = useCallback((event) => {
-        onKeyUp && 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 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 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 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 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]);
-    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: () => {
-                                onAction(action.value);
-                            }, 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: "truncate", onClick: () => {
-                            onSelectAction(action);
-                        }, 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 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 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 RlsPagination({ suggestions, count, filter, onPagination }) {
-    const [template, setTemplate] = useState();
-    const controller = useRef(undefined);
-    const refreshTemplate = useCallback((template, suggestions) => {
-        const { firstPage, lastPage } = template;
-        onPagination && onPagination({ firstPage, lastPage, suggestions });
-        setTemplate(template);
-    }, [onPagination]);
-    const refreshPagination = useCallback((pagination) => {
-        pagination &&
-            refreshTemplate(pagination.template, pagination.page.collection);
-    }, []);
-    useEffect(() => {
-        const pagination = new PaginationController({
-            suggestions,
-            count,
-            position: template?.currentPage.value
-        });
-        controller.current = pagination;
-        refreshTemplate(pagination.template, pagination.page.collection);
-    }, [suggestions, count]);
-    useEffect(() => {
-        refreshPagination(controller.current?.filtrable(filter));
-    }, [filter]);
-    const goToPagination = useCallback((page) => {
-        refreshPagination(controller.current?.goToPage(page));
-    }, []);
-    const goFirstPagination = useCallback(() => {
-        refreshPagination(controller.current?.goFirstPage());
-    }, []);
-    const goPreviousPagination = useCallback(() => {
-        refreshPagination(controller.current?.goPreviousPage());
-    }, []);
-    const goNextPagination = useCallback(() => {
-        refreshPagination(controller.current?.goNextPage());
-    }, []);
-    const goLastPagination = useCallback(() => {
-        refreshPagination(controller.current?.goLastPage());
-    }, []);
-    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, index) => {
-                            return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-pagination__page', {
-                                    active: page.active
-                                }), onClick: () => {
-                                    goToPagination(page);
-                                }, children: page.label }, index));
-                        }) }), 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: _date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
-    const date = useMemo(() => _date ?? new Date(), [_date]);
-    const [weeks, setWeeks] = useState([]);
-    const [value, setValue] = useState(formControl?.value || date.getDate());
-    const [headers, setHeaders] = useState(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
-    const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
-    const setDayValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setDayValue(value);
-        onValue?.(value);
-    }, [setDayValue, onValue]);
-    useEffect(() => {
-        return i18nSubscribe(() => {
-            setHeaders(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
-        });
-    }, []);
-    useEffect(() => {
-        setComponent(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))) }));
-    }, [weeks, onSelect, disabled]);
-    useEffect(() => {
-        const options = createPickerOptions();
-        const day = verifyDayPicker(options);
-        day ? setDayValue(day) : setWeeks(createDayPicker(options));
-    }, [date, month, year, value, minDate, maxDate]);
-    useEffect(() => {
-        const day = verifyDayPicker(createPickerOptions());
-        day
-            ? formControl?.setValue(day)
-            : setValue(formControl?.value || date.getDate());
-    }, [formControl?.value]);
-    const createPickerOptions = useCallback(() => {
-        return {
-            date,
-            day: formControl?.value ?? value,
-            month: month ?? date.getMonth(),
-            year: year ?? date.getFullYear(),
-            minDate,
-            maxDate
-        };
-    }, [date, formControl?.value, value, month, year, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
-}
-
-function RlsPickerDayRangeHeaders() {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { 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: _date, disabled, formControl, maxDate, minDate, rlsTheme }) {
-    const _range = useMemo(() => {
-        return formControl?.value ?? DateRange.now();
-    }, [formControl?.value]);
-    const date = useMemo(() => {
-        return normalizeMinTime(_date ?? _range.minDate);
-    }, [_date]);
-    const sourceDate = useRef(_range.minDate);
-    const [weeks, setWeeks] = useState([]);
-    const [range, setRange] = useState(_range);
-    const [headers, setHeaders] = useState(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
-    const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
-    const onSelect = useCallback((value) => {
-        const _date = assignDayInDate(date, 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);
-    }, [date, sourceDate.current, formControl]);
-    useEffect(() => {
-        return i18nSubscribe(() => {
-            setHeaders(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
-        });
-    }, []);
-    useEffect(() => {
-        setComponent(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))) }));
-    }, [weeks, onSelect, disabled]);
-    useEffect(() => {
-        setWeeks(createDayRangePicker({
-            date,
-            range,
-            sourceDate: sourceDate.current,
-            minDate,
-            maxDate
-        }));
-    }, [date, range, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [headers, component] }));
-}
-
-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: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
-    const date = useMemo(() => _date || new Date(), [_date]);
-    const [months, setMonths] = useState([]);
-    const [value, setValue] = useState(formControl?.value ?? date.getMonth());
-    const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
-    const setMonthValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setMonthValue(value);
-        onValue?.(value);
-    }, [setMonthValue, onValue]);
-    useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [months, onSelect, disabled]);
-    useEffect(() => {
-        const options = {
-            date,
-            month: formControl?.value ?? value,
-            year: year ?? date.getFullYear(),
-            minDate,
-            maxDate
-        };
-        const month = verifyMonthPicker(options);
-        valueIsDefined(month)
-            ? setMonthValue(month)
-            : setMonths(createMonthPicker(options));
-    }, [date, year, value, minDate, maxDate]);
-    useEffect(() => {
-        const month = verifyMonthPicker({
-            date,
-            month: formControl?.value ?? value,
-            year: year ?? date.getFullYear(),
-            minDate,
-            maxDate
-        });
-        valueIsDefined(month)
-            ? formControl?.setValue(month)
-            : setValue(formControl?.value ?? date.getMonth());
-    }, [formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: component }));
-}
-
-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 && onClick('month');
-    }, [onClick]);
-    const onYear = useCallback(() => {
-        onClick && 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("button", { onClick: onPrevious, disabled: limitPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), 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("button", { onClick: onNext, disabled: limitNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }));
-}
-
-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: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
-    const date = useMemo(() => _date || new Date(), [_date]);
-    const [value, setValue] = useState(formControl?.value ?? date.getFullYear());
-    const [year, setYear] = useState(formControl?.value ?? date.getFullYear());
-    const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
-    const createPickerOptions = useCallback(() => {
-        return {
-            date,
-            year,
-            minDate,
-            maxDate
-        };
-    }, [date, year, minDate, maxDate]);
-    const [template, setTemplate] = useState(createYearPicker(createPickerOptions()));
-    const setYearValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-        setYear(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setYearValue(value);
-        onValue?.(value);
-    }, [setYearValue, onValue]);
-    useEffect(() => {
-        const options = createPickerOptions(); // YearPickerProps
-        const year = verifyYearPicker(options);
-        year ? setYearValue(year) : setTemplate(createYearPicker(options));
-    }, [date, year, value, minDate, maxDate]);
-    useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [template.years, onSelect, disabled]);
-    useEffect(() => {
-        const year = verifyYearPicker(createPickerOptions());
-        valueIsDefined(year)
-            ? formControl?.setValue(year)
-            : setValue(formControl?.value ?? date.getFullYear());
-    }, [formControl?.value]);
-    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("button", { className: "rls-picker-year__action rls-picker-year__action--prev", onClick: onClickPrev, disabled: !template.canPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--next", onClick: onClickNext, disabled: !template.canNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
-}
-
-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(props) {
-    const minValue = useMemo(() => {
-        return props.minValue ?? 0;
-    }, [props.minValue]);
-    const maxValue = useMemo(() => {
-        return props.maxValue ?? 100;
-    }, [props.maxValue]);
-    const [value, setValue] = useState(calculateInitialValue(props.formControl?.value ?? props.value ?? 0, minValue, maxValue));
-    const [rate, setRate] = useState(calculateInitialRate(value, minValue, maxValue));
-    const refComponent = useRef(null);
-    const refTrack = useRef(null);
-    const refTrackOn = useRef(null);
-    const refThumb = useRef(null);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-slider', {
-            complet: value === maxValue,
-            disabled: props.disabled,
-            empty: value === minValue
-        });
-    }, [value, minValue, maxValue, props.disabled]);
-    useEffect(() => {
-        const valueInitial = props.formControl?.value ?? props.value ?? 0;
-        refThumb.current.style.left = `${rate}%`;
-        refTrackOn.current.style.width = `${rate}%`;
-        if (valueInitial !== value) {
-            props.formControl?.setValue(value);
-            props.onValue && props.onValue(value);
-        }
-    }, []);
-    const calculateValueWithRate = useCallback((rate) => {
-        const value = Math.ceil(((maxValue - minValue) * rate) / 100);
-        refThumb.current.style.left = `${rate}%`;
-        refTrackOn.current.style.width = `${rate}%`;
-        const sliderValue = value + minValue;
-        setRate(rate);
-        setValue(sliderValue);
-        props.formControl?.setValue(sliderValue);
-        props.onValue && props.onValue(sliderValue);
-    }, [minValue, maxValue, props.formControl, props.onValue]);
-    const onClickTrack = useCallback((event) => {
-        const { left, width } = refTrack.current.getBoundingClientRect();
-        const rate = Math.ceil(((event.clientX - left) / width) * 100);
-        calculateValueWithRate(rate);
-    }, [minValue, maxValue]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, children: [props.children && (jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: props.children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [props.prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: props.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 }) }));
-}
-
-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...'
-    }
-});
-
-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 }) }));
-}
-
-function calculateMinHeightList(count, height) {
-    return count <= 0 ? 160 : (count < 6 ? count : 6) * height;
-}
-function useListController(props) {
-    const { count, suggestions, automatic, formControl, lineHeight, 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,
-        modalIsVisible: 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, modalIsVisible: false }));
-        }
-        document.addEventListener('click', onCloseSuggestions);
-        return () => {
-            document.removeEventListener('click', onCloseSuggestions);
-        };
-    }, []);
-    useEffect(() => {
-        if (!listIsOpen.current && state.modalIsVisible) {
-            listIsOpen.current = true;
-        }
-        if (listIsOpen.current && !state.modalIsVisible) {
-            formControl?.touch();
-        }
-    }, [state.modalIsVisible]);
-    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 minHeightList = calculateMinHeightList(count, lineHeight ?? 48);
-        const _state = state.modalIsVisible
-            ? {
-                ...state,
-                higher: locationListCanTop(refContent.current, refList.current, minHeightList)
-            }
-            : state;
-        refreshState((state) => ({ ...state, ..._state }));
-    }, [count]);
-    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.modalIsVisible) {
-            const _position = navigationListFromInput({
-                content: refContent.current,
-                event: event,
-                list: refList.current
-            });
-            position.current = _position ?? 0;
-        }
-    }, [state.modalIsVisible]);
-    const navigationElement = useCallback((event) => {
-        position.current = navigationListFromElement({
-            content: refContent.current,
-            event: event,
-            input: refInput.current,
-            list: refList.current,
-            position: position.current
-        });
-    }, [state.modalIsVisible]);
-    return {
-        ...state,
-        navigationElement,
-        navigationInput,
-        refContent,
-        refInput,
-        refList,
-        setFormValue,
-        setState
-    };
-}
-
-const DURATION_ANIMATION$1 = 240;
-const MAX_ELEMENTS = 6;
-function useFieldAutocomplete(props) {
-    const count = useRef(props.suggestions.length);
-    const controller = useListController({
-        ...props,
-        count: count.current
-    });
-    const [coincidences, setCoincidences] = useState([]);
-    const [pattern, setPattern] = useState('');
-    const _store = useRef({
-        coincidences: [],
-        pattern: '',
-        previous: null
-    });
-    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);
-        count.current = coincidences.length;
-    }, []);
-    useEffect(() => {
-        refreshCoincidences(props.suggestions, pattern, true);
-    }, [props.suggestions]);
-    useEffect(() => {
-        refreshCoincidences(props.suggestions, pattern);
-    }, [pattern]);
-    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 onKeydownInput = useCallback((event) => {
-        switch (event.code) {
-            case 'Escape':
-            case 'Tab':
-                controller.setState({ modalIsVisible: false });
-                break;
-            default:
-                controller.navigationInput(event);
-                break;
-        }
-    }, [controller.setState, controller.navigationInput]);
-    const onClickControl = useCallback(() => {
-        if (!props.readOnly) {
-            controller.setState({ modalIsVisible: true });
-            setTimeout(() => {
-                controller.refInput?.current?.focus();
-            }, DURATION_ANIMATION$1);
-        }
-    }, [controller.setState, props.readOnly]);
-    const onClickAction = useCallback(() => {
-        if (controller.value) {
-            controller.setState({ modalIsVisible: false });
-            controller.setFormValue(undefined);
-            props.onValue && props.onValue(props.value);
-        }
-        else {
-            onClickControl();
-        }
-    }, [
-        controller.value,
-        controller.setState,
-        controller.setFormValue,
-        props.onValue
-    ]);
-    const onClickBackdrop = useCallback(() => {
-        controller.setState({ modalIsVisible: 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({ modalIsVisible: false });
-        }
-        props.onValue && 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, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
-    const [labels, setLabels] = useState({
-        listEmptyDescription: reactI18n('listEmptyDescription'),
-        listEmptyTitle: reactI18n('listEmptyTitle'),
-        listInputPlaceholder: reactI18n('listInputPlaceholder')
-    });
-    useEffect(() => {
-        return i18nSubscribe(() => {
-            setLabels({
-                listEmptyDescription: reactI18n('listEmptyDescription'),
-                listEmptyTitle: reactI18n('listEmptyTitle'),
-                listInputPlaceholder: reactI18n('listInputPlaceholder')
-            });
-        });
-    }, []);
-    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 classNameSuggestions = useMemo(() => {
-        return renderClassStatus('rls-field-list__suggestions', {
-            disabled,
-            higher: autocomplete.higher,
-            visible: autocomplete.modalIsVisible
-        });
-    }, [autocomplete.higher, autocomplete.modalIsVisible, disabled]);
-    const onChangePattern = useCallback((event) => {
-        autocomplete.setPattern(event.target.value);
-    }, [autocomplete.setPattern]);
-    const onClickPattern = useCallback(() => {
-        onSearch && onSearch(autocomplete.pattern);
-    }, [onSearch, autocomplete.pattern]);
-    const onKeyDownPattern = useCallback((event) => {
-        event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
-        autocomplete.onKeydownInput(event);
-    }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
-    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("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: 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-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.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 [value, setValue] = useState(_date);
-    const [visibility, setVisibility] = useState('DAY');
-    const [labels, setLabels] = useState({
-        dateActionCancel: reactI18n('dateActionCancel'),
-        dateActionSelect: reactI18n('dateActionSelect'),
-        dateActionToday: reactI18n('dateActionToday')
-    });
-    const classNameComponent = useMemo(() => {
-        return renderClassStatus('rls-picker-date__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
-    const title = useMemo(() => {
-        return dateFormatTemplate(_date, DATE_FORMAT_TITLE);
-    }, [_date]);
-    const itIsDisabledToday = useMemo(() => dateOutRange({
-        date: today.current,
-        maxDate,
-        minDate
-    }), [today.current, maxDate, minDate]);
-    useEffect(() => {
-        const date = verifyDateRange({ date: _date, minDate, maxDate });
-        setValue(date);
-        formControl?.setValue(date);
-        return i18nSubscribe(() => {
-            setLabels({
-                dateActionCancel: reactI18n('dateActionCancel'),
-                dateActionSelect: reactI18n('dateActionSelect'),
-                dateActionToday: reactI18n('dateActionToday')
-            });
-        });
-    }, []);
-    useEffect(() => {
-        setValue(new Date(yearControl.value, monthControl.value, dayControl.value));
-    }, [yearControl.value, monthControl.value, dayControl.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 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
-        });
-    }, [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: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, 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("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 [value, setValue] = useState(_range);
-    const [date, setDate] = useState(_date);
-    const [visibility, setVisibility] = useState('DAY');
-    const [labels, setLabels] = useState({
-        dateActionCancel: reactI18n('dateActionCancel'),
-        dateActionSelect: reactI18n('dateActionSelect')
-    });
-    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(() => {
-        setDate((date) => {
-            return valueIsDefined(yearControl.value)
-                ? assignYearInDate(date, yearControl.value)
-                : date;
-        });
-    }, [yearControl.value]);
-    useEffect(() => {
-        setDate((date) => {
-            return valueIsDefined(monthControl.value)
-                ? assignMonthInDate(date, monthControl.value)
-                : date;
-        });
-    }, [monthControl.value]);
-    useEffect(() => {
-        rangeControl.value && setValue(rangeControl.value);
-        setVisibility('DAY');
-    }, [rangeControl.value]);
-    const onVisibilityDay = useCallback(() => {
-        setVisibility('DAY');
-    }, []);
-    const onVisibilityTitle = useCallback((type) => {
-        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
-    }, []);
-    const onCancel = useCallback(() => {
-        onListener && onListener({ event: PickerListenerEvent.Cancel });
-    }, [onListener]);
-    const onSelect = useCallback(() => {
-        formControl?.setValue(value);
-        onListener && 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("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 count = useRef(props.suggestions.length);
-    const controller = useListController({
-        ...props,
-        count: count.current
-    });
-    useEffect(() => {
-        count.current = props.suggestions.length;
-    }, [props.suggestions]);
-    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({ modalIsVisible: true });
-    }, [controller.setState, props.readOnly]);
-    const onKeydownInput = useCallback((event) => {
-        switch (event.code) {
-            case 'Space':
-            case 'Enter':
-                controller.setState({ modalIsVisible: true });
-                break;
-            case 'Escape':
-            case 'Tab':
-                controller.setState({ modalIsVisible: false });
-                break;
-            default:
-                controller.navigationInput(event);
-                break;
-        }
-    }, [controller.setState, controller.navigationInput]);
-    const onClickAction = useCallback(() => {
-        const removable = !props.unremovable && !!controller.value;
-        if (removable) {
-            controller.setState({ modalIsVisible: false });
-            controller.setFormValue(undefined);
-            props.onValue && props.onValue(props.value);
-        }
-        else {
-            const modalIsVisible = !controller.modalIsVisible;
-            controller.setState({ modalIsVisible });
-            modalIsVisible && controller.refInput?.current?.focus();
-        }
-    }, [
-        controller.modalIsVisible,
-        controller.value,
-        controller.setState,
-        controller.setFormValue,
-        props.unremovable,
-        props.onValue
-    ]);
-    const onClickBackdrop = useCallback(() => {
-        controller.setState({ modalIsVisible: false });
-    }, [controller.setState]);
-    const onChange = useCallback((element) => {
-        !props.disabled && controller.refInput?.current?.focus();
-        if (props.onSelect) {
-            controller.setState({ modalIsVisible: false });
-            element.value && props.onSelect(element.value);
-        }
-        else {
-            controller.setFormValue(element);
-            controller.setState({ modalIsVisible: false });
-        }
-        props.onValue && 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, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
-    const [labels, setLabels] = useState({
-        listEmptyDescription: reactI18n('listEmptyDescription'),
-        listEmptyTitle: reactI18n('listEmptyTitle')
-    });
-    useEffect(() => {
-        return i18nSubscribe(() => {
-            setLabels({
-                listEmptyDescription: reactI18n('listEmptyDescription'),
-                listEmptyTitle: reactI18n('listEmptyTitle')
-            });
-        });
-    }, []);
-    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
-    ]);
-    const classNameSuggestions = useMemo(() => {
-        return renderClassStatus('rls-field-list__suggestions', {
-            disabled,
-            higher: select.higher,
-            visible: select.modalIsVisible
-        });
-    }, [select.modalIsVisible, select.higher, 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("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: 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 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 && 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 minValueSlider = 50;
-const maxValueSlider = 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 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
-                ? refreshSelectionFromHeight(rateSelection)
-                : refreshSelectionFromWidth(rateSelection);
-            refSelection.current.style.width = `${width}px`;
-            refSelection.current.style.height = `${height}px`;
-            if (refSelection.current.offsetLeft + width >
-                refImage.current.offsetWidth) {
-                const left = refImage.current.offsetWidth - width;
-                refSelection.current.style.left = `${left < 0 ? 0 : left}px`;
-            }
-            if (refSelection.current.offsetTop + height >
-                refImage.current.offsetHeight) {
-                const top = refImage.current.offsetHeight - height;
-                refSelection.current.style.top = `${top < 0 ? 0 : top}px`;
-            }
-            refreshOverlaysStyle();
-        }
-    }, [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%');
-    }, [ratio]);
-    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: 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 && 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: minValueSlider, maxValue: maxValueSlider, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "classic", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
-}
-
-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 && 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({ children, className, onAutoClose, visible, rlsTheme }) {
-    const classNameModal = useMemo(() => {
-        return renderClassStatus('rls-modal-sheet', { visible }, className);
-    }, [className, visible]);
-    const onClickBackdrop = useCallback(() => {
-        onAutoClose && onAutoClose();
-    }, [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 = 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({
-    confirmation: () => {
-        return Promise.resolve(ConfirmationResult.approved());
-    },
-    snackbar: () => { },
-    setIsMobile: () => { },
-    setNavbarInApp: () => { },
-    setNavbarIsCondense: () => { }
-});
-function RlsApplication({ children }) {
-    const { RlsConfirmation, confirmation } = useConfirmation();
-    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,
-            snackbar,
-            setIsMobile,
-            setNavbarInApp,
-            setNavbarIsCondense
-        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
-}
-
-function useDropdownController() {
-    const [visible, setVisible] = useState(false);
-    const component = useRef(null);
-    const open = useCallback((positionX, positionY) => {
-        component.current.style.transformOrigin = '0% 0%';
-        component.current.style.top = `${positionY}px`;
-        component.current.style.left = `${positionX}px`;
-        setVisible(true);
-    }, []);
-    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;
-        }
-        component.current.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, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonOption, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerClock, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useDropdownController, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, usePortalController, useRelocationOnComponent, useResize, useSnackbar };
-//# sourceMappingURL=index.js.map