@via-profit/ui-kit 0.1.0-rc.14 → 0.1.0-rc.16

package/Button/ButtonBase.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+import { ButtonIconWrapperProps } from './ButtonIconWrapper';
+import { ButtonTextWrapperProps } from './ButtonTextWrapper';
+import { ButtonContainerProps } from './ButtonContainer';
 type ButtonNativeProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
     /**
@@ -24,7 +27,25 @@ export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
-    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    readonly color?: ButtonContainerProps['color'];
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: ButtonBaseOverrides;
+}
+export interface ButtonBaseOverrides {
+    /**
+     * Start icon wrapper
+     */
+    readonly Container?: React.ForwardRefExoticComponent<ButtonContainerProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Start icon wrapper
+     */
+    readonly IconWrapper?: React.ForwardRefExoticComponent<ButtonIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * text wrapper
+     */
+    readonly TextWrapper?: React.ForwardRefExoticComponent<ButtonTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonBase.js

@@ -15,39 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const ButtonStartIconWrapper_1 = __importDefault(require("./ButtonStartIconWrapper"));
-const ButtonEndIconWrapper_1 = __importDefault(require("./ButtonEndIconWrapper"));
+const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
 const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
-const Button = styled_1.default.button `
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  padding: 0.8em 1em;
-  font-size: 0.8rem;
-  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  font-size: 1em;
-  border-width: 0;
-  outline-style: solid;
-  outline-color: transparent;
-  outline-width: 0.14em;
-  transition: all 180ms ease-out 0s;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  color: ${({ color, disabled, theme }) => {
-    switch (true) {
-        case disabled:
-            return theme.colors.textSecondary.alpha(0.8).toString();
-        case !disabled && typeof color === 'undefined':
-        default:
-            return theme.colors.textPrimary.toString();
-    }
-}};
-`;
+const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon, color } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon", "color"]);
-    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(ButtonStartIconWrapper_1.default, null, startIcon)),
-        react_1.default.createElement(ButtonTextWrapper_1.default, null, children),
-        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(ButtonEndIconWrapper_1.default, null, endIcon))));
+    const { children, startIcon, endIcon, color, overrides } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides"]);
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: ButtonTextWrapper_1.default,
+        IconWrapper: ButtonIconWrapper_1.default,
+        Container: ButtonContainer_1.default }, overrides)), [overrides]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
+        react_1.default.createElement(overridesMap.TextWrapper, null, children),
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))));
 };
 exports.default = react_1.default.forwardRef(ButtonBase);

package/Button/ButtonContainer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonContainer.js

