@ceed/cds 1.11.0-next.1 → 1.11.1

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/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";
 

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";