venice-ui 2.4.12 → 3.0.1

package/dist/esm/components/OptionsPanel/OptionsPanel.js

@@ -0,0 +1,42 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React, { useEffect } from 'react';
+import { PanelEmptyState, PanelFooterWrapper, PanelHeaderWrapper, PanelItem, PanelOptionsWrapper, PanelRoot, PanelSearchWrapper, } from './OptionsPanel.styles';
+import { Icon } from '../Icon';
+import { SearchInput } from '../SearchInput';
+import { wordbook } from '../../config';
+import { ThemeProvider } from 'styled-components';
+export const OptionsPanel = ({ theme, themeVariant = 'default', options, size = 'md', handleSelect, value, header, footer, placeholder, searchable = false, handleAdd, emptyStateText = wordbook.searchInput.emptyState, maxRows = 6, }) => {
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const panelConfig = componentsConfig.panel;
+    const [showedOpitions, setShowedOptions] = React.useState(options);
+    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.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(PanelRoot, { theme: resolvedTheme, config: panelConfig },
+            header && (React.createElement(PanelHeaderWrapper, { size: size, config: panelConfig }, header)),
+            searchable && (React.createElement(PanelSearchWrapper, { size: size, config: panelConfig },
+                React.createElement(SearchInput, { theme: theme, themeVariant: themeVariant, placeholder: placeholder, handleSearch: handleSearch, handleAdd: handleAdd }))),
+            showedOpitions.length > 0 ? (React.createElement(PanelOptionsWrapper, { size: size, config: panelConfig, maxRows: maxRows }, showedOpitions.map((option, index) => (React.createElement(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.createElement(Icon, { name: 'check', size: panelConfig.item.size[size]
+                        .iconSize, color: panelConfig.item.color.selected.iconColor }))))))) : (React.createElement(PanelEmptyState, { theme: resolvedTheme, config: panelConfig, size: size }, emptyStateText)),
+            footer && (React.createElement(PanelFooterWrapper, { size: size, config: panelConfig }, footer)))));
+};

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

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+export const PanelRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme, config }) => config.panel.color.default};
+`;
+export const PanelItem = styled.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')};
+  }
+`;
+export const PanelHeaderWrapper = styled.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;
+`;
+export const PanelFooterWrapper = styled.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;
+`;
+export const PanelSearchWrapper = styled.div `
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  margin-bottom: 6px;
+`;
+export const PanelEmptyState = styled.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;
+`;
+export const PanelOptionsWrapper = styled.div `
+  display: block;
+  max-height: calc(
+    ${({ config, size }) => config.item.size[size].height}px * ${({ maxRows }) => maxRows}
+  );
+  overflow-y: auto;
+`;

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

@@ -0,0 +1 @@
+export * from './OptionsPanel';

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

@@ -1,49 +1,59 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { PaginationItem, PaginationItemWrapper, PaginationRoot, } from './Pagination.styles';
+import { Icon } from '../Icon';
 import React from 'react';
-import { Icon } from '../Icons';
-import { Theme } from '../../Theme/Theme';
 import { Dropdown } from '../Dropdown';
-import { PaginationElement, PaginationButton } from './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);
+import { wordbook } from '../../config';
+import { ThemeProvider } from 'styled-components';
+export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], dropdownLabel = wordbook.pagination.dropdownLabel, }) => {
+    const resolvedThemeData = 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;
-};
-export 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.createElement(PaginationElement, null,
-        React.createElement(Icon, { name: 'back', size: 16, iconColor: Theme.colors.text, onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
-        pageNumbers.map((num, idx) => num === '...' ? (React.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (React.createElement(PaginationButton, { key: num, onClick: () => onPageChange(Number(num)), disabled: num === currentPage }, num))),
-        React.createElement(Icon, { name: 'forward', size: 16, iconColor: Theme.colors.text, onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages }),
-        React.createElement("div", null,
-            React.createElement(Dropdown, { size: "small", label: "Ilo\u015B\u0107 na stron\u0119:", labelPosition: "left", handleSelect: (name, value) => {
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(PaginationRoot, { theme: resolvedTheme, config: paginationConfig },
+            React.createElement(PaginationItemWrapper, { theme: resolvedTheme, config: paginationConfig },
+                React.createElement(Icon, { name: 'back', size: "md", onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
+                pageNumbers.map((num, idx) => num === '...' ? (React.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (React.createElement(PaginationItem, { key: num, onClick: () => onPageChange(Number(num)), isActive: num === currentPage, theme: resolvedTheme, config: paginationConfig }, num))),
+                React.createElement(Icon, { name: 'forward', size: "md", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages })),
+            React.createElement(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' }))));
 };

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

@@ -1,24 +1,50 @@
 import styled from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-export const PaginationElement = styled.div `
