@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/Swiper/SwiperWrapper.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type SwiperWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly draggable: boolean;
+    readonly slidesPerView: number;
+};
+export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & {
+    $draggable: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const SwiperWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly draggable: boolean;
+    readonly slidesPerView: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SwiperWrapper;

package/Swiper/SwiperWrapper.js

@@ -0,0 +1,60 @@
+"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 });
+exports.StyledWrapper = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.StyledWrapper = styled_1.default.div `
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+
+  ${({ $draggable }) => $draggable &&
+    (0, react_1.css) `
+      touch-action: pan-y;
+    `};
+`;
+const SwiperWrapper = React.forwardRef((props, ref) => {
+    const { children, draggable } = props, restProps = __rest(props, ["children", "draggable"]);
+    return (React.createElement(exports.StyledWrapper, Object.assign({}, restProps, { ref: ref, "$draggable": draggable }), children));
+});
+SwiperWrapper.displayName = 'SwiperWrapper';
+exports.default = SwiperWrapper;

package/Swiper/index.d.ts

@@ -0,0 +1,7 @@
+import Swiper from './Swiper';
+export * from './Swiper';
+export * from './SwiperContainer';
+export * from './SwiperSlide';
+export * from './SwiperTrack';
+export * from './SwiperWrapper';
+export default Swiper;

package/Swiper/index.js

@@ -0,0 +1,26 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Swiper_1 = __importDefault(require("./Swiper"));
+__exportStar(require("./Swiper"), exports);
+__exportStar(require("./SwiperContainer"), exports);
+__exportStar(require("./SwiperSlide"), exports);
+__exportStar(require("./SwiperTrack"), exports);
+__exportStar(require("./SwiperWrapper"), exports);
+exports.default = Swiper_1.default;

package/Switch/SwitchDot.js

@@ -123,7 +123,7 @@ const SwitchDot = (props, ref) => {
                 let $color = theme.color.surface;
                 try {
                     if (color) {
-                        $color = new Color_1.default(color);
+                        $color = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/Switch/SwitchTrack.js

@@ -59,7 +59,7 @@ const SwitchTrack = (props, ref) => {
                 let $color = theme.color.surface;
                 try {
                     if (color) {
-                        $color = new Color_1.default(color);
+                        $color = Color_1.default.fromString(color);
                     }
                 }
                 catch (err) {

package/TextField/TextFieldContainer.d.ts

@@ -4,5 +4,5 @@ export interface TextFieldContainerProps extends React.InputHTMLAttributes<HTMLD
     readonly focused?: boolean;
     readonly error?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare const TextFieldContainer: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default TextFieldContainer;

package/TextField/TextFieldContainer.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldContainer = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTextFieldContainer = styled_1.default.div `
@@ -46,8 +47,9 @@ const StyledTextFieldContainer = styled_1.default.div `
   max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
   vertical-align: top;
 `;
-const TextFieldContainer = (props, ref) => {
+exports.TextFieldContainer = React.forwardRef((props, ref) => {
     const { children, fullWidth, focused, error } = props, nativeProps = __rest(props, ["children", "fullWidth", "focused", "error"]);
     return (React.createElement(StyledTextFieldContainer, Object.assign({}, nativeProps, { "$fullWidth": fullWidth, "$focused": focused, "$error": error, ref: ref }), children));
-};
-exports.default = React.forwardRef(TextFieldContainer);
+});
+exports.TextFieldContainer.displayName = 'TextFieldContainer';
+exports.default = exports.TextFieldContainer;

package/TextField/TextFieldErrorText.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface TextFieldErrorTextProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly error?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare const TextFieldErrorText: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+export default TextFieldErrorText;

package/TextField/TextFieldErrorText.js

@@ -37,12 +37,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldErrorText = void 0;
 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;
@@ -54,7 +54,7 @@ const ErrorTextInner = styled_1.default.div `
   opacity: ${({ $error }) => ($error ? 1 : 0)};
   transition: all 240ms 240ms ease-out;
 `;
-const TextFieldErrorText = (props, ref) => {
+exports.TextFieldErrorText = React.forwardRef((props, ref) => {
     const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
     const innerRef = React.useRef(null);
     const [maxHeight, setMaxHeight] = React.useState('initial');
@@ -72,5 +72,6 @@ const TextFieldErrorText = (props, ref) => {
     }, [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(TextFieldErrorText);
+});
+exports.TextFieldErrorText.displayName = 'TextFieldErrorText';
+exports.default = exports.TextFieldErrorText;

package/TextField/TextFieldIconWrapper.d.ts

@@ -7,12 +7,12 @@ export type TextFieldIconWrapperProps = React.InputHTMLAttributes<HTMLDivElement
     readonly error?: boolean;
     readonly focused?: boolean;
 };
-declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
+export declare const TextFieldIconWrapper: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
     /**
      * Icon position
      */
-    readonly position: "start" | "end";
+    readonly position: 'start' | 'end';
     readonly error?: boolean | undefined;
     readonly focused?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export default TextFieldIconWrapper;

package/TextField/TextFieldIconWrapper.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldIconWrapper = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
@@ -66,8 +67,9 @@ const IconWrapper = styled_1.default.div `
     box-shadow: none;
   }
 `;
-const TextFieldIconWrapper = (props, ref) => {
+exports.TextFieldIconWrapper = React.forwardRef((props, ref) => {
     const { children, position, focused, error } = props, nativeProps = __rest(props, ["children", "position", "focused", "error"]);
     return (React.createElement(IconWrapper, Object.assign({}, nativeProps, { "$position": position, "$error": error, "$focused": focused, ref: ref }), children));
-};
-exports.default = React.forwardRef(TextFieldIconWrapper);
+});
+exports.TextFieldIconWrapper.displayName = 'TextFieldIconWrapper';
+exports.default = exports.TextFieldIconWrapper;

package/TextField/TextFieldInput.d.ts

@@ -3,5 +3,5 @@ export interface TextFieldInputProps extends React.InputHTMLAttributes<HTMLInput
     readonly hasStartIcon: boolean;
     readonly hasEndIcon: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+export declare const TextFieldInput: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export default TextFieldInput;

package/TextField/TextFieldInput.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldInput = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
@@ -64,8 +65,9 @@ const Input = styled_1.default.input `
     font-style: italic;
   }
 `;
-const TextFieldInput = (props, ref) => {
+exports.TextFieldInput = React.forwardRef((props, ref) => {
     const { hasEndIcon, hasStartIcon } = props, nativeProps = __rest(props, ["hasEndIcon", "hasStartIcon"]);
-    return React.createElement(Input, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref }));
-};
-exports.default = React.forwardRef(TextFieldInput);
+    return (React.createElement(Input, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref })));
+});
+exports.TextFieldInput.displayName = 'TextFieldInput';
+exports.default = exports.TextFieldInput;

package/TextField/TextFieldInputWrapper.d.ts

@@ -5,10 +5,10 @@ export type TextFieldInputWrapperProps = React.HTMLAttributes<HTMLDivElement> &
     readonly readOnly?: boolean;
     readonly focused?: boolean;
 };
-declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const TextFieldInputWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly error?: boolean | undefined;
     readonly fullWidth?: boolean | undefined;
     readonly readOnly?: boolean | undefined;
     readonly focused?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export default TextFieldInputWrapper;

package/TextField/TextFieldInputWrapper.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldInputWrapper = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
@@ -69,8 +70,9 @@ const Wrapper = styled_1.default.div `
       }
     `}
 `;
-const TextFieldInputWrapper = (props, ref) => {
+exports.TextFieldInputWrapper = React.forwardRef((props, ref) => {
     const { focused, error, readOnly, fullWidth, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "children"]);
     return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), ref: ref }), children));
