@mailstep/design-system 0.8.26-beta.2 → 0.8.26-beta.4

package/ui/Elements/DatePicker/Datetime/views/YearsView.js

@@ -0,0 +1,281 @@
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import ViewNavigation from "../components/ViewNavigation";
+var YearsView = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(YearsView, _React_Component);
+    function YearsView() {
+        _class_call_check(this, YearsView);
+        var _this;
+        _this = _call_super(this, YearsView, arguments);
+        _this.disabledYearsCache = {};
+        _this._updateSelectedYear = function(event) {
+            _this.props.updateDate(event);
+        };
+        return _this;
+    }
+    _create_class(YearsView, [
+        {
+            key: "render",
+            value: function render() {
+                return /* @__PURE__ */ jsxs("div", {
+                    className: "rdtYears",
+                    children: [
+                        /* @__PURE__ */ jsx("table", {
+                            children: /* @__PURE__ */ jsx("thead", {
+                                children: this.renderNavigation()
+                            })
+                        }),
+                        /* @__PURE__ */ jsx("table", {
+                            children: /* @__PURE__ */ jsx("tbody", {
+                                children: this.renderYears()
+                            })
+                        })
+                    ]
+                });
+            }
+        },
+        {
+            key: "renderNavigation",
+            value: function renderNavigation() {
+                var _this = this;
+                var viewYear = this.getViewYear();
+                return /* @__PURE__ */ jsx(ViewNavigation, {
+                    onClickPrev: function onClickPrev() {
+                        return _this.props.navigate(-10, "years");
+                    },
+                    onClickSwitch: function onClickSwitch() {
+                        return _this.props.showView("years");
+                    },
+                    onClickNext: function onClickNext() {
+                        return _this.props.navigate(10, "years");
+                    },
+                    switchContent: "".concat(viewYear, "-").concat(viewYear + 9)
+                });
+            }
+        },
+        {
+            key: "renderYears",
+            value: function renderYears() {
+                var viewYear = this.getViewYear();
+                var rows = [
+                    [],
+                    [],
+                    []
+                ];
+                for(var year = viewYear - 1; year < viewYear + 11; year++){
+                    var row = getRow(rows, year - viewYear);
+                    row.push(this.renderYear(year));
+                }
+                return rows.map(function(years, i) {
+                    return /* @__PURE__ */ jsx("tr", {
+                        children: years
+                    }, i);
+                });
+            }
+        },
+        {
+            key: "renderYear",
+            value: function renderYear(year) {
+                var selectedYear = this.getSelectedYear();
+                var className = "rdtYear";
+                var onClick;
+                if (this.isDisabledYear(year)) {
+                    className += " rdtDisabled";
+                } else {
+                    onClick = this._updateSelectedYear;
+                }
+                if (selectedYear === year) {
+                    className += " rdtActive";
+                }
+                var props = {
+                    key: year,
+                    className: className,
+                    "data-value": year,
+                    onClick: onClick
+                };
+                return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
+            }
+        },
+        {
+            key: "getViewYear",
+            value: function getViewYear() {
+                return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+            }
+        },
+        {
+            key: "getSelectedYear",
+            value: function getSelectedYear() {
+                return this.props.selectedDate && this.props.selectedDate.year();
+            }
+        },
+        {
+            key: "isDisabledYear",
+            value: function isDisabledYear(year) {
+                var cache = this.disabledYearsCache;
+                if (cache[year] !== void 0) {
+                    return cache[year];
+                }
+                var isValidDate = this.props.isValidDate;
+                if (!isValidDate) {
+                    return false;
+                }
+                var date = this.props.viewDate.clone().set({
+                    year: year
+                });
+                var day = date.endOf("year").dayOfYear() + 1;
+                while(day-- > 1){
+                    if (isValidDate(date.dayOfYear(day))) {
+                        cache[year] = false;
+                        return false;
+                    }
+                }
+                cache[year] = true;
+                return true;
+            }
+        }
+    ]);
+    return YearsView;
+}(React.Component);
+YearsView.defaultProps = {
+    renderYear: function renderYear(props, year) {
+        return /* @__PURE__ */ jsx("td", _object_spread_props(_object_spread({}, props), {
+            children: year
+        }));
+    }
+};
+function getRow(rows, year) {
+    if (year < 3) {
+        return rows[0];
+    }
+    if (year < 7) {
+        return rows[1];
+    }
+    return rows[2];
+}
+export { YearsView as default };

package/ui/Elements/DatePicker/index.js

@@ -0,0 +1,4 @@
+import DatePicker from "./DatePicker";
+import { DatePickerRepeat, TimePickerRepeat } from "./Datetime/types";
+var DatePicker_default = DatePicker;
+export { DatePickerRepeat, TimePickerRepeat, DatePicker_default as default };

package/ui/Elements/DatePicker/styles.js

