@ceed/cds 0.0.187-treeshaking.1 → 0.0.187

package/dist/components/IconButton/IconButton.js

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

package/dist/components/IconButton/index.js

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

package/dist/components/Input/Input.js

@@ -1,60 +0,0 @@
-import React__default, { useCallback } from 'react';
-import { Input as Input$1, Stack } from '@mui/joy';
-import { motion } from 'framer-motion';
-import ClearIcon from '../../external/@mui/icons-material/esm/Close.js';
-import { FormControl } from '../FormControl/FormControl.js';
-import { FormLabel } from '../FormLabel/FormLabel.js';
-import { FormHelperText } from '../FormHelperText/FormHelperText.js';
-import { IconButton } from '../IconButton/IconButton.js';
-import { useControlledState } from '../../hooks/use-controlled-state/index.js';
-
-const MotionInput = motion(Input$1);
-const Input = React__default.forwardRef((props, ref) => {
-    // prop destruction
-    const { label, helperText, error, style, size, color, disabled, required, onChange, name, 
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx, className, enableClearable, ...innerProps } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    const [value, setValue] = useControlledState(props.value, props.defaultValue, useCallback((value) => {
-        onChange?.({
-            /**
-             * @see https://github.com/Ecube-Labs/hds/pull/36#discussion_r1722720909
-             * NOTE: onChange(React.SyntheticEvent)의 타입과 맞지 않아 타입 에러가 발생. 이대로 사용하다가 문제가 생기면 대응한다.
-             */
-            // @ts-expect-error
-            target: { value: value?.toString() || "", name: name || "" },
-        });
-    }, [onChange, name]));
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    const handleChange = (e) => {
-        setValue(e.target.value);
-    };
-    const handleClear = () => {
-        setValue(props.defaultValue || "");
-    };
-    const input = (React__default.createElement(MotionInput, { value: value, name: name, onChange: handleChange, required: required, color: error ? "danger" : color, disabled: disabled, slotProps: {
-            input: { ref, ...innerProps.slotProps?.input },
-            ...innerProps.slotProps,
-        }, ...innerProps, endDecorator: enableClearable ? (React__default.createElement(Stack, { gap: 1, direction: "row" },
-            innerProps.endDecorator,
-            value && (React__default.createElement(IconButton
-            // NOTE: clear 이후에도 focus를 유지하기 위해 mouseDown 이벤트를 막는다.
-            , { 
-                // NOTE: clear 이후에도 focus를 유지하기 위해 mouseDown 이벤트를 막는다.
-                onMouseDown: (e) => e.preventDefault(), onClick: handleClear, "aria-label": "Clear" },
-                React__default.createElement(ClearIcon, null))))) : (innerProps.endDecorator) }));
-    return (React__default.createElement(FormControl, { required: required, color: color, size: size, error: error, disabled: disabled, 
-        // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-        sx: sx, className: className },
-        label && React__default.createElement(FormLabel, null, label),
-        input,
-        helperText && React__default.createElement(FormHelperText, null, helperText)));
-});
-Input.displayName = "Input";
-
-export { Input };

package/dist/components/Input/index.js

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

package/dist/components/InsetDrawer/InsetDrawer.js

@@ -1,30 +0,0 @@
-import React__default from 'react';
-import { Drawer } from '@mui/joy';
-import { motion } from 'framer-motion';
-
-const MotionDrawer = motion(Drawer);
-const InsetDrawer = (props) => {
-    // prop destruction
-    const { children, ...innerProps } = props;
-    // lib hooks
-    // 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",
-                    p: { md: 3, sm: 0 },
-                    boxShadow: "none",
-                },
-            },
-        } }, children));
-};
-InsetDrawer.displayName = "InsetDrawer";
-
-export { InsetDrawer };

package/dist/components/Markdown/Markdown.js

