venice-ui 3.0.24 → 3.0.27

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ const config_1 = require("../../config");
 const ComponentRoot_1 = require("../ComponentRoot");
 const Checkbox_styles_1 = require("./Checkbox.styles");
 const IconsPath_1 = require("../Icon/IconsPath");
-const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, }) => {
+const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -26,8 +26,8 @@ const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'to
             handleClick(!value);
         }
     };
-    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
-        react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled, id: 'dupa' },
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
+        react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
             react_1.default.createElement(Checkbox_styles_1.CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (react_1.default.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 react_1.default.createElement("path", { d: iconName, fill: isDisabled
                         ? checkboxConfig.color.disabled.icon

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -119,11 +119,11 @@ const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md', widt
     }, [open, handleFieldBlur]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         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: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
-            react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef },
+            react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef, isDisabled: disabled, config: dropdonwConfig, onClick: handleToggleOpen },
                 prefixIcon && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: prefixIcon, size: dropdonwConfig.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: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
                 react_1.default.createElement(Dropdown_styles_1.DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
-                !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
+                !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: 'transparent', hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
         open &&
             (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig, zIndex: zIndex },
                 react_1.default.createElement(OptionsPanel_1.OptionsPanel, { options: options, size: size, handleSelect: handleSelectOption, value: value, searchable: searchable, placeholder: placeholder, theme: theme, themeVariant: themeVariant, maxRows: maxRows, zIndex: zIndex, handleAdd: handleAdd })), document.body)));

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

