@ceed/cds 0.0.186 → 0.0.187-cjs.0

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,212 @@
+'use strict';
+
+var React = require('react');
+var reactImask = require('react-imask');
+var CalendarToday = require('../../external/@mui/icons-material/esm/CalendarToday.js');
+var joy = require('@mui/joy');
+var base = require('@mui/base');
+var Input = require('../Input/Input.js');
+var IconButton = require('../IconButton/IconButton.js');
+var Sheet = require('../Sheet/Sheet.js');
+var Calendar = require('../Calendar/Calendar.js');
+var DialogActions = require('../DialogActions/DialogActions.js');
+var Button = require('../Button/Button.js');
+var index = require('../../hooks/use-controlled-state/index.js');
+
+const CalendarButton = joy.styled(IconButton.IconButton, {
+    name: "DatePicker",
+    slot: "calendarButton",
+})(({ theme }) => ({
+    '&:focus': {
+        '--Icon-color': 'currentColor',
+        outlineOffset: `${theme.getCssVar('focus-thickness')}`,
+        outline: `${theme.getCssVar('focus-thickness')} solid ${theme.getCssVar('palette-focusVisible')}`
+    }
+}));
+const StyledPopper = joy.styled(base.Popper, {
+    name: "DatePicker",
+    slot: "popper",
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+}));
+const CalendarSheet = joy.styled(Sheet.Sheet, {
+    name: "DatePicker",
+    slot: "sheet",
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    width: "264px",
+    boxShadow: theme.shadow.md,
+    borderRadius: theme.radius.md,
+}));
+const DatePickerRoot = joy.styled("div", {
+    name: "DatePicker",
+    slot: "root",
+    overridesResolver: (props, styles) => styles.root,
+})({
+    width: "100%",
+});
+const formatValueString = (date, format) => {
+    let day = `${date.getDate()}`;
+    let month = `${date.getMonth() + 1}`;
+    const year = date.getFullYear();
+    if (Number(day) < 10)
+        day = "0" + day;
+    if (Number(month) < 10)
+        month = "0" + month;
+    return format
+        .replace(/YYYY/g, year.toString())
+        .replace(/MM/g, month)
+        .replace(/DD/g, day);
+};
+function parseDate(dateString, format) {
+    const formatParts = format.split(/[-./\s]/);
+    const dateParts = dateString.split(/[-./\s]/);
+    if (formatParts.length !== dateParts.length) {
+        throw new Error("Invalid date string or format");
+    }
+    let day, month, year;
+    for (let i = 0; i < formatParts.length; i++) {
+        const value = parseInt(dateParts[i], 10);
+        switch (formatParts[i]) {
+            case "DD":
+                day = value;
+                break;
+            case "MM":
+                month = value - 1; // JavaScript months are 0-indexed
+                break;
+            case "YYYY":
+                year = value;
+                break;
+        }
+    }
+    const result = new Date(year, month, day);
+    return result;
+}
+const formatToPattern = (format) => {
+    return format
+        .replace(/YYYY/g, "Y")
+        .replace(/MM/g, "M")
+        .replace(/DD/g, "D")
+        .replace(/[^YMD\s]/g, (match) => `${match}\``);
+};
+const TextMaskAdapter = React.forwardRef(function TextMaskAdapter(props, ref) {
+    const { onChange, format, ...other } = props;
+    return (React.createElement(reactImask.IMaskInput, { ...other, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), mask: Date, pattern: formatToPattern(format), blocks: {
+            D: {
+                mask: reactImask.IMask.MaskedRange,
+                from: 1,
+                to: 31,
+                maxLength: 2,
+            },
+            M: {
+                mask: reactImask.IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                maxLength: 2,
+            },
+            Y: {
+                mask: reactImask.IMask.MaskedRange,
+                from: 1900,
+                to: 9999,
+                maxLength: 4,
+            },
+        }, 
+        // define date -> str convertion
+        format: (date) => formatValueString(date, format), 
+        // define str -> date convertion
+        parse: (str) => parseDate(str, format), autofix: "pad", overwrite: true }));
+});
+const DatePicker = React.forwardRef((inProps, ref) => {
+    // prop destruction
+    const props = joy.useThemeProps({ props: inProps, name: "DatePicker" });
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast, required, 
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx, className, format = "YYYY/MM/DD", size, inputReadOnly, hideClearButton, readOnly, ...innerProps } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    const innerRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const [value, setValue] = index.useControlledState(props.value, props.defaultValue || "", React.useCallback((value) => onChange?.({ target: { name: props.name, value } }), [props.name, onChange]), { disableStrict: true });
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const open = Boolean(anchorEl);
+    // effects
+    React.useEffect(() => {
+        if (!anchorEl) {
+            // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
+            innerRef.current?.blur();
+        }
+    }, [anchorEl, innerRef]);
+    React.useImperativeHandle(ref, () => innerRef.current, [
+        innerRef,
+    ]);
+    // handlers
+    const handleChange = React.useCallback((event) => {
+        setValue(event.target.value);
+    }, [setValue]);
+    const handleCalendarToggle = React.useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+        // Focus the input again after it has been blurred
+        setTimeout(() => {
+            innerRef.current?.focus();
+        }, 0);
+    }, [anchorEl, setAnchorEl, innerRef]);
+    const handleInputMouseDown = React.useCallback((event) => {
+        if (inputReadOnly) {
+            event.preventDefault();
+            buttonRef.current?.focus();
+        }
+    }, [inputReadOnly, buttonRef]);
+    return (React.createElement(DatePickerRoot, null,
+        React.createElement(base.FocusTrap, { open: true },
+            React.createElement(React.Fragment, null,
+                React.createElement(Input.Input, { ...innerProps, color: error ? "danger" : innerProps.color, ref: innerRef, size: size, value: value, onChange: handleChange, placeholder: format, disabled: disabled, required: required, error: error, slotProps: {
+                        input: {
+                            component: TextMaskAdapter,
+                            ref: innerRef,
+                            format,
+                            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
+                            onMouseDown: handleInputMouseDown,
+                        },
+                    }, className: className, sx: sx, endDecorator: React.createElement(CalendarButton, { ref: buttonRef, variant: "plain", onClick: readOnly ? undefined : handleCalendarToggle, "aria-label": "Toggle Calendar", "aria-controls": "date-picker-popper", "aria-haspopup": "dialog", "aria-expanded": open, disabled: disabled },
+                        React.createElement(CalendarToday, null)), label: label, helperText: helperText, readOnly: readOnly || inputReadOnly }),
+                open && (React.createElement(base.ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
+                    React.createElement(StyledPopper, { id: "date-picker-popper", open: true, anchorEl: anchorEl, placement: "bottom-end", 
+                        // NOTE: 값이 변경 되기전 blur 이벤트 방지
+                        onMouseDown: (e) => e.preventDefault(), modifiers: [
+                            {
+                                name: "offset",
+                                options: {
+                                    offset: [4, 4],
+                                },
+                            },
+                        ], "aria-label": "Calendar Tooltip", "aria-expanded": open },
+                        React.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
+                            React.createElement(Calendar.Calendar, { value: !Number.isNaN(new Date(value).getTime())
+                                    ? [new Date(value), undefined]
+                                    : undefined, onChange: ([date]) => {
+                                    handleChange({
+                                        target: {
+                                            name: props.name,
+                                            value: formatValueString(date, format),
+                                        },
+                                    });
+                                    setAnchorEl(null);
+                                }, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
+                            !hideClearButton && (React.createElement(DialogActions.DialogActions, { sx: {
+                                    p: 1,
+                                } },
+                                React.createElement(Button.Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
+                                        handleChange({
+                                            target: {
+                                                name: props.name,
+                                                value: "",
+                                            },
+                                        });
+                                        setAnchorEl(null);
+                                    } }, "Clear")))))))))));
+});
+
+exports.DatePicker = DatePicker;