@@ -1,36 +0,0 @@
-import React__default from 'react';
-import ReactMarkdown from 'react-markdown';
-import { Divider } from '../Divider/Divider.js';
-import { Typography } from '../Typography/Typography.js';
-import { Link } from '@mui/joy';
-import { rehypeAccent } from '../../libs/rehype-accent/index.js';
-
-const Markdown = (props) => {
-    // prop destruction
-    const { color, textColor, defaultLevel = "body-md", accentColor = "danger.500", defaultLinkAction = "_self", markdownOptions, boldFontWeight, content, ...innerProps } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (React__default.createElement(Typography, { component: "div", color: color, textColor: textColor, level: defaultLevel, ...innerProps },
-        React__default.createElement(ReactMarkdown, { ...markdownOptions, children: content, rehypePlugins: [[rehypeAccent, { accentColor }]], components: {
-                h1: ({ children }) => (React__default.createElement(Typography, { color: color, textColor: textColor, level: "h1" }, children)),
-                h2: ({ children }) => (React__default.createElement(Typography, { color: color, textColor: textColor, level: "h2" }, children)),
-                h3: ({ children }) => (React__default.createElement(Typography, { color: color, textColor: textColor, level: "h3" }, children)),
-                h4: ({ children }) => (React__default.createElement(Typography, { color: color, textColor: textColor, level: "h4" }, children)),
-                p: ({ children, node }) => {
-                    return (React__default.createElement(Typography, { color: color, textColor: textColor, level: defaultLevel, ...node?.properties }, children));
-                },
-                a: ({ children, href }) => (React__default.createElement(Link, { href: href, target: defaultLinkAction }, children)),
-                hr: () => React__default.createElement(Divider, null),
-                b: ({ children }) => (React__default.createElement(Typography, { fontWeight: boldFontWeight }, children)),
-                strong: ({ children }) => (React__default.createElement(Typography, { fontWeight: boldFontWeight }, children)),
-                ...markdownOptions?.components,
-            } })));
-};
-Markdown.displayName = "Markdown";
-
-export { Markdown };

package/dist/components/Menu/Menu.js

@@ -1,43 +0,0 @@
-import React__default from 'react';
-import { Menu as Menu$1, MenuItem as MenuItem$1 } from '@mui/joy';
-import { motion } from 'framer-motion';
-
-const MotionMenu = motion(Menu$1);
-/**
- * @todo [v1.0.0] Restructure menu component to:
- * - Abstract the menu component.
- *
- *  * Example of future usage:
- * ```jsx
- * <Menu menuItems={[{...}]}>
- *  Menu Button Content
- * </Menu>
- * ```
- */
-const Menu = (props) => {
-    // prop destruction
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return React__default.createElement(MotionMenu, { ...props });
-};
-Menu.displayName = "Menu";
-const MotionMenuItem = motion(MenuItem$1);
-const MenuItem = (props) => {
-    // prop destruction
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return React__default.createElement(MotionMenuItem, { ...props });
-};
-MenuItem.displayName = "MenuItem";
-
-export { Menu, MenuItem };

package/dist/components/Menu/index.js

@@ -1,6 +0,0 @@
-import { Menu } from './Menu.js';
-export { MenuItem } from './Menu.js';
-
-
-
-export { Menu, Menu as default };

package/dist/components/MenuButton/MenuButton.js

@@ -1,26 +0,0 @@
-import React__default from 'react';
-import { Button, MenuButton as MenuButton$1 } from '@mui/joy';
-import ExpandMoreIcon from '../../external/@mui/icons-material/esm/ExpandMore.js';
-import { Dropdown } from '../Dropdown/Dropdown.js';
-import { Menu, MenuItem } from '../Menu/Menu.js';
-
-function MenuButton(props) {
-    // prop destruction
-    const { size, buttonText, items = [], showIcon } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    if (!items.length) {
-        return (React__default.createElement(Button, { component: props.buttonComponent ?? "button", size: size, variant: "plain", color: "neutral", endDecorator: showIcon ? React__default.createElement(ExpandMoreIcon, null) : undefined, ...(props.buttonComponentProps ?? {}) }, buttonText));
-    }
-    return (React__default.createElement(Dropdown, null,
-        React__default.createElement(MenuButton$1, { component: props.buttonComponent ?? "button", size: size, variant: "plain", endDecorator: showIcon ? React__default.createElement(ExpandMoreIcon, null) : undefined, ...(props.buttonComponentProps ?? {}) }, buttonText),
-        React__default.createElement(Menu, { size: size }, items.map((i) => (React__default.createElement(MenuItem, { key: i.text, component: i.component, ...(i.componentProps ?? {}) }, i.text))))));
-}
-MenuButton.displayName = "MenuButton";
-
-export { MenuButton };

package/dist/components/Modal/Modal.js

@@ -1,43 +0,0 @@
-import React__default from 'react';
-import { Modal as Modal$1, styled, ModalDialog as ModalDialog$1, ModalClose as ModalClose$1, ModalOverflow as ModalOverflow$1 } from '@mui/joy';
-import { motion } from 'framer-motion';
-import { DialogTitle } from '../DialogTitle/DialogTitle.js';
-import { DialogContent } from '../DialogContent/DialogContent.js';
-
-const MotionModal = motion(Modal$1);
-const Modal = MotionModal;
-Modal.displayName = "Modal";
-const StyledModalDialog = styled(ModalDialog$1)({
-    padding: 0,
-});
-const ModalDialog = StyledModalDialog;
-ModalDialog.displayName = "ModalDialog";
-const MotionModalClose = styled(motion(ModalClose$1))(({ theme }) => ({
-    top: theme.spacing(3),
-    right: theme.spacing(6),
-}));
-const ModalClose = MotionModalClose;
-ModalClose.displayName = "ModalClose";
-const MotionModalOverflow = motion(ModalOverflow$1);
-const ModalOverflow = MotionModalOverflow;
-ModalOverflow.displayName = "ModalOverflow";
-function ModalFrame(props) {
-    // prop destruction
-    const { title, children, titleStartDecorator, ...innerProps } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (React__default.createElement(StyledModalDialog, { ...innerProps },
-        React__default.createElement(ModalClose, null),
-        React__default.createElement(DialogTitle, null,
-            titleStartDecorator,
-            title),
-        React__default.createElement(DialogContent, null, children)));
-}
-ModalFrame.displayName = "ModalFrame";
-
-export { Modal, ModalClose, ModalDialog, ModalFrame, ModalOverflow };

