venice-ui 2.4.13 → 3.0.1

package/dist/esm/Theme/Theme.js

@@ -1,127 +0,0 @@
-import { lighten } from "polished";
-export const pallete = {
-    primary: "#4c95c5",
-    accent: '#e4b485',
-};
-export const Theme = {
-    colors: {
-        primary: pallete.primary,
-        primary_40: lighten(0.1, pallete.primary),
-        primary_30: lighten(0.2, pallete.primary),
-        primary_20: lighten(0.3, pallete.primary),
-        primary_10: lighten(0.4, pallete.primary),
-        accent: pallete.accent,
-        accent_light: lighten(0.2, pallete.accent),
-        black: "#000000",
-        text: '#333333',
-        darkGray: ' #222222',
-        gray_1: '#979797',
-        gray_2: "#b7b7b7",
-        gray_3: "#e3e3e3",
-        gray_4: '#f3f3f3',
-        white: "#ffffff",
-        overlayer: 'rgba(0,0,0,0.4)',
-        red: '#ad1616',
-        orange: '#de890a',
-        green: '#179334'
-    },
-    fontSize: {
-        xxs: '10px',
-        xs: "12px",
-        s: "14px",
-        m: "16px",
-        l: "22px",
-        xl: "32px",
-    },
-    lineHeight: {
-        xxs: '12px',
-        xs: "14px",
-        s: "16px",
-        m: "18px",
-        l: "24px",
-        xl: "36px",
-    },
-    padding: {
-        xs: "2px",
-        s: "4px",
-        m: "8px",
-        l: "16px",
-        xl: "32px",
-        xxl: '48px',
-    },
-    zIndex: {
-        modalOverlayer: 1000,
-        dropdown: 800,
-    },
-    borderRadius: {
-        s: '2px',
-        m: '4px',
-        l: '8px',
-    },
-    shadow: {
-        s: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);',
-        m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
-    }
-};
-export const mainTheme = {
-    //buton
-    action: Theme.colors.primary,
-    buttonText: Theme.colors.white,
-    buttonPrimaryHover: lighten(0.1, Theme.colors.primary),
-    buttonSecondaryHover: lighten(0.4, Theme.colors.primary),
-    buttonInverseHover: lighten(0.3, Theme.colors.primary),
-    disabledBackground: Theme.colors.gray_4,
-    disabledText: Theme.colors.gray_1,
-    errorBackgroundColor: Theme.colors.red,
-    errorBackgroundColorHover: lighten(0.3, Theme.colors.red),
-    errorBackgroundColorHoverLight: lighten(0.6, Theme.colors.red),
-    //icon
-    iconColor: Theme.colors.text,
-    iconHoverColor: Theme.colors.primary,
-    iconBgColor: 'transparent',
-    iconDisabledColor: Theme.colors.gray_4,
-    iconBgHoverColor: Theme.colors.primary_10,
-    //text
-    textColor: Theme.colors.text,
-    // input
-    inputDefaultBackground: Theme.colors.white,
-    inputDefaultBorder: Theme.colors.gray_2,
-    inputDefaultTextColor: Theme.colors.text,
-    inputFocusBackground: lighten(0.45, Theme.colors.primary),
-    inputFocusBorder: Theme.colors.primary,
-    inputFocusTextColor: Theme.colors.text,
-    inputDisabledBackground: Theme.colors.gray_4,
-    inputDisabledBorder: Theme.colors.gray_1,
-    inputDisabledTextColor: Theme.colors.gray_1,
-    inputErrorBackground: lighten(0.6, Theme.colors.red),
-    inputErrorBorder: Theme.colors.red,
-    inputErrorTextColor: Theme.colors.red,
-    // global
-    contentBackground: Theme.colors.white,
-    // selector / dropdown
-    optionActiveColor: Theme.colors.primary,
-    optionColor: Theme.colors.text,
-    optionHoverBackground: lighten(0.3, Theme.colors.primary),
-    selector: Theme.colors.primary_10,
-    //table
-    tableBorderColor: Theme.colors.gray_3,
-    tableHeaderBackground: Theme.colors.white,
-    tableHeaderActive: Theme.colors.primary,
-    tableCellBackground: Theme.colors.white,
-    tableCellEvenBackground: Theme.colors.gray_4,
-    tableCellHoverBackground: lighten(0.3, Theme.colors.primary),
-    tableCellActiveBackground: lighten(0.3, Theme.colors.primary),
-    tableCellSortIconActive: Theme.colors.primary,
-    tableCellSortIcon: Theme.colors.text,
-    tableMoreIconColor: Theme.colors.text,
-    tableHoverMoreIconColor: Theme.colors.primary,
-    // chips
-    chipsNeutralBackground: Theme.colors.primary,
-    chipsNeutralTextColor: Theme.colors.white,
-    chipsNeutralHoverBackground: lighten(0.1, Theme.colors.primary),
-    //toogle
-    toogleBackgrund: Theme.colors.gray_3,
-    toogleActiveBackgorund: Theme.colors.primary_20,
-    //checkobx
-    checkColor: Theme.colors.text,
-};

