venice-ui 2.4.12 → 3.0.1

package/dist/cjs/components/Modal/Modal.js

@@ -1,37 +1,30 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
-const ElementHeader_1 = require("../ElementHeader");
-const Theme_1 = require("../../Theme/Theme");
-const common_1 = require("../common");
-const Modal_styles_1 = require("./Modal.styles");
+const config_1 = require("../../config");
+const react_1 = require("react");
+const config_2 = require("../../config");
 const styled_components_1 = require("styled-components");
+const Modal_styles_1 = require("./Modal.styles");
+const react_2 = __importDefault(require("react"));
+const Header_1 = require("../Header");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, decorativeEdge = false, }) => {
+const react_dom_1 = require("react-dom");
+const Modal = ({ theme, themeVariant = 'default', isOpen, children, title, handleConfirm, handleClose, handleAdditional, submitDisabled, size = 'sm', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, labels = {
+    primary: undefined,
+    secondary: config_1.wordbook.actions.cancel,
+    additional: undefined,
+}, }) => {
+    const resolvedThemeData = (0, config_2.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const modalConfig = componentsConfig.modal;
     (0, react_1.useEffect)(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -45,11 +38,16 @@ const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfi
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isOpen]);
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
-            react_1.default.createElement(Modal_styles_1.ModalElement, { size: size, decorativeEdge: decorativeEdge },
-                react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
-                react_1.default.createElement(common_1.ScrollCotainer, null, children),
-                react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue, additionaNormalMode: additionaNormalMode, additionDisabled: additionDisabled })))));
+    return (react_2.default.createElement(react_2.default.Fragment, null, isOpen &&
+        (0, react_dom_1.createPortal)(react_2.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+            react_2.default.createElement(Modal_styles_1.ModalOverlayer, { config: modalConfig, theme: resolvedTheme },
+                react_2.default.createElement(Modal_styles_1.ModalRoot, { config: modalConfig, theme: resolvedTheme, size: size },
+                    react_2.default.createElement(Header_1.Header, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
+                    react_2.default.createElement(Modal_styles_1.ModalContent, { config: modalConfig, theme: resolvedTheme }, children),
+                    react_2.default.createElement(ButtonsFooter_1.ButtonsFooter, { onPrimaryAction: handleConfirm, onSecondaryAction: handleClose, onAdditionalAction: handleAdditional, primaryDisabled: submitDisabled, primaryLoading: submitLoader, additionalType: additionalType, additionalValue: additionalValue, isAdditionalDanger: additionaNormalMode, additionDisabled: additionDisabled, labels: {
+                            primary: labels.primary,
+                            secondary: labels.secondary,
+                            additional: labels.additional,
+                        } })))), document.body)));
 };
 exports.Modal = Modal;

package/dist/cjs/components/Modal/Modal.styles.js

@@ -1,39 +1,97 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalElement = exports.ModalOverlayer = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
+exports.ModalContent = exports.ModalRoot = exports.ModalOverlayer = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const overlayerFadeIn = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+const modalIn = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+`;
 exports.ModalOverlayer = styled_components_1.default.div `
   box-sizing: border-box;
   align-items: center;
-  background-color: ${Theme_1.Theme.colors.overlayer};
+  background-color: ${({ config, theme }) => config.color.overlayer};
+  animation: ${overlayerFadeIn} 180ms ease-out;
   display: flex;
   justify-content: center;
   height: 100vh;
   left: 0;
   top: 0;
-  padding: ${Theme_1.Theme.padding.l};
+  padding: ${({ config, theme }) => config.size.common.overlayerPadding}px;
   width: 100%;
   position: fixed;
