venice-ui 2.4.13 → 3.0.2

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

@@ -3,28 +3,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationButton = exports.PaginationElement = void 0;
+exports.PaginationDropdownWrapper = exports.PaginationItem = exports.PaginationItemWrapper = exports.PaginationRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme/Theme");
-exports.PaginationElement = styled_components_1.default.div `
-  margin-top: 16px;
+exports.PaginationRoot = styled_components_1.default.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;
 `;
-exports.PaginationButton = styled_components_1.default.button `
-  font-weight: normal;
-  background: transparent;
+exports.PaginationItemWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content:  flex-start;
+  width:100%;
+  gap: ${({ theme, config }) => config.size.itemGap}px;
+`;
+exports.PaginationItem = styled_components_1.default.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_1.Theme.padding.s}
-  border-radius: 4px;
-  color: ${Theme_1.Theme.colors.text};
-  margin: 0 6px;
-  &:disabled {
-    background: ${Theme_1.Theme.colors.primary};
-    color: ${Theme_1.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};
+
+`;
+exports.PaginationDropdownWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme, config }) => config.size.elementGap}px;
 `;

package/dist/cjs/components/SearchInput/SearchInput.js

@@ -0,0 +1,83 @@
+"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.SearchInput = void 0;
+const react_1 = __importStar(require("react"));
+const SearchInput_styles_1 = require("./SearchInput.styles");
+const config_1 = require("../../config");
+const config_2 = require("../../config");
+const Icon_1 = require("../Icon");
+const SEARCH_DEBOUNCE_MS = 300;
+const SearchInput = ({ theme, themeVariant = 'default', placeholder = config_2.wordbook.searchInput.placeholder, handleSearch, handleAdd, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const config = componentsConfig.searchInput;
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    (0, react_1.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_1.default.createElement(SearchInput_styles_1.SearchWrapperRoot, { theme: resolvedTheme, config: config },
+        react_1.default.createElement(Icon_1.Icon, { name: "search", size: "md", background: "transparent", hoverBackground: "transparent" }),
+        react_1.default.createElement(SearchInput_styles_1.SearchInputElement, { config: config, theme: resolvedTheme, placeholder: placeholder, value: inputValue, onChange: handleInputChange }),
+        inputValue.length > 0 && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: "md", background: "transparent", hoverBackground: "transparent", onClick: clear })),
+        handleAdd && (react_1.default.createElement(Icon_1.Icon, { name: "add_circle", size: "md", background: "transparent", hoverBackground: "transparent", onClick: clickAdd }))));
+};
+exports.SearchInput = SearchInput;

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

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInputElement = exports.SearchWrapperRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SearchWrapperRoot = styled_components_1.default.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};
+  }
+`;
+exports.SearchInputElement = styled_components_1.default.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/cjs/components/SearchInput/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("./SearchInput"), exports);

package/dist/cjs/components/Section/Section.js

@@ -4,16 +4,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
-const Typography_1 = require("../Typography");
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
+const config_2 = require("../../config");
 const Section_styles_1 = require("./Section.styles");
-const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
-const Section = ({ title, children, titlePosition = 'left', noHorizontalPadding = false, noTopPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
-    return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor, noTopPadding: noTopPadding },
-        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noHorizontalPadding, withAction: titlePosition === 'left' && !!action },
-            react_1.default.createElement(Typography_1.TextSubHeader, null, title),
-            titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
-        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noHorizontalPadding }, children)));
+const Section = ({ theme, themeVariant = 'default', title, titlePosition = 'left', withoutPadding = false, backgroundColor, children, action, actionLabel = config_2.wordbook.section.action, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const sectionConfig = componentsConfig.section;
+    return (react_1.default.createElement(Section_styles_1.SectionRoot, { backgroundColor: backgroundColor, withoutPadding: withoutPadding, theme: resolvedTheme, config: sectionConfig },
+        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, theme: resolvedTheme, config: sectionConfig, withAction: titlePosition === 'left' && !!action },
+            title,
+            titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "md", mode: "ghost" })))),
+        react_1.default.createElement(Section_styles_1.SectionContent, { theme: resolvedTheme, config: sectionConfig }, children)));
 };
 exports.Section = Section;

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

@@ -3,32 +3,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionContent = exports.SectionTitle = exports.SectionElement = void 0;
+exports.SectionContent = exports.SectionTitle = exports.SectionRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-exports.SectionElement = styled_components_1.default.div `
+exports.SectionRoot = styled_components_1.default.div `
   width: 100%;
   box-sizing: border-box;
   overflow: auto;
-  padding: ${Theme_1.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`};
 `;
 exports.SectionTitle = styled_components_1.default.div `
   width: 100%;
