venice-ui 1.5.3 → 1.6.1

package/dist/cjs/Theme/Theme.js

@@ -110,4 +110,7 @@ exports.mainTheme = {
     chipsNeutralBackground: exports.Theme.colors.primary,
     chipsNeutralTextColor: exports.Theme.colors.white,
     chipsNeutralHoverBackground: (0, polished_1.lighten)(0.1, exports.Theme.colors.primary),
+    //toogle
+    toogleBackgrund: exports.Theme.colors.gray_3,
+    toogleActiveBackgorund: exports.Theme.colors.primary_40,
 };

package/dist/cjs/components/ButtonsFooter/ButtonsFooter.js

@@ -9,15 +9,28 @@ const Theme_1 = require("../../Theme/Theme");
 const Button_1 = require("../Button");
 const Aligment_1 = require("../Aligment");
 const ButtonsFooter_style_1 = require("./ButtonsFooter.style");
-const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = "Close", labelAdditional = "Reset", submitDisabled, submitLoader, backgroundColor = 'transparent' }) => {
+const Toogle_1 = require("../Toogle");
+const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional = 'Reset', submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, }) => {
     const isAdditional = () => {
         return labelAdditional !== undefined && handleAdditional !== undefined;
     };
     const isMultiButtons = () => {
         return handleConfirm !== undefined && labelConfirm !== undefined;
     };
+    const additionAction = () => {
+        if (handleAdditional) {
+            if (additionalType === 'toogle' && additionalValue) {
+                handleAdditional(!additionalValue);
+            }
+            else {
+                handleAdditional();
+            }
+        }
+    };
     return (react_1.default.createElement(Aligment_1.Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor },
-        labelAdditional && handleAdditional && (react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null, !submitLoader && (react_1.default.createElement(Button_1.Button, { mode: 'inverse', onClick: () => handleAdditional(), text: labelAdditional, left: isMultiButtons() })))),
+        labelAdditional && handleAdditional && (react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null, !submitLoader && (react_1.default.createElement(react_1.default.Fragment, null,
+            additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { mode: 'inverse', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
+            additionalType === 'toogle' && (react_1.default.createElement(Toogle_1.Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
         react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null,
             !submitLoader && (react_1.default.createElement(Button_1.Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),
             handleConfirm && labelConfirm && (react_1.default.createElement(Button_1.Button, { onClick: handleConfirm, text: labelConfirm, disabled: submitDisabled, loader: submitLoader })))));

package/dist/cjs/components/Modal/Modal.js

@@ -11,12 +11,12 @@ const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
 const styled_components_1 = require("styled-components");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional = 'Reset', submitDisabled, size = 'small', submitLoader = false, }) => {
+const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional = 'Reset', submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, }) => {
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
             react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },
                 react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose }),
                 react_1.default.createElement(common_1.ScrollCotainer, null, children),
-                react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader })))));
+                react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue })))));
 };
 exports.Modal = Modal;

package/dist/cjs/components/Toogle/Toogle.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toogle = void 0;
+const react_1 = __importDefault(require("react"));
+const Theme_1 = require("../../Theme/Theme");
+const styled_components_1 = require("styled-components");
+const Aligment_1 = require("../Aligment");
+const Input_1 = require("../Input");
+const Toogle_styles_1 = require("./Toogle.styles");
+const Toogle = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
+    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(Input_1.InputWrapper, { width: width },
+                react_1.default.createElement(Toogle_styles_1.ToogleElementWrapper, { size: size },
+                    react_1.default.createElement(Toogle_styles_1.ToogleElement, { size: size, active: value, onClick: () => handleClick(!value) },
+                        react_1.default.createElement(Toogle_styles_1.ToogleElementPoint, { size: size, active: value })))))));
+};
+exports.Toogle = Toogle;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToogleElement = exports.ToogleElementPoint = exports.ToogleElementWrapper = void 0;
+const common_1 = require("../common");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ToogleElementWrapper = styled_components_1.default.div `
+  ${(p) => (0, common_1.setToogleSize)(p.size)}
+`;
+exports.ToogleElementPoint = styled_components_1.default.div `
+  background-color: ${(p) => p.theme.inputDefaultBackground};
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  top: 0px;
+  height: 22px;
+  width: 22px;
+  transition: 300ms;
+  position: absolute;
+  ${(p) => p.active && `left:0px;`}
+  ${(p) => !p.active && `right:0px;`}
+box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+`;
+exports.ToogleElement = styled_components_1.default.div `
+  position: relative;
+  box-sizing: border-box;
+  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
+  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
+  font-family: 'Lato', sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
+    inset 0 1px 2px rgba(0, 0, 0, 0.24);
+  height: 24px;
+  width: 40px;
+  border-radius: 12px;
+`;