-  z-index: ${Theme_1.Theme.zIndex.modalOverlayer};
+  z-index: ${({ config, theme }) => config.size.common.zIndex.modalOverlayer};
 `;
-exports.ModalElement = styled_components_1.default.div `
-  box-sizing: border-box;
-  display: flex;
+exports.ModalRoot = styled_components_1.default.div `
+    box-sizing: border-box;
+  animation: ${modalIn} 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    display: flex;
+    width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    flex-direction: column;
+    position: relative;
+    background-color: ${({ config, theme }) => config.color.background};
+    max-width: ${({ config, size }) => config.size[size].width}!important;
+    box-shadow: ${({ config }) => config.color.shadow};
+    border-radius: ${({ config }) => config.size.common.borderRadius}px;
+
+    > * {
+      flex-shrink: 0;
+    }
+`;
+exports.ModalContent = styled_components_1.default.div `
   width: 100%;
-  background-color: ${p => p.theme.contentBackground};
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  max-height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  position: relative;
-  max-width: 60rem;
-  box-shadow: ${Theme_1.Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px;`}
-  ${p => p.size === 'medium' && `max-width:750px;`}
-  ${p => p.size === 'large' && `max-width:100%;`}
-  ${p => p.decorativeEdge && `border-left: 4px solid ${Theme_1.Theme.colors.primary};`}
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: ${({ config }) => config.size.common.paddingY}px
+    ${({ config }) => config.size.common.paddingX}px;
+  overflow: auto;
+  box-sizing: border-box;
 `;

package/dist/cjs/components/Modal/index.js

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-var Modal_1 = require("./Modal");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
+__exportStar(require("./Modal"), exports);

package/dist/cjs/components/Numerical/Numerical.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Numerical = void 0;
+const react_1 = __importStar(require("react"));
+const config_1 = require("../../config");
+const Aligment_1 = require("../Aligment");
+const Input_styles_1 = require("../Input/Input.styles");
+const Icon_1 = require("../Icon");
+const ComponentRoot_1 = require("../ComponentRoot");
+const Numerical = ({ theme, themeVariant = 'default', label, labelPosition = 'top', value, type = 'number', min, max, step = 0.1, name, disabled = false, size = 'md', handleChange, handleSubmit, width, error = false, helperText, placeholder, autoFocus, readOnly = false, prefix, suffix, handleFieldFocus, handleFieldBlur, prefixIcon, suffixIcon, suffixIconAction, prefixIconAction, required = false, optional = false, optionalLabel, withClear, componentWidth = '100%' }) => {
+    const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const inputConfig = componentsConfig.input;
+    const [inputValue, setInputValue] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        setInputValue(value);
+    }, [value]);
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
+    const onChange = (e) => {
+        let returnedValue = calculateNumberValue(e.target.value);
+        setInputValue(returnedValue);
+        handleChange(name, returnedValue);
+    };
+    const onFocus = () => {
+        handleFieldFocus && handleFieldFocus(name);
+    };
+    const onBlurValidation = () => {
+        let validateValue = inputValue;
+        if (isNaN(parseFloat(validateValue.toString()))) {
+            validateValue = min !== undefined ? min : 0;
+        }
+        if (typeof inputValue === 'number') {
+            if (min !== undefined && inputValue < min) {
+                validateValue = min;
+            }
+            else if (max !== undefined && inputValue > max) {
+                validateValue = max;
+            }
+        }
+        handleFieldBlur && handleFieldBlur();
+        handleChange(name, validateValue);
+    };
+    const getFiledType = (filedType) => {
+        return filedType === 'increase' ? 'number' : filedType;
+    };
+    const [inputType] = (0, react_1.useState)(getFiledType(type));
+    const onKeyDown = async (e) => {
+        if (handleSubmit && e.key === 'Enter') {
+            const currentValue = calculateNumberValue(e.currentTarget.value);
+            handleChange(name, currentValue);
+            handleSubmit();
+        }
+    };
+    const increaseValue = (filedValue) => {
+        let newValue = parseFloat((filedValue + step).toFixed(2));
+        if (max !== undefined && newValue >= max) {
+            newValue = max;
+        }
+        setInputValue(newValue);
+        handleChange(name, newValue);
+    };
+    const decreaseValue = (filedValue) => {
+        let newValue = parseFloat((filedValue - step).toFixed(2));
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        setInputValue(newValue);
+        handleChange(name, newValue);
+    };
+    const onSuffixIconClick = () => {
+        if (suffixIconAction) {
+            suffixIconAction(name);
+        }
+    };
+    const onPrefixIconClick = () => {
+        if (prefixIconAction) {
+            prefixIconAction(name);
+        }
+    };
+    const clearValue = () => {
+        setInputValue('');
+        handleChange(name, '');
+    };
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: inputConfig, componentWidth: componentWidth, label: label },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            prefixIcon && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: prefixIcon, size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
+            prefix && !readOnly && (react_1.default.createElement(Input_styles_1.PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
+            react_1.default.createElement(Input_styles_1.InputElement, { inputSize: size, type: inputType, theme: resolvedTheme, inputConfig: inputConfig, error: error, isDisabled: disabled, readOnly: readOnly, placeholder: !readOnly ? placeholder : undefined, name: name, min: min, max: max, step: step, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, onFocus: onFocus, value: inputValue }),
+            suffixIcon && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: suffixIcon, size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onSuffixIconClick })),
+            type === 'increase' && !readOnly && (react_1.default.createElement(Aligment_1.Aligment, { direction: "row", justify: "flex-end" },
+                react_1.default.createElement(Icon_1.Icon, { name: "add", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => increaseValue(inputValue) }),
+                react_1.default.createElement(Icon_1.Icon, { name: "remove", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => decreaseValue(inputValue) }))),
+            withClear &&
+                inputValue &&
+                inputValue?.toString().length > 0 &&
+                !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => clearValue() })),
+            suffix && !readOnly && (react_1.default.createElement(Input_styles_1.PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, error: error, disabled: disabled, readOnly: readOnly }, suffix)))));
+};
+exports.Numerical = Numerical;

package/dist/cjs/components/Numerical/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Numerical = void 0;
+var Numerical_1 = require("./Numerical");
+Object.defineProperty(exports, "Numerical", { enumerable: true, get: function () { return Numerical_1.Numerical; } });

package/dist/cjs/components/OptionsPanel/OptionsPanel.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsPanel = void 0;
+const config_1 = require("../../config");
+const react_1 = __importStar(require("react"));
+const OptionsPanel_styles_1 = require("./OptionsPanel.styles");
+const Icon_1 = require("../Icon");
+const SearchInput_1 = require("../SearchInput");
+const config_2 = require("../../config");
+const styled_components_1 = require("styled-components");
+const OptionsPanel = ({ theme, themeVariant = 'default', options, size = 'md', handleSelect, value, header, footer, placeholder, searchable = false, handleAdd, emptyStateText = config_2.wordbook.searchInput.emptyState, maxRows = 6, }) => {
+    const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const panelConfig = componentsConfig.panel;
+    const [showedOpitions, setShowedOptions] = react_1.default.useState(options);
+    (0, react_1.useEffect)(() => {
+        setShowedOptions(options);
+    }, [options]);
+    const selectOption = (e, selectedValue, disabled) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        handleSelect?.(selectedValue);
+    };
+    const handleSearch = (searchValue) => {
+        if (!searchValue.trim()) {
+            setShowedOptions(options);
+            return;
+        }
+        const filtered = options.filter((option) => option.label.toString().toLowerCase().includes(searchValue.toLowerCase()));
+        setShowedOptions(filtered);
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(OptionsPanel_styles_1.PanelRoot, { theme: resolvedTheme, config: panelConfig },
+            header && (react_1.default.createElement(OptionsPanel_styles_1.PanelHeaderWrapper, { size: size, config: panelConfig }, header)),
+            searchable && (react_1.default.createElement(OptionsPanel_styles_1.PanelSearchWrapper, { size: size, config: panelConfig },
+                react_1.default.createElement(SearchInput_1.SearchInput, { theme: theme, themeVariant: themeVariant, placeholder: placeholder, handleSearch: handleSearch, handleAdd: handleAdd }))),
+            showedOpitions.length > 0 ? (react_1.default.createElement(OptionsPanel_styles_1.PanelOptionsWrapper, { size: size, config: panelConfig, maxRows: maxRows }, showedOpitions.map((option, index) => (react_1.default.createElement(OptionsPanel_styles_1.PanelItem, { key: index, theme: resolvedTheme, config: panelConfig, size: size, isDisabled: option.disabled || false, onClick: (e) => selectOption(e, option.value, option.disabled) },
+                option.label,
+                option.value === value && (react_1.default.createElement(Icon_1.Icon, { name: 'check', size: panelConfig.item.size[size]
+                        .iconSize, color: panelConfig.item.color.selected.iconColor }))))))) : (react_1.default.createElement(OptionsPanel_styles_1.PanelEmptyState, { theme: resolvedTheme, config: panelConfig, size: size }, emptyStateText)),
+            footer && (react_1.default.createElement(OptionsPanel_styles_1.PanelFooterWrapper, { size: size, config: panelConfig }, footer)))));
+};
+exports.OptionsPanel = OptionsPanel;

package/dist/cjs/components/OptionsPanel/OptionsPanel.styles.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelOptionsWrapper = exports.PanelEmptyState = exports.PanelSearchWrapper = exports.PanelFooterWrapper = exports.PanelHeaderWrapper = exports.PanelItem = exports.PanelRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelRoot = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme, config }) => config.panel.color.default};
+`;
+exports.PanelItem = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex:1;
+  justify-content: space-between;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-radius: ${({ config, size }) => config.item.size[size].radius}px;
+  color: ${({ theme, config, isDisabled }) => isDisabled
+    ? config.item.color.disabled.text
+    : config.item.color.default.text};
+  :hover {
+    background-color: ${({ theme, config, isDisabled }) => !isDisabled ? config.item.color.hover.background : 'transparent'};
+    color: ${({ theme, config, isDisabled }) => !isDisabled
+    ? config.item.color.hover.text
+    : config.item.color.disabled.text};
+    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'not-allowed')};
+  }
+`;
+exports.PanelHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-bottom: 1px solid ${({ config }) => config.panel.color.divider};
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  margin-bottom: 6px;
+`;
+exports.PanelFooterWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-top: 1px solid ${({ config }) => config.panel.color.divider};
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  margin-top: 6px;
+`;
+exports.PanelSearchWrapper = styled_components_1.default.div `
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  margin-bottom: 6px;
+`;
+exports.PanelEmptyState = styled_components_1.default.div `
+  height: calc(${({ config, size }) => config.item.size[size].height}px * 2);
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  color: ${({ theme, config }) => config.panel.color.placeholder};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+exports.PanelOptionsWrapper = styled_components_1.default.div `
+  display: block;
+  max-height: calc(
+    ${({ config, size }) => config.item.size[size].height}px * ${({ maxRows }) => maxRows}
+  );
+  overflow-y: auto;
+`;

