@via-profit/ui-kit 0.1.0-rc.12 → 0.1.0-rc.15

package/Autocomplete/index.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { MenuRef, MenuProps, Value } from '../Menu';
+export type AutocompleteProps<T, Multiple extends boolean | undefined = undefined> = AutocompleteMenuProps<T, Multiple>;
+export type AutocompleteContainerRef = HTMLDivElement;
+type AutocompleteMenuProps<T, Multiple extends boolean | undefined = undefined> = Pick<MenuProps<T, Multiple>, 'items' | 'value' | 'estimatedItemSize' | 'endThreshold' | 'overscanCount' | 'getOptionSelected' | 'onEndReached' | 'onSelectItem' | 'renderItem' | 'multiple' | 'zIndex' | 'onRequestClose' | 'isOpen'> & {
+    readonly containerRef?: React.Ref<AutocompleteContainerRef>;
+    readonly itemToString: ItemToString<T, Multiple>;
+    readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
+    readonly onRequestOpen: (event?: FocusEvent | KeyboardEvent | MouseEvent | React.FocusEvent | React.KeyboardEvent | React.MouseEvent) => void;
+    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    readonly filterItems?: (items: readonly T[], data: {
+        readonly query: string;
+        readonly inputValue: string;
+    }) => readonly T[];
+};
+export type ItemToString<T, Multiple> = Multiple extends undefined | false ? (item: T) => string : undefined;
+export type RenderInputProps<T, Multiple extends boolean | undefined = undefined> = {
+    readonly selected: Value<T, Multiple> | null;
+    readonly value: string;
+    readonly inputRef: React.Ref<HTMLInputElement>;
+    readonly onClick: React.MouseEventHandler<HTMLInputElement>;
+    readonly onFocus: React.FocusEventHandler<HTMLInputElement>;
+    readonly onBlur: React.FocusEventHandler<HTMLInputElement>;
+    readonly onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+export type AutocompleteRef<T> = Pick<MenuRef<T>, 'scrollToItem' | 'scrollTo' | 'scrollToFirstSelected' | 'selectItem' | 'highlightIndex' | 'hightlightPrevItem' | 'hightlightNextItem' | 'hightlightFirstItem' | 'hightlightLastItem' | 'selectHightlightedItem' | 'updatePopper'> & {
+    readonly clear: () => void;
+    readonly focus: () => void;
+    readonly blur: () => void;
+    readonly clearInput: () => void;
+};
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "value" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
+    readonly containerRef?: React.Ref<HTMLDivElement> | undefined;
+    readonly itemToString: ItemToString<T, Multiple>;
+    readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
+    readonly onRequestOpen: (event?: MouseEvent | KeyboardEvent | FocusEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
+    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    readonly filterItems?: ((items: readonly T[], data: {
+        readonly query: string;
+        readonly inputValue: string;
+    }) => readonly T[]) | undefined;
+} & {
+    ref?: React.Ref<AutocompleteRef<T>> | undefined;
+}) => JSX.Element;
+export default _default;

package/Autocomplete/popper-options.d.ts

@@ -0,0 +1,4 @@
+import type { usePopper } from 'react-popper';
+export type PopperOptions = Parameters<typeof usePopper>[2];
+export declare const popperOptions: PopperOptions;
+export default popperOptions;

package/Button/ButtonBase.d.ts

