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

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,117 @@
+"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;
+`;
+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 } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline"]);
+    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,10 @@
+"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"));
+//TODO add documentation
+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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.65",
+  "version": "0.1.0-rc.66",
   "description": "UI Kit",
   "repository": {
     "type": "git",