package/dist/components/DatePicker/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DatePicker = require('./DatePicker.js');
+
+
+
+exports.DatePicker = DatePicker.DatePicker;
+exports.default = DatePicker.DatePicker;

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,215 @@
+'use strict';
+
+var React = require('react');
+var reactImask = require('react-imask');
+var CalendarToday = require('../../external/@mui/icons-material/esm/CalendarToday.js');
+var joy = require('@mui/joy');
+var base = require('@mui/base');
+var Input = require('../Input/Input.js');
+var IconButton = require('../IconButton/IconButton.js');
+var Sheet = require('../Sheet/Sheet.js');
+var Calendar = require('../Calendar/Calendar.js');
+var DialogActions = require('../DialogActions/DialogActions.js');
+var Button = require('../Button/Button.js');
+var index = require('../../hooks/use-controlled-state/index.js');
+
+const CalendarButton = joy.styled(IconButton.IconButton, {
+    name: "DateRangePicker",
+    slot: "calendarButton",
+})(({ theme }) => ({
+    '&:focus': {
+        '--Icon-color': 'currentColor',
+        outlineOffset: `${theme.getCssVar('focus-thickness')}`,
+        outline: `${theme.getCssVar('focus-thickness')} solid ${theme.getCssVar('palette-focusVisible')}`
+    }
+}));
+const StyledPopper = joy.styled(base.Popper, {
+    name: "DateRangePicker",
+    slot: "popper",
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+}));
+const CalendarSheet = joy.styled(Sheet.Sheet, {
+    name: "DateRangePicker",
+    slot: "sheet",
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+    width: "264px",
+    boxShadow: theme.shadow.md,
+    borderRadius: theme.radius.md,
+}));
+const DateRangePickerRoot = joy.styled("div", {
+    name: "DateRangePicker",
+    slot: "root",
+    overridesResolver: (props, styles) => styles.root,
+})({
+    width: "100%",
+});
+const formatValueString = ([date1, date2], format) => {
+    const getStr = (date) => {
+        let day = `${date.getDate()}`;
+        let month = `${date.getMonth() + 1}`;
+        const year = date.getFullYear();
+        if (Number(day) < 10)
+            day = "0" + day;
+        if (Number(month) < 10)
+            month = "0" + month;
+        return format
+            .replace(/YYYY/g, year.toString())
+            .replace(/MM/g, month)
+            .replace(/DD/g, day);
+    };
+    return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
+};
+function parseDate(dateString, format) {
+    const formatParts = format.split(/[-./\s]/);
+    const dateParts = dateString.split(/[-./\s]/);
+    let day, month, year;
+    for (let i = 0; i < formatParts.length; i++) {
+        const value = parseInt(dateParts[i], 10);
+        switch (formatParts[i]) {
+            case "DD":
+                day = value;
+                break;
+            case "MM":
+                month = value - 1; // JavaScript months are 0-indexed
+                break;
+            case "YYYY":
+                year = value;
+                break;
+        }
+    }
+    const result = new Date(year, month, day);
+    return result;
+}
+const parseDates = (str, format) => {
+    const date1 = str.split(" - ")[0] || "";
+    const date2 = str.split(" - ")[1] || "";
+    return [parseDate(date1, format), parseDate(date2, format)];
+};
+const formatToPattern = (format) => {
+    return `${format} - ${format}`
+        .replace(/YYYY/g, "Y")
+        .replace(/MM/g, "M")
+        .replace(/DD/g, "D")
+        .replace(/[^YMD\s]/g, (match) => `${match}\``);
+};
+const TextMaskAdapter = React.forwardRef(function TextMaskAdapter(props, ref) {
+    const { onChange, format, ...other } = props;
+    return (React.createElement(reactImask.IMaskInput, { ...other, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), mask: Date, 
+        // other options are optional
+        pattern: formatToPattern(format), 
+        // you can provide your own blocks definitions, default blocks for date mask are:
+        blocks: {
+            D: {
+                mask: reactImask.IMask.MaskedRange,
+                from: 1,
+                to: 31,
+                maxLength: 2,
+            },
+            M: {
+                mask: reactImask.IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                maxLength: 2,
+            },
+            Y: {
+                mask: reactImask.IMask.MaskedRange,
+                from: 1900,
+                to: 9999,
+            },
+        }, 
+        // define date -> str convertion
+        format: (dates) => formatValueString(dates, format), 
+        // define str -> date convertion
+        parse: (str) => parseDates(str, format), 
+        // optional interval options
+        // min={new Date(2000, 0, 1)} // defaults to `1900-01-01`
+        // max={new Date(2020, 0, 1)} // defaults to `9999-01-01`
+        autofix: "pad", overwrite: true }));
+});
+const DateRangePicker = React.forwardRef((inProps, ref) => {
+    // prop destruction
+    const props = joy.useThemeProps({ props: inProps, name: "DateRangePicker" });
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast, required, 
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx, className, format = "YYYY/MM/DD", size, inputReadOnly, hideClearButton, readOnly, ...innerProps } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    const innerRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const [value, setValue] = index.useControlledState(props.value, props.defaultValue || "", React.useCallback((value) => onChange?.({ target: { name: props.name, value } }), [props.name, onChange]), { disableStrict: true });
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const open = Boolean(anchorEl);
+    const calendarValue = React.useMemo(() => (value ? parseDates(value, format) : undefined), [value, format]);
+    // effects
+    React.useEffect(() => {
+        if (!anchorEl) {
+            // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
+            innerRef.current?.blur();
+        }
+    }, [anchorEl, innerRef]);
+    React.useImperativeHandle(ref, () => innerRef.current, [
+        innerRef,
+    ]);
+    // handlers
+    const handleChange = React.useCallback((event) => {
+        setValue(event.target.value);
+    }, [setValue]);
+    const handleCalendarToggle = React.useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+        innerRef.current?.focus();
+    }, [anchorEl, setAnchorEl, innerRef]);
+    const handleCalendarChange = React.useCallback(([date1, date2]) => {
+        if (!date1 || !date2)
+            return;
+        setValue(formatValueString([date1, date2], format));
+        setAnchorEl(null);
+    }, [setValue, setAnchorEl, format]);
+    const handleInputMouseDown = React.useCallback((event) => {
+        if (inputReadOnly) {
+            event.preventDefault();
+            buttonRef.current?.focus();
+        }
+    }, [inputReadOnly, buttonRef]);
+    return (React.createElement(DateRangePickerRoot, null,
+        React.createElement(base.FocusTrap, { open: true },
+            React.createElement(React.Fragment, null,
+                React.createElement(Input.Input, { ...innerProps, color: error ? "danger" : innerProps.color, ref: ref, size: size, value: value, onChange: handleChange, disabled: disabled, required: required, placeholder: `${format} - ${format}`, slotProps: {
+                        input: {
+                            component: TextMaskAdapter,
+                            ref: innerRef,
+                            format,
+                            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
+                            onMouseDown: handleInputMouseDown,
+                        },
+                    }, error: error, className: className, sx: sx, endDecorator: React.createElement(CalendarButton, { ref: buttonRef, variant: "plain", onClick: readOnly ? undefined : handleCalendarToggle, "aria-label": "Toggle Calendar", "aria-controls": "date-range-picker-popper", "aria-haspopup": "dialog", "aria-expanded": open, disabled: disabled },
+                        React.createElement(CalendarToday, null)), label: label, helperText: helperText, readOnly: readOnly || inputReadOnly }),
+                open && (React.createElement(base.ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
+                    React.createElement(StyledPopper, { id: "date-range-picker-popper", open: true, anchorEl: anchorEl, placement: "bottom-end", 
+                        // NOTE: 값이 변경 되기전 blur 이벤트 방지
+                        onMouseDown: (e) => e.preventDefault(), modifiers: [
+                            {
+                                name: "offset",
+                                options: {
+                                    offset: [4, 4],
+                                },
+                            },
+                        ], "aria-label": "Calendar Tooltip", "aria-expanded": open },
+                        React.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
+                            React.createElement(Calendar.Calendar, { rangeSelection: true, defaultValue: calendarValue, onChange: handleCalendarChange, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
+                            !hideClearButton && (React.createElement(DialogActions.DialogActions, { sx: {
+                                    p: 1,
+                                } },
+                                React.createElement(Button.Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
+                                        setValue("");
+                                        setAnchorEl(null);
+                                    } }, "Clear")))))))))));
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+exports.DateRangePicker = DateRangePicker;

