@rolster/react-components 19.9.0 → 19.11.0

package/dist/cjs/index.cjs

@@ -721,6 +721,12 @@ function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsThe
 }
 const RlsCheckBoxControl = require$$0.memo(RlsCheckBoxControlComponent);
 
+function RlsChipComponent({ children, className, contrasted, disabled, icon, identifier, onClick, onRemove, rlsTheme, selected }) {
+    const classNameChip = renderClassStatus('rls-chip', { clickable: !!onClick && !disabled, contrasted, disabled, selected }, className);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameChip, "rls-theme": rlsTheme, onClick: disabled ? undefined : onClick, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { className: "rls-chip__icon", value: icon }), jsxRuntimeExports.jsx("span", { className: "rls-chip__description", children: children }), onRemove && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-chip__remove", type: "button", onClick: onRemove, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }));
+}
+const RlsChip = require$$0.memo(RlsChipComponent);
+
 function RlsSkeletonComponent({ animation, rlsTheme }) {
     const className = renderClassStatus('rls-skeleton', {
         animation: animation !== 'shimmer' && animation
@@ -1472,6 +1478,132 @@ function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
 }
 const RlsAlert = require$$0.memo(RlsAlertComponent);
 
+const APP_THEME_ATTRIBUTE = 'app-theme';
+function getAppTheme() {
+    if (typeof document === 'undefined') {
+        return 'light';
+    }
+    const theme = document.body.getAttribute(APP_THEME_ATTRIBUTE);
+    return theme === 'dark' || theme === 'dim' ? theme : 'light';
+}
+function setAppTheme(theme) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
+}
+function toggleAppTheme() {
+    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
+    setAppTheme(theme);
+    return theme;
+}
+
+const reactI18n = i18n.i18n({
+    es: {
+        appThemeDark: 'Oscuro',
+        appThemeDim: 'Intermedio',
+        appThemeLight: 'Claro',
+        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: {
+        appThemeDark: 'Dark',
+        appThemeDim: 'Dim',
+        appThemeLight: 'Light',
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        chooserImageActionCancel: 'Cancel',
+        editorImageActionRestore: 'Restore',
+        editorImageActionSelect: 'Select',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Enter keyword to filter...'
+    }
+});
+
+function RlsTab({ disabled, onSelect, tab, value }) {
+    const className = renderClassStatus('rls-tabs__children', {
+        active: tab.value === value,
+        disabled: disabled || tab.disabled
+    });
+    const onClick = require$$0.useCallback(() => {
+        if (!disabled && !tab.disabled) {
+            onSelect(tab.value);
+        }
+    }, [disabled, tab.disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+}
+function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+    const [valueInternal, setValueInternal] = require$$0.useState();
+    const valueSelected = require$$0.useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
+    const onSelect = require$$0.useCallback((value) => {
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
+        onValue?.(value);
+    }, [formControl, onValue]);
+    require$$0.useEffect(() => {
+        if (formControl?.value !== undefined) {
+            return setValueInternal(formControl.value);
+        }
+        if (value !== undefined) {
+            return setValueInternal(value);
+        }
+        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
+        if (initial) {
+            onSelect(initial.value);
+        }
+    }, [value, formControl?.value]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
+        }) }));
+}
+const RlsTabs = require$$0.memo(RlsTabsComponent);
+
+const APP_THEMES = ['light', 'dim', 'dark'];
+const LABELS = {
+    light: () => reactI18n('appThemeLight'),
+    dim: () => reactI18n('appThemeDim'),
+    dark: () => reactI18n('appThemeDark')
+};
+function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes = APP_THEMES, value }) {
+    const [appTheme, setAppThemeValue] = require$$0.useState(() => value ?? getAppTheme());
+    require$$0.useEffect(() => {
+        if (value !== undefined) {
+            setAppTheme(value);
+            setAppThemeValue(value);
+        }
+    }, [value]);
+    const tabs = require$$0.useMemo(() => {
+        return themes.map((theme) => ({
+            label: labels?.[theme] ?? LABELS[theme](),
+            value: theme
+        }));
+    }, [labels, themes]);
+    const onSelect = require$$0.useCallback((theme) => {
+        setAppTheme(theme);
+        setAppThemeValue(theme);
+        onValue?.(theme);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
+}
+const RlsAppThemeTabs = require$$0.memo(RlsAppThemeTabsComponent);
+
 function RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
     const classNameBallot = renderClassStatus('rls-ballot', { 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 }) }))] })] }));
@@ -1545,6 +1677,36 @@ function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled
 }
 const RlsButtonToggle = require$$0.memo(RlsButtonToggleComponent);
 