-  padding: 0 ${(p) => (p.noPadding ? 0 : Theme_1.Theme.padding.l)} ${Theme_1.Theme.padding.l}
-    ${(p) => (p.noPadding ? 0 : Theme_1.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;
-  `};
+ 
+   `};
 `;
 exports.SectionContent = styled_components_1.default.div `
   box-sizing: border-box;
   width: 100%;
   display: flex;
-  padding: 0 ${(p) => (p.noPadding ? 0 : Theme_1.Theme.padding.l)};
 `;

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Section"), exports);
+__exportStar(require("./Section.styles"), exports);

package/dist/cjs/components/Selector/Selector.js

@@ -15,26 +15,42 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __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.Selector = void 0;
+const ComponentRoot_1 = require("../ComponentRoot");
+const config_1 = require("../../config");
 const react_1 = __importStar(require("react"));
-const Aligment_1 = require("../Aligment");
-const Theme_1 = require("../../Theme/Theme");
-const Input_1 = require("../Input");
-const Icons_1 = require("../Icons");
+const config_2 = require("../../config");
 const Selector_styles_1 = require("./Selector.styles");
 const Modal_1 = require("../Modal");
-const common_1 = require("../common");
-const styled_components_1 = require("styled-components");
-const Typography_1 = require("../Typography");
-const Selector = ({ theme = Theme_1.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, }) => {
+const OptionsPanel_1 = require("../OptionsPanel");
+const react_dom_1 = require("react-dom");
+const Icon_1 = require("../Icon");
+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 = config_2.wordbook.selector.placeholder, emptyStateText = config_2.wordbook.selector.emptyPanelMsg, searchable = false, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const selectorConfig = componentsConfig.selector;
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -48,15 +64,12 @@ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', siz
             toogleOpen(true);
         }
     };
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-            react_1.default.createElement(Selector_styles_1.SelectorElement, null,
-                value ? (react_1.default.createElement(Selector_styles_1.SelectorValueWrapper, { size: size, isDisabled: disabled },
-                    react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
-                    react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconShiftSize)(size), isDisabled: disabled }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Selector_styles_1.SelectorAction, { size: size, isDisabled: disabled, onClick: handleOpen }, optionsPanelTitle))),
-                open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
-                error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
+    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: selectorConfig, label: label, noBorder: true },
+        value ? (react_1.default.createElement(Selector_styles_1.SelectorPill, { theme: resolvedTheme, config: selectorConfig, size: size },
+            getLabelForValue(value),
+            react_1.default.createElement(Icon_1.Icon, { name: 'close', onClick: () => handleClear(), size: selectorConfig.size[size].iconSize, color: "currentColor", hoverBackground: "transparent" }))) : (react_1.default.createElement(Selector_styles_1.SelectorTriger, { theme: resolvedTheme, config: selectorConfig, size: size, onClick: handleOpen, isDisabled: disabled }, placeholder)),
+        open &&
+            (0, react_dom_1.createPortal)(react_1.default.createElement(Modal_1.Modal, { title: placeholder, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true },
+                react_1.default.createElement(OptionsPanel_1.OptionsPanel, { options: options, emptyStateText: emptyStateText, handleSelect: selectOption, searchable: searchable })), document.body)));
 };
 exports.Selector = Selector;

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

@@ -3,62 +3,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectorValueWrapper = exports.SelectorAction = exports.SelectorValue = exports.SelectorElement = void 0;
+exports.SelectorPill = exports.SelectorTriger = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const common_1 = require("../common");
-const Theme_1 = require("../../Theme/Theme");
-exports.SelectorElement = styled_components_1.default.div `
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
+exports.SelectorTriger = styled_components_1.default.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};
 `;
-exports.SelectorValue = styled_components_1.default.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};
-    `}
-`;
-exports.SelectorAction = styled_components_1.default.div `
-  ${(p) => (0, common_1.setSelectorSize)(p.size)}
-  color:${(p) => p.theme.optionActiveColor};
-  cursor: pointer;
-  text-decoration: underline;
-
-  ${(p) => p.isDisabled &&
-    `
-      cursor:not-allowed;
-      color: ${p.theme.inputDisabledTextColor};
-
-    `}
-`;
-exports.SelectorValueWrapper = styled_components_1.default.div `
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  background-color: ${(p) => p.theme.selector};
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  gap: 4px;
-  ${(p) => (0, common_1.setSelecAreaSize)(p.size)}
-  ${(p) => p.isDisabled &&
-    `
-      cursor:not-allowed;
-      background-color: ${p.theme.inputDisabledBackground};
-
-    `}
+exports.SelectorPill = styled_components_1.default.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;
 `;

package/dist/cjs/components/Sidepanel/Sidepanel.js

@@ -15,32 +15,52 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __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.Sidepanel = void 0;
-const ReactDOM = __importStar(require("react-dom"));
-const ElementHeader_1 = require("../ElementHeader");
+const config_1 = require("../../config");
 const react_1 = __importStar(require("react"));
-const Modal_styles_1 = require("../Modal/Modal.styles");
+const react_dom_1 = require("react-dom");
 const Sidepanel_styles_1 = require("./Sidepanel.styles");
-const Icons_1 = require("../Icons");
-const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
+const Header_1 = require("../Header");
+const Icon_1 = require("../Icon");
+const Sidepanel = ({ isOpen, theme, themeVariant = 'default', children, handleClose, right = false, overlayer = true, top = 0, iconOptions, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const sidepanelConfig = componentsConfig.sidepanel;
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                handleClose && handleClose();
+            const target = event.target;
+            if (ref.current &&
+                target instanceof Node &&
+                !ref.current.contains(target)) {
+                handleClose();
             }
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
-                handleClose && handleClose();
+                handleClose();
             }
         };
         document.addEventListener('click', handleClickOutside, true);
@@ -49,15 +69,19 @@ const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = t
             document.removeEventListener('click', handleClickOutside, true);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [isOpen]);
-    const modalRoot = document.getElementById('root');
+    }, [isOpen, handleClose]);
+    const header = () => {
+        if (iconOptions) {
+            return (react_1.default.createElement(react_1.default.Fragment, null, iconOptions.map((icon) => (react_1.default.createElement(Icon_1.Icon, { name: icon.iconName, onClick: () => icon.action(), key: icon.iconName })))));
+        }
+        return null;
+    };
     if (isOpen) {
-        return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Sidepanel_styles_1.SidepanelElement, { right: right, top: top, ref: ref },
-                react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose }, iconOptions &&
-                    iconOptions.map((icon) => (react_1.default.createElement(Icons_1.Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
-                children),
-            overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })), modalRoot);
+        return (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Sidepanel_styles_1.SidepanelRoot, { config: sidepanelConfig, right: right, top: top, ref: ref, theme: resolvedTheme },
+                react_1.default.createElement(Header_1.Header, { handleClose: handleClose, header: header() }),
+                react_1.default.createElement(Sidepanel_styles_1.SidepanelContent, { config: sidepanelConfig, theme: resolvedTheme }, children)),
+            overlayer && (react_1.default.createElement(Sidepanel_styles_1.SidepanelOverlayer, { onClick: handleClose, config: sidepanelConfig, theme: resolvedTheme }))), document.body);
     }
     return null;
 };