@@ -36,6 +36,8 @@ exports.TrigerWrapper = styled_components_1.default.div `
   align-items: center;
   width: 100%;
   min-width: 0;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  background: ${({ config, isDisabled }) => isDisabled ? config.color.disabled.bg : 'transparent'};
 `;
 exports.DropdownMenuPanel = styled_components_1.default.div `
   box-sizing: border-box;

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -152,7 +152,7 @@ const DropdownMenu = ({ size = 'md', iconName = 'more_vert', theme, themeVariant
     const dropdownMenuConfig = componentsConfig.dropdownMenu;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
         react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuRoot, null,
-            react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
+            react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef, config: dropdownMenuConfig }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
         open &&
             (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdownMenuConfig },
                 react_1.default.createElement(ActionPanel_1.ActionPanel, { options: options, size: size, theme: theme, themeVariant: themeVariant, maxRows: 5, zIndex: zIndex, handleClick: handleClick, header: header, footer: footer })), document.body)));

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

@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
 const Dropdown_1 = require("../Dropdown");
 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], label = config_2.wordbook.pagination.dropdownLabel, }) => {
+const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = config_2.wordbook.pagination.dropdownLabel, zIndex }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -61,6 +61,6 @@ const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages,
                     if (!isNaN(num) && num > 0) {
                         onPageSizeChange(num);
                     }
-                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px' }))));
+                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px', zIndex: zIndex }))));
 };
 exports.Pagination = Pagination;

package/dist/cjs/components/Table/Table.js

@@ -47,7 +47,7 @@ const Cell_1 = require("./Cell");
 const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -161,7 +161,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
                                     ? initialElementsRef.current
                                     : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
                         pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
-                            react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters })))))),
+                            react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
                 react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
                     react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         react_1.default.createElement(Table_styles_1.TableHead, null,

package/dist/cjs/components/Toggle/Toggle.js

@@ -21,7 +21,7 @@ const Toggle = ({ name, value = true, size = 'md', label, labelPosition = 'top',
             handleClick(!value);
         }
     };
-    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: `${toggleConfig.size[size].width}  px` },
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${toggleConfig.size[size].width}px` },
         react_1.default.createElement(Toggle_styles_1.ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
             react_1.default.createElement(Toggle_styles_1.ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
                 react_1.default.createElement(Toggle_styles_1.TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));

package/dist/cjs/config/config.js

@@ -369,6 +369,7 @@ const createComponentsConfig = (theme = 'default') => {
                     helper: Theme.text.error,
                 },
                 disabled: {
+                    border: Theme.border.disabled,
                     background: Theme.surface.disabled,
                     text: Theme.text.disabled,
                     cursor: 'not-allowed',

package/dist/esm/components/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import { resolveThemeWithComponentsConfig } from '../../config';
 import { ComponentRoot } from '../ComponentRoot';
 import { CheckboxBox, CheckboxRoot } from './Checkbox.styles';
 import { iconsPath } from '../Icon/IconsPath';
-export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, }) => {
+export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -20,8 +20,8 @@ export const Checkbox = ({ name, value = false, size = 'md', label, labelPositio
             handleClick(!value);
         }
     };
-    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
-        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled, id: 'dupa' },
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
+        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
             React.createElement(CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (React.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 React.createElement("path", { d: iconName, fill: isDisabled
                         ? checkboxConfig.color.disabled.icon

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,7 +1,7 @@
 import { resolveThemeWithComponentsConfig } from '../../config';
 import React, { useEffect, useRef, useState } from 'react';
 import { ComponentRoot } from '../ComponentRoot';
-import { DropdownMenuPanel, DropdownValue, TrigerWrapper } from './Dropdown.styles';
+import { DropdownMenuPanel, DropdownValue, TrigerWrapper, } from './Dropdown.styles';
 import { wordbook } from '../../config';
 import { Icon } from '../Icon';
 import { PrefixWrapper } from '../Input/Input.styles';
@@ -83,11 +83,11 @@ export const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md
     }, [open, handleFieldBlur]);
     return (React.createElement(React.Fragment, null,
         React.createElement(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: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
-            React.createElement(TrigerWrapper, { ref: triggerRef },
+            React.createElement(TrigerWrapper, { ref: triggerRef, isDisabled: disabled, config: dropdonwConfig, onClick: handleToggleOpen },
                 prefixIcon && !readOnly && (React.createElement(Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
                 prefix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
                 React.createElement(DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
-                !readOnly && (React.createElement(Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
+                !readOnly && (React.createElement(Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: 'transparent', hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
         open &&
             createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig, zIndex: zIndex },
                 React.createElement(OptionsPanel, { options: options, size: size, handleSelect: handleSelectOption, value: value, searchable: searchable, placeholder: placeholder, theme: theme, themeVariant: themeVariant, maxRows: maxRows, zIndex: zIndex, handleAdd: handleAdd })), document.body)));

package/dist/esm/components/Dropdown/Dropdown.styles.js

@@ -30,6 +30,8 @@ export const TrigerWrapper = styled.div `
   align-items: center;
   width: 100%;
   min-width: 0;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  background: ${({ config, isDisabled }) => isDisabled ? config.color.disabled.bg : 'transparent'};
 `;
 export const DropdownMenuPanel = styled.div `
   box-sizing: border-box;

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -116,7 +116,7 @@ export const DropdownMenu = ({ size = 'md', iconName = 'more_vert', theme, theme
     const dropdownMenuConfig = componentsConfig.dropdownMenu;
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
         React.createElement(DropdownMenuRoot, null,
-            React.createElement(TrigerWrapper, { ref: triggerRef }, textMode ? (React.createElement(DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (React.createElement(Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
+            React.createElement(TrigerWrapper, { ref: triggerRef, config: dropdownMenuConfig }, textMode ? (React.createElement(DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (React.createElement(Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
         open &&
             createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdownMenuConfig },
                 React.createElement(ActionPanel, { options: options, size: size, theme: theme, themeVariant: themeVariant, maxRows: 5, zIndex: zIndex, handleClick: handleClick, header: header, footer: footer })), document.body)));

package/dist/esm/components/Pagination/Pagination.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { Dropdown } from '../Dropdown';
 import { wordbook } from '../../config';
 import { ThemeProvider } from 'styled-components';
-export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = wordbook.pagination.dropdownLabel, }) => {
+export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = wordbook.pagination.dropdownLabel, zIndex }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -55,5 +55,5 @@ export const Pagination = ({ theme, themeVariant = 'default', currentPage, total
                     if (!isNaN(num) && num > 0) {
                         onPageSizeChange(num);
                     }
-                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px' }))));
+                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px', zIndex: zIndex }))));
 };

package/dist/esm/components/Table/Table.js

@@ -11,7 +11,7 @@ import { Cell } from './Cell';
 export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -125,7 +125,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
                                     ? initialElementsRef.current
                                     : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
                         pagination && (React.createElement(HeaderSection, { right: true },
-                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters })))))),
+                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
                 React.createElement(TableContentWrapper, { componentHeight: tableHeight },
                     React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         React.createElement(TableHead, null,

package/dist/esm/components/Toggle/Toggle.js

@@ -15,7 +15,7 @@ export const Toggle = ({ name, value = true, size = 'md', label, labelPosition =
             handleClick(!value);
         }
     };
-    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: `${toggleConfig.size[size].width}  px` },
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${toggleConfig.size[size].width}px` },
         React.createElement(ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
             React.createElement(ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
                 React.createElement(TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));

package/dist/esm/config/config.js

@@ -364,6 +364,7 @@ export const createComponentsConfig = (theme = 'default') => {
                     helper: Theme.text.error,
                 },
                 disabled: {
+                    border: Theme.border.disabled,
                     background: Theme.surface.disabled,
                     text: Theme.text.disabled,
                     cursor: 'not-allowed',

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -7,6 +7,7 @@ interface ICheckboxProps {
     size?: InputSize;
     label?: string;
     labelPosition?: LabelPosition;
+    width?: string;
     theme?: AppTheme;
     themeVariant?: ThemeName;
     handleClick: (value: boolean) => void;
@@ -18,6 +19,7 @@ interface ICheckboxProps {
     required?: boolean;
     optional?: boolean;
     optionalLabel?: string;
+    componentWidth?: string;
 }
 export declare const Checkbox: FC<ICheckboxProps>;
 export {};

package/dist/types/components/Dropdown/Dropdown.styles.d.ts

@@ -10,7 +10,11 @@ interface IDropdownValueProps {
     readOnly?: boolean;
 }
 export declare const DropdownValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IDropdownValueProps, never>;
-export declare const TrigerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ITrigerWrapperProps {
+    isDisabled?: boolean;
+    config: any;
+}
+export declare const TrigerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITrigerWrapperProps, never>;
 interface IDropdownMenuPanelProps {
     theme: AppTheme;
     config: any;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -10,6 +10,7 @@ interface IPaginationProps {
     onPageSizeChange: (size: number) => void;
     availableValues?: number[];
     label?: string;
+    zIndex?: number;
 }
 export declare const Pagination: FC<IPaginationProps>;
 export {};

package/dist/types/components/Table/Table.d.ts

@@ -22,6 +22,7 @@ interface ITableProps {
     paginationLabel?: IFilterLabels;
     calendarLabels?: IFilterLabels;
     calendarLocaleLabels?: ICalendarLocaleLabels;
+    paginationZIndex?: number;
 }
 export interface ITableHeaderProps {
     name: string;

package/dist/types/config/config.d.ts

@@ -372,6 +372,7 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                 helper: "#DC2626";
             };
             disabled: {
+                border: "#E5E7EB";
                 background: "#F3F4F6";
                 text: "#9CA3AF";
                 cursor: string;
@@ -1694,6 +1695,7 @@ export declare const componentsConfig: {
                 helper: "#DC2626";
             };
             disabled: {
+                border: "#E5E7EB";
                 background: "#F3F4F6";
                 text: "#9CA3AF";
                 cursor: string;
@@ -3160,6 +3162,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                     helper: "#DC2626";
                 };
                 disabled: {
+                    border: "#E5E7EB";
                     background: "#F3F4F6";
                     text: "#9CA3AF";
                     cursor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.24",
+  "version": "3.0.27",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",