@via-profit/ui-kit 0.1.0-rc.77 → 0.1.0-rc.78

package/Accordion/AccordionContent.js

@@ -25,7 +25,7 @@ const StyledAccordionContent = styled_1.default.div `
   overflow: hidden;
 `;
 const Wrapper = styled_1.default.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 1rem 0 1rem')};
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
 `;
 const AccordionContent = (props, ref) => {
     const { children, noPadding, isOpen } = props, nativeProps = __rest(props, ["children", "noPadding", "isOpen"]);

package/Switch/SwitchAsterisk.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SwitchAsteriskProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * If true, the asterisk will be set the error color
+     */
+    readonly error?: boolean;
+    /**
+     * Not used
+     */
+    readonly focused?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<SwitchAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchAsterisk.js

@@ -0,0 +1,53 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Asterisk = styled_1.default.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  position: relative;
+  top: -0.4em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+const SwitchAsterisk = (props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+};
+exports.default = React.forwardRef(SwitchAsterisk);

package/Switch/SwitchContainer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type SwitchContainerProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * This property changes position of switch and its label.
+     * Default: `end`
+     */
+    readonly labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * if `true` switch state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * This property changes position of switch and its label.
+     * Default: `end`
+     */
+    readonly labelPosition?: "bottom" | "top" | "start" | "end" | undefined;
+    /**
+     * if `true` switch state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
+export default _default;

package/Switch/SwitchContainer.js

@@ -0,0 +1,52 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const StyledContainer = styled_1.default.label `
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  padding-right: 1em;
+  display: inline-flex;
+  align-items: center;
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+  ${({ labelPosition }) => {
+    let direction = 'row';
+    switch (labelPosition) {
+        case 'bottom':
+            direction = 'column';
+            break;
+        case 'start':
+            direction = 'row-reverse';
+            break;
+        case 'top':
+            direction = 'column-reverse';
+            break;
+        default:
+            //do nothing
+            break;
+    }
+    return (0, react_2.css) `
+      flex-direction: ${direction};
+    `;
+}}
+`;
+const SwitchContainer = (props, ref) => {
+    const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { labelPosition: labelPosition, disabled: disabled, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchContainer);

package/Switch/SwitchDot.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SwitchProps } from './index';
+export type SwitchDotProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: SwitchProps['color'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchDot.js

@@ -0,0 +1,145 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const ToggleContainer = styled_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: transparent;
+  vertical-align: middle;
+  text-decoration: none;
+  padding: 0.8rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  color: rgb(255, 255, 255);
+  transition:
+    left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: ${({ checked }) => (checked ? 'translateX(1.5rem)' : 'translateX(0)')};
+`;
+const Dot = styled_1.default.span `
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 50%;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color ? $color.toString() : theme.color.accentPrimary.toString();
+        default:
+            return theme.isDark ? theme.color.textPrimary.toString() : theme.color.surface.toString();
+    }
+}};
+  &:before {
+    content: '';
+    position: absolute;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-out;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color
+                ? $color.alpha(0.2).toString()
+                : theme.color.accentPrimary.alpha(0.2).toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.alpha(0.2).toString()
+                : theme.color.surface.alpha(0.2).toString();
+    }
+}};
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-out;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color
+                ? $color.alpha(0.1).toString()
+                : theme.color.accentPrimary.alpha(0.1).toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.alpha(0.1).toString()
+                : theme.color.surface.alpha(0.1).toString();
+    }
+}};
+  }
+`;
+const SwitchDot = (props, ref) => {
+    const { children, color, checked } = props, nativeProps = __rest(props, ["children", "color", "checked"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case typeof color === 'string': {
+                let $color = theme.color.surface;
+                try {
+                    if (color) {
+                        $color = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $color,
+                };
+            }
+            default:
+                return {
+                    $color: theme.color.surface,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(ToggleContainer, Object.assign({}, nativeProps, { ref: ref, "$color": $color, checked: checked }),
+        react_1.default.createElement(Dot, { "$color": $color, checked: checked }, children)));
+};
+exports.default = react_1.default.forwardRef(SwitchDot);

package/Switch/SwitchErrorText.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface SwitchErrorTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly error?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<SwitchErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Switch/SwitchErrorText.js

@@ -0,0 +1,76 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const NoSSR_1 = __importDefault(require("../NoSSR"));
+const ErrorTextContainer = styled_1.default.div `
+  margin-left: 0.5em;
+  max-height: 0;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled_1.default.div `
+  color: ${({ theme }) => theme.color.error.toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const SwitchErrorText = (props, ref) => {
+    const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('initial');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR_1.default, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+exports.default = React.forwardRef(SwitchErrorText);

package/Switch/SwitchTextWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type SwitchTextWrapperProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<SwitchTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchTextWrapper.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+// type StyleProps = {};
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const SwitchTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchTextWrapper);

package/Switch/SwitchToggleWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type SwitchToggleWrapperProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const _default: React.ForwardRefExoticComponent<SwitchToggleWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchToggleWrapper.js

@@ -0,0 +1,57 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const ToggleWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  position: relative;
+  height: 3rem;
+  width: 4.5rem;
+  padding: 1.1rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  &:hover span[class*='ToggleContainer'] > span[class*='Dot']:after {
+    transform: translate(-50%, -50%) scale(1.7);
+  }
+`;
+const StyledInput = styled_1.default.input `
+  cursor: inherit;
+  position: absolute;
+  width: 100%;
+  opacity: 0;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  margin: 0px;
+  padding: 0px;
+  z-index: 1;
+  &:focus-visible ~ span[class*='ToggleContainer'] > span[class*='Dot']:before {
+    transform: translate(-50%, -50%) scale(1.7);
+  }
+`;
+const SwitchToggleWrapper = (props, ref) => {
+    const { children, disabled } = props, nativeProps = __rest(props, ["children", "disabled"]);
+    return (react_1.default.createElement(ToggleWrapper, { ref: ref },
+        react_1.default.createElement(StyledInput, Object.assign({}, nativeProps, { disabled: disabled, onChange: e => {
+                (nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps.onChange) && nativeProps.onChange(e);
+            }, type: "checkbox" })),
+        children));
+};
+exports.default = react_1.default.forwardRef(SwitchToggleWrapper);

package/Switch/SwitchTrack.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SwitchProps } from './index';
+export type SwitchTrackProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: SwitchProps['color'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchTrack.js

@@ -0,0 +1,80 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const Track = styled_1.default.span `
+  height: 100%;
+  width: 100%;
+  border-radius: 7px;
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color ? $color.toString() : theme.color.accentPrimary.toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.darken(10).toString()
+                : theme.color.surface.darken(200).toString();
+    }
+}};
+  opacity: 0.5;
+`;
+const SwitchTrack = (props, ref) => {
+    const { color, checked, children } = props, nativeProps = __rest(props, ["color", "checked", "children"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case typeof color === 'string': {
+                let $color = theme.color.surface;
+                try {
+                    if (color) {
+                        $color = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $color,
+                };
+            }
+            default:
+                return {
+                    $color: theme.color.surface,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(Track, Object.assign({}, nativeProps, { ref: ref, "$color": $color, checked: checked }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchTrack);

package/Switch/SwitchWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type SwitchWrapperProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<SwitchWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchWrapper.js

@@ -0,0 +1,31 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledWrapper = styled_1.default.span `
+  font-size: 1em;
+  padding-right: 1em;
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+const SwitchWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchWrapper);