package/dist/components/DialogActions/DialogActions.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionDialogActions = framerMotion.motion(joy.DialogActions);
+const StyledDialogActions = joy.styled(MotionDialogActions)(({ theme }) => ({
+    padding: theme.spacing(2),
+    gap: theme.spacing(2),
+    flexDirection: "row",
+    justifyContent: "flex-end",
+}));
+const DialogActions = StyledDialogActions;
+DialogActions.displayName = "DialogActions";
+
+exports.DialogActions = DialogActions;

package/dist/components/DialogActions/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DialogActions = require('./DialogActions.js');
+
+
+
+exports.DialogActions = DialogActions.DialogActions;
+exports.default = DialogActions.DialogActions;

package/dist/components/DialogContent/DialogContent.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionDialogContent = framerMotion.motion(joy.DialogContent);
+const StyledDialogContent = joy.styled(MotionDialogContent)(({ theme }) => ({
+    padding: theme.spacing(0, 6, 5),
+}));
+const DialogContent = StyledDialogContent;
+DialogContent.displayName = "DialogContent";
+
+exports.DialogContent = DialogContent;

package/dist/components/DialogContent/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DialogContent = require('./DialogContent.js');
+
+
+
+exports.DialogContent = DialogContent.DialogContent;
+exports.default = DialogContent.DialogContent;

