venice-ui 1.0.24 → 1.0.26

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

@@ -16,6 +16,7 @@ exports.TileElement = styled_components_1.default.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
+  height:${p => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme_1.Theme.shadow.s}

package/dist/cjs/components/common/commonComponents.js

@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollCotainer = exports.Container = void 0;
+exports.PanelOption = exports.Panel = exports.ScrollCotainer = exports.Container = void 0;
+const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
+const inputStyles_1 = require("./inputStyles");
 exports.Container = styled_components_1.default.div `
   width: 100%;
 `;
@@ -15,3 +17,28 @@ exports.ScrollCotainer = styled_components_1.default.div `
   overflow: auto;
   box-sizing: border-box;
 `;
+exports.Panel = styled_components_1.default.div `
+  box-sizing: border-box;
+  background-color: ${Theme_1.Theme.colors.white};
+  box-shadow: ${Theme_1.Theme.shadow.m};
+  padding: ${Theme_1.Theme.padding.m} 0;
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  height: ${(p) => (p.height ? p.height : 'auto')};
+  width: ${p => p.fullWidth ? '100%' : 'auto'};
+  position: absolute;
+  z-index: ${Theme_1.Theme.zIndex.dropdown};
+  top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
+  border: 1px solid ${Theme_1.Theme.colors.gray_1};
+  border-top: none;
+  ${p => (0, inputStyles_1.setPanelPosition)(p.position)}
+`;
+exports.PanelOption = styled_components_1.default.div `
+  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
+  cursor: pointer;
+  white-space: nowrap;
+  color: ${(p) => (p.active ? Theme_1.Theme.colors.primary : Theme_1.Theme.colors.text)};
+
+  :hover {
+    background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
+  }
+`;