package/dist/cjs/components/OptionsPanel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./OptionsPanel"), exports);

package/dist/cjs/components/Pagination/Pagination.js

@@ -4,53 +4,63 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
+const config_1 = require("../../config");
+const Pagination_styles_1 = require("./Pagination.styles");
+const Icon_1 = require("../Icon");
 const react_1 = __importDefault(require("react"));
-const Icons_1 = require("../Icons");
-const Theme_1 = require("../../Theme/Theme");
 const Dropdown_1 = require("../Dropdown");
-const Pagination_styles_1 = require("./Pagination.styles");
-const getPageNumbers = (current, total) => {
-    const pages = [];
-    if (total <= 5) {
-        for (let i = 1; i <= total; i++)
-            pages.push(i);
-    }
-    else {
-        if (current <= 3) {
-            pages.push(1, 2, 3, '...', total);
-        }
-        else if (current >= total - 2) {
-            pages.push(1, '...', total - 2, total - 1, total);
+const config_2 = require("../../config");
+const styled_components_1 = require("styled-components");
+const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], dropdownLabel = config_2.wordbook.pagination.dropdownLabel, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const paginationConfig = componentsConfig.pagination;
+    const getPageNumbers = (current, total) => {
+        const pages = [];
+        if (total <= 5) {
+            for (let i = 1; i <= total; i++)
+                pages.push(i);
         }
         else {
-            pages.push(1, '...', current - 1, current, current + 1, '...', total);
+            if (current <= 3) {
+                pages.push(1, 2, 3, '...', total);
+            }
+            else if (current >= total - 2) {
+                pages.push(1, '...', total - 2, total - 1, total);
+            }
+            else {
+                pages.push(1, '...', current - 1, current, current + 1, '...', total);
+            }
         }
-    }
-    return pages;
-};
-const Pagination = ({ currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], }) => {
+        return pages;
+    };
     const pageNumbers = getPageNumbers(currentPage, totalPages);
     const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