-  margin-top: 16px;
+export const PaginationRoot = styled.div `
   display: flex;
-  justify-content: right;
+   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  height: ${({ theme, config }) => config.size.paginationHeight}px;
+  gap: ${({ theme, config }) => config.size.elementGap}px;
 `;
-export const PaginationButton = styled.button `
-  font-weight: normal;
-  background: transparent;
+export const PaginationItemWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content:  flex-start;
+  width:100%;
+  gap: ${({ theme, config }) => config.size.itemGap}px;
+`;
+export const PaginationItem = styled.button `Ś
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ theme, config }) => config.size.height}px;
+  width: ${({ theme, config }) => config.size.width}px;
+  background-color: ${({ theme, config, disabled, isActive }) => disabled
+    ? config.color.disabled.background
+    : isActive
+        ? config.color.active.background
+        : config.color.default.background};
+  color: ${({ theme, config, disabled, isActive }) => disabled
+    ? config.color.disabled.text
+    : isActive
+        ? config.color.active.text
+        : config.color.default.text};
   border: none;
-  cursor: pointer;
-  padding: ${Theme.padding.s}
-  border-radius: 4px;
-  color: ${Theme.colors.text};
-  margin: 0 6px;
-  &:disabled {
-    background: ${Theme.colors.primary};
-    color: ${Theme.colors.white};
-    cursor: not-allowed;
-    border-radius: 4px;
-  }
+  border-radius: ${({ theme, config }) => config.size.borderRadius}px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  &:hover {
+  color: ${({ theme, config, disabled, isActive }) => disabled
+    ? config.color.disabled.text
+    : isActive
+        ? config.color.hover.activeTest
+        : config.color.hover.text};
+
+`;
+export const PaginationDropdownWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme, config }) => config.size.elementGap}px;
 `;

package/dist/esm/components/SearchInput/SearchInput.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+import { SearchInputElement, SearchWrapperRoot } from './SearchInput.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { wordbook } from '../../config';
+import { Icon } from '../Icon';
+const SEARCH_DEBOUNCE_MS = 300;
+export const SearchInput = ({ theme, themeVariant = 'default', placeholder = wordbook.searchInput.placeholder, handleSearch, handleAdd, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const config = componentsConfig.searchInput;
+    const [inputValue, setInputValue] = useState('');
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    useEffect(() => {
+        if (!handleSearch) {
+            return;
+        }
+        const debounceTimeout = setTimeout(() => {
+            handleSearch(inputValue);
+        }, SEARCH_DEBOUNCE_MS);
+        return () => clearTimeout(debounceTimeout);
+    }, [inputValue, handleSearch]);
+    const clickAdd = () => {
+        const trimmedValue = inputValue.trim();
+        if (handleAdd && trimmedValue.length > 0) {
+            handleAdd(trimmedValue);
+            setInputValue('');
+        }
+    };
+    const clear = () => {
+        setInputValue('');
+        if (handleSearch) {
+            handleSearch('');
+        }
+    };
+    return (React.createElement(SearchWrapperRoot, { theme: resolvedTheme, config: config },
+        React.createElement(Icon, { name: "search", size: "md", background: "transparent", hoverBackground: "transparent" }),
+        React.createElement(SearchInputElement, { config: config, theme: resolvedTheme, placeholder: placeholder, value: inputValue, onChange: handleInputChange }),
+        inputValue.length > 0 && (React.createElement(Icon, { name: "close", size: "md", background: "transparent", hoverBackground: "transparent", onClick: clear })),
+        handleAdd && (React.createElement(Icon, { name: "add_circle", size: "md", background: "transparent", hoverBackground: "transparent", onClick: clickAdd }))));
+};

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

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+export const SearchWrapperRoot = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  height: ${({ config }) => config.size.height}px;
+  border-bottom: 1px solid ${({ theme, config }) => config.color.default.border};
+  background: ${({ theme, config }) => config.color.default.background};
+  ${({ config, isActive }) => `
+    &:hover {
+      border-color: ${isActive ? config.color.focus.border : config.color.hover.border};
+      background: ${config.color.hover.background};
+    }
+    `}
+  &:focus-within {
+    border-color: ${(p) => p.config.color.focus.border};
+    background: ${(p) => p.config.color.focus.background};
+  }
+`;
+export const SearchInputElement = styled.input `
+ width: 100%;
+  border: none;
+  &::placeholder {
+    color: ${({ theme, config }) => config.color.default.placeholder};
+    opacity: 1;
+  }
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline: none;
+  height: ${({ config }) => config.size.height}px;
+  font-size: ${({ config }) => config.size.fontSize}px;
+  line-height: ${({ config }) => config.size.lineHeight}px;
+  padding: 0 ${({ config }) => config.size.paddingX}px};
+  color: ${({ theme, config }) => config.color.default.text};
+  
+  `;