package/dist/esm/Theme/index.js

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

package/dist/esm/components/ButtonsFooter/ButtonsFooter.style.js

@@ -1,4 +0,0 @@
-import styled from "styled-components";
-export const ButtonsFooterGroup = styled.div `
-    display:flex;
-`;

package/dist/esm/components/Chips/Chips.js

@@ -1,13 +0,0 @@
-import { Aligment } from '../Aligment';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { mainTheme } from '../../Theme';
-import { ChipsElement, ChipsLabel } from './Chips.styles';
-import { Icon } from '../Icons';
-export const Chips = ({ theme = mainTheme, label, handleClose, }) => {
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(ChipsElement, { onClick: () => handleClose() },
-            React.createElement(Aligment, { gap: 4 },
-                React.createElement(ChipsLabel, null, label),
-                React.createElement(Icon, { name: "close", iconColor: theme.chipsNeutralTextColor, iconHoverColor: theme.chipsNeutralTextColor, iconBgHoverColor: theme.iconBgColor, size: 14 })))));
-};

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

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-import { Theme } from "../../Theme";
-export const ChipsElement = styled.div `
-  display:inline-block;
-  cursor: pointer;
-  background-color:${p => p.theme.chipsNeutralBackground};
-  color:${p => p.theme.chipsNeutralTextColor};
-  padding:4px 8px;
-  width:auto;
-  box-sizing: border-box;
-  border-radius:30px;
-  &:hover{
-    background-color:${p => p.theme.chipsNeutralHoverBackground};
-  }
-`;
-export const ChipsLabel = styled.div `
-  font-size:${Theme.fontSize.s}
-`;

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

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

package/dist/esm/components/DatePicker/DatePiocker.styles.js