package/Switch/index.d.ts

@@ -0,0 +1,138 @@
+import React from 'react';
+import { SwitchContainerProps } from './SwitchContainer';
+import { SwitchToggleWrapperProps } from './SwitchToggleWrapper';
+import { SwitchTextWrapperProps } from './SwitchTextWrapper';
+import { SwitchDotProps } from './SwitchDot';
+import { SwitchTrackProps } from './SwitchTrack';
+import { SwitchWrapperProps } from './SwitchWrapper';
+import { SwitchErrorTextProps } from './SwitchErrorText';
+import { SwitchAsteriskProps } from './SwitchAsterisk';
+export type SwitchProps = Omit<SwitchToggleWrapperProps, 'checked' | 'onChange' | 'disabled'> & {
+    /**
+     * If true then `errorText` value will be displayed under the Switch element
+     */
+    readonly error?: boolean;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    /**
+     * Text or ReactNode to show in error element\
+     * Will be displaed only if `error` property is tru
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     * Default: undefined
+     */
+    readonly checked?: boolean;
+    /**
+     * This prop allows you to control switch component. Function will be executed when user click a switch
+     * This prop overrides internal comonent control function
+     * Default: undefined
+     */
+    readonly onChange?: React.InputHTMLAttributes<HTMLInputElement>['onChange'];
+    /**
+     * if `true` switch state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean;
+    /**
+     * if `true` switch would be turned on by default
+     * Default: false;
+     */
+    readonly defaultChecked?: boolean;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * This property changes position of switch and its label.
+     * Default: `end`
+     */
+    readonly labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    readonly overrides?: SwitchOverrides;
+};
+export interface SwitchOverrides {
+    /**
+     * Element container
+     */
+    readonly Container?: React.ForwardRefExoticComponent<SwitchContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Element toggle
+     */
+    readonly ToggleWrapper?: React.ForwardRefExoticComponent<SwitchToggleWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * text wrapper
+     */
+    readonly TextWrapper?: React.ForwardRefExoticComponent<SwitchTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Dot wrapper
+     */
+    readonly Dot?: React.ForwardRefExoticComponent<SwitchDotProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Toggle track wrapper
+     */
+    readonly Track?: React.ForwardRefExoticComponent<SwitchTrackProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * error text wrapper
+     */
+    readonly ErrorText?: React.ForwardRefExoticComponent<SwitchErrorTextProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * error text wrapper
+     */
+    readonly Asterisk?: React.ForwardRefExoticComponent<SwitchAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * the main cwitch wrapper
+     */
+    readonly Wrapper?: React.ForwardRefExoticComponent<SwitchWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<SwitchToggleWrapperProps, "onChange" | "disabled" | "checked"> & {
+    /**
+     * If true then `errorText` value will be displayed under the Switch element
+     */
+    readonly error?: boolean | undefined;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: React.ReactNode;
+    /**
+     * Text or ReactNode to show in error element\
+     * Will be displaed only if `error` property is tru
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     * Default: undefined
+     */
+    readonly checked?: boolean | undefined;
+    /**
+     * This prop allows you to control switch component. Function will be executed when user click a switch
+     * This prop overrides internal comonent control function
+     * Default: undefined
+     */
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * if `true` switch state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean | undefined;
+    /**
+     * if `true` switch would be turned on by default
+     * Default: false;
+     */
+    readonly defaultChecked?: boolean | undefined;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: string | undefined;
+    /**
+     * This property changes position of switch and its label.
+     * Default: `end`
+     */
+    readonly labelPosition?: "bottom" | "top" | "start" | "end" | undefined;
+    readonly overrides?: SwitchOverrides | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/Switch/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const SwitchContainer_1 = __importDefault(require("./SwitchContainer"));
+const SwitchToggleWrapper_1 = __importDefault(require("./SwitchToggleWrapper"));
+const SwitchTextWrapper_1 = __importDefault(require("./SwitchTextWrapper"));
+const SwitchDot_1 = __importDefault(require("./SwitchDot"));
+const SwitchTrack_1 = __importDefault(require("./SwitchTrack"));
+const SwitchWrapper_1 = __importDefault(require("./SwitchWrapper"));
+const SwitchErrorText_1 = __importDefault(require("./SwitchErrorText"));
+const SwitchAsterisk_1 = __importDefault(require("./SwitchAsterisk"));
+const Switch = (props, ref) => {
+    const { checked, onChange, defaultChecked, overrides, disabled, labelPosition, children, color, name, error, errorText, requiredAsterisk } = props, nativeProps = __rest(props, ["checked", "onChange", "defaultChecked", "overrides", "disabled", "labelPosition", "children", "color", "name", "error", "errorText", "requiredAsterisk"]);
+    const [internalChecked, setInternalChecked] = react_1.default.useState(typeof defaultChecked !== 'undefined' ? defaultChecked : false);
+    const overridesMap = react_1.default.useMemo(() => ({
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || SwitchTextWrapper_1.default,
+        ToggleWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.ToggleWrapper) || SwitchToggleWrapper_1.default,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SwitchContainer_1.default,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || SwitchTrack_1.default,
+        Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || SwitchDot_1.default,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || SwitchErrorText_1.default,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || SwitchAsterisk_1.default,
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || SwitchWrapper_1.default,
+    }), [overrides]);
+    if (typeof checked !== 'undefined' && typeof onChange === 'undefined') {
+        console.error('The property «onChange» should be passed with prop «checked» to make component controlled');
+    }
+    return (react_1.default.createElement(overridesMap.Wrapper, null,
+        react_1.default.createElement(overridesMap.Container, { labelPosition: labelPosition, disabled: disabled },
+            react_1.default.createElement(overridesMap.ToggleWrapper, Object.assign({}, nativeProps, { disabled: disabled, onChange: typeof onChange !== 'undefined'
+                    ? onChange
+                    : () => {
+                        setInternalChecked(!internalChecked);
+                    }, checked: typeof checked !== 'undefined' ? checked : defaultChecked ? true : undefined, name: name, ref: ref }),
+                react_1.default.createElement(overridesMap.Track, { color: color, checked: typeof checked !== 'undefined' ? checked : internalChecked }),
+                react_1.default.createElement(overridesMap.Dot, { color: color, checked: typeof checked !== 'undefined' ? checked : internalChecked })),
+            react_1.default.createElement(overridesMap.TextWrapper, null,
+                children,
+                typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        react_1.default.createElement(overridesMap.ErrorText, { error: error }, errorText)));
+};
+exports.default = react_1.default.forwardRef(Switch);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.77",
+  "version": "0.1.0-rc.78",
   "description": "UI Kit",
   "repository": {
     "type": "git",