venice-ui 2.4.13 → 3.0.2

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

@@ -3,102 +3,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Prefix = exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputReadOnlyElement = exports.InputTextElement = void 0;
-const common_1 = require("../common");
+exports.InputElement = exports.PrefixWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Typography_1 = require("../Typography");
-const Theme_1 = require("../../Theme");
-exports.InputTextElement = styled_components_1.default.input `
-  position: relative;
-  box-sizing: border-box;
-  background-color: ${(p) => p.theme.inputDefaultBackground};
-  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  width: 100%;
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  ${(p) => (p.prefix ? (0, common_1.setSizeWithPrefix)(p.inputSize) : (0, common_1.setSize)(p.inputSize))}
-  color: ${(p) => p.theme.inputDefaultTextColor};
-  width: ${(p) => (p.width ? p.width : '100%')};
-  ${(p) => p.type === 'password' && `padding-right:32px;`}
-  :focus {
-    border-color: ${(p) => p.theme.inputFocusBorder};
-    background-color: ${(p) => p.theme.inputFocusBackground};
-    color: ${(p) => p.theme.inputFocusTextColor};
-  }
-  :disabled {
-    background-color: ${(p) => p.theme.inputDisabledBackground};
-    border-color: ${(p) => p.theme.inputDisabledBorder};
-    color: ${(p) => p.theme.inputDisabledTextColor};
-    cursor: not-allowed;
-  }
-  ${(p) => p.error &&
+exports.PrefixWrapper = styled_components_1.default.div `
+    display: flex;
+    height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
+    align-items: center;
+    padding: 0 ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].paddingX}px};
+    color: ${({ theme, inputConfig }) => inputConfig.color.default.text};
+    background-color: ${({ theme, inputConfig }) => inputConfig.color.default.sufixBackground};
+    font-size: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].fontSize}px;
+  line-height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].lineHeight}px;
+  ${({ disabled, theme, inputConfig }) => disabled &&
+    `
+    background: ${inputConfig.color.disabled.bg};
+    border-color: ${inputConfig.color.disabled.bg};  
+    color: ${inputConfig.color.disabled.text};
+    `}
+    ${({ readOnly, theme, inputConfig }) => readOnly &&
     `
-  background-color: ${p.theme.inputErrorBackground};
-  border-color: ${p.theme.inputErrorBorder};
-  color:${p.theme.inputErrorTextColor};
-  `}
+    background: ${inputConfig.color.readonly.bg};
+    color: ${inputConfig.color.readonly.text};
+    `}
+    -webkit-text-size-adjust: 100%;
+    white-space: nowrap;
+`;
+exports.InputElement = styled_components_1.default.input `
+  width: 100%;
+  border: none;
   ::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
+  }
+    &::placeholder {
+    color: ${({ theme, inputConfig }) => inputConfig.color.default.placeholder};
+    opacity: 1;
   }
   -moz-appearance: textfield;
   appearance: textfield;
-`;
-exports.InputReadOnlyElement = styled_components_1.default.div `
-  position: relative;
-  box-sizing: border-box;
-  background-color: ${(p) => p.theme.inputDefaultBackground};
-  border: 1px solid transparent;
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  ${(p) => (0, common_1.setSize)(p.inputSize)}
-  ${(p) => (0, common_1.setHeight)(p.inputSize)}
-  color: ${(p) => p.theme.inputDefaultTextColor};
-  width: ${(p) => (p.width ? p.width : '100%')};
-  padding-left: 0;
-  border-bottom: 1px solid #dddddd;
-`;
-exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
-  ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
-  ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme_1.Theme.padding.s};`}
-  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
-  white-space: ${(p) => (p.wrapLabel ? 'normal' : 'nowrap')};
-`;
-exports.InputWrapper = styled_components_1.default.div `
-  display: flex;
-  position: relative;
-  width: ${(p) => (p.width ? p.width : '100%')};
-`;
-exports.InputErrorMsg = styled_components_1.default.div `
-  color: ${(p) => p.theme.inputErrorTextColor};
-  font-size: ${Theme_1.Theme.fontSize.s};
-  position: absolute;
-  bottom: -20px;
-`;
-exports.EyeIconWrapper = styled_components_1.default.div `
-  position: absolute;
-  right: 2px;
-  ${(p) => (0, common_1.setEyeTopPosition)(p.size)}
-`;
-exports.IconsWrapper = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-`;
-exports.Prefix = styled_components_1.default.div `
-  position: absolute;
-  display: flex;
-  left: 0px;
-  top: 1px;
-  width: 24px;
-  align-items: center;
-  color: ${Theme_1.Theme.colors.gray_1};
-  ${(p) => (0, common_1.setSize)(p.inputSize)}
+  outline: none;
+  height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
+  font-size: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].fontSize}px;
+  line-height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].lineHeight}px;
+  padding: 0 ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].paddingX}px};
+  color: ${({ theme, inputConfig, isDisabled }) => isDisabled
+    ? inputConfig.color.disabled.text
+    : inputConfig.color.default.text};
 `;

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

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

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const config_1 = require("../../config");
+const react_1 = __importDefault(require("react"));
+const Label_styles_1 = require("./Label.styles");
+const config_2 = require("../../config");
+const styled_components_1 = require("styled-components");
+const Label = ({ text, position, theme, themeVariant, size, required = false, optional = false, optionalLabel = config_2.wordbook.label.optional, smallSize = false, noBreakLabel = true }) => {
+    const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const labelConfig = componentsConfig.label;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Label_styles_1.LabelElement, { size: size, labelConfig: labelConfig, theme: resolvedTheme, position: position, smallSize: smallSize, noBreakLabel: noBreakLabel },
+            text,
+            required && (react_1.default.createElement(Label_styles_1.RequiredIndicator, { theme: resolvedTheme, labelConfig: labelConfig }, "*")),
+            optional && (react_1.default.createElement(Label_styles_1.OptionalIndicator, { theme: resolvedTheme, labelConfig: labelConfig }, optionalLabel)))));
+};
+exports.Label = Label;

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionalIndicator = exports.RequiredIndicator = exports.LabelElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.LabelElement = styled_components_1.default.div `
+  font-weight: 500;
+  letter-spacing: -0.01em;
+    white-space: ${({ noBreakLabel }) => (noBreakLabel ? 'nowrap' : 'normal')};
+  ${({ position, labelConfig, size, smallSize }) => position !== 'top' &&
+    `
+      min-height: ${smallSize
+        ? labelConfig.size[size].smallHeight
+        : labelConfig.size[size].height}px;
+    `}
+  font-size: ${({ labelConfig, size }) => labelConfig.size[size].fontSize}px;
+  line-height: ${({ labelConfig, size }) => labelConfig.size[size].lineHeight}px;
+  color: ${({ labelConfig }) => labelConfig.color.left.text};
+  display: flex;
+  align-items: center;
+  ${({ position, labelConfig }) => position === 'top' &&
+    `
+        font-size: ${labelConfig.size.top.fontSize}px;
+        line-height: ${labelConfig.size.top.lineHeight}px;
+        color: ${labelConfig.color.top.text};
+        `}
+`;
+exports.RequiredIndicator = styled_components_1.default.span `
+  color: ${({ labelConfig }) => labelConfig.color.required.text};
+  padding: 0 4px;
+`;
+exports.OptionalIndicator = styled_components_1.default.span `
+  color: ${({ labelConfig }) => labelConfig.color.top.text};
+  font-size: ${({ labelConfig }) => labelConfig.size.top.fontSize}px;
+  margin-left: 4px;
+`;

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

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

package/dist/cjs/components/List/List.js

@@ -4,122 +4,125 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
-const Aligment_1 = require("../Aligment");
 const react_1 = __importDefault(require("react"));
-const list_styles_1 = require("./list.styles");
-const Checkbox_1 = require("../Checkbox");
 const styled_components_1 = require("styled-components");
-const Icons_1 = require("../Icons");
-const Theme_1 = require("../../Theme");
-const Table_styles_1 = require("../Table/Table.styles");
+const config_1 = require("../../config");
+const Aligment_1 = require("../Aligment");
+const iLst_styles_1 = require("./iLst.styles");
+const Icon_1 = require("../Icon");
+const Checkbox_1 = require("../Checkbox");
 const DropdownMenu_1 = require("../DropdownMenu");
-const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, isStatus = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, levelActions = [], }) => {
-    const updateItem = (items, rowID, updater) => {
-        items.forEach((_item) => {
-            if (_item.id === rowID) {
-                updater(_item);
-            }
-            else if (_item.children.length > 0) {
-                updateItem(_item.children, rowID, updater);
-            }
-        });
-        return items;
-    };
-    const showRow = (rowID) => {
-        const newListOption = [...items];
-        updateItem(items, rowID, (item) => {
-            item.extend = !item.extend;
-        });
-        handleChange(newListOption);
-    };
-    const getValue = (item) => {
-        return item.selected ? item.selected : false;
-    };
-    const getIntermedian = (item) => {
-        if (item.children.length === 0) {
-            return false;
+const cloneItems = (items) => items.map((item) => ({
+    ...item,
+    children: cloneItems(item.children),
+}));
+const updateItem = (items, rowID, updater) => {
+    for (const item of items) {
+        if (item.id === rowID) {
+            updater(item);
+            return true;
         }
-        else {
-            return (item.children.some((_item) => _item.selected) &&
-                !item.children.every((_item) => _item.selected));
+        if (item.children.length > 0 && updateItem(item.children, rowID, updater)) {
+            return true;
         }
-    };
-    const changeSelectedItem = (item, newValue) => {
-        item.selected = newValue;
-        if (item.children.length > 0) {
-            item.children.forEach((_child) => {
-                changeSelectedItem(_child, newValue);
-            });
+    }
+    return false;
+};
+const updateSelectedState = (item, newValue) => {
+    item.selected = newValue;
+    item.children.forEach((child) => updateSelectedState(child, newValue));
+};
+const updateParentSelection = (items, itemID) => {
+    let found = false;
+    for (const item of items) {
+        const childFound = item.children.length > 0 && updateParentSelection(item.children, itemID);
+        if (childFound) {
+            item.selected = item.children.every((child) => child.selected);
+            found = true;
         }
-        return item;
-    };
-    const searchParent = (items, itemID, parentItem) => {
-        for (const _item of items) {
-            if (_item.id === itemID) {
-                return parentItem;
-            }
-            if (_item.children.length > 0) {
-                const found = searchParent(_item.children, itemID, _item);
-                if (found)
-                    return found;
-            }
+        if (item.id === itemID) {
+            found = true;
         }
-        return undefined;
-    };
-    const checkParent = (items, itemID) => {
-        const parent = searchParent(items, itemID);
-        if (parent) {
-            parent.selected = parent?.children.every((_item) => _item.selected);
-            checkParent(items, parent.id);
+    }
+    return found;
+};
+const List = ({ theme, themeVariant = 'default', items, handleChange, handleSelect, isCheckbox, selected, isCollapsable, isStatusable, isSelectable, haveMoreOptions, levelActions = [], }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const checkboxConfig = componentsConfig.list;
+    const getValue = (item) => Boolean(item.selected);
+    const getIntermedian = (item) => {
+        if (item.children.length === 0) {
+            return false;
         }
-        return items;
+        const hasSelectedChild = item.children.some((child) => child.selected);
+        const hasUnselectedChild = item.children.some((child) => !child.selected);
+        return hasSelectedChild && hasUnselectedChild;
+    };
+    const showRow = (rowID) => {
+        const newListOption = cloneItems(items);
+        updateItem(newListOption, rowID, (item) => {
+            item.extend = !item.extend;
+        });
+        handleChange(newListOption);
     };
     const handleClick = (item) => {
-        const newListOption = [...items];
+        const newListOption = cloneItems(items);
         const isIntermedian = getIntermedian(item);
-        const isSeleted = getValue(item);
-        if (isSeleted || isIntermedian) {
-            changeSelectedItem(item, false);
-        }
-        else {
-            changeSelectedItem(item, true);
-        }
-        updateItem(newListOption, item.id, (item) => Object.assign(item, item));
-        checkParent(newListOption, item.id);
+        const isSelected = getValue(item);
+        const nextValue = !(isSelected || isIntermedian);
+        updateItem(newListOption, item.id, (target) => {
+            updateSelectedState(target, nextValue);
+        });
+        updateParentSelection(newListOption, item.id);
         handleChange(newListOption);
     };
-    const handleRowClick = (item, e) => {
-        e.stopPropagation();
-        if (isCheckbox) {
-            handleClick(item);
-        }
-        else if (isSelectable && handleSelect) {
-            handleSelect(item.id);
-        }
-    };
-    const gerenrateRow = (row, level) => {
+    const renderRow = (row, level) => {
         const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
-                isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: (row.extend && row.children.length !== 0) || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
-                        e.stopPropagation();
-                    } },
-                    row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),
-                    row.children.length === 0 && isStatus && rowHaveStatus && (react_1.default.createElement(Icons_1.Icon, { name: row.statusError ? "error" : row.statusWarnning ? "warning" : "check_circle", size: 16, noPadding: true, iconColor: row.statusError ? Theme_1.Theme.colors.red : row.statusWarnning ? Theme_1.Theme.colors.orange : Theme_1.Theme.colors.green })))),
-                isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
-                    react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
-                react_1.default.createElement(list_styles_1.ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
-                haveMoreOptions && levelActions[level]?.moreActions && (react_1.default.createElement(list_styles_1.MoreWrapper, null,
-                    react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: levelActions[level]?.moreActions || [], targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
-            row.extend && row.children.length > 0 && (react_1.default.createElement(list_styles_1.ListRowExtend, null, row.children.map((_chiledRow) => {
-                return gerenrateRow(_chiledRow, level + 1);
-            })))));
+        return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+            react_1.default.createElement(iLst_styles_1.ListRowRoot, { theme: resolvedTheme, config: checkboxConfig, 
+                // action={}
+                level: level },
+                react_1.default.createElement(iLst_styles_1.ListRow, { theme: resolvedTheme, config: checkboxConfig, isSelected: isSelectable && selected ? selected === row.id : false },
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Aligment_1.Aligment, { justify: "start-flex", gap: checkboxConfig.size.gap, align: "center" },
+                            isCollapsable && (react_1.default.createElement(iLst_styles_1.ListIconWrapper, { theme: resolvedTheme, config: checkboxConfig, isExtended: row.extend || false, onClick: (e) => {
+                                    e.stopPropagation();
+                                } },
+                                row.children.length !== 0 && (react_1.default.createElement(Icon_1.Icon, { name: "chevron_down", onClick: () => showRow(row.id), hoverBackground: "transparent" })),
+                                row.children.length === 0 &&
+                                    isStatusable &&
+                                    rowHaveStatus && (react_1.default.createElement(Icon_1.Icon, { name: row.statusError
+                                        ? 'error'
+                                        : row.statusWarnning
+                                            ? 'warning'
+                                            : 'check_circle', hoverBackground: "transparent", hoverColor: row.statusError
+                                        ? checkboxConfig.color.status.error
+                                        : row.statusWarnning
+                                            ? checkboxConfig.color.status.warning
+                                            : checkboxConfig.color.status.success, color: row.statusError
+                                        ? checkboxConfig.color.status.error
+                                        : row.statusWarnning
+                                            ? checkboxConfig.color.status.warning
+                                            : checkboxConfig.color.status.success })))),
+                            isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
+                                react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "sm" }))),
+                            row.value),
+                        react_1.default.createElement(iLst_styles_1.ListRowOptionsWrapper, { onClick: (e) => e.stopPropagation() }, haveMoreOptions && levelActions[level]?.moreActions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: levelActions[level]?.moreActions || [], targetID: row.id, position: 'right' })))))),
+            row.children.length > 0 && (react_1.default.createElement(iLst_styles_1.ListRowExtend, { isExtended: row.extend || false },
+                react_1.default.createElement("div", null, row.children.map((_chiledRow) => {
+                    return renderRow(_chiledRow, level + 1);
+                }))))));
     };
     let level = 0;
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
-            return gerenrateRow(_row, level);
-        }))));
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(iLst_styles_1.ListRoot, { theme: resolvedTheme, config: checkboxConfig },
+            react_1.default.createElement(Aligment_1.Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
+                return renderRow(_row, level);
+            })))));
 };
 exports.List = List;

package/dist/cjs/components/List/iLst.styles.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListRowOptionsWrapper = exports.ListRowExtend = exports.ListIconWrapper = exports.ListRow = exports.ListRowRoot = exports.ListRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ListRoot = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start-flex;
+  flex-direction: column;
+  background-color: ${({ theme, config }) => config.color.default.background};
+`;
+exports.ListRowRoot = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: start-flex;
+  box-sizing: border-box;
+  padding: 0 ${({ config }) => config.size.paddingX}px;
+  padding-left: ${({ level, config }) => level * config.size.indent}px;
+  width: 100%;
+  height: ${({ config }) => config.size.rowHeight}px;
+`;
+exports.ListRow = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${({ config }) => config.size.paddingX}px;
+  background: ${({ theme, config, isSelected }) => isSelected
+    ? config.color.selected.background
+    : config.color.default.background};
+  border-radius: ${({ config }) => config.size.borderRadius}px;
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme, config, isSelected }) => isSelected
+    ? config.color.selected.hoverBackground
+    : config.color.hover.background};
+  }
+  width: 100%;
+  height: 100%;
+`;
+exports.ListIconWrapper = styled_components_1.default.div `
+  display: flex;
+  transition: transform 0.2s ease;
+  transform: ${({ isExtended }) => isExtended ? 'rotate(-90deg)' : 'rotate(0deg)'};
+  width: ${({ config }) => config.size.iconSpace}px;
+  height: ${({ config }) => config.size.iconSpace}px;
+  align-items: center;
+  justify-content: center;
+`;
+exports.ListRowExtend = styled_components_1.default.div `
+  display: grid;
+  grid-template-rows: ${({ isExtended }) => (isExtended ? '1fr' : '0fr')};
+  transition: grid-template-rows 0.2s ease;
+  width: 100%;
+
+  & > div {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+`;
+exports.ListRowOptionsWrapper = styled_components_1.default.div `
+  display: flex;
+`;

