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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Via Profit.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+
+
+```bash
+$ npm install @emotion/react @emotion/styled react react-dom react-modal react-popper react-window
+
+```
+
+_@types/emotion.d.ts_
+
+```ts
+import { UITheme } from '@via-profit/ui-kit';
+
+declare module '@emotion/react' {
+  export interface Theme extends UITheme {}
+}
+
+```

package/dist/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" | "value" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "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/dist/Autocomplete/index.js

@@ -0,0 +1,187 @@
+"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 Menu_1 = __importDefault(require("../Menu"));
+const popper_options_1 = __importDefault(require("./popper-options"));
+const Autocomplete = react_1.default.forwardRef((props, ref) => {
+    const { items, value, estimatedItemSize, endThreshold, overscanCount, zIndex, isOpen, multiple, itemToString, containerRef, filterItems, renderInput, getOptionSelected, onEndReached, onSelectItem, renderItem, onRequestClose, onRequestOpen, onInputChange, } = props;
+    const [inputValue, setInputValue] = react_1.default.useState('');
+    const menuRef = react_1.default.useRef(null);
+    const isFocusedRef = react_1.default.useRef(false);
+    const [currentOpen, setCurrentOpen] = react_1.default.useState(isOpen);
+    const [currentValue, setCurrentValue] = react_1.default.useState(value);
+    const [anchorElement, setAnchorElement] = react_1.default.useState(null);
+    const [filteredItems, setFilteredItems] = react_1.default.useState(items);
+    /**
+     * API
+     */
+    react_1.default.useImperativeHandle(ref, () => ({
+        highlightIndex: (index) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(index); },
+        hightlightPrevItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightPrevItem(); },
+        hightlightNextItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightNextItem(); },
+        hightlightFirstItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightFirstItem(); },
+        hightlightLastItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightLastItem(); },
+        selectHightlightedItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem(); },
+        updatePopper: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.updatePopper(); },
+        scrollToFirstSelected: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollToFirstSelected(); },
+        selectItem: (index) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectItem(index); },
+        scrollTo: (scrollOffset) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(scrollOffset); },
+        scrollToItem: (index, align) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align); },
+        clear: () => {
+            setCurrentValue(null);
+            setInputValue('');
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+            setFilteredItems(items);
+        },
+        focus: () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus(),
+        blur: () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.blur(),
+        clearInput: () => setInputValue(''),
+    }), [anchorElement, items]);
+    const inputKeydownEvent = react_1.default.useCallback((event) => {
+        var _a, _b, _c, _d, _e;
+        if (!isFocusedRef.current) {
+            return;
+        }
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                event.preventDefault();
+                (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem();
+                break;
+            case 'ArrowUp':
+                {
+                    event.preventDefault();
+                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.hightlightPrevItem();
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    event.preventDefault();
+                    (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
+                    if (!currentOpen) {
+                        onRequestOpen(event);
+                    }
+                }
+                break;
+            case 'Home':
+                {
+                    event.preventDefault();
+                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.hightlightFirstItem();
+                }
+                break;
+            case 'End':
+                {
+                    event.preventDefault();
+                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.hightlightLastItem();
+                }
+                break;
+            case 'PageUp':
+            case 'PageDown':
+                event.preventDefault();
+                break;
+            case 'Escape':
+            case 'Tab':
+                onRequestClose(event);
+                break;
+            default:
+                if (!currentOpen) {
+                    onRequestOpen(event);
+                }
+                // do nothing
+                break;
+        }
+    }, [currentOpen, onRequestClose, onRequestOpen]);
+    const onSelectItemF = react_1.default.useCallback(selected => {
+        setCurrentValue(selected);
+        if (typeof onSelectItem === 'function') {
+            if (!Array.isArray(selected) && typeof itemToString === 'function') {
+                setInputValue(itemToString(selected));
+            }
+            onSelectItem(selected);
+        }
+    }, [itemToString, onSelectItem]);
+    react_1.default.useEffect(() => {
+        if (value === null) {
+            setCurrentValue(null);
+            return;
+        }
+        if (multiple) {
+            if (Array.isArray(value)) {
+                setCurrentValue(value);
+            }
+            if (!Array.isArray(value)) {
+                setCurrentValue([value]);
+            }
+        }
+        if (!multiple) {
+            if (Array.isArray(value)) {
+                setCurrentValue(value[0]);
+            }
+            if (!Array.isArray(value)) {
+                setCurrentValue(value);
+            }
+        }
+    }, [value, multiple]);
+    react_1.default.useEffect(() => {
+        setCurrentOpen(isOpen);
+    }, [isOpen]);
+    const renderInputOnChange = react_1.default.useCallback(event => {
+        setInputValue(event.currentTarget.value);
+        if (typeof onInputChange === 'function') {
+            onInputChange(event);
+        }
+        const query = event.currentTarget.value.toLowerCase().trim();
+        // Apply filter
+        const newItems = typeof filterItems !== 'function' || query.length === 0
+            ? items
+            : filterItems(items, { query, inputValue });
+        setFilteredItems(newItems);
+    }, [inputValue, items, onInputChange, filterItems]);
+    react_1.default.useEffect(() => {
+        var _a;
+        if (filteredItems.length === 1) {
+            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(0);
+        }
+    }, [filteredItems]);
+    const inputElement = react_1.default.useMemo(() => {
+        const elem = renderInput({
+            inputRef: setAnchorElement,
+            value: inputValue,
+            selected: currentValue,
+            onBlur: () => {
+                isFocusedRef.current = false;
+            },
+            onFocus: event => {
+                isFocusedRef.current = true;
+                onRequestOpen(event);
+            },
+            onKeyDown: inputKeydownEvent,
+            onChange: renderInputOnChange,
+            onClick: event => {
+                if (isFocusedRef.current) {
+                    onRequestOpen(event);
+                }
+            },
+        });
+        return elem;
+    }, [
+        inputKeydownEvent,
+        inputValue,
+        onRequestOpen,
+        renderInput,
+        renderInputOnChange,
+        currentValue,
+    ]);
+    return (react_1.default.createElement("div", { ref: containerRef },
+        inputElement,
+        react_1.default.createElement(Menu_1.default, { ref: menuRef, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, estimatedItemSize: estimatedItemSize, endThreshold: endThreshold, overscanCount: overscanCount, getOptionSelected: getOptionSelected, onEndReached: onEndReached, onSelectItem: onSelectItemF, renderItem: renderItem, multiple: multiple, zIndex: zIndex, closeOutsideClick: true, popperOptions: popper_options_1.default, onRequestClose: evt => {
+                if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
+                    onRequestClose(evt);
+                }
+            } })));
+});
+Autocomplete.displayName = 'Autocomplete';
+exports.default = Autocomplete;

