@ceed/cds 1.2.4-next.2 → 1.2.4

package/dist/index.cjs

@@ -4129,53 +4129,23 @@ var import_react26 = __toESM(require("react"));
 var import_joy34 = require("@mui/joy");
 var import_framer_motion21 = require("framer-motion");
 var MotionDrawer = (0, import_framer_motion21.motion)(import_joy34.Drawer);
+var StyledDrawer = (0, import_joy34.styled)(MotionDrawer)(({ theme, size = "md" }) => ({
+  "--Drawer-horizontalSize": {
+    sm: "360px",
+    md: "600px",
+    lg: "900px"
+  }[size],
+  [`& .${import_joy34.drawerClasses.content}`]: {
+    bgcolor: "transparent",
+    boxShadow: "none",
+    [theme.breakpoints.down("md")]: {
+      width: "100%"
+    }
+  }
+}));
 var Drawer = (props) => {
-  const { children, size = "md", ...innerProps } = props;
-  const theme = (0, import_joy34.useTheme)();
-  return /* @__PURE__ */ import_react26.default.createElement(
-    MotionDrawer,
-    {
-      ...innerProps,
-      size,
-      slotProps: {
-        ...innerProps.slotProps,
-        content: {
-          ...innerProps.slotProps?.content,
-          sx: {
-            // @ts-expect-error: slotProps 는 fn을 넘길수 있어서 인터페이스 에러가 발생하지만 우리는 커스텀을 이정도로 허용하지 않을것이라 무시하고 쓴다.
-            ...innerProps.slotProps?.content?.sx,
-            bgcolor: "transparent",
-            boxShadow: "none",
-            [theme.breakpoints.down("md")]: {
-              width: "100%"
-            }
-          }
-        },
-        // HACK: MUI 5 & 6 버전을 함께 사용하면서 @mui/base & @mui/system 의 참조가 꼬인다. 전부 mui 6 기반으로 업그레이드 하기 전까지는 임시로 아래와 같이 복제하여 사용한다.
-        root: {
-          ...innerProps.slotProps?.root,
-          sx: {
-            // @ts-expect-error: slotProps 는 fn을 넘길수 있어서 인터페이스 에러가 발생하지만 우리는 커스텀을 이정도로 허용하지 않을것이라 무시하고 쓴다.
-            ...innerProps.slotProps?.root?.sx,
-            "--Drawer-horizontalSize": {
-              sm: "360px",
-              md: "600px",
-              lg: "900px"
-            }[size]
-          }
-        }
-      },
-      sx: {
-        ...props.sx,
-        "--Drawer-horizontalSize": {
-          sm: "360px",
-          md: "600px",
-          lg: "900px"
-        }[size]
-      }
-    },
-    children
-  );
+  const { children, ...innerProps } = props;
+  return /* @__PURE__ */ import_react26.default.createElement(StyledDrawer, { ...innerProps }, children);
 };
 Drawer.displayName = "Drawer";
 

package/dist/index.js