-    let dropdownOptions = availableValues.map(size => ({
+    let dropdownOptions = availableValues.map((size) => ({
         value: size.toString(),
         label: size.toString(),
     }));
-    if (!dropdownOptions.some(opt => opt.value === pageSizeStr)) {
+    if (!dropdownOptions.some((opt) => opt.value === pageSizeStr)) {
         dropdownOptions = [
             { value: pageSizeStr, label: pageSizeStr },
             ...dropdownOptions,
         ];
     }
-    return (react_1.default.createElement(Pagination_styles_1.PaginationElement, null,
-        react_1.default.createElement(Icons_1.Icon, { name: 'back', size: 16, iconColor: Theme_1.Theme.colors.text, onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
-        pageNumbers.map((num, idx) => num === '...' ? (react_1.default.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (react_1.default.createElement(Pagination_styles_1.PaginationButton, { key: num, onClick: () => onPageChange(Number(num)), disabled: num === currentPage }, num))),
-        react_1.default.createElement(Icons_1.Icon, { name: 'forward', size: 16, iconColor: Theme_1.Theme.colors.text, onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages }),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(Dropdown_1.Dropdown, { size: "small", label: "Ilo\u015B\u0107 na stron\u0119:", labelPosition: "left", handleSelect: (name, value) => {
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Pagination_styles_1.PaginationRoot, { theme: resolvedTheme, config: paginationConfig },
+            react_1.default.createElement(Pagination_styles_1.PaginationItemWrapper, { theme: resolvedTheme, config: paginationConfig },
+                react_1.default.createElement(Icon_1.Icon, { name: 'back', size: "md", onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
+                pageNumbers.map((num, idx) => num === '...' ? (react_1.default.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (react_1.default.createElement(Pagination_styles_1.PaginationItem, { key: num, onClick: () => onPageChange(Number(num)), isActive: num === currentPage, theme: resolvedTheme, config: paginationConfig }, num))),
+                react_1.default.createElement(Icon_1.Icon, { name: 'forward', size: "md", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages })),
+            react_1.default.createElement(Dropdown_1.Dropdown, { size: "sm", label: dropdownLabel, labelPosition: "left", handleChange: (name, value) => {
                     const num = Number(value);
                     if (!isNaN(num) && num > 0) {
                         onPageSizeChange(num);
                     }
-                }, name: "pageSize", value: String(pageSize), options: dropdownOptions }))));
+                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '70px' }))));
 };
 exports.Pagination = Pagination;