@via-profit/ui-kit 0.1.0-rc.1 → 0.1.0-rc.11

package/Button/ButtonAccent.d.ts

@@ -0,0 +1,11 @@
+declare module '@via-profit/ui-kit/Button/ButtonAccent' {
+  import '@via-profit/ui-kit';
+
+  import { ButtonBaseProps } from '@via-profit/ui-kit/Button/ButtonBase';
+
+  export type ButtonAccentProps = ButtonBaseProps;
+
+  const ButtonAccent: React.FC<ButtonAccentProps>;
+
+  export default ButtonAccent;
+}

package/Button/ButtonAccent.js

@@ -0,0 +1,45 @@
+"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const Button = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled }) => disabled
+    ? theme.colors.textPrimary.alpha(0.4).toString()
+    : theme.colors.accentPrimaryContrast.toString()};
+  background-color: ${({ theme, disabled }) => disabled ? theme.colors.surface.darken(30).toString() : theme.colors.accentPrimary.toString()};
+
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      box-shadow: 0 2px 12px ${theme.colors.accentPrimary.darken(60).alpha(0.3).toString()};
+      &:hover {
+        background-color: ${theme.colors.accentPrimary.darken(20).toString()};
+      }
+      &:active {
+        background-color: ${theme.colors.accentPrimary.darken(30).toString()};
+      }
+      &:focus-visible {
+        outline: 2px solid ${theme.colors.accentPrimary.darken(20).toString()};
+      }
+    `};
+`;
+const ButtonAccent = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Button, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonAccent);

package/Button/ButtonBase.d.ts

@@ -0,0 +1,12 @@
+declare module '@via-profit/ui-kit/Button/ButtonBase' {
+  import '@via-profit/ui-kit';
+
+  export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly startIcon?: JSX.Element;
+    readonly endIcon?: JSX.Element;
+  }
+
+  const ButtonBase: React.FC<ButtonBaseProps>;
+
+  export default ButtonBase;
+}

package/{dist/Button → Button}/ButtonBase.js

@@ -16,23 +16,28 @@ 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 StartIconWrapper_1 = __importDefault(require("./components/StartIconWrapper"));
+const EndIconWrapper_1 = __importDefault(require("./components/EndIconWrapper"));
+const TextWrapper_1 = __importDefault(require("./components/TextWrapper"));
 const Button = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
-  cursor: pointer;
+  font-size: 0.8rem;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   border: 0;
   outline: transparent;
   transition: all 180ms ease-out 0s;
   background: none;
   color: currentColor;
-`;
-const ButtonText = styled_1.default.span `
-  font-size: 0.86em;
+  display: inline-flex;
+  align-items: center;
 `;
 const ButtonBase = (props, ref) => {
-    const { children } = props, otherProps = __rest(props, ["children"]);
+    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
     return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        react_1.default.createElement(ButtonText, null, children)));
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper_1.default, null, startIcon)),
+        react_1.default.createElement(TextWrapper_1.default, null, children),
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper_1.default, null, endIcon))));
 };
 exports.default = react_1.default.forwardRef(ButtonBase);

package/Button/ButtonStandard.d.ts

@@ -0,0 +1,11 @@
+declare module '@via-profit/ui-kit/Button/ButtonStandard' {
+  import '@via-profit/ui-kit';
+
+  import { ButtonBaseProps } from '@via-profit/ui-kit/Button/ButtonBase';
+
+  export type ButtonStandardProps = ButtonBaseProps;
+
+  const ButtonStandard: React.FC<ButtonStandardProps>;
+
+  export default ButtonStandard;
+}

package/Button/ButtonStandard.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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
+/**
+ * Standard
+ */
+const StyledButtonBase = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled }) => disabled
+    ? theme.colors.textPrimary.alpha(0.4).toString()
+    : theme.colors.textPrimary.toString()};
+  background-color: ${({ theme, disabled }) => disabled
+    ? theme.colors.surface.darken(10).toString()
+    : theme.isDark
+        ? theme.colors.surface.toString()
+        : theme.colors.surface.toString()};
+
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      box-shadow: 0 2px 12px ${theme.colors.surface.darken(40).alpha(0.6).toString()};
+      &:hover {
+        background-color: ${theme.colors.surface.darken(20).toString()};
+      }
+      &:active {
+        background-color: ${theme.colors.surface.darken(40).toString()};
+      }
+      &:focus-visible {
+        outline: 2px solid ${theme.colors.accentPrimary.toString()};
+      }
+    `}
+`;
+const ButtonStandard = (props, ref) => {
+    const { children, disabled } = props, restProps = __rest(props, ["children", "disabled"]);
+    return (react_1.default.createElement(StyledButtonBase, Object.assign({ disabled: disabled }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/components/EndIconWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const EndIconWrapper = styled_1.default.span `
+  margin-left: 0.8em;
+`;
+exports.default = EndIconWrapper;

package/Button/components/StartIconWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StartIconWrapper = styled_1.default.span `
+  margin-right: 0.8em;
+`;
+exports.default = StartIconWrapper;

package/Button/components/TextWrapper.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+`;
+exports.default = TextWrapper;