@@ -1,133 +0,0 @@
-import styled from 'styled-components';
-import { Theme } from '../../Theme';
-export const CalendarOverlay = styled.div `
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  z-index: ${(p) => (p.zIndex ? p.zIndex - 1 : Theme.zIndex.dropdown - 1)};
-`;
-export const DatePiockerElement = styled.div `
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-`;
-export const CalendarWrapper = styled.div `
-  box-sizing: border-box;
-  background-color: ${Theme.colors.white};
-  box-shadow: ${Theme.shadow.m};
-  padding: ${Theme.padding.m} 0;
-  border-radius: ${Theme.borderRadius.m};
-  height: auto;
-  width: 326px;
-  position: absolute;
-  z-index: ${(p) => (p.zIndex ? p.zIndex : Theme.zIndex.dropdown)};
-  left: ${(p) => p.left}px;
-  top: ${(p) => p.top}px;
-  border: 1px solid ${Theme.colors.gray_2};
-  border-top: none;
-  min-width: 30px;
-`;
-export const CalendarHeaderWrapper = styled.div `
-  background-color: #ffffff;
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  padding: 0.4rem 0.8rem;
-`;
-export const CalendarHeaderTexts = styled.div `
-  display: flex;
-  gap: 4px;
-`;
-export const CalendarContentWrapper = styled.div `
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  padding: 4px 8px;
-`;
-export const DaysHeader = styled.div `
-  display: flex;
-  padding: 4px 0;
-  width: 100%;
-`;
-export const DaysContent = styled.div `
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-`;
-export const DayWrapper = styled.div `
-  width: 44px;
-  height: 44px;
-  box-sizing: border-box;
-  padding: 2px;
-`;
-export const DayLabelWrapper = styled.div `
-  width: 44px;
-  box-sizing: border-box;
-  padding: 2px;
-`;
-export const Day = styled.div `
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-  color: ${Theme.colors.text};
-  ${(p) => p.active &&
-    `
-    background-color: ${Theme.colors.primary};
-    color:${Theme.colors.white};
-    `}
-  ${(p) => p.haveContent &&
-    `
-    cursor:pointer;
-    :hover{
-      background-color: ${Theme.colors.primary_10};
-      color: ${Theme.colors.text};
-    }
-    `};
-`;
-//ToDo dodać tu Text
-export const DayLabel = styled.div `
-  font-size: 14px;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${Theme.colors.gray_1};
-`;
-export const MonthWrapper = styled.div `
-  width: calc(100% / 3);
-  height: 40px;
-  display: flex;
-  box-sizing: border-box;
-  padding: 4px 8px;
-`;
-export const Month = styled.div `
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-  border-radius: 4px;
-  color: ${Theme.colors.text};
-  cursor: pointer;
-  :hover {
-    background-color: ${Theme.colors.primary_10};
-    color: ${Theme.colors.text};
-  }
-  ${(p) => p.active &&
-    `
-    background-color: ${Theme.colors.primary};
-    color:${Theme.colors.white};
-    `}
-`;

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

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-import { defaultStyles, setSize, inputColorSchema, setFieldHeight } from "../common";
-import { Theme } from "../../Theme";
-export const Field = styled.div `
-  position: relative;
-  display:flex;
-  flex-shrink: 2;
-  ${defaultStyles}
-  ${(p) => setSize(p.inputSize)}
-  color: ${Theme.colors.text};
-  width: ${(p) => (p.width ? p.width : '100%')};
-  height:  ${(p) => setFieldHeight(p.inputSize)};
-  min-width: 30px;
-  ${(p) => p.error &&
-    `
-    ${inputColorSchema.error}
-  `}
-  ${(p) => p.active &&
-    `
-    ${inputColorSchema.default}
-  `}
-  ${(p) => p.disabled &&
-    `
-    ${inputColorSchema.disabled}
-    cursor: not-allowed;
-  `}
-  ${(p) => p.rightPadding &&
-    `
-    padding-right: 30px;
-  `}
-`;

package/dist/esm/components/ElementHeader/ElementHeader.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Icon } from '../Icons';
-import { Aligment } from '../Aligment';
-import { TextHeader } from '../Typography';
-import { Theme, mainTheme } from '../../Theme';
-import { Button } from '../Button';
-import { DropdownMenu } from '../DropdownMenu';
-import { ElementHeaderWrapper, TitleWrapper } from './ElementHeader.styles';
-export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, actionDisabled = false, }) => {
-    const leftSide = () => {
-        if (title) {
-            return (React.createElement(TitleWrapper, null,
-                React.createElement(Aligment, { align: "center", direction: "row", width: "auto" },
-                    handleBack && (React.createElement(Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
-                    React.createElement(TextHeader, null, title))));
-        }
-        else if (!title && children) {
-            return children;
-        }
-    };
-    const rightSide = () => {
-        if (handleClose) {
-            return (React.createElement(Icon, { onClick: () => handleClose(), name: "close", iconColor: Theme.colors.text }));
-        }
-        else if (!handleClose && handleClick && actionLabel) {
-            return (React.createElement(Aligment, { align: "center", width: "auto" },
-                React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
-                options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: "right" }))));
-        }
-    };
-    return (React.createElement(ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },
-        React.createElement(React.Fragment, null,
-            leftSide(),
-            rightSide())));
-};

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

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { Aligment } from '../Aligment';
-import { Theme } from '../../Theme/Theme';
-export const ElementHeaderWrapper = styled(Aligment) `
-  width: 100%;
-  border-top-left-radius: ${Theme.borderRadius.m};
-  border-top-right-radius: ${Theme.borderRadius.m};
-  ${(p) => p.bottomDivader &&
-    `
-    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
-    `}
-`;
-export const TitleWrapper = styled.div `
-  height: 36px;
-  box-sizing: border-box;
-  display: flex;
-`;

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

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

package/dist/esm/components/FillSelect/FillSelect.js