@@ -0,0 +1,36 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    z-index: 1;\n    min-width: 250px;\n    color: ",
+        ";\n    background: ",
+        ";\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 10px;\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n    padding: 0.5rem 1.2rem;\n    margin: 0.125rem 0rem;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    position: static;\n  }\n\n  .rdtPicker .rdtTimeToggle {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    text-align: center;\n    font-size: 1.25rem;\n  }\n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 30px;\n  }\n  .rdtPicker td {\n    padding: 0 0.8rem;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover,\n  .rdtPicker .rdtYear:hover,\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtDay:hover,\n  .rdtPicker .rdtHour:hover,\n  .rdtPicker .rdtMinute:hover,\n  .rdtPicker .rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover,\n  .rdtPicker .rdtSwitch:hover {\n    background: #f8f9fa;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtOld,\n  .rdtPicker .rdtNew {\n    color: rgba(33, 37, 41, 0.3);\n  }\n  .rdtPicker .rdtToday {\n    position: relative;\n  }\n  .rdtPicker .rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid ",
+        ";\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #e9ecef;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    border-bottom: none;\n    cursor: default;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtPrev,\n  .rdtPicker .rdtSwitch,\n  .rdtPicker .rdtNext {\n    font-weight: 600;\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .rdtPicker .rdtNext,\n  .rdtPicker .rdtPrev {\n    width: 36px;\n    font-size: 1.4rem;\n    vertical-align: top;\n    color: ",
+        ";\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    font-size: 1rem;\n    display: block;\n    user-select: none;\n  }\n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead:first-child {\n    line-height: 20px;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtTimeToggle {\n    border-top: 1px solid #e9ecef;\n  }\n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #f8f9fa;\n  }\n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  .rdtPicker .rdtDays {\n    min-width: 250px;\n  }\n  .rdtPicker .rdtMonth,\n  .rdtPicker .rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtYear:hover {\n    color: #16181b;\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtActiveSecond {\n    background: ",
+        " !important;\n    color: ",
+        " !important;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    text-decoration: none !important;\n  }\n  .rdtPicker .rdtLabel {\n    cursor: default !important;\n    background: transparent !important;\n    font-weight: 600;\n    text-align: right;\n  }\n\n  .rdtPicker .rdtActive {\n    background-color: ",
+        " !important;\n    color: ",
+        ";\n    border-radius: 0.5rem;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive:hover {\n    background-color: ",
+        ";\n    color: ",
+        ";\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive .rdtToday:before {\n    border-bottom-color: ",
+        ";\n  }\n  .rdtPicker .rdtDisabled,\n  .rdtPicker .rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n  .rdtPicker .rdtDays {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters > div {\n    float: left;\n  }\n\n  .rdtPicker .rdtActiveRange {\n    background: ",
+        ";\n  }\n\n  .rdtPicker .rdtCounters > div :first-child {\n    visibility: hidden;\n    transform: rotate(-90deg);\n  }\n  .rdtPicker .rdtCounters > div :last-child {\n    visibility: hidden;\n    transform: rotate(90deg);\n  }\n  .rdtPicker .rdtCounters > div > span:before {\n    left: 5px;\n    visibility: visible;\n    position: relative;\n    content: '›';\n    font-size: 2rem;\n    font-weight: 900;\n    color: ",
+        ";\n    padding: 0 10px;\n  }\n  .rdtPicker .rdtCounter {\n    width: 40px;\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    line-height: 40px;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtCounter .rdtCount {\n    line-height: 20px;\n    font-size: 1.25rem;\n  }\n  .rdtPicker .rdtCounterSeparator {\n    line-height: 100px;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { x } from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var DatePickerBase = styled(x.div)(_templateObject(), th("colors.blue2"), th("colors.white"), th("colors.red2"), th("colors.red2"), th("colors.red1"), th("colors.white"), th("colors.red2"), th("colors.white"), th("colors.red2"), th("colors.white"), th("colors.white"), th("colors.lightGray2"), th("colors.red2"));
+export { DatePickerBase };

package/ui/Elements/DatePicker/utils/constants.js

@@ -0,0 +1,35 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import { DatePickerRepeat, TimePickerRepeat } from "../Datetime/types";
+import { i18n } from "@lingui/core";
+var _obj;
+var DatePickerRepeatTrans = (_obj = {}, _define_property(_obj, DatePickerRepeat.EVERY_TODAY, i18n._({
+    id: "dataGrid.everyToday",
+    message: "Every today"
+})), _define_property(_obj, DatePickerRepeat.EVERY_YESTERDAY, i18n._({
+    id: "dataGrid.everyYesterday",
+    message: "Every yesterday"
+})), _obj);
+var _obj1;
+var TimePickerRepeatTrans = (_obj1 = {}, _define_property(_obj1, TimePickerRepeat.FROM, i18n._({
+    id: "dataGrid.timepicker.from",
+    message: "from"
+})), _define_property(_obj1, TimePickerRepeat.TO, i18n._({
+    id: "dataGrid.timepicker.to",
+    message: "to"
+})), _define_property(_obj1, TimePickerRepeat.AT, i18n._({
+    id: "dataGrid.timepicker.at",
+    message: "at"
+})), _obj1);
+export { DatePickerRepeatTrans, TimePickerRepeatTrans };