package/dist/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/dist/Autocomplete/popper-options.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperOptions = void 0;
+exports.popperOptions = {
+    placement: 'bottom-start',
+    modifiers: [
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 8],
+            },
+        },
+        {
+            name: 'flip',
+            enabled: true,
+            options: {
+                altBoundary: true,
+                padding: 8,
+            },
+        },
+        {
+            name: 'preventOverflow',
+            enabled: true,
+            options: {
+                altAxis: true,
+                altBoundary: true,
+                tether: true,
+                padding: 8,
+            },
+        },
+    ],
+};
+exports.default = exports.popperOptions;

package/dist/Button/ButtonAccent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ButtonAccentProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly startIcon?: JSX.Element;
+    readonly endIcon?: JSX.Element;
+};
+declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly startIcon?: JSX.Element | undefined;
+    readonly endIcon?: JSX.Element | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/dist/Button/ButtonAccent.js

@@ -0,0 +1,48 @@
+"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const Button = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme }) => theme.colors.accentPrimaryContrast().toString()};
+  background-color: ${({ theme }) => theme.colors.accentPrimary().toString()};
+  box-shadow: 0 2px 12px
+    ${({ theme }) => theme.colors.accentPrimary().darken(0.6).alpha(0.3).toString()};
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.accentPrimary().darken(0.1).toString()};
+  }
+  &:active {
+    background-color: ${({ theme }) => theme.colors.accentPrimary().darken(0.2).toString()};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().darken(0.3).toString()};
+  }
+`;
+const StartIconWrapper = styled_1.default.span `
+  margin-right: 0.8em;
+`;
+const EndIconWrapper = styled_1.default.span `
+  margin-left: 0.8em;
+`;
+const ButtonAccent = (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, null, startIcon)),
+        children,
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper, null, endIcon))));
+};
+exports.default = react_1.default.forwardRef(ButtonAccent);

package/dist/Button/ButtonBase.d.ts

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

package/dist/Button/ButtonBase.js

@@ -0,0 +1,38 @@
+"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 Button = styled_1.default.button `
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  padding: 0.8em 1em;
+  cursor: pointer;
+  font-size: 1em;
+  border: 0;
+  outline: transparent;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  color: currentColor;
+`;
+const ButtonText = styled_1.default.span `
+  font-size: 0.86em;
+`;
+const ButtonBase = (props, ref) => {
+    const { children } = props, otherProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
+        react_1.default.createElement(ButtonText, null, children)));
+};
+exports.default = react_1.default.forwardRef(ButtonBase);

package/dist/Button/ButtonStandard.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * Standard
+ */
+export type ButtonStandardProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Starticon
+     */
+    readonly startIcon?: JSX.Element;
+    readonly endIcon?: JSX.Element;
+};
+declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Starticon
+     */
+    readonly startIcon?: JSX.Element | undefined;
+    readonly endIcon?: JSX.Element | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/dist/Button/ButtonStandard.js

@@ -0,0 +1,50 @@
+"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const Button = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  background-color: ${({ theme }) => theme.isDark
+    ? theme.colors.backgroundPrimary().lighten(20).toString()
+    : theme.colors.backgroundPrimary().toString()};
+  box-shadow: 0 2px 12px
+    ${({ theme }) => theme.colors.backgroundPrimary().darken(40).alpha(0.6).toString()};
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(20).toString()};
+  }
+  &:active {
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(40).toString()};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().toString()};
+  }
+`;
+const StartIconWrapper = styled_1.default.span `
+  margin-right: 0.8em;
+`;
+const EndIconWrapper = styled_1.default.span `
+  margin-left: 0.8em;
+`;
+const ButtonStandard = (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, null, startIcon)),
+        children,
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper, null, endIcon))));
+};
+exports.default = react_1.default.forwardRef(ButtonStandard);