@@ -1,95 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Aligment } from '../Aligment';
-import { InputArea } from './FillSelect.styles';
-import { EyeIconWrapper, Input, InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
-import { Panel, PanelOption } from '../common';
-import { createPortal } from 'react-dom';
-import { Icon } from '../Icons';
-import { mainTheme } from '../../Theme';
-import { Field } from '../Dropdown';
-import { DropdownElement } from '../Dropdown/Dropdown.styles';
-export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, handleAddToScope, theme = mainTheme, }) => {
-    const [open, toogleOpen] = useState(false);
-    const [inputValue, setInputValue] = useState('');
-    const ref = useRef(null);
-    const sourceRef = useRef(null);
-    const textRef = useRef(null);
-    const [dropdownStyles, setDropdownStyles] = useState({});
-    const getLabelForValue = (value) => {
-        return options.find((option) => option.value === value).label;
-    };
-    const handleOpen = () => {
-        if (!disabled) {
-            if (sourceRef.current) {
-                const buttonRect = sourceRef.current.getBoundingClientRect();
-                const positionStyle = {
-                    top: buttonRect.bottom + window.scrollY,
-                    width: buttonRect.width,
-                };
-                if (position === 'left') {
-                    positionStyle.left = buttonRect.left + window.scrollX;
-                }
-                else if (position === 'right') {
-                    positionStyle.right =
-                        window.innerWidth -
-                            (buttonRect.left + buttonRect.width + window.scrollX);
-                }
-                setDropdownStyles(positionStyle);
-            }
-            toogleOpen(!open);
-        }
-    };
-    const selectOption = (e, selectedValue) => {
-        e.stopPropagation();
-        handleSelect(name, selectedValue);
-        toogleOpen(false);
-    };
-    const addToScope = () => {
-        if (inputValue !== '') {
-            const isExist = options.find((_item) => _item.label === inputValue || _item.value === inputValue);
-            if (!isExist) {
-                handleSelect(inputValue, inputValue);
-                handleAddToScope && handleAddToScope(inputValue);
-                setInputValue('');
-                toogleOpen(false);
-            }
-        }
-    };
-    const updateNewOption = (name, value) => {
-        setInputValue(value);
-    };
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                toogleOpen(false);
-            }
-        };
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
-                close();
-            }
-        };
-        if (open) {
-            document.addEventListener('click', handleClickOutside, true);
-            document.addEventListener('keydown', handleKeyDown);
-        }
-        return () => {
-            document.removeEventListener('click', handleClickOutside, true);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [open]);
-    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value ? getLabelForValue(value) : '')) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
-            React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
-            React.createElement(EyeIconWrapper, { size: size },
-                React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
-            open &&
-                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex },
-                    React.createElement(InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
-                        React.createElement(Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
-                        React.createElement(Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
-                    options &&
-                        options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
-            error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
-};

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

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-import { Theme } from "../../Theme";
-export const InputArea = styled.div `
-   padding: ${Theme.padding.s} ${Theme.padding.m};
-   display:flex;
-   gap:0.5rem;
-`;

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

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

package/dist/esm/components/Form/FormElements.js

@@ -1,22 +0,0 @@
-import styled from "styled-components";
-export const FormWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-export const FormRow = styled.div `
-  width: 100%;
-  margin-bottom: 0.8rem;
-  display: flex;
-  justify-content: space-between;
-`;
-export const FormSubRow = styled.div `
-  display: flex;
-  width: calc((100% - ((${(p) => p.factor} - 1) * 2rem)) / ${(p) => p.factor});
-`;
-export const IntputWrapperBig = styled.div `
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.6rem;
-`;

package/dist/esm/components/Form/formHelper.js

@@ -1,3 +0,0 @@
-export const updateForm = (state, updateState, field, value) => {
-    updateState({ ...state, [field]: value });
-};

package/dist/esm/components/Form/formTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/Icons/Icon.js

@@ -1,37 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { mainTheme } from '../../Theme/Theme';
-import { IconElement } from './Icon.styles';
-import { iconsPath } from './IconsPath';
-import { Tooltip } from '../Tooltip/Tooltip';
-export const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick = undefined, isDisabled = false, noPadding = false, iconColor = isDisabled ? mainTheme.iconDisabledColor : mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = isDisabled
-    ? mainTheme.iconBgColor
-    : mainTheme.iconBgHoverColor, tooltip, }) => {
-    const haveAction = Boolean(onClick);
-    const iconRef = useRef(null);
-    const [showTooltip, setShowTooltip] = useState(false);
-    const [tooltipPos, setTooltipPos] = useState({ top: 0, left: 0 });
-    const [showBelow, setShowBelow] = useState(false);
-    useEffect(() => {
-        if (showTooltip && iconRef.current) {
-            const rect = iconRef.current.getBoundingClientRect();
-            const tooltipHeight = 28;
-            const spaceAbove = rect.top;
-            const spaceBelow = window.innerHeight - rect.bottom;
-            setShowBelow(spaceBelow < tooltipHeight && spaceAbove > tooltipHeight);
-            setTooltipPos({
-                top: showBelow ? rect.bottom : rect.top,
-                left: rect.left + rect.width / 2 - 16,
-            });
-        }
-    }, [showTooltip, showBelow]);
-    const handleClick = () => {
-        if (!isDisabled && !!onClick) {
-            onClick();
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconElement, { ref: iconRef, onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
-            React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
-                React.createElement("path", { d: iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))),
-        tooltip && showTooltip && (React.createElement(Tooltip, { text: tooltip, position: tooltipPos, showBelow: showBelow }))));
-};

