@via-profit/ui-kit 0.1.0-rc.65 → 0.1.0-rc.67

package/Avatar/AvatarBase.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { AvatarIconWrapperProps } from './AvatarIconWrapper';
+import { AvatarTextWrapperProps } from './AvatarTextWrapper';
+import { AvatarContainerProps } from './AvatarContainer';
+import { AvatarPictureProps } from './AvatarPicture';
+type AvatarNativeProps = React.HTMLAttributes<HTMLSpanElement>;
+export interface AvatarBaseProps extends Omit<AvatarNativeProps, 'color'> {
+    /**
+     * image object of Avatar component
+     * Example:
+     * ```tsx
+     * <Avatar src={[{
+     *  srcSet: 'https://google.com/images/img.png',
+     *  type: 'image/png',
+     *  isDefault: true,
+     * }]}>
+     *   Label
+     * </Avatar>
+     * ```
+     */
+    readonly src?: AvatarPictureProps['src'];
+    /**
+     * Avatar style variant\
+     * Allowed variants: `circular`,`rounded` or `square`\
+     * \
+     * **Default**: `circular`
+     */
+    readonly variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string;
+    /**
+     * Show avatar online badge\
+     * \
+     * **Default**: `undefined`
+     */
+    readonly isOnline?: boolean;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: AvatarContainerProps['color'];
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: AvatarBaseOverrides;
+    /**
+     * HTML image alt attribute
+     */
+    readonly alt?: string;
+}
+export interface AvatarBaseOverrides {
+    /**
+     * Element container
+     */
+    readonly Container?: React.ForwardRefExoticComponent<AvatarContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * icon wrapper
+     */
+    readonly IconWrapper?: React.ForwardRefExoticComponent<AvatarIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * text wrapper
+     */
+    readonly TextWrapper?: React.ForwardRefExoticComponent<AvatarTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * picture tag
+     */
+    readonly Picture?: React.ForwardRefExoticComponent<AvatarPictureProps & React.RefAttributes<HTMLPictureElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<AvatarBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarBase.js

@@ -0,0 +1,33 @@
+"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 AvatarIconWrapper_1 = __importDefault(require("./AvatarIconWrapper"));
+const AvatarTextWrapper_1 = __importDefault(require("./AvatarTextWrapper"));
+const AvatarContainer_1 = __importDefault(require("./AvatarContainer"));
+const AvatarPicture_1 = __importDefault(require("./AvatarPicture"));
+const AvatarBase = (props, ref) => {
+    const { children, src, color, alt, variant, overrides, isOnline } = props, nativeProps = __rest(props, ["children", "src", "color", "alt", "variant", "overrides", "isOnline"]);
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: AvatarTextWrapper_1.default,
+        IconWrapper: AvatarIconWrapper_1.default,
+        Container: AvatarContainer_1.default,
+        Picture: AvatarPicture_1.default }, overrides)), [overrides]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
+        typeof src !== 'undefined' && src !== null && (src === null || src === void 0 ? void 0 : src.length) !== 0 && (react_1.default.createElement(overridesMap.IconWrapper, null,
+            react_1.default.createElement(overridesMap.Picture, { src: src }))),
+        (!src || src === null || (src === null || src === void 0 ? void 0 : src.length) === 0) && (react_1.default.createElement(overridesMap.TextWrapper, null, children))));
+};
+exports.default = react_1.default.forwardRef(AvatarBase);

package/Avatar/AvatarContainer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type AvatarContainerProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: string | undefined;
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarContainer.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 StyledAvatar = styled_1.default.span `
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  position: relative;
+  width: ${({ size }) => size || '2.5em'};
+  height: ${({ size }) => size || '2.5em'};
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  color: ${({ color, theme }) => {
+    switch (true) {
+        case typeof color === 'undefined':
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+`;
+const AvatarContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledAvatar, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(AvatarContainer);

package/Avatar/AvatarIconWrapper.d.ts

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

package/Avatar/AvatarIconWrapper.js

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

package/Avatar/AvatarOnlineBadge.d.ts

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

package/Avatar/AvatarOnlineBadge.js