package/Button/index.d.ts

@@ -0,0 +1,14 @@
+declare module '@via-profit/ui-kit/Button' {
+  import { ButtonAccentProps } from '@via-profit/ui-kit/Button/ButtonAccent';
+  import { ButtonStandardProps } from '@via-profit/ui-kit/Button/ButtonStandard';
+
+  export interface BaseProps {
+    readonly variant?: 'standard' | 'accent';
+  }
+
+  export type ButtonProps = (ButtonStandardProps | ButtonAccentProps) & BaseProps;
+
+  const Button: React.FC<ButtonProps>;
+
+  export default Button;
+}

package/{dist/Calendar → Calendar}/CalendarCell.js

@@ -28,29 +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.backgroundPrimary().toString()};
+  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.colors.accentPrimary.toString() : theme.colors.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
     if ($isDisabled) {
-        return theme.colors.textSecondary().toString();
+        return theme.colors.textSecondary.toString();
     }
     if ($isSelected) {
-        return theme.colors.accentPrimaryContrast().toString();
+        return theme.colors.accentPrimaryContrast.toString();
     }
     if ($isToday) {
-        return theme.colors.accentPrimary().toString();
+        return theme.colors.accentPrimary.toString();
     }
-    return theme.colors.textPrimary().toString();
+    return theme.colors.textPrimary.toString();
 }};
   &:hover {
     background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary().darken(0.1).toString()
-    : theme.colors.backgroundPrimary().darken(0.1).toString()};
+    ? theme.colors.accentPrimary.darken(10).toString()
+    : theme.colors.surface.darken(10).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary().toString()};
+    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary.toString()};
   }
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
 `;

package/{dist/Calendar → 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.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
-  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.surface.darken(0.1).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme }) => theme.colors.accentPrimary().toString()};
+    border-color: ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
 `;

package/{dist/Calendar → Calendar}/CalendarPaper.js

@@ -9,12 +9,11 @@ const CalendarPaper = styled_1.default.div `
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.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.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+  box-shadow: 0 4px 24px ${({ theme }) => theme.colors.surface.darken(50).alpha(0.6).toString()};
 `;
 exports.default = CalendarPaper;