package/dist/esm/components/Icons/Icon.styles.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import { Theme } from '../../Theme/Theme';
-export const IconElement = styled.div `
-  transition: 300ms;
-  box-sizing: border-box;
-  position: relative;
-  width: auto;
-  display: inline-flex;
-  border-radius: ${Theme.borderRadius.m};
-  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
-  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
-  padding: ${(p) => (p.noPadding ? '0' : '4px')};
-  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'normal')};
-  background-color: ${(p) => (p.isActive ? p.iconBgHoverColor : p.iconBgColor)};
-  path {
-    transition: 300ms;
-    fill: ${(p) => (p.isDisabled ? Theme.colors.gray_2 : p.iconColor)};
-  }
-  ${(p) => p.haveAction &&
-    `
-    cursor:${p.isDisabled ? 'not-allowed' : 'pointer'};
-    :hover {
-      background-color: ${!p.isDisabled && p.iconBgHoverColor};
-      path {
-        fill: ${p.isDisabled ? Theme.colors.gray_2 : p.iconHoverColor};
-      }
-    }
-    
-    `}
-`;

package/dist/esm/components/Icons/IconsShows.js

@@ -1,11 +0,0 @@
-import { Aligment } from '../Aligment';
-import React from 'react';
-import { Icon } from './Icon';
-import { iconsPath } from './IconsPath';
-import { IconName, IconsShowroom } from '../../example';
-export const IconsShows = () => {
-    return (React.createElement(Aligment, { gap: 10, justify: "flex-start" },
-        React.createElement(React.Fragment, null, Object.keys(iconsPath).map((iconPath) => (React.createElement(IconsShowroom, null,
-            React.createElement(Icon, { name: iconPath, size: 48 }),
-            React.createElement(IconName, null, iconPath)))))));
-};

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

@@ -1,2 +0,0 @@
-export { Icon } from './Icon';
-export { iconsPath } from './IconsPath';

package/dist/esm/components/List/list.styles.js

@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-export const ListRow = styled.div `
-  position: relative;
-  display: flex;
-  padding: 8px;
-  padding-left: ${(p) => p.level * 2 * 8}px;
-  font-size: 16px;
-  width: 100%;
-  box-sizing: border-box;
-  gap: 8px;
-  align-content: center;
-  align-items: center;
-  ${(p) => p.selected &&
-    `
-    background-color: ${p.theme.tableCellActiveBackground};
-    `}
-
-  :hover {
-    background-color: ${(p) => p.theme.tableCellActiveBackground};
-    cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-  }
-`;
-export const ListText = styled.div `
-  font-size: 16px;
-  ${p => p.selected && `
-    color:${p.theme.action}
-    `}
-`;
-export const ListIconWrapper = styled.div `
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  transition: 300ms;
-  transform: rotate(${(p) => (p.extend ? '0deg' : '-90deg')});
-`;
-export const MoreWrapper = styled.div `
-  position: absolute;
-  right: 0px;
-`;
-export const ListRowExtend = styled.div `
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;