package/dist/components/DialogFrame/DialogFrame.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var DialogTitle = require('../DialogTitle/DialogTitle.js');
+var DialogContent = require('../DialogContent/DialogContent.js');
+var Modal = require('../Modal/Modal.js');
+var DialogActions = require('../DialogActions/DialogActions.js');
+var joy = require('@mui/joy');
+
+const StyledDialogFrame = joy.styled(Modal.ModalDialog, {
+    name: "Dialog",
+    slot: "Root",
+})({
+    padding: 0,
+});
+const DialogFrame = React.forwardRef((props, ref) => {
+    // prop destruction
+    const { title, children, actions, fullscreen, ...innerProps } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(StyledDialogFrame, { layout: fullscreen ? "fullscreen" : "center", ref: ref, ...innerProps },
+        React.createElement(DialogTitle.DialogTitle, null, title),
+        React.createElement(DialogContent.DialogContent, null, children),
+        React.createElement(DialogActions.DialogActions, null, actions)));
+});
+DialogFrame.displayName = "DialogFrame";
+
+exports.DialogFrame = DialogFrame;

package/dist/components/DialogTitle/DialogTitle.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionDialogTitle = framerMotion.motion(joy.DialogTitle);
+const StyledDialogTitle = joy.styled(MotionDialogTitle)(({ theme }) => ({
+    padding: theme.spacing(4, 6),
+}));
+const DialogTitle = StyledDialogTitle;
+DialogTitle.displayName = "DialogTitle";
+
+exports.DialogTitle = DialogTitle;