package/dist/cjs/components/common/inputStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLabelFontSize = exports.lableFontSize = exports.colorMode = exports.setSize = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.colorMode = exports.setSize = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -11,22 +11,26 @@ exports.defaultStyles = `
   width: 100%;
   font-family: "Lato", sans-serif;
   outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
 `;
 exports.sizes = {
-    xsmall: `
-  padding: ${Theme_1.Theme.padding.s};
-  font-size: ${Theme_1.Theme.fontSize.s};
-  `,
     small: `
   padding: ${Theme_1.Theme.padding.s};
-  font-size: ${Theme_1.Theme.fontSize.m};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  line-height: ${Theme_1.Theme.lineHeight.s};
   `,
     medium: `
   padding: ${Theme_1.Theme.padding.m};
-  font-size: ${Theme_1.Theme.fontSize.m};`,
+  font-size: ${Theme_1.Theme.fontSize.m};
+  line-height: ${Theme_1.Theme.lineHeight.m};
+  `,
     large: `
   padding: ${Theme_1.Theme.padding.m};
   font-size: ${Theme_1.Theme.fontSize.l};
+  line-height: ${Theme_1.Theme.lineHeight.l};
   `
 };
 const setSize = (size) => {
@@ -49,13 +53,9 @@ exports.colorMode = {
   `,
 };
 exports.lableFontSize = {
-    xsmall: `
+    small: `
   line-height: ${Theme_1.Theme.lineHeight.s};
   font-size: ${Theme_1.Theme.fontSize.s};
-  `,
-    small: `
-  line-height: ${Theme_1.Theme.lineHeight.m};
-  font-size: ${Theme_1.Theme.fontSize.m};
   `,
     medium: `
   line-height: ${Theme_1.Theme.lineHeight.m};
@@ -69,3 +69,65 @@ const setLabelFontSize = (size) => {
     return exports.lableFontSize[size];
 };
 exports.setLabelFontSize = setLabelFontSize;
+exports.iconSize = {
+    small: 18,
+    medium: 28,
+    large: 34,
+};
+const setIconSize = (size) => {
+    return exports.iconSize[size];
+};
+exports.setIconSize = setIconSize;
+exports.panelTop = {
+    small: '26px',
+    medium: '36px',
+    large: '42px',
+};
+const setPanelTop = (size) => {
+    return exports.panelTop[size];
+};
+exports.setPanelTop = setPanelTop;
+exports.panelPosition = {
+    left: `left:0px`,
+    right: 'right:0px'
+};
+const setPanelPosition = (position) => {
+    return exports.panelPosition[position];
+};
+exports.setPanelPosition = setPanelPosition;
+exports.animationParams = {
+    small: {
+        width: '40px',
+        itemSize: '7px',
+        itemOne: '4px',
+        itemTwo: '4px',
+        itemThree: '16px',
+        itemFour: '28px',
+        move: '12px',
+        duration: '0.6s',
+    },
+    medium: {
+        width: '80px',
+        itemSize: '13px',
+        itemOne: '8px',
+        itemTwo: '8px',
+        itemThree: '32px',
+        itemFour: '56px',
+        move: '24px',
+        duration: '0.6s',
+    },
+    large: {
+        width: '160px',
+        itemSize: '26px',
+        itemOne: '16px',
+        itemTwo: '16px',
+        itemThree: '64px',
+        itemFour: '112px',
+        move: '48px',
+        duration: '0.6s',
+    }
+};
+const setAnimationParams = (size) => {
+    return exports.animationParams[size];
+};
+exports.setAnimationParams = setAnimationParams;

package/dist/cjs/example/ExampleComponent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
+exports.ExampleItem = exports.ExampleArea = exports.ExampleAreaTitle = exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../Theme/Theme");
 exports.StoryWrapper = styled_components_1.default.div `
@@ -36,3 +36,20 @@ exports.ExampleTableHeader = styled_components_1.default.th `
   background-color:#dddddd;
   text-align: left;
 `;
+exports.ExampleAreaTitle = styled_components_1.default.div `
+  display: flex;
+  font-size:20px;
+  margin-bottom:10px;
+  `;
+exports.ExampleArea = styled_components_1.default.div `
+  display: flex;
+  margin-bottom:20px;
+  padding-bottom:20px;
+  border-bottom: 1px solid #cbcbcb;
+  align-items: flex-end;
+  gap:10px;
+`;
+exports.ExampleItem = styled_components_1.default.div `
+  display:flex;
+  max-width:300px;
+`;

package/dist/cjs/index.js

@@ -19,8 +19,10 @@ __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
+__exportStar(require("./components/File"), exports);
 __exportStar(require("./components/Icons"), exports);
-__exportStar(require("./components/InputText"), exports);
+__exportStar(require("./components/Input"), exports);
+__exportStar(require("./components/Loader"), exports);
 __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Sidepanel"), exports);

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

@@ -8,5 +8,6 @@ export const Aligment = styled.div `
   align-items: ${p => p.align ? p.align : 'center'};
   flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
   padding: ${p => p.vPadding ? p.vPadding : '0'} ${p => p.hPadding ? p.hPadding : '0'};
-  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'}
+  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'};
+  gap: ${p => p.gap ? p.gap + 'px' : '0px'};
 `;

package/dist/esm/components/Button/Button.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ButtonElement } from './Button.styles';
-export const Button = ({ text, mode = 'primary', size = 'regular', right = false, left = false, onClick, }) => {
+export const Button = ({ text, mode = 'primary', size = 'medium', right = false, left = false, onClick, }) => {
     return (React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
 };

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

@@ -1,3 +1,4 @@
+import { setSize } from '../common';
 import { lighten } from 'polished';
 import styled from 'styled-components';
 import { Theme } from '../../Theme/Theme';
@@ -13,40 +14,30 @@ export const ButtonElement = styled.button `
   align-items: center;
   justify-content: center;
   display: flex;
-  
+  white-space: nowrap;
+  flex-shrink: 1;
 
   ${(p) => p.mode === 'primary' &&
     `background-color: ${Theme.colors.primary};
     color: ${Theme.colors.white};
     border: 1px solid rgba(0,0,0,0.15);`}
-  ${(p) => p.mode === 'inverse' &&
+  ${(p) => p.mode === 'secondary' &&
     `background-color: ${Theme.colors.white};
     color: ${Theme.colors.primary};
     border: 1px solid ${Theme.colors.primary};
     `}
-  ${(p) => p.mode === 'ghost' &&
+  ${(p) => p.mode === 'inverse' &&
     `background-color:transparent;
     color: ${Theme.colors.primary};
     border:none;`}
-  ${(p) => p.size === 'regular' &&
-    `font-size: ${Theme.fontSize.m};
-    line-height: ${Theme.lineHeight.m};
-    padding: ${Theme.padding.m} ${Theme.padding.l};`}
-  ${(p) => p.size === 'small' &&
-    `font-size: ${Theme.fontSize.s};
-    line-height: ${Theme.lineHeight.s};
-    padding: ${Theme.padding.s} ${Theme.padding.m};`}
-  ${(p) => p.size === 'flat' &&
-    `font-size: ${Theme.fontSize.m};
-    line-height: ${Theme.lineHeight.m};
-    padding: ${Theme.padding.s} ${Theme.padding.s};`}
+    ${(p) => setSize(p.size)}
   &:hover {
     transition: 300ms;
     ${(p) => p.mode === 'primary' &&
     `background-color: ${lighten(0.1, Theme.colors.primary)};`}
-    ${(p) => p.mode === 'inverse' &&
+    ${(p) => p.mode === 'secondary' &&
     `background-color: ${lighten(0.4, Theme.colors.primary)}`};
-    ${(p) => p.mode === 'ghost' && `background-color: ${lighten(0.3, Theme.colors.primary)};`}
+    ${(p) => p.mode === 'inverse' && `background-color: ${lighten(0.3, Theme.colors.primary)};`}
   }
 
   &.disable,

package/dist/esm/components/Card/Card.js

@@ -4,5 +4,5 @@ import { ElementHeader } from '../ElementHeader';
 export const Card = ({ children, title, actionLabel, moreIcon = false, backIcon = false, handleClick, handleBack, height, options, }) => {
     return (React.createElement(CardElement, { height: height },
         (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, closeIcon: false, backIcon: backIcon, actionButton: true, moreIcon: moreIcon, options: options })),
-        React.createElement(CardContent, null, children)));
+        React.createElement(CardContent, { soloMode: !title && !actionLabel }, children)));
 };

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