@@ -1,12 +1,51 @@
-declare module '@via-profit/ui-kit/Button/ButtonBase' {
-  import '@via-profit/ui-kit';
-
-  export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+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'> {
+    /**
+     * Icon or another JSX element placed before button label\
+     * Example:
+     * ```tsx
+     * <Button startIcon={<MyIconElement />}>
+     *   Label
+     * </Button>
+     * ```
+     */
     readonly startIcon?: JSX.Element;
+    /**
+     * Icon or another JSX element placed after button label
+     * Example:
+     * ```tsx
+     * <Button endIcon={<MyIconElement />}>
+     *   Label
+     * </Button>
+     * ```
+     */
     readonly endIcon?: JSX.Element;
-  }
-
-  const ButtonBase: React.FC<ButtonBaseProps>;
-
-  export default ButtonBase;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    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,29 +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 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;
-  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;
-  display: inline-flex;
-  align-items: center;
-`;
+const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
+const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
+const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
-    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        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))));
+    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.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonOutlinedProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonOutlined.js

@@ -0,0 +1,87 @@
+"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled, $color }) => {
+    switch (true) {
+        case disabled:
+            return theme.color.textPrimary.alpha(0.4).toString();
+        default:
+            return $color.darken(30).toString();
+    }
+}};
+  border-color: ${({ theme, disabled, $color }) => {
+    switch (true) {
+        case disabled:
+            return theme.color.surface.darken(80).alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0.14em;
+  ${({ disabled, $color, theme }) => !disabled &&
+    (0, react_2.css) `
+      &:hover {
+        background-color: ${$color.darken(20).alpha(0.1).toString()};
+      }
+      &:active {
+        background-color: ${$color.darken(50).alpha(0.3).toString()};
+      }
+      &:focus-visible {
+        outline-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+      }
+    `};
+`;
+const ButtonOutlined = (props, ref) => {
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const $color = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+                return theme.color.textPrimary;
+            case typeof color === 'string': {
+                let c = theme.color.textPrimary;
+                try {
+                    if (color) {
+                        c = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return c;
+            }
+            default:
+                return theme.color.textPrimary;
+        }
+    }, [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.d.ts

@@ -1,11 +1,5 @@
-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;
-}
+import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonStandardProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonStandard.js

@@ -17,36 +17,94 @@ 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 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 &&
+const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ $color, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $color.alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background-color: ${({ $background, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $background.darken(10).toString();
+        default:
+            return $background.toString();
+    }
+}};
+  box-shadow: 0 0.125em 0.75em
+    ${({ $background }) => {
+    switch (true) {
+        case $background.luminance() > 0.49:
+            return $background.darken(40).alpha(0.8).toString();
+        default:
+            return $background.darken(20).alpha(0.5).toString();
+    }
+}};
+  ${({ disabled, $background, 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()};
+        background-color: ${$background.darken(30).toString()};
       }
       &:active {
-        background-color: ${theme.colors.surface.darken(40).toString()};
+        background-color: ${$background.darken(80).toString()};
       }
       &:focus-visible {
-        outline: 2px solid ${theme.colors.accentPrimary.toString()};
+        outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.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));
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $background = theme.color.surface;
+                try {
+                    if (color) {
+                        $background = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(theme.color.textPrimary.rgbString()) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                };
+            }
+            default:
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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 TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+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/Button/index.d.ts

@@ -1,14 +1,22 @@
-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;
-}
+import React from 'react';
+import { ButtonStandardProps } from './ButtonStandard';
+import { ButtonOutlinedProps } from './ButtonOutlined';
+export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps) & {
+    /**
+     * Button style variant\
+     * Allowed variants: `standard` or `outlined`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: 'standard' | 'outlined';
+};
+declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & {
+    /**
+     * Button style variant\
+     * Allowed variants: `standard` or `outlined`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: "standard" | "outlined" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/index.js

@@ -16,11 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ButtonStandard_1 = __importDefault(require("./ButtonStandard"));
-const ButtonAccent_1 = __importDefault(require("./ButtonAccent"));
+const ButtonOutlined_1 = __importDefault(require("./ButtonOutlined"));
 const Button = (props, ref) => {
     const { variant } = props, buttonProps = __rest(props, ["variant"]);
-    if (variant === 'accent') {
-        return react_1.default.createElement(ButtonAccent_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    if (variant === 'outlined') {
+        return react_1.default.createElement(ButtonOutlined_1.default, Object.assign({}, buttonProps, { ref: ref }));
     }
     return react_1.default.createElement(ButtonStandard_1.default, Object.assign({}, buttonProps, { ref: ref }));
 };

package/Calendar/CalendarBottomBar.d.ts

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

package/Calendar/CalendarCell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CalendarCellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly isToday?: boolean;
+    readonly isSelected?: boolean;
+    readonly isDisabled?: boolean;
+}
+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);