+function RlsChipGroupComponent({ className, disabled: disabledProps, formControl, identifier, onValue, options, reference, render, rlsTheme, value: valueInitial }) {
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
+    const selected = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const classNameGroup = renderClassStatus('rls-chip-group', { disabled }, className);
+    const isSelected = require$$0.useCallback((option) => {
+        if (selected === undefined || selected === null) {
+            return false;
+        }
+        return reference
+            ? reference(option) === reference(selected)
+            : option === selected;
+    }, [reference, selected]);
+    const onSelect = require$$0.useCallback((option) => () => {
+        if (disabled) {
+            return;
+        }
+        setValue(option);
+        formControl?.setValue(option);
+        formControl?.touch();
+        onValue?.(option);
+    }, [disabled, formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameGroup, "rls-theme": rlsTheme, children: options.map((option, index) => (jsxRuntimeExports.jsx(RlsChip, { disabled: disabled, selected: isSelected(option), onClick: onSelect(option), children: render ? render(option) : String(option) }, index))) }));
+}
+const RlsChipGroup = require$$0.memo(RlsChipGroupComponent);
+
 function RlsContentComponent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-theme": rlsTheme, children: children }));
 }
@@ -1759,33 +1921,6 @@ function RlsFieldFileComponent({ accept, children, disabled: _disabled, formCont
 }
 const RlsFieldFile = require$$0.memo(RlsFieldFileComponent);
 
-const reactI18n = i18n.i18n({
-    es: {
-        confirmationActionApproved: 'Aceptar',
-        dateActionCancel: 'Cancelar',
-        dateActionSelect: 'Establecer',
-        dateActionToday: 'Hoy',
-        chooserImageActionCancel: 'Cancelar',
-        editorImageActionRestore: 'Restaurar',
-        editorImageActionSelect: 'Seleccionar',
-        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
-        listEmptyTitle: 'Selección no disponible',
-        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
-    },
-    en: {
-        confirmationActionApproved: 'Approved',
-        dateActionCancel: 'Cancel',
-        dateActionSelect: 'Select',
-        dateActionToday: 'Today',
-        chooserImageActionCancel: 'Cancel',
-        editorImageActionRestore: 'Restore',
-        editorImageActionSelect: 'Select',
-        listEmptyDescription: 'Sorry, there are currently no items in the list',
-        listEmptyTitle: 'Selection not available',
-        listInputPlaceholder: 'Enter keyword to filter...'
-    }
-});
-
 function useEventCallback(callback) {
     const refCallback = require$$0.useRef(callback);
     require$$0.useInsertionEffect(() => {
@@ -2696,50 +2831,6 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = require$$0.memo(RlsSliderComponent);
 
-function RlsTab({ disabled, onSelect, tab, value }) {
-    const className = renderClassStatus('rls-tabs__children', {
-        active: tab.value === value,
-        disabled: disabled || tab.disabled
-    });
-    const onClick = require$$0.useCallback(() => {
-        if (!disabled && !tab.disabled) {
-            onSelect(tab.value);
-        }
-    }, [disabled, tab.disabled, onSelect]);
-    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
-}
-function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
-    const [valueInternal, setValueInternal] = require$$0.useState();
-    const valueSelected = require$$0.useMemo(() => {
-        return formControl ? formControl.value : valueInternal;
-    }, [formControl?.value, valueInternal]);
-    const onSelect = require$$0.useCallback((value) => {
-        if (formControl) {
-            formControl?.setValue(value);
-        }
-        else {
-            setValueInternal(value);
-        }
-        onValue?.(value);
-    }, [formControl, onValue]);
-    require$$0.useEffect(() => {
-        if (formControl?.value !== undefined) {
-            return setValueInternal(formControl.value);
-        }
-        if (value !== undefined) {
-            return setValueInternal(value);
-        }
-        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
-        if (initial) {
-            onSelect(initial.value);
-        }
-    }, [value, formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
-            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
-        }) }));
-}
-const RlsTabs = require$$0.memo(RlsTabsComponent);
-
 function RlsToolbarComponent({ 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))) }))] }));
 }