@@ -0,0 +1,36 @@
+"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 OnlineBadge = styled_1.default.span `
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  bottom: 14%;
+  right: 7%;
+  width: 0.6em;
+  height: 0.6em;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: scale(1) translate(50%, 50%);
+  transform-origin: 100% 100%;
+  background-color: ${({ theme }) => theme.color.success.toString()};
+`;
+const AvatarOnlineBadge = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return react_1.default.createElement(OnlineBadge, Object.assign({}, nativeProps, { ref: ref }));
+};
+exports.default = react_1.default.forwardRef(AvatarOnlineBadge);

package/Avatar/AvatarPicture.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type MimeType = 'image/webp' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/apng' | 'image/svg+xml' | 'image/bmp' | 'image/x-icon';
+export type SrcObject = {
+    srcSet: string;
+    type: MimeType;
+    isDefault?: boolean;
+};
+export type AvatarPictureProps = React.HTMLAttributes<HTMLPictureElement> & {
+    /**
+     * image object of Avatar component
+     * Example:
+     * ```tsx
+     * <Avatar src={[{
+     *  srcSet: 'https://google.com/images/img.png',
+     *  type: 'image/png',
+     *  isDefault: true,
+     * }]}>
+     *   Label
+     * </Avatar>
+     * ```
+     */
+    readonly src: SrcObject[];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLPictureElement> & {
+    /**
+     * image object of Avatar component
+     * Example:
+     * ```tsx
+     * <Avatar src={[{
+     *  srcSet: 'https://google.com/images/img.png',
+     *  type: 'image/png',
+     *  isDefault: true,
+     * }]}>
+     *   Label
+     * </Avatar>
+     * ```
+     */
+    readonly src: SrcObject[];
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarPicture.js

@@ -0,0 +1,54 @@
+"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 Picture = styled_1.default.picture `
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const generateKey = () => (Math.random() * 10000).toFixed();
+const AvatarPicture = (props, ref) => {
+    const { src } = props, nativeProps = __rest(props, ["src"]);
+    const defaultSrc = react_1.default.useMemo(() => {
+        if (typeof src === 'undefined' || (src === null || src === void 0 ? void 0 : src.length) === 0) {
+            return null;
+        }
+        let retData = src.find(({ isDefault }) => isDefault);
+        if (retData) {
+            return retData;
+        }
+        retData = src.find(src => src.type === 'image/png');
+        if (retData) {
+            return retData;
+        }
+        retData = src.find(src => src.type === 'image/jpeg');
+        return retData ? retData : null;
+    }, [src]);
+    return (react_1.default.createElement(Picture, Object.assign({}, nativeProps, { ref: ref }),
+        src.map((_a) => {
+            var { isDefault } = _a, srcProps = __rest(_a, ["isDefault"]);
+            return (react_1.default.createElement("source", Object.assign({ key: generateKey() }, srcProps)));
+        }),
+        react_1.default.createElement("img", { src: (defaultSrc === null || defaultSrc === void 0 ? void 0 : defaultSrc.srcSet) || '' })));
+};
+exports.default = react_1.default.forwardRef(AvatarPicture);

package/Avatar/AvatarStandard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AvatarBaseProps } from './AvatarBase';
+export type AvatarStandardProps = AvatarBaseProps;
+declare const _default: React.ForwardRefExoticComponent<AvatarBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarStandard.js