package/dist/cjs/components/Toogle/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("./Toogle"), exports);

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.height = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -39,7 +39,18 @@ exports.height = {
 
   `,
     large: `
-  font-height: calc( ${Theme_1.Theme.lineHeight.l} + 2 * (${Theme_1.Theme.padding.m}) + 2px);
+  height: calc( ${Theme_1.Theme.lineHeight.l} + 2 * (${Theme_1.Theme.padding.m}) + 2px);
+  `,
+};
+exports.toogleSize = {
+    small: `
+  padding:1px 0px;
+  `,
+    medium: `
+ padding:7px 0px;
+  `,
+    large: `
+  padding:10px 0px;
   `,
 };
 exports.inputPadding = {
@@ -99,6 +110,10 @@ const setButtonSize = (size, loader) => {
     return (exports.sizes[size] + (loader ? exports.buttonLoaderPadding[size] : exports.buttonPadding[size]));
 };
 exports.setButtonSize = setButtonSize;
+const setToogleSize = (size) => {
+    return exports.toogleSize[size];
+};
+exports.setToogleSize = setToogleSize;
 const setButtonLoaderSize = (size) => {
     return exports.buttonLoaderHeight[size];
 };

package/dist/cjs/index.js

@@ -35,4 +35,5 @@ __exportStar(require("./components/Selector"), exports);
 __exportStar(require("./components/Sidepanel"), exports);
 __exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tile"), exports);
+__exportStar(require("./components/Toogle"), exports);
 __exportStar(require("./components/Typography"), exports);

package/dist/esm/Theme/Theme.js

@@ -107,4 +107,7 @@ export const mainTheme = {
     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_40,
 };

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

@@ -3,15 +3,28 @@ import { Theme } from '../../Theme/Theme';
 import { Button } from '../Button';
 import { Aligment } from '../Aligment';
 import { ButtonsFooterGroup } from './ButtonsFooter.style';
-export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = "Close", labelAdditional = "Reset", submitDisabled, submitLoader, backgroundColor = 'transparent' }) => {
+import { Toogle } from '../Toogle';
+export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional = 'Reset', submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, }) => {
     const isAdditional = () => {
         return labelAdditional !== undefined && handleAdditional !== undefined;
     };
     const isMultiButtons = () => {
         return handleConfirm !== undefined && labelConfirm !== undefined;
     };
+    const additionAction = () => {
+        if (handleAdditional) {
+            if (additionalType === 'toogle' && additionalValue) {
+                handleAdditional(!additionalValue);
+            }
+            else {
+                handleAdditional();
+            }
+        }
+    };
     return (React.createElement(Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l, backgroundColor: backgroundColor },
-        labelAdditional && handleAdditional && (React.createElement(ButtonsFooterGroup, null, !submitLoader && (React.createElement(Button, { mode: 'inverse', onClick: () => handleAdditional(), text: labelAdditional, left: isMultiButtons() })))),
+        labelAdditional && handleAdditional && (React.createElement(ButtonsFooterGroup, null, !submitLoader && (React.createElement(React.Fragment, null,
+            additionalType === 'button' && (React.createElement(Button, { mode: 'inverse', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
+            additionalType === 'toogle' && (React.createElement(Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
         React.createElement(ButtonsFooterGroup, null,
             !submitLoader && (React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),
             handleConfirm && labelConfirm && (React.createElement(Button, { onClick: handleConfirm, text: labelConfirm, disabled: submitDisabled, loader: submitLoader })))));

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

@@ -5,11 +5,11 @@ import { ScrollCotainer } from '../common';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
 import { ThemeProvider } from 'styled-components';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional = 'Reset', submitDisabled, size = 'small', submitLoader = false, }) => {
+export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional = 'Reset', submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(ModalOverlayer, null,
             React.createElement(ModalElement, { size: size },
                 React.createElement(ElementHeader, { title: title, handleClose: handleClose }),
                 React.createElement(ScrollCotainer, null, children),
-                React.createElement(ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader })))));
+                React.createElement(ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue })))));
 };

package/dist/esm/components/Toogle/Toogle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mainTheme } from '../../Theme/Theme';
+import { ThemeProvider } from 'styled-components';
+import { Aligment } from '../Aligment';
+import { InputLabelElement, InputWrapper } from '../Input';
+import { ToogleElement, ToogleElementPoint, ToogleElementWrapper, } from './Toogle.styles';
+export const Toogle = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+            React.createElement(InputWrapper, { width: width },
+                React.createElement(ToogleElementWrapper, { size: size },
+                    React.createElement(ToogleElement, { size: size, active: value, onClick: () => handleClick(!value) },
+                        React.createElement(ToogleElementPoint, { size: size, active: value })))))));
+};

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

@@ -0,0 +1,36 @@
+import { setToogleSize } from '../common';
+import styled from 'styled-components';
+export const ToogleElementWrapper = styled.div `
+  ${(p) => setToogleSize(p.size)}
+`;
+export const ToogleElementPoint = styled.div `
+  background-color: ${(p) => p.theme.inputDefaultBackground};
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  top: 0px;
+  height: 22px;
+  width: 22px;
+  transition: 300ms;
+  position: absolute;
+  ${(p) => p.active && `left:0px;`}
+  ${(p) => !p.active && `right:0px;`}
+box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+`;
+export const ToogleElement = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
+  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
+  font-family: 'Lato', sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
+    inset 0 1px 2px rgba(0, 0, 0, 0.24);
+  height: 24px;
+  width: 40px;
+  border-radius: 12px;
+`;

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

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

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

@@ -36,7 +36,18 @@ export const height = {
 
   `,
     large: `
-  font-height: calc( ${Theme.lineHeight.l} + 2 * (${Theme.padding.m}) + 2px);
+  height: calc( ${Theme.lineHeight.l} + 2 * (${Theme.padding.m}) + 2px);
+  `,
+};
+export const toogleSize = {
+    small: `
+  padding:1px 0px;
+  `,
+    medium: `
+ padding:7px 0px;
+  `,
+    large: `
+  padding:10px 0px;
   `,
 };
 export const inputPadding = {
@@ -93,6 +104,9 @@ export const setHeight = (size) => {
 export const setButtonSize = (size, loader) => {
     return (sizes[size] + (loader ? buttonLoaderPadding[size] : buttonPadding[size]));
 };
+export const setToogleSize = (size) => {
+    return toogleSize[size];
+};
 export const setButtonLoaderSize = (size) => {
     return buttonLoaderHeight[size];
 };

package/dist/esm/index.js

@@ -19,4 +19,5 @@ export * from './components/Selector';
 export * from './components/Sidepanel';
 export * from './components/Table';
 export * from './components/Tile';
+export * from './components/Toogle';
 export * from './components/Typography';

package/dist/types/Theme/Theme.d.ts

@@ -98,4 +98,6 @@ export declare const mainTheme: {
     chipsNeutralBackground: string;
     chipsNeutralTextColor: string;
     chipsNeutralHoverBackground: string;
+    toogleBackgrund: string;
+    toogleActiveBackgorund: string;
 };

package/dist/types/components/ButtonsFooter/ButtonsFooter.d.ts

@@ -2,13 +2,15 @@ import { FC } from 'react';
 interface IButtonsFooterProps {
     handleConfirm?: () => void;
     handleClose: () => void;
-    handleAdditional?: () => void;
+    handleAdditional?: (value?: boolean) => void;
     labelConfirm?: string;
     labelClose: string;
     labelAdditional?: string;
     submitDisabled?: boolean;
     submitLoader?: boolean;
     backgroundColor?: string;
+    additionalType?: string;
+    additionalValue?: boolean;
 }
 export declare const ButtonsFooter: FC<IButtonsFooterProps>;
 export {};

package/dist/types/components/Modal/Modal.d.ts

@@ -5,12 +5,14 @@ export interface IModalProps {
     title?: string;
     handleConfirm?: () => void;
     handleClose: () => void;
-    handleAdditional?: () => void;
+    handleAdditional?: (value?: boolean) => void;
     labelConfirm?: string;
     labelClose: string;
     labelAdditional?: string;
     size?: string;
     submitDisabled?: boolean;
     submitLoader?: boolean;
+    additionalType?: string;
+    additionalValue?: boolean;
 }
 export declare const Modal: FC<IModalProps>;

package/dist/types/components/Toogle/Toogle.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { InputSize, LabelPosition } from 'types';
+interface IToogle {
+    theme?: any;
+    handleClick: (value: boolean) => void;
+    label?: string;
+    labelPosition?: LabelPosition;
+    size?: InputSize;
+    value: boolean;
+    readOnly?: boolean;
+    name?: string;
+    width?: string;
+}
+export declare const Toogle: FC<IToogle>;
+export {};

package/dist/types/components/Toogle/Toogle.styles.d.ts

@@ -0,0 +1,16 @@
+import { InputSize } from 'types';
+interface IToogleElementWrapperProps {
+    size: InputSize;
+}
+export declare const ToogleElementWrapper: import("styled-components").StyledComponent<"div", any, IToogleElementWrapperProps, never>;
+interface IToogleElementPointProps {
+    size: InputSize;
+    active: boolean;
+}
+export declare const ToogleElementPoint: import("styled-components").StyledComponent<"div", any, IToogleElementPointProps, never>;
+interface IToogleElementProps {
+    size: InputSize;
+    active: boolean;
+}
+export declare const ToogleElement: import("styled-components").StyledComponent<"div", any, IToogleElementProps, never>;
+export {};

package/dist/types/components/Toogle/index.d.ts

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

package/dist/types/components/common/inputStyles.d.ts

@@ -10,6 +10,11 @@ export declare const height: {
     medium: string;
     large: string;
 };
+export declare const toogleSize: {
+    small: string;
+    medium: string;
+    large: string;
+};
 export declare const inputPadding: {
     small: string;
     medium: string;
@@ -38,6 +43,7 @@ export declare const eyeTopPosition: {
 export declare const setSize: (size: InputSize) => string;
 export declare const setHeight: (size: InputSize) => string;
 export declare const setButtonSize: (size: InputSize, loader: boolean) => string;
+export declare const setToogleSize: (size: InputSize) => string;
 export declare const setButtonLoaderSize: (size: InputSize) => string;
 export declare const setEyeTopPosition: (size: InputSize) => string;
 export declare const inputColorSchema: {

package/dist/types/index.d.ts

@@ -19,4 +19,5 @@ export * from './components/Selector';
 export * from './components/Sidepanel';
 export * from './components/Table';
 export * from './components/Tile';
+export * from './components/Toogle';
 export * from './components/Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",