package/ui/Elements/Dropdown/Dropdown.js

@@ -0,0 +1,90 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        ""
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        ""
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  left: ",
+        ";\n  height: 0;\n  width: 0;\n  z-index: -1;\n  ",
+        " {\n    transform: translate(-10%, -50%);\n    width: fit-content;\n    ",
+        " {\n      border-radius: 2px;\n      background-color: ",
+        ";\n      width: 8px;\n      height: 8px;\n      transform: rotate(45deg);\n    }\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n\n  ",
+        "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ",
+        " {\n    display: ",
+        ";\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled, { th } from "@xstyled/styled-components";
+var ArrowInnerB = styled.div(_templateObject());
+var ArrowInnerA = styled.div(_templateObject1());
+var Arrow = styled.div(_templateObject2(), function(param) {
+    var verticalShift = param.verticalShift;
+    return verticalShift ? "calc(50% + 70px)" : "calc(50%)";
+}, ArrowInnerA, ArrowInnerB, th.color("white"));
+var StyledDropdownWrap = styled.div(_templateObject3(), function(param) {
+    var customDropdownPosition = param.customDropdownPosition;
+    return customDropdownPosition || "\n      top: 100%;\n      right: 0;\n    ";
+}, Arrow, function(param) {
+    var showArrow = param.showArrow;
+    return showArrow ? "block" : "none";
+});
+var Dropdown = function Dropdown(param) {
+    var show = param.show, className = param.className, wrapRef = param.wrapRef, children = param.children, showArrow = param.showArrow, verticalShift = param.verticalShift, customDropdownPosition = param.customDropdownPosition;
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: show && /* @__PURE__ */ jsxs(StyledDropdownWrap, {
+            ref: wrapRef,
+            className: className,
+            showArrow: showArrow,
+            customDropdownPosition: customDropdownPosition,
+            children: [
+                /* @__PURE__ */ jsx(Arrow, {
+                    verticalShift: verticalShift,
+                    children: /* @__PURE__ */ jsx(ArrowInnerA, {
+                        children: /* @__PURE__ */ jsx(ArrowInnerB, {})
+                    })
+                }),
+                children
+            ]
+        })
+    });
+};
+var Dropdown_default = Dropdown;
+export { Dropdown_default as default };

package/ui/Elements/Dropdown/index.js

@@ -0,0 +1,3 @@
+import Dropdown from "./Dropdown";
+var Dropdown_default = Dropdown;
+export { Dropdown, Dropdown_default as default };

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,137 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import DefaultItem from "./components/DefaultItem";
+import MenuList from "./components/MenuList";
+import styled from "@xstyled/styled-components";
+var StyledDropdownWrap = styled.div(_templateObject());
+var DropdownMenu = function DropdownMenu(_0) {
+    var items = _0.items, showMenu = _0.showMenu, className = _0.className, _0_ItemComponent = _0.ItemComponent, ItemComponent = _0_ItemComponent === void 0 ? DefaultItem : _0_ItemComponent, header = _0.header, footer = _0.footer, rest = _object_without_properties(_0, [
+        "items",
+        "showMenu",
+        "className",
+        "ItemComponent",
+        "header",
+        "footer"
+    ]);
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: showMenu && /* @__PURE__ */ jsxs(StyledDropdownWrap, _object_spread_props(_object_spread({
+            className: className
+        }, rest), {
+            children: [
+                header || null,
+                /* @__PURE__ */ jsx(MenuList, {
+                    items: items,
+                    ItemComponent: ItemComponent
+                }),
+                footer || null
+            ]
+        }))
+    });
+};
+export { DropdownMenu };

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -0,0 +1,58 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n      border-top: slim;\n      border-color: lightGray2;\n    "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ",
+        ";\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  margin-right: 10px;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled, { css } from "@xstyled/styled-components";
+var StyledListItem = styled.li(_templateObject1(), function(props) {
+    return props.hasSeparator && css(_templateObject());
+});
+var IconWrap = styled.span(_templateObject2());
+var MenuItem = function MenuItem(param) {
+    var icon = param.icon, title = param.title, hasSeparator = param.hasSeparator;
+    return /* @__PURE__ */ jsxs(StyledListItem, {
+        hasSeparator: hasSeparator,
+        children: [
+            icon && /* @__PURE__ */ jsx(IconWrap, {
+                children: icon
+            }),
+            title
+        ]
+    });
+};
+var DefaultItem_default = MenuItem;
+export { DefaultItem_default as default };