package/dist/components/MonthPicker/MonthPicker.js

@@ -1,162 +0,0 @@
-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 StyledPopper = styled(Popper, {
-    name: "MonthPicker",
-    slot: "popper",
-})(({ theme }) => ({
-    zIndex: theme.zIndex.tooltip,
-}));
-const CalendarSheet = styled(Sheet, {
-    name: "MonthPicker",
-    slot: "sheet",
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    width: "264px",
-    boxShadow: theme.shadow.md,
-    borderRadius: theme.radius.md,
-}));
-const MonthPickerRoot = styled("div", {
-    name: "MonthPicker",
-    slot: "root",
-    overridesResolver: (props, styles) => styles.root,
-})({
-    width: "100%",
-});
-const formatValueString = (date, format) => {
-    let month = `${date.getMonth() + 1}`;
-    const year = date.getFullYear();
-    if (Number(month) < 10)
-        month = "0" + month;
-    return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
-};
-const formatToPattern = (format) => {
-    return format
-        .replace(/YYYY/g, "Y")
-        .replace(/MM/g, "M")
-        .replace(/[^YM\s]/g, (match) => `${match}\``);
-};
-function parseDate(dateString) {
-    let month, year;
-    const cleanDateString = dateString.replace(/[^\d]/g, "");
-    if (dateString.match(/\d{1,2}.\d{4}/)) {
-        // MMYYYY
-        month = cleanDateString.slice(0, 2);
-        year = cleanDateString.slice(2);
-    }
-    else if (dateString.match(/\d{4}.\d{1,2}/)) {
-        // YYYYMM
-        year = cleanDateString.slice(0, 4);
-        month = cleanDateString.slice(4);
-    }
-    const date = new Date(`${year}/${month}`);
-    return date;
-}
-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: {
-            M: {
-                mask: IMask.MaskedRange,
-                from: 1,
-                to: 12,
-                maxLength: 2,
-            },
-            Y: {
-                mask: IMask.MaskedRange,
-                from: 1900,
-                to: 9999,
-            },
-        }, format: (date) => formatValueString(date, format), parse: parseDate, autofix: "pad", overwrite: true }));
-});
-const MonthPicker = forwardRef((inProps, ref) => {
-    // prop destruction
-    const props = useThemeProps({ props: inProps, name: "MonthPicker" });
-    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast, required, 
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx, className, format = "YYYY/MM", size, ...innerProps } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    const innerRef = 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);
-        innerRef.current?.focus();
-    }, [anchorEl, setAnchorEl, innerRef]);
-    return (React__default.createElement(MonthPickerRoot, 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, slotProps: {
-                        input: { component: TextMaskAdapter, ref: innerRef, format },
-                    }, error: error, className: className, sx: {
-                        ...sx,
-                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-                        fontFamily: "monospace",
-                    }, endDecorator: React__default.createElement(IconButton, { variant: "plain", onClick: handleCalendarToggle, "aria-label": "Toggle Calendar", "aria-controls": "month-picker-popper", "aria-haspopup": "dialog", "aria-expanded": open },
-                        React__default.createElement(CalendarTodayIcon, null)), label: label, helperText: helperText }),
-                open && (React__default.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
-                    React__default.createElement(StyledPopper, { id: "month-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, { view: "month", views: ["month"], 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 }),
-                            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 { MonthPicker };

package/dist/components/MonthRangePicker/MonthRangePicker.js

@@ -1,172 +0,0 @@
-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 StyledPopper = styled(Popper, {
-    name: "MonthRangePicker",
-    slot: "popper",
-})(({ theme }) => ({
-    zIndex: theme.zIndex.tooltip,
-}));
-const CalendarSheet = styled(Sheet, {
-    name: "MonthRangePicker",
-    slot: "sheet",
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    zIndex: theme.zIndex.tooltip,
-    width: "264px",
-    boxShadow: theme.shadow.md,
-    borderRadius: theme.radius.md,
-}));
-const MonthRangePickerRoot = styled("div", {
-    name: "MonthRangePicker",
-    slot: "root",
-    overridesResolver: (props, styles) => styles.root,
-})({
-    width: "100%",
-});
-const formatValueString = ([date1, date2], format) => {
-    const getStr = (date) => {
-        let month = `${date.getMonth() + 1}`;
-        const year = date.getFullYear();
-        if (Number(month) < 10)
-            month = "0" + month;
-        return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
-    };
-    return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
-};
-function parseDate(dateString) {
-    let month, year;
-    const cleanDateString = dateString.replace(/[^\d]/g, "");
-    if (dateString.match(/\d{1,2}.\d{4}/)) {
-        // MMYYYY
-        month = cleanDateString.slice(0, 2);
-        year = cleanDateString.slice(2);
-    }
-    else if (dateString.match(/\d{4}.\d{1,2}/)) {
-        // YYYYMM
-        year = cleanDateString.slice(0, 4);
-        month = cleanDateString.slice(4);
-    }
-    const date = new Date(`${year}/${month}`);
-    return date;
-}
-const parseDates = (str) => {
-    const date1 = str.split(" - ")[0] || "";
-    const date2 = str.split(" - ")[1] || "";
-    return [parseDate(date1), parseDate(date2)];
-};
-const formatToPattern = (format) => {
-    return `${format} - ${format}`
-        .replace(/YYYY/g, "Y")
-        .replace(/MM/g, "m")
-        .replace(/[^YMm\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: {
-            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: parseDates, autofix: "pad", overwrite: true }));
-});
-const MonthRangePicker = forwardRef((inProps, ref) => {
-    // prop destruction
-    const props = useThemeProps({ props: inProps, name: "MonthRangePicker" });
-    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast, required, 
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx, className, format = "YYYY/MM", size, ...innerProps } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    const innerRef = 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) : undefined), [value]);
-    // 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]);
-    return (React__default.createElement(MonthRangePickerRoot, 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 },
-                    }, error: error, className: className, sx: {
-                        ...sx,
-                        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-                        fontFamily: "monospace",
-                    }, endDecorator: React__default.createElement(IconButton, { variant: "plain", onClick: handleCalendarToggle, "aria-label": "Toggle Calendar", "aria-controls": "month-range-picker-popper", "aria-haspopup": "dialog", "aria-expanded": open },
-                        React__default.createElement(CalendarTodayIcon, null)), label: label, helperText: helperText }),
-                open && (React__default.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) },
-                    React__default.createElement(StyledPopper, { id: "month-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, { view: "month", views: ["month"], rangeSelection: true, defaultValue: calendarValue, onChange: handleCalendarChange, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
-                            React__default.createElement(DialogActions, { sx: {
-                                    p: 1,
-                                } },
-                                React__default.createElement(Button, { size: size, variant: "plain", color: "neutral", onClick: () => {
-                                        setValue("");
-                                        setAnchorEl(null);
-                                    } }, "Clear"))))))))));
-});
-MonthRangePicker.displayName = "MonthRangePicker";
-
-export { MonthRangePicker };