@@ -4554,7 +4645,9 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
         readonly: props.readOnly
     }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
     const renderWithCheckbox = require$$0.useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsx(RlsChip, { onRemove: !props.readOnly && !disabled
+                                    ? fieldList.onRemoveElement(item)
+                                    : undefined, children: item.description }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
 }
 function RlsFieldListTemplateComponent(props) {
     const fieldList = useFieldList(props);
@@ -5043,6 +5136,46 @@ function RlsImageChooserComponent(props) {
 }
 const RlsImageChooser = require$$0.memo(RlsImageChooserComponent);
 
+function RlsLedColorComponent({ className, color, disabled: disabledProps, formControl, identifier, onValue, readOnly, rlsTheme, value: valueInitial }) {
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
+    const [pickerKey, setPickerKey] = require$$0.useState(0);
+    const colorValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const ledColor = require$$0.useMemo(() => {
+        return colorValue && hexIsValid(colorValue)
+            ? normalizeHex(colorValue)
+            : undefined;
+    }, [colorValue]);
+    const classNameLed = renderClassStatus('rls-led-color', { disabled, error: formControl?.wrong, readonly: readOnly }, className);
+    const onChange = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickLed = require$$0.useCallback(() => {
+        if (!disabled && !readOnly) {
+            setPickerKey((key) => key + 1);
+            setModalIsVisible(true);
+        }
+    }, [disabled, readOnly]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        if (event !== components.PickerListenerEvent.Cancel) {
+            onChange(value);
+        }
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    const onBackdrop = require$$0.useCallback(() => {
+        setModalIsVisible(false);
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameLed, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("button", { className: "rls-led-color__trigger", type: "button", disabled: disabled, onClick: onClickLed, children: jsxRuntimeExports.jsx(RlsLed, { color: ledColor, rlsTheme: rlsTheme }) }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsTheme: rlsTheme, onBackdrop: onBackdrop, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: ledColor ?? color, disabled: disabled, onListener: onListener }, pickerKey) })] }));
+}
+const RlsLedColor = require$$0.memo(RlsLedColorComponent);
+
 function RlsModalSheetComponent({ autoclose, children, className, controller, onAutoClose, visible, rlsTheme }) {
     const classNameModal = renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = require$$0.useCallback(() => {
@@ -5224,6 +5357,24 @@ function RlsApplication({ children }) {
     return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, jsxRuntimeExports.jsx(RlsSnackbar, {})] }), jsxRuntimeExports.jsx(RlsConfirmation, {}), jsxRuntimeExports.jsx(RlsNotifications, {})] }));
 }
 
+function useAppThemeController(initialTheme, primaryTheme = 'light', secondaryTheme = 'dark') {
+    const [appTheme, setAppThemeValue] = require$$0.useState(() => {
+        if (initialTheme) {
+            setAppTheme(initialTheme);
+            return initialTheme;
+        }
+        return getAppTheme();
+    });
+    const setValue = require$$0.useCallback((value) => {
+        setAppTheme(value);
+        setAppThemeValue(value);
+    }, []);
+    const toggle = require$$0.useCallback(() => {
+        setValue(appTheme === primaryTheme ? secondaryTheme : primaryTheme);
+    }, [appTheme, primaryTheme, secondaryTheme, setValue]);
+    return { setValue, toggle, value: appTheme };
+}
+
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
 
 const DESIGN_SYSTEM_PREFIX = 'rls-design-system';
@@ -5357,32 +5508,13 @@ function useTabsController(options) {
     return require$$0.useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
-const APP_THEME_ATTRIBUTE = 'app-theme';
-function getAppTheme() {
-    if (typeof document === 'undefined') {
-        return 'light';
-    }
-    return document.body.getAttribute(APP_THEME_ATTRIBUTE) === 'dark'
-        ? 'dark'
-        : 'light';
-}
-function setAppTheme(theme) {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
-}
-function toggleAppTheme() {
-    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
-    setAppTheme(theme);
-    return theme;
-}
-
+exports.APP_THEMES = APP_THEMES;
 exports.ConfirmationResult = ConfirmationResult;
 exports.DEFAULT_COLOR = DEFAULT_COLOR;
 exports.RlsAccordion = RlsAccordion;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
+exports.RlsAppThemeTabs = RlsAppThemeTabs;
 exports.RlsApplication = RlsApplication;
 exports.RlsAreaText = RlsAreaText;
 exports.RlsAvatar = RlsAvatar;
@@ -5401,6 +5533,8 @@ exports.RlsButtonToggle = RlsButtonToggle;
 exports.RlsCard = RlsCard;
 exports.RlsCheckBox = RlsCheckBox;
 exports.RlsCheckBoxControl = RlsCheckBoxControl;
+exports.RlsChip = RlsChip;
+exports.RlsChipGroup = RlsChipGroup;
 exports.RlsChooserAutocomplete = RlsChooserAutocomplete;
 exports.RlsChooserAutocompleteTemplate = RlsChooserAutocompleteTemplate;
 exports.RlsChooserList = RlsChooserList;
@@ -5460,6 +5594,7 @@ exports.RlsLabelCheckBox = RlsLabelCheckBox;
 exports.RlsLabelRadioButton = RlsLabelRadioButton;
 exports.RlsLabelSwitch = RlsLabelSwitch;
 exports.RlsLed = RlsLed;
+exports.RlsLedColor = RlsLedColor;
 exports.RlsMessageEmpty = RlsMessageEmpty;
 exports.RlsMessageFormError = RlsMessageFormError;
 exports.RlsMessageIcon = RlsMessageIcon;
@@ -5516,6 +5651,7 @@ exports.setDesignSystem = setDesignSystem;
 exports.setErrorsI18n = setErrorsI18n;
 exports.setThemeColor = setThemeColor;
 exports.toggleAppTheme = toggleAppTheme;
+exports.useAppThemeController = useAppThemeController;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useDesingSystemController = useDesingSystemController;