@@ -0,0 +1,47 @@
+"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 StyledButton = styled_1.default.button `
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  padding: 0.8em 1em;
+  font-size: 0.8rem;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  color: ${({ color, disabled, theme }) => {
+    switch (true) {
+        case disabled:
+            return theme.color.textSecondary.alpha(0.8).toString();
+        case !disabled && typeof color === 'undefined':
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+`;
+const ButtonContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonContainer);

package/Button/ButtonIconWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ButtonIconWrapperProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * Icon position
+     */
+    readonly position: 'start' | 'end';
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * Icon position
+     */
+    readonly position: "end" | "start";
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Button/ButtonIconWrapper.js

@@ -0,0 +1,34 @@
+"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 Wrapper = styled_1.default.span `
+  ${({ $position }) => $position === 'start' &&
+    (0, react_2.css) `
+      margin-right: 0.8em;
+    `};
+  ${({ $position }) => $position === 'end' &&
+    (0, react_2.css) `
+      margin-left: 0.8em;
+    `};
+`;
+const ButtonIconWrapper = (props, ref) => {
+    const { children, position } = props, nativeProps = __rest(props, ["children", "position"]);
+    return (react_1.default.createElement(Wrapper, Object.assign({ "$position": position }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonIconWrapper);

package/Button/ButtonOutlined.js

@@ -23,7 +23,7 @@ const StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
   color: ${({ theme, disabled, $color }) => {
     switch (true) {
         case disabled:
-            return theme.colors.textPrimary.alpha(0.4).toString();
+            return theme.color.textPrimary.alpha(0.4).toString();
         default:
             return $color.darken(30).toString();
     }
@@ -31,7 +31,7 @@ const StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
   border-color: ${({ theme, disabled, $color }) => {
     switch (true) {
         case disabled:
-            return theme.colors.surface.darken(80).alpha(0.4).toString();
+            return theme.color.surface.darken(80).alpha(0.4).toString();
         default:
             return $color.toString();
     }
@@ -48,9 +48,9 @@ const StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
         background-color: ${$color.darken(50).alpha(0.3).toString()};
       }
       &:focus-visible {
-        outline-color: ${$color.rgbString() === theme.colors.accentPrimary.rgbString()
-        ? theme.colors.textPrimary.toString()
-        : theme.colors.accentPrimary.toString()};
+        outline-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
       }
     `};
 `;
@@ -60,14 +60,14 @@ const ButtonOutlined = (props, ref) => {
     const $color = react_1.default.useMemo(() => {
         switch (true) {
             case color === 'primary':
-                return theme.colors.accentPrimary;
+                return theme.color.accentPrimary;
             case color === 'secondary':
-                return theme.colors.accentSecondary;
+                return theme.color.accentSecondary;
             case typeof color === 'undefined':
             case color === 'default':
-                return theme.colors.textPrimary;
+                return theme.color.textPrimary;
             case typeof color === 'string': {
-                let c = theme.colors.textPrimary;
+                let c = theme.color.textPrimary;
                 try {
                     if (color) {
                         c = new Color_1.default(color);
@@ -79,9 +79,9 @@ const ButtonOutlined = (props, ref) => {
                 return c;
             }
             default:
-                return theme.colors.textPrimary;
+                return theme.color.textPrimary;
         }
-    }, [color, theme.colors]);
+    }, [color, theme.color]);
     return (react_1.default.createElement(StyledOutlinedButton, Object.assign({ disabled: disabled, "$color": $color }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonOutlined);

package/Button/ButtonStandard.js

@@ -54,9 +54,9 @@ const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
         background-color: ${$background.darken(80).toString()};
       }
       &:focus-visible {
-        outline-color: ${$background.rgbString() === theme.colors.accentPrimary.rgbString()
-        ? theme.colors.textPrimary.toString()
-        : theme.colors.accentPrimary.toString()};
+        outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
       }
     `}
 `;
@@ -67,22 +67,22 @@ const ButtonStandard = (props, ref) => {
         switch (true) {
             case color === 'primary':
                 return {
-                    $color: theme.colors.accentPrimaryContrast,
-                    $background: theme.colors.accentPrimary,
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
                 };
             case color === 'secondary':
                 return {
-                    $color: theme.colors.accentSecondaryContrast,
-                    $background: theme.colors.accentSecondary,
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
                 };
             case typeof color === 'undefined':
             case color === 'default':
                 return {
-                    $background: theme.colors.surface,
-                    $color: theme.colors.textPrimary,
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
                 };
             case typeof color === 'string': {
-                let $background = theme.colors.surface;
+                let $background = theme.color.surface;
                 try {
                     if (color) {
                         $background = new Color_1.default(color);
@@ -93,18 +93,18 @@ const ButtonStandard = (props, ref) => {
                 }
                 return {
                     $background,
-                    $color: $background.contrast(theme.colors.textPrimary.rgbString()) > 5
-                        ? theme.colors.textPrimary
-                        : theme.colors.surface,
+                    $color: $background.contrast(theme.color.textPrimary.rgbString()) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
                 };
             }
             default:
                 return {
-                    $background: theme.colors.surface,
-                    $color: theme.colors.textPrimary,
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
                 };
         }
-    }, [color, theme.colors]);
+    }, [color, theme.color]);
     return (react_1.default.createElement(StyledStandardButton, Object.assign({ "$color": $color, "$background": $background, disabled: disabled }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/ButtonTextWrapper.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-declare const ButtonTextWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export default ButtonTextWrapper;
+import React from 'react';
+export type ButtonTextWrapperProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<ButtonTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Button/ButtonTextWrapper.js

@@ -1,12 +1,29 @@
 "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 ButtonTextWrapper = styled_1.default.span `
+const TextWrapper = styled_1.default.span `
   font-size: 0.86em;
   display: flex;
   align-items: center;
+  user-select: none;
 `;
-exports.default = ButtonTextWrapper;
+const ButtonTextWrapper = (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(ButtonTextWrapper);

package/Calendar/CalendarCell.d.ts

@@ -4,5 +4,5 @@ export interface CalendarCellProps extends React.ButtonHTMLAttributes<HTMLButton
     readonly isSelected?: boolean;
     readonly isDisabled?: boolean;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarCell.js

@@ -28,27 +28,27 @@ const Btn = styled_1.default.button `
   outline: none;
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
   border: 1px solid transparent;
-  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.colors.accentPrimary.toString() : theme.colors.surface.toString()};
+  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.color.accentPrimary.toString() : theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
     if ($isDisabled) {
-        return theme.colors.textSecondary.toString();
+        return theme.color.textSecondary.toString();
     }
     if ($isSelected) {
-        return theme.colors.accentPrimaryContrast.toString();
+        return theme.color.accentPrimaryContrast.toString();
     }
     if ($isToday) {
-        return theme.colors.accentPrimary.toString();
+        return theme.color.accentPrimary.toString();
     }
-    return theme.colors.textPrimary.toString();
+    return theme.color.textPrimary.toString();
 }};
   &:hover {
     background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary.darken(10).toString()
-    : theme.colors.surface.darken(10).toString()};
+    ? theme.color.accentPrimary.darken(10).toString()
+    : theme.color.surface.darken(10).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary.toString()};
+    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.color.accentPrimary.toString()};
   }
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
 `;
@@ -56,4 +56,4 @@ const CalendarCell = (props, ref) => {
     const { isToday, children, isSelected, isDisabled } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled"]);
     return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref, tabIndex: isDisabled ? -1 : restProps.tabIndex, "$isToday": Boolean(isToday), "$isSelected": Boolean(isSelected), "$isDisabled": Boolean(isDisabled) }), children));
 };
-exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarCell));
+exports.default = react_1.default.forwardRef(CalendarCell);

package/Calendar/CalendarEmptyCell.d.ts

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

package/Calendar/CalendarEmptyCell.js

@@ -26,4 +26,4 @@ const CalendarEmptyCell = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);
     return (react_1.default.createElement(Elem, Object.assign({}, restProps, { ref: ref }), children));
 };
-exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarEmptyCell));
+exports.default = react_1.default.forwardRef(CalendarEmptyCell);

package/Calendar/CalendarMonthControl.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export interface CalendarMonthControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     readonly displayIcon: 'prev' | 'next';
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarMonthControl.js

@@ -31,14 +31,14 @@ const Btn = styled_1.default.button `
   outline: none;
   cursor: pointer;
   border: 1px solid transparent;
-  background-color: ${({ theme }) => theme.colors.surface.toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
-  color: ${({ theme }) => theme.colors.textPrimary.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.surface.darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.color.surface.darken(0.1).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme }) => theme.colors.accentPrimary.toString()};
+    border-color: ${({ theme }) => theme.color.accentPrimary.toString()};
   }
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
 `;
@@ -46,4 +46,4 @@ const CalendarMonthControl = (props, ref) => {
     const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
     return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
 };
-exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarMonthControl));
+exports.default = react_1.default.forwardRef(CalendarMonthControl);

package/Calendar/CalendarPaper.js

@@ -9,11 +9,11 @@ const CalendarPaper = styled_1.default.div `
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  background-color: ${({ theme }) => theme.colors.surface.toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
   padding: 0.4em;
   max-width: 17.6em;
   max-height: 20.4em;
-  box-shadow: 0 4px 24px ${({ theme }) => theme.colors.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
 `;
 exports.default = CalendarPaper;

