@ceed/cds 0.0.186 → 0.0.187-treeshaking.1

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,210 @@
+import React__default, { forwardRef, useRef, useCallback, useState, useEffect, useImperativeHandle } from 'react';
+import { IMaskInput, IMask } from 'react-imask';
+import CalendarTodayIcon from '../../external/@mui/icons-material/esm/CalendarToday.js';
+import { styled, useThemeProps } from '@mui/joy';
+import { Popper, FocusTrap, ClickAwayListener } from '@mui/base';
+import { Input } from '../Input/Input.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Sheet } from '../Sheet/Sheet.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { DialogActions } from '../DialogActions/DialogActions.js';
+import { Button } from '../Button/Button.js';
+import { useControlledState } from '../../hooks/use-controlled-state/index.js';
+
+const CalendarButton = styled(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 = styled(Popper, {
+    name: "DatePicker",
+    slot: "popper",
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+}));
+const CalendarSheet = styled(Sheet, {
+    name: "DatePicker",
+    slot: "sheet",
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    width: "264px",
+    boxShadow: theme.shadow.md,
+    borderRadius: theme.radius.md,
+}));
+const DatePickerRoot = 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__default.forwardRef(function TextMaskAdapter(props, ref) {
+    const { onChange, format, ...other } = props;
+    return (React__default.createElement(IMaskInput, { ...other, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), mask: Date, pattern: formatToPattern(format), blocks: {
+            D: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 31,
+                maxLength: 2,
+            },
+            M: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                maxLength: 2,
+            },
+            Y: {
+                mask: 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 = forwardRef((inProps, ref) => {
+    // prop destruction
+    const props = 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 = useRef(null);
+    const buttonRef = useRef(null);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue || "", useCallback((value) => onChange?.({ target: { name: props.name, value } }), [props.name, onChange]), { disableStrict: true });
+    const [anchorEl, setAnchorEl] = useState(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const open = Boolean(anchorEl);
+    // effects
+    useEffect(() => {
+        if (!anchorEl) {
+            // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
+            innerRef.current?.blur();
+        }
+    }, [anchorEl, innerRef]);
+    useImperativeHandle(ref, () => innerRef.current, [
+        innerRef,
+    ]);
+    // handlers
+    const handleChange = useCallback((event) => {
+        setValue(event.target.value);
+    }, [setValue]);
+    const handleCalendarToggle = 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 = useCallback((event) => {
+        if (inputReadOnly) {
+            event.preventDefault();
+            buttonRef.current?.focus();
+        }
+    }, [inputReadOnly, buttonRef]);
+    return (React__default.createElement(DatePickerRoot, null,
+        React__default.createElement(FocusTrap, { open: true },
+            React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(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__default.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__default.createElement(CalendarTodayIcon, null)), label: label, helperText: helperText, readOnly: readOnly || inputReadOnly }),
+                open && (React__default.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
+                    React__default.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__default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
+                            React__default.createElement(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__default.createElement(DialogActions, { sx: {
+                                    p: 1,
+                                } },
+                                React__default.createElement(Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
+                                        handleChange({
+                                            target: {
+                                                name: props.name,
+                                                value: "",
+                                            },
+                                        });
+                                        setAnchorEl(null);
+                                    } }, "Clear")))))))))));
+});
+
+export { DatePicker };

package/dist/components/DatePicker/index.d.ts

@@ -1,3 +1,3 @@
-import { DatePicker } from "./DatePicker";
-export * from "./DatePicker";
+import { DatePicker } from "./DatePicker.js";
+export * from "./DatePicker.js";
 export default DatePicker;

package/dist/components/DatePicker/index.js