@@ -8,12 +8,15 @@ export const CardElement = styled.div `
   background-color: ${Theme.colors.white};
   border-radius: ${Theme.borderRadius.m};
   height: ${p => p.height ? p.height : '100%'};
-  box-shadow: ${Theme.shadow.s}
+  box-shadow: ${Theme.shadow.s};
 `;
 export const CardContent = styled.div `
   box-sizing: border-box; 
   display: flex;
+  backgorund-color:#ff0000;
   padding:  ${Theme.padding.l};
   width: 100%;
   flex-direction: row;
-`;
+  ${p => !p.soloMode && `
+  padding-top:0px;`}
+  `;

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

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Aligment } from '../Aligment';
-import { DropdownElement, DropdownOption, DropdownOptions, } from './Dropdown.styles';
+import { DropdownElement } from './Dropdown.styles';
 import { Field } from './DropdownElements';
-import { InputErrorMsg, InputLabelElement } from '../InputText';
+import { InputErrorMsg, InputLabelElement } from '../Input';
+import { Panel, PanelOption } from '../common';
 export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
@@ -34,7 +35,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         React.createElement(DropdownElement, { onClick: () => handleOpen() },
             React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
-            open && (React.createElement(DropdownOptions, { ref: ref }, options &&
-                options.map((option) => (React.createElement(DropdownOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
+            open && (React.createElement(Panel, { ref: ref, size: size, position: "left", fullWidth: true }, options &&
+                options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
             error && React.createElement(InputErrorMsg, null, error))));
 };

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

@@ -1,6 +1,4 @@
 import styled from "styled-components";
-import { Theme } from "../../Theme";
-import { lighten } from "polished";
 export const DropdownElement = styled.div `
   position: relative;
   cursor: pointer;
@@ -8,25 +6,3 @@ export const DropdownElement = styled.div `
   box-sizing:border-box;
   width:100%;
 `;
