@ceed/cds 1.11.0 → 1.12.0

package/dist/components/Alert/Alert.d.ts

@@ -1,11 +1,20 @@
 import React from 'react';
 import { AlertProps } from '@mui/joy';
 import { MotionProps } from 'framer-motion';
-declare function Alert(props: {
+declare const titleLevelMapping: {
+    readonly sm: "title-sm";
+    readonly md: "title-md";
+    readonly lg: "title-lg";
+};
+type AlertSize = keyof typeof titleLevelMapping;
+interface CustomAlertProps {
     content: React.ReactNode;
     actions?: React.ReactNode;
     title?: string;
-} & AlertProps & MotionProps): React.JSX.Element;
+    size?: AlertSize;
+}
+type AlertComponentProps = CustomAlertProps & Omit<AlertProps, 'content' | 'actions' | 'title' | 'size'> & Omit<MotionProps, 'children'>;
+declare function Alert(props: AlertComponentProps): React.JSX.Element;
 declare namespace Alert {
     var displayName: string;
 }

package/dist/components/Uploader/Uploader.d.ts

@@ -29,5 +29,10 @@ declare const Uploader: React.MemoExoticComponent<(props: {
      */
     maxFileTotalSize: number;
     uploaded?: UserUpload[] | undefined;
+    /**
+     * 모든 안내 메세지/에러 메세지보다 해당 메세지가 우선적으로 보여진다.
+     * 기본 안내 메세지 및 에러 메세지를 사용하려면 해당 필드를 비워야 한다.
+     */
+    helperText?: string | undefined;
 }) => React.JSX.Element>;
 export { Uploader };

package/dist/index.cjs

@@ -320,10 +320,20 @@ var MotionAlert = (0, import_joy4.styled)((0, import_framer_motion3.motion)(impo
   alignItems: "flex-start",
   fontWeight: "unset"
 });
+var titleLevelMapping = {
+  sm: "title-sm",
+  md: "title-md",
+  lg: "title-lg"
+};
+var contentLevelMapping = {
+  sm: "body-xs",
+  md: "body-sm",
+  lg: "body-md"
+};
 function Alert(props) {
-  const { title, content, actions, color = "primary", ...innerProps } = props;
+  const { title, content, actions, color = "primary", size = "md", ...innerProps } = props;
   const invertedColors = props.invertedColors || props.variant === "solid";
-  return /* @__PURE__ */ import_react3.default.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors }, /* @__PURE__ */ import_react3.default.createElement(Stack_default, null, title && /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: "title-md", fontWeight: "bold", color }, title), /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: "body-sm", fontWeight: 500, color }, content)));
+  return /* @__PURE__ */ import_react3.default.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors, size }, /* @__PURE__ */ import_react3.default.createElement(Stack_default, null, title && /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: titleLevelMapping[size], fontWeight: "bold", color }, title), /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: contentLevelMapping[size], fontWeight: 500, color }, content)));
 }
 Alert.displayName = "Alert";
 
@@ -5906,7 +5916,9 @@ var Uploader = import_react48.default.memo(
       onChange,
       label,
       disabled,
-      onDelete
+      onDelete,
+      error: errorProp,
+      helperText: helperTextProp
     } = props;
     const dropZoneRef = (0, import_react48.useRef)(null);
     const inputRef = (0, import_react48.useRef)(null);
@@ -5925,6 +5937,9 @@ var Uploader = import_react48.default.memo(
       [accepts]
     );
     const helperText = (0, import_react48.useMemo)(() => {
+      if (helperTextProp) {
+        return helperTextProp;
+      }
       const [allAcceptedTypes, acceptedTypes] = [
         accepts.filter((accept2) => ["image/*", "video/*", "audio/*"].includes(accept2)).map((accept2) => {
           const [type] = accept2.split("/");
@@ -5950,8 +5965,8 @@ var Uploader = import_react48.default.memo(
         helperTexts.push(`Up to ${maxCount} ${maxCount === 1 ? "file" : "files"}`);
       }
       return helperTexts.join(", ");
-    }, [accepts, maxFileTotalSize, maxCount]);
-    const error = (0, import_react48.useMemo)(() => !!errorText || props.error, [props.error, errorText]);
+    }, [accepts, maxFileTotalSize, maxCount, helperTextProp]);
+    const error = (0, import_react48.useMemo)(() => !!errorText || errorProp, [errorProp, errorText]);
     const showDropZone = (0, import_react48.useMemo)(
       () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
       [files, maxCount, uploaded]

package/dist/index.js

@@ -224,10 +224,20 @@ var MotionAlert = styled(motion3(JoyAlert))({
   alignItems: "flex-start",
   fontWeight: "unset"
 });
+var titleLevelMapping = {
+  sm: "title-sm",
+  md: "title-md",
+  lg: "title-lg"
+};
+var contentLevelMapping = {
+  sm: "body-xs",
+  md: "body-sm",
+  lg: "body-md"
+};
 function Alert(props) {
-  const { title, content, actions, color = "primary", ...innerProps } = props;
+  const { title, content, actions, color = "primary", size = "md", ...innerProps } = props;
   const invertedColors = props.invertedColors || props.variant === "solid";
-  return /* @__PURE__ */ React3.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors }, /* @__PURE__ */ React3.createElement(Stack_default, null, title && /* @__PURE__ */ React3.createElement(Typography_default, { level: "title-md", fontWeight: "bold", color }, title), /* @__PURE__ */ React3.createElement(Typography_default, { level: "body-sm", fontWeight: 500, color }, content)));
+  return /* @__PURE__ */ React3.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors, size }, /* @__PURE__ */ React3.createElement(Stack_default, null, title && /* @__PURE__ */ React3.createElement(Typography_default, { level: titleLevelMapping[size], fontWeight: "bold", color }, title), /* @__PURE__ */ React3.createElement(Typography_default, { level: contentLevelMapping[size], fontWeight: 500, color }, content)));
 }
 Alert.displayName = "Alert";
 
@@ -5884,7 +5894,9 @@ var Uploader = React45.memo(
       onChange,
       label,
       disabled,
-      onDelete
+      onDelete,
+      error: errorProp,
+      helperText: helperTextProp
     } = props;
     const dropZoneRef = useRef10(null);
     const inputRef = useRef10(null);
@@ -5903,6 +5915,9 @@ var Uploader = React45.memo(
       [accepts]
     );
     const helperText = useMemo14(() => {
+      if (helperTextProp) {
+        return helperTextProp;
+      }
       const [allAcceptedTypes, acceptedTypes] = [
         accepts.filter((accept2) => ["image/*", "video/*", "audio/*"].includes(accept2)).map((accept2) => {
           const [type] = accept2.split("/");
@@ -5928,8 +5943,8 @@ var Uploader = React45.memo(
         helperTexts.push(`Up to ${maxCount} ${maxCount === 1 ? "file" : "files"}`);
       }
       return helperTexts.join(", ");
-    }, [accepts, maxFileTotalSize, maxCount]);
-    const error = useMemo14(() => !!errorText || props.error, [props.error, errorText]);
+    }, [accepts, maxFileTotalSize, maxCount, helperTextProp]);
+    const error = useMemo14(() => !!errorText || errorProp, [errorProp, errorText]);
     const showDropZone = useMemo14(
       () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
       [files, maxCount, uploaded]