-};
-exports.default = React.forwardRef(TextFieldInputWrapper);
+});
+exports.TextFieldInputWrapper.displayName = 'TextFieldInputWrapper';
+exports.default = exports.TextFieldInputWrapper;

package/TextField/TextFieldLabel.d.ts

@@ -3,5 +3,5 @@ export interface TextFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabel
     readonly error?: boolean;
     readonly focused?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
-export default _default;
+export declare const TextFieldLabel: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export default TextFieldLabel;

package/TextField/TextFieldLabel.js

@@ -37,14 +37,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldLabel = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Label = styled_1.default.label `
   font-size: 0.8em;
   margin-bottom: 0.2em;
 `;
-const TextFieldLabel = (props, ref) => {
+exports.TextFieldLabel = React.forwardRef((props, ref) => {
     const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
     return (React.createElement(Label, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
-};
-exports.default = React.forwardRef(TextFieldLabel);
+});
+exports.TextFieldLabel.displayName = 'TextFieldLabel';
+exports.default = exports.TextFieldLabel;

package/TextField/TextFieldLabelAsterisk.d.ts

@@ -9,5 +9,5 @@ export interface TextFieldLabelAsteriskProps extends React.HTMLAttributes<HTMLSp
      */
     readonly focused?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
-export default _default;
+export declare const TextFieldLabelAsterisk: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+export default TextFieldLabelAsterisk;

package/TextField/TextFieldLabelAsterisk.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldLabelAsterisk = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Asterisk = styled_1.default.span `
@@ -44,8 +45,9 @@ const Asterisk = styled_1.default.span `
   margin-left: 0.2em;
   color: ${({ theme }) => theme.color.error.toString()};
 `;
-const TextFieldLabelAsterisk = (props, ref) => {
+exports.TextFieldLabelAsterisk = React.forwardRef((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(TextFieldLabelAsterisk);
+});
+exports.TextFieldLabelAsterisk.displayName = 'TextFieldLabelAsterisk';
+exports.default = exports.TextFieldLabelAsterisk;

package/TextField/index.d.ts

@@ -6,6 +6,13 @@ import { TextFieldInputWrapperProps } from './TextFieldInputWrapper';
 import { TextFieldInputProps } from './TextFieldInput';
 import { TextFieldErrorTextProps } from './TextFieldErrorText';
 import { TextFieldIconWrapperProps } from './TextFieldIconWrapper';
+export * from './TextFieldContainer';
+export * from './TextFieldLabel';
+export * from './TextFieldLabelAsterisk';
+export * from './TextFieldInputWrapper';
+export * from './TextFieldInput';
+export * from './TextFieldErrorText';
+export * from './TextFieldIconWrapper';
 export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
      * If true then `errorText` value will be displayed under the TextField element
@@ -76,5 +83,5 @@ export interface TextFieldOverrides {
      */
     readonly Container?: React.ComponentType<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

package/TextField/index.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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);
+};
 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)
@@ -45,7 +48,23 @@ const TextFieldInputWrapper_1 = __importDefault(require("./TextFieldInputWrapper
 const TextFieldInput_1 = __importDefault(require("./TextFieldInput"));
 const TextFieldErrorText_1 = __importDefault(require("./TextFieldErrorText"));
 const TextFieldIconWrapper_1 = __importDefault(require("./TextFieldIconWrapper"));
-const TextField = (props, ref) => {
+__exportStar(require("./TextFieldContainer"), exports);
+__exportStar(require("./TextFieldLabel"), exports);
+__exportStar(require("./TextFieldLabelAsterisk"), exports);
+__exportStar(require("./TextFieldInputWrapper"), exports);
+__exportStar(require("./TextFieldInput"), exports);
+__exportStar(require("./TextFieldErrorText"), exports);
+__exportStar(require("./TextFieldIconWrapper"), exports);
+const defailtOverrides = {
+    Label: TextFieldLabel_1.default,
+    Input: TextFieldInput_1.default,
+    Asterisk: TextFieldLabelAsterisk_1.default,
+    Container: TextFieldContainer_1.default,
+    ErrorText: TextFieldErrorText_1.default,
+    IconWrapper: TextFieldIconWrapper_1.default,
+    InputWrapper: TextFieldInputWrapper_1.default,
+};
+const TextField = React.forwardRef((props, ref) => {
     const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     const inputID = React.useMemo(() => {
@@ -53,19 +72,21 @@ const TextField = (props, ref) => {
             return id;
         }
         const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        const guid = [
+        return [
             u.substring(0, 8),
             u.substring(8, 12),
             '4000-8' + u.substring(13, 16),
             u.substring(16, 28),
         ].join('-');
-        return guid;
     }, [id]);
+    const stableOnChange = React.useCallback(onChange ? onChange : () => undefined, [onChange]); // уже есть
+    // const stableOnFocus = React.useCallback(onFocus, [onFocus]); // уже есть
+    // const stableOnBlur = React.useCallback(onBlur, [onBlur]); // уже есть
     const inputChange = React.useCallback(event => {
-        if (onChange) {
-            onChange(event);
+        if (stableOnChange) {
+            stableOnChange(event);
         }
-    }, [onChange]);
+    }, [stableOnChange]);
     const inputFocus = React.useCallback(event => {
         setFocused(true);
         if (typeof onFocus === 'function') {
@@ -80,23 +101,29 @@ const TextField = (props, ref) => {
     }, [onBlur]);
     const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
     const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
-    const overridesMap = React.useMemo(() => ({
-        Label: (overrides === null || overrides === void 0 ? void 0 : overrides.Label) || TextFieldLabel_1.default,
-        Input: (overrides === null || overrides === void 0 ? void 0 : overrides.Input) || TextFieldInput_1.default,
-        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || TextFieldLabelAsterisk_1.default,
-        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || TextFieldContainer_1.default,
-        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || TextFieldErrorText_1.default,
-        IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || TextFieldIconWrapper_1.default,
-        InputWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.InputWrapper) || TextFieldInputWrapper_1.default,
-    }), [overrides]);
-    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
-        typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, defailtOverrides), overrides)), [overrides]);
+    const renderAsterisk = React.useCallback(() => {
+        if (!requiredAsterisk) {
+            return null;
+        }
+        return (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk));
+    }, [overridesMap, requiredAsterisk]);
+    const renderLabel = React.useCallback(() => {
+        if (!label) {
+            return null;
+        }
+        return (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
             label,
-            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            renderAsterisk()));
+    }, [error, inputID, label, overridesMap, renderAsterisk]);
+    const renderIcon = React.useCallback((position, icon) => (React.createElement(overridesMap.IconWrapper, { position: position }, icon)), [overridesMap]);
+    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
+        renderLabel(),
         React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
-            hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
+            hasStartIcon && renderIcon('start', startIcon),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
-            hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),
+            hasEndIcon && renderIcon('end', endIcon)),
         React.createElement(overridesMap.ErrorText, { error: error }, errorText)));
-};
-exports.default = React.forwardRef(TextField);
+});
+TextField.displayName = 'TextField';
+exports.default = React.memo(TextField);

package/ThemeProvider/createTheme.js

@@ -39,9 +39,9 @@ const createTheme = overrides => {
         successContrast: '#ffffff',
     };
     Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
-        theme.color[colorName] = new Color_1.default(colorValue);
+        theme.color[colorName] = Color_1.default.fromString(colorValue);
     });
-    theme.color.test = new Color_1.default('red');
+    theme.color.test = Color_1.default.fromString('red');
     return theme;
 };
 exports.createTheme = createTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.2.1-alpha.1",
+  "version": "0.2.2",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/Calendar/reducer.d.ts

@@ -1,17 +0,0 @@
-import { CalendarValue } from './use-calendar';
-export type State<Range extends boolean | undefined = undefined> = {
-    readonly calendarDate: Date;
-    readonly calendarValue: CalendarValue<Range>;
-    readonly calendarCurrentView: CalendarView;
-    readonly calendarViewVariants: readonly CalendarView[];
-};
-export type CalendarView = 'days' | 'months' | 'years';
-export declare const createDefaultState: <Range_1 extends boolean | undefined = undefined>(range?: Range_1 | undefined, params?: {
-    views?: readonly CalendarView[];
-    initialView?: CalendarView;
-}) => State<Range_1>;
-export type Action<Range extends boolean | undefined = undefined> = {
-    readonly type: 'setPartial';
-    readonly payload: Partial<State<Range>>;
-};
-export declare const reducer: <Range_1 extends boolean | undefined = undefined>(state: State<Range_1>, action: Action<Range_1>) => State<Range_1>;

package/Calendar/reducer.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.createDefaultState = void 0;
-const createDefaultState = (range, params) => {
-    const { views, initialView } = params || {};
-    const currentDate = new Date();
-    const nextDate = new Date();
-    nextDate.setDate(nextDate.getDate() + 3);
-    let calendarViewVariants = ['days', 'months', 'years'];
-    let calendarCurrentView = 'days';
-    if (views && typeof initialView === 'string') {
-        if (!views.includes(initialView)) {
-            throw new Error(`Property views must be contained prperty initialView`);
-        }
-        calendarCurrentView = initialView;
-        calendarViewVariants = views;
-    }
-    if (views && typeof initialView !== 'string') {
-        if (views.includes('days')) {
-            calendarCurrentView = 'days';
-            calendarViewVariants = views;
-        }
-        else {
-            calendarCurrentView = views[0];
-            calendarViewVariants = views;
-        }
-    }
-    if (!views && typeof initialView === 'string') {
-        calendarViewVariants = ['days', 'months', 'years'];
-        calendarCurrentView = initialView;
-    }
-    return {
-        calendarValue: range
-            ? [currentDate, nextDate]
-            : new Date(),
-        calendarDate: range ? currentDate : new Date(),
-        calendarCurrentView,
-        calendarViewVariants,
-    };
-};
-exports.createDefaultState = createDefaultState;
-const reducer = (state, action) => {
-    switch (action.type) {
-        case 'setPartial':
-            return Object.assign(Object.assign({}, state), action.payload);
-        default:
-            return state;
-    }
-};
-exports.reducer = reducer;