package/{dist/Calendar → 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.colors.textSecondary.toString()};
 `;
 exports.default = react_1.default.memo(CalendarWeekDayLabel);

package/{dist/color → Color}/Color.js

@@ -10,12 +10,19 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Color_color;
+var _Color_color, _Color_cache;
 Object.defineProperty(exports, "__esModule", { value: true });
 class Color {
     constructor(value) {
         _Color_color.set(this, void 0);
-        __classPrivateFieldSet(this, _Color_color, this.parseColor(value), "f");
+        _Color_cache.set(this, void 0);
+        if (value instanceof Color) {
+            __classPrivateFieldSet(this, _Color_color, Object.assign({}, value.rgb()), "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _Color_color, this.parseColor(value), "f");
+        }
+        __classPrivateFieldSet(this, _Color_cache, Object.assign({}, __classPrivateFieldGet(this, _Color_color, "f")), "f");
         return this;
     }
     lighten(decimal) {
@@ -61,20 +68,28 @@ class Color {
         return this;
     }
     rgb() {
-        return __classPrivateFieldGet(this, _Color_color, "f");
+        const result = Object.assign({}, __classPrivateFieldGet(this, _Color_color, "f"));
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     toString() {
-        return this.rgbString();
+        const result = this.rgbString();
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     rgbString() {
-        return `rgba(${__classPrivateFieldGet(this, _Color_color, "f").r}, ${__classPrivateFieldGet(this, _Color_color, "f").g}, ${__classPrivateFieldGet(this, _Color_color, "f").b}, ${__classPrivateFieldGet(this, _Color_color, "f").a})`;
+        const result = `rgba(${__classPrivateFieldGet(this, _Color_color, "f").r}, ${__classPrivateFieldGet(this, _Color_color, "f").g}, ${__classPrivateFieldGet(this, _Color_color, "f").b}, ${__classPrivateFieldGet(this, _Color_color, "f").a})`;
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     hexString() {
         const colorToHex = (color) => {
             const hexadecimal = color.toString(16);
             return hexadecimal.length === 1 ? `0${hexadecimal}` : hexadecimal;
         };
-        return '#' + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").r) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").g) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").b);
+        const result = '#' + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").r) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").g) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").b);
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     parseColor(value) {
         const inputColor = value.trim().toLowerCase();
@@ -131,7 +146,7 @@ class Color {
         if (webHex) {
             return this.parseColor(webHex);
         }
-        throw new Error('Failed to parse color');
+        throw new Error(`Failed to parse color value «${value}»`);
     }
     hslToRgb(value) {
         const hsl = value.match(/(\d+(\.\d+)?)/g);
@@ -342,5 +357,5 @@ class Color {
         return webColors[v];
     }
 }
-_Color_color = new WeakMap();
+_Color_color = new WeakMap(), _Color_cache = new WeakMap();
 exports.default = Color;

package/Color/index.d.ts

@@ -0,0 +1,27 @@
+declare module '@via-profit/ui-kit/Color' {
+  export type ParsedColor = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+
+  export interface ColorInterface {
+    parseColor(value: string | Color): ParsedColor;
+    shade(decimal: number): this;
+    alpha(decimal: number): this;
+    lighten(decimal: number): this;
+    darken(decimal: number): this;
+    getHextByWebColor(value: string): string;
+    rgb(): ParsedColor;
+    rgbString(): string;
+    hexString(): string;
+    toString(): string;
+    luminance(): number;
+    contrast(rgb2: string | Color): number;
+  }
+
+  interface Color extends ColorInterface {}
+
+  class Color implements Color {}
+}

package/{dist/Menu → Menu}/MenuItemInner.js

@@ -24,19 +24,19 @@ const InnerContainer = styled_1.default.div `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
   background-color: ${({ theme, selected, hovered }) => {
     if (selected && hovered) {
-        return theme.colors.accentPrimary().darken(0.1).toString();
+        return theme.colors.accentPrimary.darken(0.1).toString();
     }
     if (selected) {
-        return theme.colors.accentPrimary().toString();
+        return theme.colors.accentPrimary.toString();
     }
     if (hovered) {
-        return theme.colors.backgroundGrey().darken(0.04).toString();
+        return theme.colors.surface.darken(40).toString();
     }
     return 'inherit';
 }};
   color: ${({ theme, selected }) => {
     if (selected) {
-        return theme.colors.accentPrimaryContrast().toString();
+        return theme.colors.accentPrimaryContrast.toString();
     }
     return 'inherit';
 }};

package/{dist/Menu → Menu}/MenuWrapper.js