package/dist/components/NavigationGroup/NavigationGroup.js

@@ -1,42 +0,0 @@
-import React__default from 'react';
-import { styled, AccordionSummary as AccordionSummary$1, accordionSummaryClasses, AccordionDetails as AccordionDetails$1, Accordion, Stack } from '@mui/joy';
-
-const AccordionSummary = styled(AccordionSummary$1, {
-    name: "NavigationGroup",
-    slot: "Summary",
-    shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level",
-})(({ theme, useIcon, level }) => ({
-    [`& .${accordionSummaryClasses.button}`]: {
-        padding: theme.spacing(4, 6, 4, (useIcon ? 6 : 8) + (level || 0) * 8),
-        [`&.${accordionSummaryClasses.expanded}`]: {
-            color: theme.palette.primary.plainColor,
-            "--Icon-color": theme.palette.primary.plainColor,
-        },
-    },
-}));
-const AccordionDetails = styled(AccordionDetails$1, {
-    name: "NavigationGroup",
-    slot: "Details",
-})(({ theme }) => ({
-    "--AccordionDetails-transition": "grid-template-rows 0.2s ease, padding-block 0.2s ease",
-    backgroundColor: theme.palette.background.level1,
-}));
-function NavigationGroup(props) {
-    // prop destruction
-    const { title, children, startDecorator, level, ...rest } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (React__default.createElement(Accordion, { ...rest },
-        React__default.createElement(AccordionSummary, { useIcon: !!startDecorator, level: level },
-            React__default.createElement(Stack, { direction: "row", gap: 4 },
-                startDecorator,
-                title)),
-        React__default.createElement(AccordionDetails, null, children)));
-}
-
-export { NavigationGroup };