package/dist/cjs/components/Loader/Loader.js

@@ -4,16 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
-const Theme_1 = require("../../Theme");
-const Aligment_1 = require("../Aligment");
+const styled_components_1 = require("styled-components");
 const Loader_styles_1 = require("./Loader.styles");
-const Loader = ({ theme = Theme_1.mainTheme, color = theme.action, size = 'medium', }) => {
-    return (react_1.default.createElement(Aligment_1.Aligment, { justify: 'center', align: 'center' },
-        react_1.default.createElement(Loader_styles_1.LoaderElement, { size: size },
-            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }),
-            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }),
-            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }),
-            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }))));
+const Loader = ({ theme, size = 'sm', themeVariant = 'default', }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const loaderConfig = componentsConfig.loader;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Loader_styles_1.LoaderRoot, { theme: resolvedTheme, config: loaderConfig, size: size })));
 };
 exports.Loader = Loader;

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

@@ -1,81 +1,21 @@
 "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.LoaderItem = exports.LoaderElement = exports.Action3 = exports.Action2 = exports.Action1 = void 0;
-const common_1 = require("../common");
-const styled_components_1 = __importStar(require("styled-components"));
-exports.Action1 = (0, styled_components_1.keyframes) `
-  0% {transform: scale(0);}
-  100% {transform: scale(1);}
-`;
-const Action2 = (move) => (0, styled_components_1.keyframes) `
-  0% {transform: translate(0, 0);}
-  100% {transform: translate(${move}, 0);}
-`;
-exports.Action2 = Action2;
-exports.Action3 = (0, styled_components_1.keyframes) `
-  0% {transform: scale(1);}
-  100% {transform: scale(0);}
-`;
-exports.LoaderElement = styled_components_1.default.div `
-  display: inline-block;
-  position: relative;
-  width: ${p => (0, common_1.setAnimationParams)(p.size).width};
-  height: ${p => (0, common_1.setAnimationParams)(p.size).itemSize};
-  
-`;
-exports.LoaderItem = styled_components_1.default.div `
-  position: absolute;
-  top: 0px;
-  width: ${p => (0, common_1.setAnimationParams)(p.size).itemSize};
-  height: ${p => (0, common_1.setAnimationParams)(p.size).itemSize};
+exports.LoaderRoot = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.LoaderRoot = styled_components_1.default.div `
+  width: ${({ config, size }) => config.size[size].size}px;
+  height: ${({ config, size }) => config.size[size].size}px;
+  border: ${({ config, size }) => config.size[size].border}px solid currentColor;
+  border-top-color: transparent;
   border-radius: 50%;