-export const DropdownOptions = 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:${p => p.height ? p.height : 'auto'};
-  width:100%;
-  position:absolute;
-  z-index:${Theme.zIndex.dropdown};
-  top:36px;
-  left:0px;
-`;
-export const DropdownOption = styled.div `
-  padding: ${Theme.padding.s} ${Theme.padding.m};
-  cursor: pointer;
-  color: ${p => p.active ? Theme.colors.primary : Theme.colors.text};
-  :hover{
-    background-color: ${lighten(0.4, Theme.colors.primary)};
-  }
-  
-`;

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

@@ -3,6 +3,8 @@ import { defaultStyles, setSize, colorMode } 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};

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

@@ -22,7 +22,7 @@ export const ElementHeader = ({ title, showTitle = true, moreIcon = false, backI
         }
         else if (!closeIcon && actionButton && handleClick) {
             return (React.createElement(Aligment, { align: "flex-end", width: "auto" },
-                React.createElement(Button, { mode: "ghost", text: actionLabel, onClick: () => handleClick() }),
+                React.createElement(Button, { mode: "inverse", text: actionLabel, onClick: () => handleClick() }),
                 moreIcon && options && React.createElement(More, { options: options })));
         }
     };

package/dist/esm/components/File/File.js

@@ -0,0 +1,23 @@
+import { Aligment } from '../Aligment';
+import { InputLabelElement, InputWrapper, InputErrorMsg } from '../Input';
+import React, { useRef } from 'react';
+import { Button } from '../Button';
+import { HiddenField } from './File.styles';
+import { Field } from '../Dropdown';
+export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, }) => {
+    const fileRef = useRef(null);
+    const handleSelect = (e) => {
+        console.log(e);
+    };
+    const openFileSelector = () => {
+        fileRef.current.click();
+    };
+    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        React.createElement(InputWrapper, { width: width },
+            React.createElement(Aligment, { gap: 10, wrap: "nowrap" },
+                React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
+                React.createElement(Button, { size: size, mode: "inverse", onClick: openFileSelector, text: "Wybierz plik" })),
+            React.createElement(HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
+            error && React.createElement(InputErrorMsg, null, error))));
+};

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

@@ -0,0 +1,4 @@
+import styled from "styled-components";
+export const HiddenField = styled.input `
+  display:none;
+`;

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

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

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { Theme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
-export const Icon = ({ size = 24, name, color = Theme.colors.text, bgColor, onClick, }) => {
-    return (React.createElement(IconElement, { onClick: onClick, bgColor: bgColor },
+export const Icon = ({ size = 24, name, color = Theme.colors.text, bgColor, onClick, active = false }) => {
+    return (React.createElement(IconElement, { onClick: onClick, bgColor: bgColor, active: active },
         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: color }))));
 };

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

@@ -19,4 +19,7 @@ export const IconElement = styled.div `
       cursor:pointer;
     }
   `}
+  ${p => p.active && `
+  background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : lighten(0.3, Theme.colors.primary)};
+  `}
 `;

package/dist/esm/components/{InputText/InputText.js → Input/Input.js}

@@ -1,13 +1,13 @@
 import { Aligment } from '../Aligment';
 import React from 'react';
-import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, } from './InputText.styles';
-export const InputText = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, }) => {
+import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, } from './Input.styles';
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step }) => {
     const onChange = (e) => {
         handleChange(name, e.target.value);
     };
     return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         React.createElement(InputWrapper, { width: width },
-            React.createElement(InputTextElement, { inputSize: size, type: type, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder }),
+            React.createElement(InputTextElement, { inputSize: size, type: type, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
             error && React.createElement(InputErrorMsg, null, error))));
 };

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

@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from './Input.styles';

package/dist/esm/components/Loader/Loader.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Theme } from '../../Theme';
+import { Aligment } from '../Aligment';
+import { LoaderElement, LoaderItem } from './Loader.styles';
+export const Loader = ({ color = Theme.colors.primary, size = 'medium', }) => {
+    return (React.createElement(Aligment, { justify: 'center', align: 'center' },
+        React.createElement(LoaderElement, { size: size },
+            React.createElement(LoaderItem, { color: color, size: size }),
+            React.createElement(LoaderItem, { color: color, size: size }),
+            React.createElement(LoaderItem, { color: color, size: size }),
+            React.createElement(LoaderItem, { color: color, size: size }))));
+};

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

@@ -0,0 +1,54 @@
+import { setAnimationParams } from '../common';
+import styled, { keyframes } from 'styled-components';
+export const Action1 = keyframes `
+  0% {transform: scale(0);}
+  100% {transform: scale(1);}
+`;
+export const Action2 = (move) => keyframes `
+  0% {transform: translate(0, 0);}
+  100% {transform: translate(${move}, 0);}
+`;
+export const Action3 = keyframes `
+  0% {transform: scale(1);}
+  100% {transform: scale(0);}
+`;
+export const LoaderElement = styled.div `
+  display: inline-block;
+  position: relative;
+  width: ${p => setAnimationParams(p.size).width};
+  height: ${p => setAnimationParams(p.size).itemSize};
+  
+`;
+export const LoaderItem = styled.div `
+  position: absolute;
+  top: 0px;
+  width: ${p => setAnimationParams(p.size).itemSize};
+  height: ${p => setAnimationParams(p.size).itemSize};
+  border-radius: 50%;
+  background-color: ${(p) => p.color};
+  animation-timing-function: ease-in-out;
+  :nth-child(1) {
+    left: ${p => setAnimationParams(p.size).itemOne};
+    animation-name: ${Action1};
+    animation-duration: ${p => setAnimationParams(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+  :nth-child(2) {
+    left: ${p => setAnimationParams(p.size).itemTwo};
+    animation-name: ${p => Action2(setAnimationParams(p.size).move)};
+    animation-duration: ${p => setAnimationParams(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+  :nth-child(3) {
+    left: ${p => setAnimationParams(p.size).itemThree};
+    animation-name: ${p => Action2(setAnimationParams(p.size).move)};
+    animation-duration: ${p => setAnimationParams(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+  :nth-child(4) {
+    left: ${p => setAnimationParams(p.size).itemFour};
+    animation-name: ${Action3};
+    animation-duration: ${p => setAnimationParams(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+`;

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

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