package/dist/Button/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonStandardProps } from './ButtonStandard';
+import { ButtonAccentProps } from './ButtonAccent';
+interface BaseProps {
+    readonly variant?: 'standard' | 'accent';
+}
+export type ButtonProps = (ButtonStandardProps | ButtonAccentProps) & BaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/dist/Button/index.js

@@ -0,0 +1,27 @@
+"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 ButtonStandard_1 = __importDefault(require("./ButtonStandard"));
+const ButtonAccent_1 = __importDefault(require("./ButtonAccent"));
+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 }));
+    }
+    return react_1.default.createElement(ButtonStandard_1.default, Object.assign({}, buttonProps, { ref: ref }));
+};
+exports.default = react_1.default.forwardRef(Button);

package/dist/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/dist/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/dist/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.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;

package/dist/Calendar/CalendarCell.js

@@ -0,0 +1,61 @@
+"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 Btn = styled_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  width: 3em;
+  height: 3em;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
+  border: 1px solid transparent;
+  background-color: ${({ theme, $isSelected }) => $isSelected
+    ? theme.colors.accentPrimary().toString()
+    : theme.colors.backgroundPrimary().toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
+    if ($isDisabled) {
+        return theme.colors.textSecondary().toString();
+    }
+    if ($isSelected) {
+        return theme.colors.accentPrimaryContrast().toString();
+    }
+    if ($isToday) {
+        return theme.colors.accentPrimary().toString();
+    }
+    return theme.colors.textPrimary().toString();
+}};
+  &:hover {
+    background-color: ${({ theme, $isSelected }) => $isSelected
+    ? theme.colors.accentPrimary().darken(0.1).toString()
+    : theme.colors.backgroundPrimary().darken(0.1).toString()};
+  }
+  &:focus-visible {
+    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary().toString()};
+  }
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
+`;
+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));

package/dist/Calendar/CalendarDateContainer.d.ts

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