@ceed/cds 0.0.186 → 0.0.187-treeshaking.1

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,8 @@
+import { Dropdown as Dropdown$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionDropdown = motion(Dropdown$1);
+const Dropdown = MotionDropdown;
+Dropdown.displayName = "Dropdown";
+
+export { Dropdown };

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

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

package/dist/components/Dropdown/index.js

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

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,15 @@
+import { FormControl as FormControl$1, styled, formLabelClasses } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionFormControl = motion(FormControl$1);
+const FormControl = styled(MotionFormControl)(({ theme }) => ({
+    [`.${formLabelClasses.root}`]: {
+        display: "block",
+    },
+    [`.${formLabelClasses.asterisk}`]: {
+        marginLeft: theme.spacing(0.5),
+    },
+}));
+FormControl.displayName = "FormControl";
+
+export { FormControl };

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

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

package/dist/components/FormControl/index.js

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

package/dist/components/FormHelperText/FormHelperText.js

@@ -0,0 +1,8 @@
+import { FormHelperText as FormHelperText$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionFormHelperText = motion(FormHelperText$1);
+const FormHelperText = MotionFormHelperText;
+FormHelperText.displayName = "FormHelperText";
+
+export { FormHelperText };

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

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

package/dist/components/FormHelperText/index.js

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

package/dist/components/FormLabel/FormLabel.js

@@ -0,0 +1,8 @@
+import { FormLabel as FormLabel$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionFormLabel = motion(FormLabel$1);
+const FormLabel = MotionFormLabel;
+FormLabel.displayName = "FormLabel";
+
+export { FormLabel };

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

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

package/dist/components/FormLabel/index.js

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

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

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

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,20 @@
+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.d.ts

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

package/dist/components/IconButton/index.js

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

package/dist/components/Input/Input.d.ts

@@ -15,7 +15,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<{
     fullWidth?: boolean | undefined;
     startDecorator?: React.ReactNode;
     size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").InputPropsSizeOverrides> | 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").InputPropsVariantOverrides> | undefined;
 } & import("@mui/joy").InputSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;

package/dist/components/Input/Input.js

@@ -0,0 +1,60 @@
+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.d.ts

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

package/dist/components/Input/index.js

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

package/dist/components/InsetDrawer/InsetDrawer.js

@@ -0,0 +1,30 @@
+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/InsetDrawer/index.d.ts

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

package/dist/components/Markdown/Markdown.d.ts

@@ -5,28 +5,12 @@ import { TypographyProps } from "@mui/joy";
 import { TypographySystem } from "@mui/joy";
 import { TextColor } from "@mui/joy/styles/types";
 declare const Markdown: {
-    (props: {
-        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    } & import("@mui/joy").TypographySlotsAndSlotProps & Omit<import("@mui/joy/styles/types").SystemProps, "color"> & {
-        children?: React.ReactNode;
-        color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").TypographyPropsColorOverrides> | undefined;
-        endDecorator?: React.ReactNode;
-        gutterBottom?: boolean | undefined;
-        level?: "inherit" | keyof TypographySystem | undefined;
-        levelMapping?: Partial<Record<"inherit" | keyof TypographySystem, string>> | undefined;
-        noWrap?: boolean | undefined;
-        startDecorator?: React.ReactNode;
-        textColor?: TextColor | undefined;
-        sx?: import("@mui/joy/styles/types").SxProps | undefined;
-        variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").TypographyPropsVariantOverrides> | undefined;
-    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "p" | "children" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "sx" | "endDecorator" | "startDecorator" | "component" | keyof import("@mui/joy").TypographySlotsAndSlotProps | "gutterBottom" | "level" | "levelMapping" | "noWrap" | "textColor"> & MotionProps & {
-        defaultLevel?: "marketing-lg" | "marketing-md" | "marketing-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "body-xs" | undefined;
-        accentColor?: TextColor | undefined;
-        defaultLinkAction?: "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop" | undefined;
-        markdownOptions?: import("react-markdown").Options | undefined;
-        boldFontWeight?: "sm" | "md" | "lg" | "xl" | undefined;
+    (props: TypographyProps & MotionProps & {
+        defaultLevel?: Exclude<keyof TypographySystem, "h1" | "h2" | "h3" | "h4">;
+        accentColor?: TextColor;
+        defaultLinkAction?: "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop";
+        markdownOptions?: Options;
+        boldFontWeight?: "sm" | "md" | "lg" | "xl";
     }): React.JSX.Element;
     displayName: string;
 };

package/dist/components/Markdown/Markdown.js

@@ -0,0 +1,36 @@
+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/Markdown/index.d.ts

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

package/dist/components/Menu/Menu.js

@@ -0,0 +1,43 @@
+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.d.ts

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

package/dist/components/Menu/index.js

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

package/dist/components/MenuButton/MenuButton.js

@@ -0,0 +1,26 @@
+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.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mui/base").ModalOwnProps, "children" | "container" | "open" | "disablePortal" | "keepMounted" | "disableAutoFocus" | "disableEnforceFocus" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableScrollLock" | "hideBackdrop"> & {
     onClose?: ((event: {}, reason: "escapeKeyDown" | "backdropClick" | "closeClick") => void) | undefined;
-    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+    sx?: import("@mui/joy/styles/types/theme.js").SxProps | undefined;
 } & import("@mui/joy").ModalSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "children" | "container" | "sx" | "open" | "onClose" | "disablePortal" | "keepMounted" | "disableAutoFocus" | "disableEnforceFocus" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableScrollLock" | "hideBackdrop" | keyof import("@mui/joy").ModalSlotsAndSlotProps>>;
@@ -15,7 +15,7 @@ declare const ModalDialog: import("@emotion/styled").StyledComponent<{
     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;
@@ -24,14 +24,14 @@ export { ModalDialog };
 declare const ModalClose: import("@emotion/styled").StyledComponent<Omit<{
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ModalClosePropsColorOverrides> | undefined;
     size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").ModalClosePropsSizeOverrides> | 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").ModalClosePropsVariantOverrides> | undefined;
 } & import("@mui/joy").ModalCloseSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "color" | "variant" | "sx" | "size" | keyof import("@mui/joy").ModalCloseSlotsAndSlotProps> & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, {}, {}>;
 export { ModalClose };
 declare const ModalOverflow: import("framer-motion").CustomDomComponent<{
-    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+    sx?: import("@mui/joy/styles/types/theme.js").SxProps | undefined;
 } & import("@mui/joy").ModalOverflowSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "sx" | keyof import("@mui/joy").ModalOverflowSlotsAndSlotProps>>;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,43 @@
+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/Modal/index.d.ts

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

package/dist/components/MonthPicker/MonthPicker.d.ts

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