package/dist/esm/components/SearchInput/index.js

@@ -0,0 +1 @@
+export * from './SearchInput';

package/dist/esm/components/Section/Section.js

@@ -1,12 +1,19 @@
-import { TextSubHeader } from '../Typography';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React from 'react';
-import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
-import { mainTheme } from '../../Theme';
+import { wordbook } from '../../config';
+import { SectionContent, SectionRoot, SectionTitle } from './Section.styles';
 import { Button } from '../Button';
-export const Section = ({ title, children, titlePosition = 'left', noHorizontalPadding = false, noTopPadding = false, theme = mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
-    return (React.createElement(SectionElement, { backgroundColor: backgroundColor, noTopPadding: noTopPadding },
-        title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noHorizontalPadding, withAction: titlePosition === 'left' && !!action },
-            React.createElement(TextSubHeader, null, title),
-            titlePosition === 'left' && !!action && (React.createElement(Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
-        React.createElement(SectionContent, { noPadding: noHorizontalPadding }, children)));
+export const Section = ({ theme, themeVariant = 'default', title, titlePosition = 'left', withoutPadding = false, backgroundColor, children, action, actionLabel = wordbook.section.action, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const sectionConfig = componentsConfig.section;
+    return (React.createElement(SectionRoot, { backgroundColor: backgroundColor, withoutPadding: withoutPadding, theme: resolvedTheme, config: sectionConfig },
+        title && (React.createElement(SectionTitle, { titlePosition: titlePosition, theme: resolvedTheme, config: sectionConfig, withAction: titlePosition === 'left' && !!action },
+            title,
+            titlePosition === 'left' && !!action && (React.createElement(Button, { text: actionLabel, onClick: action, size: "md", mode: "ghost" })))),
+        React.createElement(SectionContent, { theme: resolvedTheme, config: sectionConfig }, children)));
 };

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

@@ -1,28 +1,29 @@
 import styled from 'styled-components';
-import { Theme } from '../../Theme';
-export const SectionElement = styled.div `
+export const SectionRoot = styled.div `
   width: 100%;
   box-sizing: border-box;
   overflow: auto;
-  padding: ${Theme.padding.l} 0;
-  background-color: ${(p) => p.backgroundColor};
-  ${(p) => p.noTopPadding && `padding-top: 0;`}
+  background-color: ${({ config, backgroundColor }) => backgroundColor || config.color.background};
+  padding: ${({ config, withoutPadding }) => withoutPadding ? 0 : `${config.size.paddingY}px ${config.size.paddingX}px`};
 `;
 export const SectionTitle = styled.div `
   width: 100%;
-  padding: 0 ${(p) => (p.noPadding ? 0 : Theme.padding.l)} ${Theme.padding.l}
-    ${(p) => (p.noPadding ? 0 : Theme.padding.l)};
-  text-align: ${(p) => p.titlePosition};
+  text-align: ${({ titlePosition }) => titlePosition};
   box-sizing: border-box;
-  ${(p) => p.withAction &&
+  margin-bottom: ${({ titlePosition, config }) => config.size.header.bottomMargin}px;
+  color: ${({ config }) => config.color.header.color};
+  font-size: ${({ config }) => config.size.header.fontSize}px;
+  line-height: ${({ config }) => config.size.header.lineHeight}px;
+
+  ${({ withAction, config }) => withAction &&
     `display:flex;
   align-items: center;
   justify-content: space-between;
-  `};
+ 
+   `};
 `;
 export const SectionContent = styled.div `
   box-sizing: border-box;
   width: 100%;
   display: flex;
-  padding: 0 ${(p) => (p.noPadding ? 0 : Theme.padding.l)};
 `;

package/dist/esm/components/Section/index.js

@@ -1 +1,2 @@
 export * from './Section';
+export * from './Section.styles';

package/dist/esm/components/Selector/Selector.js

@@ -1,14 +1,20 @@
+import { ComponentRoot } from '../ComponentRoot';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React, { useState } from 'react';
-import { Aligment } from '../Aligment';
-import { mainTheme } from '../../Theme/Theme';
-import { InputErrorMsg, InputLabelElement } from '../Input';
-import { Icon } from '../Icons';
-import { SelectorAction, SelectorElement, SelectorValue, SelectorValueWrapper, } from './Selector.styles';
+import { wordbook } from '../../config';
+import { SelectorPill, SelectorTriger } from './Selector.styles';
 import { Modal } from '../Modal';
-import { PanelOption, setIconShiftSize } from '../common';
-import { ThemeProvider } from 'styled-components';
-import { Text } from '../Typography';
-export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
+import { OptionsPanel } from '../OptionsPanel';
+import { createPortal } from 'react-dom';
+import { Icon } from '../Icon';
+export const Selector = ({ theme, themeVariant = 'default', label, labelPosition = 'top', value, name, disabled = false, size = 'md', handleSelect, handleClear, width, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, options, placeholder = wordbook.selector.placeholder, emptyStateText = wordbook.selector.emptyPanelMsg, searchable = false, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const selectorConfig = componentsConfig.selector;
     const [open, toogleOpen] = useState(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -22,14 +28,11 @@ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size
             toogleOpen(true);
         }
     };
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-            React.createElement(SelectorElement, null,
-                value ? (React.createElement(SelectorValueWrapper, { size: size, isDisabled: disabled },
-                    React.createElement(SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
-                    React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconShiftSize(size), isDisabled: disabled }))) : (React.createElement(React.Fragment, null,
-                    React.createElement(SelectorAction, { size: size, isDisabled: disabled, onClick: handleOpen }, optionsPanelTitle))),
-                open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
-                error && React.createElement(InputErrorMsg, null, error)))));
+    return (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: selectorConfig, label: label, noBorder: true },
+        value ? (React.createElement(SelectorPill, { theme: resolvedTheme, config: selectorConfig, size: size },
+            getLabelForValue(value),
+            React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: selectorConfig.size[size].iconSize, color: "currentColor", hoverBackground: "transparent" }))) : (React.createElement(SelectorTriger, { theme: resolvedTheme, config: selectorConfig, size: size, onClick: handleOpen, isDisabled: disabled }, placeholder)),
+        open &&
+            createPortal(React.createElement(Modal, { title: placeholder, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true },
+                React.createElement(OptionsPanel, { options: options, emptyStateText: emptyStateText, handleSelect: selectOption, searchable: searchable })), document.body)));
 };

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