-  background-color: ${(p) => p.color};
-  animation-timing-function: ease-in-out;
-  :nth-child(1) {
-    left: ${p => (0, common_1.setAnimationParams)(p.size).itemOne};
-    animation-name: ${exports.Action1};
-    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
-    animation-iteration-count: infinite;
-  }
-  :nth-child(2) {
-    left: ${p => (0, common_1.setAnimationParams)(p.size).itemTwo};
-    animation-name: ${p => (0, exports.Action2)((0, common_1.setAnimationParams)(p.size).move)};
-    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
-    animation-iteration-count: infinite;
-  }
-  :nth-child(3) {
-    left: ${p => (0, common_1.setAnimationParams)(p.size).itemThree};
-    animation-name: ${p => (0, exports.Action2)((0, common_1.setAnimationParams)(p.size).move)};
-    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
-    animation-iteration-count: infinite;
-  }
-  :nth-child(4) {
-    left: ${p => (0, common_1.setAnimationParams)(p.size).itemFour};
-    animation-name: ${exports.Action3};
-    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
-    animation-iteration-count: infinite;
+  flex-shrink: 0;
+  animation: loaderSpin 0.7s linear infinite;
+  @keyframes loaderSpin {
+    to {
+      transform: rotate(360deg);
+    }
   }
 `;