@@ -0,0 +1,119 @@
+"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 AvatarBase_1 = __importDefault(require("./AvatarBase"));
+const AvatarOnlineBadge_1 = __importDefault(require("./AvatarOnlineBadge"));
+const Container = styled_1.default.span `
+  position: relative;
+  width: ${({ size }) => (size ? size : '2.5em')};
+  height: ${({ size }) => (size ? size : '2.5em')};
+`;
+const StyledStandardAvatar = (0, styled_1.default)(AvatarBase_1.default) `
+  color: ${({ $color }) => $color.toString()};
+  background-color: ${({ $background }) => $background.toString()};
+  ${({ $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();
+    }
+}};
+  &:hover {
+    background-color: ${({ $background, $clickable }) => $clickable && $background.darken(30).toString()};
+  }
+  &:focus-visible {
+    outline-color: ${({ theme, $background }) => $background.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString()};
+  }
+  ${({ $clickable }) => $clickable &&
+    (0, react_2.css) `
+      cursor: pointer;
+    `}
+
+  ${({ variant, theme }) => {
+    switch (variant) {
+        case 'rounded':
+            return (0, react_2.css) `
+          border-radius: ${theme.shape.radiusFactor * 0.8}em;
+        `;
+        case 'square':
+            return (0, react_2.css) `
+          border-radius: inherit;
+        `;
+        default:
+            return (0, react_2.css) `
+          border-radius: 100%;
+        `;
+    }
+}}
+`;
+const AvatarStandard = (props, ref) => {
+    const { children, color, onClick, isOnline, size } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline", "size"]);
+    const theme = (0, react_2.useTheme)();
+    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
+    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.darken(10),
+                    $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) > 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(Container, null,
+        react_1.default.createElement(StyledStandardAvatar, Object.assign({ variant: "circular", "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children),
+        isOnline && react_1.default.createElement(AvatarOnlineBadge_1.default, null)));
+};
+exports.default = react_1.default.forwardRef(AvatarStandard);

package/Avatar/AvatarTextWrapper.d.ts

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

package/Avatar/AvatarTextWrapper.js

@@ -0,0 +1,36 @@
+"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: 1.5em;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: relative;
+  user-select: none;
+  position: absolute;
+  top: 50%;
+`;
+const AvatarTextWrapper = (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(AvatarTextWrapper);

package/Avatar/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { AvatarStandardProps } from './AvatarStandard';
+export type AvatarProps = AvatarStandardProps & {
+    /**
+     * Avatar style variant\
+     * Allowed variants: `circular`, 'rounded' or `square`\
+     * \
+     * **Default**: `circular`
+     */
+    readonly variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<import("./AvatarBase").AvatarBaseProps & {
+    /**
+     * Avatar style variant\
+     * Allowed variants: `circular`, 'rounded' or `square`\
+     * \
+     * **Default**: `circular`
+     */
+    readonly variant?: "square" | "circular" | "rounded" | undefined;
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+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 AvatarStandard_1 = __importDefault(require("./AvatarStandard"));
+const Avatar = (props, ref) => (react_1.default.createElement(AvatarStandard_1.default, Object.assign({}, props, { ref: ref })));
+exports.default = react_1.default.forwardRef(Avatar);

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/CalendarBottomBar.js

@@ -0,0 +1,28 @@
+"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 Container = styled_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CalendarBottomBar = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarBottomBar);

package/Calendar/CalendarMonthControl.d.ts

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

package/Calendar/CalendarMonthControl.js

@@ -0,0 +1,41 @@
+"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 Button_1 = __importDefault(require("../Button"));
+const IconChevronLeft_1 = __importDefault(require("./IconChevronLeft"));
+const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
+const StyledButton = (0, styled_1.default)(Button_1.default) `
+  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+  &:hover {
+    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.5).toString()};
+    background-color: ${({ theme }) => theme.color.accentSecondary.lighten(10).toString()};
+  }
+  &:active {
+    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.9).toString()};
+  }
+  ${({ disabled }) => disabled &&
+    (0, react_2.css) `
+      opacity: 0.5;
+    `};
+`;
+const CalendarMonthControl = (props, ref) => {
+    const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ variant: "plain", iconOnly: true, 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.forwardRef(CalendarMonthControl);

package/Calendar/CalendarWeekDayLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.NamedExoticComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/IconChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Calendar/IconChevronLeft.js

@@ -0,0 +1,9 @@
+"use strict";
+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 IconChevronLeft = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
+exports.default = react_1.default.forwardRef(IconChevronLeft);

package/PhoneField/templates.js

@@ -15,8 +15,8 @@ const US_1 = __importDefault(require("../CountryFlags/US"));
 const IL_1 = __importDefault(require("../CountryFlags/IL"));
 exports.templates = [
     // Russian template
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/],
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/],
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/], // 8912...
     [
         'RU',
         react_1.default.createElement(RU_1.default, { key: "ru-3" }),
@@ -24,7 +24,7 @@ exports.templates = [
         '+7 (xxx) xxx-xx-xx',
         '+7 (987) 654-32-10',
         /^\+{0,1}7([0-5]|[8-9])[0-9][0-9]/,
-    ],
+    ], // +79...
     // Other fucking countries
     ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
     ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
@@ -35,7 +35,7 @@ exports.templates = [
         '+7 (xxx) xxx-xx-xx',
         '+7 (600) 765-43-21',
         /^\+{0,1}7[6-7][0-9][0-9]/,
-    ],
+    ], // +7600 - +7700
     ['UA', react_1.default.createElement(UA_1.default, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
     ['JP', react_1.default.createElement(JP_1.default, { key: "jp" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
     ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 xxx xxx-xx-xx', '+1 987 654-32-10', /^\+{0,1}1/],

package/Selectbox/IconShow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Selectbox/IconShow.js

@@ -0,0 +1,9 @@
+"use strict";
+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 IconShow = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
+    react_1.default.createElement("path", { d: "m105.79 160.82a24 24 0 0 0-10.76 6.2109 24 24 0 0 0 0 33.941l144 144a24.002 24.002 0 0 0 33.941 0l144-144a24 24 0 0 0 0-33.941 24 24 0 0 0-33.941 0l-127.03 127.03-127.03-127.03a24 24 0 0 0-23.182-6.2109z", fill: "currentColor" })));
+exports.default = react_1.default.forwardRef(IconShow);

package/Table/Table.js

@@ -37,6 +37,61 @@ const StyledTable = styled_1.default.table `
     (0, react_2.css) `
       width: 100%;
     `};