package/dist/components/DialogTitle/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DialogTitle = require('./DialogTitle.js');
+
+
+
+exports.DialogTitle = DialogTitle.DialogTitle;
+exports.default = DialogTitle.DialogTitle;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionDivider = framerMotion.motion(joy.Divider);
+const Divider = (props) => {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React.createElement(MotionDivider, { ...props });
+};
+Divider.displayName = "Divider";
+
+exports.Divider = Divider;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionDrawer = framerMotion.motion(joy.Drawer);
+const Drawer = (props) => {
+    // prop destruction
+    const { children, size, ...innerProps } = props;
+    // lib hooks
+    const theme = joy.useTheme();
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(MotionDrawer, { ...innerProps, slotProps: {
+            ...innerProps.slotProps,
+            content: {
+                ...innerProps.slotProps?.content,
+                sx: {
+                    bgcolor: "transparent",
+                    boxShadow: "none",
+                    [theme.breakpoints.down("md")]: {
+                        width: "100%",
+                    },
+                },
+            },
+        }, sx: {
+            ...props.sx,
+            "--Drawer-horizontalSize": {
+                sm: "360px",
+                md: "600px",
+                lg: "900px",
+            }[size || "md"],
+        } }, children));
+};
+Drawer.displayName = "Drawer";
+
+exports.Drawer = Drawer;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionDropdown = framerMotion.motion(joy.Dropdown);
+const Dropdown = MotionDropdown;
+Dropdown.displayName = "Dropdown";
+
+exports.Dropdown = Dropdown;

package/dist/components/Dropdown/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Dropdown = require('./Dropdown.js');
+
+
+
+exports.Dropdown = Dropdown.Dropdown;
+exports.default = Dropdown.Dropdown;

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var joy = require('@mui/joy');
+var framerMotion = require('framer-motion');
+
+const MotionFormControl = framerMotion.motion(joy.FormControl);
+const FormControl = joy.styled(MotionFormControl)(({ theme }) => ({
+    [`.${joy.formLabelClasses.root}`]: {
+        display: "block",
+    },
+    [`.${joy.formLabelClasses.asterisk}`]: {
+        marginLeft: theme.spacing(0.5),
+    },
+}));
+FormControl.displayName = "FormControl";
+
+exports.FormControl = FormControl;

package/dist/components/FormControl/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FormControl = require('./FormControl.js');
+
+
+
+exports.FormControl = FormControl.FormControl;
+exports.default = FormControl.FormControl;