@@ -56,7 +56,7 @@ var init_rehype_accent = __esm({
 
 // src/index.ts
 import {
-  useTheme as useTheme3,
+  useTheme as useTheme2,
   useColorScheme,
   useThemeProps as useThemeProps9,
   ButtonGroup,
@@ -124,7 +124,7 @@ import {
   chipClasses,
   CircularProgress as CircularProgress2,
   circularProgressClasses,
-  drawerClasses,
+  drawerClasses as drawerClasses2,
   LinearProgress as LinearProgress2,
   linearProgressClasses,
   List,
@@ -4094,64 +4094,38 @@ DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/Drawer/Drawer.tsx
 import React24 from "react";
-import { Drawer as JoyDrawer, useTheme as useTheme2 } from "@mui/joy";
+import {
+  Drawer as JoyDrawer,
+  styled as styled13,
+  drawerClasses
+} from "@mui/joy";
 import { motion as motion21 } from "framer-motion";
 var MotionDrawer = motion21(JoyDrawer);
+var StyledDrawer = styled13(MotionDrawer)(({ theme, size = "md" }) => ({
+  "--Drawer-horizontalSize": {
+    sm: "360px",
+    md: "600px",
+    lg: "900px"
+  }[size],
+  [`& .${drawerClasses.content}`]: {
+    bgcolor: "transparent",
+    boxShadow: "none",
+    [theme.breakpoints.down("md")]: {
+      width: "100%"
+    }
+  }
+}));
 var Drawer = (props) => {
-  const { children, size = "md", ...innerProps } = props;
-  const theme = useTheme2();
-  return /* @__PURE__ */ React24.createElement(
-    MotionDrawer,
-    {
-      ...innerProps,
-      size,
-      slotProps: {
-        ...innerProps.slotProps,
-        content: {
-          ...innerProps.slotProps?.content,
-          sx: {
-            // @ts-expect-error: slotProps 는 fn을 넘길수 있어서 인터페이스 에러가 발생하지만 우리는 커스텀을 이정도로 허용하지 않을것이라 무시하고 쓴다.
-            ...innerProps.slotProps?.content?.sx,
-            bgcolor: "transparent",
-            boxShadow: "none",
-            [theme.breakpoints.down("md")]: {
-              width: "100%"
-            }
-          }
-        },
-        // HACK: MUI 5 & 6 버전을 함께 사용하면서 @mui/base & @mui/system 의 참조가 꼬인다. 전부 mui 6 기반으로 업그레이드 하기 전까지는 임시로 아래와 같이 복제하여 사용한다.
-        root: {
-          ...innerProps.slotProps?.root,
-          sx: {
-            // @ts-expect-error: slotProps 는 fn을 넘길수 있어서 인터페이스 에러가 발생하지만 우리는 커스텀을 이정도로 허용하지 않을것이라 무시하고 쓴다.
-            ...innerProps.slotProps?.root?.sx,
-            "--Drawer-horizontalSize": {
-              sm: "360px",
-              md: "600px",
-              lg: "900px"
-            }[size]
-          }
-        }
-      },
-      sx: {
-        ...props.sx,
-        "--Drawer-horizontalSize": {
-          sm: "360px",
-          md: "600px",
-          lg: "900px"
-        }[size]
-      }
-    },
-    children
-  );
+  const { children, ...innerProps } = props;
+  return /* @__PURE__ */ React24.createElement(StyledDrawer, { ...innerProps }, children);
 };
 Drawer.displayName = "Drawer";
 
 // src/components/DialogContent/DialogContent.tsx
-import { DialogContent as JoyDialogContent, styled as styled13 } from "@mui/joy";
+import { DialogContent as JoyDialogContent, styled as styled14 } from "@mui/joy";
 import { motion as motion22 } from "framer-motion";
 var MotionDialogContent = motion22(JoyDialogContent);
-var StyledDialogContent = styled13(MotionDialogContent)(({ theme }) => ({
+var StyledDialogContent = styled14(MotionDialogContent)(({ theme }) => ({
   padding: theme.spacing(0, 6, 5)
 }));
 var DialogContent = StyledDialogContent;
@@ -4161,10 +4135,10 @@ DialogContent.displayName = "DialogContent";
 var DialogContent_default = DialogContent;
 
 // src/components/DialogTitle/DialogTitle.tsx
-import { DialogTitle as JoyDialogTitle, styled as styled14 } from "@mui/joy";
+import { DialogTitle as JoyDialogTitle, styled as styled15 } from "@mui/joy";
 import { motion as motion23 } from "framer-motion";
 var MotionDialogTitle = motion23(JoyDialogTitle);
-var StyledDialogTitle = styled14(MotionDialogTitle)(({ theme }) => ({
+var StyledDialogTitle = styled15(MotionDialogTitle)(({ theme }) => ({
   padding: theme.spacing(4, 6)
 }));
 var DialogTitle = StyledDialogTitle;
@@ -4183,18 +4157,18 @@ import {
   ModalDialog as JoyModalDialog,
   ModalClose as JoyModalClose,
   ModalOverflow as JoyModalOverflow,
-  styled as styled15
+  styled as styled16
 } from "@mui/joy";
 import { motion as motion24 } from "framer-motion";
 var MotionModal = motion24(JoyModal);
 var Modal = MotionModal;
 Modal.displayName = "Modal";
-var StyledModalDialog = styled15(JoyModalDialog)({
+var StyledModalDialog = styled16(JoyModalDialog)({
   padding: 0
 });
 var ModalDialog = StyledModalDialog;
 ModalDialog.displayName = "ModalDialog";
-var MotionModalClose = styled15(motion24(JoyModalClose))(({ theme }) => ({
+var MotionModalClose = styled16(motion24(JoyModalClose))(({ theme }) => ({
   top: theme.spacing(3),
   right: theme.spacing(6)
 }));
@@ -4210,8 +4184,8 @@ function ModalFrame(props) {
 ModalFrame.displayName = "ModalFrame";
 
 // src/components/DialogFrame/DialogFrame.tsx
-import { styled as styled16 } from "@mui/joy";
-var StyledDialogFrame = styled16(ModalDialog, {
+import { styled as styled17 } from "@mui/joy";
+var StyledDialogFrame = styled17(ModalDialog, {
   name: "Dialog",
   slot: "Root"
 })({
@@ -4425,15 +4399,15 @@ import React31, {
 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
-import { styled as styled17, useThemeProps as useThemeProps6 } from "@mui/joy";
+import { styled as styled18, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
-var StyledPopper3 = styled17(Popper4, {
+var StyledPopper3 = styled18(Popper4, {
   name: "MonthPicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet3 = styled17(Sheet_default, {
+var CalendarSheet3 = styled18(Sheet_default, {
   name: "MonthPicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -4442,7 +4416,7 @@ var CalendarSheet3 = styled17(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var MonthPickerRoot = styled17("div", {
+var MonthPickerRoot = styled18("div", {
   name: "MonthPicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -4675,15 +4649,15 @@ import React32, {
 } from "react";
 import { IMaskInput as IMaskInput4, IMask as IMask4 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
-import { styled as styled18, useThemeProps as useThemeProps7 } from "@mui/joy";
+import { styled as styled19, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
-var StyledPopper4 = styled18(Popper5, {
+var StyledPopper4 = styled19(Popper5, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet4 = styled18(Sheet_default, {
+var CalendarSheet4 = styled19(Sheet_default, {
   name: "MonthRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -4693,7 +4667,7 @@ var CalendarSheet4 = styled18(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var MonthRangePickerRoot = styled18("div", {
+var MonthRangePickerRoot = styled19("div", {
   name: "MonthRangePicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -4929,11 +4903,11 @@ import {
   Accordion as JoyAccordion2,
   AccordionSummary as JoyAccordionSummary2,
   AccordionDetails as JoyAccordionDetails2,
-  styled as styled19,
+  styled as styled20,
   accordionSummaryClasses,
   Stack as Stack2
 } from "@mui/joy";
-var AccordionSummary2 = styled19(JoyAccordionSummary2, {
+var AccordionSummary2 = styled20(JoyAccordionSummary2, {
   name: "NavigationGroup",
   slot: "Summary",
   shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level"
@@ -4946,7 +4920,7 @@ var AccordionSummary2 = styled19(JoyAccordionSummary2, {
     }
   }
 }));
-var AccordionDetails2 = styled19(JoyAccordionDetails2, {
+var AccordionDetails2 = styled20(JoyAccordionDetails2, {
   name: "NavigationGroup",
   slot: "Details"
 })(({ theme }) => ({
@@ -4964,10 +4938,10 @@ import {
   ListItem as JoyListItem,
   ListItemButton as JoyListItemButton,
   ListItemDecorator as JoyListItemDecorator,
-  styled as styled20,
+  styled as styled21,
   listItemButtonClasses
 } from "@mui/joy";
-var ListItemButton = styled20(JoyListItemButton, {
+var ListItemButton = styled21(JoyListItemButton, {
   name: "NavigationItem",
   slot: "Button",
   shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level"
@@ -5050,7 +5024,7 @@ Navigator.displayName = "Navigator";
 // src/components/PercentageInput/PercentageInput.tsx
 import React36, { useCallback as useCallback13, useMemo as useMemo11, useState as useState11 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
-import { styled as styled21, useThemeProps as useThemeProps8 } from "@mui/joy";
+import { styled as styled22, useThemeProps as useThemeProps8 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
@@ -5079,7 +5053,7 @@ var TextMaskAdapter11 = React36.forwardRef(
     );
   }
 );
-var PercentageInputRoot = styled21(Input_default, {
+var PercentageInputRoot = styled22(Input_default, {
   name: "PercentageInput",
   slot: "Root",
   overridesResolver: (props, styles) => styles.root
@@ -5192,15 +5166,15 @@ import {
   StepIndicator as JoyStepIndicator,
   stepClasses,
   stepIndicatorClasses,
-  styled as styled22
+  styled as styled23
 } from "@mui/joy";
 import CheckIcon from "@mui/icons-material/Check";
 import { motion as motion28 } from "framer-motion";
-var Step = styled22(JoyStep)({});
+var Step = styled23(JoyStep)({});
 Step.displayName = "Step";
-var StepIndicator = styled22(JoyStepIndicator)({});
+var StepIndicator = styled23(JoyStepIndicator)({});
 StepIndicator.displayName = "StepIndicator";
-var StyledStepper = styled22(JoyStepper)(({ theme }) => ({
+var StyledStepper = styled23(JoyStepper)(({ theme }) => ({
   "--StepIndicator-size": "24px",
   "--Step-gap": theme.spacing(2),
   "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
@@ -5271,12 +5245,12 @@ Stepper.displayName = "Stepper";
 import React39 from "react";
 import {
   Switch as JoySwitch,
-  styled as styled23,
+  styled as styled24,
   switchClasses
 } from "@mui/joy";
 import { motion as motion29 } from "framer-motion";
 var MotionSwitch = motion29(JoySwitch);
-var StyledThumb = styled23(motion29.div)({
+var StyledThumb = styled24(motion29.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -5599,7 +5573,7 @@ import React41, {
   useRef as useRef8,
   useState as useState12
 } from "react";
-import { styled as styled24, Input as Input2 } from "@mui/joy";
+import { styled as styled25, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
 import MuiClearIcon from "@mui/icons-material/ClearRounded";
@@ -5621,7 +5595,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = styled24(Input2)({
+var VisuallyHiddenInput = styled25(Input2)({
   width: "1px",
   height: "1px",
   overflow: "hidden",
@@ -5630,18 +5604,18 @@ var VisuallyHiddenInput = styled24(Input2)({
   clipPath: "inset(50%)",
   position: "absolute"
 });
-var PreviewRoot = styled24(Stack_default, {
+var PreviewRoot = styled25(Stack_default, {
   name: "Uploader",
   slot: "PreviewRoot"
 })({});
-var UploadCard = styled24(Card, {
+var UploadCard = styled25(Card, {
   name: "Uploader",
   slot: "UploadCard"
 })(({ theme }) => ({
   padding: theme.spacing(2.5),
   border: `1px solid ${theme.palette.neutral.outlinedBorder}`
 }));
-var UploadFileIcon = styled24(MuiUploadFileIcon, {
+var UploadFileIcon = styled25(MuiUploadFileIcon, {
   name: "Uploader",
   slot: "UploadFileIcon"
 })(({ theme }) => ({
@@ -5649,7 +5623,7 @@ var UploadFileIcon = styled24(MuiUploadFileIcon, {
   width: "32px",
   height: "32px"
 }));
-var ClearIcon2 = styled24(MuiClearIcon, {
+var ClearIcon2 = styled25(MuiClearIcon, {
   name: "Uploader",
   slot: "ClearIcon"
 })(({ theme }) => ({
@@ -5727,13 +5701,13 @@ var Preview = (props) => {
     getFileSize(file.size)
   )), /* @__PURE__ */ React41.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React41.createElement(ClearIcon2, null))))));
 };
-var UploaderRoot = styled24(Stack_default, {
+var UploaderRoot = styled25(Stack_default, {
   name: "Uploader",
   slot: "root"
 })(({ theme }) => ({
   gap: theme.spacing(2)
 }));
-var FileDropZone = styled24(Sheet_default, {
+var FileDropZone = styled25(Sheet_default, {
   name: "Uploader",
   slot: "dropZone",
   shouldForwardProp: (prop) => prop !== "error"
@@ -5751,7 +5725,7 @@ var FileDropZone = styled24(Sheet_default, {
     border: error ? `1px solid ${theme.palette.danger.outlinedBorder}` : state === "idle" ? `1px solid ${theme.palette.neutral.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`
   })
 );
-var UploaderIcon = styled24(MuiFileUploadIcon, {
+var UploaderIcon = styled25(MuiFileUploadIcon, {
   name: "Uploader",
   slot: "iconContainer",
   shouldForwardProp: (prop) => prop !== "error"
@@ -6165,7 +6139,7 @@ export {
   dialogContentClasses,
   dialogTitleClasses,
   dividerClasses,
-  drawerClasses,
+  drawerClasses2 as drawerClasses,
   extendTheme,
   formControlClasses,
   formHelperTextClasses,
@@ -6210,6 +6184,6 @@ export {
   tooltipClasses2 as tooltipClasses,
   typographyClasses,
   useColorScheme,
-  useTheme3 as useTheme,
+  useTheme2 as useTheme,
   useThemeProps9 as useThemeProps
 };