+
+  @media only screen and (max-width: 1200px) {
+    /* Force table to not be like tables anymore */
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+      display: block;
+    }
+
+    /* Hide table headers (but not display: none;, for accessibility) */
+    thead tr {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+
+    tr {
+      margin: 0 0 1rem 0;
+      background: ${({ theme }) => theme.color.surface.toString()};
+    }
+
+    tr:nth-of-type(odd) {
+      background: ${({ theme }) => theme.color.surface.darken(30).toString()};
+    }
+
+    td {
+      /* Behave  like a "row" */
+      border: none;
+      border-bottom: 1px solid
+        ${({ theme }) => theme.color.surface.darken(20).alpha(0.8).toString()};
+      position: relative;
+      padding-left: 50%;
+      text-align: left !important;
+    }
+
+    tr:nth-of-type(odd) td {
+      border-bottom: 1px solid
+        ${({ theme }) => theme.color.surface.darken(50).alpha(0.8).toString()};
+    }
+
+    td:before {
+      /* Now like a table header */
+      position: absolute;
+      /* Top/left values mimic padding */
+      top: 50%;
+      transform: translateY(-50%);
+      left: 1em;
+      width: 45%;
+      padding-right: 1em;
+      white-space: nowrap;
+    }
+  }
 `;
 const Table = (props, ref) => {
     const { children, fullWidth } = props, nativeProps = __rest(props, ["children", "fullWidth"]);

package/Typography/Base.d.ts

@@ -5,6 +5,6 @@
  */
 declare const Base: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export default Base;

package/Typography/Blockquote.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const Blockquote: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, {}>;
 export default Blockquote;

package/Typography/List.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const Ul: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const Ol: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
 export declare const Li: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export default Ul;

package/Typography/U.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const U: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export default U;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.65",
+  "version": "0.1.0-rc.67",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -28,71 +28,71 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/plugin-transform-typescript": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@babel/runtime": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.23.6",
+    "@babel/plugin-transform-typescript": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.6",
     "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@loadable/babel-plugin": "^5.16.1",
     "@loadable/webpack-plugin": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@types/node": "^20.8.10",
-    "@types/nodemon": "^1.19.4",
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-slick": "^0.23.11",
-    "@types/webpack-bundle-analyzer": "^4.6.2",
-    "@types/webpack-env": "^1.18.3",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@types/node": "^20.10.5",
+    "@types/nodemon": "^1.19.6",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-slick": "^0.23.13",
+    "@types/webpack-bundle-analyzer": "^4.6.3",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "babel-loader": "^9.1.3",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-file-progress": "^1.3.0",
-    "eslint-plugin-formatjs": "^4.11.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-formatjs": "^4.11.3",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.3",
-    "nodemon": "^3.0.1",
+    "html-webpack-plugin": "^5.6.0",
+    "nodemon": "^3.0.2",
     "nodemon-webpack-plugin": "^4.8.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.18.0",
+    "react-router-dom": "^6.21.1",
     "react-test-renderer": "^18.2.0",
     "shebang-loader": "^0.0.1",
     "terser-webpack-plugin": "^5.3.9",
-    "ts-node": "^10.9.1",
-    "type-fest": "^4.6.0",
-    "typescript": "^5.2.2",
+    "ts-node": "^10.9.2",
+    "type-fest": "^4.8.3",
+    "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   }