package/Calendar/CalendarTopBar.d.ts

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

package/Calendar/CalendarTopBar.js

@@ -27,4 +27,4 @@ const CalendarTopBar = (props, ref) => {
     return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }),
         react_1.default.createElement(react_1.default.Fragment, null, children)));
 };
-exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarTopBar));
+exports.default = react_1.default.forwardRef(CalendarTopBar);

package/Calendar/CalendarWeekDayLabel.js

@@ -12,6 +12,6 @@ const CalendarWeekDayLabel = styled_1.default.div `
   user-select: none;
   width: 3em;
   height: 3em;
-  color: ${({ theme }) => theme.colors.textSecondary.toString()};
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;
 exports.default = react_1.default.memo(CalendarWeekDayLabel);

package/Calendar/CalendarWeekDaysBar.d.ts

@@ -6,5 +6,5 @@ export interface CalendarTopBarProps extends React.HTMLAttributes<HTMLDivElement
     readonly format: WeekNameLabelFormat;
     readonly locale?: string;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/CalendarWeekDaysBar.js

@@ -29,4 +29,4 @@ const CalendarWeekDaysBar = (props, ref) => {
     }).format(day.date)), [format, locale, week]);
     return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
 };
-exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarWeekDaysBar));
+exports.default = react_1.default.forwardRef(CalendarWeekDaysBar);

package/Color/index.d.ts

@@ -7,30 +7,107 @@ export type ParsedColor = {
 declare class Color {
     #private;
     constructor(value: string | Color);
+    /**
+     * Lightens the current color by the \
+     * transmitted number of conventional units.\
+     * \
+     * Example:
+     * ```tsx
+     * const color = theme.colors
+     *   .accentPrimary
+     *   .lighten(60)
+     *   .toString();
+     * ```
+     *
+     */
     lighten(decimal: number): this;
+    /**
+     * Darkens the current color by\
+     * the transmitted number of conventional units.
+     * \
+     * Example:
+     * ```tsx
+     * const color = theme.colors
+     *   .accentPrimary
+     *   .darken(60)
+     *   .toString();
+     * ```
+     */
     darken(decimal: number): this;
+    /**
+     * Applies transparency (alpha channel) to the current color\
+     * Takes as an argument a number from 0 to 1
+     * \
+     * Example:
+     * ```tsx
+     * const color = theme.colors
+     *   .accentPrimary
+     *   .alpha(0.5)
+     *   .toString();
+     * ```
+     */
     alpha(decimal: number): this;
     /**
-     * Get color luminance value
+     * Returns color luminance value
      */
     luminance(): number;
+    /**
+     * Returns the contrast level between the\
+     * current and transmitted colors
+     * \
+     * Example:
+     * ```tsx
+     * const { colors } = themes;
+     * const contrast = colors
+     *   .accentPrimary
+     *   .contrast(color.textPrimary.rgbString());
+     *
+     * if (contrast > 5) {
+     *   return color.textPrimary.toString();
+     * } else {
+     *   return color.textSecondary.toString()
+     * }
+     * ```
+     */
     contrast(rgb2: string | Color): number;
     /**
      * Lighten or darknest color to lum steps
      * lum - 0-25
      */
     private shade;
+    /**
+     * Returns the current color as separate rgb channels
+     */
     rgb(): {
         r: number;
         g: number;
         b: number;
         a: number;
     };
+    /**
+     * Returns the current color as an rgba string
+     */
     toString(): string;
+    /**
+     * Returns the current color as an rgba string
+     */
     rgbString(): string;
+    /**
+     * Returns the current color as an hex string
+     */
     hexString(): string;
+    /**
+     * Parse the transmitted color and returns its\
+     * representation as separate rgba channels
+     */
     private parseColor;
+    /**
+     * Recodes the transmitted color value in hsl format to rgba
+     */
     private hslToRgb;
+    /**
+     * Returns color code by web color name
+     */
     private getHextByWebColor;
 }
 export default Color;