@@ -25,10 +25,9 @@ const StyledMenuWrapper = styled_1.default.div `
   transition: visibility 120ms ease-out, opacity 120ms ease-out;
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  box-shadow: 0 4px 24px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+  box-shadow: 0 4px 24px ${({ theme }) => theme.colors.surface.darken(50).alpha(0.6).toString()};
   &:focus {
     outline: none;
   }
@@ -43,20 +42,20 @@ const StyledMenuWrapper = styled_1.default.div `
 
   & ::-webkit-scrollbar-track {
     background: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().darken(0.1).toString()
-    : theme.colors.backgroundPrimary().darken(0.05).toString()};
+    ? theme.colors.backgroundPrimary.darken(10).toString()
+    : theme.colors.backgroundPrimary.darken(5).toString()};
   }
 
   & ::-webkit-scrollbar-thumb {
     background: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundSecondary().lighten(0.3).toString()
-    : theme.colors.backgroundSecondary().darken(0.3).toString()};
+    ? theme.colors.backgroundSecondary.lighten(30).toString()
+    : theme.colors.backgroundSecondary.darken(30).toString()};
     border-radius: 0.3rem;
   }
 
   & ::-webkit-scrollbar-thumb:horizontal:hover,
   & ::-webkit-scrollbar-thumb:vertical:hover {
-    background: ${({ theme }) => theme.colors.accentPrimary().toString()};
+    background: ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
 `;
 const MenuWrapperInner = styled_1.default.div `

package/{dist/Modal → Modal}/ModalConfirmBox.js

@@ -41,7 +41,7 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Button_1 = __importDefault(require("../Button"));
 const Container = styled_1.default.div `
   display: flex;
   flex-flow: column;
@@ -127,7 +127,7 @@ const ModalConfirmBox = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.surface.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/{dist/Modal → Modal}/ModalDialog.js

@@ -78,7 +78,7 @@ const ModalDialog = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.surface.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/{dist/Modal → Modal}/ModalDrawer.js

@@ -41,7 +41,7 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Button_1 = __importDefault(require("../Button"));
 const CloseIcon_1 = __importDefault(require("./CloseIcon"));
 const Container = styled_1.default.div `
   min-height: 2rem;
@@ -76,7 +76,7 @@ const Inner = styled_1.default.div `
 `;
 const CloseButton = (0, styled_1.default)(Button_1.default) `
   margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
-  color: ${props => props.theme.colors.textPrimary().toString()};
+  color: ${props => props.theme.colors.textPrimary.toString()};
   background: none;
   width: auto;
   height: auto;
@@ -131,7 +131,7 @@ const ModalDrawer = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.surface.toString()};
             border-radius: 1em 1em 0 0;
             transform: translate(0, 100%);
             transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

package/{dist/Modal → Modal}/ModalMessageBox.js

@@ -41,7 +41,7 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Button_1 = __importDefault(require("../Button"));
 const Container = styled_1.default.div `
   display: flex;
   flex-flow: column;
@@ -126,7 +126,7 @@ const ModalMessageBox = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.surface.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/{dist/PhoneField → PhoneField}/CountryFlag.js

@@ -32,7 +32,7 @@ const CountryFlagContainer = styled_1.default.span `
   overflow: hidden;
   margin-left: 0.5em;
   margin-right: 0.5em;
-  border: 1px solid ${({ theme }) => theme.colors.textPrimary().alpha(0.8).toString()};
+  border: 1px solid ${({ theme }) => theme.colors.textPrimary.alpha(0.8).toString()};
 `;
 const CountryFlag = props => {
     const { countryCode } = props, otherProps = __rest(props, ["countryCode"]);

package/{dist/PhoneField → PhoneField}/flags/UnknownFlag.js

@@ -28,7 +28,7 @@ const react_1 = require("@emotion/react");
 const UnknownFlag = (props, ref) => {
     const { colors } = (0, react_1.useTheme)();
     return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: colors.backgroundPrimary().toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: colors.textPrimary().toString(), strokeWidth: ".72279" })));
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: colors.surface.toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: colors.textPrimary.toString(), strokeWidth: ".72279" })));
 };
 exports.default = React.forwardRef(UnknownFlag);

package/README.md

@@ -1,17 +1,50 @@
+## Установка.
 
+для работы требуются следующие модули:
+
+- react
+- react-dom
+- @emotion/styled - CSS In JS
+- @emotion/react - CSS In JS React
+- react-modal - Мобальные окна и дроверы
+- react-popper - Выпадающие меню
+- react-window - Виртуализированный список
 
 ```bash
 $ npm install @emotion/react @emotion/styled react react-dom react-modal react-popper react-window
 
 ```
 
-_@types/emotion.d.ts_
+## Темы
 
-```ts
-import { UITheme } from '@via-profit/ui-kit';
+Для переопределения темы оформления в пакете `@emotion/styled` создайте, например в директории `@types`, файл `emotion.d.ts` со следующим содержимым:
 
+```ts
 declare module '@emotion/react' {
+  import { UITheme } from '@via-profit/ui-kit';
+
   export interface Theme extends UITheme {}
 }
+```
+
+Для переопределения темы оформления в пакете `@via-profit/ui-kit` создайте, например в директории `@types`, файл `ui-kit.d.ts` со следующим содержимым:
 
-```
+_@types/emotion.d.ts_
+
+```ts
+declare module '@via-profit/ui-kit' {
+  import {
+    UIThemeOverrideColor as Colors,
+    UIThemeOverrideZIndex as ZIndexes,
+  } from '@via-profit/ui-kit';
+
+  export interface UIThemeOverrideColor extends Colors {
+    readonly drawer: string;
+    readonly drawerContrast: string;
+  }
+
+  export interface UIThemeOverrideZIndex extends ZIndexes {
+    readonly notifications: number;
+  }
+}
+```