@@ -0,0 +1,5 @@
+import { DatePicker } from './DatePicker.js';
+
+
+
+export { DatePicker, DatePicker as default };

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import Input from "../Input";
+import Input from "../Input/index.js";
 interface BaseDateRangePickerProps {
     value?: string;
     defaultValue?: string;

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,213 @@
+import React__default, { forwardRef, useRef, useCallback, useState, useMemo, useEffect, useImperativeHandle } from 'react';
+import { IMaskInput, IMask } from 'react-imask';
+import CalendarTodayIcon from '../../external/@mui/icons-material/esm/CalendarToday.js';
+import { styled, useThemeProps } from '@mui/joy';
+import { Popper, FocusTrap, ClickAwayListener } from '@mui/base';
+import { Input } from '../Input/Input.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Sheet } from '../Sheet/Sheet.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { DialogActions } from '../DialogActions/DialogActions.js';
+import { Button } from '../Button/Button.js';
+import { useControlledState } from '../../hooks/use-controlled-state/index.js';
+
+const CalendarButton = styled(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 = styled(Popper, {
+    name: "DateRangePicker",
+    slot: "popper",
+})(({ theme }) => ({
+    zIndex: theme.zIndex.tooltip,
+}));
+const CalendarSheet = styled(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 = 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__default.forwardRef(function TextMaskAdapter(props, ref) {
+    const { onChange, format, ...other } = props;
+    return (React__default.createElement(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: IMask.MaskedRange,
+                from: 1,
+                to: 31,
+                maxLength: 2,
+            },
+            M: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                maxLength: 2,
+            },
+            Y: {
+                mask: 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 = forwardRef((inProps, ref) => {
+    // prop destruction
+    const props = 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 = useRef(null);
+    const buttonRef = useRef(null);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue || "", useCallback((value) => onChange?.({ target: { name: props.name, value } }), [props.name, onChange]), { disableStrict: true });
+    const [anchorEl, setAnchorEl] = useState(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const open = Boolean(anchorEl);
+    const calendarValue = useMemo(() => (value ? parseDates(value, format) : undefined), [value, format]);
+    // effects
+    useEffect(() => {
+        if (!anchorEl) {
+            // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
+            innerRef.current?.blur();
+        }
+    }, [anchorEl, innerRef]);
+    useImperativeHandle(ref, () => innerRef.current, [
+        innerRef,
+    ]);
+    // handlers
+    const handleChange = useCallback((event) => {
+        setValue(event.target.value);
+    }, [setValue]);
+    const handleCalendarToggle = useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+        innerRef.current?.focus();
+    }, [anchorEl, setAnchorEl, innerRef]);
+    const handleCalendarChange = useCallback(([date1, date2]) => {
+        if (!date1 || !date2)
+            return;
+        setValue(formatValueString([date1, date2], format));
+        setAnchorEl(null);
+    }, [setValue, setAnchorEl, format]);
+    const handleInputMouseDown = useCallback((event) => {
+        if (inputReadOnly) {
+            event.preventDefault();
+            buttonRef.current?.focus();
+        }
+    }, [inputReadOnly, buttonRef]);
+    return (React__default.createElement(DateRangePickerRoot, null,
+        React__default.createElement(FocusTrap, { open: true },
+            React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(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__default.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__default.createElement(CalendarTodayIcon, null)), label: label, helperText: helperText, readOnly: readOnly || inputReadOnly }),
+                open && (React__default.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
+                    React__default.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__default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
+                            React__default.createElement(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__default.createElement(DialogActions, { sx: {
+                                    p: 1,
+                                } },
+                                React__default.createElement(Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
+                                        setValue("");
+                                        setAnchorEl(null);
+                                    } }, "Clear")))))))))));
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DateRangePicker };

package/dist/components/DateRangePicker/index.d.ts

@@ -1,3 +1,3 @@
-import { DateRangePicker } from "./DateRangePicker";
-export * from "./DateRangePicker";
+import { DateRangePicker } from "./DateRangePicker.js";
+export * from "./DateRangePicker.js";
 export default DateRangePicker;

package/dist/components/DialogActions/DialogActions.js

@@ -0,0 +1,14 @@
+import { DialogActions as DialogActions$1, styled } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionDialogActions = motion(DialogActions$1);
+const StyledDialogActions = styled(MotionDialogActions)(({ theme }) => ({
+    padding: theme.spacing(2),
+    gap: theme.spacing(2),
+    flexDirection: "row",
+    justifyContent: "flex-end",
+}));
+const DialogActions = StyledDialogActions;
+DialogActions.displayName = "DialogActions";
+
+export { DialogActions };

package/dist/components/DialogActions/index.d.ts

@@ -1,3 +1,3 @@
-import { DialogActions } from "./DialogActions";
-export * from "./DialogActions";
+import { DialogActions } from "./DialogActions.js";
+export * from "./DialogActions.js";
 export default DialogActions;

package/dist/components/DialogActions/index.js

@@ -0,0 +1,5 @@
+import { DialogActions } from './DialogActions.js';
+
+
+
+export { DialogActions, DialogActions as default };

package/dist/components/DialogContent/DialogContent.js

@@ -0,0 +1,11 @@
+import { DialogContent as DialogContent$1, styled } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionDialogContent = motion(DialogContent$1);
+const StyledDialogContent = styled(MotionDialogContent)(({ theme }) => ({
+    padding: theme.spacing(0, 6, 5),
+}));
+const DialogContent = StyledDialogContent;
+DialogContent.displayName = "DialogContent";
+
+export { DialogContent };