@@ -1,58 +1,30 @@
 import styled from 'styled-components';
-import { setSelecAreaSize, setSelectorSize } from '../common';
-import { Theme } from '../../Theme/Theme';
-export const SelectorElement = styled.div `
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
+export const SelectorTriger = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: auto;
+    height: ${({ config, size }) => config.size[size].height}px;
+    color: ${({ theme, config, isDisabled }) => isDisabled ? config.color.disabled.text : config.color.default.text};
+    font-size: ${({ config, size }) => config.size[size].fontSize}px;
+    line-height: ${({ config, size }) => config.size[size].lineHeight}px;
+    text-decoration: underline;
+    cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+    pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
+    border-radius: ${({ config, size }) => config.size[size].radius}px;
+    :hover{
+    color: ${({ theme, config, isDisabled }) => isDisabled ? config.color.disabled.text : config.color.hover.text};
 `;
-export const SelectorValue = styled.div `
-  box-sizing: border-box;
-
-  width: 100%;
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: ${(p) => p.theme.textColor};
-  &:hover {
-    color: ${(p) => p.theme.action};
-  }
-  ${(p) => p.isDisabled &&
-    `
-      cursor:not-allowed;
-      background-color: ${p.theme.inputDisabledBackground};
-      color: ${p.theme.inputDisabledTextColor};
-    `}
-`;
-export const SelectorAction = styled.div `
-  ${(p) => setSelectorSize(p.size)}
-  color:${(p) => p.theme.optionActiveColor};
-  cursor: pointer;
-  text-decoration: underline;
-
-  ${(p) => p.isDisabled &&
-    `
-      cursor:not-allowed;
-      color: ${p.theme.inputDisabledTextColor};
-
-    `}
-`;
-export const SelectorValueWrapper = styled.div `
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  background-color: ${(p) => p.theme.selector};
-  border-radius: ${Theme.borderRadius.m};
-  gap: 4px;
-  ${(p) => setSelecAreaSize(p.size)}
-  ${(p) => p.isDisabled &&
-    `
-      cursor:not-allowed;
-      background-color: ${p.theme.inputDisabledBackground};
-
-    `}
+export const SelectorPill = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    background: ${({ theme, config }) => config.color.default.pillBackground};
+    color: ${({ theme, config }) => config.color.default.pillText};
+    font-size: ${({ config, size }) => config.size[size].fontSize}px;
+    line-height: ${({ config, size }) => config.size[size].lineHeight}px;
+    border-radius: ${({ config, size }) => config.size[size].radius}px;
+    padding: 0 ${({ config, size }) => config.size[size].paddingX}px;
+    height: ${({ config, size }) => config.size[size].height}px;
 `;