package/dist/esm/components/Modal/Modal.js

@@ -14,6 +14,6 @@ export const Modal = ({ children, title, handleConfirm, handleClose, labelConfir
             React.createElement(ElementHeader, { title: title, handleClose: handleClose }),
             React.createElement(ScrollCotainer, null, children),
             React.createElement(Aligment, { justify: 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l },
-                React.createElement(Button, { mode: isMultiButtons() ? 'inverse' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
+                React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
                 handleConfirm && labelConfirm && (React.createElement(Button, { onClick: handleConfirm, text: labelConfirm }))))));
 };

package/dist/esm/components/More/More.js

@@ -1,7 +1,8 @@
+import { Panel, PanelOption, setIconSize } from '../common';
 import React, { useState, useRef, useEffect } from 'react';
 import { Theme } from '../../Theme';
 import { Icon } from '../Icons';
-import { MoreElement, MoreOptions, MoreOption } from './More.styles';
+import { MoreElement } from './More.styles';
 export const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
@@ -17,7 +18,7 @@ export const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
         };
     }, [open]);
     return (React.createElement(MoreElement, null,
-        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: Theme.colors.primary }),
-        open && (React.createElement(MoreOptions, { ref: ref }, options &&
-            options.map((option) => (React.createElement(MoreOption, { key: option.label, onClick: option.action }, option.label)))))));
+        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: Theme.colors.primary, size: setIconSize(size), active: open }),
+        open && (React.createElement(Panel, { ref: ref, size: size, position: "right" }, options &&
+            options.map((option) => (React.createElement(PanelOption, { key: option.label, onClick: option.action, active: true }, option.label)))))));
 };

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

@@ -1,30 +1,7 @@
-import { lighten } from "polished";
 import styled from "styled-components";
-import { Theme } from "../../Theme";
 export const MoreElement = styled.div `
   position:relative;
   width:auto;
   display: flex;
   box-sizing: border-box;
 `;
-export const MoreOptions = 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};
-  width:auto;
-  position:absolute;
-  z-index:${Theme.zIndex.dropdown};
-  top:32px;
-  left:0px;
-`;
-export const MoreOption = styled.div `
-  padding: ${Theme.padding.s} ${Theme.padding.m};
-  cursor: pointer;
-  color: ${Theme.colors.primary};
-  :hover{
-    background-color: ${lighten(0.4, Theme.colors.primary)};
-  }
-  
-`;

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

@@ -1,8 +1,9 @@
 import { TextSubHeader } from '../Typography';
 import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
-export const Section = ({ title, children, titlePosition = "left", noPadding = false }) => {
-    return (React.createElement(SectionElement, null,
+import { Theme } from '../../Theme';
+export const Section = ({ title, children, titlePosition = "left", noPadding = false, backgroundColor = Theme.colors.white, }) => {
+    return (React.createElement(SectionElement, { backgroundColor: backgroundColor },
         title && (React.createElement(SectionTitle, { titlePosition: titlePosition },
             React.createElement(TextSubHeader, null, title))),
         React.createElement(SectionContent, { noPadding: noPadding }, children)));

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

@@ -3,8 +3,9 @@ import { Theme } from "../../Theme";
 export const SectionElement = styled.div `
   width:100%;
   box-sizing:border-box;
+  overflow:auto;
   padding: ${Theme.padding.l} 0;
-  background-color:${Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
 `;
 export const SectionTitle = styled.div `
   width:100%;
@@ -13,6 +14,7 @@ export const SectionTitle = styled.div `
   box-sizing:border-box;
 `;
 export const SectionContent = styled.div `
+  box-sizing:border-box;
   width:100%;
   display:flex;
   padding: 0 ${p => p.noPadding ? 0 : Theme.padding.l};