package/dist/components/DialogContent/index.d.ts

@@ -1,3 +1,3 @@
-import { DialogContent } from "./DialogContent";
-export * from "./DialogContent";
+import { DialogContent } from "./DialogContent.js";
+export * from "./DialogContent.js";
 export default DialogContent;

package/dist/components/DialogContent/index.js

@@ -0,0 +1,5 @@
+import { DialogContent } from './DialogContent.js';
+
+
+
+export { DialogContent, DialogContent as default };

package/dist/components/DialogFrame/DialogFrame.d.ts

@@ -14,7 +14,7 @@ declare const DialogFrame: React.ForwardRefExoticComponent<Omit<Omit<Pick<{
     layout?: import("@mui/types").OverridableStringUnion<"center" | "fullscreen", import("@mui/joy").ModalDialogPropsLayoutOverrides> | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
     size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").ModalDialogPropsSizeOverrides> | undefined;
-    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+    sx?: import("@mui/joy/styles/types/theme.js").SxProps | undefined;
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ModalDialogPropsVariantOverrides> | undefined;
 } & import("@mui/joy").ModalDialogSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;

package/dist/components/DialogFrame/DialogFrame.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { DialogTitle } from '../DialogTitle/DialogTitle.js';
+import { DialogContent } from '../DialogContent/DialogContent.js';
+import { ModalDialog } from '../Modal/Modal.js';
+import { DialogActions } from '../DialogActions/DialogActions.js';
+import { styled } from '@mui/joy';
+
+const StyledDialogFrame = styled(ModalDialog, {
+    name: "Dialog",
+    slot: "Root",
+})({
+    padding: 0,
+});
+const DialogFrame = React__default.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__default.createElement(StyledDialogFrame, { layout: fullscreen ? "fullscreen" : "center", ref: ref, ...innerProps },
+        React__default.createElement(DialogTitle, null, title),
+        React__default.createElement(DialogContent, null, children),
+        React__default.createElement(DialogActions, null, actions)));
+});
+DialogFrame.displayName = "DialogFrame";
+
+export { DialogFrame };

package/dist/components/DialogFrame/index.d.ts

@@ -1,3 +1,3 @@
-import { DialogFrame } from "./DialogFrame";
-export * from "./DialogFrame";
+import { DialogFrame } from "./DialogFrame.js";
+export * from "./DialogFrame.js";
 export default DialogFrame;

package/dist/components/DialogTitle/DialogTitle.js

@@ -0,0 +1,11 @@
+import { DialogTitle as DialogTitle$1, styled } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionDialogTitle = motion(DialogTitle$1);
+const StyledDialogTitle = styled(MotionDialogTitle)(({ theme }) => ({
+    padding: theme.spacing(4, 6),
+}));
+const DialogTitle = StyledDialogTitle;
+DialogTitle.displayName = "DialogTitle";
+
+export { DialogTitle };

package/dist/components/DialogTitle/index.d.ts

@@ -1,3 +1,3 @@
-import { DialogTitle } from "./DialogTitle";
-export * from "./DialogTitle";
+import { DialogTitle } from "./DialogTitle.js";
+export * from "./DialogTitle.js";
 export default DialogTitle;

package/dist/components/DialogTitle/index.js

@@ -0,0 +1,5 @@
+import { DialogTitle } from './DialogTitle.js';
+
+
+
+export { DialogTitle, DialogTitle as default };

package/dist/components/Divider/Divider.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Divider as Divider$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionDivider = motion(Divider$1);
+const Divider = (props) => {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React__default.createElement(MotionDivider, { ...props });
+};
+Divider.displayName = "Divider";
+
+export { Divider };

package/dist/components/Divider/index.d.ts

@@ -1,3 +1,3 @@
-import { Divider } from "./Divider";
-export * from "./Divider";
+import { Divider } from "./Divider.js";
+export * from "./Divider.js";
 export default Divider;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { Drawer as Drawer$1, useTheme } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionDrawer = motion(Drawer$1);
+const Drawer = (props) => {
+    // prop destruction
+    const { children, size, ...innerProps } = props;
+    // lib hooks
+    const theme = useTheme();
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React__default.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";
+
+export { Drawer };

package/dist/components/Drawer/index.d.ts

@@ -1,3 +1,3 @@
-import { Drawer } from "./Drawer";
-export * from "./Drawer";
+import { Drawer } from "./Drawer.js";
+export * from "./Drawer.js";
 export default Drawer;